Downloaded 50 times
Uploaded byTerry Ryan
Adobe & HTML5
- Adobe acquired Typekit, a web font service, and Nitobi, makers of PhoneGap, a tool to build native mobile apps using web technologies. - Adobe released a new preview of Edge, its digital publishing tool, and submitted CSS Shaders to the W3C to bring cinematic effects to the web through CSS. - PhoneGap packages a web app into a native mobile app, allowing it to be distributed through app stores and take advantage of device capabilities like the camera through a native wrapper, while retaining the ease of development of the web. - PhoneGap Build removes the pain of setting up build environments by hosting the build process in the cloud and allowing developers to upload code and link
More Related Content
Adobe & HTML5
- 1.
- 2.
- 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 area solution to this – Require multiple formats – Require proper licensing
- 8. Typekit • Or someonecan handle all this for you
- 9. Demo Typekit
- 10. Next Steps withTypekit • Try Typekit – https://typekit.com/
- 13.
- 15. Doing it yourself sucks.
- 16. Especially if someone else has done it
- 18. jQuery makes stuff easy
- 19. jQuery has a hugeecosystem
- 20.
- 21. Basic Page Start <!DOCTYPEhtml> <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.
- 23. Basic Page Layout <divdata-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 <divdata-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>
- 25.
- 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><ahref="#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.
- 31. I want myown design
- 33. Next Steps withjQuery 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 withEdge • Get Edge – http://labs.adobe.com/technologies/edge/
- 43. We have aweb app We need a native app
- 44. Why do weneed native?
- 45.
- 46. The ease ofweb the access of native
- 47.
- 48. PhoneGap packages a web app into a “native” app
- 49. What do you meanby “native” apps
- 50. Apps can be distributedin stores
- 51. UI is notnative
- 52.
- 53. One pain point: Lotsof software
- 56.
- 57. PhoneGap Build • Setupbuild – Certificates – Provision files • Get code to cloud – Upload – Link to git repository • Have servers build app files
- 58. Demo PhoneGap Build
- 59. Next Steps withPhone 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 coulddo more?
- 62.
- 63.
- 64. Demo CSS Shaders
- 65. Follow up? • Presowill be up at – http://slideshare.net/tpryan • Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan
Editor's Notes
- #3 Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?