Adobe & HTML5

2,638 views

Published on

A quick tour through a number of Adobe initiatives in HMTL5

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,638
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?
  • Adobe & HTML5

    1. 1. Adobe & HTML5
    2. 2. Who Are You?
    3. 3. HTML5 Acquired Typekit Acquired Nitobi, makers of PhoneGap Released new preview of Edge CSS Shaders submitted to W3C
    4. 4. I am sick of seeingonly 6-10 fonts deemed “web safe”
    5. 5. I WANT MORE FONTS
    6. 6. Webfonts• Webfonts are a solution to this – Require multiple formats – Require proper licensing
    7. 7. Typekit• Or someone can handle all this for you
    8. 8. Demo Typekit
    9. 9. Next Steps with Typekit• Try Typekit – https://typekit.com/
    10. 10. Why jQuery Mobile?
    11. 11. Doing it yourself sucks.
    12. 12. Especially ifsomeone else has done it
    13. 13. jQuery makes stuff easy
    14. 14. jQuery has ahuge ecosystem
    15. 15. GETTING STARTED WITHJQUERY MOBILE
    16. 16. 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>
    17. 17. Page Model
    18. 18. 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>
    19. 19. 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>
    20. 20. Navigation<a href="#map" class="ui-btn-active">Map</a>
    21. 21. Navigation<div data-role="page" id="second" data-add-back-btn="true">
    22. 22. Data Lists<ul data-role="listview"> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li></ul>
    23. 23. 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>
    24. 24. 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>
    25. 25. THEME ROLLER
    26. 26. I want my own design
    27. 27. Next Steps with jQueryMobile• Download jQuery Mobile – http://jquerymobile.com/• Check out killer documentation – http://jquerymobile.com/demos/1.0/• Check out Theme Roller – http://jquerymobile.com/themeroller/
    28. 28. Demo Adobe Edge
    29. 29. Next Steps with Edge• Get Edge – http://labs.adobe.com/technologies/edge/
    30. 30. We have a web appWe need a native app
    31. 31. Why do we need native?
    32. 32. Camera CompassAccelerometer
    33. 33. The ease of web the access of native
    34. 34. Enter PhoneGap
    35. 35. PhoneGappackages a web app into a “native” app
    36. 36. What do youmean by “native” apps
    37. 37. Apps can bedistributed in stores
    38. 38. UI is not native
    39. 39. PHONEGAP BUILD
    40. 40. One pain point:Lots of software
    41. 41. EnterPhoneGap Build
    42. 42. PhoneGap Build• Setup build – Certificates – Provision files• Get code to cloud – Upload – Link to git repository• Have servers build app files
    43. 43. Demo PhoneGap Build
    44. 44. Next Steps with PhoneGap• Look at Phone Gap – http://phonegap.com/• Get started – http://phonegap.com/start• Phone Gap Build – https://build.phonegap.com/
    45. 45. What if browserscould do more?
    46. 46. Enter CSS Shaders
    47. 47. Cinematiceffects for the web
    48. 48. Demo CSS Shaders
    49. 49. 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

    ×