Html5智能手机ui布局浅谈

2,964 views

Published on

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,964
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
50
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Html5智能手机ui布局浅谈

  1. 1. HTML5智能手机UI布局浅谈<br />
  2. 2. About Me<br />@三桥tjk<br />Font End Engineer<br />www.imsankyu.com<br />
  3. 3. 讲什么?<br />过去的手机Web UI<br />HTML5手机Web时代<br />HTML5新元素<br />智能手机软件UI<br />智能手机Web UI<br />HTML5与智能手机Web<br />手机Web的展望<br />
  4. 4. WAP浏览体验<br />
  5. 5. 平台代表<br />Symbian<br />Windows CE<br />MTK<br />内置Wap浏览器<br />使用WML语言<br />
  6. 6. 智能手机<br />Android<br />IPhone<br />iPad<br />BlackBerry<br />
  7. 7. 智能手机Web浏览器<br />Android Browser (Chrome lite)<br />iOS Safari<br />Opera Mini<br />Opera Mobile<br />
  8. 8. 支持HTML5?<br />HTML5新元素标签<br />CSS3<br />Canvas<br />Web Socket<br />Geolocation API<br />Web Storage<br />……<br />
  9. 9. HTML5新元素<br />header<br />footer<br />nav<br />aside<br />article<br />section<br />time<br />hgroup<br />
  10. 10. 优势<br />支持HTML5特性最多的浏览器<br />不需要考虑太多兼容性问题<br />支持WebKit特性,可使用CSS3<br />
  11. 11. My Demo<br />
  12. 12. iPhone Mail App<br />
  13. 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. 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. 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. 16. iPad Mail Web App<br />Header<br />Header<br />Article&List<br />Main Body<br />Footer<br />
  17. 17. iPhoneFacebook App<br />
  18. 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. 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. 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. 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. 22. 网易新闻<br />
  23. 23. HTML5 Web APP?<br />
  24. 24. Google+<br />
  25. 25. Google+ Web APP<br />Header<br />Header<br />Content<br />Content<br />
  26. 26. Web APPs UI<br />
  27. 27. Web App 未来<br />UI种类更加丰富<br />Web App+HTML5结合<br />Native App + Web App<br />传统网站延伸至Web App<br />
  28. 28. The END<br />

×