HTML5: The Next Internet Goldrush
Upcoming SlideShare
Loading in...5
×
 

HTML5: The Next Internet Goldrush

on

  • 14,839 views

This HTML5 presentation--delivered at the Society for Technical Communication (STC) in May and again in August 2011--provides a high level overview of HTML5 and discusses the impact that HTML5 will ...

This HTML5 presentation--delivered at the Society for Technical Communication (STC) in May and again in August 2011--provides a high level overview of HTML5 and discusses the impact that HTML5 will have on Technical Communication.

Statistics

Views

Total Views
14,839
Views on SlideShare
14,488
Embed Views
351

Actions

Likes
29
Downloads
530
Comments
3

15 Embeds 351

http://learni.st 214
http://www.techgig.com 40
http://www.claudepenland.com 37
http://paper.li 28
http://twitter.com 16
http://www.schoox.com 4
http://www.pearltrees.com 3
http://115.112.206.131 2
http://www.slideshare.net 1
http://a0.twimg.com 1
http://edicolaeuropea.blogspot.com 1
http://dev3.algores.it 1
http://staging.learni.st 1
https://www.linkedin.com 1
https://twitter.com 1
More...

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…
  • This is a very thoughtful slide, the presentation is also very good.
    Are you sure you want to
    Your message goes here
    Processing…
  • Weclic is another Gold Rush, an impact on social live. Is a new social application that facilitates making group plans in the real world. If you want to share your hobbies, meet people, or discover new places, this is it!. Time out, just sign-up for a plan you like, go out, and do something interesting. If you like the idea, register at http://www.weclic.net/?sl/ap11.
    Are you sure you want to
    Your message goes here
    Processing…
  • nice work...
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • HTML, CSS, and JS
  • Coming to a head  vote in W3C, WHATWG created
  • Well, that’s the promise, actually  next slide
  • The user is king! There is XHTML5 but it’s very strict.HTML5 is not as strict as previous versions of HTML.Show example /markup/sample.htmlRemove , , and Just leave:<!DOCTYPE html> HTML 5 HeaderThat’s enough. This HTML5, which would fit in a tweet, would render. You can even leave off the closing tag.For practical purposes, pick a style you like and stick with it. (Kind of like writing a document!)HTML5 strives to separate content from presentation where possible (use CSS)Most of the presentational features from earlier versions of HTML are no longer supportedThis was already in the works (HTML4 Transitional, XHTML1.1)
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Easily as big as DITA
  • Not deprecated, but obsolete
  • They’re all Web storage

