html5 & css3 -- upa iowa

<title> HTML 5 & CSS 3</title>

HTML Pre-HistoryGeneral Markup Language

(GML) was developed at IBM in the 1960's by

Charles F. Goldfarb

:h1.Chapter 1: Introduction :p.GML supported hierarchical containers, such as :ol :li.Ordered lists (like this one), :li.Unordered lists, and :li.Definition lists :eol. as well as simple structures. :p.Markup minimization (later generalized and formalized in SGML), allowed the end-tags to be omitted for the "h1" and "p" elements.

http://www.sgmlsource.com/history/roots.htm

HTML Pre-HistoryStandard Generalized Markup Language (SGML) was derived

from GML in the 1980's.

SGML was the pre-cursor to both HTML and XML.

SGML defined the user of angle brackets for tags. <example>

HTMLHyper Text Markup Language (HTML) was first defined by

Tim Berners-Lee in 1991

Original HTML had 20 tags and displayed simple text with basic

markup for formatting.

HTML 2, 3, and 4HTML 2 added many of the

attributes we know today such as images, forms, input.

HTML 3 added new tags that had been part of minor revisions.

HTML 4 extended the number of tags. Currently most HTML is

4.01

CSS HistoryCSS 1 was proposed in 1995 as a

way to style documents. It contained descriptions for font,

background and other style tags.

CSS 2 is the version we currently use added positioning and other

elements.

Web Usability ThenMid-Late 1990's web forms started to show up with web

applications.

Late 1990's JavaScript added further interaction.

2000's AJAX and Flash started to

provide richer internet applications.

Web Usability NowIncreased emphasis on making the web as rich an interface as

native applications.

The mobile web is the next frontier.

Current Technologies are dated and are hindering growth.

HTML 5 and CSS3 to the Rescue

HTML5 and CSS3 are the next generation of markup that will

drive the web.

What is the difference between HTML4 and HTML 5?

Structure Tags<header> - Header <nav> - Navigation, Menu (Primary Navigation)<section> - Seperation Element <article> - Article Content<aside> - Sidebars, Widgets, Misc non primary content <footer> - Footer

<header> and <footer> tags may be used multiple times. Example in Sections, and in the main page.

Structure<header>

<nav>

<section> <aside>

<footer>

<header><article>

<footer>

New Inputs

* tel (Telephone) * search * url* email* datetime* date* month* week* time* datetime-local* number * range (slider)* color

Inputs Mobile Display

Tel Number

Email

Canvas<canvas>

Create a virtual canvas for drawing graphics in the browser.

Javascript can be used to control graphic rendering via the canvas.

x,y coordinate system

Canvas Example

APIsDrag and Drop - Provides an API for Drap and Drop for JavaScript

Geolocation - Determine Location of The User via the Browser

Offline Storage - Browsers will support local storage. The API

will be SQL like.

APIsHistory API - Access Browser

history via JavaScript.

<contenteditable> - Enables a Content Editing API

Web Workers - Background Tasks for JavaScript

MultimediaNative Multimedia Support

No Plugins Necessary

<Video> - Native Video

<Audio> - Native Audio

YouTube HTML5 Beta

Available for Chrome and Safari

Other Controls<Progress> Displays progress of

a task or action completed.

<meter> Displays measure of something.

<Output> For output of calculation or output of a script.

CSS3

New Stylesborder-radius - Rounded Cornersborder-colors - Gradient Bordersbox-shadow - Drop Shadowstext-shadow - Text Drop Shadowsgradient - Gradient backgroundsresize - Resize an Elementbackground-size - resize backgroundbackground - supports multipe images

Examples

SelectorsA Variety of Selectors provide an

interface to apply styles more precisely.

An example would be selecting an nth child.

Example: div:nth-child(3) {}

ColumnsMulti Column Layout is now

provided by CSS3

Animation and MotionAnimations - CSS3 allows for

animations of styles

Transitions - Allows styles to change gradually color shifts

Transformations - 2D and 3D transformations, stretch, move,

etc

Examples

MiscMedia Queries - Provides for

ways to specify styles based on viewport size.

When?

HTML5 - Canidate Stage in 2012

CSS3 - Still in Working Draft

What about that Gorilla?IE 6 and other legacy browsers

are preventing progress.

IE9 has some HTML5 support.

Benefits of HTML5 & CSS3Rich Interface elements not

requiring third party plugins.

Seperation of content and design

Enhanced Mobile Support

New Programming Interfaces

The Critics SayHTML5 will not get rid of Flash

HTML5 doesn't use XML Syntax

Too many tags / Tag Soup

The FutureCurrent mobile browser technology will be the next battle ground.

HTML5 and CSS3 will even the odds with supporting more and

more platforms.

The web will no longer be a second class user interface.

Referenceshttp://en.wikipedia.org/wiki/HTMLhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.htmlhttp://tools.ietf.org/html/rfc1866http://www.w3.org/People/Raggett/book4/ch02.htmlhttp://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/http://www.w3schools.com/html5http://bluefaqs.com/2010/03/understanding-the-basics-of-css3/http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/http://www.css3.info/webkit-announces-support-for-css-3d-transforms/http://www.css3.info/http://images.appleinsider.com/html5.091909.001.png

HTML 5 and CSS3 Demoshttp://www.zurb.com/article/221/css3-animation-will-rock-your-worldhttp://www.fofronline.com/2009-04/3d-cube-using-css-transformations/http://www.1stwebdesigner.com/development/50-awesome-css3-animations/http://html5demos.com/http://www.romancortes.com/blog/pure-css-coke-can/http://9elements.com/io/projects/html5/canvas/ http://www.zachstronaut.com/lab/isocube.htmlhttp://www.dotcodedump.com/HTML5/triangle.html <-- My Canvas Example