Your SlideShare is downloading. ×
0
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Html5智能手机ui布局浅谈
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5智能手机ui布局浅谈

2,664

Published on

Html5智能手机ui布局浅谈--介绍HTML5新元素如何应用在智能手机Web浏览器。

Html5智能手机ui布局浅谈--介绍HTML5新元素如何应用在智能手机Web浏览器。

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
  • 非常感谢,学习了哈
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,664
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
1
Likes
1
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. HTML5智能手机UI布局浅谈<br />
  • 2. About Me<br />@三桥tjk<br />Font End Engineer<br />www.imsankyu.com<br />
  • 3. 讲什么?<br />过去的手机Web UI<br />HTML5手机Web时代<br />HTML5新元素<br />智能手机软件UI<br />智能手机Web UI<br />HTML5与智能手机Web<br />手机Web的展望<br />
  • 4. WAP浏览体验<br />
  • 5. 平台代表<br />Symbian<br />Windows CE<br />MTK<br />内置Wap浏览器<br />使用WML语言<br />
  • 6. 智能手机<br />Android<br />IPhone<br />iPad<br />BlackBerry<br />
  • 7. 智能手机Web浏览器<br />Android Browser (Chrome lite)<br />iOS Safari<br />Opera Mini<br />Opera Mobile<br />
  • 8. 支持HTML5?<br />HTML5新元素标签<br />CSS3<br />Canvas<br />Web Socket<br />Geolocation API<br />Web Storage<br />……<br />
  • 9. HTML5新元素<br />header<br />footer<br />nav<br />aside<br />article<br />section<br />time<br />hgroup<br />
  • 10. 优势<br />支持HTML5特性最多的浏览器<br />不需要考虑太多兼容性问题<br />支持WebKit特性,可使用CSS3<br />
  • 11. My Demo<br />
  • 12. iPhone Mail App<br />
  • 13. iPhone Mail Web App<br /><header><br /> <button>MailBoxes</button><br /> < div class="title"> >Inbox</div><br /> <button>Edit</button><br /></header><br /><article><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br /><footer><br /> <button>Refresh</button><br /> <button>Add</button><br /></footer><br />
  • 14. iPhone Mail Web App<br /><header><br /> <button>MailBoxes</button><br /> <div class="title">Inbox</div><br /> <button>Edit</button><br /></header><br /><article><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br /><footer><br /> <button>Refresh</button><br /> <button>Add</button><br /></footer><br />
  • 15. iPhone Mail Web App<br />引入 jQuery Mobile后<br /><header data-role="header" data-position="inline"><br /> <a>MailBoxes</a><br /> <h1>Inbox</h1><br /> <a>Edit</a><br /></header><br /><article data-role="content"><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br /><footer data-role="footer" class="ui-bar"><br /> <a>Refresh</a><br /> <a>Add</a><br /></footer><br />
  • 16. iPad Mail Web App<br />Header<br />Header<br />Article&List<br />Main Body<br />Footer<br />
  • 17. iPhoneFacebook App<br />
  • 18. iPhoneFacebook Web App<br /><header data-role="header"data-position="inline"><br /> <a>9宫</a><br /> <h1>facebook</h1><br /> <a>Sync</a><br /></header><br /><div data-role="fieldcontain"><br /> <input type="search" id="search" value="" /><br /></div><br /><article data-role="content"><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br /><footer data-role="footer"><br /> <nav data-role="navbar"><br /> <ul><br /> <li><a href="#" class="ui-btn-active">friends</a></li><br /> <li><a href="#">pages</a></li><br /> <li><a href="#">requests</a></li><br /> </ul><br /> </nav><br /></footer><br />
  • 19. iPhoneFacebook Web App<br /><header data-role="header"data-position="inline"><br /> <a>9宫</a><br /> <h1>facebook</h1><br /> <a>Sync</a><br /></header><br /><div data-role="fieldcontain"><br /> <input type="search" id="search" value="" /><br /></div><br /><article data-role="content"><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br /><footer data-role="footer"><br /> <nav data-role="navbar"><br /> <ul><br /> <li><a href="#" class="ui-btn-active">friends</a></li><br /> <li><a href="#">pages</a></li><br /> <li><a href="#">requests</a></li><br /> </ul><br /> </nav><br /></footer><br />
  • 20. iPhoneFacebook Web App<br /><header data-role="header"data-position="inline"><br /> <a>9宫</a><br /> <h1>facebook</h1><br /> <a>Sync</a><br /></header><br /><nav data-role="navbar"><br /> <ul><br /> <li><a href="#" class="ui-btn-active">friends</a></li><br /> <li><a href="#">pages</a></li><br /> <li><a href="#">requests</a></li><br /> </ul><br /></nav><br /><article data-role="content"><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br />
  • 21. iPhoneFacebook Web App<br /><header data-role="header"data-position="inline"><br /> <a>9宫</a><br /> <h1>facebook</h1><br /> <a>Sync</a><br /></header><br /><nav data-role="navbar"><br /> <ul><br /> <li><a href="#" class="ui-btn-active">friends</a></li><br /> <li><a href="#">pages</a></li><br /> <li><a href="#">requests</a></li><br /> </ul><br /></nav><br /><article data-role="content"><br /> <article>邮件1</article><br /> <article>邮件2</article><br /> <article>邮件3</article><br /> <article>邮件4</article><br /></article><br />
  • 22. 网易新闻<br />
  • 23. HTML5 Web APP?<br />
  • 24. Google+<br />
  • 25. Google+ Web APP<br />Header<br />Header<br />Content<br />Content<br />
  • 26. Web APPs UI<br />
  • 27. Web App 未来<br />UI种类更加丰富<br />Web App+HTML5结合<br />Native App + Web App<br />传统网站延伸至Web App<br />
  • 28. The END<br />

×