HTML5: The Next Internet Goldrush HTML5: The Next Internet Goldrush Presentation Transcript

  • Title
    HTML5: The Next Internet Gold Rush(HTML5 and its impact on technical communication)
    Peter Lubbers
    Senior Director, Technical Communication
    Kaazing
  • About @peterlubbers
  • Not to Be Confused With…
  • Agenda
    • HTML5 History (The 2-Minute Version)
    • HTML5 Vision
    • HTML5 Feature Areasand their impact onTechnical Communication
    • Q&A
    #stc
    @peterlubbers
    #html5
  • Word on the Street…
    "The world is moving to HTML5"
    —Steve Jobs, Apple
    "The Web has not seen this level of transformation, this level of acceleration, in the past ten years… we're betting big on HTML5"
    —Vic Gundotra, VP of Engineering, Google
    “If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we.
    —Steve Ballmer, CEO Microsoft
    "I had no idea there was so much HTML5 already in play"
    —Tim O'Reilly
    "HTML5’s impact on Tech Com will be bigger than DITA"
    —Peter Lubbers
  • HTML5 Feature Areas
  • HTML Timeline
  • HTML (1.0)
    • 1991: HTML Tags Specification
    • 1993: First HTML Specification (IETF)
    • First spec ~41 Pages Long
  • HTML 2.0, 3.0
    • 1995: HTML 2.0 (IETF)
    • 1995: HTML 3 Proposed and Abandoned
  • HTML 3.2, 4.0
    1997: HTML 3.2 (W3C)
    1997: HTML 4.0 (W3C)
  • HTML 4.01, XHTML, Web 2.0
    1999: HTML 4.01
    2000: XHTML 1.0
    2001: Last 4.01 Errata
    2001: XHTML 1.1
    2004: Web 2.0
  • HTML5
    • 2004: WHATWG (Web Apps 1.0)
    • 2008: HTML5 Working Draft W3C
    • 2009: XHTML 2.0 Dropped
  • HTML5
    • OK, so it’s not quite ready…
    • May 24 2011: Working Draft Last Call
    • 2012: Candidate Recommendation
    • 2022: Proposed Recommendation
    • Lots of feature support already
    • caniuse.com
    • html5test.com
  • HTML5 Design Principles
    The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
  • Compatibility
    • Pave the cow paths
    • Degrade gracefully
    • Research common behavior, solve realproblems
    • Support existing content
    • Evolution not revolution
    • Don't reinvent the wheel(or at least make a better one!)
  • Utility
    • Priority of Constituencies:
    • When in doubt… value usersover authors,over implementers(browsers) over specifiers(W3C/WHATWG)over theoreticalpurity
    • Secure by design
    • DOM consistency
    • Separation of presentation and content (Use CSS)
  • Interoperability
    • Specify well-defined behavior
    • Specific instead of vague
    • Specification now >900 pages!
    • Handle errors well
    • Improved and ambitious error handling plans
    • Prefer graceful error recovery to hard failure
    • Avoid needless complexity
  • Universal Access
    • Support for all world languages
    • For example, <ruby>(Ruby annotations, used in East Asian typography)
    • Accessibility
    • Support users with disabilities
    • For example, screen readers
    • Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA)
    • WAI-ARIA roles can be added today
  • A Plugin-Free Paradigm
    • HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, sockets)
    • Problems with plugins:
    • Plugins may be disabled, blocked (iPad does not ship with Flash plugin), or not installed
    • Plugins are a separate attack vector
    • Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, and transparency issues)
    • “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobs
  • HTML5, Meet Tech Com
    • HTML5 impact on Technical Communication may be bigger than DITA
    • Specific benefits in all feature areas
    • Widespread adoption is around the corner, so it is time to start planning and using it
    • Many HTML5 features can be used today
  • Browser Support
    • Modern browsers already support a lot of features, including mobile browsers
    • Support varies widely for different features
    • Internet Explorer 6,7 and 8 have very little support
    • Use support matrix at http://caniuse.com
    • Use feature detection and polyfillsto bridge the gaps
    • Modernizr
    • HTML5 Boilerplate
  • Semantic Markup & Microdata
  • Valid HTML vs. Valid XHTML
    • So you created XHTML…
    • But did you know that:
    • Over 90% of XHTML is delivered with the text/html mime type and therefore broken
    • Delivering XHTML as text/xml orapplication/xhtml+xml is risky (not supported in old IE)
  • Valid HTML vs. Valid XHTML
    • Use HTML5 and create valid HTML
    • http://html5.validator.nu/
    • http://validator.w3.org
    • HTML5 allows XML syntax from XHTML 1.0 for backward compatibility
    • For example: <br />
    • HTML5 has well-definedprocessing rules
    • Simple is better
    • New doctype
    • Character set
  • Simplified Doctype
    HTML4/XHTML
    • HTML 4.01 Strict
    • HTML 4.01 Transitional
    • HTML 4.01 Frameset
    • XHTML 1.0 Strict
    • XHTML 1.0 Transitional
    • XHTML 1.0 Frameset
    • XHTML 1.1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    HTML5
    <!DOCTYPE html>
  • Simplified Character Set
    HTML4
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    HTML5
    <meta charset=utf-8>
  • Minimal HTML5 Page
    HTML5
    <!DOCTYPE html>
    <meta charset=utf-8>
    <title>HTML5</title>
    <h1>HTML5!</h1>
    DOM
    70 characters!
  • New HTML5 Elements
    <canvas>
    <article>
    <audio>
    <aside>
    <command>
    <dialog>
    <details>
    <datalist>
    <header>
    <hgroup>
    <footer>
    <figure>
    <embed>
    <nav>
    <keygen>
    <mark>
    <meter>
    <ruby>
    <output>
    <section>
    <rp>
    <rt>
    <video>
    <source>
    http://dev.w3.org/html5/markup/elements.html#elements
  • Obsolete Elements
    <acronym>
    <basefont>
    <applet>
    <big>
    <dir>
    <font>
    <center>
    <s> <strike>
    <frame>
    <u>
    <frameset>
    <noframes>
    <tt>
  • Framesets
    • That’s right! Frames are deprecated
    • Should continue to work in most browsers, but look for alternatives
    • Frames are used heavily in:
    • Online Help systems
    • API documentation
  • Semantic Markup Benefits
    • Based on research (Opera, Google studies on commonly used div class and id names)
    • Cleaner, less verbose markup (replacedivandspan elements with meaningful elements)
    • Machine readable:
    • Search engines
    • Syndication
    • Linking and sharing
  • Anatomy of an HTML5 Page
    HTML
    #1
    <!DOCTYPE html>
    <html lang="en" manifest="offline.appcache">
    <head>
    <meta charset=utf-8>
    <title>HTML5</title>
    <link rel="stylesheet" href="html5.css">
    <!--[if lt IE 9]>
    <script src=”js/html5.js"></script>
    <![endif]-->
    </head>
  • Anatomy of an HTML5 Page
    HTML
    #2
    <body>
    <header>
    <h1>Header</h1>
    </header>
    <div id="container">
    <nav>
    <h3>Nav</h3>
    </nav>
  • Anatomy of an HTML5 Page
    #3
    HTML
    <section>
    <article>
    <header>
    <h1>Article Header</h1>
    </header>
    <p>Lorem ipsum <mark>HTML5</mark> rocks…</p>
    <footer>
    <h2>Article Footer</h2>
    </footer>
    </article>
  • Anatomy of an HTML5 Page
    HTML
    #4
    <article>
    <header><h1>Article Header</h1></header>
    <figure>
    <figcaption>Lake Tahoe</figcaption>
    <img src="tahoe.png" width="160" height=”100" alt="Lake Tahoe">
    </figure>
    <footer><p>footer</p></footer>
    </article>
    </section>
  • Anatomy of an HTML5 Page
    HTML
    #5
    <aside>
    <h3>Aside</h3>
    </aside>
    <footer>
    <h2><small>Footer</small></h2>
    </footer>
    </div><script src=”js/jquery-1.6.2-min.js"></script>
    </body>
    </html>
  • Anatomy of an HTML5 Page
    #6
  • Anatomy of an HTML5 Page
    #7
  • Anatomy of an HTML5 Page
    I.E. <9
  • details element
    HTML
    <!-- Progressive Information Disclosure -->
    <details>
    <summary>What are my download options?<summary>
    <ul>
    <li><strong>Base:</strong> Contains a minimal download...</li>
    <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li>
    </ul>
    </details>
    http://code.google.com/p/html5shiv/
  • Progressive Info. Disclosure
    http://tech.kaazing.com/documentation/html5/setup-guide.html
  • Microdata
    • Emphasis on machine readability
    • SEO advantages
    • Use Microdata embed machine-readable data in HTML documents
    • Easy-to-write syntax (add to any element)
    • Compatible with other data formats such as RDF and JSON
    • Use microdata vocabularies: http://data-vocabulary.org
  • HTML
    <section itemscope>
    <article id="html5-fast-track"
    itemtype="http://data-vocabulary.org/Product">
    <header>
    <h1 itemprop="name”>HTML5 Fast Track</h1>
    </header>
    <p itemprop="description">The HTML5 Fast Track
    training course is a two day experience...
    </p>
    </article>
    </section>
    HTML5 Microdata Example
  • Microdata Testing
    http://www.google.com/webmasters/tools/richsnippets
  • HTML5 Forms
    • New form functionality:
    • No JavaScript required
    • Native date and color pickers
    • Search, e-mail, web address
    • Client side validation
    • Spin boxes and sliders
    • Features degrade gracefully (unknown input types are treated as text)
    • Benefits:
    • Virtual keyboard support
    • Native widgets and error messages are internationalized
  • HTML
    <form>
    <p><label for="phone">Telephone number:</label>
    <input type=tel
    placeholder="(xxx) xxx-xxx" required></p>
    <p><label for="emailaddress">E-mail address:</label>
    <input id="emailaddress" name="emailaddress"
    type=email required></p>
    <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p>
    <p><label for="color">Shirt Color:</label>
    <input id="color" name="color" type="color"></p>
    Example HTML5 Form
  • Forms features
    Date picker
    Color picker
  • CSS3
  • CSS Level 3
    • Modularized for easier browser uptake
    • Almost 50 modules (readiness varies)
    • Use browser-specific prefixes until finalized
    • Dramaticallyimprovesperformance
    • Examples:
    • Border radius (rounded corners) without images
    • Gradients
    • Multi-column layout
    • Transformationsandtransitions
    • Web Fonts
    • Media Queries
  • Rounded corners
    CSS
    a:hoverimg{
    border-radius: 10px;
    border: 2px solid #F47D31;
    -webkit-transform: scale(1.05);
    }
  • Web Fonts
    HTML
    <html><head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> h1 { font-family: 'Tangerine', serif;
    font-size: 48px; } </style></head><body><h1>Making the Web Beautiful!</h1></body>
    http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start
    Copyright © 2011 - Kaazing Corporation. All rights reserved.
  • Media Queries
    CSS
    /* Media-specific sections of stylesheet */
    @media all and (orientation:landscape) {
    /* e.g. rotated smartphone */
    }
    @media screen and (max-device-width: 480px) {
    /* small screen */
    }
    @media print {
    /* drop navigation elements that make no sense on paper */
    nav { visibility:hidden; }
    }
  • Multimedia
  • HTML5 Audio and Video
    • New HTML5 media elements
    • <audio> and <video>
    • Native audio and video (no plugins required)
    • Programmable with JavaScript
    • Style with CSS
    • Add videos and audio as if it was an image
    • Codec support varies, but multiple source elements and fallback content can be used
  • HTML5 Video Example
    HTML
    //Basic Video
    <video controls src=”goldrush.mp4">
    A movie about HTML5
    </video>
    // Video with additional attributes
    <video id="movies"
    controls preload="metadata"
    width="400px" height="300px"
    poster="html5.png" >
    <source src="goldrush.webm">
    <source src="goldrush.mp4">
    <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt">
    A movie by Rocky Lubbers
    </video>
  • HTML
    <!—Multiple videos with alternate Flash content-->
    <video controls>
    <source src=”goldrush.webm">
    <source src=”goldrush.mp4”>
    <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt">
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
    <param name="movie" value="rocpoc.swf"/>
    A movie by Rocky Lubbers
    </object>
    </video>
    Flash Video Fallback
  • WebVTT
    WEBVTT
    1
    00:00:01,000 --> 00:00:03,050
    What do I think about HTML 5?...
    2
    00:00:04,000 --> 00:00:07,100
    It’s the next big thing! I just hope that people use the new features thoughtfully.
    WebVTT (Video Accessibility)
  • Graphics and 3D
  • HTML5 Canvas and SVG
    • Provide native drawing functionality
    • Previously possible only with plugins (Flash, Silverlight)
    • Completely integrated into HTML5documents (part of DOM)
    • Can be styled with CSS
    • Can be controlled with JavaScript
    • Use for animation, charts, images,pixel manipulation, and so on
    • Canvas supports 2D and 3D (WebGL)
    • Will impact animated graphics and diagrams soon (use libraries)
  • Canvas Animation
    Demo courtesy Gary Davis, AniWorx
  • Device Access
  • Device Access Features
    • Geolocation
    • Allows users to share their locationfor location-aware services
    • Implemented in all browsers
    • Drag and Drop
    • Filesystem API
    • Speech Input
    • Device orientation (accelerometer)
    • Webcam (bar code, QR code scanning)
    • Audio devices (speech input)
  • Speech Input
    http://slides.html5rocks.com/#speech-input
  • Drag and Drop
  • Performance
  • Web Workers & Performance
    • HTML5 Web Workers provide background processing capabilities to web applications
    • Run background JavaScript
    • Important performance tips:
    • CSS3
    • Sprites (combine images)
    • Minification
    • Data URIs
    • Data URIs
    • Use for frequently used,small images, such as warnings or logos
    • Test with optimization tools (Yslow, Page Speed)
  • HTML
    <img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon">
    Data URI Example
  • Offline and Storage
  • Offline Web Applications
    • Use complete web sites (documentation sets) in offline mode
    • Cache pages that have not been visited yet
    • Browsers cache data in an Application Cache
    • HTML5 allows online and offline detection
    • Allows prefetching of site resources (can speed up pages)
    • Simple manifest mechanism
  • appcache File
    CACHE MANIFEST
    # manifest version 1.0.1
    # Files to cache
    index.html
    cache.html
    html5.css
    image1.jpg
    img/foo.gif
    http://www.example.com/styles.css
    # Use from network if available
    NETWORK:
    network.html
    # Fallback content
    FALLBACK:
    / fallback.html
    Example appcache File
    • Reference the manifest file:
    • Use .appcache extension (*.manifest also allowed)
    • Add as attribute to HTML element
    HTML
    <!DOCTYPE html>
    <html manifest="offline.appcache">
    <head>
    <title>HTML5 Application Cache Rocks!</title>
    Example manifest Attribute
    http://appcachefacts.info/
  • Web and DB Storage
    • Many powerful new client-side storage options
    • Web and Web Database storage a.k.a. "cookies on steroids”
    • Web Storage (Session and Local Storage
    • Web Database Storage
    Cookies
    Session
    Local
    Database
  • Connectivity and Real Time
  • Connectivity Features
    • Cross Document Messaging
    • XMLHttpRequest Level 2
    • Server-Sent Events
    • WebSockets
    • CORS
  • WebSockets
    • New W3C API and IETF Protocol for low-latency, real-time, bi-directional connections
    • Easily add social networking components(Chat, etc.) and real-time data to static pages
  • Questions?
    • Now or Later
    • E-mail: peter.lubbers@kaazing.com
    • Twitter: @peterlubbers
    • LinkedIn: Peter Lubbers
  • Buy the Book!
    • Pro HTML5 Programming (Apress, 2010)
    • 50% off e-book coupon code:5BY5APRESShttp://www.prohtml5.com
  • Useful HTML5 Resources
    • Modernizr
    • Small, simple JavaScript library that checks support for HTML5 and CSS3 features
    • Moves away from user-agent sniffing and uses feature detection insteadhttp://www.modernizr.com/
    • html5shiv
    • Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
    • html5boilerplate
    • http://html5boilerplate.com
  • Useful HTML5 Resources
    • HTML5 Validators (Experimental):
    • http://html5.validator.nu/
    • http://validator.w3.org/
    • HTML5 outline algorithm test page
    • http://gsnedders.html5.org/outliner/
    • Performance:
    • Chrome Speed Tracerhttp://code.google.com/webtoolkit/speedtracer/
    • Yslow (for Firebug)http://developer.yahoo.com/yslow/
    • Page Speed (Firefox and Chrome Add-On)http://code.google.com/speed/page-speed/docs/using_chrome.html
    • HTML5 User Group:
    • San Francisco: http://www.sfhtml5.org/
    • Apress book: Pro HTML5 Programming
    • (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
    Learn More
  • Get Trained!
    • Proven, practical worldwide HTML5 Training (training from experts, not just trainers):
    • E-mail us: training@kaazing.com
    • Web site: http://kaazing.com/training/