Adobe & HTML5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Adobe & HTML5

  • 2,703 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,703
On Slideshare
2,680
From Embeds
23
Number of Embeds
1

Actions

Shares
Downloads
48
Comments
0
Likes
4

Embeds 23

http://storify.com 23

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