Three principle of html5

1. don’t break the web
   • XHTML 2 broke the Web because it demanded an immediate, dramatic shift in the way web pages were written (and it fail)
   • compatible, support degrade on new element
2. pave the cowpaths
   • embracing a widely supported but poorly designed feature
   • standardize some common use case
3. be practical
   • Change base on usage and requirement

DOCTYPE

It is used to set up quirks mode. The browsers render the page with buggy rule for to make the page behave same as some old buggy browser.

HTML5 loosened rules

• Case insensitive
• Ignore closing slash from a void element (empty element)
• Don’t need quotation mark in attributes (must have no special char (which need to be escaped))
• Attribute with no value is allowed (checked)
  Suggestion:
• Always include , and

Three tools to help writing HTML

• can i use
• browser usage
  • http://gs.statcounter.com
  • Using google analystic the track your visitor can give more precise information
• feature detection

Make old browser support HTML5

• Add display: block; to HTML5 new tag
• Use Google’s html5shim

Site with the Semantic elements

• Header
  • It may overlay with the task of <h1>, <header> is useful when there are title have sub-title, author and other meta data.
• Sidebar
  • Consider sidebar as nav bar, we can put <aside> inside <nav>
  • Sidebar contains different section, we can put <nav> inside <aside>, more suitable to use when the sidebar is complex.
• <section>
  • Small blocks of content
  • Small contained content that can’t really be described as an article, like a customer billing record or a product listing.
  • Groups of content
  • A portion of a longer document
• Collapsible boxes
  • Use <summary> as clickable header and <details>
• Footer
  • common feature
    • Fixed positioning
    • A close button
    • A partially transparent background
    • Animation
  • We can be use a div with id to split the standard footer
  • If there are multiple section, we can use <aside>
• <main>
  • New element introduced in HTML5.1
  • Same level as <header> and <footer>
  • It holds the page’s full main content, it cannot be put inside any other semantic element.

Notice the scope of tag, if there is a

HTML5 outline System

• Search engine use this to build a better page preview
• Can be used as quality assurance tool
• Many developer ignore this
• In HTML 5, there can be more than one <h1>.

Text-level semantics

Besides page-level semantics mentioned before, there are 3 text-level semantics elements

• <time>
  • datetime attribute
    • YYYY-MM-DD
    • HH:MM
  • pubdate
    • Publish date
• <output>
  • Show javascript output
• <mark>
  • Represent a section of text that’s highlighted for reference

Accessibility

• ARIA
  • Accessible Rich Internet Application
  • role attribute
• REFa
• Microformat
• microdata

Some interest new feature in HTML5

• ‘auto-complete’ attribute in form input
• ‘require’ and ‘optional’ attributes in form input
• <datalist> element in form
• <meter> and progress elements
• ‘content-editable’ and ‘design mode’ attributes

Audio and Video

Internet become a place for entertainment from sharing academic research. Better supports on video and audio are introduced in HTML5

• Does not have any copy protect system, any one can download.
• Digital rights management is developing in HTML5.1
• current positioning of video (currentTime)
• play speed (playbackRate)
• download progress (seekable)
• The book say no HTML5 only solution for web chat
  • How about web RTC?
• lazy loading
  • Use preload attribute, but some old browser does not pay attention on it
• media group
  • sync different video and audio
• video subtitle
  • WebVTT, SRT, TTML
• There are lots of other stuff to handle, better use video player library instead of building our own.

CSS3

• browser does not support rgba will not fallback to rgb automatically
• vendor prefix:
  • let developer to use new feature and give feedback
  • tell developer the style rule may change in the future
• ‘Sliding door’ technique:
  • Create a resizable image by breaking it into 3 piece: left, middle and right.
  • The middle one will repeat.
• Transition support:
  • transparency
  • shadow
  • gradients
  • transforms
    • move
    • scale
    • skew
    • rotate
• Column layout
  • The layout used in newspaper
  • Properties:
    • count
    • width
    • span
    • rule
    • gap
• Responsive web design
  • Two types
    • fluid
    • fixed
  • Fluid typography
    • Two ways to implement
      • percentage
      • em (more popular)
        • em is a unit from print typography
    • calc() can combine fluid and fixed design
    • Use em for margin, border and padding to make the layout match the font size
    • Handle multiple level responsive typography
      • em inherit size from parent element
      • rem (root em) specific the absolute size

Viewport

• Prevent mobile browsers not to perform their automatic viewport scaling.
  • I guess view desktop version will ignore the viewport tag

Media query

• width
• height
• device-height
• orientation
• device-aspect-ratio
• device-pixel-ratio
  • CSS pixel vs screen pixel
• color
  • Query number of bits of color coding is used by the device

Mobile first design

• default mobile, extra for desktop
• TODO: read
  • https://blog.intercom.com/why-mobile-first-may-already-be-outdated/
  • https://codemyviews.com/blog/mobilefirst
• hidden content will still be downloaded (also images!)
• using media attribute in link tag can replace whole css script
• media also work for <video> element
  • load different resolution in different device

Canvas

• require javascript
• for graphically advanced applications
  • games
  • mapping tools
  • dynamic chart
  • current only support 2d drawing
  • no semantics or accessibility (check the current)
    • seems some new rules added in 2015
  • can be used to copy image from video
  • have fill function

Webapp

Web storage API

• may fail if open in loacl file (some browser link storage to domain name)
• storageChanged event
  • can sync different tabs

File API

• To use the API, need to get file from
  • input or
  • drag and drop
• Can read file content
• Can read multiple file by adding multiple attribute to input element
• Drag and drop need the to readAsDataURL() method, also drag and drop event

IndexedDB (web SQL database)

• for offline applications
• enhancing performance
• improving local storage
• transaction is very important in indexedDB
  • because the task will be interrupted easily (user close the page)
  • can transaction have multiple operations?

Running webapp offline

• Use manifest file
  • let browser know to download the manifest file by modify the web page
  • configure the web server to serve manifest files
  • don’t cache the page with query string
  • may turn off the caching for manifest files
  • support >= IE 10
  • browser may request user’s permission to download the file
  • update when user visit the page next time
  • may need to clear browser cache when testing
  • beware the space limit
    • mobile <= 50MB
    • desktop <= 250MB
  • SETTINGS only work in firefox
  • FALLBACK can be use with javascript to check browser is online or not
• Trigger update
  • manifest cannot be cached
  • manifest file need a new date (last-updated timestamp)
  • New content in manifest
    • may have a line of comment to specific the version
  • Need to specific the file to download when online (cached file default not downloaded)
• Traditional cache vs offline application (need more research)
  • controlled by cache-control headers and time limit vs controlled by manifest

Server sent event

• Server trigger the send data action to client
• one way communication
• IE does not support
• Difficult to handle in server side, need to check the web server framework support it or not

web socket

• Two ways communication
• Computer network setting may block web socket
  • Proxy server (if any) may drop the socket connection
• web socket server need to handle lots of complex stuff

Geolocation

• It is not part of HTML5
• Require user permission
• may not accurate
• geolocation can help debugging

Web worker

• worker can only run code save in a separated file
• communicate with postMessage()
• can we have multiple workers?

History management

• Sync url when updated the content with ajax
• Solve bookmarking the ajax page problem
  • The old solution is using hashbang URLs
• Why give up hashbang solution
  • complex url
  • inflexibility (cannot use hash)
  • no SEO
  • Cool URLs matter