1. 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:

    <meta name=”apple-mobile-web-app-capable” content=”yes”>

    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)

  2. 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

  3. 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.

  6. Recent Work: Hugh Buchanan →

    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 f@finlaycraig.com

    F

  7. 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!

  8. 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!

  9. 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 - 

    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.

  10. 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!