html5: the parts you care about - 4/nov/13 - prdc saskatoon, sk
Post on 18-Oct-2014
900 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5THE PARTS YOU CARE ABOUT
An original presentation by / David Wesst @davidwesst
Prarie Dev Con 2013 - Saskatoon, SK
DAVID WESSTFROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OFMEDICINE)
MICROSOFT MVP, INTERNET EXPLORER
IE USER AGENT USERAGENTS.IE
PRODUCER, BREWPUB STUDIOS
DAVID WESST@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL
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
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 | STYLE | INTERACTION
HTML Markup | DefinitionCSS3 | StyleJavaScript | Interaction
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
DEMO
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
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
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
Your IDE or Editor Experience
ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOLS, APTANAFree and Open SourceProvides strong JavaScript SupportAptana most Web FocusedCombine Favourite Plugins to build your ideal environment
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
Your IDE or Editor Experience
CLOUD 9 ( )HTTP://C9.IOHosted IDEFree & Open SourceHTML5, Ruby, PHP, and NodeProvides Terminal, MySQL, and link to Github & Bitbucket
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
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
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
A FEW OTHERS...Webstorm IDENotepad++Sublime Text, Vi, Emacs
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
WHAT HTML5 EDITOR DO YOU USE?
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
DEMO - ECLIPSE
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS)<article>
<aside>
<bdi>
<command>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (MEDIA)<audio>
<video>
<source>
<embed>
<track>
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR DRAWING)<canvas>
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR FORM)<datalist>
<keygen>
<output>
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
REMOVED OLD TIMEY ELEMENTS!<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
ALL YOU NEED IS THE NEW DOCTYPE
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
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
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
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
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS
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
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS
OPTIONAL DEMO - LESS
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS
FRAMWORKSTwitter BootstrapSemantic UIMetro UI
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS
Semantic GridBlueprint FrameworkjQuery UI CSS Framework(http://docs.jquery.com/UI/Theming/API)YUI CSS Components
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
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES
DEMO - MODERNIZRGo to the Demo
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES
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
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
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
QUNIT
Unit Testing FrameworkDeveloped by jQueryNo external dependencies (not even jQuery)
http://qunitjs.com/
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
MOCHA
BDD based frameworkResembles RSpecWorks with both client and server (NodeJS)
http://visionmedia.github.io/mocha/
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
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
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
JavaScript APIs
DEMO - MEDIA API
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
Play
Pause
Volume Up
Volume Down
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
Canvas (2D Context)Cross Channel MessagingMicrodataWeb WorkersWeb Storage / IndexedDBServer-Sent Events
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
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
DAVID WESST@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHEREDW [AT] DAVIDWESST.COM ON EMAIL
top related