13
iWebKit 5 - Page 1 http://www.iwebkit.net http://news.iwebkit.net http://demo.iwebkit.net http://community.iwebkit.net Christopher Plieger & Johan Van Wilsum Start developing your own iPhone Web application right here! This guide will help you start a project and discover how to work with the ramework rom start to fnish. You will learn what elements are available and how to customize and work with them. 5  user guide

iPhone WebKit User Manual

Embed Size (px)

Citation preview

Page 1: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 1/13

iWebKit 5 - Page 1

http://www.iwebkit.net

http://news.iwebkit.net

http://demo.iwebkit.net

http://community.iwebkit.net

Christopher Plieger & Johan Van Wilsum

Start developing your own iPhone Web application right here!

This guide will help you start a project and discover how towork with the ramework rom start to fnish. You will learnwhat elements are available and how to customize and workwith them.

5

 

user guide

Page 2: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 2/13

iWebKit 5 - Page 2

Contents

How to get started with iWebKit. 3

Some basic principles 3Some elementary HTML knowledge 3

The top bar 4

Getting started 4Adding the top bar and options 4Navigation: Arrows 4Navigation: Buttons 5Navigation: trio/duo buttons 5

The content. 6

Introduction 6Gray titles 6Introduction to Page items 6

Page items: Textboxes 6Page items: Menus 7Page items: iTunes classic list view 7Page items: Form elements 8Other special elements 9

The list views. 9

Introduction 9The Classic List 9The Appstore list 10

The iTunes Music List 10The iPod list 11

Full Screen & its options 11

Introduction 11Enabling and disabling it 11Changing the status Bar color 11Add a custom icon to the home screen 11

Add a custom loading screen to your site 12Outgoing links 12

iPhone Software Integration 12

Introduction 12Detecting phone numbers 12Set up an e-mail 12

Call a number/ add to contact 12Open a YouTube video 12Send an SMS to number 12Open Google maps at a specifc location 13Open iTunes or Appstore and show a specifc item 13Embed an RSS eed 13

Important notes and information 13

Page 3: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 3/13

iWebKit 5 - Page 3

How to get started with iWebKit.

Some basic principlesHi and thanks or downloading iWebKit. Some o you might be surprisedby the contents o this package. Indeed there is no "executable" fleincluded to launch a "program". Well let me explain that or HTML new-comers.

Basically, it's you that will write your own website combining elementsand text to orm your own awesome iPhone Website! Now, I know whatyou're thinking, "p come on, what is this BS… let's just delete thisjunk" but please hold on! It is easier than it seems.

You need only one simple skill to succeed in making your website andthat is: copy and paste. Seriously, yes you just need to copy and pastetext, it's as simple as that! I can see that you seem happier! That's thespirit!

Throughout this document I will explain what every little bit o codedoes and where you should paste it. I will also show you what you canedit to add your own text or images.

Let's start with an example: <span>this is my frst code</span>You don't need to know what a <span> is; all you will need to do is copythat element to the right spot and then edit the gray text. From now on allcode will be dark orange; all white text is, most o the time, what visuallyappears on your site (text or images or example) and you will need toedit it.

Some elementary HTML knowledgeAlright now that you are all enthusiastic and ready to start let's frst takea break to learn some basic html knowledge frst. You don't need toremember all o this but just know that it's here i you are lost!

 √ The head o an HTML document is just l ike the header o a memo, the heado an HTML document contains special inormation, like its title or example.The head o a document is demarcated by <head> and </head> respectively.

Once you have built your webpage you should fll in the title, descriptionand keyword tags all included in the head.

 √ The body o an HTML document is flled with everything that is visible to theuser. It is delimited by the <body> and </body> tags. All your text, images, andlinks will be in the body o the document.

 √ Bold and italic texts are both created by special tags. The make text boldjust put the <strong>text</strong> tags around it. For italic text it's the sameprinciple only you use <em>text</em> tags

 √ Creating links to other pages or sites is rather simple. Just put your link inany hre="link" attribute included in an <a></a> (you will see them in theelements). Just replace link with any url like http://mysite.com/mypage.html.Example: <a hre="http://iwebkit.net/mypage.html"></a>

 √ Inserting an image in your page is also easy and just a matter o adding

one simple tag. Paste this tag in your textbox (or any other element) toadd an image to your page: <img src="https://reader009.{domain}/reader009/html5/05alt="brie description"/>. Normally the image is automatically scaled to ftthe width o the element. From time to time you will see style="background-image: url('myimage.png')" throughout this guide. Just replace the imagewith your own. It will have a specifc unction in the element.

 √ Center elements the right way, it isn't hard either. I you want to centeran image or a paragraph, <p></p>, or example just add class="center" tothat frst element. A little example: <img src="image.jpg" alt="example"class="center"/> another example: <p class="center">my text</p>

 √ Look out or Special characters because they can mess up your code. Forexample, you cannot use "<" or ">" in your code. You need to replace themwith &#60; and &#62; respectively. Here is a list o some o the most useditems and there equivalent in code:

http://www.tedmontgomery.com/tutorial/HTMLchrc.html

Page 4: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 4/13

Page 5: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 5/13

iWebKit 5 - Page 5

Navigation: ButtonsYou can add buttons just like arrows except that you cannot use thebreadcrumb eature. The code you need to add is only slightly dierentor both let and right buttons and you must paste it in the top bar <div> like with the navigation arrows:

 √ <div id="letbutton"><a hre="page.html">Text or Image</a></div>

 √ <div id="rightbutton"><a hre="page.html">Text or image</a></div>

You can also insert blue buttons that you might want to use or "specialactions" like an external link or a login button. To use it you need toslightly change the button code:

 √ <div id="blueletbutton"><a hre="page.html">Text or Image</a></div>

 √ <div id="bluerightbutton"><a hre="page.html">Text or image</a></div>

Navigation: trio/duo buttonsThere are 2 types o trio buttons: The ones nested inside o the top bar and those under it . Take a look at the demo included to see what Imean.

Let's start by the one included in the top bar . You have the option topick a three or two button navigation block. As with all the other naviga-tion items, just paste the ollowing codes in the top bar <div>:

 √ <div id="duoselectionbuttons"><a hre="A.html">Text</a><a hre="B.html">Text</a></div>

 √ <div id="triselectionbuttons"><a hre="A.html">AText</a><a hre="B.html">BText</a><a hre="C.html">CText</a></div>

As you have surely guessed the frst code creates a two-button elementwhereas the second one makes a three button component.

Ok now let's deal with the trio buttons under the top bar . There is a hugedierence between this code and the last one because you do not placeit in the top bar <div> but under it! This is very important to remember!These are the codes or both the two and three button component:

 √ <div id="duobutton"><div class="links"><a hre="A.html">Text</a><a hre="B.html">Text</a></div></div>

 √ <div id="tributton"><div class="links"><a hre="A.html">AText</a><a hre="B.html">BText</a><a hre="C.html">CText</a></div></div>

So a page with both tri buttons would look like this, notice that the

"tributton" is placed under the topbar!

Now there is one important  thing let. You need to mark the page that isactive by changing the color o the corresponding button. Sounds con-using? Just take a look at the demo and you will see that one button isalways in a dierent color to mark the page you're on.

This is actually very simple to do. Simply add: id="pressed" to the active<a></a> element:

 √ <div id="triselectionbuttons"><a id="pressed" hre="A.html">AText</a><ahre="B.html">BText</a><a hre="C.html">CText</a></div>

In this case you are on the A.html page and the frst <a></a> will be dier-ent. This works with "tributton's " and "triselectionbuttons".

<div id="topbar"><div id="triselectionbuttons">

<a href="A.html">AText</a><a href="B.html"> BText</a><a href="C.html">CText</a>

</div>

</div><div id="tributton"><div class="links">

<a href="A.html">AText</a><a href="B.html">BText</a><ahref="C.html">CText</a></div></div>

Page 6: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 6/13

iWebKit 5 - Page 6

Page items: TextboxesA textbox is simply a blank item that you can type in, but I'm sure youguessed that already. As you might have understood this element mustbe placed inside a pageitem <ul>. The code it very simple, check it out:

 √ <li class="textbox"></li>

So that's the element you type in but hold on I got some nice tools or

you to work with. First o let's talk about paragraphs. Paragraphs areused to create a block o text and are needed inside a textbox to giveyour text the right placement. Simply add <p>fnally some real text</p> inside a textbox.

Oh boy a <p> inside an <li> inside an <ul> inside a <div> inside the <body>.But I'm certain or you it is as clear as a glass o boiling water. You areexcited to continue aren't you?! Don't worry I'll recap in a sec.Ok then, another element or in the textbox then; a blue title. With bluetitles you can simply separate your huge chunk o text in smaller bits.

You place them inside o a textbox and beore a paragraph. This is thecode you use:

 √ <span class="header">my blue title</span>

Let's recapitulate; here is a gray title & textbox with a blue title and aparagraph:

So that was the frst element you can add to a page item, let's continueand talk about menu items now.

The content.

IntroductionYou have to admit that that frst part was a piece o cake right? Simplycopy and pasting! Well now we are getting into some more serious busi-ness. Just joking, this is still as easy! We are now going to talk about add-ing menu items, textboxes, etc… Everything that makes up your page! Forthis part o your site you will have to work inside o the

<div id="content"></div> tags

Gray titlesOk let's get started! Gray titles are those directly on the background o the page, you know oten above menu items or textboxes. To create onesimple paste the ollowing code right in your content <div>:

√ <span class="graytitle">my title</span>

Final result: <div id="content"><span class="graytitle">text</span></div>That was easy right?

Introduction to Page itemsHere it comes, the most important element o iWebKit, the "pageitem".This component is essentially the outline o menu items, textboxes andiTunes lists. You simply need to "fll it up"!

Here is the code you need to add inside the content <div>:

 √ <ul class="pageitem"></ul>

Each page item will create a new group o elements you can organize theway you want to.

Here are the elements you can add together and rearrange:

<div id="content"><span class="graytitle">Title</span><ul class="pageitem">

<li class="textbox"><span class="header">Blue title</span><p>My text</p>

</li></ul>

</div>

Page 7: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 7/13

iWebKit 5 - Page 7

Page items: iTunes classic list viewAlright, this is the only list item that you can embed inside o a pageitem and it can be really useul in many situations especially i you wantto embed an image o your cat jumping in a box or fghting a bear. Thecode or this one is a little bit bigger and I won't be adding bits andpieces progressively this time.I mean it is easy, right?! Just put this tag inside a page item like with

textboxes or menu items:

 √ <li class="store"><a hre="page.html"><span class="image"style="background-image: url('image.png')"></span><spanclass="comment">comment</span><span class="name">Name</span><spanclass="stars5"></span><span class="starcomment">5 ratings</span> <span

class="arrow"></span></a></li>

So as you see there are multiple things you can customize. First o thelink o course as in every element, next the image on the let side o theelement, It has to be at least a 90x90px square, but i it's bigger it willautomatically resize to ft the background!

Next you can add a bit o text to name your link and add a comment.The comment is actually on top o the name explaining the order that Iput the elements in.

Now the star/rating system; this is also easy to customize. By changing"stars5" to anything between stars0 and stars5 you can change the star rat-ing o that particular element. Finally the star comment just displays whateveryou want; in the iTunes store it displays the number o ratings or example.You can o course remove any o these tags by just deleting the correspond-ing <span> tag.

Page items: MenusMenu items are the oundation o navigation on your website. It's thanksto them that your users will be able to quickly fnd what they are look-ing or. You place them in the same spot as a textbox, right inside thepageitem <ul>. You can add multiple menu items in the same page itemand even mix them with textboxes.

Now that you know how to use iwebkit, more or less, let's speed thingsup a little. The code you have to use is the ollowing:

 √ <li class="menu"><a hre="page.html"><span class="name">Name</ span><span class="arrow"> </span></a></li>

This creates a simple menu item with a name and an arrow on the rightside o it. You have probably seen those little icons in them, either onthe included demo or the iPhone itsel, well we have those too. We evengot a whole library included in the "thumbs" older! To add icons just

use image tags and put it straight in the menu <li>. Just use this code:√ <img alt="Description" src="thumbs/youricon.png" />.

Like icons you can also add a comment feld next to the arrow on theright using this code:

√ <span class="comment">Comment</span>

Ok let's visualize this alright? A menu item with a small icon and a com-ment.

<ul class="pageitem"><li class="menu">

<a href="page.html"><img alt="Description" src="thumbs/basics.png" /><span class="name">Item Name</span><span class="comment">Comment</span><span class="arrow"></span></a>

</li></ul>

Page 8: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 8/13iWebKit 5 - Page 8

Page items: Form elementsThe orm elements included in iWebKit 5 are brand new and super easyto use. Just one quick note beore we continue, I just provide the graphi-cal side o the orms, to make them work is your job and that makes thissection more or experienced users! Now let's hope I don't get any mailsabout that anymore, right?! Awesome! Just joking, I love your mails butpost these kinds o questions on our orum! The community will be glad

to help you out.

Anyway where were we, oh hell yeah, orms! Well I made custom check-box, radio button, search feld, select, text feld, input and button.Seems like enough options or the average user right?!

Ok frst o the search box , it is placed right under the top bar, so essen-tially between <div id="topbar"></div> and <div id="content"></div>, justlike the tributton! This is the code you have to copy right in there:

 √ <div class="searchbox"><orm action="" method="get"><feldset><inputid="search" placeholder="search" type="text" /><input id="submit"type="hidden" /></feldset></orm></div>

Next let's take a look at text inputs. You have a choice between threeinputs. The frst one is a ull blank line with light grey text in the back-ground to speciy its unction to the user. The second one is hal text and hal input , let me explain. On the let side it might say "Username"or example and on the right side the user can type it down. Finally yougot the good old textbox or those who want to type a lot!

All three are included in a pageitem <ul> just like a textbox, a menu item

or an iTunes list item and can be combined with all three o them in thesame page item. Here are the codes o each o these in order o appear-ance:

 √ <li class="bigfeld"><input placeholder="Username" type="text" /></li>

 √ <li class="smallfeld"><span class="name">Name</span><inputplaceholder="enter text" type="text" /></li>

 √ <li class="textbox"><textarea name="TextArea" rows="4"></textarea></li>

By changing the placeholder attribute you choose what text theuser sees in the text feld beore selecting it to type. Also i you addtype="password" or to the two frst inputs the text will be hidden, likeor… a password, stupidly easy! Another type is type="tel" which willshow a keypad instead o the regular keyboard.

Now let's do checkboxes, these are my avorite orm elements becausethey look really awesome. It works in exactly the same way as the previ-ous inputs; just insert it in a pageitem <ul>. This is the code you need:

 √ <li class="checkbox"><span class="name">my text</span><inputname="checkbox" type="checkbox" /> </li>

Next radio buttons, these look sleek too. Each button has its own <li> inside any pageitem <ul> o the page. You just need to make sure theygot the same name set up so that they work together. Here is the codeor 1 radio button, you need at least 2 or it to be useul, else just use acheckbox:

 √ <li class="radiobutton"><span class="name">Text</span><inputname="GroupName" type="radio" value="A" /></li>

Next let's talk about "selects" when you open one up on an apple de-vice like the iPhone, an automatic scroll button pops up rom the bot-tom o the screen showing all the options available. This is not only veryclean but also very good looking. As or the other elements just includethis code inside o a pageitem <ul>:

 √ <li class="select"><select name="example"><option value="1">option 1</ option> <option value="2">option 2</option></select><span class="arrow"></ 

span></li>

You can add as many <option>'s as you want as long as you change thevalue each time.

As a fnal point we are going to talk about the most basic orm elementever: the button. Well as with all the previous components just include itin a pageitem <ul>.

Page 9: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 9/13iWebKit 5 - Page 9

Is it just me or am I repeating that sentence over and over again? Well atleast you get it now and that was my goal! So here is the code!

 √ <li class="button"><input name="name" type="submit" value="Submitinput" /></li>

The value attribute will determine the text written on the button andthanks to the type attribute you can choose between dierent buttonslike a "submit" or "reset" button or example.

Other special elementsLet me quickly explain what this section is all about; this is the placewhere all items that I can't ft anywhere can be ound. It's like a Tupper-ware box but a really awesome one where you can party and stu…whatever.

Ok I might have exaggerated a bit because there is currently only oneelement in this section and that is the "double add" element. No waywe're going to set up a great party with only one guest right?! So here it

comes!

The double add is the element you can fnd at the top o the ront pageo the Appstore on your iPhone or iPod touch. Just take a look at thedemo I've included, there is a double add on the Appstore list page!Alright we haven't spoken about that list yet but the special thing isthat this structure can also be used on a regular page with regular pageitems. Just copy and paste the ollowing code under your top bar code(and tributton/searchfeld code i you use those) and beore the content <div>:

 √

<div id="doublead"><a hre="page.html" style="background-image:url('pic1.png')"></a><a hre="page2.html" style="background-image: url('pic2.png')"></a></div>

We will learn how to embed it in the Appstore list when the time is right.Oh and by the way you should use a 147 x 83px image or both ads. Andno I did not make those numbers up, apple did, not my ault!

The list views.

IntroductionWe are going to get started on some o the most awesome looking ea-tures included in iWebKit: The list views. Since version 4 I have added acouple o new ones that I am sure you will dearly love.

The Classic List 

Aaaah the good old classic list ; it's one o my avorites. Yup plain whiteborder to border rectangles with text or even an image! You have 3components to choose rom and we are going to discover them graduallythis time; because I'm in a good mood!

But frst things frst! To be able to build this list style you will have toreplace your page's <body> tag with <body class="list">. This will simplytell the elements to behave like a classic list!

Well what makes up your page? You o course still need the top bar, next

you have the content and fnally the ooter, but that last structure is notimportant. We are only going to work in the content <div> here.

To get started you are going to paste <ul></ul> right in your content <div>,oh and I orgot to mention page items do not work here; kind o logical.

Now let's get to the elements. First o you can make titles, you knowthose gray bars you see across the screen to separate a list alphabeti-cally or example? Ok the code or this is simple; just paste it in the <ul> you just created:

 √ <li class="title">your title</li>That's all you need to know there!

Next up we will talk about a simple list element with only text and asimple arrow. As with the titles this is also just going to be an <li> ele-ment that you will paste in the <ul> created beore. Just use this code:

 √ <li><a hre="page.html"><span class="name">name</span><spanclass="arrow"></span></a></li>

Page 10: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 10/13iWebKit 5 - Page 10

And last but certainly not least a list item with an image! Use it the sameway as the previous list element.

 √ <li class="withimage"><a hre="page.html"><img alt="description"src="image.png" /><span class="name">Text or name</span><spanclass="comment">A comment</span><span class="arrow"></span></a></li>

As you certainly have noticed you not only have an extra tag or an im-age but also or a comment, I mean, why not use the extra space or

something nice? Oh and by the way, the image can be any size as longas it is a square; it will automatically be stretched to ft the element. 90x 90px is ideal i you go or best perormance and quality.Ok here comes a quick recapitulation: A list with 1 simple text list item

The Appstore list 

Ok, this is also a cool one, the Appstore list basicly emulates t, well, theAppstore obviously.

It works exactly like the classic list; start by replacing the <body> tag with

