Build an iPhone or iPad friendly folio
3
pages
English
Documents
Obtenez un accès à la bibliothèque pour le consulter en ligne En savoir plus
Découvre YouScribe et accède à tout notre catalogue !
Découvre YouScribe et accède à tout notre catalogue !
3
pages
English
Documents
Obtenez un accès à la bibliothèque pour le consulter en ligne En savoir plus
Build an iPhone or iPad friendly folio
Voir
HTML5,Safari, iPhone Simulator Build an iPhone or iPad friendly folio Using jQuery and a little bit of PHP,Jono Brainshows you how to make your Flickr website work on Apple’s Flash-less touchscreen devices
Theability to access a mobile-friendly version of your portfolio is a huge advantage for any creative, enabling you to carry your entire body of professional and personal work with you at all times.Previously Matt Booth showed you how to use Flickr to power your Flash website – now I’ll explain how you can use jQTouch (a jQuery plug-in) to make a mobile portfolio for the iPhone or iPad, which don’t support Flash. Beforeyou begin, you’ll need to copy the tutorial files from this issue’s cover disc: there is a partial version for you to work from, and a finished version. For the PHP part, you’ll need to view the site through a suitable web server – or alternatively you can use the static HTML files. You’ll also need a way to test the site: for this you can use desktop Safari, the iPhone Simulator included in the iPhone SDK from Apple, or an actual iPhone if you have one.
Jono Brain Freelance digital developer Brain has a reputation for making beautiful and clever websites. www.digitalblah blah.com
www.computerarts.co.uk
CAP136.tut_ipadfolio 59
On your cover disc You’ll find the files you need to work along with this project (partial and finished versions) on your cover disc, in the Resources section
Skills Adaptyour folio for a mobile platform Workwith HTML5, CSS,JavaScript and jQuery functions
Build an iPhone-friendly folio
59
01 Beginby opening index.html on your cover disc in your favourite code editor (I use TextMate). This is a standard HTML page with the HTML5 doc type, and includes the required jQTouch CSS and JavaScript within the header. As you can see from the first few lines of code, we have also included jQuery, some extra jQuery plug-ins, and a JavaScript file for our code. To get jQTouch running we have initialised it in the header, using $.jQTouch()
02 Nowthat jQTouch is set up, we need to add some content. The jQTouch approach is really simple: add a DIV for each individual ‘page’ of content inside the <body></body> tags. The first DIV is the homepage, and any other DIVs are hidden by default. Here we’ve created three DIVs: a homepage, a ‘booth’ page and a ‘brain’ page, and given them all a unique ID.
May 2010_Computer Arts Projects
1/4/10 11:31:38am
