adobe & html5
DESCRIPTION
A quick tour through a number of Adobe initiatives in HMTL5TRANSCRIPT
Adobe & HTML5Terry Ryan | Worldwide Developer EvangelistTwitter: @tpryan
Who Are You?
HTML5 Acquired Typekit
Acquired Nitobi, makers of PhoneGap
Released new preview of Edge
CSS Shaders submitted to W3C
I am sick of seeing only 6-10fonts
deemed “web safe”
I WANT MORE FONTS
Webfonts
• Webfonts are a solution to this– Require multiple formats– Require proper licensing
• Or someone can handle all this for you
Typekit
Demo
Typekit
• Try Typekit– https://typekit.com/
Next Steps with Typekit
Why jQuery Mobile?
Fixed position toolbar
Expand <a> to fill entire <li> space for touchability
Fixed position toolbar that doesn’t work in Android, yet
Replace default link following with Ajax call and replacing <body>
Add margins to list to make work with toolbars
Also it doesn’t display right.
Doesn’t work on all mobile browsers
Doing it yourself sucks.
Especially if someone else
has done it
<div data-role=“header”>
<div data-role=“footer”>
<ul data-role="listview”>
<a> No AJAX required
Entire app is one HTML document
Works perfectly in many browsers, gracefully degrades in most.
jQuery makes stuff easy
jQuery has a huge
ecosystem
GETTING STARTED WITH JQUERY MOBILE
<!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>
Basic Page Start
Page Model
<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>
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>
Basic Page Layout
<a href="#map" class="ui-btn-active">Map</a>
Navigation
<div data-role="page" id="second" data-add-back-btn="true">
Navigation
<ul data-role="listview"><li><a href="#second">Second</a></li><li><a href="#third">Third</a></li>
</ul>
Data Lists
<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>
Tab Menus
<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>
Forms
THEME ROLLER
I want my own design
• Download jQuery Mobile– http://jquerymobile.com/
• Check out killer documentation– http://jquerymobile.com/demos/1.0/
• Check out Theme Roller– http://jquerymobile.com/themeroller/
Next Steps with jQuery Mobile
Demo
Adobe Edge
• Get Edge– http://labs.adobe.com/technologies/
edge/
Next Steps with Edge
We have a web app
We need a native app
Why do we need native?
CameraCompass
Accelerometer
The ease of web
the access of native
Enter PhoneGap
PhoneGap packages a
web app into a “native” app
What do you mean by
“native” apps
Apps can be distributed in
stores
UI is not native
PHONEGAP BUILD
One pain point: Lots of
software
Enter PhoneGap
Build
• Setup build– Certificates– Provision files
• Get code to cloud– Upload– Link to git repository
• Have servers build app files
PhoneGap Build
Demo
PhoneGap Build
• Look at Phone Gap– http://phonegap.com/
• Get started – http://phonegap.com/start
• Phone Gap Build– https://build.phonegap.com/
Next Steps with Phone Gap
What if browsers could do more?
Enter CSS Shaders
Cinematic effects for the
web
Demo
CSS Shaders
Follow up?
• Preso will be up at – http://slideshare.net/tpryan
• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan