intro to html5 and css3

By Bald Basco

how?

How can you create an HTML5 page?

Change your first line of code to read:

<!DOCTYPE html>

Depreciated Tags

Removed since HTML 4.01

Acronym
Applet
Basefont
Big
Center
Dir
Font
Frame, Frameset, noframes
Strike
tt

Browser Support

Nearly all "established" HTML5 / CSS3 features are supported by the latest browsers

Chrome 25
Firefox 15
Safari 6
IE 10

Microsoft is a bit late to the party with IE 10, we will largely focus on IE 9 compatibility.

http://caniuse.com

http://fmbip.com/litmus

Backwards Compatibility

Typical browsers render unknown elements inline (i.e. display:inline)
IE 8 and older browsers do not apply any styling to unknown elements, even when rules/classes are explicitly set.
To hack compatibility thru IE6, use javascript to create a dummy element at the head of the document.
document.createElement('article');
Most Form elements degrade gracefully

Browser Market

Canvas Tag

From the Spec:

“a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

Think Etch-a-Sketch meets MS Paint
Allows you to create shapes, text, gradients and other effects strictly through Javascript
Manipulate images - clip & resize
Canvas Demo
KineticJS Demo

Video Tag

Videos used to require third-party plugins like Flash or Quicktime. The purpose of the Video tag is to add native support for videos.

Videos use different encoding techniques (codex) and formats. The three most common are:

Theora + Vorbis + Ogg (Free): FF, Chrome
H.264+AAC+MP4: IE, Safari, Chrome, mobile
WebM (Free): FF, Chrome, Android

Video Options

Include video controls with the "controls" boolean attribute, or create your own HTML controls using the Javascript API.
Other options include "autoplay" and "preload"

Codec Support

There is no single combination of codecs that work in all HTML5 browser.
Include multiple file types using the "source" tag. If the browser can't play that codec, it will move to the next "source" tag.
Finish with a Flash object.
HTML5 ignore all children that are not “source” tags, but a non-HTML5 browser will only recognize the Flash object

Video Example


<video width=”300” height=”300” controls>
	<source src=”vid.mp3” type=”video/mp4”>
	<source src=”vid.webm” type=”video/webm”>
	<source src=”vid.ogv” type=”video/ogg”>
	flash object
</video>

Geolocation

Provides information on where the user is.

Geolocation is Earth centric, so while it won't work on the moon, Astronauts on the ISS can get relative Longitude / Latitude.

Geolocation Accuracy

There are two levels of accuracy:

Low Accuracy - uses dumb techniques like cell towers and is accurate from once city block to a Kilometer in any direction. Great for general queries, like nearby theater.
High Accuracy - uses a device's GPS to provide position within a few meters. Can be very battery/power intensive.

Mobile devices often store separate values for each accuracy.

Geolocation Permission

The first time a page requests the user's position (via javascript), the browser prompts the user to ask if they would like to grant the permission. The resulting prompt is:

Non-Modal - users can switch tabs
Tab-Specific - stays only on that tab
Unconditional - Cannot be bypassed programmatically
Blocking - Pauses the page while waiting for an answer

Geolocation Method

navigator.geolocation.getCurrentPosition(callback, handle_error, opt)

Since the function is asynchronous (like an AJAX call), it requires a callback function. The data returned to that function is:

Latitude, Longitude (decimal degrees)
Accuracy (m)
Altitude* (m)
Heading* (degrees clockwise from North
Speed* (m/s)

* = optional data

Local Storage

A key-value store of up to 5 MB of data on the client side (i.e. the browser) that can persist longer than the current session.

All data is stored as a string, regardless of true type, so Floats can actually take more space than normal
There is a strict limit of 5 MB and no method to request more space. The limit is calculated for each "origin"
Origins: Data is restricted to a host and “scheme” (http/https) so data cannot be shared between sub-domains or even HTTP vs HTTPS calls

Cookies

Why not just use cookies?

Cookies are included in every HTTP request, adding uncessary traffic
Unencrypted cookies are a security threat
Cookies are limited to 4 KB of data, not enough to be really useful

History API

Allows you to manipulate the URL - and in turn the action of the back button - without actually reloading the browser.
Supported in all current browsers, but polyfils for IE9 and older could be a problem.
Kept as a global “history” stack in the “window”.

Web Workers

Spawns a new JS thread to run in the background. The child method can post messages back to the parent who can listen for a message event

Can be very useful for intense work or for multitasking processes.
Supported by all current browser except for the native Android Browser

var worker = new Worker(‘worker.js’);
worker.onmessage = handler_function;

Form Inputs

There are over a dozen new form inputs, almost all of which degrade gracefully all the way back to IE 6!

Email
URL
Tel (telephone)
Search
Number (spinner)
Range (slider)
Date - Chrome, Opera, iOS Safari
Color - Chrome, Safari

Most IMportantly

Mobile devices will customize the virtual keyboard based on these new input types.
Browser also provide basic authentication for "email", "URL" and "Tel" fields.
Add the "required" boolean attribute to prevent the form from submitting if no value is present
If the browser doesn't support the new type, it will show a plain text field.

<input type="email" required autofocus />

To sum up: there’s no downside to converting all your email address form fields to type="email" immediately. Virtually no one will even notice, except iPhone users, who probably won’t notice either. But the ones who do notice will smile quietly and thank you for making their web experience just a little easier.

CSs3

Allows for rich effects with lightweight code requirements, resulting in faster, cleaner pages. Basically acts as the Presentation Layer

CSS1 (late 1996) offered support for font properties, colors for backgrounds and text as well as alignments
CSS2 (1998) brought more capabilities like absolute, relative and fixed positioning, being replaced by CSS2.1 in 2005

CSS3

The specification was first developed in 1999 and is still considered to be under development, likely will never be finalized.
Marked a transition from a single Spec to a series of over 50 sub-documents (Modules)
The four major Modules are:

Media Queries (2012)
Namespaces (2011) - IE9+, no one cares
Selectors Level 3 (2011)
Color (2011)

mEDIA qUERIES

Allows for different classes and styles to be applied based on current environment settings such as screen size (max/min), device height/width, orientation, aspect-ratio, and resolution.
By grouping conditions together, you can establish a base set of rules to be used by non-compliant browsers.

@media screen and (max-width: 600px) { background:#FFF; }

<link rel=”stylesheet” media=”all and (orientation:landscpe)” href=”lscape.css” />

Selectors

CSS3 brings along some great new psuedo-class selectors that can be used in classes or as jquery selectors

:only-child
:empty - targets elements that have no children or text “<p></p>”
:nth-child(n) - choose an element based on it position relative to the parent
:first-child / :last-child
:not(s) - match elements that do not match the selector “s”

New Styles

RBG(A) / HSL(A): allow colors to be be defined as either RGB or Hue/Saturation/Lightness with an optional Alpha (opacity)

background: hsl(207, 38%, 47%);

Text Shadow - Creates a drop-shadow effect on text

text-shadow: #555 4px 4px 4px; 
/* color, h-offset, v-offset, blur */

Box Shadow - similar to Text Shadow, applies a drop shadow to an element

box-shadow: #000 10px 10px 10px 3px; 
/* color, hoff, voff, blur */

More Styles

Border Radius - creates rounded corners to a container

border-raidius: 10px 11px 12px 13px;

Multiple backgrounds - allows for multiple images to be used on a single element

background: url(img/a.jpg) center center, 
  url(img/b.jpg) top left repeat;

Opacity - apply transparency to an element

opacity: .4;

IE10+ Styles

Multiple Columns - split text into multiple columns like in a newspaper

column-count: 3; column-width: 100px; column-gap: 20px;

2D Transformations - scale, move, turn, spin and stretch elements
3D Transformations - rotate elements on the x/y/z access
Transitions - Specify the the length of time for a css change to take effect

transition: width 2s, height 2s;

Animations - check out GreensockJS

There's more?!?

Placeholder Text
Form Focus
Web Sockets
Offline (Cache Manifest)
Semantic Elements
section, nav, article,
aside, header, footer