Adobe & HTML5
âąAls PPTX, PDF herunterladenâą
4 gefĂ€llt mirâą1,136 views
A quick tour through a number of Adobe initiatives in HMTL5
Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ăhnlich wie Adobe & HTML5
Ăhnlich wie Adobe & HTML5 (20)
Mehr von Terry Ryan
Mehr von Terry Ryan (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Adobe & HTML5
- 2. Who Are You?
- 3. HTML5 Acquired Typekit Acquired Nitobi, makers of PhoneGap Released new preview of Edge CSS Shaders submitted to W3C
- 5. I am sick of seeing only 6-10 fonts deemed âweb safeâ
- 6. I WANT MORE FONTS
- 7. Webfonts âą Webfonts are a solution to this â Require multiple formats â Require proper licensing
- 8. Typekit âą Or someone can handle all this for you
- 9. Demo Typekit
- 10. Next Steps with Typekit âą Try Typekit â https://typekit.com/
- 15. Doing it yourself sucks.
- 16. Especially if someone else has done it
- 18. jQuery makes stuff easy
- 19. jQuery has a huge ecosystem
- 20. GETTING STARTED WITH JQUERY MOBILE
- 21. Basic Page Start <!DOCTYPE html> <html> <head> <title>Codeworks</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> </head>
- 22. Page Model
- 23. Basic Page Layout <div data-role="page" id="landing" > <div data-role="header"> <!-- header content --> </div> <div data-role="content"> <!-- Page content --> </div> <div data-role="footer" > <!-- Footer content --> </div> </div>
- 24. Basic Page Layout <div data-role="page" id="landing"> <!-- page content --> </div> <div data-role="page" id="detail"> <!-- page content --> </div> <div data-role="page" id="map"> <!-- page content --> </div>
- 26. Navigation <div data-role="page" id="second" data-add-back-btn="true">
- 27. Data Lists <ul data-role="listview"> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li> </ul>
- 28. Tab Menus <div data-role="navbar"> <ul> <li><a href="#landing" class="ui-btn-active">Schedule</a></li> <li><a href="#map">Map</a></li> </ul> </div>
- 29. Forms <form > <label for="username">Username:</label> <input type="text" name="username" id="username" /> <label for="password">Password:</label> <input type="password" name="password" id="password" /> <input type="submit" name="submit" value="Login" /> </form>
- 30. THEME ROLLER
- 31. I want my own design
- 33. Next Steps with jQuery Mobile âą Download jQuery Mobile â http://jquerymobile.com/ âą Check out killer documentation â http://jquerymobile.com/demos/1.0/ âą Check out Theme Roller â http://jquerymobile.com/themeroller/
- 39. Demo Adobe Edge
- 40. Next Steps with Edge âą Get Edge â http://labs.adobe.com/technologies/edge/
- 43. We have a web app We need a native app
- 44. Why do we need native?
- 46. The ease of web the access of native
- 47. Enter PhoneGap
- 48. PhoneGap packages a web app into a ânativeâ app
- 49. What do you mean by ânativeâ apps
- 50. Apps can be distributed in stores
- 51. UI is not native
- 52. PHONEGAP BUILD
- 53. One pain point: Lots of software
- 57. PhoneGap Build âą Setup build â Certificates â Provision files âą Get code to cloud â Upload â Link to git repository âą Have servers build app files
- 58. Demo PhoneGap Build
- 59. Next Steps with Phone Gap âą Look at Phone Gap â http://phonegap.com/ âą Get started â http://phonegap.com/start âą Phone Gap Build â https://build.phonegap.com/
- 61. What if browsers could do more?
- 63. Cinematic effects for the web
- 64. Demo CSS Shaders
- 65. Follow up? âą Preso will be up at â http://slideshare.net/tpryan âą Feel free to contact me â terry.ryan@adobe.com â http://terrenceryan.com â Twitter: @tpryan
Hinweis der Redaktion
- Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?