Movatterモバイル変換

HTML5 BootcampEssential HTML, JavaScript & CSSTodd AnglinEVP Product Strategy, Telerik

Workshop Downloads:http://bit.ly/TaskListDemo(https://github.com/toddanglin/TaskListDemo.git)http://bit.ly/workshoplabs(Case sensitive)

10 %Read20%Hear30% See50% Hear + See70% Say + Write90% ExperienceYou generally remember...

EVP Product Strategy, Telerik5x Microsoft MVP, ASP Insider, O'Reilly Authoranglin@telerik.comTexMex5’ 9”41 (Birkenstock)

Workshop AgendaTime Topic8:30 AM to Noon HTML5Noon to 1:00 PM LUNCH1:00 PM to 4:30 PM JavaScript & CSS3WHY + HOW

Morning AgendaTime Topic8:30 AM Intro to HTML5 & Fundamentals11:00 AM HANDS ON11:25 AM Modern HTML App Patterns OverviewNoon Lunch

HTML5 SitesHTML5 AppsHTML5 Enriched

the "plan"the options HTML5 the browsersuse it todayA&Q

Perhaps Adobeshould focus more oncreating great HTML5tools for the future, andless on criticizing Applefor leaving the pastbehind.” -Steve JobsApril, 2010“

Why is HTML5 #winningthe web?21:02

“While it continues to serve as arough guide to many of the corefeatures of HTML, it does notprovide enough information tobuild implementations thatinteroperate with each other and,more importantly, with a criticalmass of deployed content.”-W3C on HTML421:02

HTML4 = Rough GuideUnpredictable Browser Support

<HTML>CSS:3;ECMAScript();“HTML5”

“Living Standard”WebSockets FileAPIWebGLHTML5 FormsGeolocationOfflineCanvas VideoAudioCanvasVideoGeolocationSemanticTagsSVGWHATWG | W3C | IETF21:02

Know your users.Know your browsers.

of internet browses withIE, FF, Safari, Chrome, or Opera99%

Source: comScore, Alexa, Flurry Analytic020406080100Jun-10 Dec-10 Jun-11 Dec-11PC & Mobile Web BrowsingMobile Apps64MINUTES43MINUTES70MINUTES66MINUTES74MINUTES81MINUTES 72MINUTES94MINUTES

IE9 offers support forthe most relevant,real-world web patternsthat developers areusing today aswell as the HTML5patterns weexpect to becomemore mainstream.”“Dean HachamovitchCorporate VP, IE

html5labs.interoperabilitybridges.comie.microsoft.com/testdrive+

25 26 41138 138286 287 303 320 329 337374 378 386 389 390 397 415 430 434 4484985050100200300400500600InternetExplorer6»InternetExplorer7»InternetExplorer8»InternetExplorer9»WinPhone7.5»Android4.0»Android4.3»Safari5.1»WinPhone8»Opera11.60»Firefox8»Chrome17»Safari6.0»iOS6.0»Opera12»ChromeMobile»Safari7.0»iOS7.0»Firefox24»Chrome22»Firefox28»Chrome32»Chrome33»relative HTML5 scoresIE10IE11

In the future,browsers competeon speed,not on features

X X X X XX X XX XX X XX XAdoption StrategiesOnly use featuresnatively available in alltarget browsers21:02

X X X X XX X XX XX X XX XAdoption StrategiesOnly use featureseither natively availableOR available viaJavaScript polyfillX X21:02

X X X X XX X XX XX X XX XAdoption StrategiesOnly use featuresavailable in targetbrowsers AND designalternate experiencefor other browsersX XX X XX X21:02

progressiveenhancementgracefuldegradation

[Source: Aaron Olaf, Flickr]21:02