this one: <body class="applist">.Next just create an <ul></ul> inside o the content <div> just like you didbeore and paste this code in it to create an applist element:

 √ <li><a hre="page.html"><span class="image" style="background-image:url('image.png')"></span><span class="comment">Comment</span><spanclass="name">Text or name</span><span class="stars4"></span><spanclass="starcomment">1 Rating</span><span class="arrow"></span><spanclass="price">FREE</span></a></li>

That's all there is to it, just repeat this code to build multiple items. Justlike with iTunes classic list just replace "4" in star4 with the numbero stars you want to add to the element. The image gets automaticallyresized and shadows are also automatically generated. The best imagesize is 57x57px by the way.

Oh I almost orgot! O course; couldn't you have told me that earlier? Ijust have to explain how to embed the double add in this list! Just usethis special <li>:

 √ <li id="doublead"><a hre="page.html" style="background-image: url('pic1.png')"></a><a hre="page2.html" style="background-image: url('pic2.png')"></a></li>

One important thing is that you have to place the double add <li> as frstelement o your <ul>!

The iTunes Music List Another nice list you might want to include is the iTunes Music list. Youcan fnd it in the iTunes store i you take a look at a specifc album orexample. The code or this list is also very basic. As usual you need to change<body> to <body class="musiclist">. Then create the <ul> in the content<div> and then paste the ollowing code in to create a list item:

 √ <li><a hre="page.html"><span class="number">1</span><spanclass="name">Name</span><span class="time">( 1:33)</span><spanclass="arrow"></span></a></li>

As you see you get two new "abilities" on this list, add a number, ortracks or example as well as adding time.

<body class="list"><div id="topbar"></div><div id="content">

<ul><li>

<a href="page.html"><span class="name">name</span>

<span class="arrow"></span></a>

</li></ul>

</div></body>

Page 11: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 11/13iWebKit 5 - Page 11

The iPod list This might be the most awesome one available in the demo because itcan actually play music! You have to check it out i you haven't already!Anyhow this is how you make an iPod List.As usual change <body> into <body class="ipodlist">, create the <ul> inthe content <div> and paste this <li> in there as many times as you want:

 √ <li><a hre="page.html"><span class="number">1</span><span class="auto"> </ 

span><span class="name">Name</span><span class="time">4:11</span></a></li>Ok this list has something special or you real coders out here, you canchoose to automatically add an arrow to the element when you click itwhich is the deault behavior but you can also do it manually. Just re-place <span class="auto"> by

√ <span class="stop">

 √ <span class="play">

This eature is nice i you dynamically want to change the list.

Something else that you really should do is make the top bar blackwhich looks a lot better, as a reminder: <div id="topbar" class="black">

Full Screen & its options

IntroductionThanks to a little JavaScript hack Johan ound it is possible to view youriWebKit site in Full screen mode! Try it out on the iWebKit Demo i youhave no idea what I'm talking about.

How do your activate ull screen?

open SaariVisit or example: http://m.iwebkit.netTouch the "+" and select "Add To Home Screen"Confrm this en open your ull screen web app straight rom the homescreen!

See? No task or navigation bars! It makes it almost like a native applica-tion right?! I will tell you all about it now

Enabling and disabling it By deault ull screen is enabled on your site. Indeed it's this tag that de-fnes the websites behavior: <meta content="yes" name="apple-mobile-web-app-capable" />. It is included in the <head> section o the documentcontent="yes" means it is enabled. content="no" means it isn't.

Changing the status Bar color The status bar  is the small grey bar at the top o your ull screen win-dow; it displays the clock and battery level or example. You can leave it gray as it is, make it black and even make it black-translucent . Just placethe elements in the <head> tag o your ront page. Here are the codes inorder o appearance:

 √ <meta name="apple-mobile-web-app-status-bar-style" content="deault"/>

 √ <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

 √ <meta name="apple-mobile-web-app-status-bar-style" content="black-trans-

lucent"/>I you use the deault one, just add nothing.

Oh and by the way, it cannot change between pages so just keep it onyour ront page or pages people are likely to web-clip.

Another small detail is that i you use the translucent one, the top barwill go behind it instead o under it which might look weird.

