• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
 

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

on

  • 705 views

Presented at Prairie Dev Con 2013 in Saskatoon, SK.

Presented at Prairie Dev Con 2013 in Saskatoon, SK.

Statistics

Views

Total Views
705
Views on SlideShare
705
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

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

    • HTML5 THE PARTS YOU CARE ABOUT An original presentation by David Wesst / @davidwesst Prarie Dev Con 2013 - Saskatoon, SK
    • DAVID WESST FROM WINNIPEG, MANITOBA SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF MEDICINE) 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
    • FOLLOW ALONG HTTP://D.WES.ST/DW-SLIDES
    • SLIDES AND DEMOS AVAILABLE AFTERWARDS 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 PLAN How are we going to understand these points? Documents Evolved Really Defining HTML5 HTML5 Hardware (i.e. The Toolbox)
    • DEMO PREREQUISITES HTML Audio (.mp3) is supported HTML Audio (.ogg) is supported HTML Canvas is supported CSS Border Radius is supported Go Back
    • DOCUMENTS EVOLVED
    • DOCUMENTS EVOLVED WHAT IS A DOCUMENT?
    • DOCUMENTS EVOLVED Documents 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 A DOCUMENT? HTML has always been for creating and sharing documents. ...our interpretation of what a document is has evolved.
    • REALLY DEFINING HTML5
    • REALLY DEFINING HTML5 THE GOAL: TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENT HOW THE WORLD USES THE WEB TODAY.
    • REALLY DEFINING HTML5 How 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 Documents CSS | for Styling Documents JavaScript | for Making Documents Interactive
    • REALLY DEFINING HTML5 HTML5 features are divided into eight (8) separate groups: Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3
    • HTML5 TOOLS & BUILDING MATERIALS
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | STYLE | INTERACTION HTML Markup | Definition CSS3 | Style JavaScript | Interaction
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML Your IDE or Editor Experience MICROSOFT WEBMATRIX Free Provides HTML, JavaScript, and CSS3 Auto-Complete Focuses on Microsoft & Open Source technologies for web Community Extensions to add more HTML5 development support
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML Your IDE or Editor Experience ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOLS, APTANA Free and Open Source Provides strong JavaScript Support Aptana most Web Focused Combine Favourite Plugins to build your ideal environment
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML Your IDE or Editor Experience CLOUD 9 (HTTP://C9.IO) Hosted IDE Free & Open Source HTML5, Ruby, PHP, and Node Provides Terminal, MySQL, and link to Github & Bitbucket
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML VISUAL STUDIO 2012/2013 Free-ish (Free Editions Available) Microsoft Development Focused Provides HTML, JavaScript, and CSS3 Auto-Complete Number of Create Extensions to support HTML5 Overhauled Web Development Editor Experience
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML A FEW OTHERS... Webstorm IDE Notepad++ Sublime Text, Vi, Emacs
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML WHAT HTML5 EDITOR DO YOU USE?
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO - ECLIPSE
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS) <article> <aside> <bdi> <command> <details> <figure> <figcaption> <footer> <header> <hgroup> <mark>
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (MEDIA) <audio> <video> <source> <embed> <track>
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (FOR DRAWING) <canvas>
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (FOR FORM) <datalist> <keygen> <output>
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML REMOVED OLD TIMEY ELEMENTS! <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike>
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML ALL YOU NEED IS THE NEW DOCTYPE
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO: AUDIO ELEMENT
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML - DEMO AUDIO ELEMENT (PART 1) - DEFAULT AUDIO PLAYER 0:35
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML - DEMO AUDIO ELEMENT (PART 2) - MULTIPLE SOURCE FILES 0:35
    • HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNET EXPLORER) COMING UP LATER IN THE PRESENTATION, I PROMISE!
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - COMPILERS SASS - SYNTACTICALLY AWESOME STYLESHEETS http://sass-lang.com/ Improves CSS/ syntax with extra language features Variables Nested Rules Mixins (Rules with Parameters) Selector Inheritance Available as Ruby Gem
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - COMPILERS LESS - DYNAMIC STYLESHEET LANGUAGE http://lesscss.org/ Similar to SASS. Improves CSS syntax with extra language features Variables Nested Rules Mixins (Rules with parameters) Functions and Operations JavaScript Based Client and Server Options
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - COMPILERS OPTIONAL DEMO - LESS
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - FRAMEWORKS FRAMWORKS Twitter Bootstrap Semantic UI Metro UI
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - FRAMEWORKS Semantic Grid Blueprint Framework jQuery UI CSS Framework (http://docs.jquery.com/UI/Theming/API) YUI CSS Components
    • HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 Media Queries Border-Radius Background Gradients CSS Animations and Transitions
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - LIBRARIES MODERNIZR http://modernizr.com/ Makes your HTML5 Fully Browser Compatible Open Source with MIT License Handles IE support just by adding the library Check whether client support specific HTML5 features Can check in both CSS and JavaScript Adds extra tooling for performance
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - LIBRARIES DEMO - MODERNIZR Go to the Demo
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - LIBRARIES There are a TON of libraries avilable thanks to the open source community. Before you start writing your own, find out if someone else has done it before Github Bitbucket CodePlex Google Code
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - COMPILERS COFFEESCRIPT http://coffeescript.org/ "...a little language that compiles into JavaScript" Cleaner more Readable Code Ruby-like Syntax Uses JavaScript Lint Produces readable JavaScript Code Installs from NPM
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - COMPILERS TYPESCRIPT http://typescript.org/ Microsoft's attempts at ECMASCRIPT next ActiveOpen Source Project Is subset of JavaScript (i.e. JavaScript is valid TypeScript) Compiles down to JavaScript
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING JASMINE https://github.com/pivotal/jasmine/wiki Behaviour Driven Development (BDD) Resembles RSpec Works with multiple platforms (ASP.NET, NodeJS, Ruby, etc.) No external dependencies
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING QUNIT http://qunitjs.com/ Unit Testing Framework Developed by jQuery No external dependencies (not even jQuery)
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING MOCHA http://visionmedia.github.io/mocha/ BDD based framework Resembles RSpec Works with both client and server (NodeJS)
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING DEMO - BDD WITH JASMINE
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT JavaScript APIs Media (i.e Audio and Video) Text Track (i.e. Subtitles) Web Crypto Encrypted Media Extensions (EME) Offline Web Applications / Application Cache User Interaction History
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT JavaScript APIs DEMO - MEDIA API
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT Play Pause Volume Up Volume Down
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT Non-HTML5 Spec JavaScript APIs Canvas (2D Context) Cross Channel Messaging Microdata Web Workers Web Storage / IndexedDB Server-Sent Events
    • HTML5 TOOLS & BUILDING MATERIALS INTERACTION | 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 PLAN How are we going to understand these points? Documents Evolved Really Defining HTML5 HTML5 Hardware (i.e. The Toolbox)
    • NEXT STEPS
    • NEXT STEPS Go to Modern.IE and explore Read an HTML5 book or Tutorial Download and run an HTML5 editor (e.g. WebMatrix) Upgrade an app with Modernizr and the new DOCTYPE
    • DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL