Adobe & HTML5

  • 2,246 views
Uploaded on

A quick tour through a number of Adobe initiatives in HMTL5

A quick tour through a number of Adobe initiatives in HMTL5

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
48
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Transcript

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