Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Introduction to HTML5 and CSS3 (revised)

on

  • 13,675 views

 

Statistics

Views

Total Views
13,675
Views on SlideShare
13,675
Embed Views
0

Actions

Likes
13
Downloads
489
Comments
4

0 Embeds 0

No embeds

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…
Post Comment
Edit your comment
  • Debate is now about “how well x browser vendor supports HTML5”
  • “We're betting big on HTML 5.”— Vic Gundotra, Google“The world is moving to HTML5.”— Steve Jobs, Apple“The future of the web is HTML5.”— Dean Hachamovitch, Microsoft
  • Always have a character set, please. And, always indicate utf-8 as said character set, unless you have a very good reason to do otherwise.
  • Simple, easy, memorable.
  • Quoting attribute values is not necessary unless you have multiple values separated by spaces, such as in title, alt, or class.XML-style self closing tags are not needed for validation or browser functionality.Not necessary if already specified in HTTP headers.
  • You might just be using , and that’s OK too. But the lang attribute is useful, so do keep it in there. At the national lab level and other .gov web properties, this would best be represented as en-us, but there’s of course plenty of reasons why you’d want to use another language specification i.e. in the case of translated content.
  • Simplest, most structurally sound example of an HTML5 web page. Bruce Lawson has a great teardown of this reasoning on his website.
  • is for “a span of text to be stylistically offset from the normal prose without conveying any extra importance,” while is now “a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation”Many disagree with the restriction and want to use it for an author as well. I agree.
  • Iframe is perfectly fine.
  • To discuss semantic elements in HTML5, consider this markup in detail. We have header, tagline, nav, article, and footer represented as classes or IDs. Very common, and there’s nothing wrong with this markup.
  • Accessibility caveat: Screen readers may have issues.
  • Doesn’t have to be img, can be video, svg, etc.
  • Works in WebKit
  • Doesn’t seem to work in webkit yet.
  • Who knows what types of CSS selectors these are? Show live example here.
  • Hat tip to regular-expressions.info
  • MP4 must come first to handle an iPad bug.
  • MP4 must come first to handle an iPad bug.
  • IE6 doesn’t need box shadows or rounded corners….
  • E[instrument^="bass"] – selects any attribute beginning with the string “bass”. Given a list of standard orchestral instruments, “bassoon”, “bass clarinet”, “basset_clarinet”, “basset_horn”, and “bass_drum” would be matches. Other instruments containing the string “bass” such as “contrabassoon” and “double_bass” would be omitted.E[instrument$="bass"] – selects any attribute ending with the string “bass”. Going back to our list of orchestral instruments, “double_bass” would be a match and the rest would be skipped.E[instrument*="bass"] – selects any attribute beginning with the string “bass”. This time the entire list of instruments from the first example containing the string “bass” would be matches.
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> nth child p { height:30px; width:110px; margin:0; padding:2px;float:left; } p:nth-child(3n+1) { background-color: #6CF; } p:nth-child(3n+2) { background-color: #6FC; } p:nth-child(3n+3) { background-color: #FC6; } p:nth-child(7) { font-size:1.8em; font-weight:bold; text-align:center; color:#e00000; }p:nth-child(even) { color:#fff; } p:nth-child(5n) { font-style:italic; } Violin Viola Cello Double Bass Viola daGamba Guitar Banjo Mandolin Mandola Mandolincello Lute Theorbo Erhu Pipa Guzheng Sitar
  • Apple makes six times the profit from iPhone OS device sales than HP makes from PC sales — despite the fact that by unit sales, HP is the world’s leading PC maker, and Apple is not the leading smartphone maker.The point here is that the age of the PC is waning. The future of innovation is in mobile devices and beyond.
  • Before June 2007, web use from mobile was nominal. What changed? iPhone.iPhone legitimized the idea of surfing the web from a mobile device.Apple prevented client app development for a year before allowing developers to build non-web applications. This fueled massive growth of mobile web development and forced developers to stretch the capabilities of what was possible with mere client-side technologies such as XHTML, CSS, and JavaScript. Check out the original web version of Bejeweled.In his book, “Mobile as the 7th of the Mass Media” (2008, futuretext Ltd.), Tomi T. Ahonen makes the case that mobile media is nothing to be ignored: 31% of consumer spending in the music industry is spent on mobile purchases, while in the gaming industry the number is 20%. It has been deduced that—as of today—approximately one and a half billion Internet connections being generated from mobile phones, and 63% of the global population has a potentially Internet-capable mobile phone. Over 60 countries around the world have mobile phone penetration exceeding 100% of the population—which means many people own not one but two mobile devices—And finally, Nielsen in May of 2008 reported that leading Internet sites increased their usage by 13% over desktop-based traffic alone, and in certain cases such as for weather and entertainment up to 20%. These are significant trend indicators for mobile web growth, which will undoubtedly continue to increase in the coming years.In February of 2008 Google reported that they were seeing 50 times more search queries coming from iPhone than from any other mobile handset at that time. While this snapshot statistic is not necessarily representative of the entire mobile Web, it is an auspicious metric considering the iPhone had been out for only seven or eight months and constituted a tiny fraction of the mobile handset hardware market at the time. Nevertheless, despite its limited market share, the iPhone’s Mobile Safari browser was clearly already on its way to becoming the dominant player in the mobile web market space.What was the key to the mobile Web’s adoption on the iPhone? The answer is usability. So much attention to detail was placed on the iPhone and its Mobile Safari web browser that users and developers alike were suddenly able to create and consume traditional Web content with very little additional effort.
  • Instant broadcasting/publishing or data collection platform for the fieldConvenience & Proximity: Always on, always near the owner.60% of mobile users keep their phones bedside at night.Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data.Location aware: GPS, accelerometers widely available.Media input: Most smartphones have built-in camera, microphone, and speaker in addition to keyboard input."An App for That": There are currently over 100K approved apps for the iPhone, and the rate of growth is phenomenal, more than the rate of growth for desktop softwareCost: The cost of apps has been decreasing significantly and most of the most popular apps cost $1On the Go Messaging: Ability for users to send and receive messages from any locationData storage: Users are able to have a significant amount of personal and professional data at their fingertips.Airlines are allowing users to have e-tickets on their smartphones, these devices are replacing paper and credit cards to store information. 
  • Small screen size - This makes it difficult or impossible to see text and graphics dependent on the standard size of a desktop computer screen.Lack of windows - On a desktop computer, the ability to open more than one window at a time allows for multi-tasking and for easy revert to a previous page. On mobile web, only one page can be displayed at a time, and pages can only be viewed in the sequence they were originally accessed.Navigation - Mobile devices do not use a mouselike pointer, but rather simply an up and down function for scrolling, thereby limiting the flexibility in navigation.Lack of Javascript and cookies - Most devices do not support client-side scripting and storage of cookies (smartphones and iPhone excluded), which are now widely used in most Web sites for enhancing user experience, facilitating the validation of data entered by the page visitor, etc. This also results in web analytics tools (like Google Analytics) not being suitable for uniquely identifying visitors using mobile devices.Types of pages accessible - Many sites that can be accessed on a desktop cannot on a mobile device. Many devices cannot access pages with a secured connection, Flash or other similar software, PDFs, or video sites, although recently this has been changing.Speed - On most mobile devices, the speed of service is very slow, often slower than dial-up Internet access.Broken pages - On many devices, a single page as viewed on a desktop is broken into segments, which are each treated as a separate page. Paired with the slow speed, navigation between these pages is slow.Compressed pages - Many pages, in their conversion to mobile format, are squeezed into an order different from how they would customarily be viewed on a desktop computer.Size of messages - Many devices have limits on the number of characters that can be sent in an email message.
  • This small sampling demonstrates the wide range of default browser rendering engines and screen capabilities between the various models and vendors. Even among the same vendor there is wide variance in browser support. Opera has the largest numbers for support, WebKit has the highest momentum for adoption.Chart is old data but pay attention to the resolution column.
  • Use desktop emulators for previewing content.
  • We will quickly look at the UA sniffing and separate site approaches, and then focus on media targets as a quick enhancement you can implement today for existing sites.
  • Maintenance can be a chore with UA detection. However, it does allow you to deliver trimmed content and save bandwidth. . UAs change all the time and there’s little standard. Plan on maintenance.
  • Screenshot showing mapped routes for the mobile version of an application in Ruby on Rails, invoking special controllers and actions for specific URLs in the mobile format.
  • Of these, the link method has the widest support. Things start to fail in older browsers and you go down the list. We will focus on this method as a quick and easy add-on to many existing sites. No reason not to.
  • The sidebar information may be getting in the way of the mobile user experience. Simple CSS rules can be used to hide or move the content.Given a sidebar has been floated to create a two column layout, simply kill the float.
  • Say an image is too wide for most mobile screens and is causing layout problems. Reset it to the alt attribute and give the heading some typography!Reset long text buttons with content property. Résumé becomes CV, Upcoming Events becomes Events, and Multimedia becomes A/V
  • More examples in source code examples
  • CSS3 works great on iPhone!

Introduction to HTML5 and CSS3 (revised) Presentation Transcript

  • 1. Introduction to HTML5 & CSS3
    Joseph R. Lewis, Sandia National Laboratories
    InterLab Conference, Oak Ridge National Laboratory, November 1st, 2010, SAND №2010-7567C
  • 2. Get set up for playing along
    Your favorite code editor. Suggestions:
    TextMate or E – check for HTML5 bundles on GitHub
    Dreamweaver CS5 11.0.3 update
    Latest versions of these browsers:
    Firefox 4 (beta) http://www.mozilla.com/en-US/firefox/beta/
    Chrome http://www.google.com/chrome
    Opera http://www.opera.com/
    (optional) Safari http://www.apple.com/safari/
    (optional) IE9 http://www.microsoft.com/ie9
    (optional) WebKithttp://webkit.org/
  • 3. About Me
    Joseph R. Lewis
    Chief Web Architect, Sandia National Laboratories
    Web development for 13 years
    Author, AdvancED CSS and Foundation Website Creation
  • 4. What we will cover
    As much HTML5 and CSS3 as we can!
    Some time for exercises.
    Other topics may be introduced and left for you to explore later.
    Will skip a few things that are either deeply in flux or not relevant to National Lab/Science application (i.e. Ruby)
    Focus on practical things you can get started with now, with a taste of what is to come!
  • 5. Agenda
    HTML5
    History and Overview
    Semantic Elements
    Forms
    SVG and MathML
    Canvas
    WAI-ARIA (Accessibility)
    Video and Audio
    Offline Storage
    Drag & Drop
    Messages, Workers, & Sockets
    Geolocation
    CSS3
    Selectors
    Borders
    Backgrounds
    Color
    Text & Web Fonts
    Transitions, Transforms, Animation
  • 6. HTML5 and CSS3 Appetizers
    CanvasMol: http://alteredqualia.com/canvasmol/
    The Wilderness Downtown: http://www.thewildernessdowntown.com/
    Scientific American: http://www.scientificamerican.com/
    Apple: http://www.apple.com/html5/
    Google: http://www.html5rocks.com/
    MSFT: http://www.beautyoftheweb.com/
    HTML5 Pac Man: http://arandomurl.com/2010/07/25/html5-pacman.html
    Quake: http://code.google.com/p/quake2-gwt-port/
    IE9 Platform Preview 6:http://www.youtube.com/watch?v=ZOcTdhvBVeA
    Oh and Google, NY Times, YouTube, National Geographic, Vimeo, CNN, and many, many others.
  • 7. Why HTML5 & CSS3? Why Now?
    Microsoft, Apple, Mozilla, Google, Facebook, YouTube, Vimeo, etc. – all fully committed to HTML5 as the future of the web.
    HTML5 represents a more practical, more semantic, more functional web.
    CSS3 makes common visual elements easy, programmatic, not image-based.
    Browser support for HTML5+CSS3 today:
    Excellent for Safari, Firefox, Chrome, Opera, IE9
    Practical strategies exist for older browsers.
  • 8. The long journey to HTML5
  • 9. History of HTML
    Why? So we can understand why certain decisions were made, and why things are the way they are.
    W3C & HTML up to v4.01
    Browser wars – vendors trying to one-up each other on features
    Standards process at the W3C – debate, committees, specifications
    “Shipping code wins”
  • 10. The reasoning behind XHTML
    XML was seen as the future of the web
    XHTML was intended to function as a ‘transition’ on the path to XML
  • 11. Why XHTML was doomed
    No backwards compatibility
    Fussy XML interpretation
    Strict adherence to MIME types
    text/html vs. application/xhtml+xml
    Browsers all allow text/html
    application/xhtml+xml broke IE
  • 12. Enter WHATWG and HTML5
    Opera, Mozilla, and Apple, presented competing vision of evolution of HTML at W3C workshop in 2004. Voted down.
    Web Hypertext Application Technology Working Group (WHATWG) formed to continue work outside W3C.
    In 2007, W3C creates HTML working group with HTML5 as the foundation.
    In 2009, The W3C discontinued the XHTML 2.0 working group in favor of HTML5.
  • 13. Principles of HTML5
    Backwards compatibility
    Well-defined, non-draconian error handling
    Practical applications and usage
    Embracement of JavaScript interaction with markup
    Open process
  • 14. Two homes for HTML5
    W3C spec: http://www.w3.org/TR/html5/
    W3C Editor’s Draft: http://dev.w3.org/html5/spec/Overview.html
    WHATWG version: http://www.whatwg.org/specs/web-apps/current-work/multipage/
  • 15. Exercise №1: Discuss HTML5
    Discuss as a group how we got to HTML5.
    What do you all think about having two versions of HTML5?
    What have you heard about the debate?
    When do you think you might start using HTML5 in your own code?
  • 16. Let’s learn some HTML5!
  • 17. Doctype, the old way:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 18. Doctype, the HTML5 way:
    <!DOCTYPE html>
  • 19. Defining a character set
    Why? Text rendering + Security concern: http://code.google.com/p/doctype/wiki/ArticleUtf7
    In the old days, we used Latin 1: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">, or whatever regional character set was necessary for your language (i.e. Big-5 for traditional Chinese).
    Unicode makes individual character sets unnecessary: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 20. Charset in HTML5
    <meta charset="utf-8">
  • 21. Lose the quotes for single value attributes
    <meta charset=utf-8>
    (Also note that /> closings for standalone
    tags are needed for XHTML5 only)
  • 22. The HTML element, the old XHTML way
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  • 23. The HTML element, HTML5 style
    <html lang="en-us">
    Lang attributes are used by search engines, speech synthesizers, and browsers for regional hyphenation and spelling correction.
    List of codes: http://msdn.microsoft.com/en-us/library/ms533052(VS.85).aspx
  • 24. Your basic HTML5 structure
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>My Page Title</title>
    </head>
    <body>
    <p>My awesome web page.</p>
    </body>
    </html>
  • 25. The new HTML5 elements
    datalist
    keygen
    output
    ruby, rt, and rp
    wbr
    embed
    command
    details
    article
    aside
    figure
    footer
    header
    hgroup
    nav
    section
    mark
    meter
    progress
    time
    canvas
    video
  • 26. New HTML5 Attributes
    To many to catch them all here, but just a few to mention up front include:
    placeholder – placeholder text in forms
    autofocus – assigns focus to text fields
    contenteditable– makes a given element editable. Try it.
    reversed – works on <ol> to reverse numbering.
  • 27. Changed HTML5 elements
    <a> can now wrap around block elements
    <b> and <i> are back.
    <cite> defined to be the title of a work*
    <hr> is now a “paragraph-level thematic break”
    <small> is for small print, i.e. legal boilerplate
  • 28. Removed elements
    basefont
    big
    center
    font
    strike
    tt
    u
    frame
    frameset
    noframes
    acronym is now abbr
    applet is now object
  • 29. Typical HTML Page Structure
    <div id="header">
    <h1>Tales of Woe</h1>
    <p class="tagline">The neverending saga continues...</p>
    <div id="nav">
    <h2>Navigation</h2>
    <ul>
    <li><a href="one.html">Page One</a></li>
    <li><a href="two.html">Page Two</a></li>
    <li><a href="three.html">Page the Third</a></li>
    </ul>
    </div>
    </div>
    <div class="article">
    <h2>The Stagnant Staircase</h2>
    <p>It was a dark and stormy night...</p>
    </div>
    <div id="footer">
    <p>©2010 In Your Nightmares Productions.</p>
    </div>
  • 30. How HTML 4-style structure might look
    div id=header
    Banner text + tagline
    div id=nav
    div id=article
    div id=sidebar
    Headings & content
    Headings & content
    div id=footer
  • 31. Typical HTML5 Page Structure
    <header>
    <hgroup>
    <h1>Tales of Woe</h1>
    <h2>The neverending saga continues...</h2>
    </hgroup>
    <nav>
    <h2>Navigation</h2>
    <ul>
    <li><a href="one.html">Page One</a></li>
    <li><a href="two.html">Page Two</a></li>
    <li><a href="three.html">Page the Third</a></li>
    </ul>
    </nav>
    </header>
    <article>
    <h2>The Stagnant Staircase</h2>
    <p>It was a dark and stormy night...</p>
    </article>
    <footer>
    <p>©2010 In Your Nightmares Productions.</p>
    </footer>
  • 32. Structural elements in HTML5
    <header>
    <hgroup>
    <nav>
    <article>
    <aside>
    <section>
    <section>
    <footer>
  • 33. Sectioning off headings
    <section>
    <h1>Homininae</h1>
    <section>
    <h1>Gorillini</h1>
    <section>
    <h1>Gorilla gorilla</h1>
    <section>
    <h1>Gorilla gorilla gorilla</h1>
    <h1>Gorilla gorilla diehli</h1>
    </section>
    <h1>Gorilla beringei</h1>
    <section>
    <h1>Gorilla beringeiberingei</h1>
    <h1>Gorilla beringeigraueri</h1>
    </section>
    </section>
    </section>
    <section>
    <h1>Hominini</h1>
    <section>
    <h1>Pan</h1>
    <section>
    <h1>Pan traglodytes</h1>
    <section>
    <h1>Pan troglodytes troglodytes</h1>
    <h1>Pan troglodytes verus</h1>
    <h1>Pan troglodytes vellerosus</h1>
    <h1>Pan troglodytes schweinfurthii</h1>
    </section>
    <h1>Pan paniscus</h1>
    </section>
    </section>
    </section>
    <section>
    <h1>Homo</h1>
    <section>
    <h1>Homo sapiens</h1>
    <section>
    <h1>Homo sapiens sapiens</h1>
    </section>
    </section>
    </section>
    </section>
  • 34. Sectioning results:
    Homininae
    Gorillini
    Gorilla gorilla
    Gorilla gorilla gorilla
    Gorilla gorilla diehli
    Gorilla beringei
    Gorilla beringeiberingei
    Gorilla beringeigraueri
    Hominini
    Pan
    Pan traglodytes
    Pan troglodytes troglodytes
    Pan troglodytes verus
    Pan troglodytes vellerosus
    Pan troglodytes schweinfurthii
    Pan paniscus
    Homo
    Homo sapiens
    Homo sapiens sapiens
  • 35. Go Figure
    <figure>
    <imgsrc="Viola.jpg"></video>
    <figcaption>This is a lovely Amati 1710 viola.</figcaption>
    </figure>
  • 36. <aside> of bacon
    <aside>
    <h2>Definitions</h2>
    <dl>
    <dt>Bacon</dt>
    <dd>Meat candy.</dd>
    <dd>Slang for ‘money’</dd>
    </dl>
    </aside>
    Inside an article: related to the content (i.e. infobox)
    Outside an article: content relevant to the page itself (i.e. sidebar)
  • 37. Exercise №2: HTML5 Structure
    Create HTML5 markup for a blog home page.
    Install the HTML5 Outliner bookmarklet or Chrome extension: http://code.google.com/p/h5o/
    Make some headings. Play around with <hgroup>, <heading>, and <h1>-<h6>. (biological classifications & org charts work really well…)
    Check your work in H5O!
    Check your work in Unicorn: http://validator.w3.org/unicorn/
    Write CSS rules that target your new HTML5 elements. Do not use classes or IDs in your selectors.
  • 38. XML applications in HTML5
    SVG and MathML are available in HTML5
    Browser support: Firefox 4 works, WebKit mostly works, other browsers in progress
    Namespaces are not required
    Very useful in scientific contexts
    Protovis
    Those needing other XML apps will want to use XHTML5 instead.
  • 39. SVG Example №1
    <svg width="300px" height="300px">
    <rectx="10px" y="10px"
    width="250px" height="250px"
    fill="red" stroke="black"
    stroke-width="10px"/>
    </svg>
  • 40. SVG Example №2
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>The Sun in SVG</title>
    </head>
    <body>
    <h1>The Sun in SVG</h1>
    <svg style="width:300px; height:300px;">
    <radialGradientcx="0.5" cy="0.5" r="0.5" id="g">
    <stop stop-color="rgb(255, 255, 0)" offset="0"/>
    <stop stop-color="rgb(255, 221, 51)" offset="0.7"/>
    <stop stop-color="rgb(254, 140, 25)" offset="0.7"/>
    <stop stop-color="rgb(0, 0, 0)" offset="1"/>
    </radialGradient>
    <rect width="100%" height="100%" fill="url(#g)"/>
    </svg>
    </body>
    </html>
  • 41. MathML Example
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>The Dirac &delta;-function</title>
    </head>
    <body>
    <h1>The Dirac &delta;-function</h1>
    <math style="font-size:200%">
    <mrow>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mrow>
    <mo>-</mo>
    <mi>&infin;</mi>
    </mrow>
    </mrow>
    <mi>&infin;</mi>
    </msubsup>
    <mrow>
    <mi>f</mi>
    <mi>&delta;</mi>
    </mrow>
    </mrow>
    <mo>=</mo>
    <mrow>
    <mo>f</mo>
    <mfenced>
    <mrow>
    <mn>0</mn>
    </mrow>
    </mfenced>
    </mrow>
    </math>
    </body>
    </html>
  • 42. Exercise №3: SVG & MathML
    Create an SVG or MathML object within an HTML5 page.
    Search the web for existing SVG examples images (Wikipedia has tons) or MathML formulas and paste the content in to your HTML5 document.
    Try modifying some of the SVG or MathML elements or values to see what happens.
    Try applying some CSS to it.
    View in Firefox 4. Compare to other browsers.
    Discuss the results.
  • 43. The Canvas Element
    Scriptable rendering of images
    Introduced in WebKit – later found in Opera and Gecko
    Compare to SVG:
    Performance better on Canvas.
    SVG is XML, whereas Canvas is mostly JS.
    SVG has DOM access.
    Canvas is more bitmap-focused. SVG is vector-focused.
    What else?
  • 44. Basic Canvas
    <canvas id="example" width="250" height="250">
    Default text
    </canvas>
    CSS possible instead of width and height attributes
    Default text used for agents that can’t interpret <canvas>
  • 45. A patch of green <canvas>
    <script>
    function draw() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
    varctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,255,0)";
    ctx.fillRect (10, 10, 220, 220);
    }
    }
    </script>
    <body onload="draw();">
    <canvas id="canvas" width="250" height="250">This should be a green square.</canvas>
    </body>
  • 46. Exercise №4: Canvas
    Check out the developer tutorials
    MDC Canvas Tutorial: https://developer.mozilla.org/en/Canvas_tutorial
    Dive into HTML5: http://diveintohtml5.org/canvas.html
    Opera tutorial: http://dev.opera.com/articles/view/html-5-canvas-the-basics/
    Standardista: http://www.standardista.com/canvas-tutorial
    Make an HTML5 page with your own Canvas. Start with a box. Try a circle. Take it from there. Try drawing a bar graph, pie chart, etc.
    Discuss where Canvas would be useful. How about SVG? What about plain-old images? Text?
  • 47. ARIA in HTML5
    ARIA: Accessible Rich Internet Applications
    API to enable assistive technologies access to application controls (i.e. this image is a check box)
    Targets HTML, browser functionality, JavaScript/Ajax
    Places accessibility hooks in HTML attributes.
    Uses the aria- attribute prefix
    Support in IE, Firefox, Opera, Chrome, Safari, principal screen reader vendors, Dojo, YUI, jQuery
  • 48. ARIA in HTML5 Example
    <ul id="tree1"
    role="tree"
    tabindex="0"
    aria-labelledby="label_1">
    <li role="treeitem" tabindex="-1"
    aria-expanded="true">
    Hominids</li>
    <li role="group">
    <ul>
    <li role="treeitem" tabindex="-1">
    Neandertal</li>
    <li role="treeitem"
    tabindex="-1">
    Homo Sapiens</li>
    </ul>
    </li>
    </ul>
  • 49. ARIA resources
    Bruce Lawson’s Redesigning with HTML5 and ARIA http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
    WAI-ARIA Overview: http://www.w3.org/WAI/intro/aria.php
    WAI-ARIA Primer: http://www.w3.org/TR/wai-aria-primer/
    ARIA basics at Standardista.com: http://www.standardista.com/standards/wai-aria-accessible-rich-internet-applications-basics
  • 50. Exercise №4: Discuss Accessibility
    How are you approaching accessibility in your program work?
    Do you have any specific accessibility problems that you’ve tried to address?
    What do you think is the right way to approach accessibility? Full 508 compliance? Best effort? Is this part of your workflow?
  • 51. HTML5 New Form Features
    New attributes
    required
    autofocus
    placeholder
    form
    New input types:
    Email
    Date
    Range
    Search
    Tel
    Color
    Number
    New input types will fall back to type="text"
    New Elements
    <meter>
    <progress>
    <output>
    Be sure to check out Estelle Weyl’s presentation on HTML5 forms Wednesday!
  • 52. New <input> attributes
    min
    max
    multiple
    pattern
    step
    autocomplete
    autofocus
    required
  • 53. The required attribute
    Use on form elements:
    <input type="text" name="moof" required="required" />
    Or to be more pithy:<input type=text name=moof required>
    The aria-requiredattribute flags input for assistive devices.
    CSS selectors:
    [required] { background-color: whitesmoke; }
    :invalid { background-color: #F66; }
  • 54. Going outside the <form>
    Use the form attribute to link elements to forms:
    <form id=profile>
    Enter your <input type="email" name="email" placeholder="email address">.
    </form>
    <textareaform=profile>
    Now tell us more about you.
    </textarea>
  • 55. email, url, tel, and placeholder
    <input placeholder="mickey@example.gov" type=email name=email>
    <input placeholder="http://www.sandia.gov" type=url name=url>
    <input placeholder="555-867-5309" type=tel name=tel>
  • 56. It’s a <date>
    <input type=date name=date>
    Variants: month, week, time, datetime, datetime-local
    Safari:
    Opera:
  • 57. The pattern attribute
    Regular expressions FTW http://xkcd.com/208/
    <input type=email name="email" pattern="[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}">
  • 58. Exercise №5: Forms
    Make a form using some of the new HTML5 form elements!
    Test your work in various browsers. How do the form elements behave between the different browsers? What works and what doesn’t?
    Be sure to see Estelle Weyl’s presentation on Wednesday!
  • 59. Audio & Video
    <audio id="bach" src="Brandenburg3.mp3" controls></audio>
    JS API:
    document.getElementById("bach").muted = true;
    <video id="lenny" src="Bernstein.webm" autoplay controls></video>
    JS API:
    document.getElementById("lenny").play();
  • 60. Embed video, the old way
    <object width="400" height="300">
    <param name="movie" value="http://www.youtube.com/v/ddO9idmax0o"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/ddO9idmax0o" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed>
    </object>
  • 61. Problems with the old way
    Code is complex, confusing
    Relies on 3rd party plug-in
    Plug-in layout is monopolized – can’t draw objects on top of it.
  • 62. <video> in HTML5
    <video src=Bach.mp4></video>
  • 63. Easiest way to support pre-<video> UAs
    <video src=Bach.ogvautoplay>
    Get the <a href=Bach.ogv>Bach video here!</a>
    </video>
  • 64. Did you notice something different
    OggVorbisvs H.264
    Apple Safari and Microsoft IE9 support H.264
    Mozilla Firefox and Opera support OggVorbis
    Google Chrome supports both
    VP8/webM will be supported by all but Safari
    The debate…
    The autoplay attribute – works as advertised
  • 65. Handling <video> sources
    <video controls autoplay>
    <source src=bach.mp4 type='video/mp4;
    codecs="avc1.42E01E, mp4a.40.2"'>
    <source src=bach.ogv type='video/ogg;
    codecs="theora, vorbis"'>
    <p>Get the Bach video in <a href=Bach.ogv>Ogg</a> or <a href=Bach.mp4>MP4</a>.</p>
    </video>
  • 66. Handle HTML5+Flash
    YouTube
    Vimeo
    Brightcove
    Silverlight
    Use <embed> within <video> (ugh.)
    Video for everybody!
    http://camendesign.com/code/video_for_everybody
  • 67. Handling Flash fallback
    <video controls autoplay>
    <source src=leverage-a-synergy.mp4 type='video/mp4;
    codecs="avc1.42E01E, mp4a.40.2"'>
    <source src=leverage-a-synergy.ogv type='video/ogg;
    codecs="theora, vorbis"'>
    <embed src="http://www.youtube.com/v/ddO9idmax0o" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed>
    </video>
  • 68. Delivering lo-fi video to mobile
    <video>
    <source src=Bach-highrez.ogv
    media="(min-device-width: 800px)">
    <source src=Bach-lorez.ogv>
    </video>
  • 69. <audio> is just as easy
    <audio src="bach.mp3">
  • 70. Exercise №6: Try out some video
    Find some royalty-free or freely embedded video on the web.
    Create a page that embeds the video.
    Experiment with applying attributes such as autoplay and controls.
    Experiment with applying CSS to the <video> element.
    Discuss the issues around <audio> and <video> vs Flash, Silverlight, and what to expect in the future.
  • 71. The Semantic Web and HTML5
    Microdata – part of the HTML5 spec
    Microformats – not part of the spec, but widely implemented
    RDFa – not part of the spec.
    HTML5+RDFa is it’s own draft: http://dev.w3.org/html5/rdfa/
    Heated debate
    Rel attributes, time and other basics already covered
  • 72. Rel attributes
    <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
    <link rel="icon" href="/favicon.ico">
    <link rel="pingback" href="http://example.gov/xmlrpc.php">
    <link rel="prefetch" href="prefetch.rb">
    <a rel="archives" href="http://example.gov/archives">Archives</a>
    <a rel="external" href="http://example.gov">For more info</a>
    <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Attribution License</a>
    <a rel="nofollow" href="http://example.com/sample">Other site</a>
    <a rel="tag" href="http://example.gov/tag/nanotubes">Carbon nanotube articles</a>
  • 73. Microdata example
    <section itemscopeitemtype="http://example.org/instruments#strings">
    <h1 itemprop="name http://example.com/fn">Viola</h1>
    <pitemprop="desc">Alto instrument in the string family. Music is typically in <span
    itemprop="http://example.com/clef">alto</span> clef. They are made of <span
    itemprop="http://example.com/material">wood</span>.</p>
    <imgitemprop="img" src=”viola.png" alt="" title=”MatteoGofriller viola, 1710">
    </section>
  • 74. When to use Semantic Web Structures
    Use Microformats for common pieces of data
    hCard
    hCalendar
    hAtom, hResume, hRecipe
    Use RDFa or microdata when you need self-describing data structures
    Scientific data
    Google supports all three.
    Your web service might pick one or two.
  • 75. HTML+RDFa 1.1
    Support for RDFa in HTML5 - http://dev.w3.org/html5/rdfa/
    Separate spec
    Best served as XHTML?
    Use it when you need RDF, where microdata is insufficient.
  • 76. HTML+RDFa example
    <html
    xmlns="http://www.w3.org/1999/xhtml"
    prefix="cal: http://www.w3.org/2002/12/cal/ical#
    xsd: http://www.w3.org/2001/XMLSchema">
    <head><title>Events</title></head>
    <body>
    <ptypeof="cal:Vevent”>
    <span property="cal:summary”>Montiverdi Vespers</span>
    <span property="cal:dtstart” content="2010-10-31T18:00:00-05:00” datatype="xsd:dateTime">
    October 31, 6pm</span>
    </p>
    </body>
    </html>
  • 77. Microformats in HTML5
    Microformats in HTML5 is a future-looking effort. Not stable at the present.
    Some elements such as <time> and <article> might be more helpful to microformats than when using the current conventions.
    Using data-* is explicitly not for microformats or anything else other than custom data structures. Browsers will never do anything special with data-*
    Currently hCard and XFN have no compatibility issues with HTML5. Other microformats may need examination in the HTML5 context.
  • 78. Exercise №7: Semantic Web
    Make an hCard in an HTML5 web page.
    Create some data-* attributes. Discuss what you came up with and how your data might be used.
    Write some CSS that targets your data-* attributes! Maybe give it a purple background color with green text. On second thought – I’m sure you can come up with a better idea…
    Discuss the issues around microformats, microdata, and RDFa.
  • 79. Cache manifest
    Tells browser what to get from cache when offline
    Invoke in HTML element: <html manifest="my.manifest”>
    CACHE MANIFEST
    CACHE:
    logo.png
    offlinestyles.css
    appfunctions.js
    FALLBACK:
    backup-appfunctions.js
    NETWORK:
    ping.js
  • 80. HTML5 JS APIs: Selectors
    Select class 'activerow': getElementsByClassName('activerow');
    CSS3 selectors: querySelectorAll("section li:nth-of-type(2n+1)");
    Classes, operators: querySelectorAll("aside.feature > img");
  • 81. HTML5 JS APIs: Web Storage & SQL DB
    Offline data store
    Modified syntax for easy use
    http://slides.html5rocks.com/#slide7
    Web SQL
    Use full SQL syntax
    Supported in WebKit, Opera
    http://slides.html5rocks.com/#slide8
  • 82. HTML5 JS APIs: Web workers
    Enables multithreaded web applications
    Dramatic increase in app performance
    Before web workers, JS performance was dependent on single call/response thread.
    Server configuration
  • 83. HTML5 JS APIs: Web Sockets
    Very useful for messaging
    IM-style communications
    back and forth exchange in real time
  • 84. HTML5 JS APIs: Notifications
    System (browser) alert notifications
    Nicer presentation than alert()
  • 85. HTML5 JS APIs: Drag and Drop
    <olondragstart="dragStartHandler(event)">
    <lidraggable="true" data-value="violin">Violin</li>
    <lidraggable="true" data-value="viola">Viola</li>
    <lidraggable="true" data-value="cello">Cello</li>
    </ol>
    <script>
    varinternalDNDType = 'text/x-strings’;
    function dragStartHandler(event) {
    if (event.targetinstanceofHTMLLIElement) {
    event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
    event.effectAllowed = 'move';
    } else {
    event.preventDefault();
    }
    }
    </script>
  • 86. HTML5 related JS API: Geolocation
    http://www.standardista.com/html5/introduction-to-geolocation
  • 87. CSS3
    CSS3 organized into separate modules
    Easier to implement
    Some parts will be done before others
    Will be done when implementations exist and vendor extensions are no longer necessary
    But it’s OK to use vendor extensions:
    -moz-
    -webkit-
    -o-
    -ms-
  • 88. Browser support for CSS3
    WebKit browsers: Safari and Chrome have excellent support for CSS3
    Mobile WebKit makes particularly effective use of CSS3, including hardware acceleration in animation.
    Firefox (Gecko): Very good as of 4.0 beta, with some implementations in 3.5+
    Opera (Presto): Very good in recent versions.
    IE (Trident): Very good in IE9.
    Design for enhanced/extra functionality and design in browsers that support CSS3.
  • 89. CSS3 Color
    RGBa – adds the alpha value to RGB, any decimal value from 0 to 1 (.5 = 50%)
    HSL – hue, saturation, luminosity
    HSLa – HSL with an alpha value
    Opacity
    Gradients
  • 90. HSL
    <style type="text/css">
    div {
    width:30px;
    height:60px;
    float:left;
    border:2px outset #666;
    }
    div#red { background-color: hsl(0, 100%, 50%) }
    div#green { background-color: hsl(120, 100%, 50%) }
    div#blue { background-color: hsl(240, 100%, 50%) }
    div#black { background-color: hsl(0, 100%, 0%) }
    div#maroon { background-color: hsl(0, 100%, 35%) }
    div#pink { background-color: hsl(0, 100%, 80%) }
    div#white { background-color: hsl(0, 100%, 100%) }
    </style>
  • 91. HSLa & RGBa
    div#red { background-color: hsla(0, 100%, 50%, 1) } /* solid red */
    div#green { background-color: rgba(0, 255, 0, 0.7) }
    div#blue { background-color: hsla(240, 100%, 50%, 0.6) }
    div#black { background-color: rgba(0, 0, 0, 0.5) } /* gray 50% see-thru */
    div#maroon { background-color: hsla(0, 100%, 35%, 0.4) }
    div#pink { background-color: rgba(255, 153, 153, 0.3) }
    div#white { background-color: hsla(0, 100%, 100%, 0) } /* invisible */
  • 92. Opacity
    body { background: url(eagbd.gif) no-repeat; }
    div {
    width:30px;
    height:60px;
    float:left;
    border:2px outset #666;
    opacity: 0.7;
    }
    div#red { background-color: hsl(0, 100%, 50%) }
    div#green { background-color: hsl(120, 100%, 50%) }
    div#blue { background-color: hsl(240, 100%, 50%) }
    div#black { background-color: hsl(0, 100%, 0%) }
    div#maroon { background-color: hsl(0, 100%, 35%) }
    div#pink { background-color: hsl(0, 100%, 80%) }
    div#white { background-color: hsl(0, 100%, 100%) }
  • 93. Exercise №8: Color
    Make three uniquely-marked-up boxes using your favorite HTML5 element. (<div> is an HTML5 element>)
    Enter some text into each box.
    Color the background of the first box using HSL, the second box using HSLa, and the third using RGBa.
    Use absolute positioning to make the three boxes partially overlap and apply opacity to one or more of the boxes to make the box below it show through partially.
    Experiment with different values. What happens?
    How do the various browsers behave?
  • 94. Selectors
    Allow more fine-grained, conditional control over how elements are targeted.
    EXTREMELY useful for querySelectorAll();
    New patterns:
    General sibling combinator (GSC) ~
    Attribute matching selectors
    Pseudo-classes
  • 95. Markup for the GSC example
    <body>
    <h1>The Violas of Rome</h1>
    <p>It was the best of times, it was the worst of times. It was a dark and stormy night.</p>
    <p>Her heart was racing as she walked towards the stairs. No-one would play her viola again. The nightmares would end - tonight.</p>
    <h2>A soldier's tale</h2>
    <p>It all began many years ago, in a small hamlet by the seaside. Her cousins would knock at the door and they'd go into the village to see their aunt at the shop. Never in her life would she suspect that the hamlet would be the very place that they would come first - the druids that came in from the sea.</p>
    <p>That Saturday was Salame and Cheese night. Would she be able to tell her girlfriends the sad truth about her nightmares?</p>
    <aside>
    <p>As an aside, we should note that one should never trouble trouble unless trouble troubles you.</p>
    </aside>
    </body>
  • 96. General Sibling Combinator
    h1 ~ p {
    font-weight: bold;
    }
    h2 ~ p {
    font-style: italic;
    font-weight: normal;
    }
  • 97. CSS3 Attribute Matching Selectors
    E[instrument^="bass"] – selects any attribute beginning with the string “bass”.
    E[instrument$="bass"] – selects any attribute ending with the string “bass”.
    E[instrument*="bass"] – selects any attribute beginning with the string “bass”.
    String ‘bass’ – no pun intended… ;)
  • 98. Pseudo-Classes
    E:root – selects the root element. Not a big deal for HTML, but huge for styling XML where the root element may be unknown.
    E:nth-child(n) selects the “nth” child of the given element’s parent.
    The (n) part is an expression with a prototype of an+b, in which the “an” part defines the frequency of any repeating that may occur, and the +b part is a modifier that indicates on which order of the nodes the counting begins.
    The an part or the +bpart may each exist on their own, and the operator in between the two may be a plus or minus symbol.
    The keywords odd and even may be used as well.
  • 99. More Pseudo-Classes
    E:nth-last-child(n) – This pseudo-selector works just like E:nth-child in reverse, counting back from the last child.
    E:nth-of-type(n) – This pseudo-selector works similar to:nth-child, but only selects elements that are of the same type.
  • 100. E:nth-of-type example
    img:nth-of-type(2n+1) {
    float: right;
    margin-left:2em;
    }
    img:nth-of-type(2n) {
    float: left;
    margin-right:2em;
    }
  • 101. More pseudo-selectors (to check out later)
    E:nth-last-of-type(n)
    E:last-child
    E:first-of-type
    E:last-of-type
    E:only-child
    E:only-of-type
    E:empty
    E:target
    E:enabled, E:disabled, and E:checked
    E::selection
    E:not(s)
  • 102. Exercise №9: Selectors
    Write or steal some markup with repeated elements, such as a news article with several paragraphs, an unordered list, or a table.
    Use some of the new selectors you’ve just learned to create typographic styles. Don’t worry about aesthetics – the goal here is to experiment!
  • 103. Word wrap
    .broken { word-wrap:break-word; }
    .unbroken { word-wrap: normal; }
  • 104. CSS3 Text Shadows
    .quote {
    text-shadow: 2px 2px 4px #666;
    font-size:1.4em;
    }
    p.author {
    font-style:italic;
    text-shadow:
    hsl(280,100%,50%) 2px 2px 4px,
    orange 10px 6px 12px,
    hsla(140,100%,50%,0.6) -5px -3px 12px;
    }
  • 105. CSS3 Web Fonts
    @font-face {
    font-family: "BiauKai";
    src: url("http://www.example.com/assets/fonts/BiauKai.ttf")
    }
    html:lang(zh-tw) div.post { font-family: BiauKai, serif }
  • 106. CSS3 Web Font Services
    Font Squirrel http://www.fontsquirrel.com/
    TypeKithttp://typekit.com/
    FontDeckhttp://fontdeck.com/
    Fonts.com Web Fonts http://webfonts.fonts.com
    Google Font API http://code.google.com/webfonts
  • 107. Rounded Corners
    div {
    width:50%;
    background-color: #FFFEEA;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    border:1px solid red;
    padding:1em;
    margin-bottom:1em;
    }
  • 108. CSS3 Columns
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
  • 109. Box Shadow
    -moz-box-shadow: 6px 6px 14px #999;
    -webkit-box-shadow: 6px 6px 14px #999;
    box-shadow: 6px 6px 14px #999;
  • 110. Multiple Backgrounds
    background: url(openquote.png) 1% 5% no-repeat, url(closequote.png) 99% 96% no-repeat;
  • 111. Transitions
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-timing-function: linear;
    }
    div:hover {
    opacity: 0;
    }
  • 112. Transforms
    img {
    -webkit-transform: translate(20px, 80px) scale(2.5, 2.5) rotate(20deg);
    }
  • 113. Exercise №10: CSS3 Boxes & Text
    Create a page that uses CSS3 box and text features that you’ve just learned. Quotations are fun, or try something unique!
    Try the transform technique and view it in a WebKit browser
  • 114. Strategies for implementing HTML5 today
    Progressive enhancement
    Accessibility > validation
    Remy Sharp’s HTML5 Enabling Script:
    http://remysharp.com/2009/01/07/html5-enabling-script/
    Detect support for HTML5
    Mark Pilgrim’s chapter: http://diveintohtml5.org/detect.html
    HTML5 Boilerplate: http://html5boilerplate.com/
    When can I use… http://caniuse.com/
  • 115. Strategies for implementing CSS3 today
    Detect support for CSS3 using Modernizr: http://www.modernizr.com/
    Wide capability on mobile devices – iOS, Android, Pre, new BlackBerry, etc.
    Design using principles of progressive enhancement.
    Reject the notion that you need pixel perfect rendering across all browsers.
    IE6 visitors do not need rounded corners. They have other issues.
  • 116. Force IE standards mode+Chrome Frame
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • 117. When can I use...
    http://caniuse.com/
  • 118. HTML5 Boilerplate
    http://html5boilerplate.com/
    Cross-browser compatible, including IE6
    HTML5 ready. Use the new tags with certainty.
    Caching and compression rules for performance
    Drop in site configuration defaults.
    Mobile browser optimizations.
    Unit test framework built in.
  • 119. Exercise №XX: Use it now!
    Pick a solution such as Modernizr, HTML5 Boilerplate, the caniuse.com site, or the detection scripts from Mark Pilgrim’s book and create a web page or two that leverage implementable HTML5 and/or CSS3 today!
    What would you do to make your site friendly to mobile devices?
  • 120. HTML5 and CSS3 for Mobile Apps
  • 121. Where the money is at
    “The center of financial gravity in the computing world—the Center of Money—has shifted. No longer directed at the PC, the money pump now gushes full blast at the smartphones market.”—Jean-Louis Gasse, May 2, 2010, commenting on HP’s estimated operating profit from PCs at ~5% ($500M) vs. Apple’s estimated operating profit of 58% ($3B) from iPhones.
  • 122. Questions to consider
    What is the mobile web?
    Why is this important now?
    What trends are driving this importance?
    What opportunities do mobile devices present to use in science and information technology?
  • 123. What is the mobile web
    Web access via mobile wireless devices:
    Smartphones
    iPhone
    Palm Prē
    Android
    Modern BlackBerry devices
    PDAs & Other gadgetry (Kindle, iPod Touch, iPad, future tablets)
    Forget about low-end phones with claimed web access.
  • 124. Mobile Web Use Trends
    Explosive growth:
    Bango: Mobile web use in the US experienced three fold increase in 2007
    Juniper: Mobile web users will grow from 577 million in 2008 to more than 1.7 billion in 2013
    iPhone leading the way since launch of June 2007:
    AdMob: iPhone in 11/2008 became single most-used web device over any other handset
    Google 2/2008: Apple iPhone generates 50 times more searches than any other device
    Opera is most widely deployed mobile browser: ~54% market share
  • 125. Expect increased mobile web use
    March 2010: 71% of American smartphone users use their devices for web access.
    Some major sites reporting over 13% of their traffic coming from mobile devices
    Weather & Entertainment: often over 20%
    Web-enabled client apps are critical to the market.
    • 185,000 apps for iPhone App Store
    • 126. 53,000 for Android Market
    • 127. 5,000 for Nokia Ovi Store
    • 128. 2,000 for BlackBerry App World
    • 129. 1,500 for Palm webOS App Catalog
    Social networking dominates web+app use
    Global use > 40% for social networking
    USA, South Africa, and Indonesia register > 60% use (Opera, 5/2008)
  • 130. Advantages for mobile apps
    Convenience & Proximity: Always on, always near the owner.
    60% of mobile users keep their phones bedside at night.
    Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data.
    Location aware: GPS, accelerometers widely available.
    Media input: Most smartphones have built-in camera, microphone, speaker, keyboard.
    "An App for That": There are currently over 100K approved apps for the iPhone, and the rate of growth is phenomenal, more than the rate of growth for desktop software
    Cost: The cost of apps has been decreasing significantly and most of the most popular apps cost $1
    On the Go Messaging: Ability for users to send and receive messages from any location
    Data storage: Users are able to have a significant amount of personal and professional data at their fingertips.
    Airlines are allowing users to have e-tickets on their smartphones, these devices are replacing paper and credit cards to store information.
  • 131. Mobile Application Challenges
    Small screen size
    Navigation differences & usability
    Reduced functionality
    No Flash
    Slow Networks
    City congestion/canyons
    Major events (i.e. Superbowl)
    No 3G
    Lower processing capability
    Less CPU power
    Less RAM
  • 132. Use cases for mobile refactoring
    Public web presence
    Mobile users on your intranet (travel, time, information)
    Scientific applications
    Lab notes
    Notification & access to experiment data
    Collaboration
    Status & project management
    Mobile data distribution to field users, first responders
    Research using mobile data gathering, crowdsourcing
  • 133. Web apps vs. thick clients?
    Most applications do not need native device features.
    There are some very good reasons for native clients.
    Let’s weigh the pros and cons for each...
  • 134. Pros of thick clients
    Access to native hardware features not supported by web frameworks.
    Native performance benefits.
    Access to app stores for commercial/public distribution and one-click payment systems.
    Security can be scrutinized across entire data lifecycle.
    In the case of iPhone, Xcode + Cocoa Touch framework is an elegant and powerful programming environment.
  • 135. Cons of thick clients
    Have to develop proprietary, device-specific code.
    Have to work in proprietary SDKs.
    Have to work with languages such as Java or Objective-C.
    For iPhone development, have to use a Mac.
    For Blackberry development, have to use Windows.
    Slow development cycle.
    Difficult to deploy.
    Difficult to maintain - bug fixes are slow to propagate.
    Vendor lock.
    May not work on earlier or later OS versions or devices.
    Subject to SDK license agreements that can be restrictive.
  • 136. Pros of web apps
    Build applications using any text editor.
    Develop for any platform. No vendor lock.
    Use skills developers already know: HTML, CSS, JavaScript.
    Do not have to learn new proprietary languages or frameworks.
    Refactor existing web applications with minimal, inexpensive changes.
    Will work on earlier/later OS & devices
    Fix bugs and deploy in real time.
    Faster development cycle.
    For most apps, web functionality is plenty.
    Hardware-accelerated JavaScript and CSS3 animation and transition effects.
    Can avoid client-side storage and so local data won’t be compromised in case of device loss.
    Mobile web browsers are becoming more powerful and innovative, allowing for delivery of complex applications, tapping into features of mobile devices, and simplifying code development.
    Can leverage advances in W3C's Mobile Web Initiative
    Reduced software development costs.
    Free from proprietary SDK license agreement restrictions.
    Deploy any web app to a native client app platform using a simple wrapper (i.e. UIWebView in Cocoa Touch)
    Option to use PhoneGap to compile web apps as thick clients.
  • 137. Cons of web apps
    Can't access all hardware features of a mobile device such as the camera, microphone, accelerometer (But GPS can be accessed through JavaScript.)
    Must create your own payment system for commercial applications.
    Can be slow if there is extensive use of high-resolution images, HTML tables, or JavaScript.
    Beginning to see hardware JS & CSS3 acceleration.
    Subject to usual web-based security exploits.
  • 138. Recommendations on web apps vs thick clients
    Consider web apps first. Build web apps whenever possible.
    Begin with a web app, even if it is only basic functionality, and move to thick clients when necessary.
    Use PhoneGap to build web apps in HTML+JS and still take advantage of native core SDK features of iPhone OS, Android, webOS, Symbian, and BlackBerry: http://www.phonegap.com/
    Build dedicated thick clients only when you’ve exhausted all other alternatives.
  • 139. WebKit is the most used mobile platform
    Safari mobile = WebKit
    iPhone OS, Symbian, webOS, Android, and others.
    BlackBerry moving to WebKit now.
    Stats from Clicky® Web Analytics, May 2010
  • 140. Mobile web moving to WebKit & HTML5
  • 141. Opera
    Two flavors:
    Opera Mini – works on just about any phone, most common version
    Opera Mobile – more full-featured, works w/ PDAs running Windows Mobile and Symbian UIQ Touch
    Now defaults to ‘screen’ media instead of ‘handheld’ media type rendering, following WebKit
    Supports CSS3 media queries: http://www.w3.org/TR/css3-mediaqueries/
  • 142. WebKit
    Open source, lightweight codebase
    Dominant rendering platform across smartphone browser market.
    No support for CSS media type = ‘handheld’ – Instead uses media queries
  • 143. Browsers vs. Screen Sizes
  • 144. Developing on the desktop for mobile
    Use Opera in Small Screen mode for developing for handheld media
    Use iPhone SDK & Android SDK emulators for developing for WebKit
    Opera has a menu item to switch to handheld media.
    Firefox users can install the Web Developer Toolbar to switch to handheld media easily.
  • 145. Strategies for mobile web delivery
    User-agent sniffing
    CSS media types
    Separate site (m.yoursite.gov or yoursite.gov/m)
    Combinations of the above usually are most effective
  • 146. User-agent detection
    <?php
    function detectWebkit($query){
    $container = $_SERVER[’HTTP_USER_AGENT’];
    $useragents = array (
    'iPhone','iPod','Android','S60');
    $this->webkit = false;
    foreach ( $useragents as $useragent ) {
    if (eregi($useragent,$container)){
    $this->webkit = true;
    }
    }
    if($this->webkit) {
    // do something for the webkits
    } else {
    // do something for non-webkits
    }
    }
    ?>
    Variation and lack of standards mean constant chase as UA strings change
    PPK is gathering data http://twitter.com/ppk/status/56782351 & http://quirksmode.org/m/d/ to build stronger example.
  • 147. Separate sites or codebases
    Might mean a lot more code to maintain
    Improve situation in MVC using modified routes, controllers & views
    Can more effectively address constrained bandwidth through ruthless optimization
  • 148. Delivering mobile style
    The link method:
    <link rel="stylesheet" href="mobile.css" type="text/css" media="handheld">
    Applying handheld to an embedded stylesheet:
    <style type="text/css" media="handheld">
    div.foo { color: red; }
    </style>
    Using @media handheld to target handheld styles in embedded or external CSS:
    @media handheld { div.foo { color: red; } }
    Using @media handheld to import a mobile stylesheet:
    <style type="text/css">
    @import url(mobile.css) handheld;
    </style>
  • 149. Viewport and media queries
    WebKit assumes 960 pixels
    Reset that assumption:
    <meta name="viewport” content="width=640" />
    <meta name = "viewport" content="width = device-width">
    As mentioned, Opera and WebKit default to screen media but support media queries
    Use media query to reset width:
    <style type="text/css" media="only screen and (max-device-width: 480px)">
    div.layout {
    width:100%;
    }
    </style>
  • 150. Combine handheld and media query targets
    Add the handheld value to your media string:
    <style type="text/css" media="handheld, only screen and (max-device-width: 480px)">
  • 151. Mobile Refactoring Rule No.1
    Hide unneeded sections
    div#sidebar { display:none; }
    Or move them
    div#sidebar { float:none; }
  • 152. Mobile Refactoring Rule No.2
    Reset the content width
    div#layout {width:100%;}
  • 153. Abbreviate
    Reset wide text using the content property:
    img#masthead {
    content: attr(alt);
    font-family: cursive;
    }
    #sitenav a[href="http://natasha.example.com/cv/"] {
    content: "CV";
    }
    #sitenav a[href="http://natasha.example.com/cal/"] {
    content: "Events";
    }
    #sitenav a[href="http://natasha.example.com/av/"] {
    content: "A/V";
    }
  • 154. Design for a touch screen
    div#sitenav a {
    width:100%;
    font-size:2em;
    margin:0;
    border:1px solid #333;
    text-align:center;
    }
    Best touch screen height = 44px
  • 155. Nifty WebKit Tricks: Transforms & CSS3
    dl {
    opacity:0.25;
    -webkit-transform: skew(-30deg) rotate(-8deg) translate(-5em,-10em) scale(1.5);
    -webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5);
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in;
    }
    dl:hover {
    -webkit-transform: skew(0deg) rotate(0deg) translate(0,0) scale(1);
    opacity: 1;
    -webkit-border-radius: 20px;
    }
  • 156. Questions?
    ?
  • 157. Resources
    A List Apart – Return of the Mobile Style Sheet: http://www.alistapart.com/articles/returnofthemobilestylesheet
    Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/
    Google Android: http://code.google.com/android/
    Apple iPhone Developer: http://developer.apple.com/iphone/
    Designing with Opera Mini in mind: http://dev.opera.com/articles/view/designing-with-opera-mini-in-mind/
    Opera Mini emulator: http://www.opera.com/mini/demo/
  • 158. What you have learned
    Semantics and structure of HTML5
    How to insert SVG, MathML, <video>, <audio>, and <canvas>
    How to implement CSS3
    How to use HTML5 and CSS3 today!
    How to leverage HTML5 and CSS3 for mobile devices.
  • 159. HTML5/CSS3 Developer License
    You now have license to implement HTML5 and CSS3 today in your web work.
    You now have license to design using progressive enhancement, providing essential services for legacy users while delivering cutting-edge functionality for modern browsers.
    You now have license to not restrict yourelf to the chains of legacy browsers.
    You now have license to think ahead progressively for the future of your work.
    Congratulations!
  • 160. Thanks!!!
    Joe Lewis
    http://www.sanbeiji.com
    http://twitter.com/sanbeiji/