[Source: Mercedes USA, http://mbusa.com/]21:02

X X X X XX X XX XX X XX XAdoption StrategiesCreate experiencestargeted at specificbrowsers (or classes ofbrowsers)X XX X XX X21:02

Don't sniff browsers.(Test for features.)

Modernizr.[featureName]if (Modernizr.canvas) { //Use It! }.[featureName] || .no-[featureName].no-canvas { //Styles }.canvas { //Other Styles}

25 26 41138303 320 329 337 374 378 389434050100150200250300350400450500relative HTML5 scores

The Basics• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types21:02

stuff you can dotodaystuff you can dotomorrow(or today, too, if IE support is not critical)

We'll cover a lot!But not nearly everything.

semantic tagsaudio & videoHTML5 Formsgeolocationweb storagedrag & dropcanvasofflineweb sqlindexedDBweb socketshistory apifile api

WebGLweb workersXHR2querySelectorclassListCORScryptoperformancevisibility apionline/offlinecustom protocoltyped arraysWeb Audio APIinline SVGFS APICanvasanimationnotificationsorientationmicrodataflexboxmore...For homework.

http://bit.ly/vsHTML5http://bit.ly/vsSVGAdd IntelliSense & Schema Validationto Visual Studio 2008/2010 (pre SP1)21:02

21:02HTML5 FormsGeolocationVideoCSS3{Web Sockets}{Storage}{IndexedDb}{Semantic Data}

semantic tagstag: <header> <footer> <nav> <article> <hgroup>support: IE9, FF3.5, Safari, Chrome, Opera<body><div id=‚header‛></div><div id=‚content‛><div id=‚nav‛></div></div><div id=‚footer‛></div></body><body><header></header><section><nav></nav></section><footer></footer></body>VS.

fixing IE<head><meta charset="utf-8" /><title>My Weblog</title></head>*Polyfill required to trigger styling in old IE21:02

Why use it?• Accessibility*• SEO*• Code readability• Developer street cred• Why not?21:02

semantic datadata-*Valid approach to storing data in HTML<div id="mydiv" data-key="26" data-name="My product name">...</div>var key = mydiv.getAttribute("data-key")//ORvar key = mydiv.dataset.keysupport: IE9, FF3.5, Safari, Chrome, Opera

Why use it?• Embed data in page21:02

video & audioSemantic rich mediaReach more people on more devicesContainerCodecSilverlightFlashHTML5

video for all browsers*<video src="clip.mp4" controls type="video/mp4"><object classid="..."><param name="flashvars" value="file=clip.mp4" /><param name="movie" value=“player.swf" /><embed src="player.swf” type="application/x-shockwave-flash” flashvars="file=clip.mp4" />Your browser does not support video</object></video>support: IE9, FF3.6, Safari, Chrome, Opera21:02

Why use it?• Video for plug-less mobiledevices• Eliminate dependencieson Flash/Silverlight (futureproofing)21:02

canvastag: <canvas /><canvas id=‚b" width="300" height="225"></canvas>function draw_b() {var b_canvas = document.getElementById("b");var b_context = b_canvas.getContext("2d");b_context.fillRect(50, 25, 150, 100);}support: IE*, FF3, Safari, Chrome, Opera

fixing IE<head></head>Explorercanvas21:02

Scalable VectorGraphicsCanvasBitmap-outputGood foranimationJavaScript-basedVector-outputGood forinteractionXML-based21:02

Why use it?• Dashboards• Charts/Gauges• Resolutionindependence21:02• Games• Super customrenderingSVG Canvas

html5 forms*tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms<form><input type="email" autofocus="autofocus"placeholder="Enter your email" /></form>support: Safari, FF4*, Chrome, Opera

validation• HTML: Required, Type, Pattern• JS: checkValidity()• CSS: :invalid, :valid, :required<form><input type="email" placeholder="Enter your email" requiredtitle="Please enter a valid email address" /><input type="submit" value="Go" /></form>

via A List Apart (bit.ly/html5validation)21:02

21:02iOS 7 deprecated datetime support& handles week poorly

progressive enhancement<form name="f"><input id="q" autofocus><script>if (!("autofocus" in document.createElement("input"))) {document.getElementById("q").focus();}</script><input type="submit" value="Go"></form>

21:02“Consuming raw or undercookedmeat, poultry, seafood, shellfish or eggs mayincrease risk of foodborne illness.”

COOKEDRAWhtml5 forms21:02Available heat:- Kendo UI (validation + UI)- jQuery HTML5 Form- H5F

Why use it?• Mobile input• Improved form behavior inmodern browsers• Semantic forms• New styling options21:02

geolocationnavigator.geolocation.getCurrentPosition(callback);function callback(position){var lat = position.coords.latitude;var lng = position.coords.longitude;var acc = position.coords.accuracy;}support: IE9, Safari, FF3.5, Chrome, Operaopt-in user feature to share physical position

Why use it?• Enrich apps with locationawareness• Track user position21:02

local storagesessionStorage = per windowlocalStorage = per browser<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);sessionStorage.getItem(‘value’);sessionStorage.clear();localStorage.clear();</script>support: IE9, FF3.5, Safari, Chrome, Opera5 MB limit

http://htmlui.com:80protocolhost port(+ browser mode)

COOKEDRAWlocal storage21:02Available heat:- localstorage polyfill- amplifyJS- lawchairJS

Why use it?• Better than cookies• Simple API21:02

drag & drop APIeasy drag & drop for any HTML element<div id=‚myDiv‛ draggable=“true”>...</div>//Handle the DnD events, such as Dropfunction onDrop(e){//e.target is the current target elementif(e.stopPropigation) e.stopPropigation(); //Prevent redirect//Do something with payloadreturn false;}support: IE9, FF, Safari, Chrome, Opera

IMGFileHTMLdraggabledragstartdragdragenterdragleavedragoverdropdragendChange appearance,Set payloadChange drop targetappearanceProcess DnDpayload

dragstartdrope.dataTransfer.setData([MIME type], [payload])e.dataTransfer.getData([MIME type])e.dataTransfer.files; //FileList object

COOKEDRAWdrag & drop21:02Available heat:- Kendo UI (DnD & Upload)- jQuery UI Draggable

Why use it?• Support DnD files in thebrowser• Reduce JS footprint21:02

stuff you can dotodaystuff you can dotomorrow

offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifestCACHE MANIFEST# Files you want cached for your app to work offlinemyLogo.jpg//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);support: FF3.5, Safari, Chrome, Opera 10.6

Why use it?• Aggressive resourcecaching• Foundation for offline21:02

web sqlapi: openDatabasedb = openDatabase("html5demos", "1.0", "HTML 5 Database APIexample", 200000);if (db) {db.transaction(function(tx) {tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE,text TEXT, created_at TEXT, screen_name TEXT,mention BOOLEAN)", [], callback);});}db.transaction(function (tx) {tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDERBY id DESC', [mention, latest], callbackFunc);});support: Safari, Chrome, Opera“This specification has reached an impasse: allinterested implementors have used the sameSQL backend (Sqlite), but we need multipleindependent implementations to proceed alonga standardisation path.”–W3C

indexedDBJavaScript API for indexed local storagevar request = window.indexedDB.open("CandyDB","My candy store database");request.onsuccess = function(event) {var db = event.result;if (db.version != "1") {// User's first visit, initialize database....}}support: IE9*, FF4, (Chrome)

COOKEDRAWindexedDB21:02Available heat:- IDBWrapper- PouchDB- lawnchairJS

Why use it?• Browser storage of largerdatasets• Offline data• Better than local storagefor complex dataoperations21:02

web socketsapi: WebSocketws = new WebSocket("ws://localhost:8282/test‛);ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;function WSonMessage(event) {$(‚#myDiv‛).html(event.data);};support: IE9**, Safari 5, Chrome, FF4*, Opera 11*

COOKEDRAWweb sockets21:02Available heat:- SignalR- Socket.IO- Sockjs

Why use it?• 2-way real-timemessaging• Replace long-polling &interval “hacks”• Eliminate dependencieson plug-ins21:02

file apiaccess to local file system & data streamingvar file = e.dataTransfer.files[0],reader = new FileReader();reader.onload = function (event) {var dataUrl = event.target.result;};reader.readAsDataURL(file);.readAsBinaryString(file);.readAsText(file);.readAsArrayBuffer(file);support: IE10, FF4, Chrome, Opera 11.1

Why use it?• Process files with fewerserver trips• Improve usability• Desktop-like experiences• Better file upload21:02

history apidirect access to browser historyvar stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");support: FF4, Safari 5, Chrome, Opera 11.5

LUNCH <BR />1-Hour Pit Stop. Resume @ 1:00 PM.

Afternoon AgendaTime Topic1:00 PM Tips for Better JavaScript2:45 PM Intro to CSS3 & Fundamentals4:00 PM Final Workshop Q&A4:30 PM Fin

You are a webstandards developer.

In browserOut-of-browser{ }Always connectedSometimes connected{ }Site experienceApp experience{ }PackagedServed{ }

21:021. Website2. Single Page App (SPA)3. Mix

WebsiteHTMLConcepts: Pages, Server-side Views, Links, Thin Client

Website:Always connectedIn-browserServedSite experience21:02

Single Page Application (SPA)21:02JS

Single Page Application (SPA)JS21:02Concepts: Web Services, Client-side, Application

SPAs provide a morefluid user experience,similar to a "desktop"application.21:02

Native Shell +SDK ProxyNativeAppHTML/JS/CSSApp

Hybrid Approaches21:02JSDataJSDataSlicesofSPA

Hybrid Approaches21:02JSSPAShellSPAWebsite

Just because you'reusing web standards,doesn't mean you'rebuilding websites.21:02

No, really.Brendan Eich.Netscape.

“JS had to 'look like Java'only less so, be Java‟sdumb kid brother or boy-hostage sidekick. Plus, Ihad to be done in tendays or something worsethan JS would havehappened”

Sept 1995NetscapeAug 1996MicrosoftJune 1997ECMAScript//Mar 1999XHRFeb 2005AjaxAug 2001IE6FirefoxSafariChromeMobile

JavaScript won bydefault.If you're the last man left onearth, it doesn't matter how uglyyou are when the women come tore-populate the planet.Scott Koon

Can‟t Beat „em,Join „em.

Modern JavaScriptFaster. Easier. Better.

Attwood‟s Law:Any application that can bewritten in JavaScript, willeventually be written inJavaScript2007

1. Slow Execution2. Memory leaks3. Poor Code Organization4. Lack of Understanding

From realmasters:JordanIvanTsvetomirAtanasBurkeJohnBrandon

TIP #1jQuery is a friend……that will stab you in the back.Prove It

CACHE OBJECTS$("#myDiv").css("color","red");$("#myDiv").css("opacity",1);BAD$("#myDiv").css("color","red").css("opacity",1);BETTERvar $myDiv = $("#myDiv");$myDiv.css("color","red");$myDiv.css("opacity",1);BEST*Prove It

NATIVE LOOPS$.each(arr, function (i) {i / 2;});BADarr.forEach(function (i) {i / 2;});BETTERvar i = 0, len = arr.length;for (i = 0; i < len; i += 1) {i / 2;}BEST*Prove It

TIP #2Avoid Global VariablesThey're slow & rude.

function add(num1, num2){return num1 + num2;}var result = add(5, 10);21:02Prove It

var name = "Todd";function sayHello(){alert(name);}function sayHello(){var name = "Todd";alert(name);}21:02BADBETTER

function doInitStuff(){...}function loadSomething(){...}function handleButtonClick(){...}function harlemShake(){...}yourFile.js

function doInitStuff(){var user = "Todd";}function loadSomething(){if (user == "Todd") ...}function handleButtonClick(){...}function harlemShake(){...}yourFile.js

var user = "";function doInitStuff(){user = "Todd";}function loadSomething(){if (user == "Todd") ...}function handleButtonClick(){...}function harlemShake(){...}yourFile.js

var [window].user = "";function [window].doInitStuff(){user = "Todd";}function [window].loadSomething(){if (user == "Todd") ...}function[window].handleButtonClick(){...}function [window].harlemShake(){...yourFile.js

var app = (function(){var _name = "Todd";return{sayHello: function(){alert(_name);}}}());app.sayHello();21:02BEST(ISH)

var app = (function(){var _name = "Todd";return{sayHello: function(){alert(_name);},sayGoodbye: function(){alert(_name);}}}());21:02BEST(ISH)Your“Public” API

SUPER PATTERN(function(window,$,c){var _private = "Todd";function privateClass(){}function myWidget(){}myWidget.doSomething = function(){};window.myWidget = myWidget;}(window,jQuery,console));Immediately Invoked Function Expressions (IIFE) +Global Imports + [Prototype]Prove It

TIP #3Bind to Events & Pub/SubJust listen.

<button id="btn" onclick="sayHello();">Click Me</button>$(function(){$(‚#btn").on("click",sayHello);});21:02BADBETTER

$(document).on("click","button", sayHello);21:02BESTWhy?Compare A Compare B

function doSomthing{...doSomethingElse();doOneMoreThing();}21:02BAD

function doSomething() {...$(document).trigger("DO_SOMETHING_DONE");}$(document).on("DO_SOMETHING_DONE",function(){doSomethingElse();});21:02BETTERExample

function doSomething(){var dfd = new $.Deferred();//Do something async, then...//dfd.resolve();//OR//dfd.reject();return dfd.promise(); //Returns immediately!}function doSomethingElse(){doSomething().done(//Success!).fail(//Error);}21:02ANOTHER SOLUTION

TIP #4Don't fondle the DOM.Go with the flow.

My Awesome PageCopyright Fo'evaLorem ipsumy samplishjibber jabbish text onlymeant to serve as aplaceholder, and much likePi, should never repeat orbe read much beyond thefirst few characters.

function doSomething{...var $list = $("body").append("<ul>");for(var i = 0; i < 10; i++){$list.append("<li>"+ i +"</li>")}}21:02BAD

function doSomething{...var $domChunk = $("<ul>");for(var i = 0; i < 10; i += 1){$domChunk.append("<li>"+ i +"</li>");}$("body").append($domChunk);}21:02BETTER

DOM SPEED WITHSTRINGS & INNERHTMLfunction doSomething{...var domString = "<ul>";for(var i = 0; i < 10; i += 1){domString += "<li>"+ i +"</li>";}domString += "</ul>"$("body")[0].innerHTML = domString;}Prove It

TIP #5Learn a module pattern.(Or some kind of app structure)

A.jsB.jsManual (index.html)<script src="B.js"></script><script src="A.js"></script><script src="main.js"></script>Module Loader (main.js)require(["A","B"], function(){//Dependencies are loaded});

USE JSLINTGuaranteed to Hurt Your Feelings™21:02MINIFY YOUR JSWords are for humans.MASTER BROWSERDEV TOOLSDebug JavaScript where it runs.

Fix IE<script type="text/javascript">if (!this.console) {window.console = {log: function() {}};}</script>21:02

Resources for Study• Books– #

[before CSS]<html><head>…</head><body><table><tr><td><font size=‚3‛ color=‚red‛><h1>Hello World!</h1></font></td></tr><font color=‚green‛><font face=‚Tahoma‛><h2>I’m green! I think.</h2></font><p>Lorem ipsum</p></font></table></body></html>{HTML}

Separation of Concerns*<html><head>…</head><body><header>…</header><article><h1>Hello!</h1><p>Lorem ipsum</p></article><nav>…</nav><footer>…</footer></body></html>structurebody { color:#FFF; }header { margin:5px; }article {margin:5px 0;padding: 10px;background: #333;}style{HTML} {CSS}

CSS has been plaguedwith inconsistencies &browser bugs

What's CSS3?CSS 2.0++++Module StatusAnimations WD2D/3D Transformations WDSelectors (Level 3) RECMedia Queries (Level 3) RECBackgrounds & Borders (rounded corners) CRText Decoration (text shadows, outline) CRCSS 2.1 RECWD LC CR PR REC21:02

WD LC CR PR RECCSS 2.1CSS3 ColorSelectorsMedia QueriesBackgrounds &BordersMulti-columnFlex BoxMarquee25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text21:02

Browser Prefixes-webkit-moz-o-ms"standard" waybrowsersimplement customfeatures.21:02

Prefixes are goingaway (eventually)21:02RECENT NEWSBrowser "flags" will handle emerging feature

-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;21:02

SelectorsColorCustom FontsBorders & BackgroundsGradientsMedia QueriesAnimationsTransitionsLayouts (Grid, Flex, etc)

1. Selectors2. Custom Fonts3. Whiz Bang StyleyWhimey4. Layouts

*E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="en"]E:first-childE:lang(fr)E:hoverE:focusE:disabledE::beforeE::afterE > FE + FEE:linkE:activeE:visitedE::first-lineE::first-letterE.warningE#myidE FE[foo^="bar"]E[foo$="bar"]E[foo*="bar"]E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:targetE:enabledE:checkedE:not(s)E ~ F

CSS3 Selectors• Powerful new selector options//Alternating Itemsli:nth-child(odd) { color: blue; }li:nth-child(even) { color: green; }li:nth-child(3n) { color: red; } //Every 3rd item//First/Last Itemsli:first-of-type { color: blue; }li:not(:first-of-type):not(:last-of-type) { color: orange; } //All*but* first/last//Enabled/Disabledinput:enabled { border: 2px solid green; }input:disabled { background-color: #BBB; }*Use jQuery to support legacy browsers

Biggest problem withcustom fonts?21:02Licensing.(And then file format.)(And then performance.)(And then Comic Sans.)

Custom Fonts@font-face {font-family: Delicious;src: url('Delicious-Roman.otf') format(“opentype”);}//Usageh3 { font-family: Delicious, sans-serif; }

Borders, Backgrounds,Gradients, Shadows,Text Shadows, Colors21:02

Two cautions:1. Older browsers2. Mobile Performance21:02

Media QueriesConditional CSS rules/sheetsbased on screen properties21:02

/*These two rules do the same thing*/@media all and (min-width:500px) { … }@media (min-width:500px) { … }/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) {.class {background: #333;}}

• width/height• device-width/height• aspect-ratio• orientation• color/color-index• resolution+media type & logical operators

The end of complicated float layouts.(Eventually.)

Your Feedback is ImportantPlease fill out a session evaluation using theEventBoard app.Thank you!

Movatterモバイル変換

Change Language

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

More from Todd Anglin

Recently uploaded

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Editor's Notes