Adobe & HTML5
•Download as PPTX, PDF•
4 likes•1,136 views
- 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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Adobe & HTML5
Similar to Adobe & HTML5 (20)
More from Terry Ryan
More from Terry Ryan (20)
Recently uploaded
Recently uploaded (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
Editor's Notes
- Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?