finlay - Tumblr blog

finlay · 13 years ago

Text

Prototype iPhone/iPad Apps with Hype

You’ve got a great idea for an iPad App, but you don’t have the technical skills to communicate that idea through XCode and Objective-C to your friends, so what can you do? Why not try Hype from Tumult. Hype creates HTML 5 webpages with exciting animations and interactions without the need to write any code.

Now this isn't so much a review of Hype, but more what you can do with Hype to simulate a native app running on the iPhone or iPad.

Hype includes templates and preferences that help you design interfaces perfectly for the iPhone and iPad dimensions. The issue is though, Hype exports these as web pages. Ok, so that's not so bad, but you still get the annoying navigation bars associated with Safari across the top of your prototype app that kill the illusion.

Fortunately Apple have created a little bit of code you can stick in any HTML file that tells your iOS Device to treat that webpage as a WebApp, so your webpage can be saved to the home screen of an iOS Device, and opened without having to go into Safari, and without the navigation bar across the top of the browser.

So here is what you'll need:

1. A Mac

2. Hype (14-day trial available from www.tumultco.com/hype or you you can purchase it from the Mac App Store)

3. Dropbox (2GB free account available HERE)

4. A text/code Editor (something like TextWrangler, Espresso etc)

(Hype is super easy to use and you'll pick it up very quickly)

Once you've got your Hype project complete you're going to want to export that to Dropbox. This is a feature supported by Hype. Once your project has exported, Hype will give you the option to copy the link to your exported project. Do that! (You can send anyone that link and they can view your project. Neat!)

NOW FOR THE MAGIC CODE!

You'll have to find your Dropbox folder now. It's usually in your user folder next to your Documents, Pictures, Movie folders.

In that folder you'll find 'Public' in there, you'll find a folder that is the name of your project. In there is the HTML file that your Hype project lives on. (That's the page the link you copied earlier leads to). We are now going to need to go into there and add one extra line of code so that your iOS Device will let you this is a Web App.

Open the 'projectname.html' (replace 'projectname' with your real project name) with your text editor. (I like Espresso from MacRabbit) In that file you should see some nice HTML code. If you look closely towards the top of that file you should see '<head>' and then a few lines later '</head>' All the code contained within here is the setup code for that page. We are going to define in here that we want this Web Page to be treated as Web App.

So somewhere in between '<head>' and '</head>' find an empty line, or make one, and insert this line of code:

Now save that file and close it, and you're done!

To open that on your iOS Device, open that link you copied earlier, or right click on your 'projectname.html' file, choose Dropbox, and Copy Public Link, and see what the page looks like. This time it should open in Safari just like a normal webpage.

To save this to your home screen click on the box icon with the arrow on the Safari navigation bar, then choose 'Add to Home Screen'. Name this what you like, and it will now be saved to your home screen. If you tap on that icon it will now launch like a native App!

(To add stuff like a custom icon, there are lines of code for that too. For example, <link rel="apple-touch-icon" href="icon.png"/> will let you choose your own icon. It will have to be in your project folder next to your 'projectname.html' file remember! For more advanced information, hit up http://sixrevisions.com/web-development/html5-iphone-app)

#iphone #ipad #html5 #prototype #hype #mac #os x

5 notes · View notes

finlay · 13 years ago

Text

Busy Busy!

I don't know what happened to the time, but almost already 1 month into semester 2! I suppose times flies when you're having fun! So what's been keeping me busy?

Well work the The Magdalen is never ending. One magazine ends, another ends. (Not to mention planning the next again magazine too!)

I've been doing some fun work with one of my older clients, Domenica More Gordon (she's expanded her range of cards recently...check them out!).

Finally my latest client is Singderella. They have some exciting new stuff in the pipe line, so if music is your thing, then do check it out!

Well actually that's not all there is to life right now...there is that little thing called 'Uni'. Third year is without question the most fun year yet. Last semester we were developing complex data visualisations using processing and arduino, and this semester i'm designing two different iPad Apps.

If the above list of activities doesn't say 'heaven' to you then...well you're not me!

F

#busy #work #ipad #domenica more gordon #singderella #The Magdalen

28 notes · View notes

finlay · 13 years ago

Quote

Only dullards crippled into cretinism by a fear of being thought pretentious could be so dumb as to believe that there is a distinction between design and use, between form and function, between style and substance. If the unprecedented and phenomenal success of Steve Jobs at Apple proves anything it is that those commentators and tech-bloggers and “experts” who sneered at him for producing sleek, shiny, well-designed products or who denigrated the man because he was not an inventor or originator of technology himself missed the point in such a fantastically stupid way that any employer would surely question the purpose of having such people on their payroll, writing for their magazines or indeed making any decisions on which lives, destinies or fortunes depended.

2 notes · View notes

finlay · 14 years ago

Photo

2 notes · View notes

finlay · 14 years ago

Photo

2 notes · View notes

finlay · 14 years ago

Link

I've been doing more and more freelance Web Design recently, and here is my latest creation.

It's the site for a Watercolourist Hugh Buchanan. Have a look, and let me know what you think.

If you are interested in hiring me, please do get in touch at [email protected]

F

1 note · View note

finlay · 14 years ago

Text

Dynamic CSS without using JavaScript

Let's say you want some dynamic graphics on your website, but you don't want to, or don't know how to use JavaScript.

Well PHP might be the answer. The first thing I thought was, 'How do a I get PHP into my CSS File?'. Well you don't!

Inline CSS - most people hate it, but in this case, it can be useful.

<style>

#testdiv {

height: 50px;

background-color: red;

<?php

echo "width: " . 250 . "px;"

}

</style>

Stick that in your <head></head> tags, and PHP will write the width command for you! Now this is a very, very simple example, but use your imagination, and you'd be surprised what you can do!

#php #css #html #awesome

3 notes · View notes

finlay · 14 years ago

Text

Rankiac Review | Keyword Tracking, Link Statuses, & Backlink Monitoring

If you wanted to find your website in Google, what would you search for? Possibly your sites name? Well that is one way of people finding you, but they are only going to find you that way, if they are actually looking for you. But if you want people to find you because of what you do, then you need to start thinking about your keywords.

Your keywords, or keyword phrases, are the words and phrases that you would like to appear in Google for. For example, if you search 'Embed Tumblr Into Your Website' this blog will come up in the top few results. That's because it is optimised for those keywords. So how do you track where you rank for those keywords?

Well Rankiac is the answer to your prayers!

Rankiac is a tool which you can use to track all the keywords you could possibly need for your site, or even your competition. By using their comprehensive tools, you can receive daily updates on your sites performance, so you can optimise your site, in real time, for the phrases that you are interested in.

Rankiac gives you the piece of mind that your site is in the place that you want it to be in Google, without you having to do the hardwork every single day.

The system also provides the functionality to monitor links pointing at your site. These are called backlinks.

Backlinks are one of the major factors in Googles rankings, and is used to determine how popular your website is around the internet. Rankiac allows you to monitor these links, so you can ensure that your site is still relevant, and ranking well.

I've found Rankiac to be an invaluable tool in keeping on top of my rankings. Rankiac gives me more time to work on creating great content on my site, without having to keep going back to check my results.

I strongly recommend that you go and try it out, even if keywords are not something you think about much at the moment. Head over to http://rankiac.com/ to start your free trial now!

#rankiac #seo #keywords

17 notes · View notes

finlay · 15 years ago

Text

Embed Your Flickr Photos On Your Site

Here is any easy way to embed your photos from your flickr on your website in form which you can style. I'll even show you how to intergrate this into the famous Lightbox plugin.

We are going to use a little bit of PHP here, so you'll need end your files with .PHP instead of .HTML, .HTM, or .XHTML. Alternatively you can go behind the scenes a bit more at this post.

1. Embed Latest Photo On Your Website

Things you'll need to do -

Get an API Key (Quick, easy & free!)

Get your Flickr ID (Not your username)

Here is the code that you will need to return your latest from your Flickr.

<?php

$flickr_id = ' ';

$api_key = ' ';

$size = 's'; //this can be 's' for small, 't' for thumbnail,'m' for medium, 'b' for big, 'o' for original, or empty for 500px wide.

// EDIT NOTHING UNDER HERE.

$xml = simplexml_load_file('http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key='.$api_key.'&extras=tags&user_id='.$flickr_id.'&page=1&per_page=1');

$photo = $xml->photos->photo;

$farm = $photo->attributes()->farm;

$server = $photo->attributes()->server;

$photoID = $photo->attributes()->id;

$secretCode = $photo->attributes()->secret;

$tags = $photo->attributes()->tags;

$tags_array = explode(" ", $tags);

$title = $photo->attributes()->title;

echo <img src="http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$photoID.'_'.$secretCode.'_'.$size.'.jpg"/>;

?>

So you need to fill in the gaps! First your Flickr ID, then your API Key, then the size that you would like your picture to be displayed at. That's it!

2. Embed All Your Photos On Your Website

So we are taking what we learnt above, and adding a for loop, and a foreach loop. The for loop cycles through every page of photos you have uploaded. The foreach loop then goes through each page and returns each photo on that page. Simple!

<?php

$flickr_id = ' ';

$api_key = ' ';

$size = 's'; //this can be 's' for small, 't' for thumbnail,'m' for medium, 'b' for big, 'o' for original, or empty for 500px wide.

// EDIT NOTHING UNDER HERE.

$xml = simplexml_load_file('http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key='.$api_key.'&extras=tags&user_id='.$flickr_id);

$pages = $xml->photos->attributes()->pages;

for($page=1; $page <=$pages; $page++) {

$xml = simplexml_load_file('http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key='.$api_key.'&extras=tags&user_id='.$flickr_id.'&page='.$page);

foreach($xml->photos->photo as $photo) {

$farm = $photo->attributes()->farm;

$server = $photo->attributes()->server;

$photoID = $photo->attributes()->id;

$secretCode = $photo->attributes()->secret;

$tags = $photo->attributes()->tags;

$tags_array = explode(" ", $tags);

$title = $photo->attributes()->title;

echo '<img src="http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$photoID.'_'.$secretCode.'_'.$size.'.jpg"/>';

}

?>

3. Adding a LightBox Effect

So you've got all your photos onto your website, but now you want to display them in an attractive LightBox. Well first of all head over to Lightbox and download the Scripts and CSS which you need to embed on your page. (Their instructions are great, so i'm not going to take you through that bit!)

For LightBox to reconise pictures you need to add an attribute to a <a href> tag. So we are going to have to generate another URL. You need to add 'rel="lightbox"' into your link.

Here is the code you need to swap -

Swap this

echo '<img src="http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$photoID.'_'.$secretCode.'_'.$size.'.jpg"/>';

For

echo '<a href="http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$photoID.'_'.$secretCode.'.jpg" rel="lightbox" title="'.$title.'"><img src="http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$photoID.'_'.$secretCode.'_'.$size.'.jpg"/></a>';

Hey presto! You have embedded Flickr on your website! Now I don't want to give too much away, but you this should be a pretty good place to start!

Enjoy, Finlay.

1 note · View note

finlay · 15 years ago

Text

Downloading takes Forever!

Today has been a great day. Managed to get dug into some PHP in WordPress. What has been really interesting though is that I'm developing a WordPress site, but also using WordPress as my change log. So for it's worked really well as a change log. I can title posts, tag them, categorise them, embed code snippets and more. But what I an really looking forward to is being able to share everything I've learnt you you, the Internets! If it's already on WordPress (in a private capacity) it shouldn't be that difficult to bring it across to a live blog with more generic examples, right?! Writing about what I've already learnt this year (I've only been coding HTML, CSS and PHP since January 2010) has already proven very useful. I can remind myself of how I did certain things, and share that with people with a simple link. Awesome! Anywho, back to the PHP!

1 note · View note

finlay · 15 years ago

Photo

I can haz ham?

0 notes

finlay · 15 years ago

Text

Embed Tumblr Into Your Website

In my exploration to learn on how to Embed Tumblr into my website, I came across the Tumblr API (Application Programming Interface). As I am no expert in coding, and having very little experience with PHP, XML etc, I wanted to find out how I could Embed Tumblr with the Tumblr API on a basic, and easy to use level.

If you've read my previous post on how to Embed your latest Tweet into your website, then you may have heard me ranting and raving about SimpleXML. Essentially (from what i've learnt so far...), lets you extract specific 'bits' of information from XML files, and do 'stuff' with those 'bits'. Very handy if you want to Embed Tumblr on your website!

If you don't know what an XML File is then that's ok. An XML file is just a really organised way of structuring data. For the likes of the Tumblr API, XML files are used to store all the information in your latest blog posts, so that you can go in and take out only the essential information and do 'stuff' with that.

So let's begin!

1. Retrieving your latest post from Tumblr

To tell Tumblr you want to return your latest post you have to give Tumblr a few pieces of information.

That the post is on your blog

That you want the latest post

The type of post (text, photo, quote...)

Lets get our Tumblr XML Feed up then. We do that like this:

http://finlay.tumblr.com/api/read

If you stick that address into your browsers navigation bar, that will take you to the XML file where all my Tumblr posts are. Because we have not defined any parameters for what we would like Tumblr to return, it will just go ahead and send back everything I've ever written. So we've got to do something about that!

To tell Tumblr what we want back, we had information onto the end of the URL above, and it will send back that information. We start this by adding a '?' to the end of the URL, and then list of the parameters one by one, separated by a '&'.

To tell Tumblr you want to bring back the latest post you have to tell it which post you would like to start at, and and how many posts to return. So as with all things computing, we start at 0, and tell Tumblr to return 1 entry. This is done like this:

http://finlay.tumblr.com/api/read?start=0&num=1

So we've told Tumblr that we want to read from my blog (through the API), from the first post (denoted by 'start=0') and that we want to return 1 post (denoted by 'num=1'). Easy! We're one step closer to Embedding Tumblr on your site!

Now we tell Tumblr what kind of post we would like to return. For the purpose of this demonstration we will return a text post. This is done like so:

http://finlay.tumblr.com/api/read?start=0&num=1&type=text

So stick that into your browser and that will return my latest text post.

2. Finding what we want to Embed and Spitting it Out!

Now that we've got the right information back, we now need to know how to get into that, and bring back only the bits we want. To do so, you need to be able to read the XML file in it's pretty, organised way. Now if you go to that URL we made earlier for returning my latest text post, it won't look that neat. But if you right-click on that page and select 'View Source', your browser will show you the raw XML File. We can then look through this and take out what we want!

So let's assume we want to first return the Title of the Post (but this will work for anything in the XML File). So after a quick inspection we can see that the Title of my latest post is stored in the tag:

<regular-title></regular-title>

So, using SimpleXML in PHP, we can tell our PHP look through for that tag, and then return it's entire contents. (Because that partiucular tag has a hyphen in it, we have to put {' on either side of the tag so that SimpleXML can read it) We do that like so:

$title = $xml->posts->post->{'regular-title'};

In this example i've created a variable called 'title' to give me somewhere to store the title.

We then use the echo command to print that out on my webpage. On my site I wanted to have the title of my latest blog post be a '<h1>' so I concatenated (stuck together) my '<h1>' tags with the title of the blog post in my echo of the title. Like this:

echo '<h1>'.$title.'</h1>';

So now you can do that with the title, just do the same thing with the '<regular-body>' tag to bring back the body of your post. That is, almost, all you need to Embed Tumblr on your website.

But what if you want to only bring back a taster of your latest blog post?

Good question! If you want to Embed Tumblr into your site, it may be useful to give the user a snippet of the blog instead of the whole thing. Well what we can do is take the contents of the '<regular-body>', and tell our PHP that we only want to use X number of characters from that in our webpage. Do that like this:

$post = $xml->posts->post->{'regular-body'};

$small_post = substr($post,0,320);

echo $small_post;

So what we've done there is we've taken the contents of the tag '<regular-body>', and we've then used the substr() function in PHP to take only the first 320 characters from the post. Then we saved that into a variable called 'small_post' and then we printed that. Easy!

SO HERE IS ALL THE CODE YOU'RE GONNA NEED TO EMBED TUMBLR WITH THE BLOG TITLE, REDUCED BLOG BODY, AND THE LINK TO THE ORIGINAL POST!

