Adobe & HTML5

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">

</div><div data-role="content">

</div><div data-role="footer" >

</div>

</div>

Basic Page Layout

<div data-role="page" id="landing">

</div>

<div data-role="page" id="detail">

</div>

<div data-role="page" id="map">

</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

Technology

Adobe & HTML5