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>

New Features / Tags

  • Canvas
  • Video
  • Local Storage
  • Websockets
  • Web Workers
  • Semantic tags
  • Form Inputs
  • Geolocation
  • Cache Manifest
  • History API
  • Over 50 additions

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.



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:

  1. 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.
  2. 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?

  1. Cookies are included in every HTTP request, adding uncessary traffic
  2. Unencrypted cookies are a security threat
  3. 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:
  1. Media Queries (2012)
  2. Namespaces (2011) - IE9+, no one cares
  3. Selectors Level 3 (2011)
  4. 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;






There's more?!?


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

The end





thanks!

intro to html5 and css3

By jamesbasco

Made with Slides.com

intro to html5 and css3

  • 792

More from jamesbasco