Your SlideShare is downloading. ×
iWebkit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

iWebkit

4,050
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,050
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iWebkit Ryan http://MobileDev.tw 1
  • 2. 1.  7.  iTunes Music List 2.  8.  iPod List 3.  9.  4.  10.  5.  ListView 11.  6.  APPStore List 2
  • 3. iWebKit http://iwebkit.net/ iwebkit/iwebkit5.04.zip Framework/index.html What is iWebkit iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and professional looking website. iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable. It is simple html that anyone can edit contrary to some other very complicated solutions based on ajax. Simplicity is the key! 3
  • 4. iWebKit – (1/3) •  <div id="topbar"> <div id="title">My Title</div> </div> •  <div id="topbar" class="black"></div> <div id="topbar" class="transparent"></div> 4
  • 5. iWebKit – (2/3) Arrows, buttons, tri/duobuttons <div id="topbar"> <div id="title">Ryan iWeb</div> <div id="leftnav"> <a href="page.html"> <img alt="home" src="images/home.png" /> </a></div> <div id="rightnav"> <a href="page2.html">Next</a> </div> </div> <div id="rightnav"> <a href="page2.html">Next</a> <a href="page2.html">Next2</a> </div> 5
  • 6. iWebKit – (3/3) Arrows, buttons, tri/duobuttons <div id="topbar"> <div id="title">Ryan iWeb</div> <div id="leftbutton"> <a href="page.html">Home</a> </div> <div id="rightbutton"> <a href="page2.html">Option</a> </div> </div> <div id="blueleftbutton"> <a href="page.html">Home</a></div> <div id="bluerightbutton"> <a href="page2.html">Option</a></div> 6
  • 7. iWebKit – (1/2) <div id="content"> <span class="graytitle">my title </span> </div> <ul class="pageitem"> <li class="textbox"> <span class="header">blue title</span> <p>123</p> </li> <li class="menu"> <a href="page.html"> <img alt="Desrciption" src="thumbs/other.png" /> <span class="name">Name1111111111</span> <span class="comment">Comment</span> <span class="arrow"></span> </a> </li> </ul> 7
  • 8. iWebKit – (2/2) iTunes classic list view <li class="store"> <a href="page.html"> <span class="image" style="background- image:url('thumbs/youtube.png')"></span> <span class="comment">comment</span> <span class="name">Nema</span> <span class="stars5"></span> <span class="starcomment">5 ratings</span> <span class="arrow"></span> </a> </li> 90x90 px 8
  • 9. iWebKit – (1/4) ( topbar content ) <div class="searchbox"> <form action="http://www.iiiedu.org.tw/taipei/aspro/c.asp" method="get"> <fieldset> <input id="search" placeholder="search" type="text" name="qcno"/> <input id="submit" type="hidden" /> </fieldset> </form> </div> 9
  • 10. iWebKit – (2/4) ( <ul class="pageitem"> ) <li class="bigfield"> <input placeholder="Username" type="text" /> </li> <li class="smallfield"> <span class="name">Name</span> <input placeholder="Enter Text" type="text" /> </li> <li class="textbox"> <textarea name="TextArea" rows="4"></textarea> </li> 10
  • 11. iWebKit – (3/4) ( <ul class="pageitem"> ) checkbox <li class="checkbox"> <span class="name">my text</span> <input name="checkbox" type="checkbox" /> </li> radiobutton <li class="radiobutton"> <span class="name">text</span> <input name="GroupName" type="radio" value="A" /> </li> <li class="select"> <select name="example"> <option value="1">Option1</option> <option value="2">Option2</option> </select> <span class="arrow"></span> </li> 11
  • 12. iWebKit – (4/4) Double add ( topbar content ) <div id="doublead"> <a href="page.html" style="background-color:gray"></a> <a href="page2.html" style="background-color:gray"></a> </div> background-image:url(‘pic.png’) 147x83 px <li class="button"> <input name="name" type="submit" value="Submit input" /> </li> 12
  • 13. iWebKit – ListView (1/2) 1. <body> -> <body class="list"> 2. content div <ul>….</ul> 3. code <ul>…..</ul> <li class="title">My List View</li> <li> <a href="page.html"> <span class="name">name</span> <span class="arrow"></span> </a> </li> 13
  • 14. iWebKit – ListView (2/2) ( 90x90 px) <li class="withimage"> <a href="page.html"> <img alt="description" src="thumbs/ipod.png" /> <span class="name">name</span> <span class="comment">comment</span> <span class="arrow"></span> </a> </li> 14
  • 15. iWebKit – Appstore List (1/2) 1. <body> -> <body class="applist"> 2. content div <ul>….</ul> 3. code <ul>…..</ul> <li> <a href="page.html"> <span class="image" style="background-image:url('pic.png')"></span> <span class="comment">Comment111</span> <span class="name">Name</span> <span class="stars4"></span> <span class="starcomment">1Rating</span> <span class="arrow"></span> <span class="price">$12</span> </a> </li> 57x57px 15
  • 16. iWebKit – Appstore List (2/2) doublead <li id="doublead"> <a href="page.html" style="background-image:url('pic1.png')"></a> <a href="page.html" style="background-image:url('pic1.png')"></a> </li> 147x83px 16
  • 17. iWebKit – iTunes Music List 1. <body> -> <body class="musiclist"> 2. content div <ul>….</ul> 3. code <ul>…..</ul> <ul> <li><a href="page.html"> <span class="number">1</span> <span class="name">Name</span> <span class="time">(1:33)</span> <span class="arrow"></span> </a> </li> </ul> 17
  • 18. iWebKit – iPod List 1. <body> -> <body class="ipodlist"> 2. content div <ul>….</ul> 3. code <ul>…..</ul> <ul> <li><a href="page.html"> <span class="number">1</span> <span class="auto"></span> <span class="name">Name</span> <span class="time">(1:33)</span> </a> </li> </ul> 18
  • 19. iWebKit – <meta content="yes" name="apple-mobile-web-app-capable" /> iPhone <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> iPhone <link rel="apple-touch-icon" href="logo.png" /> ( 320x460px) <link href="startup.png" rel="apple-touch-startup-image" /> 19
  • 20. iWebKit – <meta name="format-detection" content="telephone=yes" /> (iPhone)/ (iPod Touch) <a class="noeffect" href="tel:123-456-7890">call now</a> Youtube <a class="noeffect" href="http://www.youtube.com/yourvideo">Watch</a> <a class="noeffect" href="sms:12125551212">Send</a> <a class="noeffect" href="http://maps.google.com/?ie=UTF8&ll=...">Look Map</a> iTune Appstore <a class="noeffect" href="http://itunes.apple.com/us/app/zinio-magazine -newsstand-reader/id364297166?mt=8">Open App</a> RSS <script src="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http://rss.news.yahoo.com/rss/topstories" type="text/javascript"></script> 20
  • 21. •  •  •  •  Next Step •  •  PhoneGap •  Real APP 21