HTML5 Roundup.

HTML5 Roundup @rohitrmehta

Why HTML5? State of the Internet Now states “ http://www.onlineschools.org/state-of-the-internet/soti.html

Timeline • 1995 Nov – HTML 2.0 Published by IETF
• 1997 Jan – HTML3.2 published, W3C • 1997, Dec – HTML 4. • 1999, Dec – HTML 4.01 was published. • 2000, Jan – XHTML 1.0 • 2001, May – XHTML 1.1

What happened next?

W3C & the XHTML2 • In 2002 W3C began work
on XHTML2 • and.. It was a Disaster……

WHATWG

WHATWG Web Hypertext Applications Working Group http://www.whatwg.org/html

WHATWG • A rebellion was formed within W3C. • W3C
was formulating standards, which were purely theoretical and unrelated to the needs of the web designers. • Members from Apple, Opera and Mozilla were unhappy with this direction. • Expectation was to place more emphasis on formats that allowed creation of Web Applications.

Birth of WHATWG (& HTML5) • 2004, Ian Hickson, proposed
the Idea of extending HTML to create Web Applications. • Proposal Rejected • WHATWG formed. • Ian Hickson became the editor of HTML5

Reunification • WHATWG continued to do its work on HTML5
and W3C continued on XHTML2 • 2006, W3C issued charter to adopt the work done by WHATWG as the basis.

HTML 5 & HTML5

So… What is HTML5

An Application Platform

HTML5 HTML + CSS + JS

HTML5 HTML + CSS + JS Structure + Presentation +
Behavior

Semantics

Document Type Definition (DTD) • Old <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Document Type Definition (DTD) • Old • New <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Structural Elements <header> <hgroup> <nav> <section> <article> <aside> <details> <meter>
<figure> <video> <audio> <canvas> <footer> <summary> <progress> …and more

<header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <section> <article>
<header> <h2>Article title</h2> <p>Lorem Ipsum</p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada </p> </article> </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> </aside> <footer> <p>Copyright 2009 Your name</p> </footer>

<input type =“”> Date and time search tel range email
URL color

Video Element <video src=”a.mp4” width="320” height="240" autoplay></video>

Video Element <video src=”a.mp4” width="320” height="240" autoplay> </video> <video width="320"
height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>

Audio Element <audio src="audio.mp3" preload="auto" controls></audio> <audio id="demo" src="audio.mp3"></audio> <div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button> <button onclick="document.getElementById('demo').pause()">Pause the Audio</button> <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button> <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button> </div>

Canvas • Create graphics with the canvas element • Uses
Javascript to get the context and draw elements. • Useful for creating Charts, Games, Visualizations etc.

Styling with CSS3

CSS3 • Still work in progress • Already a widely
used and unsung standard • All modern browsers support CSS3 (Chrome, Firefox, Safari, Opera)

So…What About

IE is Improving

Few CSS3 properties

Rounded Corners Border-radius{10px} -moz-Border-radius{10px} -webkit-Border-radius{10px} Border-radius{10px 20px 30px 40px} -moz-Border-radius{10px
20px 30px 40px} -webkit-Border-radius{10px 20px 30px 40px}

Box Shadow Box-shadow {3px 3px 10px #333} -moz-Box-shadow {3px 3px
10px #333} -webkit-Box-shadow {3px 3px 10px #333} Box-shadow {inset 3px 3px 10px #333} -moz-Box-shadow {inset 3px 3px 10px #333} -webkit-Box-shadow {inset 3px 3px 10px #333}

Text Shadow text-shadow {3px 3px 10px #333} -moz-Text-shadow {3px 3px
10px #333} -webkit-Text-shadow {3px 3px 10px #333}

RGBA Background-color:{ rgba(234, 221, 79, 0.5) }

Gradients background-image: linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255) 70%); background-image: -o-linear-gradient(bottom, rgb(36,72,244)
39%, rgb(65,101,255) 70%); background-image: -moz-linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255) 70%); background-image: -webkit-linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255) 70%); background-image: -ms-linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255) 70%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(36,72,244)), color-stop(0.7, rgb(65,101,255)) );

Selectors .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white;
} nth selectors li:last-child { background: #dde; } li:nth-child(3n) { background: red; }

Selectors form input[type="text"] { border: 1px solid #333; padding: 0.2em;
width: 400px; } Attribute Selectors a[href*="example.com"] { color : red ; }

Compatibility • Most of the CSS3 elements can be used
with Vendor Prefixes. • http://caniuse.com/

http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png

Solution Responsive Design

CSS3 Media Queries @media screen and (max-width: 600px) { .class
{ background: #ccc; } .nav{display:none}; .dropdown-menu{display:block;} } @media screen and (min-width: 900px) { .class { background: red; } } @media screen and (max-device-width: 480px) { .class { background: 000; } }

http://mediaqueri.es

Responsive Design Using CSS, we can make the website RESPOND
to the Device Landscape and structure content appropriately.

HTML5 & CSS3 are still work in progress, But they
can be still used.

HTML5 & CSS3 are still work in progress, But they
can be still used. FRAMEWORKS Across Devices

…and many many more • 52Framework • G5 Framework •
Perkins • Sprites.js • LESS • SASS • animate.css

Resources • html5rocks.com • html5doctor.com • net.tutsplus.com • smashingmagazine.com •
caniuse.com • mediaqueri.es • blog.whatwg.org • w3.org • slides.html5rocks.com • netmagazine.com

People you would want to follow • Jeffery Zeldman •
Paul Irish • Divya Manian • Chris Coyier • Lea Verou • Ethan Marcotte • Jeremy Keith • Brad Frost

Thank You

HTML5 Roundup.

HTML5 Roundup.

Other Decks in Technology

Featured

Transcript