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

What’s New in CSS3 Spec?

• New Selector
• Decorations
• New Column Layout
• Transformation (Rotate, Resize…etc)
• Animation (Fade In/Fade Out)

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

Approaches

• Modernizr
• Numerous polyfills

Modernizr

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

html5shiv

• Turns HTML5 structural elements into HTML4 elements for older

browsers

• -
  becomes

Using

• Pros
  • Greater compatibility
  • Better performance
• Cons
  • More complex preparation
  • Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)

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.

In the real world

CSS

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

CSS3 + IE Filters

• Pure CSS solution with forks background: #1E5799; /* old browsers / background: - moz-linear-gradient(top, #1E5799 0%, #2989D 50%, #207cca 51%, #7db9e8 100%); / firefox / background: - webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); / webkit / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); / ie */

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.

At a Glance

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

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

Modernizr

• A JavaScript solution that detects user browser’s features

At a Glance

Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K

eCSStender

• A JavaScript solution that dynamically writes CSS to support older

browsers.

• Core is (20k), Extensions are additional (tiny)files to download. Only

download the extensions that you want.

At a Glance

Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A Pure CSS PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K eCSStender Yes Limited 20K+

Which Approach To Take?

• Depends…
  • How much CSS3 are you leveraging
  • Download size and performance
  • Who’s your client
  • No JS support and fall back strategies
• Test, Test, Test!