<?php

$request_url = "http://finlay.tumblr.com/api/read?type=post&start=0&num=1";

$xml = simplexml_load_file($request_url);

$title = $xml->posts->post->{'regular-title'};

$post = $xml->posts->post->{'regular-body'};

$link = $xml->posts->post['url'];

$small_post = substr($post,0,320);

echo '<h1>'.$title.'</h1>';

echo '<p>'.$small_post.'</p>';

echo "...";

echo "</br><a target=frame2 href='".$link."'>Read More</a>";

?>

So there you have it! Everything that you could need to get started if you want to Embed Tumblr into your website.

If you have any questions please leave a comment below or email me directly - [email protected]

Happy Blogging!

ps... Have you used this to Embed Tumblr into your website? If so, let me know in the comments below!

525 notes · View notes

finlay · 15 years ago

Text

Embed Twitter In Your Website

Recently Twitter has become the main outlet for Social Media on the Web, so it's only logical that people want to embed twitter on their personal websites.

But what if you are one of those people who doesn't want a nasty Widget on their site? Well here is the solution to embed twitter fast - 1 line of PHP:

<?php

echo simplexml_load_file("http://twitter.com/statuses/user_timeline/yourusername.xml?count=1")->status->text;

?>

It's really that easy! Simply substitute your username into the PHP to embed twitter into your website!

