HTML5 - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

Download HTML5 - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

HTML5 is more than HTML

• HTML5 Spec
• CSS3 Spec
• Web Fonts
• JavaScript to tie it all together

What’s New in HTML5 Spec?

• Simplified and Loose Syntax
• New Elements and Attributes
• Embedded Media
• Canvas
• Offline Storage
• Drag and Drop
• Geo-Location

In the real world

HTML

Why Use HTML5 Today?

• Pros
  • Better semantics
  • Lean code
  • Improved user experience
• Cons
  • Some work is needed to accommodate older browsers

Modernizr

• A minimal JavaScript solution (5k) that detects a browser’s features

html5shiv

• Turns HTML5 structural elements into HTML4 elements for older

browsers

• becomes

Video tag markup

• Video for Everybody code by Kroc Camen

VideoJS

• Builds on VFE
• Uses JavaScript for a more consistent experience
• Falls back gracefully if JavaScript is disabled
• FREE! See http://videojs.com for details and downloads.

Why Use CSS3 Today?

• Pro
  • Smaller download
  • Less JavaScript
  • Better user experience
• Cons
  • Some work is needed to accommodate older browsers

Various Approaches

• CSS3 + IE Filters
• PIE
• Selectivzr
• Modernizr
• eCSStender

At a Glance

Selector Decoration File Size Notes CSS3 + IE Filter No Yes?

PIE

• A JavaScript solution that uses IE specific behavior that is applied

via HTML Components (HTC).

• Limited feature support:
  • border-radius
  • box-shadow
  • linear-gradient
• HTC file is 11kb.

Selectivizr

• A JavaScript solution that emulates CSS3 pseudo-class and attribute

selectors in IE 6- 8

At a Glance

Selector Decoration File Size Notes CSS3 + IE Filter No Yes? PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only