HTML5

HTML5 is the future – Steve Jobs

The Wow! & How!

Agenda • • • • • • •

Some boring history. HTML5? – What is it? Life Made Easy with HTML5. Media. Geolocation. Local storage. Canvas.

K N O W

K N O W

H I M ? ? ?

H I M ? ? ?

Tim Berners-Lee • • • •

Father of Web. Director W3C. Professor CSAIL, MIT. Graduate of Oxford University

Some person: Did you invent the Internet? Tim: No, no, no!

History

History

Image Credits: Googl

History • When you say an image is displayed how? • Who does this? – The browser/Navigator. – So, its up to the browser to implement each and every tag. – World Wide Web is standard but the documents of it (HTML) is not!!!

• This lack of standards led to browser war!!! • Finally decision was taken to standardize and thus came W3C – World Wide Web Consortium – Tim Berners Lee.

What is HTML5?

What is HTML5 • • • • •

HTML5 = HTML + CSS3 + Javascript. Born out of politics. Initiated by Apple, Mozilla, Opera. Not yet standardized. Expected to be standardized by 2015 or 2020  • Why should you learn it, when it is not a standard at all???

HTML5 • Though not standardized most of the browsers started supporting HTML5. • What makes it so special? – Video Audio without plugins. – Canvas for Drawing/Gaming. – Improved Form Handling. – Offline Apps. – Penetration into Mobile Industry and started competing with the Native apps.

Life Made Easy

Placeholders made easy • How do you hint the user what to fill in a field? – Use a hint text.

• How is that done? - Put a hint value in the field. - When user focuses it remove hint text. - Pretty easy ha!!! What if the user left it empty to fill latter??? Show the hint again….

• What does HTML5 give you? – – This does all the job!!!

Make it Mandatory • ‘The’ field can not be left empty. How do you check it? – Write a script.

• I have 10 such elements. – Write a loop.

• I may add some more fields in future. – Modify the loop.

• I want my life easier than this. – - All is well 

Pattern • How to make input to follow certain pattern? – Script – Yes but simpler than that?

• Pattern attribute for – – Allow only alphabets.

Autofocus

• I want field X to be focused when the page load. – Simple write a small 2 line script and call it window.onload(). – Do you know when a window.onload() event occurs?? • Only after all the images have been loaded.

• So, what now? – - As simple as that.

Email Address. • Please Enter a valid email address… – What is valid? • Some character followed by number followed by ‘@’ followed by ‘.’ followed by ‘com’. • Imagine writing all this in a script.. – Regular Expression.

• New input type that saves your life: – : everything is taken care of automatically.

Numbers • • Email was ok.. But why a special type for number? – I want a number which is • Not negative. • Not fraction. • Not greater than 50….

– This makes numbers also difficult.

• So how do we handle all these??? –

o edit Master text styles

nd level

d level

ourth level » Fifth level

Some other types • – To enter a URL address.

• : – Slider to take number input.

• – Not supported by most of the browsers.

• – A search box.

• – Color picker.

Life can’t be more easier than that…

Audio/Video

Video – The advertiser of HTML5

Three video format options: • .mp4 or .m4v – MPEG-4 – Apple. • .webm – WebM – Google. • .ogg/.ogv = Theora + Vorbis.

• Format is still not yet standardized. • Google supports mp4 and webm. • Apple supports mp4.

How to add Video?

• Before HTML5?

– Video is not a standard. – Quicktime, Real, Flash plugin’s are required. – While installing these some virus may creep in!!!

• What now? – Video is now a standard. – Every browser has to implement it, no third party plugin business.

Adding Controls to Video API for Controls: Reference.src=“value” Ref.muted=true/false; Reference.play() Reference.pause()

• Click to edit Master text styles – Second level • Third level – Fourth level » Fifth level

Geolocation • This API enables you to determine users location. – getCurrentPosition(successcallback, [errorcallback,options])

• Click to edit Master text styles – Second level • Third level – Fourth level » Fifth level

Canvas • • • •

Think it as a drawing surface. Can also have animations. Used for game development in HTML5. Lets dive directly in…

References… • • • •

www.html5rocks.com www.html5canvastutorials.com HTML5 Up & Running – Oreilly Media. www.w3c.org – Specs.