There are three small points to make though.

If you have your Twitter feed set to private, you won't be able to embed twitter.

You will have to change your webpage to .php instead of .html. ... OR

You need to have a '.htaccess' file in your root folder (where you store your website). Otherwise rename your file with .php at the end instead of .html.

Check out this post on how to create a '.htaccess' file if you don't already know.

Thanks to @mikevanis and @hellopablo for help on how to embed twitter.

And that is how you embed twitter on your website.

Happy Tweeting!

Finlay

ps...Use this on your site? Leave a comment below and tell me how you got on!

#easy #embed #htaccess #one line of code #php #php noob #simplexml #tweet #twitter #embed twitter

1 note · View note

finlay · 15 years ago

Text

Adding a '.htaccess' File To Your Website

Now let me just start by saying I am no expert in Web Development, or programming for that matter. But I know a nice piece of code when I see it!

It was when I was experimenting with PHP that I learnt about the power of SimpleXML, and immediately thought how useful that could be for Twitter. So I wrote one line of code that would embed your latest Tweet in your website.

To get that working you need a '.htaccess' file. Essentially this files let you run PHP script inside your HTML/XHTML Webpages.

Create a new file names '.htaccess' (without the inverted commas) in your favorite text editor.

Put this line of code in that file, save, and close the file 'AddType application/x-httpd-php .html .htm .xhtml'

