SlideShare a Scribd company logo
Content at a Glance
Preface
HTML5:The Platform vs. the Specification
How This Works
An Overview Of HTML5 & CSS3
A Platform For Web Development
Backward Compatibility
How HTML5 & CSS3 Boost The Web Development?
1.Improving User Interfaces
1.1 New Structural and Tag Attributes
1.2Creating User-Friendly Web Forms
2.Making Better User Interface With CSS3
2.1 Building Mobile Interface with Media Queries
3. Improving Accessibility
3.1 Providing Navigation Hints with ARIA Roles
4. New Sight & Sound
4.1 Drawing On Canvas
4.2 Eye Candy
5. Future Enhancements
5.1 CSS Transitions
5.2 WebGL
5.3 Indexed Database APIs
 Conclusion
Preface
Just three months are like a year if you spend it on web. This is the
pretty experience of much of the web developers. Sometime before
HTML5 and CSS3 looks like far off in the way but now many
companies are using this technologies.
HTML5 and CSS3 is a building block for the next era of web
applications. Here we are going to find about all the ways you can
use HTML5 and CSS3.Before starting let’s t have a look on HTML5
and CSS3 buzzwords.
HTML5: The Platform vs. the Specification
HTML is a specification that describes some new tags &
markup, as well as some wonderful JavaScript APIs, but it’s
getting caught up in whirlwind of hype and promises. In some
cases pieces from the CSS3 specification such as
shadow, gradients and transformations are being called
“HTML.”
We’ll focus on the HTML5 and CSS3 specifications themselves
and how you can the techniques they describe. We’ll look into
a suit of specifications that were once part of HTML5 but are in
use right now on multiple platforms.
How This Works
Here we focuses on a specific group of problems that we can solve
with HTML5 and CSS3. We introduce you to specific concept and
walk you through building a simple example using the concept.
We are focusing on what you are using today. There are more
HTML5 and CSS3 features that aren’t in widespread use yet. So let’s
start your web journey with us.
An Overview Of HTML5 & CSS3
HTML5 and CSS3 are two new
standards proposed by W3C and
its working groups. It is a new
era of technologies you use
every day for web applications.
Before we dive in deep details of
HTML5 and CSS3 let’s talk
about some benefits and
challenges we’ll face.
A Platform For Web Development
A lot of new features of HTML center around for creating web
based applications. From more descriptive tags and better cross site
and cross window communication to animations and multimedia
support, developers using many HTML5 and CSS3 have a lot of new
tools for better user experience and to make richer and more
interactive applications on the web.
Now the question is that how HTML5 and CSS3 provide advance
benefits in web application? You will see how all of those
unpredictable benefits you will gain. So let’s start.
Backward Compatibility
If you have worked with HTML or XML you’ve come across the
doctype declaration before. It is used to tell validators and editors
what tags and attributes you can use and how the document
should be formed. Lot of web browsers used it to determine how
the browser will render the page. A valid doctype causes browsers
to render pages in “standard mode.”
1.Improving User Interfaces
1.1 New Structural and Tag Attributes
I’d like to talk about a serious problem affecting many web
developers today. Most of the developers affected by Divitis ,they
wrap elements with extra div tags with IDs such as
banner, sidebar, article, and footer-is rampant.
HTML5 specification provides a cure in the form of new semantic
tags that describe the content they contain.
For example:
<header> Defines a header region of the page or section.
<footer> Defines a footer region of the page or section.
<nav> Defines a navigation section of the page or section.
1.2 Creating User-Friendly Web Forms
You turn to Prototype or JQuery, or you roll your own controls and
features using a combinations of HTML,CSS and JavaScript. Now here are
the some new attribute to turn any HTML field into a user input control.
For example:
Email field [<input type=“email”>]
Display a form field for email address.
URL field [<input type=“url”>]
Display a form field for URLs.
Search field [<input type=“search”>
Display a form field for search keywords.
2.Making Better User Interface With CSS3
2.1 Building Mobile Interface with Media Queries
We’ve been able to media specific style sheets .We can use media
queries to determine the following:
• Resolution
• Orientation
• Device width and height
• Width and height of the browser window
3. Improving Accessibility
3.1 Providing Navigation Hints with ARIA Roles
HTML5’s new role attribute lets us assign “accessibility” to each
element on your page..Accessibility for Rich Internet Applications
(ARIA) is a specification that provides ways to improve the
accessibility of websites. There are classification of roles that you
can put to use now are landmark role and document role.HTML5
says that some elements have default roles and can’t be overridden.
4. New Sight & Sound
4.1 Drawing On Canvas
Canvas is nothing but a 2D drawing platform within the browser
that uses nothing more than JavaScript and HTML with no plugins.
Canvas is extensible through a JavaScript API. Now it is openly
developed as a W3C specifications. There are the some feature and
uses of canvas:
• Canvas is bitmap system
• Used for data visualization
• Animated Graphics
• Web applications
• Games
4.2 Eye Candy
ONE of the first things you'll notice about the new Windows Vista
operating system from Microsoft is the serious amount of eye candy
that comes at you.
It requires the new graphical user interface that makes better use of
today's powerful graphics hardware. You need a minimum of 128MB
of video memory on your 3D graphics card, 1 gigabyte of system
memory and a processor running at 1 gigahertz to enjoy the show.
5.Future Enhancement
5.1 CSS Transitions
Interaction invitation are important to good user experience
design, and CSS has supported pseudoclasses so that we can do
some basic interaction cues on our elements.
5.2 WebGL
WebGL describes how to work with 3D objects. The WebGL
specification isn’t part of HTML5, but Apple, Google, Opera, and
Mozilla are part of the working group and support in their browsers.
5.3 Indexed Database APIs
Index Database API is a key/value store similar to the web storage
APIs like localStorage and sessionStorage, but it provides methods
for performing advanced queries.
Conclusion
If you follow the progress of HTML5 and CSS3 and stay up-to-date
with what’s happening, you’ll be fine. All these are not final
specifications for web development anything in those could
change. While Firefox, Chrome, and Safari have strong HTML5
support. But before you think too much about the future, let's start
working with HTML5.
HTML5- The Boosting Era of Web Development

More Related Content

What's hot

Web Standards
Web StandardsWeb Standards
Web Standards
ChrisF1502010
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
FortySeven Media
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013Thomas Daly
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
Chandra S Oemarjadi
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Sean Burgess
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2yuvaraj72
 
Html 5
Html 5Html 5
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
Christian Heilmann
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
Robert Nyman
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobBrenna Van Norman
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
Vlad Fedosov
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
Daniel Egan
 
Implementing Web Services In Java
Implementing Web Services In JavaImplementing Web Services In Java
Implementing Web Services In Java
Edureka!
 
Introducing the JotSpot Data Model and API
Introducing the JotSpot Data Model and APIIntroducing the JotSpot Data Model and API
Introducing the JotSpot Data Model and API
Scott McMullan
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
 

What's hot (19)

Web Standards
Web StandardsWeb Standards
Web Standards
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
 
What's new in XCC 7.0
What's new in XCC 7.0What's new in XCC 7.0
What's new in XCC 7.0
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
 
Html 5
Html 5Html 5
Html 5
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer Job
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
 
Implementing Web Services In Java
Implementing Web Services In JavaImplementing Web Services In Java
Implementing Web Services In Java
 
Introducing the JotSpot Data Model and API
Introducing the JotSpot Data Model and APIIntroducing the JotSpot Data Model and API
Introducing the JotSpot Data Model and API
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 

Similar to HTML5- The Boosting Era of Web Development

HTML 5 - A developers perspective
HTML 5 - A developers perspectiveHTML 5 - A developers perspective
HTML 5 - A developers perspective
Santhosh Kumar Srinivasan
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
SEO expate Bangladesh Ltd
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
Laura Miller
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
Laura Miller
 
HTML5 Development Benefits, Features and Cost For 2024.pdf
HTML5 Development Benefits, Features and Cost For 2024.pdfHTML5 Development Benefits, Features and Cost For 2024.pdf
HTML5 Development Benefits, Features and Cost For 2024.pdf
JPLoft Solutions
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
Codemotion
 
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
Integrated IT Solutions
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Lachlan Hardy
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Stack Learner
 
7 new techniques every web developer should know
7 new techniques every web developer should know7 new techniques every web developer should know
7 new techniques every web developer should know
Mitiz Technologies
 
Shivaji PPT.pptx
Shivaji PPT.pptxShivaji PPT.pptx
Shivaji PPT.pptx
BONUSAIVENKATADEEPAK
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesNicklas Andersson
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7Hisham Mat Hussin
 

Similar to HTML5- The Boosting Era of Web Development (20)

HTML 5 - A developers perspective
HTML 5 - A developers perspectiveHTML 5 - A developers perspective
HTML 5 - A developers perspective
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
HTML5 Development Benefits, Features and Cost For 2024.pdf
HTML5 Development Benefits, Features and Cost For 2024.pdfHTML5 Development Benefits, Features and Cost For 2024.pdf
HTML5 Development Benefits, Features and Cost For 2024.pdf
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
 
Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
6 Essential Tools for Frontend and Backend Development to Use in 2023.pdf
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
7 new techniques every web developer should know
7 new techniques every web developer should know7 new techniques every web developer should know
7 new techniques every web developer should know
 
Shivaji PPT.pptx
Shivaji PPT.pptxShivaji PPT.pptx
Shivaji PPT.pptx
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight Experiences
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
 
Html5
Html5Html5
Html5
 

More from MobilePundits

The Essentials of Mobile App Testing and Monitoring
The Essentials of Mobile App Testing and MonitoringThe Essentials of Mobile App Testing and Monitoring
The Essentials of Mobile App Testing and Monitoring
MobilePundits
 
How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?
MobilePundits
 
How to make your app successful with mobile app testing?
How to make your app successful with mobile app testing?How to make your app successful with mobile app testing?
How to make your app successful with mobile app testing?
MobilePundits
 
How Social Media Helps in Mobile App Success?
How Social Media Helps in Mobile App Success?How Social Media Helps in Mobile App Success?
How Social Media Helps in Mobile App Success?
MobilePundits
 
How Mobile App Plays Major Role in Business Success?
How Mobile App Plays Major Role in Business Success?How Mobile App Plays Major Role in Business Success?
How Mobile App Plays Major Role in Business Success?
MobilePundits
 
Mobile Development With Android
Mobile Development With AndroidMobile Development With Android
Mobile Development With Android
MobilePundits
 
Cross-Platform App Development in C#
Cross-Platform App Development in C#Cross-Platform App Development in C#
Cross-Platform App Development in C#
MobilePundits
 
Android & iOS Marketplace in Development Era
Android & iOS Marketplace in Development EraAndroid & iOS Marketplace in Development Era
Android & iOS Marketplace in Development Era
MobilePundits
 
Smartphone- Revolutionary Application Development in Australia
Smartphone- Revolutionary Application Development in AustraliaSmartphone- Revolutionary Application Development in Australia
Smartphone- Revolutionary Application Development in Australia
MobilePundits
 

More from MobilePundits (9)

The Essentials of Mobile App Testing and Monitoring
The Essentials of Mobile App Testing and MonitoringThe Essentials of Mobile App Testing and Monitoring
The Essentials of Mobile App Testing and Monitoring
 
How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?
 
How to make your app successful with mobile app testing?
How to make your app successful with mobile app testing?How to make your app successful with mobile app testing?
How to make your app successful with mobile app testing?
 
How Social Media Helps in Mobile App Success?
How Social Media Helps in Mobile App Success?How Social Media Helps in Mobile App Success?
How Social Media Helps in Mobile App Success?
 
How Mobile App Plays Major Role in Business Success?
How Mobile App Plays Major Role in Business Success?How Mobile App Plays Major Role in Business Success?
How Mobile App Plays Major Role in Business Success?
 
Mobile Development With Android
Mobile Development With AndroidMobile Development With Android
Mobile Development With Android
 
Cross-Platform App Development in C#
Cross-Platform App Development in C#Cross-Platform App Development in C#
Cross-Platform App Development in C#
 
Android & iOS Marketplace in Development Era
Android & iOS Marketplace in Development EraAndroid & iOS Marketplace in Development Era
Android & iOS Marketplace in Development Era
 
Smartphone- Revolutionary Application Development in Australia
Smartphone- Revolutionary Application Development in AustraliaSmartphone- Revolutionary Application Development in Australia
Smartphone- Revolutionary Application Development in Australia
 

Recently uploaded

When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
Fwdays
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 

Recently uploaded (20)

When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 

HTML5- The Boosting Era of Web Development

  • 1.
  • 2. Content at a Glance Preface HTML5:The Platform vs. the Specification How This Works An Overview Of HTML5 & CSS3 A Platform For Web Development Backward Compatibility How HTML5 & CSS3 Boost The Web Development? 1.Improving User Interfaces 1.1 New Structural and Tag Attributes 1.2Creating User-Friendly Web Forms 2.Making Better User Interface With CSS3 2.1 Building Mobile Interface with Media Queries
  • 3. 3. Improving Accessibility 3.1 Providing Navigation Hints with ARIA Roles 4. New Sight & Sound 4.1 Drawing On Canvas 4.2 Eye Candy 5. Future Enhancements 5.1 CSS Transitions 5.2 WebGL 5.3 Indexed Database APIs  Conclusion
  • 4. Preface Just three months are like a year if you spend it on web. This is the pretty experience of much of the web developers. Sometime before HTML5 and CSS3 looks like far off in the way but now many companies are using this technologies. HTML5 and CSS3 is a building block for the next era of web applications. Here we are going to find about all the ways you can use HTML5 and CSS3.Before starting let’s t have a look on HTML5 and CSS3 buzzwords.
  • 5. HTML5: The Platform vs. the Specification HTML is a specification that describes some new tags & markup, as well as some wonderful JavaScript APIs, but it’s getting caught up in whirlwind of hype and promises. In some cases pieces from the CSS3 specification such as shadow, gradients and transformations are being called “HTML.” We’ll focus on the HTML5 and CSS3 specifications themselves and how you can the techniques they describe. We’ll look into a suit of specifications that were once part of HTML5 but are in use right now on multiple platforms.
  • 6.
  • 7. How This Works Here we focuses on a specific group of problems that we can solve with HTML5 and CSS3. We introduce you to specific concept and walk you through building a simple example using the concept. We are focusing on what you are using today. There are more HTML5 and CSS3 features that aren’t in widespread use yet. So let’s start your web journey with us.
  • 8. An Overview Of HTML5 & CSS3 HTML5 and CSS3 are two new standards proposed by W3C and its working groups. It is a new era of technologies you use every day for web applications. Before we dive in deep details of HTML5 and CSS3 let’s talk about some benefits and challenges we’ll face.
  • 9. A Platform For Web Development A lot of new features of HTML center around for creating web based applications. From more descriptive tags and better cross site and cross window communication to animations and multimedia support, developers using many HTML5 and CSS3 have a lot of new tools for better user experience and to make richer and more interactive applications on the web. Now the question is that how HTML5 and CSS3 provide advance benefits in web application? You will see how all of those unpredictable benefits you will gain. So let’s start.
  • 10. Backward Compatibility If you have worked with HTML or XML you’ve come across the doctype declaration before. It is used to tell validators and editors what tags and attributes you can use and how the document should be formed. Lot of web browsers used it to determine how the browser will render the page. A valid doctype causes browsers to render pages in “standard mode.”
  • 11.
  • 12. 1.Improving User Interfaces 1.1 New Structural and Tag Attributes I’d like to talk about a serious problem affecting many web developers today. Most of the developers affected by Divitis ,they wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer-is rampant. HTML5 specification provides a cure in the form of new semantic tags that describe the content they contain. For example: <header> Defines a header region of the page or section. <footer> Defines a footer region of the page or section. <nav> Defines a navigation section of the page or section.
  • 13. 1.2 Creating User-Friendly Web Forms You turn to Prototype or JQuery, or you roll your own controls and features using a combinations of HTML,CSS and JavaScript. Now here are the some new attribute to turn any HTML field into a user input control. For example: Email field [<input type=“email”>] Display a form field for email address. URL field [<input type=“url”>] Display a form field for URLs. Search field [<input type=“search”> Display a form field for search keywords.
  • 14. 2.Making Better User Interface With CSS3 2.1 Building Mobile Interface with Media Queries We’ve been able to media specific style sheets .We can use media queries to determine the following: • Resolution • Orientation • Device width and height • Width and height of the browser window
  • 15. 3. Improving Accessibility 3.1 Providing Navigation Hints with ARIA Roles HTML5’s new role attribute lets us assign “accessibility” to each element on your page..Accessibility for Rich Internet Applications (ARIA) is a specification that provides ways to improve the accessibility of websites. There are classification of roles that you can put to use now are landmark role and document role.HTML5 says that some elements have default roles and can’t be overridden.
  • 16. 4. New Sight & Sound 4.1 Drawing On Canvas Canvas is nothing but a 2D drawing platform within the browser that uses nothing more than JavaScript and HTML with no plugins. Canvas is extensible through a JavaScript API. Now it is openly developed as a W3C specifications. There are the some feature and uses of canvas: • Canvas is bitmap system • Used for data visualization • Animated Graphics • Web applications • Games
  • 17. 4.2 Eye Candy ONE of the first things you'll notice about the new Windows Vista operating system from Microsoft is the serious amount of eye candy that comes at you. It requires the new graphical user interface that makes better use of today's powerful graphics hardware. You need a minimum of 128MB of video memory on your 3D graphics card, 1 gigabyte of system memory and a processor running at 1 gigahertz to enjoy the show.
  • 18. 5.Future Enhancement 5.1 CSS Transitions Interaction invitation are important to good user experience design, and CSS has supported pseudoclasses so that we can do some basic interaction cues on our elements.
  • 19. 5.2 WebGL WebGL describes how to work with 3D objects. The WebGL specification isn’t part of HTML5, but Apple, Google, Opera, and Mozilla are part of the working group and support in their browsers.
  • 20. 5.3 Indexed Database APIs Index Database API is a key/value store similar to the web storage APIs like localStorage and sessionStorage, but it provides methods for performing advanced queries.
  • 21. Conclusion If you follow the progress of HTML5 and CSS3 and stay up-to-date with what’s happening, you’ll be fine. All these are not final specifications for web development anything in those could change. While Firefox, Chrome, and Safari have strong HTML5 support. But before you think too much about the future, let's start working with HTML5.