HTML5

+ some CSS3 and JavaScript

Some Inspiration

The Wilderness Downtown

Tim Aidlin

Tim has been working as a professional designer for over 10 years and has designed experiences for clients such as Microsoft, Hasbro, NBC, HP, The Bill and Melinda Gates Foundation, and others.

He currently is focused on emerging web-standards such as HTML5 + CSS3 and designing applications for touch and mobile devices. He can be found online at http://thunderkick.us or on Twitter @systim.

Specialties

10+ years design and production experience
User-Interface & User-Experience expertise
Client engagement, presentations, and project management
Front-end development experience working with teams of designers and developers to create next-generation experiences.
Public-speaking and demonstration experience

Technology

HTML5, CSS3 & some JavaScript
Microsoft Expression Blend / WPF Design
Adobe Photoshop / Illustrator / InDesign / Flash / Dreamweaver

thunderkick.us

Examples

Who Should Care?

Why should you care?

Want to work on more than one platform?

What started it, really

So, who's makin' the call?

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web. Below we discuss important aspects of this mission, all of which further W3C's vision of One Web.

W3C Principles

Web for All

The social value of the Web is that it enables human communication, commerce, and opportunities to share knowledge. One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability.

Web on Everything

The number of different kinds of devices that can access the Web has grown immensely. Mobile phones, smart phones, personal digital assistants, interactive television systems, voice response systems, kiosks and even certain domestic appliances can all access the Web.

What Is HTML?

The Wikipedia Definition

“HTML, which stands for Hypertext Markup Language, is the predominant markup language for web pages.

HTML is the basic building-blocks of webpages.” -- Wikipedia

Maybe better defintion of HTML

“HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.” -- W3C

HTML Tags

“HTML is text tags, enclosed in angle brackets (like <html>), within the web page content.

<p>

The <p> tag defines a paragraph.

The p element automatically creates some space before and after itself.
The space is automatically applied by the browser, or you can specify it in a style sheet.

<ul>

The <ul> tag defines an unordered list (a bulleted list).

<div>

The <div> tag defines a division or a section in an HTML document.

The <div> tag is often used to group block-elements to format them with styles.

HTML Tag Pairs

HTML tags normally come in pairs like <h1> and </h1> … called opening tags and closing tags …

In between these tags web designers can add text, tables (!), images, etc..”

"The Experience Layer"

CSS

“Web browsers can also [in addition to HTML] refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material.

The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup.”

JavaScript

“It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.

Browsers

“The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.”

Browser compatibility

Which browsers support HTML5?

http://www.findmebyip.com/litmus

Keep it in perspective

Designing for Modern Browsers

Stop worrying about Internet Explorer 6
Design for modern browsers
Gracefully degrade for less-than modern browsers
Seriously, stop worrying about Internet Explorer 6

Graceful Degradation

Accommodate the obsolete

Plan for browsers to support HTML5 and design appropriately.
Keep in mind some browsers may behave differently, especially older browsers.
It’s okay for websites to look or behave differently from browser to browser, platform to platform.
Design your technology to degrade while still giving the user a delightful experience.

Progressive Enhancement

Design for the lowest common-demoninator and add enhancements for browsers that can support it.

Dumb.

Metrics & Analytics

CrazyEgg

crazyegg.com

Just use Crazyegg. It's awesome, easy, and will totally impress your bosses, clients, or whatever.

Additional Options

http://webtrends.com/
http://www.google.com/analytics/
http://www.omniture.com/en/
(Adobe)

WordPress plugins

Google Analytics
http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
Smashing Analytics
http://wordpress.org/extend/plugins/smashing-analytics/
GoDaddy Site Analytics Plugin
http://wordpress.org/extend/plugins/site-analytics/

Getting Started

Set up your directory-structure

Try a template / framework

Get your browsers and update 'em so you can test your work

HTML Markup Editing Software

Markup

What makes for beautiful HTML5?

http://css-tricks.com/what-beautiful-html-code-looks-like/

HTML5
HTML5 and it's new elements make for the most beautiful HTML yet.
DOCTYPE
HTML5 has the best DOCTYPE ever
Indentation
Code is indented to show parent/child relationships and emphasize hierarchy.
Charset
Declared as first thing in the head, before any content.
Title
Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
CSS
Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
Body
ID applied to body to allow for unique page styling without any additional markup.
JavaScript
jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
File Paths
Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
Image Attributes
Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
Main Content First
The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
Appropriate Descriptive Block-Level Elements
Header, Nav, Section, Article, Aside... all appropriately describe the content they contain better than the divs of old.
Hierarchy
Title tags are reserved for real content, and follow a clear hierarchy.
Appropriate Descriptive Tags
Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
Common Content Included
Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
Semantic Classes
Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. "col" is much better than "left")
Classes
Are used any time similar styling needs to be applied to multiple elements.
IDs
Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
Dynamic Elements
Things that need to be dynamic, are dynamic.
Characters Encoded
If it's a special character, it's encoded.
Free From Styling
Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
Comments
Comments are included for things that may not be immediately obvious upon reviewing the code.
Valid
The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

The new <head>

New Easy Doctype!

Doctype?

Um, yeah.

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.[1]

What the Doctype really is

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

DOCTYPE?

HTML4 Doctype

				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
				<html>
				<head>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
				<title>Untitled Document</title>
				</head>
				…

Way Easier

HTML5 Doctype

				<!DOCTYPE HTML>
				<html>
				<head>
				<meta charset=“utf-8">
				<title>Untitled Document</title>
				</head>
				...

Adding Links and Scripts

Scripts

HTML5

<script src=“js/javascript.js”></script>

HTML4

<script type=“text/javascript” src=“js/javascript.js”></script>

Links

HTML5

<link rel=“stylesheet” href=“css/styles.css”>

HTML4

<link rel=“stylesheet” type=“text/css” href=“css/styles.css”>

The <body>

Meaningful New Tags

<header>

<nav>

<article>

<section>

<aside>

<footer>

New Tags: <header>

The <header> tag specifies an introduction, or a group of navigation elements for the document.
w3schools.com/html5/tag_header.asp

The <div> way

			<div id=“header”>
			  <a href=“index.html”><img src=“logo.jpg”></a>
			</div>

The HTML5 way

			
<header>
  <a href=“index.html”><img src=“logo.jpg”></a>
</header>

New Tags: <nav>

The <nav> tag defines a section of navigation links.
w3schools.com/html5/tag_nav.asp

			<header>
  <a href=“index.html”><img src=“logo.jpg”></a>
  <nav>
    <ul>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
    </ul>
  </nav>
			</header>

New Tags: <article>

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

			<article id="hero">
			<section id="slideshow">
			…
			  </section>
			<section id="search">
			…
			</section>
			</article>

New Tags: <section>

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

			<article>
			<section>
			<H1>This Is The Section Header</H1>
			<H2>Subheading for the section</H1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus lorem, malesuada et ullamcorper id, dignissim non mi. Donec id nunc ligula. Aliquam varius rutrum felis, ac sollicitudin metus pulvinar id. Maecenas vitae dui id nisi porttitor imperdiet nec nec turpis. Mauris sagittis posuere aliquam. Morbi neque elit, porttitor at viverra id, varius eu purus
            <p>
            </section>
            </article>

New Tags: <aside>

The <aside> tag defines some content aside from the content it is placed in.

The <aside> content should be related to the surrounding content and could be placed as a sidebar in an article.

			<article>
			<section>
			<img src=“…”>
			<figcaption>Awesome</figcaption>
			</section>
			<aside>
			<ul>
			<li>Related Link 1</li>
			<li>Related Link 1</li>
			<li>Related Link 1</li>
			</ul>
			</aside>
			</article>

New Tags: <figure> & <figcaption>

<figure>

<figure> is best-used around images and diagrams, etc ... it's especially useful when you'd like to add a caption or when using something code-based like a <canvas> or embedded .svg code.

The content of the figure element should be relevant to the main content, but if removed it should not affect the flow of the document.

<figcaption>

The <figcaption> tag contains a caption for the <figure> tag and should be placed as the first or the last child of the <figure> element.

			<figure>
			<img src="link-image.svg" alt="This is a link" />
            <figcaption>A view of the pulpit rock in Norway</figcaption>
			</figure>

New Tags: <hgroup>

The <hgroup> tag specifies the heading of a section or a document.

The <hgroup> element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.

			<hgroup>
			<h1>Welcome to my WWF</h1>
			<h2>For a living planet</h2>
			</hgroup>

New Tags: <time>

The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.

Using the <time> tag are a way of adding extra semantic information to a webpage. Result: Search engines can produce smarter search results.

			We open at <time>10:00</time> every morning.

            I have a date on <time datetime="2008-02-14">Valentines day</time>.

New Tags: <footer>

The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.

			<footer>
             This document was written in 2009.
             <nav>
             ...
             </nav>
             </footer>

Old tags with new uses

You can totally still use <div>

			<div id=“container”>
			<header>
			<a href=“index.html”><img src=“logo.jpg”></a>
            <p>
            Here's a tagline or something.
            <p>
			</header>
            This is a special link or something that's associated with this part of the site.
			</div>

Tags with new uses: <a>

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

The <a> tag can now wrap multiple elements.

			<header>
			<a href=“index.html”>
			<section id=“logo”>
			<img src=“logo.jpg”>
			</section>
			I'm a sub-header that's linked and wrapped in an a tag with other elements.
			</a>
			</header>

Tags with new uses: H1

H1 is the Most Important Phrase or Sentence on Your Page

If you think of a Web page as an outline, the H1, H2, etc. heading tags serve to divide the page into sections. Your most important headline is your H1 headline.

BUT, with HTML5, you can now have multiple H1 tags on your page, generally contained within the <header> tags. You can also use multiple <header> tags.

http://webdesign.about.com/od/seo/a/why_use_h1_for_seo.htm

Tags with new uses: <address>

The <address> tag defines the contact information for the author or owner of a document.

If the <address> element is inside an <article> element, it represents the contact information of the author/owner of that article.

The address element is usually added to the header or footer of a webpage.

			<address>
			Address: Box 564, Disneyland<br />
			Phone: +12 34 56 78
			</address>

Microformats

Microformats are completely awesome

microformats.org

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

People

			<div class="vcard">
			<a class="url fn" href="http://thunderkick.us">Tim Aidlin</a>
			<a class="url fn org" href="http://thunderkick.us">Thunderkick</a>
			</div>

Calendars & Events

			<div class="vevent">
			
            <span class="summary">Tami's Birthday</span> on <span class="dtstart">2005-06-20</span> at the Supernova Conference in <span class="location">San Francisco, CA, USA</span>.
			</div>

A way to use Microformats: Oopmph

Notice the gleam in the upper-left corner

Here's Oomph expanded to show the Microformats on the page.
Here you'll see there's one contact and 6 events.

Oomph was written for Internet Explorer, has been extended to Firefox, and can be added to your website using a simple JavaScript include.

Articles about Microformats

Really Cool New Sh*t

<video>

<video> Formats

<video>

Simple Implementation

				<video id="sampleMovie“ src="HTML5Sample.mov">
				</video>

				<video id="sampleMovie" width="640" height="360" preload controls>
				<source src="HTML5Sample_H264.mov" />
				<source src="HTML5Sample_Ogg.ogv" />
				<source src="HTML5Sample_WebM.webm" />
				</video>

Video with Flash fallback

				<video id="sampleMovie" width="640" height="360" preload controls>
				
				<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, 
				mp4a.40.2"' />
				
				<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
				
				<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
				
				<object type="application/x-shockwave-flash" 
				data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" 
				height="360">
				
				<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
				
				<param name="allowFullScreen" value="true" />
				
				<param name="wmode" value="transparent"/>
				
				<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
				
				</object>
				
				</video>

<audio>

<audio> Formats

<audio>

Simple Implementation

				<audio controls="controls">
				<source src="song.mp3" type="audio/ogg" />
				<source src="horse.ogg" type="audio/mp3" />
				Your browser does not support the audio element.
				</audio>

Fall-back to Flash if audio isn't supported

Check for HTML5 audio support, and if not present, fall back on Flash,
Check the level of HTML5 audio support and adapt your code accordingly for each browser, and
Check what file types are supported and link to appropriate formats of the files.

Using JavaScript, you can check for audio tag support:

				// returns a boolean
				var audioTagSupport = !!(document.createElement('audio').canPlayType);
				or check file type compatibility:
				// Need to check the canPlayType first or an exception
				  // will be thrown for those browsers that don't support it      
				
				  var myAudio = document.createElement('audio');
				
				  if (myAudio.canPlayType) {
				
				    // Currently canPlayType(type) returns: "", "maybe" or "probably"
				
				   var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
				    var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
				  } Note that to change the src attribute of an audio object or element, you'll need to recreate the object or element with the new value for its src 
				attribute or alternatively change the src URL and then issue a myAudio.load() command.

<canvas>

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

<canvas>

The most simple version

				<canvas width="300" height="225“>
				<canvas>

A little more complicated

				function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); }
                
                ... this goes on *forever*, almost.

The Sleepy Gorilla | .ai source file

Ai->Canvas

Don't know JavaScript like an expert?

Or don't know it at all, really, like me?

http://visitmix.com/work/ai2canvas

SVG

Vector Graphics In-Browser

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

Some "simple" markup

				<svg>
				<svg xmlns="http://www.w3.org/2000/svg" 
				xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1“ baseProfile="full">
				<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
				<circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" />
				<circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)" />
				<circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)" />
				</g>
				</svg>

                <img src="logo.svg" alt="logo" />

Getting .svg to display, if it doesn't.

.htaccess on Linux Hosting

.htaccess is pretty unproblematic and it can be also often used on cheap shared hosting. Additionally, no restart is necessary. The .htaccess file can be placed in any directory and all changes are applied to this directory and all of its subdirectories (as long as the rules aren't overwritten again via another .htaccess file).

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Some FTP clients don't show the .htaccess file, which is sorta troublesome if you want to download the currently used one. The reason for this is that files starting with a '.' are "hidden" on unixoid file systems. To show hidden files check the view menu. In Filezilla's case it's Server -> View hidden files. (Interestingly the file is visible either way with the version of Filezilla I'm currently using. It wasn't like that with older versions.)

Forms

There are a lot of great new features around forms in HTML5. Unfortunately, many of them are only implemented by one or two of the various browsers, which is a pain (but nothing we haven't dealt with before, right?)

A really good resource for what's up with HTML5 forms is the "Dive Into HTML5" page, found at: diveintohtml5.org/forms.html

Search

			<form>
			<input name="search" type="search">
			<input type="submit" value="Find">
			</form>

			input[type="search"] {
			-webkit-appearance: textfield;
			}Forms

Placeholder

<input id=“search” name=“search” type=“text” placeholder=“Search term”>

Autofocus

<input id=“search” name=“search” type=“text” placeholder=“Search term” autofocus>

Autocomplete

<input id=“search” name=“search” type=“text” placeholder=“Search term” autofocus autocomplete=“off”>

Datalist

			<input id=“states” name=“states” type=“text” list=“states”>
			<datalist id=“states”>
			<option value=“Alabama”>
			<option value=“Alaska”>
			<option value=“Arizona”>
			…
			<option value=“Wyoming”>
			</datalist>

Drag & Drop

Example

Drag n Drop from HTML5 Rocks

Drag & Drop HTML

			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset=utf-8 />
			<title>Basic Drag and Drop</title>
			<script class="jsbin" src="embeds/jquery.min.js"></script>
			<script src="embeds/h5utils.js"></script>
			<style>
			#drop {min-height: 100px; width: 200px; border: 3px dashed #ccc; margin: 10px; 
			padding: 10px;}
			P { margin: 3px 0;}
			</style>
			</head>
			
			<body>
			<img src="http://twivatar.org/rem" alt="Remy Sharp" />
			<img src="http://twivatar.org/brucel" alt="Bruce Lawson" />
			<img src="http://twivatar.org/Rich_Clark" alt="Rich Clark" />
			<div id="drop"></div>
			</body>
			</html>
			Drag & Drop JavaScript
			function cancel(e) {
			if (e.preventDefault) {
			e.preventDefault();
			}
			return false;
			}
			
			var drop = document.querySelector('#drop');
			
			// Tells the browser that we *can* drop on this target
			addEvent(drop, 'dragover', cancel);
			addEvent(drop, 'dragenter', cancel);
			
			addEvent(drop, 'drop', function (e) {
			if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting 
			off to the text.
			
			this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '</p>';
			return false;
			});

Web Sockets

“HTML5 Web Sockets … defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 Web Sockets is not just another incremental enhancement to conventional HTTP communications; it represents a colossal advance, especially for real-time, event-driven web applications.”

- Peter Lubbers, Frank Greco

Application Cache & Local Storage

Two major new features of HTML5 – application cache and local storage – allow you to bring the web experience to your users, even when the web isn’t there.

Application cache allows you to write fully functional web applications that work offline as well as online.

Local storage allows you to store megabytes of data locally (natch) without having to install a separate database. Combine these two features, and you can begin writing web applications for mobile devices (iPhone, iPad, and Android) that behave like native applications – right down to the icon on the desktop.

Scott Davis (ThirstyHead.com)

Application Cache

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.

http://www.html5rocks.com/en/tutorials/appcache/beginner/

Local Storage

It’s a way for web pages to store named key/value pairs locally, within the client web browser.

Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you.

Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually).

Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers, so it is available even when third-party browser plugins are not.

Which browsers? All of ‘em.

Web Workers

The simplest use of workers is for performing a computationally expensive task
without interrupting the user interface.

http://dev.w3.org/html5/workers/

Web Workers HTML

			<!DOCTYPE HTML>
			<html>
			<head>
			<title>Worker example: One-core computation</title>
			</head>
			<body>
			<p>
			The highest prime number discovered so far is:
			<output id="result"></output>
			</p>
			<script>var worker = new Worker('worker.js'); worker.onmessage = function 
			(event) { document.getElementById('result').textContent = event.data; }; 
			</script>
			</body>
			</html>

Web Workers JavaScript

			var n = 1; 
			search: while (true) {
			n += 1;
			for (var i = 2; i <= Math.sqrt(n); i += 1)
			if (n % i == 0)
			continue search;
			// found a prime!
			postMessage(n);
			}

Structure

Using <nav>

	<nav>
	<ul>
	<li>Navigation Item 1</li>
	<li>Second Nav Item </li>
	<li>This would be no. 3 </li>
	</ul>
	</nav>

Using <div>

	<div id=“nav”>
	<div class=“navitem”>Navigation Item 1</div>
	<div class=“navitem”>Second Nav Item</div>
	<div class=“navitem”>This would be no. 3</div>
	</div>

CSS3

The prefixes (or not)

-moz

Firefox

-webkit

Safari

Nuthin'

Internet Explorer 9/10

HTML5 Reset .v2

html5reset.org

Block 'em

section, article, header, footer, nav, aside, hgroup { display: block;}

Help

Generators

http://www.css3maker.com

Prefix-free

http://leaverou.github.com/prefixfree/

Prefixer

cssprefixer.appspot.com

Responsive Design

1140 Grid

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Border Radius

	.box{
	-moz-border-radius: 10px 20px 40px 80px;
	-webkit-border-radius: 10px 20px 40px 80px;
	border-radius: 10px 20px 40px 80px;
	}

Box Shadow

	-moz-box-shadow: 10px 10px 20px #888;
	-webkit-box-shadow: 10px 10px 20px #888;
	box-shadow: 10px 10px 20px #888;

Opacity & RGBA

One of the most-widely anticipated, asked for, and useful new features of CSS 3 is the ability to make things transparent in varying degrees. To do this, you have two choices: use the Opacity tag or RGBA.

http://www.css3.info/preview/rgba/

Opacity

	<div style="background: rgb(255, 0, 0); opacity: 0.2;"></div>
	<div style="background: rgb(255, 0, 0); opacity: 0.4;"></div>
	<div style="background: rgb(255, 0, 0); opacity: 0.6;"></div>
	<div style="background: rgb(255, 0, 0); opacity: 0.8;"></div>
	<div style="background: rgb(255, 0, 0); opacity: 1;"></div>

RGBA

	<div style="background: rgba(255, 0, 0, 0.2);"></div>
	<div style="background: rgba(255, 0, 0, 0.4);"></div>
	<div style="background: rgba(255, 0, 0, 0.6);"></div>
	<div style="background: rgba(255, 0, 0, 0.8);"></div>
	<div style="background: rgba(255, 0, 0, 1);"></div>

Gradients

Gradient Generator