Upload this to your Web Host, into your root folder (the folder where your website lives)

Hurray! Your '.htaccess' file should now be up and running! If in doubt, contact your webhost.

I take no responsibility if this does anything nasty to your website, so on your head be it! (But it really shouldn't!)

Enjoy!

Finlay

#.htaccess #set up #add #php #twitter #tweet

0 notes

finlay · 15 years ago

Text

The Really Really Easy Way to Host Your First Site

Are you trying to make your first Website, but you can barely even code, let alone host your website on a web server?

Well if that's you then i've found the perfect, FREE, solution for you!

Head over to www.dropbox.com

Download and Install the free software. (This should place a folder called 'Dropbox' in your user folder. Usually can be found at eg /Finlay/Dropbox/)

Copy your website into the 'Public' folder located in your 'Dropbox' folder

Right-click on the HTML file that is your website, go the option 'Dropbox', and choose 'Copy Public Link'.

Now you have copied the web address where you can find your website to your clipboard.

Head over to your web browser, paste the address in, and Hey Presto, that's your site!

The best thing about using Dropbox to host your website is that every time you update your files, your website gets updated instantly!

How easy can it get!

If you have any more questions please leave a comment below and I will be more than happy to help you if I can!

Finlay

#free web hosting #host website on dropbox #dropbox.com #getdropbox #host first website for free #first web site #free hosting #simple hosting #other uses for dropbox

0 notes

finlay · 15 years ago

Video

vimeo

Wow. So simple, yet so mesmerising.

Hope you enjoyed this as much as I did.

F

2 notes · View notes

finlay · 15 years ago

Quote

“I am a firm believer that anyone can do anything, you just have to work hard enough at it.”

As part of my Design Studies in the first semester of my 2009 studying at the University of Dundee, I was given the assignment to write my own G2 (Guardian Newspaper supplement) article.

I wrote about my experiences since leaving school.

I thought i'd share this with the world. So if you would like to read, feel free to download the PDF from here.

F

p.s - Please take this article with a handful of salt, and enjoy.

0 notes