English User Guide - VonUnterwegsGesendet.de
Contents
1. page 20 User Guide iWebkit 4 0 To embed RSS feeds into your iWebkit website simply paste this Ittle code in a textbox and edit the URL lt script sre http rssxpress ukoln ac uk lite viewer rss http blog iWebkit net feed rss2 type text javascript gt lt script gt This for example will display the rss feed of http blog iWebkit net In a page it would look like this lt ul class pageitem gt lt li class textbox gt lt script src http rssxpress ukoln ac uk lite viewer rss http blog iWebkit net feed rss2 type text javascript gt lt script gt lt li gt lt ul gt To edit the Url of the rss feed only edit the gray part of the code lt a href mailto youradress yourserver com gt Send us a mail now by clicking here lt a gt lt a href tel 408 555 5555 gt Call Now lt a gt lt a href http www youtube com watch v tCkJ70s8fm4 gt watch video lt a gt lt a href sms 12125551212 gt send sms lt a gt To create a link that opens maps app use the map URL you get from maps google com in the top right page 21 User Guide iWebkit 4 0 corner link lt a href http maps google com ie UTF8 amp 11 37 0625 95 677068 amp spn 47 033113 114 257812 amp z 4 gt Sh ow map of America lt a gt iTunes Go to the itunes store and right click on the item you are interested in Next paste that link in your lt a gt tag like this lt a href http phobos apple com WebObjects2. iWebkit 4 0 English User Guide Table Of Contents Colophon GNU LICENSE NGWIInJ Web kit Aik an an a aan KA an Na pa Na an aa IN sai 7 VARI AA AAA AA E E E kn nahas aa a ag ana a rey 7 MAS SO DESO ee 7 Version 2 0 1 WA IA emer nea MR Re a WA NS 8 NA psd Ce ah Bd ese creer a acct gg eS ere eM sR Ug SRN na EN a UCR 8 Version AAA AAA cee AA AN NS AC OR a oe A 8 ntroduction oli Web kita AA oa crea ates Na AA A Wana kaa es cera A ee mamia 9 Christhoper Plieger Johan van Wilsum Introduction To HTML Titles The body tag Bold And Italic tekt Horizontal rules Creating links Link multiple pages Insert Images BT pts Na ee Ka YA eT OSE 11 Center Objects Special characters HTML Comments The Topbar Introduction Working with the Topbar Navigation Arrows Navigation Buttons The Content Creating the page content Gray titles Page items List pages Simple list Musiclist Full Screen Support Codelines Statusbar External Links Icon on Spingboard Activation Popup support Introduction Call the popup Popup Code Integration Embed RSS Feeds Appstore Importants Notes and Information Slide effect Problems Colophon Design Text Website News Community Demo GNU 2008 iWebkit www iwebkit net Johan van Wilsum Christopher Plieger amp Johan van Wilsum www iwebkit net blog iwebkit net comunity iwebkit net m iwebkit net GNU LICENSE This version of the GNU Lesser General Public License incorporate
3. Fiked package false links wrong names corrupted codes version 4 0 New building structure Navigation buttons are now fully clickable Faster to load Much Smaller and optimized code A lot of bug fixes Enhanced auto bug repair avoiding structure White text and arrow on click on button Advanced store lists Easier music code list Mixing of items is now possible Auto rounding of images in store lists Comments on menu items Auto ellipsis on all items with full view in landscape mode Ability to add lists ol ul in textboxes Added code for button in top left Sliding Popup added Fullscreen support Disable sliding and fullscreen tag Fewer problems with the sliding Text is justified in all paragraphs Added a User Guide More Images included Less http reguest by reducing the number of images and scripts used on a page and more Version 3 0 New music list New item list with or without images Slide effect as a plugin Blue buttons on touch Bugfixes Rebuilt topbar image so it doesnt dive under the navigation bar in safari Added the removal of the url bar and image preload in the download pack Fixes a bug where the url bar would go up 1px too much Removed the lt li class break gt tag since it was not us
4. MZStore woa wa viewAlbum id 287810321 amp s 143442 gt op en itunes lt a gt Appstore lt a href http www itunes com app spore gt open appstore lt a gt Importants Notes and Information Slide effect Problems You might experience problems with the slide effect On some pages when the back button is clicked in safari instead of using the back buttons on the page the content of the previous page does not appear There is no real solution for this problem since apple does not allow us to have cache control to f x it There are 3 solutions Either ignore it and ask your users to refresh the page or use your website in fullscreen mode to disable the navigation in safari The other solution is to simply disable the slide effect by deleting the corresponding code in the file called EEA ale AEO OEA ORe 0 iclass noeffect IKIE o oA Another problem you may encounter is that when you leave a page to open maps mail sms or any other application the page slides and when you open back up safari the content is gone L Ee Eo RoE ele class noeffect KAE tags opening external programs This works on all links and is also a way to force exiting fullscreen mode Usefull Links and Content Apple Developpers iphonewebdev groupaware iphoney alistapart
5. i gt with blue headers lt li class textbox gt lt span class header gt A title lt span gt lt p gt Your text lt p gt lt p gt another paragraph lt p gt lt li gt Menuitems with comments lt li class menu gt lt a href page html gt lt img alt Description src thumbs basics png gt lt span class name gt ltem Name lt span gt lt span class comment gt Comment lt span gt lt span class arrow gt lt span gt lt a gt lt li gt II III Ta span Class comment gt Comment lt span gt page 15 User Guide iWebkit 4 0 Store Lists lt li class store gt lt a class noeffect href page htm gt lt span class image style background image url image jpg gt lt span gt lt span class name gt tem Name lt span gt lt span class comment gt Comment lt span gt lt img alt rating class stars src images 4stars png gt lt span class starcomment gt 13 Reviews lt span gt lt span class arrow gt lt span gt lt a gt lt li gt You can delete the star rating the review text and the comment by deleting the corresponding tag page 16 User Guide iWebkit 4 0 Instead of using the clasic iphone menu style some users prefer to use lists to make a webpage We created 2 types of lists for you Each one is very easy to install Just one note once you use a list structure on a page you can not add other structures like a menu or textboxes from the no
6. lt span gt lt a gt lt li gt lt ul gt This creates 2 musiclist items You can add more by adding more lt li gt tags Change the number in lt span class number gt lt span gt ifelm er e ie ale Pye Te 0 EXMA AOA A EREA page 18 User Guide iWebkit 4 0 Full Screen Support Thanks to the brand new fullscreen support websites created with iWebkit 4 1 are now almosta native iphone ap plication Thanks to a hack we discovered it is now possible to have a multipage website display in fullscreen on the iphone This is the only pack offering this feature Fullscreen is activated by Default Codelines To tell the iphone to activate the full screen this code is needed between the lt head gt lt head gt tags lt meta name apple mobile web app capable content yes gt In this version it is activated by default but you can disable fullscreen by removing this code Statusbar You can also change the statusbar of the iPhone to transparent black The standard color is gray To do so place the next line in your file between the lt head gt lt head gt tags lt meta name apple mobile web app status bar style content black gt External Links It you want to place a link on your page that either makes the site exit fullscreen mode or open an app like mail ar ee da aaa AU Fe Ka ET le aaa href example html class noeffect gt WARNING If you choose for opening the link outside the app it reset the app and starts
7. with the first page Icon on Spingboard For this you need a square icon in PNG format and add the next codeline between the head tags lt link rel apple touch icon href image png gt Activation How do your activate full screen 1 touch Safari 2 visit for example http m iWebkit net 3 touch the and select Add To Home Screen 4 confirm this en open your full screen web app straight from the homescreen This is not a popup like an alert you usually see It is th same popup that you get in settings on your iPhone when you reset all setings It is a confirmation popup To make the popup appear you need to us a special lt a gt tag lt a class noeffect onclick popup gt You can use it in menu items storelist or any other link on the page You have to put this code after the tag and before the footer lt div id cover class nocover gt lt div gt lt div class popup gt lt div id fullscreenfix class fullscreenfixclosed gt lt div gt lt div id frame class confirm_screen gt lt span gt popup example lt span gt lt a href page html gt lt span class gray gt Gray Button lt span gt lt a gt lt a href page html gt lt span class red gt Red Button lt span gt lt a gt lt a class noeffect gt lt span class black gt Cancel lt span gt lt a gt lt div gt lt div gt This code creates a title for the popup a gray button a red button and a black button
8. NU GPL and this license document 4 Combined Works You may convey a Combined Work under terms of your choice that taken together effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications if you also do each of the following a Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License b Accompany the Combined Work with a copy of the GNU GPL and this license document c For a Combined Work that displays copyright notices during execution include the copyright notice for the Library among these notices as well as a reference directing the user to the copies ofthe GNU GPL and this license document d Do one of the following 0 Convey the Minimal Corresponding Source under the terms of this License and the Corresponding Application Code in a form suitable for and under terms that permit the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source 1 Use a suitable shared library mechanism for linking with the Library A suitable mechanism is one that a uses at run time a copy of the Library already present on the user s computer system and b will operate properly with a modified versi
9. Section 3 of the GNU GPL You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL 2 Conveying Modified Versions If you modify a copy of the Library and in your modifications a facility refers to a function or data to be supplied by an Application that uses the facility other than as an argument passed when the facility is invoked then you may convey a copy of the modified version a under this License provided that you make a good faith effort to ensure that in the event an Application does not supply the function or data the facility still operates and performs whatever part of its purpose remains meaningful or b under the GNU GPL with none of the additional permissions of this License applicable to that copy 3 Object Code Incorporating Material from Library Header Files The object code form of an Application may incorporate material from a header file that is part of the Library You may convey such object code under terms of your choice provided that if the incorporated material is not limited to numerical parameters data structure layouts and accessors or small macros inline functions and templates ten or fewer lines in length you do both of the following a Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License b Accompany the object code with a copy of the G
10. You can change it by changing the src attribute To create navigation arrows to the right of the topbar use this code inside the topbar div lt div id rightnav gt lt a href index html gt lt img alt home src images home png gt lt a gt lt a href page1 html gt Forward lt a gt lt div gt It works the same as for the left navigation arrows For the right navigation arrows the first lt a gt will be page 13 User Guide iWebkit 4 0 the most to the right Navigation Buttons To create a button to the left of the topbar use this code inside the topbar div lt div id leftbutton gt lt a href page html gt Back lt a gt lt div gt To create a button to the right of the topbar use this code inside the topbar div lt div id rightbutton gt lt a href page html gt Forward lt a gt lt div gt UE EIA Ia SU Bara Teh re Si div id content gt Jaleka corresponding tag To create a gray title you need to paste the following code in your page Be sure to paste it in the lt div id content gt lt div gt fEIeBElateHlaH teXeidst ie lt span class graytitle gt Title example lt span gt In this new vesion of iWebkit mixing of items is now possible All items are included in an lt ul gt tag like this Wau class pageitem gt lt ul gt There are multiple things you can add to it Textboxes lt li class textbox gt lt p gt Your text lt p gt lt p gt another paragraph lt p gt lt
11. bkit 4 0 Italic text by an tag Horizontal rules To separate sections in a document you can insert a horizontal rule tag WA It is not Creating links Link multiple pages To create a link to another document you use an a href lt a gt tag Everything between the two lt a gt lt a gt tags is a link To define the location of the link you must add an href attribute lt a href nameofpage html gt text image lt a gt Maybe you dont want all pages to be in the main folder in the root of your website Maybe make a folder like downloads right click in filezilla or any ftp client and click on new gt folder Then links would be like this lt a href downloads nameofpage him gt text image lt a gt You can also go one folder back by using this example lt a href nameofpage html gt text image lt a gt Here you will go back 2 folders This way you can easily create a multiple page document using clickable regions in your document Insert Images To insert an image you need 1 simple tag there is no endtag so it is not To make a link to the image location you must add an src attribute lt img src imagename jpg gt Maybe you dont want all images to be in the root of your website Maybe make a folder like images right click in filezilla or any ftp client and click on new gt folder Then the link would be like this lt img src images imagename jpg gt image also needs an alt att
12. e Software Foundation may publish revised and or new versions of the GNU Lesser General Public License from time to time Such new versions will be similar in spirit to the present version but may differ in detail to address new problems or concerns Each version is given a distinguishing version number If the Library as you received it specifies that a certain numbered version ofthe GNU Lesser General Public License or any later version applies to it you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation If the Library as you received it does not specify a version number ofthe GNU Lesser General Public License you may choose any version ofthe GNU Lesser General Public License ever published by the Free Software Foundation If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply that proxy s public statement of acceptance of any version is permanent authorization for you to choose that version for the Library New in iWebkit 4 1 Fixed User Guide errors and added a new section Fiked User guide code leading to wrong html code due to false guotation marks Fiked the confict between the HTTP encoding and the Document encoding Optimized the popup code Automaticly go to the bottom of the page when popup gets opened
13. ed to his previous application The only flaw was that he missed some features so he started creating his own and contacted Christopher about his work who thought his creations were wonderfull And with the help of johan iWebkit evolved to iWebkit 4 1 Before we begin to explain how to use the kit we would like to explain the basics of HTML Here you can get used to the basic structure of the code Open your blank pages and compare the code to what is underneath here Just like the header of amemo the head of an HTML document contains special information like its title The head of a document is demarcated by lt head gt and lt head gt respectively lt html gt lt head gt lt title gt My First HTML Document lt title gt lt head gt A title tag allows you to specify a document title in your browser window If people bookmark you page this title is what they will see in their bookmark list lt title gt My First HTML Documentsftitle gt Like you might expect the body tags lt body gt and lt body gt define the beginning and end of the bulk of your document All your text images and links will be in the body of the document The body should start after the head A typical page has this structure lt html gt lt head gt lt title gt My First HTML Document lt title gt lt head gt lt body gt lt body gt lt html gt ORARE by inserting tekt between b tags lt b gt Text lt b gt page 10 User Guide iWe
14. ed well Some minor changes in the overall code gt Optimized css Version 2 0 1 One small modifications to the style sheet that fixes a problem that occurred sometimes with the buttons in the navigation bar not being clickable Version 2 0 Image in the menu bars in to the left instead of the right New codes for speed and easy building Added possibility for navigation buttons in the top right Automatic image resize if it is to big for the ipods iphones screen Version 1 1 gt Bugfixes Alotofnew images for extended plugins and a top right button Extended Computer compatibility Version 1 0 Initial release Introduction of iWebkit 4 1 Christhoper Plieger He is a 17 year old half French half Dutch Guy He moved to France in 2003 and speaks English Dutch and French fluently At the moment he is in his last year of college and heading for university Chisthoper is the founder of iWebkit and started the project in august 2008 Being obsessed with his wonderfull iPod Touch and the fabulous webapps that were created he looked at the way these apps were designed He found out those apps weren t designed well and could use the advanced op tions offered by safari on the iPhone Before iWebkit there wasn t a simple and robust way to create iPhone websites and the moment he started creating it he constantly has this one sentence in his head It needs to be simple it needs to be beautifull it needs to be pe
15. o not appear when seen through a browser This is most useful for giving warnings and special instructions to future editors of your document ol aan At cha elkmielgssa lt This comment will not appear in the browser gt Now let s concentrate on the body tag You should follow the tutorial in the given order and you should look at the example files in the package to understand everthing better To create items in the topbar at the top of the navigation window you will need to work in the righr sec tion of the document This section will contain your page s titles and navigation buttons Work between Ua div id topbar gt lt div gt To create the white title shown as iWebkit on the homepage of the example pages use the following Ce a lt div id title gt Title lt div gt fegel s eigen ichiciarTen lt div id topbar gt lt div id title gt Title lt div gt lt div gt If you use multiple navigation buttons you should not use this tag because it either looks ugly or a button will overlap it To create navigation arrows to the left of the topbar use this code inside the topbar div lt div id leftnav gt lt a href index html gt lt img alt home src images home png gt lt a gt lt a href page1 html gt Back lt a gt lt div gt Each lt a gt tag will create a new button Just add or remove as much as you want The first lt a gt goes to the homepage and has an image specially made for it
16. on of the Library that is interface compatible with the Linked Version e Provide Installation Information but only if you would otherwise be reguired to provide such information under section 6 of the GNU GPL and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version If you use option 440 the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code If you use option 4d1 you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source 5 Combined Libraries You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License and convey such a combined library under terms of your choice if you do both of the following a Accompany the combined library with a copy of the same work based on the Library uncombined with any other library facilities conveyed under the terms of this License b Give prominent notice with the combined library that part of it is a work based on the Library and explaining where to find the accompanying uncombined form of the same work 6 Revised Versions ofthe GNU Lesser General Public License The Fre
17. rfect At that time he had a little website at 110mb com a free hosting service but he got many visitors and some thing that started as an experiment turned into a huge project evolving rapidly Eric March the co founder of touchpodium who published a great article on iWebkit really liked the idea and decided to offer Chris topher free hosting on the touchpodium website iWebkit becamed a member of the touchpodium family Today the projects has grown to unimaginable proportions and meeting Johan Christopher s thirst for developing rises again He changed iWebkit to Johan s server and Johan and him built this completly new website and iWebkit 4 1 now reaching a proffesional level and worldwide fame Johan van Wilsum Is a 24 years old Dutch guy He speaks Englisch Dutch and German Johan studies Mediamanagement and is specialised in the Graphic branche When he s not at school he s using Coldfusion and the Adobe applications to express his creative ideas Johan was programming a application for his company when he first discovered iWebkit The application he was building needed to be simple and easy to acces He was using very complicated codes and lan guages and after a while he got tired of it He wanted to create a framework that creates simple templates so he googled make an iphone website And the first hit was iWebkit He started with some little tests and he liked the way the programming worked He also noticed the speed of the pack compar
18. ribute like this lt img src imagename jpg alt Description of the image gt An alt attribute is meant to inform users of the image that is supposed to be there if for some reason the image does not load The iPhone or iPod will only show a blue bok but this value is still good for SEO Line Breaks The lt br gt element is used for line breaks If you are not using paragraphs In this toolkit you will be us ing paragraphes lt p gt lt p gt but the lt br gt tag can also be used inside paragraphes It will look like this This is a lt br gt line break thisisa line break You can add multiple tags to create spaces The br tag has no endtag Center Objects Most objects can be centered by adding a little tag to the parental tag around it This won t work for some objects like images for an example lt p style text align center gt TEXTTEXTTEXT lt p gt RWALL Mi fete ail com uals TEXTTEXTTEXT just add style text align center to any tag to center what is in it In some cases like with images you need to center the tag itself To do so add class center like this lt img src image jpg class center alt example gt Special characters There are a lot of special codes for characters like lt gt amp because they are used inside the code See a full list here http www tedmontgomery com tutorial HTMLchrc html HTML Comments It is possible to include comments in a source HTML document that d
19. rmal style To create a simple list you first need to replace the EINE lt body class list gt Next you start the list lt ul gt lt li class title gt Title of list gray bar lt li gt lt li gt lt a href page html gt lt span class name gt Name of item lt span gt lt span class arrow gt lt span gt lt a gt lt li gt lt li class withimage gt lt a href page html gt lt img alt test src image jpg gt lt span class name gt Name of item with image lt span gt lt span class comment gt Comment lt span gt lt span class arrow gt lt span gt lt a gt lt li gt lt ul gt This will create a title for the list and 2 items A normal one and one with an image Each Li tag creates a new item If you use lt li class withimage gt it will allow you to add an image To create a music type list you first need to replace the TET AVI lt body class musiclist gt Now you have to make the list items page 17 User Guide iWebkit 4 0 lt ul gt lt li gt lt a href page html gt lt span class number gt 1 lt span gt lt span class name gt Name of song lt span gt lt span class time gt 3 58 lt span gt lt span class arrow gt lt span gt lt a gt lt li gt lt li gt lt a href page html gt lt span class number gt 2 lt span gt lt span class name gt Name of second song lt span gt lt span class time gt 5 12 lt span gt lt span class arrow gt
20. s the terms and conditions of version 3 of the GNU Gen eral Public License supplemented by the additional permissions listed below 0 Additional Definitions As used herein this License refers to version 3 of the GNU Lesser General Public License and the GNU GPL refers to version 3 of the GNU General Public License The Library refers to a covered work governed by this License other than an Application ora Combined Work as defined below An Application is any work that makes use of an interface provided by the Library but which is not otherwise based on the Library Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library A Combined Work is a work produced by combining or linking an Application with the Library The particular version of the Library with which the Combined Work was made is also called the Linked Version The Minimal Corresponding Source for a Combined Work means the Corresponding Source for the Combined Work excluding any source code for portions of the Combined Work that considered in isolation are based on the Application and not on the Linked Version The Corresponding Application Code for a Combined Work means the object code and or source code for the Application including any data and utility programs needed for reproducing the Combined Work from the Application but excluding the System Libraries of the Combined Work 1 Exception to
Download Pdf Manuals
Related Search