Add a custom icon to the home screen

You see the iWebkit logo when you clipped the demo site to youriPhone? That is simply called a webclip icon. Well you can make thattoo! You need a square image with a minimum size o 58x58px, in PNGormat. Next simply add the ollowing code to your <head> tag:

 √ <link rel="apple-touch-icon" hre="image.png"/>

Page 12: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 12/13iWebKit 5 - Page 12

Add a custom loading screen to your siteWhen you are loading the ull screen version o the demo you will noticea nice image that says "iWebKit 5". That is a custom load image I addedon purpose. To do the same simply make a 320x460px image and addthis code to the <head> tag:

 √ <link hre="startup.png" rel="apple-touch-startup-image" />

Outgoing linksThis piece o inormation might be extremely valuable to you while youare developing. I you want to open an external URL in a saari windowwhile you are in ull screen you have to add a class to your <a> tag . Letme give you some examples: You have a link to your computer site onyour mobile site and would like to open that one in saari; another ex-ample might be the wish to have an "exit ull screen" button.

The same counts or links that open applications on the iphone like mail,phone, the appstore, etc. But you will discover those a little later on!

Also it can be handy i you use an onclick JavaScript event, just to avoideventual interactions.

iPhone Software Integration

IntroductionHere we are going to talk about dierent ways to make your websitecommunicate with iPhone sotware even making it possible to open upan application! In these examples you will need to use the previouslydiscussed class="noeect" so that the app's open in ull screen too!

Detecting phone numbersTo detect phone numbers and transorm them into links add this code toyour <head>:

 √ <meta name="ormat-detection" content="telephone=yes"/>

Change telephone=yes to telephone=no to disable it.

Set up an e-mailYou can send a custom e-mail message by clicking on a special madelink o your website. Just make a change any an element you want in-serting the ollowing code in the hre:

√ mailto:[email protected].

Example: <a class="noeect" hre="mailto:[email protected]"></a>

You can also add a cc: mailto:[email protected][email protected]

Or add a subject: mailto:[email protected]&subject=my subject

And a body mailto:[email protected]&body=my body text

O course you can combine all o them together too!

Call a number/ add to contact 

This is another link transormation and it has a dierent behavior de-pending on the device you are using. On an iPhone it will call the num-ber and on an iPod touch it will ask you i you want to save it in yourcontact book. You can use the code on any <a> element:

 √ <a class="noeect" hre="tel:123-456-7890">call now</a>

Open a YouTube videoThis is also simple; just add the URL o a YouTube video to your link andit will open up when clicked!

 √ <a class="noeect" hre="http://www.youtube.com/yourvideo">Watch</a>

Send an SMS to number This works the same as or the "call a number":

 √ <a class="noeect" hre="sms:12125551212">send</a>

Page 13: iPhone WebKit User Manual

8/7/2019 iPhone WebKit User Manual

http://slidepdf.com/reader/full/iphone-webkit-user-manual 13/13iWebKit 5 - Page 13

Open Google maps at a specifc locationLike with the previous items, this also is just something you add as alink. You can fnd the right code to use on http://maps.google.com:

 √ <a class="noeect" hre="http://maps.google.com/?ie=UTF8&ll=...">map o america</a>

Open iTunes or Appstore and show a specifc item

To get links to your avorite music or application go to iTunes, next youravorite album or application; right clicking on the image and click "copylink". Next just use it in a regular link:

 √ <a class="noeect" hre="http://phobos.apple.com/WebObjects/MZStore.woa/...">open album</a>

Embed an RSS eedSimply paste this code into a textbox to view the latest posts o thatparticular eed. This eature is currently not compatible with ull screenmode:

 √ <script src="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http://yoursite/eed.rss" type="text/javascript"></script>

Important notes and information 

Useul links and contenthttp://developer.apple.com/saari/ http://www.w3.org/TR/ http://alistapart.com/articles/putyourcontentinmypockethttp://alistapart.com/articles/putyourcontentinmypocketpart2

GNU © 2010 iWebKit