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 dont need to throw anything away ! Its not one big thing
Minimum HTML5 Document
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
Top New Features ...
Better Forms
! New elements
! Progress, Meter, Datalist, Keygen, Output
! New Input types
! 13 new input types ! Tel, search, url, email, datetime, date, month, week, time, datetime-local, number,
range, color
! Input attributes
! Autofocus, placeholder, required, pattern
http://www.html5rocks.com/en/tutorials/forms/html5forms
New Semantic Elements
Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags enabling a more useful, data driven web for both programs and your users. SEO Effect
New Semantic Elements
! ! ! ! ! ! ! !
<header> <nav> <section> <article> <aside> <figcaption> <figure> <footer>
Web Storage & Offline
Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
Before Cookies, Flash Storage, Internet Explorer User Data, Google Gears Considerations Store dynamic data, Static resources, Store binary data and modify it (e.g. images), Sync data with server, Increase App performance
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!
Media Elements
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
! Audio
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_audio_all <audio controls height="100" width="100"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
! Video
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Canvas
! draw graphics, on the fly, 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.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
Device Access
Beginning with the Geo location API, Web Applications can present rich, deviceaware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
Device Access
! Orientation, Motion, Geo location ! Calendar ! Camera ! User Interface ( Drag and Drop, beep, vibrate, native application menu etc) ! Application Launcher ! Contacts ! Communication Log, File System, Gallery, Messaging etc
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.
Just That?
Web Workers, XMLHttpRequest 2, SVG, WebGL much more!
CSS3
What is CSS?
! CSS is used to control the style and layout of Web pages. ! Selector and Declaration Block ! Usage Inline, In page, as separate file
div { border:2px solid; border-radius:25px; }
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS3
! CSS3 is the latest standard for CSS. ! Completely backwards compatible. ! Still under development by W3C and almost done. ! 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
Selectors
! A lot of new selectors ! http://www.w3schools.com/cssref/css_selectors.asp
Backgrounds and Borders
CSS3 Rounded Corners
div { border:2px solid; border-radius:25px; }
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; }
CSS3 @font-face
<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
2D Transforms
translate()
div { transform: translate(50px,100px); }
2D Transforms
rotate()
div { transform: rotate(30deg); }
2D Transforms
scale()
div { transform: scale(2,4); }
2D Transforms
skew()
div { transform: skew(30deg,20deg); }
http://localhost/~umesh/srm/css3_transitions.html
3D Transforms
rotateX() and rotateY()
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ }
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ }
http://localhost/~umesh/srm/css3_transform.html
Animations
@keyframes
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
animate:
div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari and Chrome */ } http://localhost/~umesh/srm/css3_animations.html
Responsive Web Design
! Media Queries ! In CSS2 ! Print, screen ! In CSS3 ! Width, height, resolution, orientation, aspect-ratio and much more
Few samples
http://www.keithclark.co.uk/labs/css3-fps-new/ http://www.satine.org/research/webkit/snowleopard/snowstack.html https://developer.apple.com/safaridemos/showcase/transitions/ http://www.satine.org/research/webkit/snowleopard/snowstack.html https://developer.apple.com/safaridemos/showcase/threesixty/ http://chrome.angrybirds.com/ http://www.chromeweblab.com
A Small Hands on
http://localhost/~umesh/srm/sample/index.html
Thank You!
Umesh Ganapathy
[email protected]
