How To Create A Personal Portfolio iPad Application: Step By Step Tutorial

10 Nov 2010 | iPad Development | LentLilly on Google+

The iPad not only looks gorgeous and thus provides a lasting impression upon the potential clients but also lets you interact with numerous life spheres easily and quickly. Why not use the tablet’s potential to pursue your own good?

Just think of creating a personal portfolio iPad app. The truth is that the iPad as well as the iPhone can work with the installed web-apps so if you make a creatively different website and install it onto your device then you will be free to use it even without the Internet connection.

Please make sure that working with this tutorial you are able to access a web server or webspace so that you could change the types from MIME to a filetype. Should you have any questions or hesitations please contact your web host and request support.

Step 1

Think of all the opportunities the touch-screen interface provides and then create a design of your own. A single glance at your portfolio should reveal a lot, so make it eloquent and comprehensible. As for the technical side of the issue our advice is: do not save HTML files in subfolders under your Index file. This is not a right thing to do since HTML5′s cache does not like such folders. Nevertheless you can put images, script files and CSS (cascading style sheets) in folders without misgivings.

Step 2

You should also choose between the iPad’s two screen orientations for your portfolio. You can design for 768 x 1,004 in landscape and 1,024 x 748 in portrait so that the iPad status bar will surely be visible at the top of the screen. Should you decide on the full-screen design for 1,024 x 768 in landscape and 768 x 1,024 in portrait.

Step 3

Both the iPad and iPhone are known for some unique interactions as the first devices introducing them: swiping and pinching are good examples of what we mean. These manipulations are absolutely normal when it comes to the browser event model and scripting. They can be accessed through Javascript just like a click is, for example.

Step 4

Use the syntax window.ontouchmove to work with individual events and putting right event listeners. For those who are not so experienced with Javascript and used to working via jQuery (jquery.com), some worthwhile plug-ins are provided which make accessing suchlike events.

Various touch-based events can be accessed via this library – jQTouch (jqtouch.com) to say nothing of the offline web-app caching, so convenient with jQTouch. Although it isn’t necessary here, keep it in mind that such helper method exists in case you need it afterwards.

Step 5

You can always design not one but two versions of your portfolio suiting landscape and portrait modes. To do this you will also need a bit of code to be included. Choose the tablet’s orientation and load various CSS layouts accordingly with the metatags at the top of the code mentioned below:

(orientation:portrait) href=css/iPad-portrait.css>

(orientation:landscape) href=css/iPad-landscape.css>

Step 6

The website is not the only thing you need for your installable web app. To start any app one needs a launch icon for the iPad’s homescreen.

All you need to do is creating an icon 57×57 pixels and saving this icon as a 24-bit PNG file as apple-touch-icon.png. You shouldn’t waste your time making the corners round or adding highlight effects the iPad OS is smart enough to do it for you. Should you want it not to do it request this via an extra metatag. The code below will help you to link the iPad to the website of your own:

icon.png>

Step 7

Now we come to a startup screen for the app. It is not a must you should bear it in mind your app might well do without it. The only thing probably is that your portfolio will look a little bit better with it rather than without particularly if your potential clients would like to have the app launched themselves.

You need to create a splashscreen image 1,004 pixels tall and 768 pixels wide and save it as a 24-bit PNG file as splashpage.png. To make sure the startup image will work add the code you can see below to the website homepage section:

href=splashpage.png>

Step 8

To let your tablet know that your website can be installed just like an app you should add one more HTML metatag to the top of each page. The following code should be added to your section to match the viewport and your iPad’s resolution and make the installation possible:

content=yes />

scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0/>

style content=black />

Step 9

So, you’ve done everything and are about to install the fruit of your work but you will one more file: you need Safari to know that this website should be perceived as a web app that can run offline. The cache manifest is the file you are interested in, this file constitutes a part of the HTML5 specification. This is the thing that will inform Safari on your iPad a copy of what it needs to download and what should be brought in from the web every time you start your app.

The file under discussion is an ordinary text that you can see below. But please make sure your web server will process this very file with a particular cache manifest/encoding of text.

To learn more have a look at the box above. To enable the app’s functioning completely offline you must have all the files constituting your website listed in the cache manifest:

CACHE MANIFEST

# Offline cache v1

article.html

# supporting files

css/styles.css

js/jQuery.js

js/jQTouch.jquery.js

# images

images/page1.png

images/page2.png

images/page3.png

That’s not all you will require a link to the manifest file that is at the top of your pages change your HTML declaration and see:

Step 10

Depending on the type of machine you are using upload the necessary files to the web server or make sure they are copied to the web server folder of the computer (if this is the case with a local PC). What you will need to do next is going to the site via your iPad tablet and tapping the + button at the bottom of the browser interface. He following button you should tap is Add to Homescreen. It will be a signal to Safari and it will subsequently download each and every file from the cache manifest along with the splashscreen and the icon mentioned above. Finally you need the button to be installed on your homescreen here you should use the previously created icon.

Step 11

Now the offline functioning of your app needs to be tested. To carry this out you need to go to the Settings from your homescreen and then you will have two options: turn on the Airplane Mode (provided your iPad is a WiFi + 3G one) or turn off Wi-Fi (if your tablet accesses the Internet through Wi-Fi only). After you have done it go back to the homescreen and start your app by tapping its icon. And presto! you will manage to control your precious portfolio with no Internet connection. Your future clients should no way miss it off you go and enjoy the amazed looks.

You can follow us on twitter or join our facebook fanpage to keep yourself updated on all the latest news about Apple iPad Device.