Introduction to HTML5 & CSS3
Download as PPTX, PDF•1 like•730 views
This document provides an overview of HTML5 features including new tags, forms, graphics capabilities with canvas and SVG, storage with WebSQL and Web Storage, real-time communication with WebSockets, multimedia with audio and video, geolocation, and performance improvements with Web Workers. It also summarizes skills and certifications in areas like PHP, MySQL, CSS3, and frameworks like Zend and Twitter Bootstrap.
Introduction to HTML5 & CSS3
- 1. 1
- 2. 2 Working as a PHP developer in MFS for more than 4 years. My skill set includes PHP, MySQL, HTML, HTML5, CSS, CSS3, jQuery, AJAX, Javascript, XML, ZendFramework, GoogleAnalytics, YouTubeAPI, ZendFramework2, Twitter Bootstrap, JSON Zend Certified Engineer (ZCE) - Zend PHP 5.3 Certification Oracle Certified Professional - OCP MySQL 5 Developer - Part 1 - 1Z0-871 Microsoft Certified Professional - MCP - Programming in HTML5 with Javascript & CSS3
- 3. 3 What is HTML5? Advantages of HTML5 over HTML4 Structure of a Web page Web Forms SVG MathML Web Storage Web SQL WebSocket Canvas Audio & Video Geolocation Web Workers Introduction to CSS3 Reference Links Q & A Thank You!!
- 4. 4
- 5. 45 5 Successor of HTML4.01 New tags, features and APIs More clarifications Standardises many features
- 6. 6
- 7. 7 Backward Compatibility Accessibility Cleaner code Smarter Storage Game Development Cross Browser Support Mobile!! Mobile!! Mobile!!
- 8. 8
- 9. 9 <header> <article> <header> <nav> <aside> <article> <footer> <footer>
- 10. 10
- 11. 11 New form elements (datalist, keygen, output) New input types (email, url, number, tel, search, color, date, time, datetime, datetime-local, month, week, range) New input attributes (autocomplete, autofocus, min & max, placeholder, pattern, required, step, formtarget, …) New attribute syntax New media elements (audio, video, embed, source, track) HTML5 graphics (canvas, SVG)
- 12. 12
- 13. 13 Scalable Vector Graphics with W3C recommended Used to describe 2D-graphics using XML XML rendered by an SVG viewer. Mainly used for Pie charts, Two-dimensional graphs in an X,Y coordinate system etc. Do not loose any quality on zoomed or resized Every element and every attribute can be animated
- 14. 14
- 15. 15 Mathematical Markup Langauge Designed to present and capture mathematics for Web Used inside <math>...</math> tags
- 16. 16
- 17. 17 Storage prior to HTML5 Web Storage userData for Microsoft Internet Explorer Flash Cookies by Adobe Gears by Google dojox.storage
- 18. 18 Web Storage as a standardised and native API Easily retrievable javascript objects 2 ways to store data on the client side a) Web SQL database b) Web Storage - key/value pair storage system i) local storage ii) session storage
- 19. 19 Session Storage vs Local Storage Session Storage Local Storage Values persist only as long as the window or tab in which they were stored. Values are only visible within the window or tab that created them. Values persist beyond window and browser lifetime. Values are shared across every window or tab running at the same origin.
- 20. 20
- 21. Database API Store complex relational data and perform simple or complex queries on those data Brings SQL to the client side It has 3 main methods 21 1) openDatabase: It creates the database object either using existing database or creating new one. 2) transaction: It gives us the ability to control a transaction and performing either commit or rollback based on the situation. 3) executeSql: This method is used to execute actual SQL query.
- 22. 22
- 23. 23 Bidirectional communication technology Operates over a single socket Exposed via a JavaScript interface Once the Web Socket connection made with the web server, user can send the date from browser to server using send() method and receive data from server to browser by an onmessage event handler
- 24. 24
- 25. 25 Overview of Graphics in Browsers Static images : <img> tag Dynamic graphics? No native support Current solution - - use plug-ins such as Flash, Silverlight etc. - HTML5 <canvas> element
- 26. 26 Canvas vs SVG Canvas SVG Advantages −> High performance graphics −> Pixel−level manipulation −> Constant performance depending on the resolution used −> Canvas drawing surface can be saved as an image file -> Vector-based, scalable to any resolution -> Good support for animations -> DOM manipulated elements Drawbacks -> No API for animation, you have to redraw every time -> Pixel manipulation - impossible for shape you create to respond to events -> Not scalable -> Not suited for user interfaces -> Works with the DOM, so with a lot of elements, it gets slower -> Not suited for gaming application
- 27. 27
- 28. 28 Current scenario Based on plug-ins i.e. Silverlight, Flash Browser uses the <object> tag and can’t differentiate w.r.t. audio/video An end user might not have the plug-in installed/ not permitted Plug-ins are not cross-platform Flash - not supported on iOS
- 29. 29 With HTML5 Use of<audio> and <video> tags Need to set src attribute to identify the media source Include a controls attribute It supports - Audio Video Interleave (.avi) - Flash Video (.flv) - MPEG 4 (.mp4) - Matroska (.mkv) - Ogg (.ogv)
- 30. 30
- 31. 31 Geographic and Location Share user’s location, find direction etc. There are many ways to share the location - GPS - Location inferred from network, IP address, wifi - Cell IDs - User Input Sharing user location -> a privacy concern!!! User must give explicit permission to the user agent Some privacy concern will still present - How long the data will be stored - Is it shared with other sites - Can the location data be updated/deleted by end user?
- 32. 32
- 33. 33 Current scenario Runs in single-threaded environment Application could be unresponsive Solution??? - Break a big operation - Use timer
- 34. 34 Runs in single-threaded environment Application could be unresponsive Solution??? - Break a big operation - Use timer
- 35. 35
- 36. 36 Latest standard of CSS Completely backwards compatible Split up into modules - Selectors - Box Models - Background & Borders - Text effect - 2D Transformations - Animations - Multiple column layout
- 37. http://www.slideshare.net/pravasinisahoo9/html5-css3-a-startup http://pravasini.wordpress.com/ http://www.tutorialspoint.com/html5/index.html http://html5hub.com/ http://html5doctor.com/ http://www.w3schools.com/html/html5_intro.asp 37
- 38. 38
- 39. 39