iWebKit5 |user guide
Contents
1. Here is the code you need to add inside the content lt div gt v lt ul class pageitem x ul gt Each page item will create a new group of elements you can organize the way you want to Here are the elements you can add together and rearrange Page items Textboxes A textbox is simply a blank item that you can type in but I m sure you guessed that already As you might have understood this element must be placed inside a pageitem lt ul gt The code it very simple check it out vy li class textbox gt lt li gt So that s the element you type in but hold on I got some nice tools for you to work with First of let s talk about paragraphs Paragraphs are used to create a block of text and are needed inside a textbox to give your text the right placement Simply add lt p gt finally some real text gt inside a textbox Oh boy a lt p gt inside an inside an ub inside a lt div gt inside the soc gt But I m certain for you it is as clear as a glass of boiling water You are excited to continue aren t you Don t worry I ll recap in a sec Ok then another element for in the textbox then a blue title With blue titles you can simply separate your huge chunk of text in smaller bits You place them inside of a textbox and before a paragraph This is the code you use v lt span class header gt my blue title lt span gt Let s recapitulate here is a gray title amp textbox with a blue title and a para2. respectively Once you have built your webpage you should fill in the title description and key word tags all included in the head v The body of an HTML document is filled with everything that is visible to the user It is delimited by the lt body gt and lt body gt tags All your text images and links will be in the body of the document Bold and italic texts are both created by special tags The make text bold just put the lt stron gt text lt strone gt tags around it For italic text it s the same prin ciple only you use em text lt em gt tags Creating links to other pages or sites is rather simple Just put your link in any href link attribute included in an lt gt gt you will see them in the elements Just replace link with any url like http mysite com mypage html Example lt a href http iwebkit net mypage html gt a gt Inserting an image in your page is also easy and just a matter of adding one simple tag Paste this tag in your textbox or any other element to add an im age to your page lt img src http site com images myimage png alt brief description gt Normally the image is automatically scaled to fit the width of the element From time to time you will see style backsround image url myimage png throughout this guide Just replace the image with your own It will have a specific function in the element Center elements the right way it isn t hard either If you want to center a
3. it Take a look at the demo included to see what mean Now there is one important thing left You need to mark the page that is ac Let s start by the one included in the top bar You have the option to pick tive by changing the color of the corresponding button Sounds confusing a three or two button navigation block As with all the other navigation Just take a look at the demo and you will see that one button is always ina items just paste the following codes in the top bar lt div gt different color to mark the page you re on v lt div id duoselectionbuttons lt a href A html gt Text lt a gt lt a href B html gt Text lt a gt lt div gt This is actually very simple to do Simply add id pressed to the active v lt div id triselectionbuttons xa href A html AText lt axa href B cox element html gt BText lt axa href C html gt CText lt ax div gt v lt div id triselectionbuttons a id pressed href A html AText lt axa As you have surely guessed the first code creates a two button element href B html BText lt a lt a href C html CText lt ar lt div whereas the second one makes a three button component In this case you are on the A htm page and the first lt gt lt gt will be differ Ok now let s deal with the trio buttons under the top bar There is a huge ent This works with tributton s and triselectionbuttons difference between this code and the last one because you do not place it in the top
4. lt li gt element that you will paste in the lt ul gt created before Just use this code v lixa href page html span class name gt name lt spanspan class arrow lt span gt lt a gt lt li gt And last but certainly not least a list item with an image Use it the same way as the previous list element v li class withimage xa href page html ximg alt description src image png xspan class name gt Text or name lt spanxspan class comment A comment lt spanxspan class arrow lt span gt lt a gt lt li gt As you certainly have noticed you not only have an extra tag for an image but also fora comment mean why not use the extra space for some thing nice Oh and by the way the image can be any size as long as it is a square it will automatically be stretched to fit the element 90 x 90px is ideal if you go for best performance 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 the Appstore obviously It works exactly like the classic list start by replacing the lt body gt tag with this one lt body class applist gt Next just create an lt ub lt ub inside of the content lt div gt just like you did be fore and paste this code in it to create an applist element v lt lixa href page html gt span class image style background image url image png lt spanxspan c
5. notes and information Useful links and content http developer apple com safari http www w3 org TR http alistapart com articles putyourcontentinmypocket http alistapart com articles putyourcontentinmypocketpart2 GNU 2010 iWebkit
6. you want to save it in your contact book You can use the code on any lt a gt element v lt aclass noeffect href tel 123 456 7890 gt call now lt a gt Open a YouTube video This is also simple just add the URL of a YouTube video to your link and it will open up when clicked v lt aclass noeffect href http www youtube com yourvideo gt Watch lt a gt Send an SMS to number This works the same as for the call a number v lt aclass noeffect href sms 12125551212 send lt a gt Open Google maps at a specific location Like with the previous items this also is just something you add as a link You can find the right code to use on http maps google com v lt aclass noeffect href http maps google com ie UTF8 amp ll map of america lt a gt Open iTunes or Appstore and show a specific item To get links to your favorite music or application go to iTunes next your favorite album or application right clicking on the image and click copy link Next just use it in a regular link v lt aclass noeffect href http phobos apple com WebObjects MZStore woa 0pen album lt a gt Embed an RSS feed Simply paste this code into a textbox to view the latest posts of that par ticular feed This feature is currently not compatible with full screen mode v lt script src http rssxpress ukoln ac uk lite viewer rss http yoursite feed rss type text javascript lt script Important
7. ame for example and on the right side the user can type it down Finally you got the good old textbox for those who want to type a lot All three are included in a pageitem lt ub just like a textbox a menu item or an iTunes list item and can be combined with all three of them in the same page item Here are the codes of each of these in order of appearance v li class bigfield gt input placeholder Username type text x li gt v lt li class smallfield gt span class name Name lt spanxinput placeholder enter text type text gt lt li gt v lt li class textbox textarea name TextArea rows 4 gt lt textarea gt lt li gt By changing the placeholder attribute you choose what text the user sees in the text field before selecting it to type Also if you add type password or to the two first inputs the text will be hidden like for a password stu pidly easy Another type is type tel which will show a keypad instead of the regular keyboard Now let s do checkboxes these are my favorite form elements because they look really awesome It works in exactly the same way as the previous inputs just insert itin a pageitem lt ul gt This is the code you need v lt li class checkbox xspan class name gt my text lt span gt input name checkbox type checkbox gt lt li gt Next radio buttons these look sleek too Each button has its own lt li gt inside any pageitem ub of the page You just need to make s
8. at you can embed inside of a page item and it can be really useful in many situations especially if you want to em bed an image of your cat jumping in a box or fighting a bear The code for this one is a little bit bigger and won t be adding bits and pieces progres sively this time mean it is easy right Just put this tag inside a page item like with text boxes or menu items v li class store xa href page html xspan class image style background image url image png gt lt spanxspan class comment gt comment lt spanxspan class name Name lt spanxspan class stars5 span gt lt span class starcomment 5 ratings lt span gt lt span class arrow gt lt sSpan a gt lt li gt So as you See there are multiple things you can customize First of the link of course as in every element next the image on the left side of the ele ment It has to be at least a 90x90px square but if it s bigger it will auto matically resize to fit the background Next you can add a bit of text to name your link and add a comment The comment is actually on top of the name explaining the order that put the elements in Now the star rating system this is also easy to customize By changing stars5 to anything between starsO and stars5 you can change the star rating of that particular element Finally the star comment just displays whatever you want in the iTunes store it displays the number of ratings for example You can of cours
9. bar lt div gt but under it This is very important to remember These are the codes for both the two and three button component v lt div id duobutton x lt div class links a href A html gt Text lt a gt lt a href B html gt Text lt a gt div lt div gt v lt div id tributton gt lt div class links a href A html AText lt axa href B html gt BText lt axa href C html gt CText lt a gt lt div gt lt div gt The content Introduction You have to admit that that first part was a piece of cake right Simply copy and pasting Well now we are getting into some more serious business Just joking this is still as easy We are now going to talk about adding menu items textboxes etc Everything that makes up your page For this part of your site you will have to work inside of the lt div id content gt lt div gt tags Gray titles Ok let s get started Gray titles are those directly on the background of the page you know often above menu items or textboxes To create one simple paste the following code right in your content lt div gt v lt span class graytitle my title lt span gt Final result lt div id content xspan class graytitle gt text lt span gt lt div gt That was easy right Introduction to Page items Here it comes the most important element of iWebKit the pageitem This component is essentially the outline of menu items textboxes and iTunes lists You simply need to fill it up
10. bining elements and text to form your own awesome iPhone Website Now know what you re thinking pfff come on what is this BS let s just delete this junk but please hold on It is easier than it seems You need only one simple skill to succeed in making your website and that is copy and paste Seriously yes you just need to copy and paste text it s as simple as that can see that you seem happier That s the spirit Throughout this document will explain what every little bit of code does and where you should paste it will also show you what you can edit to add your own text or images Let s start with an example lt span gt this is my first code lt span gt You don t need to know what a lt span gt is all you will need to do is copy that element to the right spot and then edit the gray text From now on all code will be dark orange all white text is most off the time what visually appears on your site text or images for example and you will need to edit it Some elementary HTML knowledge Alright now that you are all enthusiastic and ready to start let s first take a break to learn some basic html knowledge first You don t need to remem ber all of this but just know that it s here if you are lost v The head of an HTML document is just like the header of a memo the head of an HTML document contains special information like its title for example The head of a document is demarcated by lt cac gt and lt head gt
11. class number gt 1 lt spanxspan class name Name lt spanspan class time gt 1 33 lt spanspan class arrow lt span gt lt a gt lt li gt As you see you get two new abilities on this list add a number for tracks for example as well as adding time The iPod list This might be the most awesome one available in the demo because it can actually play music You have to check it out if you haven t already Anyhow this is how you make an iPod List As usual change lt body gt into lt body class ipodiist gt create the lt ul gt inthe content lt div gt and paste this lt li gt in there as many times as you want v lt lixa href page html span class number gt 1 lt spanspan class auto gt lt span gt span class name Name lt spanxspan class time gt 4 11 lt span gt a gt lt li gt Ok this list has something special for you real coders out here you can choose to automatically add an arrow to the element when you click it which is the default behavior but you can also do it manually Just replace lt span class auto gt by v lt span class stop gt lt span class play gt This feature is nice if you dynamically want to change the list Something else that you really should do is make the top bar black which looks a lot better as a reminder lt div id topbar class black gt Full Screen amp its options Introduction Thanks to a little JavaScript hack Johan found it is possible to view
12. e remove any of these tags by just deleting the corresponding lt span gt tag Page items Form elements The form elements included in iWebKit 5 are brand new and super easy to use Just one quick note before we continue just provide the graphi cal side of the forms to make them work is your job and that makes this section more for experienced users Now let s hope don t get any mails about that anymore right Awesome Just joking love your mails but post these kinds of questions on our forum The community will be glad to help you out Anyway where were we oh hell yeah forms Well made custom checkbox radio button search field select text field input and button Seems like enough options for the average user right Ok first of the search box it is placed right under the top bar so essentially between lt div id topbar lt div gt and lt div id content gt lt div gt just like the tributton This is the code you have to copy right in there v lt div class searchbox form action method get fieldset lt input id search placeholder search type text xinput id submit type hidden fieldset form gt lt div gt Next let s take a look at text inputs You have a choice between three in puts The first one is a full blank line with light grey text in the background to specify its function to the user The second one is half text and half input let me explain On the left side it might say Usern
13. en pages so just keep it on your front page or pages people are likely to web clip Another small detail is that if you use the translucent one the top bar will go behind it instead of 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 your iPhone That is simply called a webclip icon Well you can make that too You need a square image with a minimum size of 58x58px in PNG format Next sim ply add the following code to your lt cac gt tag v lt link rel apple touch icon href image png gt Add a custom loading screen to your site When you are loading the full screen version of the demo you will notice a nice image that says iWebKit 5 That is a custom load image added on purpose To do the same simply make a 320x460px image and add this code to the lt head gt tag v lt link href startup png rel apple touch startup image gt Outgoing links This piece of information might be extremely valuable to you while you are developing If you want to open an external URL in a safari window while you are in full screen you have to add a class to your gt gt tag Let me give you some examples You have a link to your computer site on your mobile site and would like to open that one in safari another example might be the wish to have an exit full screen button The same counts for links that open applications on the iphone like mail pho
14. f the most awesome looking features included in iWebKit The list views Since version 4 have added a couple of new ones that am sure you will dearly love The Classic List Aaaah the good old classic list it s one of my favorites Yup plain white border to border rectangles with text or even an image You have 3 com ponents to choose from and we are going to discover them gradually this time because I m in a good mood But first things first To be able to build this list style you will have to re place your page s body gt tag with body class isi This will simply tell the elements to behave like a classic list Well what makes up your page You of course still need the top bar next you have the content and finally the footer but that last structure is not important We are only going to work in the content div gt here To get started you are going to paste lt ub lt ub right in your content lt div gt oh and forgot to mention page items do not work here kind of logical Now let s get to the elements First of you can make titles you know those gray bars you see across the screen to separate a list alphabetically for example Ok the code for this is simple just paste it in the ub you just created v li class title your title lt li gt That s all you need to know there Next up we will talk about a simple list element with only text and a simple arrow As with the titles this is also just going to be an
15. graph So that was the first element you can add to a page item let s continue and talk about menu items now Page items Menus Menu items are the foundation of navigation on your website It s thanks to them that your users will be able to quickly find what they are looking for You place them in the same spot as a textbox right inside the pageitem lt u gt You can add multiple menu items in the same page item and even mix them with textboxes Now that you know how to use iwebkit more or less let s speed things up a little The code you have to use is the following v lt li class menu lt a href page html gt lt span class name Name lt spanXspan class arrow gt lt span gt lt a lt Li gt This creates a simple menu item with a name and an arrow on the right side of it You have probably seen those little icons in them either on the included demo or the iPhone itself well we have those too We even got a whole library included in the thumbs folder To add icons just use image tags and put it straight in the menu lt li gt Just use this code v lt img alt Description src thumbs youricon png gt Like icons you can also add a comment field next to the arrow on the right using this code v lt span class comment gt Comment lt span gt Ok let s visualize this alright A menu item with a small icon and a com ment Page items iTunes classic list view Alright this is the only list item th
16. iWebKit user guide Table Of Contents How to get started with iWebKit Some basic principles Some elementary HTML knowledge The top bar Getting started Adding the top bar and options Navigation Arrows Navigation Buttons Navigation trio duo buttons The content Introduction Gray titles Introduction to Page items Page items Textboxes Page items Menus Page items iTunes classic list view Other special elements The list views Introduction The Classic List The Appstore list The iTunes Music List The iPod list Full Screen amp its options Introduction Changing the status Bar color Add a custom icon to the home screen Add a custom loading screen to your site Outgoing links D ONN AAAA AunfFEKE Awu Ww h O O o iPhone Software Integration Introduction Detecting phone numbers Set up an e mail Call a number add to contact Open a YouTube video Send an SMS to number Open Google maps at a specific location Open iTunes or Appstore and show a specific item Embed an RSS feed important notes and information 12 12 12 12 12 12 12 13 13 13 13 How to get started with iWebKit Some basic principles Hi and thanks for downloading iWebKit Some of you might be surprised by the contents of this package Indeed there is no executable file included to launch a program Well let me explain that for HTML newcomers Basically it s you that will write your own website com
17. lass comment gt Comment lt spanxspan class name gt Text or name lt spanspan class stars4 gt lt spanspan class starcomment gt 1 Rating lt span gt span class arrow x Spanxspan class price FREE lt span gt lt a gt lt li gt That s all there is to it just repeat this code to build multiple items Just like with iTunes classic list just replace 4 in star4 with the number of stars you want to add to the element The image gets automatically resized and shadows are also automatically generated The best image size is 57x57px by the way Oh almost forgot Of course couldn t you have told me that earlier just have to explain how to embed the double add in this list Just use this special lt li gt v li id doublead xa href page html style background image url pict png x axa href page2 html style background image url pic2 png gt lt a gt lt li gt One important thing is that you have to place the double add lt l gt as first element of your lt u gt The iTunes Music List Another nice list you might want to include is the iTunes Music list You can find it in the iTunes store if you take a look at a specific album for example The code for this list is also very basic As usual you need to change lt body gt to lt body class musiclist gt Then create the lt ul gt in the content lt div gt and then paste the following code in to create a list item v lira href page html gt span
18. n im age or a paragraph lt p gt lt p gt for example just add ass center to that first el ement A little example lt img src image jpg alt example class center gt another example lt p class center gt my text lt p gt Look out for Special characters because they can mess up your code For example you cannot use lt or gt in your code You need to replace them with amp 60 and amp 62 respectively Here is a list of some of the most used items and there equivalent in code http www tedmontgomery com tutorial HTMLchrc html The top bar Getting started Ok right now you just know you have to copy and paste but now we are se riously going to begin designing a page First off open up the index html file in the framework folder Ok not in your browser but in a text editor like notepad for windows for example Now concentrate on the body of the page Adding the top bar and options If it isn t in your page yet just paste this code right under the lt body gt tag v lt div id topbar x div gt If you open up your page in safari or Google chrome you will notice the blue header See easy right Next you have the option to make it black or trans parent by adding either class black orclass transparent to the lt div gt v lt div id topbar class black x div gt v lt div id topbar class transparent gt lt div gt Ok now let s add a title to it You can mainly use the title o
19. n pages that only have 1 or 2 navigation buttons for aesthetic and practical reasons Just add lt div id title gt Titlec div gt between the lt div gt and the final lt div gt like this v lt div id topbar xdiv id title gt Title lt div gt lt div gt Check your browser from time to time to check the result and see if you made any errors Navigation Arrows There are 3 different types of navigation available for iWebKit Arrows but tons and trio duobuttons Let s start with arrows You have a choice be tween left and right arrows dependent on the page you are linking to Simply paste one of these codes in the top bar lt div to create a left or right pointing arrow v lt div id leftnav xa href page html gt text lt a gt lt div gt v lt div id rightnav gt lt a href page html gt text lt a gt lt div gt Just a quick note for people who have no idea what to put in here instead of page html stop skipping pages and just read what wrote about the lt a gt element You can also create a home arrow with a picture of a house in it like in the demo Just add this image instead of text to the arrow lt img alt home src images home png gt v lt div id leftnav gt lt a href page html x lt img alt home src images home png gt lt a gt lt div gt Overall top bar code until now Title left arrow with home image right arrow Also included is a breadcrumb system that makes it p
20. ne the appstore etc But you will discover those a little later on Also it can be handy if you use an onclick JavaScript event just to avoid eventual interactions iPhone Software Integration Introduction Here we are going to talk about different ways to make your website com municate with iPhone software even making it possible to open up an ap plication In these examples you will need to use the previously discussed class noeffect so that the app s open in full screen too Detecting phone numbers To detect phone numbers and transform them into links add this code to your lt head gt v lt meta name format detection content telephone yes gt Change telephone yes to telephone no to disable it Set up an e mail You can send a custom e mail message by clicking on a special made link of your website Just make a change any an element you want inserting the following code in the href v mailto adress server com Example lt a class noeffect href mailto lol test com gt lt a gt You can also add a cc mailto lol test com cc ex ample net Or add a subject mailto lol test com amp subject my subject And a body mailto lol test com amp body my body text Of course you can combine all of them together too Call a number add to contact This is another link transformation and it has a different behavior depend ing on the device you are using On an iPhone it will call the number and on an iPod touch it will ask you if
21. ossible to have mul tiple left or right arrows glued together To achieve this effect simply add another lt a href page html gt text lt a gt to you left or right arrow div like this v lt div id leftnav gt lt a href page html gt A lt axa href page2 html gt B lt a gt lt div gt v lt div id rightnav lt a href page html gt A lt a gt lt a href page2 html B lt a gt lt div gt Navigation Buttons You can add buttons just like arrows except that you cannot use the bread crumb feature The code you need to add is only slightly different for both left and right buttons and you must paste it in the top bar div gt like with the navigation arrows v lt div id leftbutton lt a href page html Text or Image lt a gt lt div gt j i i i So a page with both tri buttons would look like this notice that the tribut v4 s 4 7 n SN u H s lt div id rightbutton xa href page html gt Text or image lt ax div gt ton is placed under the topbar You can also insert blue buttons that you might want to use for special actions like an external link or a login button To use it you need to slightly change the button code v lt div id blueleftbutton xa href page html gt Text or Image lt a gt lt div gt v lt div id bluerightbutton a href page html gt Text or image lt a gt lt div gt Navigation trio duo buttons There are 2 types of trio buttons The ones nested inside of the top bar and those under
22. ton for example Other special elements Let me quickly explain what this section is all about this is the place where all items that can t fit anywhere can be found It s like a Tupper ware box but a really awesome one where you can party and stuff what ever Ok I might have exaggerated a bit because there is currently only one ele ment in this section and that is the double add element No way we 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 find at the top of the front page of the Appstore on your iPhone or iPod touch Just take a look at the demo 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 is that this structure can also be used on a regular page with regular page items Just copy and paste the following code under your top bar code and tributton search field code if you use those and before the content lt div gt v lt div id doublead xa href page html style background image url pic1 png lt a gt lt a href page2 html style background image url pic2 png a gt lt div gt 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 for both ads And no did not make those numbers up apple did not my fault The list views Introduction We are going to get started on some o
23. ure they got the Same name Set up So that they work together Here is the code for 1 radio button you need at least 2 for it to be useful else just use a checkbox v li class radiobutton lt span class name gt Text lt spanxinput name GroupName type radio value A gt lt li gt Next let s talk about selects when you open one up on an apple device like the iPhone an automatic scroll button pops up from the bottom of the screen showing all the options available This is not only very clean but also very good looking As for the other elements just include this code inside of a pageitem lt gt v lt li class select gt select name example xoption value 1 option 1 lt op tion gt lt option value 2 0ption 2 lt option selectxspan class arrow gt lt span gt lt li gt You can add as many lt 0p 0 gt s as you want as long as you change the value each time As a final point we are going to talk about the most basic form element ever the button Well as with all the previous components just include it in a pageitem lt gt Is it just me or am repeating that sentence over and over again Well at least you get it now and that was my goal So here is the code v li class button input name name type submit value Submit input xli The value attribute will determine the text written on the button and thanks to the type attribute you can choose between different buttons like a sub mit or reset but
24. your iWebKit site in Full screen mode Try it out on the iWebKit Demo if you have no idea what l m talking about How do your activate full screen open Safari Visit for example http m iwebkit net Touch the and select Add To Home Screen Confirm this and open your full screen web app straight from the home screen See No task or navigation bars It makes it almost like a native applica tion right will tell you all about it now Enabling and disabling it By default full screen is enabled on your site Indeed it s this tag that defines the websites behavior lt meta content yes name apple mobile web app capable gt Itis included in the lt head gt section of the document content yes means itis enabled content no means it isn t Changing the status Bar color The status bar is the small grey bar at the top of your full screen window it displays the clock and battery level for example You can leave it gray as it is make it black and even make it black translucent Just place the ele ments in the lt head gt tag of your front page Here are the codes in order of appearance v lt meta name apple mobile web app status bar style content default gt v lt meta name apple mobile web app status bar style content black gt v lt meta name apple mobile web app status bar style content black translu cent gt If you use the default one just add nothing Oh and by the way it cannot change betwe
Download Pdf Manuals
Related Search