HTML5 - CSS3

Taking Web Development to the next level
HUG Chennai

How did we get here?
• Invention of Web and its Publishing Language • The Browser standard war • W3C and WHATWG formation and open standards

• HTML3 in 94, HTML4 in 97-98

So what is HTML5?
• It is the fifth revision of HTML standard.
• Rules • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins and more markup to replace scripting • Should be device independent and development process should be visible to the public

Before Start • What is Render Engine/Web Browser Engine • What is NAMESPACE • What is ELEMENT/TAG .

5 things you should know about HTML5 • Its easy to get started • Its already works • Its here to stay • You don’t need to throw anything away • Its not one big thing .

.. </body> </html> ...Minimum HTML5 Document <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document..

.Top New Features .. .

email. range. search. number. date. placeholder. datetime-local. Meter.Better Forms • New elements • Progress. datetime. required. Output • New Input types • • 13 new input types Tel. color • Input attributes • Autofocus. Keygen. Datalist. url.com/en/tutorials/forms/html5forms . pattern http://www. time. week.html5rocks. month.

SEO Effect . A richer set of tags enabling a more useful. data driven web for both programs and your users. semantics are front and center with HTML5.New Semantic Elements Giving meaning to structure.

New Semantic Elements • • • • • • • • <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer> .

thanks to the HTML5 App Cache. as well as the Local Storage.Web Storage & Offline Web Apps can start faster and work even if there is no internet connection. Sync data with server.g. images). Google Gears Considerations Store dynamic data. Store binary data and modify it (e. Increase App performance . Static resources. Before Cookies. Flash Storage. Indexed DB. and the File API specifications. Internet Explorer User Data.

Web Storage & Offline Web Storage (localStorage/sessionStorage) Store unstructured data and miscellaneous data (user/ game/app preferences) IndexedDB/WebSQL Store structured data and Handle simultaneous data operations (with transactions) Appcache Caches entire web app locally! .

mp3" type="audio/mpeg"> <source src="horse.com/html/tryit. camera.com/tags/tryit.Media Elements Audio and video are first class citizens in the HTML5 web.w3schools.asp?filename=tryhtml5_video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie. </video> . Lights. living in harmony with your apps and sites.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio> • Video http://www.w3schools.ogg" type="video/ogg"> Your browser does not support the video tag. action! • Audio http://www.asp?filename=tryhtml_audio_all <audio controls height="100" width="100"> <source src="horse.

getContext("2d"). ctx.fillStyle="#FF0000".0.150. </script> . ctx. via scripting (usually JavaScript) it is only a container for graphics Create a Canvas <canvas id="myCanvas" width="200" height="100"></canvas> Draw Onto The Canvas With JavaScript <script> var c=document. on the fly. var ctx=c.fillRect(0.Canvas • • draw graphics.75).getElementById("myCanvas").

and even tilt orientation.aware features and experiences. from audio/video input access to microphones and cameras. Web Applications can present rich. to local data such as contacts & events.Device Access Beginning with the Geo location API. Incredible device access innovations are being developed and implemented. device. .

File System. Motion. native application menu etc) • Application Launcher • Contacts • Communication Log. Geo location • Calendar • Camera • User Interface ( Drag and Drop. Messaging etc .Device Access • Orientation. vibrate. beep. Gallery.

Connectivity More efficient connectivity means more real-\me chats. faster games. and better communication. . Web Sockets and Server-Sent Events are pushing data between client and server more efficiently than ever before.

WebGL much more… . SVG. XMLHttpRequest 2.Just That? Web Workers.

.

CSS3 .

border-radius:25px. • Selector and Declaration Block • Usage – Inline.What is CSS? • CSS is used to control the style and layout of Web pages. as separate file div { border:2px solid.org/wiki/Cascading_Style_Sheets . In page. } http://en.wikipedia.

• Completely backwards compatible. • Still under development by W3C and almost done. .CSS3 • CSS3 is the latest standard for CSS. • Many of the modern browsers have been implemented it.

CSS3 Modules • Selectors • Backgrounds and Borders • Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout • User Interface .

com/cssref/css_selectors.w3schools.Selectors • A lot of new selectors • http://www.asp .

border-radius:25px. } .Backgrounds and Borders CSS3 Rounded Corners div { border:2px solid.

} .Backgrounds and Borders CSS3 Box Shadow div { box-shadow: 10px 10px 5px #888888.

Backgrounds and Borders CSS3 Box Shadow div { border-image:url(border. } .png) 30 30 round.

} div { font-family:myFirstFont. } </style> .CSS3 @font-face <style> @font-face { font-family: myFirstFont. src: url(sansation_light.woff).

2D Transforms translate() div { transform: translate(50px. } .100px).

} .2D Transforms rotate() div { transform: rotate(30deg).

2D Transforms scale() div { transform: scale(2.4). } .

20deg).html . } http://localhost/~umesh/srm/css3_transitions.2D Transforms skew() div { transform: skew(30deg.

-webkit-transform: rotateX(120deg). /* Safari and Chrome */ } http://localhost/~umesh/srm/css3_transform.html . /* Safari and Chrome */ } div { transform: rotateX(120deg).3D Transforms rotateX() and rotateY() div { transform: rotateX(120deg). -webkit-transform: rotateX(120deg).

Animations @keyframes @keyframes myfirst { 0% {background: red.} 25% {background: yellow.html .} } animate: div { animation: myfirst 5s. /* Safari and Chrome */ } http://localhost/~umesh/srm/css3_animations.} 100% {background: green. -webkit-animation: myfirst 5s.} 50% {background: blue.

Responsive Web Design • Media Queries • In CSS2 • Print. screen • In CSS3 • Width. aspect-ratio and much more . resolution. height. orientation.

com .com/ http://www.org/research/webkit/snowleopard/snowstack.Few samples http://www.satine.html https://developer.keithclark.uk/labs/css3-fps-new/ http://www.apple.html https://developer.satine.chromeweblab.apple.co.com/safaridemos/showcase/threesixty/ http://chrome.angrybirds.org/research/webkit/snowleopard/snowstack.com/safaridemos/showcase/transitions/ http://www.

html .A Small Hands on http://localhost/~umesh/srm/sample/index.

Thank You! Umesh Ganapathy Umesh.com .ganapathy@gmail.