HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK

HTML5THE PARTS YOU CARE ABOUT

An original presentation by / David Wesst @davidwesst

Prarie Dev Con 2013 - Saskatoon, SK

http://www.davidwesst.com/

http://twitter.com/davidwesst

DAVID WESSTFROM WINNIPEG, MANITOBA

SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OFMEDICINE)

MICROSOFT MVP, INTERNET EXPLORER

IE USER AGENT USERAGENTS.IE

PRODUCER, BREWPUB STUDIOS

http://useragents.ie/

DAVID WESST@DAVIDWESST ON TWITTER

DAVIDWESST.COM ON THE WEB

DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE

DW [AT] DAVIDWESST.COM ON EMAIL

https://www.twitter.com/davidwesst

https://www.davidwesst.com/

https://www.davidwesst.com/blog

FOLLOW ALONGHTTP://D.WES.ST/DW-SLIDES

http://d.wes.st/dw-slides

SLIDES AND DEMOSAVAILABLE AFTERWARDS

HTTP://D.WES.ST/DW-PRESENTS

http://d.wes.st/dw-presents

THE POINT...To answer one of these questions:

What is HTML5 for?What makes up HTML5?What HTML5 tools are out there for me to use?Does HTML5 even matter to you?

THE PLANHow are we going to understand these points?

Documents EvolvedReally Defining HTML5HTML5 Hardware (i.e. The Toolbox)

DEMO PREREQUISITESHTML Audio (.mp3) is supportedHTML Audio (.ogg) is supported

HTML Canvas is supportedCSS Border Radius is supported

Go Back

DOCUMENTS EVOLVED

DOCUMENTS EVOLVEDWHAT IS A DOCUMENT?

DOCUMENTS EVOLVEDDocuments create a paper reality we call proof.

Mason Cooley

DOCUMENTS EVOLVED

DOCUMENTS EVOLVED...a collection of data (images, text, audio, video, etc.)...a collection of data sources (references, hyperlinking)...a product of collaboration

What we did not imagine was a Web of people,but a Web of documents.

Dale Dougherty

WHAT DOES HTML HAVE TO DO WITH ADOCUMENT?

HTML has always been for creating and sharing documents....our interpretation of what a document is has evolved.

REALLY DEFINING HTML5

REALLY DEFINING HTML5THE GOAL:

TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENTHOW THE WORLD USES THE WEB TODAY.

REALLY DEFINING HTML5How do you do this with plain old markup?

YOU DON'T. (WE HAVEN'T DONE THAT IN YEARS)

HTML5 DEFINES FEATURES USING THREE (3)CORE TECHNOLOGIES:

HTML | for Defining DocumentsCSS | for Styling DocumentsJavaScript | for Making Documents Interactive

REALLY DEFINING HTML5HTML5 features are divided into eight (8) separate groups:

SemanticsOffline & StorageDevice AccessConnectivityMultimedia3D, Graphics & EffectsPerformance & IntegrationCSS3

HTML5 TOOLS &BUILDING MATERIALS

HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML

DEMO


Your IDE or Editor Experience

MICROSOFT WEBMATRIXFreeProvides HTML, JavaScript, and CSS3 Auto-CompleteFocuses on Microsoft & Open Source technologies for webCommunity Extensions to add more HTML5 developmentsupport



ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOLS, APTANAFree and Open SourceProvides strong JavaScript SupportAptana most Web FocusedCombine Favourite Plugins to build your ideal environment



CLOUD 9 ( )HTTP://C9.IOHosted IDEFree & Open SourceHTML5, Ruby, PHP, and NodeProvides Terminal, MySQL, and link to Github & Bitbucket

http://c9.io/


VISUAL STUDIO 2012/2013Free-ish (Free Editions Available)Microsoft Development FocusedProvides HTML, JavaScript, and CSS3 Auto-CompleteNumber of Create Extensions to support HTML5Overhauled Web Development Editor Experience


A FEW OTHERS...Webstorm IDENotepad++Sublime Text, Vi, Emacs


WHAT HTML5 EDITOR DO YOU USE?


DEMO - ECLIPSE


TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS)<article>

<aside>

<bdi>

<command>

<details>

<figure>

<figcaption>

<footer>

<header>

<hgroup>

<mark>


TONS OF NEW ELEMENTS! (MEDIA)<audio>

<video>

<source>

<embed>

<track>


TONS OF NEW ELEMENTS! (FOR DRAWING)<canvas>


TONS OF NEW ELEMENTS! (FOR FORM)<datalist>

<keygen>

<output>


REMOVED OLD TIMEY ELEMENTS!<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>


ALL YOU NEED IS THE NEW DOCTYPE


DEMO: AUDIO ELEMENT

HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML - DEMO

AUDIO ELEMENT (PART 1) - DEFAULT AUDIO PLAYER0:35

HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML - DEMO

AUDIO ELEMENT (PART 2) - MULTIPLE SOURCE FILES0:35


WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNETEXPLORER)

COMING UP LATER IN THE PRESENTATION, I PROMISE!

HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS

SASS - SYNTACTICALLY AWESOME STYLESHEETShttp://sass-lang.com/Improves CSS/ syntax with extra language features

VariablesNested RulesMixins (Rules with Parameters)Selector InheritanceAvailable as Ruby Gem


LESS - DYNAMIC STYLESHEET LANGUAGEhttp://lesscss.org/Similar to SASS. Improves CSS syntax with extra languagefeatures

VariablesNested RulesMixins (Rules with parameters)Functions and OperationsJavaScript BasedClient and Server Options


OPTIONAL DEMO - LESS

HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS

FRAMWORKSTwitter BootstrapSemantic UIMetro UI

http://getbootstrap.com/

http://semantic-ui.com/

http://metroui.org.ua/

HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS

Semantic GridBlueprint FrameworkjQuery UI CSS Framework(http://docs.jquery.com/UI/Theming/API)YUI CSS Components

http://http//semantic.gs//

http://blueprintcss.org/

http://docs.jquery.com/UI/Theming/API#The_jQuery_UI_CSS_Framework

http://yuilibrary.com/yui/css/

HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3

Media QueriesBorder-RadiusBackground GradientsCSS Animations and Transitions

HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES

MODERNIZRhttp://modernizr.com/Makes your HTML5 Fully Browser Compatible

Open Source with MIT LicenseHandles IE support just by adding the libraryCheck whether client support specific HTML5 featuresCan check in both CSS and JavaScriptAdds extra tooling for performance


DEMO - MODERNIZRGo to the Demo


There are a TON of libraries avilable thanks to the open sourcecommunity.Before you start writing your own, find out if someone else hasdone it before

GithubBitbucketCodePlexGoogle Code

http://www.github.com/

http://bitbucket.org/

http://www.codeplex.com/

http://code.google.com/

HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - COMPILERS

COFFEESCRIPThttp://coffeescript.org/"...a little language that compiles into JavaScript"

Cleaner more Readable CodeRuby-like SyntaxUses JavaScript LintProduces readable JavaScript CodeInstalls from NPM

HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - COMPILERS

TYPESCRIPThttp://typescript.org/Microsoft's attempts at ECMASCRIPT next

ActiveOpen Source ProjectIs subset of JavaScript (i.e. JavaScript is valid TypeScript)Compiles down to JavaScript

HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING

JASMINE

Behaviour Driven Development (BDD)Resembles RSpecWorks with multiple platforms (ASP.NET, NodeJS, Ruby, etc.)No external dependencies

https://github.com/pivotal/jasmine/wiki

https://github.com/pivotal/jasmine/wiki


QUNIT

Unit Testing FrameworkDeveloped by jQueryNo external dependencies (not even jQuery)

http://qunitjs.com/

http://qunitjs.com/


MOCHA

BDD based frameworkResembles RSpecWorks with both client and server (NodeJS)

http://visionmedia.github.io/mocha/

http://visionmedia.github.io/mocha/


DEMO - BDD WITHJASMINE

HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT

JavaScript APIs

Media (i.e Audio and Video)Text Track (i.e. Subtitles)Web CryptoEncrypted Media Extensions (EME)Offline Web Applications / Application CacheUser InteractionHistory


JavaScript APIs

DEMO - MEDIA API


Play

Pause

Volume Up

Volume Down


Non-HTML5 Spec JavaScript APIs

Canvas (2D Context)Cross Channel MessagingMicrodataWeb WorkersWeb Storage / IndexedDBServer-Sent Events


Non-HTML5 Spec JavaScript APIs

DEMO - CANVAS API

A QUICK RECAP

THE POINT...To answer one of these questions:

What is HTML5 for?What makes up HTML5?What HTML5 tools are out there for me to use?Does HTML5 even matter to you?

THE PLANHow are we going to understand these points?

Documents EvolvedReally Defining HTML5HTML5 Hardware (i.e. The Toolbox)

NEXT STEPS

NEXT STEPSGo to and exploreRead an HTML5 book or TutorialDownload and run an HTML5 editor (e.g. WebMatrix)Upgrade an app with Modernizr and the new DOCTYPE

Modern.IE

http://modern.ie/

DAVID WESST@DAVIDWESST ON TWITTER

DAVIDWESST.COM ON THE WEB

DAVIDWESST.COM/BLOG ON THE BLOGOSPHEREDW [AT] DAVIDWESST.COM ON EMAIL

https://www.twitter.com/davidwesst

https://www.davidwesst.com/

https://www.davidwesst.com/blog

HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK

Investor Relations

Transcript of HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK