1. Semantic HTML
  2. CSS3 in IE 6 and 7 and 8 AND 9
  3. Vector Graphics
  4. CSS Animation
  5. Mobile Applications
  6. What Can We Do Without IE6?

Semantic <abbr>HTML</abbr>

Unordered Lists <code><ul></code>

Related, sequential data, doesn't matter what order it's consumed in.

Shirt Color

Ordered Lists <code><ol></code>

Related, sequential data, order matters!

How To Bake a Cake This is not true, do not try at home

  1. Light candles and serve!
  2. Add water
  3. Place mixture in oven
  4. Add three eggs to mixture

Definition Lists <code><dl></code>

Related, sequential data, where two or more bits of info are being compared

English!

Cat
Cute when young
Kind of a douche (your mileage may vary)
Dog
Opposite of cat, generally

We Are a Store

Product Name
Dishwasher - Broken
Price
$33.00

New HTML5 Elements

Handy Flowchart from HTML5 Doctor

Outlining

HTML5 is organized as an "outline", which is a semantic breakdown of the page hierarchy of content.

"Sectioning Elements" and "Sectioning Roots"

Some tags are "sectioning elements". A subset of these are "sectioning roots".

Sectioning elements can have a <header> and/or <footer>. They also optionally reset the heading order to <h1>.

List of Sectioning Elements

Sectioning roots do not affect the outline of their ancestors. reset the heading order to <h1>

List of Sectioning Roots

Below is an <hr />.

It has been defined in HTML5 to mean <q>"a total thematic change in content"</q>.

See you Wednesday!


CSS3 in IE 6 and 7 and 8 AND 9 IE9 does not support filters, it supports all of the below (sans gradients) with W3C standard properties

Notes

"zoom" must be set to "1" to get many of these to work. It turns on hasLayout.

These will typically break the weak PNG transparency support IE7/8/9 had.

text-shadow (actually, that's CSS2)

Syntax for IE:

progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=145, Strength=3); zoom: 1;

box-shadow

The same syntax as for text-shadow, but when a non-transparent background is set, it goes into box-shadow mode.

You cannot do text and box shadows for the same element in IE.

progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=145, Strength=3); zoom: 1; background: [anything non-transparent];

Background Gradients

You can only use two colors, and only linear gradients, but you can gradiate in any direction.

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffff0000', EndColorStr='#ff0000ff'); zoom: 1;

Semi-Transparent Colors (RGBa)

Same as gradients syntax, but we modify the "FF" at the beginning of the 8-digit hex. FF is completely opaque, 00 is completely transparent. "77" is about 50% opacity.

You can only do this for backgrounds in IE. It also works randomly in other IE-specific things.

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#77ff0000', EndColorStr='#770000ff'); zoom: 1;

2D Transforms

You can generate the matrix calculations here: http://www.useragentman.com/IETransformsTranslator/.

filter: progid:DXImageTransform.Microsoft.Matrix( M11=1.2990381056766576, M12=-0.7500000000000007, M21=0.7500000000000007, M22=1.2990381056766576, SizingMethod='auto expand'); zoom: 1;

Vector Graphics

Raphaël

Easy-to-learn JavaScript framework that builds SVG in supporting browsers and VML in IEs.

Demos and Documentation

SVG Filters

By applying SVG to an element via the CSS mask, clip-path, and filter properties, we can programmatically create a range of effects without images.

The following demos work in Firefox 4 only:

Supporting Some Filters in IE

IE has had filter for a very long time. It does not use SVG as a basis.

IE-proprietary CSS Filters


CSS Animation

These do not work in IE9.

Two kinds of animation

Transitions

These will animate any change to the specified property's value.

Syntax (property duration[s or ms] timing-method): -webkit-transition: color 1s ease-in, opacity 1s linear; -moz-transition: color 1s ease-in, opacity 1s linear; -o-transition: color 1s ease-in, opacity 1s linear; transition: color 1s ease-in, opacity 1s linear;
Timing Methods

Animations

The animation is run only when and how it is told.

Syntax: @-webkit-keyframes span-bounce { 0% { -webkit-transform: scale(0.001); } 60% { -webkit-transform: scale(1.2); } 80% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes span-bounce { 0% { -moz-transform: scale(0.001); } 60% { -moz-transform: scale(1.2); } 80% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes span-bounce { 0% { -o-transform: scale(0.001); } 60% { -o-transform: scale(1.2); } 80% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes span-bounce { 0% { transform: scale(0.001); } 60% { transform: scale(1.2); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } span { color: #fff; background: #f00; -webkit-animation: span-bounce 10s linear; -moz-animation: span-bounce 10s linear; -o-animation: span-bounce 10s linear; animation: span-bounce 10s linear; }

Other Capabilities

Special JavaScript Events

The browser also fires off various events during an animation that you can catch in JavaScript and work off of.

Transition Events Animation Events

Detecting CSS Animation

Swap out the word "Transition" for "Animation" in the code below to detect Animations.

<script> var cssTransitions = document.documentElement.style.webkitTransition !== undefined || document.documentElement.style.MozTransition !== undefined || document.documentElement.style.OTransition !== undefined || document.documentElement.style.transition !== undefined; if(cssTransitions) { elEment.style.color = "#ff0000"; } else { // bust out the JavaScript animation } </script>

Pros/Cons of CSS Animation

Pros Cons

Hardware-Accelerated Animations in Apple Browsers

Use CSS Transitions/Animations to animated any of the following properties:

Example (use a Webkit browser)

Google Maps for iPhone sans JavaScript


Mobile Applications

That you can, like, buy in the app store

It is indeed possible to make great apps that possess true "native" capabilities on all major smartphone platforms.

All with HTML, CSS, and JavaScript.

Our Goal: Platform Osmosis

One codebase, every platform

iPhone & Android

Appcelerator Titanium has a JavaScript compiler that opens up APIs to the device's hardware features and OS capabilities, including UI features.

Titanium's tool will translate your JavaScript into the target platform's compiled language and produce the appropriate executable.

Using a WebView (like embedding a chrome-less browser into an app) will allow you to develop an application just like a mobile website, though you can use only JavaScript and OS-level rendering, but that isn't friendly with non-Titanium platforms.

Code Example - An On/Off Switch var basicSwitch = Titanium.UI.createSwitch({ value:false }); basicSwitch.addEventListener('change',function(e) { Titanium.API.info('Basic Switch value = ' + e.value + ' act val ' + basicSwitch.value); });

Titanium's Kitchen Sink is a sample app that uses every feature Titanium currently supports at that time. Browse to the feature you'd like to use, then check out the source code to see how it works.

Palm webOS

webOS is essentially just Webkit running on top of a slim Linux kernel. Apps are nothing more than installed websites.

There is a JavaScript API, called Mojo, for using Hardware and OS features or UI widgets.

Mojo and Titanium's API share much in common. We can use a single codebase for all platforms by doing API detection and using the syntax that the platform requires.

Code Example - Opening Contacts this.controller.serviceRequest('palm://com.palm.applicationManager', { method:'open', parameters:{ id:"com.palm.app.contacts", params: { "launchType": "addToExisting" \| "newContact", "contact": this.contact } } });

Blackberry

WebWorks is RIM's newly-announced platform for Blackberry OS development.

It is a response to the webOS and Titanium paradigms, and allow full access to the device as those other approaches do, but it is very new and there isn't much documentation.


What Can We Do Without IE6?

IE7 gained many useful features that do not exist in IE6:


Thank You

If there were semantic markup for gratitude, I would place your names firmly as content within it.

Thanks to everyone for participating in the UI Hulk-Outs, now let's create amazing products.