html 5 - a developers perspective
Post on 18-Dec-2014
1.479 Views
Preview:
DESCRIPTION
TRANSCRIPT
A Developers Perspective
introducing
HTML 5 & CSS 3
S.Santhosh Kumar9941497246, @santhotechsanthosh@systeminsights.com
HTML5 IS THE NEXT MAJOR REVISION OF THE HTML STANDARD, CURRENTLY UNDER DEVELOPMENT. LIKE ITS IMMEDIATE PREDECESSORS, HTML 4.01 AND XHTML 1.1, HTML5 IS A STANDARD FOR STRUCTURING AND PRESENTING CONTENT ON THE WORLD WIDE WEB. THE WEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP (WHATWG) BEGAN WORK ON THE NEW STANDARD IN 2004.
IT ALL STARTS WITH<!DOCTYPE HTML>
Keep Updating!!!!
Everything Starts with a WIKI…
HTML 4.01 ?!?!
IN 2004, WHEN THE WORLD WIDE WEB CONSORTIUM (W3C) WAS FOCUSING FUTURE DEVELOPMENTS ON XHTML 2.0, AND HTML 4.01 HAD NOT BEEN UPDATED SINCE 2000IN 2009, THE W3C ALLOWED THE XHTML 2.0 WORKING GROUP'S CHARTER TO EXPIRE, AND DECIDED NOT TO RENEW IT. W3C AND WHATWG ARE CURRENTLY WORKING TOGETHER ON THE DEVELOPMENT OF HTML5.
A great gateway for the developers to lessen their work
What about the previous version?
Important Features of HTML 5
Make the browser work for you not the other way around
1New and Advanced Controls, Sockets and
Communication capabilities.
2Better hardware
usage and advanced OS integration
3Graphics and
Multimedia made Easy
New and Advanced Controls, Advanced Communication Capabilities
More flexibility from the browsers. Does most of the work.
1
New controls that has been Added• Sliders• Email Field• Pattern attribute• Date Field• Phone number field• Mandatory Field• Progress Bar
Commonly needed Controls
No more manual client side validations No customized control needed Browser takes care of stuff Makes developers life a lot easier
Features
New
Lay
out T
ags
Selectors & Semantic TagsDesign easily with new layout tags like <header>, <footer>, <nav>, <aside> etc
Get the skeleton designed in no time at all.
Establish two way communications effectively with web sockets in your client browser.
Run extremely long scripts without eating away your performance using web workers.
Communication
2 Better Hardware Usage and OS integration
Make maximum use of your client’s local resources.
Client Side Data Stores, Local Storage
Data Persistence
Local storage can be effectively used side by side with your actual storage whileMaintaining the data effectively without any loss due to network problems.
Local Data Storage
Local Storage available with the browsers are extremely helpful for preserving the data
Helps for securing data in case of network failure with server.
Find your visitors location:
With GEOLOCATION you can detect your client browsers location.Pinpoint location are services near to your clients browser is detected easily.
GEO LOCATION
Drag and Drop is no longer a task by special Libraries.
Use the inbuilt API support to perform drag and Drop operations in your applications.
document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';}, false);
Native Drag and Drop Support
Special Speech Control Under Dev...
Speech Recognition Made Easy
Use the browser’s in-built ability to identify speech patterns
Take direct speech inputs from your client.
Forget about the speech recognition and concentrate only on usability of the data.
Leave the hard work to browser.
Special Support for Mobile phones and IPADS.
Excellent Device Compatibility…
Just develop one app and use the same for web and mob.
3 Multimedia and Graphics
This is where it gets interesting!!!
» The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.
» It lets you draw directly to your browser» Make wonderful effects with ease» Manipulate your PICS any way you want» Your imagination is the only limit» Fully compatible with DOM
Canvas
Create wonderful browser animations and games which is fully compatible with the
Outlying DOM elements
Say no to FLASH. Lets Welcome HTML 5.
BROWSER ANIMATIONMake ‘em Move
SVG in short is another great added advantage to HTML 5 arsenal.
What is SVG?
Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
-wiki
SCALABLE VECTOR GRAPHICS
No more Pixelation Scale with SVG
? CSS 3The Declarative Devil…
New added advantages in CSS 3 lets designers create cool stuff…
» Rounded Corners» Box Shadows» Text Shadows» Text Effects» Gradients
• Linear• Radiant
Web Fonts Transitions
CSS3 Special Features
Trendy styles with CSS 3
You’re just gonna love it!
The best changes ever made in css
It is totally wicked!!!!!!!!
Any Questions?Thank you.
HTML 5 A DEVELOPER’S PERSPECTIVE
S.Santhosh Kumar9941497246, @santhotechsanthosh@systeminsights.com
top related