Your SlideShare is downloading. ×
Adobe & HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adobe & HTML5

2,281

Published on

A quick tour through a number of Adobe initiatives in HMTL5

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,281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
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

    ×