Developer 也可以做出漂亮網站Twitter Bootstrap/jQuery Mobile 簡介
Developer 為什麼要用UI Framework?
老   :今天要的東西,昨天就要
os:嘴砲完!=做好了
嘴砲之外技術規格流程UI實現新功能測試
Developer較擅長的技術規格流程UI實現新功能測試
讓專業的來? (Designer)技術規格流程UI實現新功能測試
不擅長UI?自己做不好看不會畫圖(img)不會做圖示(icon)
UI Framework讓Developer/Designer用同一套設計語言溝通
WEB開發(前端)html + js +css + img + icon
WEB開發-Developer向html + js +css + img + icon
WEB開發-Designer向html + js +css + img + icon
WEB開發-UI Frameworkhtml + js +css + img + icon
使用UI Framework少做多得專注流程與新功能(有價值的)護肝早下班
少做多得一樣用html+js跨平台、 跨裝置跨瀏覽器
想介紹的UI FrameworkJQuery Mobile / Twitter Bootstrap
適用情境jQuery Mobile:列表型態的行動網頁/行動應用Twitter Bootstrap: 面、平板、行動網頁
JQUERY MOBILE網站     http://jquerymobile.com/
GALLERY網站     HTTP://WWW.JQMGALLERY.COM/
CODIQA網站     HTTP://WWW.CODIQA.COM/
文件網站     HTTP://JQUERYMOBILE.COM/DEMOS/1.1.0/
Define<head> <title>jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /> <script src="jquery-...
Body<div data-role="page"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The...
Body with theme<div data-role="page" data-theme="c"> <div data-role="header" data-theme="b"> <h1>Title</h1> </div><!-- /he...
THEMEROLLER網站     HTTP://JQUERYMOBILE.COM/THEMEROLLER/
Order List<div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c">   <li data-role="list-divid...
Navigation Bar<div data-role="footer" data-theme="b"> <div data-role="navbar">  <ul>   <li>   <a href="#" data-icon="info"...
ICONS網站     HTTP://JQUERYMOBILE.COM/TEST/DOCS/BUTTONS/BUTTONS-ICONS.HTML
Tada!REFERENCE HTTP://GOO.GL/NFVBZ
MOBISCROLL網站     HTTP://MOBISCROLL.COM/
TWITTER BOOTSTRAP網站     HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
BUILT WITH BOOTSTRAP網站     HTTP://BUILTWITHBOOTSTRAP.COM/
BOOTSWATCH網站     HTTP://BOOTSWATCH.COM/
自行訂製網站     HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
文件網站     HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML
螢模式網站
平板模式網站
手機模式網站
Define<head>  <title>Twitter Bootstrap</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <li...
Responsive Design<head>  <title>Twitter Bootstrap</title>  <meta name="viewport" content="width=device-width, initial-scal...
Body (Grid)                    面<body data-offset="50"> <div id="row">  <div class="span3">                               ...
Navigation Bar<body data-offset="50"><div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="cont...
with icon<body data-offset="50"><div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="container...
ICONS網站     HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS
FONT AWESOME網站     HTTP://FORTAWESOME.GITHUB.COM/FONT-
Live DemoHero UnitBadgeAlertsPlugins
THANKS!JQuery Mobile / Twitter Bootstrap
Upcoming SlideShare
Loading in …5
×

Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介

24,495 views

Published on

