HTML5: Associated Technologies

Geolocation API

• Build location-aware applications.
• Doesn’t use IP Addresses.
• Opt-In
• navigator.geolocation: global navigator object
  • getCurrentPosition() : single-shot method to return location data
  • watchPosition() : tracks location data over time
  • timestamp
  • coords
    • latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed

Webstorage API

• Instead of cookies (small amount of data) or server-side storage (slower)
• Stores data in key/value pairs and can store up to 5mb
• Session Storage: Stores data for a single session in a single window
• Local Storage: controls data that’s in more than one window and more than one session

WebSockets

• Bi-directinoal client server connection
• Browser native

CSS3

• CSS3 specification is split off into Modules: Selectors, Fonts, Colors…etc
• Improved element and content targeting
• Allow for new styling options like drop shadows and opacity
• Improved support for fonts
  • @font-face lets you directly reference fonts

Encoding Video (for HTML5)

If you don’t have video editing tools available, these are great free open-source tools:

• Firefogg.org has a plug-in for firefox that can encode to Ogg codec. (ogv file)
• HandBrake can encode to H.264 mp4.

HTML5 Video

HTML5 video support means Flash is no longer the default choice when distributing video over the web. Native video support means:

• No need for 3rd party plug-ins.
• Cross-browser compliance
• Current specification does not declar a standard video codec (H.264, VP8, OGG Theora)

<video src=”myVideo.mp4″ width=”320″ height=”240″ controls preload=”false”></video>

• controls: adds play, pause, button, volume slider

To ensure a browser will play the video, the video can be defined with multiple video sources using different codecs:

• <video width=”320″ height=”240″ controls preload=”false”>
  <source src=”video1.mp4″ type=”video/mp4″ />
  <source src=”video1.ogv” type=”video/ogg” />
  </video>
  

HTML5 Drag & Drop API

Unlike Canvas, the Drag & Drop API implementation isn’t consistent across different browsers.

In general, drag & drop works like this…

• Define an object as being draggable
  • <img src=”cat.jpg” draggable>
  • links and images are draggable by default. IE restricts draggable elements to links and images (hrefs only).
  • Draggable elements can be copied, moved, or linked.
• Define a drop target
  • <image class=”droptarget” ondragenter=”dragEnterHandler(event)” ondragover=”dragOverHandler(event)” ondrop=”dropHandler(event)”>
  • ondragleave is optional
  • dataTransfer.setData(“text/plain”)
  • dataTransfer.getData(“text”)
• Use the API to handle the interaction between the two.

 

HTML5: Canvas tag and Canvas API

The new <canvas> element in HTML5 lets you draw within the browser. It has it’s own set of specifications.

<canvas id=”myCanvas” width=”600″ height =” 300″> Your browser does not support canvas. Please upgrade your browser </canvas>

• id: allows scripts to identify which canvas to draw on
• width & height: how big to make canvas
• text within tags: fall back content. Dont’ use as alt tag. don’t use as accessibility content.

To draw in the canvas, use the Canvas 2D API as part of a javascript function

• beginPath()
• moveTo(): Moves to a specified point on the canvas
• lineTo(): Defines a line from the previous point
• stroke(): Draws the line and stroke
• closePath()
• drawImage()
• beginPath(x coordinate, y coordinate),
• fillRect(),
• fillStyle()
• lineWidth=4 ;
  • lines are drawn with the path at the center. half of the width will fall one either side, so try to use an even number
• lineJoin=”round”;
  • Round, bevel or miter are the options
• strokeStyle=”#CCCCCC”;

• can be used to animate, re-size, move…etc
• Write as part of a javascript function.

HTML5 Forms

HTML5 has many improvements for forms! Now you don’ t have to use javascript for a lot of the functions… as soon as all browsers support it.

Input Types

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range : a range of numbers
• reset
• search
• submit
• tel
• text
• time
• url
• week

Auto Focus

<input type=”text” name=”name” id=”name” tabindex=”10″ autofocus>

Placeholder Text

<input type=”text” name=”name” id=”name” tabindex=”10″ placeholder=”place holder text here”>

Form Validations (Required Fields)

<input type=”text” name=”name” id=”name” tabindex=”10″ required>

Numbers

<input type=“numbers” name=”howmany” id=”howmany” tabindex=”10″ min=”1″ max=”10″ value=”1″>

• Step = increments value
• max = maximum number
• min = minimum number
• value = default number value

Date Pickers

<input type=“date” name=”name” id=”name” tabindex=”10″ min=”1″ max=”10″ value=”1″>

• input type=”date” : gives you a calendar
• input type=”month” calendar with month pull down menu
• input type=”week” calendar with week pull down menu
• input type=”datetime”  calendar with a time picker
• input type=”datetime-local”  date time with no time-zone offsetl
• input type=”time” no calendar, just a time picker

HTML5 Doctype and Character Encoding Declarations

HTML5 makes it easy to start off your document. No more messy and long winded doctype and character encoding declarations!

ID and Class Attributes for HTML5

id and class attributes remain the same in HTML5 as in HTML4:

• global attributes: can be applied to any tag
• id value must be unique per page
• classes can be used as often as needed, use values that describe content

They can be used less often now, because of all the new tags available. and div tags can be used less often too.

Content Models for HTML5

HTML4 Content is divided into block elements and inline elements, like this:

• Block Elemnts: div, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, table ul
• Inline Elements: a, em, img, input, label, span, strong

With HTML5, there is an emphasis on semantics and structural tagging, thus, the content model looks like this:

Content Model	Descriptions	Tags
Metadata	Sets up the presentation or behavior of the rest of the content	base, command, link, meta, noscript, script, style, title
Embedded	Any content that imports other resources into the document	audio, canvas, embed, iframe, img, math, object, svg, video
Interactive	Content specifically intended for user interaction	a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video
Heading	Defines the header of a section, which can either be explicitly marked up with sectioning elements, or implied by the heading content itself	h1, h2, h3, h4, h5, h6, hgroup
Phrasing	The text of the document, as well as elements used to mark up the text within paragraph level structures. kind of like inline elements in HTML4	a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map,mark, math, meta, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr
Flow	Elements that would be included in the normal flow of the document. Anything between the body tag.	a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2 ,h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strongn, style, sub, sup, svg, table, textarea, tme, ul, var, video, wbr
Sectioning	Content that defines the scope of headings and footers	article, aside, nav, section

Notice that a lot of content types overlap, and are related. Almost all content is part of the flow content.

Deprecated Elements for HTML5

HTML5 wins out over XHTML2 because it’s designed to be backwards compatible with HTML4. In HTML5, these deprecated elements are not to be used by authors, while implementers (user agents, browsers) must still provide support for these elements. Do not use these tags:

Bad because they are presentational tags:

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Tags with accessibility concerns:

• frame
• frameset
• noframes

Tags with low usage:

• acronym
• applet
• isindex
• dir

Tag attributes that are removed:

• a, link : rev, charset
• img : longdesc, name
• html : version
• th : abbr
• td : scope
• all block level : align
• body : background
• img : hspace, vspace
• table, tr, th, td : bgcolor
• table : border, cell padding, cell spacing, valign
• td, th : height, width

A note on div tags

• The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to markup semantics common to a group of consecutive elements. Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.