Adobe & HTML5
Who Are You?
HTML5   Acquired Typekit        Acquired Nitobi,        makers of PhoneGap        Released new        preview of Edge     ...
I am sick  of seeingonly 6-10    fonts  deemed “web safe”
I WANT MORE   FONTS
Webfonts• Webfonts are a solution to this  – Require multiple formats  – Require proper licensing
Typekit• Or someone can handle all this for you
Demo       Typekit
Next Steps with Typekit• Try Typekit  – https://typekit.com/
Why jQuery Mobile?
Doing it yourself    sucks.
Especially ifsomeone else has done it
jQuery makes  stuff easy
jQuery has ahuge ecosystem
GETTING STARTED WITHJQUERY MOBILE
Basic Page Start<!DOCTYPE html><html><head><title>Codeworks</title><meta name="viewport" content="width=device-width, init...
Page Model
Basic Page Layout<div data-role="page" id="landing" >    <div data-role="header">        <!-- header content -->    </div>...
Basic Page Layout<div data-role="page" id="landing">    <!-- page content --></div><div data-role="page" id="detail">    <...
Navigation<a href="#map" class="ui-btn-active">Map</a>
Navigation<div data-role="page" id="second" data-add-back-btn="true">
Data Lists<ul data-role="listview">    <li><a href="#second">Second</a></li>    <li><a href="#third">Third</a></li></ul>
Tab Menus<div data-role="navbar"><ul><li><a href="#landing" class="ui-btn-active">Schedule</a></li><li><a href="#map">Map<...
Forms<form >      <label for="username">Username:</label>      <input type="text" name="username" id="username" />     <la...
THEME ROLLER
I want my own    design
Next Steps with jQueryMobile• Download jQuery Mobile  – http://jquerymobile.com/• Check out killer documentation  – http:/...
Demo       Adobe Edge
Next Steps with Edge• Get Edge  – http://labs.adobe.com/technologies/edge/
We have a web     appWe need a native     app
Why do we need   native?
Camera  CompassAccelerometer
The ease of web the access of     native
Enter PhoneGap
PhoneGappackages a web   app into a  “native” app
What do youmean by “native”    apps
Apps can bedistributed in    stores
UI is not native
PHONEGAP BUILD
One pain point:Lots of software
EnterPhoneGap Build
PhoneGap Build• Setup build  – Certificates  – Provision files• Get code to cloud  – Upload  – Link to git repository• Hav...
Demo       PhoneGap Build
Next Steps with PhoneGap• Look at Phone Gap  – http://phonegap.com/• Get started  – http://phonegap.com/start• Phone Gap B...
What if browserscould do more?
Enter CSS Shaders
Cinematiceffects for the     web
Demo       CSS Shaders
Follow up?• Preso will be up at  – http://slideshare.net/tpryan• Feel free to contact me  – terry.ryan@adobe.com  – http:/...
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Adobe & HTML5
Upcoming SlideShare
Loading in...5
×

Adobe & HTML5

2,323

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,323
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×