Published in: Design, Technology, Art & Photos
0 Comments
128 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,495
On SlideShare
0
From Embeds
0
Number of Embeds
219
Actions
Shares
0
Downloads
540
Comments
0
Likes
128
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x7528;&amp;#x76F8;&amp;#x540C;UI Framework, &amp;#x7528;&amp;#x540C;&amp;#x6A23;&amp;#x65B9;&amp;#x5F0F;&amp;#x6E9D;&amp;#x901A;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • syntax highlight\nhttp://tohtml.com/xml/\n
  • Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介

    1. 1. Developer 也可以做出漂亮網站Twitter Bootstrap/jQuery Mobile 簡介
    2. 2. Developer 為什麼要用UI Framework?
    3. 3. 老 :今天要的東西,昨天就要
    4. 4. os:嘴砲完!=做好了
    5. 5. 嘴砲之外技術規格流程UI實現新功能測試
    6. 6. Developer較擅長的技術規格流程UI實現新功能測試
    7. 7. 讓專業的來? (Designer)技術規格流程UI實現新功能測試
    8. 8. 不擅長UI?自己做不好看不會畫圖(img)不會做圖示(icon)
    9. 9. UI Framework讓Developer/Designer用同一套設計語言溝通
    10. 10. WEB開發(前端)html + js +css + img + icon
    11. 11. WEB開發-Developer向html + js +css + img + icon
    12. 12. WEB開發-Designer向html + js +css + img + icon
    13. 13. WEB開發-UI Frameworkhtml + js +css + img + icon
    14. 14. 使用UI Framework少做多得專注流程與新功能(有價值的)護肝早下班
    15. 15. 少做多得一樣用html+js跨平台、 跨裝置跨瀏覽器
    16. 16. 想介紹的UI FrameworkJQuery Mobile / Twitter Bootstrap
    17. 17. 適用情境jQuery Mobile:列表型態的行動網頁/行動應用Twitter Bootstrap: 面、平板、行動網頁
    18. 18. JQUERY MOBILE網站 http://jquerymobile.com/
    19. 19. GALLERY網站 HTTP://WWW.JQMGALLERY.COM/
    20. 20. CODIQA網站 HTTP://WWW.CODIQA.COM/
    21. 21. 文件網站 HTTP://JQUERYMOBILE.COM/DEMOS/1.1.0/
    22. 22. Define<head> <title>jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.1.0.min.js"></script></head>
    23. 23. Body<div data-role="page"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The content</p> </div><!-- /content --> <div data-role="footer"> <h4>The Footer</h4> </div><!-- /footer --></div><!-- /page -->
    24. 24. Body with theme<div data-role="page" data-theme="c"> <div data-role="header" data-theme="b"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The content</p> </div><!-- /content --> <div data-role="footer" data-theme="b"> <h4>The Footer</h4> </div><!-- /footer --></div><!-- /page -->
    25. 25. THEMEROLLER網站 HTTP://JQUERYMOBILE.COM/THEMEROLLER/
    26. 26. Order List<div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <li data-role="list-divider">Web Sites</li> <li><a href="http://www.gasolin.idv.tw">gasolin</a></li> <li><a href="http://letshow.me">LetShow</a></li> </ul></div><!-- /content -->
    27. 27. Navigation Bar<div data-role="footer" data-theme="b"> <div data-role="navbar"> <ul> <li> <a href="#" data-icon="info" data-iconpos="top">Info</a> </li><li> <a href="#" data-icon="star" data-iconpos="top">Mark</a> </li><li> <a href="#" data-icon="gear" data-iconpos="top">Pref</a> </li> </ul> </div></div><!-- /footer -->
    28. 28. ICONS網站 HTTP://JQUERYMOBILE.COM/TEST/DOCS/BUTTONS/BUTTONS-ICONS.HTML
    29. 29. Tada!REFERENCE HTTP://GOO.GL/NFVBZ
    30. 30. MOBISCROLL網站 HTTP://MOBISCROLL.COM/
    31. 31. TWITTER BOOTSTRAP網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
    32. 32. BUILT WITH BOOTSTRAP網站 HTTP://BUILTWITHBOOTSTRAP.COM/
    33. 33. BOOTSWATCH網站 HTTP://BOOTSWATCH.COM/
    34. 34. 自行訂製網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
    35. 35. 文件網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML
    36. 36. 螢模式網站
    37. 37. 平板模式網站
    38. 38. 手機模式網站
    39. 39. Define<head> <title>Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="css/bootstrap.min.css"/> <link rel="stylesheet" media="screen" href="css/bootstrap-responsive.min.css"/> <script src="js/bootstrap.min.js" type="text/javascript"></script></head>
    40. 40. Responsive Design<head> <title>Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="bootstrap.min.css"/> <link rel="stylesheet" media="screen" href="bootstrap-responsive.min.css"/> <script src="bootstrap.min.js" type="text/javascript"></script></head>
    41. 41. Body (Grid) 面<body data-offset="50"> <div id="row"> <div class="span3"> 平板 <h3>Left</h3> </div> <div class="span9"> <h1>Main</h1> 手機 </div> </div></body> 配置
    42. 42. Navigation Bar<body data-offset="50"><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="/">GTUG Taipei</a> <ul class="nav"> <li><a href="/">gasolin</a></li> <li class="active"> <a href="http://letshow.me">LetShow</a></li> </ul> </div> </div></div>...
    43. 43. with icon<body data-offset="50"><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="/">GTUG Taipei</a> <ul class="nav"> <li><a href="/">gasolin</a></li> <li class="active"> <a href="http://letshow.me"> <i class="icon-headphones icon-white"></i> LetShow </a></li> </ul> </div> </div></div>
    44. 44. ICONS網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS
    45. 45. FONT AWESOME網站 HTTP://FORTAWESOME.GITHUB.COM/FONT-
    46. 46. Live DemoHero UnitBadgeAlertsPlugins
    47. 47. THANKS!JQuery Mobile / Twitter Bootstrap

    ×