http://www.colorzilla.com/gradient-editor/

	background: -moz-linear-gradient(left, #00abeb, #fff);
	background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

	background: -moz-linear-gradient(top, #00abeb, #fff);
	background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

Integrating CSS3 gradients with your existing pages

Set a background color, set a background image with the gradient you'd like to make via CSS3, then set it via CSS3.

	/* fallback/image non-cover color */
	   background-color: #0e5467; 
	
	/* fallback image */
	background-image: url(images/fallback-gradient.png); 
	
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#157c98, #0e5467);

Different browsers do it differently. Ya gotta accomodate for that.

	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#157c98), to(#0e5467));
	
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#157c98, #0e5467); 
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(#157c98, #0e5467);

Fonts

http://www.w3schools.com/css3/css3_fonts.asp

What fonts can I use now? The general web-safe list:

http://www.fonttester.com/help/list_of_web_safe_fonts.html

Arial, Helvetica, sans-serif;
'Arial Black', Gadget, sans-serif;
'Bookman Old Style', serif;
'Comic Sans MS', cursive;
Courier, monospace;
'Courier New', Courier, monospace;
Garamond, serif;
Georgia, serif;
Impact, Charcoal, sans-serif;
'Lucida Console', Monaco, monospace;
'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
'MS Sans Serif', Geneva, sans-serif;
'MS Serif', 'New York', sans-serif;
'Palatino Linotype', 'Book Antiqua', Palatino, serif;
Symbol, sans-serif;
Tahoma, Geneva, sans-serif;
'Times New Roman', Times, serif;
'Trebuchet MS', Helvetica, sans-serif;
Verdana, Geneva, sans-serif;
Webdings, sans-serif;
Wingdings, 'Zapf Dingbats', sans-serif;

@font-face

	@font-face
	 {
	 font-family: myFirstFont;
	 src: url('Sansation_Light.ttf')
	 }

Using the new font

	div
	 {
	 font-family:myFirstFont;
	 }

WOFF

Web Open Font Format (WOFF) is an open format for using fonts on the Web.

People design fonts, save or convert them to WOFF and use other technologies (like HTML, CSS, SVG) to tell browsers and other software which fonts to download and apply. Until now, downloadable fonts have not been common on the Web due to the lack of an interoperable font format.

Typekit

http://typekit.com/

“Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

Font Resources

Fontex
http://www.fontex.org/
Font Squirrel
http://www.fontsquirrel.com/

Transitions & Transforms

Transitions

this is a link

	a.thebg{
		color:#000; 
		background:#f00; 
		padding:20px; 
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px; 
		
		-webkit-transition-property:color, background; 
		-webkit-transition-duration: 1s; 
		-webkit-transition-timing-function: linear, ease-in;
	
		-moz-transition-property:color, background; 
		-moz-transition-duration: 1s; 
		-moz-transition-timing-function: linear, ease-in;
	
		transition-property:color, background; 
		transition-duration: 1s; 
		transition-timing-function: linear, ease-in;
	}
	
	a.thebg:hover{
		color:#f00;
		background:#000;
	}

Transforms + Transitions

Rotated 8 Degrees

	-moz-transform: rotate(8deg);
	-webkit-transform: rotate(8deg);

Javascript

DevExpress Hero Example

Designed to add interactivity to HTML pages

JavaScript is:

A scripting language = lightweight programming language
and ...
License and cost free, generally.
and ...
An interpreted language, means that scripts execute without preliminary compilation
and ...
License and cost free

JavaScript can do cool stuff:

Smooth Scrolling
http://webdesignandsuch.com/using-smooth-scroll-with-page-anchors-and-javascript/

Endless Pageless Content
http://ajaxian.com/archives/endless-pageless-keep-scrolling-for-more-content

Lots and lots of other cool stuff

http://www.javascriptfreecode.com/

Make your website as user's Homepage
A message box when page opens
Don't let the user use right click on mouse
Make your scrollbar colorful
Search box ( Search engine ) for your page
Fireworks with different colors
Hearts following mouse
Stars moving in background
Magic title for weblogs or any pages on the internet
Close the browser with a button
Text alert for enter and exit
Set background color (User control)
Clock

Animation Software

Using your HTML

Adobe Edge

Glimmer from MIX Online

From Flash

Adobe Wallaby

Google Swiffy

Okay. How?

For Internet Explorer 7&8

The Remy Sharp Awesomeness

			<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

Download it directly

Modernizr

“Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

			Modernizr.load({
			test: Modernizr.geolocation,
			yep : 'geo.js',
			nope: 'geo-polyfill.js'
			});

Samples of good HTML5 stuff

http://html5demos.com/

Resource Sites

Hi, Twitter

Follow “experts”

Me, Tim Aidlin
@systim
Smashing Magazine
@smashingmag
Webdesigner Depot
@designerDepot
W3C Team
@w3c
Jeffery Zeldman
@zeldman
Jeremy Keith
@adactio