• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adobe & HTML5
 

Adobe & HTML5

on

  • 2,529 views

A quick tour through a number of Adobe initiatives in HMTL5

A quick tour through a number of Adobe initiatives in HMTL5

Statistics

Views

Total Views
2,529
Views on SlideShare
2,506
Embed Views
23

Actions

Likes
4
Downloads
48
Comments
0

1 Embed 23

http://storify.com 23

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?

Adobe & HTML5 Adobe & HTML5 Presentation Transcript

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