SlideShare a Scribd company logo
1 of 20
© SpringPeople Software Private Limited, All Rights Reserved.© SpringPeople Software Private Limited, All Rights Reserved.
Introduction to HTML5 & CSS3
© SpringPeople Software Private Limited, All Rights Reserved.
What’s New in HTML5?
• Client Side Storage
• Web SQL Storage
• Offline
• Geo Location
• Web Workers
• Drag & Drop
• New XHR
• Web Sockets
© SpringPeople Software Private Limited, All Rights Reserved.
Client Side Storage
• Old Way: Cookies
– Small text files with name values pairs
• Not very scalable
– Accessible for any one on the client
• Security issues, to some extant
• New Way: Storage
– Browser specific implementation to store name value pairs
– Value can be number, string or any complex object
– Accessible only for the owning application
– Two kinds of storage
• Local Storage for persistence across browser sessions
• Session Storage for persistence for a given session
© SpringPeople Software Private Limited, All Rights Reserved.
Client Side Storage API
• Feature Detection
– If(typeof(localStorage) == undefined)
– If(typeof(sessionStorage) == undefined)
• Storing in storage
– localStorage.setItem(name, value)
– sessionStorage.setItem(name, value)
• Retrieving from storage
– localStorage.getItem(name)
– sessionStorage.getItem(name)
© SpringPeople Software Private Limited, All Rights Reserved.
Web SQL API
•Creating database
•var db = window.openDatabase()
•Opens existing database or creates new
•Executing DDL and DML queries
•db.transaction(function(tx){
•tx.executeSQL(query, [binding_data], successFn, errorFn);
}
•Reading data from result set
•tx.executeSQL(query, [binding_data], function(tx,data){
// traverse data.rows.item
© SpringPeople Software Private Limited, All Rights Reserved.
Geo Location
•In-built support for GPS
•Applications request the browser for the Geo Location information
•Geo Location is a privacy issue
•Browsers prompt the user before providing the information
•Browser can be configured to deal with Geo Location requests from various
applications
•Browser requests the device for the geo location information
•Based on the IP Address and ISP
•Based on GPS or Wi-Fi Geo or Cell Phone Location Data
•Applications can retrieve geo location information
•Altitude
•Longitude
•Latitude
•Speed
•Accuracy
•Altitude Accuracy
© SpringPeople Software Private Limited, All Rights Reserved.
Native Drag & Drop
• Nodes can be made draggable
– From drag source to drop targets
• Events can be handled
– dragstart
– drag: fired repeatedly on the drag source
– dragenter: fired on the current target
– dragleave: fired on the current target
– dragover: fires on the current target of the mouse
– drop: fires on the current target
– dragend: fires on the dragsource
• DataTransfer carries data during dragging
© SpringPeople Software Private Limited, All Rights Reserved.
Web Workers
• Browser & Concurrency
– Browser was essentially single threaded
– Asynchronous calls also run in the same thread
– No support for concurrency
• Web Workers
– Brings in concurrency
– Each worker thread associates with a job/task
– Main and worker threads communicate
© SpringPeople Software Private Limited, All Rights Reserved.
Offline Web App
• To run even without network connectivity
– Updates when online
• Builds Application Cache
• Using cache manifest
• Window Events for connectivity
– online and offline
© SpringPeople Software Private Limited, All Rights Reserved.
New HTML5 Form Elements
• tel Telephone number
• email Email address text field
• url Web location URL
• search Term to supply to a search engine. For example, the search bar atop a browser.
• range Numeric selector within a range of values, typically visualized as a slider
• number A field containing a numeric value only
• progress
• color Color selector, which could be represented by a wheel or swatch picker
• datetime Full date and time display, including a time zone, as shown in Figure 8-3
• datetime-local Date and time display, with no setting or indication for time zones
• time Time indicator and selector, with no time zone information
• date Selector for calendar date
• week Selector for a week within a given year
• month Selector for a month within a given yearColor selector, which could be represented by
a wheel or swatch picker
© SpringPeople Software Private Limited, All Rights Reserved.
New HTML5 Attributes
• Placeholder for input text elements
• Autocomplete on/off/unspecified
• Autofocus max one element per form
• Spellcheck true/false for text & textarea
• List with Datalist for auto list
• Step, Min and Max for range
• Required for text
© SpringPeople Software Private Limited, All Rights Reserved.
HTML5 Form Validations
• valueMissing
• typeMismatch
• patternMismatch
• tooLong
• rangeUnderflow
• rangeOverflow
• stepMismatch
© SpringPeople Software Private Limited, All Rights Reserved.
Media
•Two new media tags
•Audio and video
•Exposes scriptable API to the document
•Tag defintion
•Attribute: controls
•Attribute: autoplay
•Children: source with src attribute
•Functions
•load() to load the media file
•play() to play the media file
•pause() to pause the playing media file
•canPlayType() to verify the compatibility
© SpringPeople Software Private Limited, All Rights Reserved.
CSS Pseudo Functions
• Selector:nth-of-type(even)
• Selector:nth-of-type(odd)
• Selector:nth-child(n)
• Selector:nth-child(n+2)
• Selector:nth-child(2n)
• Selector:nth-child(2n+4)
• Selector:last-child
• Selector:nth-last-child(n)
• Selector:only-child
© SpringPeople Software Private Limited, All Rights Reserved.
CSS3 Color & Borders
• Color
– RGB
– RGBa with transparancy(0-1)
– Opacity
• Borders
– border-top-left-radius: 20px;
– border-top-right-radius: 20px;
– border-bottom-right-radius: 20px;
– border-bottom-left-radius:20px;
• Box-Shadow: top right bottom left rgba [inset]
© SpringPeople Software Private Limited, All Rights Reserved.
CSS3 Selectors
• Combinators
– selector1 > selector2
• Selector2 is direct child of selector1
– selector1 ~ selector2
• selector1 and selector2 share same parent
• Attributes
– selector[attribute]
– selecor[attribute=value]
– selector[attribute^=substring] //Value starts with substring
– selector[attribute$=substring] //Value ends with the substring
– Selector[attribute*=substring] //value contains substring
© SpringPeople Software Private Limited, All Rights Reserved.
Web Sockets
• Answer to Polling & Comet SSP technologies
• Need server support
– Think of Node.js
• Step-1 (Initial Handshaking)
– Browser sends WebSocket request to the server on HTTP
– Server responds back with the upgraded protocol info
– Response code must be 101
• Step-2 (Actual communication)
– Browser & server involves in full-duplex communication
© SpringPeople Software Private Limited, All Rights Reserved.
Become a HTML5 & CSS3 Expert In
2 Days Flat
Attend the 2-Days “HTML5 & CSS3 Workshop”
View Complete Details
© SpringPeople Software Private Limited, All Rights Reserved.
Who will benefit?
Developers interested in designing, creating, and deploying HTML5 web
applications. It is valuable to both beginners and advanced developers
that already have experience in developing web applications.
View Complete Details
© SpringPeople Software Private Limited, All Rights Reserved.
Q & A
training@springpeople.com
+91 80 65679700
www.springpeople.com
A SpringSource Certified Partner and
VMware Authorized Training Center

More Related Content

What's hot

Микросервисы со Spring Boot & Spring Cloud
Микросервисы со Spring Boot & Spring CloudМикросервисы со Spring Boot & Spring Cloud
Микросервисы со Spring Boot & Spring CloudVitebsk DSC
 
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...Jitendra Bafna
 
Magento Developer Talk. Microservice Architecture and Actor Model
Magento Developer Talk. Microservice Architecture and Actor ModelMagento Developer Talk. Microservice Architecture and Actor Model
Magento Developer Talk. Microservice Architecture and Actor ModelIgor Miniailo
 
Angular4 kickstart
Angular4 kickstartAngular4 kickstart
Angular4 kickstartFoyzul Karim
 
Elastic search adaptto2014
Elastic search adaptto2014Elastic search adaptto2014
Elastic search adaptto2014Vivek Sachdeva
 
Spring integration with the Java DSL
Spring integration with the Java DSLSpring integration with the Java DSL
Spring integration with the Java DSLBen Wilcock
 
Single page applications with backbone js
Single page applications with backbone jsSingle page applications with backbone js
Single page applications with backbone jsGil Fink
 
SignalR With ASP.Net part1
SignalR With ASP.Net part1SignalR With ASP.Net part1
SignalR With ASP.Net part1Esraa Ammar
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community
 
Before you jump into Angular
Before you jump into AngularBefore you jump into Angular
Before you jump into AngularM A Hossain Tonu
 
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...Redis Labs
 
Mule Hyderabad Meetup (Mule 4)
Mule Hyderabad Meetup (Mule 4)Mule Hyderabad Meetup (Mule 4)
Mule Hyderabad Meetup (Mule 4)Vijay Reddy
 
Signalr with ASP.Net part2
Signalr with ASP.Net part2Signalr with ASP.Net part2
Signalr with ASP.Net part2Esraa Ammar
 
Onion Architecture and the Blog
Onion Architecture and the BlogOnion Architecture and the Blog
Onion Architecture and the Blogbarryosull
 
SignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersSignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersShivanand Arur
 
Static web apps by GitHub action
Static web apps by GitHub actionStatic web apps by GitHub action
Static web apps by GitHub actionSeven Peaks Speaks
 

What's hot (20)

Микросервисы со Spring Boot & Spring Cloud
Микросервисы со Spring Boot & Spring CloudМикросервисы со Spring Boot & Spring Cloud
Микросервисы со Spring Boot & Spring Cloud
 
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...
MuleSoft Surat Virtual Meetup#28 - Exposing and Consuming SOAP Service - SOAP...
 
Magento Developer Talk. Microservice Architecture and Actor Model
Magento Developer Talk. Microservice Architecture and Actor ModelMagento Developer Talk. Microservice Architecture and Actor Model
Magento Developer Talk. Microservice Architecture and Actor Model
 
Angular4 kickstart
Angular4 kickstartAngular4 kickstart
Angular4 kickstart
 
SignalR with ASP.NET MVC 6
SignalR with ASP.NET MVC 6SignalR with ASP.NET MVC 6
SignalR with ASP.NET MVC 6
 
Elastic search adaptto2014
Elastic search adaptto2014Elastic search adaptto2014
Elastic search adaptto2014
 
Spring integration with the Java DSL
Spring integration with the Java DSLSpring integration with the Java DSL
Spring integration with the Java DSL
 
Single page applications with backbone js
Single page applications with backbone jsSingle page applications with backbone js
Single page applications with backbone js
 
SignalR With ASP.Net part1
SignalR With ASP.Net part1SignalR With ASP.Net part1
SignalR With ASP.Net part1
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
 
Before you jump into Angular
Before you jump into AngularBefore you jump into Angular
Before you jump into Angular
 
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...
Rust and Redis - Solving Problems for Kubernetes by Ravi Jagannathan of VMwar...
 
Mule Hyderabad Meetup (Mule 4)
Mule Hyderabad Meetup (Mule 4)Mule Hyderabad Meetup (Mule 4)
Mule Hyderabad Meetup (Mule 4)
 
Signalr with ASP.Net part2
Signalr with ASP.Net part2Signalr with ASP.Net part2
Signalr with ASP.Net part2
 
Javantura v4 - FreeMarker in Spring web - Marin Kalapać
Javantura v4 - FreeMarker in Spring web - Marin KalapaćJavantura v4 - FreeMarker in Spring web - Marin Kalapać
Javantura v4 - FreeMarker in Spring web - Marin Kalapać
 
Onion Architecture and the Blog
Onion Architecture and the BlogOnion Architecture and the Blog
Onion Architecture and the Blog
 
SignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersSignalR for ASP.NET Developers
SignalR for ASP.NET Developers
 
Rest assured
Rest assuredRest assured
Rest assured
 
Mule 4 vanrish
Mule 4   vanrishMule 4   vanrish
Mule 4 vanrish
 
Static web apps by GitHub action
Static web apps by GitHub actionStatic web apps by GitHub action
Static web apps by GitHub action
 

Similar to SpringPeople Introduction to HTML5 & CSS3

Perfect Norikra 2nd Season
Perfect Norikra 2nd SeasonPerfect Norikra 2nd Season
Perfect Norikra 2nd SeasonSATOSHI TAGOMORI
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5John Reiser
 
Web development basics (Part-3)
Web development basics (Part-3)Web development basics (Part-3)
Web development basics (Part-3)Rajat Pratap Singh
 
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global Lucidworks
 
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...Spark Summit
 
How to create custom dashboards in Elastic Search / Kibana with Performance V...
How to create custom dashboards in Elastic Search / Kibana with Performance V...How to create custom dashboards in Elastic Search / Kibana with Performance V...
How to create custom dashboards in Elastic Search / Kibana with Performance V...PerformanceVision (previously SecurActive)
 
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...Lucidworks
 
Solving the Game Content Problem
Solving the Game Content ProblemSolving the Game Content Problem
Solving the Game Content ProblemKoray Hagen
 
Measuring CDN performance and why you're doing it wrong
Measuring CDN performance and why you're doing it wrongMeasuring CDN performance and why you're doing it wrong
Measuring CDN performance and why you're doing it wrongFastly
 
Introducing Telerik RAD Controls for WP7
Introducing Telerik RAD Controls for WP7Introducing Telerik RAD Controls for WP7
Introducing Telerik RAD Controls for WP7Kunal Chowdhury
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)Rajat Pratap Singh
 
Using LLVM to accelerate processing of data in Apache Arrow
Using LLVM to accelerate processing of data in Apache ArrowUsing LLVM to accelerate processing of data in Apache Arrow
Using LLVM to accelerate processing of data in Apache ArrowDataWorks Summit
 
drupal 7 amfserver presentation: integrating flash and drupal
drupal 7 amfserver presentation: integrating flash and drupaldrupal 7 amfserver presentation: integrating flash and drupal
drupal 7 amfserver presentation: integrating flash and drupalrolf vreijdenberger
 
Xamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupXamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupSeamgen
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on RailsAvi Kedar
 
On-boarding with JanusGraph Performance
On-boarding with JanusGraph PerformanceOn-boarding with JanusGraph Performance
On-boarding with JanusGraph PerformanceChin Huang
 
HTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsHTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsFisnik Doko
 
London devops logging
London devops loggingLondon devops logging
London devops loggingTomas Doran
 

Similar to SpringPeople Introduction to HTML5 & CSS3 (20)

Perfect Norikra 2nd Season
Perfect Norikra 2nd SeasonPerfect Norikra 2nd Season
Perfect Norikra 2nd Season
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
 
Web development basics (Part-3)
Web development basics (Part-3)Web development basics (Part-3)
Web development basics (Part-3)
 
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global
Solr Under the Hood at S&P Global- Sumit Vadhera, S&P Global
 
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...
Unified Framework for Real Time, Near Real Time and Offline Analysis of Video...
 
How to create custom dashboards in Elastic Search / Kibana with Performance V...
How to create custom dashboards in Elastic Search / Kibana with Performance V...How to create custom dashboards in Elastic Search / Kibana with Performance V...
How to create custom dashboards in Elastic Search / Kibana with Performance V...
 
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...
Never Stop Exploring - Pushing the Limits of Solr: Presented by Anirudha Jadh...
 
Solving the Game Content Problem
Solving the Game Content ProblemSolving the Game Content Problem
Solving the Game Content Problem
 
Measuring CDN performance and why you're doing it wrong
Measuring CDN performance and why you're doing it wrongMeasuring CDN performance and why you're doing it wrong
Measuring CDN performance and why you're doing it wrong
 
Qtp - Introduction to synchronization
Qtp -  Introduction to synchronizationQtp -  Introduction to synchronization
Qtp - Introduction to synchronization
 
Introducing Telerik RAD Controls for WP7
Introducing Telerik RAD Controls for WP7Introducing Telerik RAD Controls for WP7
Introducing Telerik RAD Controls for WP7
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
 
Using LLVM to accelerate processing of data in Apache Arrow
Using LLVM to accelerate processing of data in Apache ArrowUsing LLVM to accelerate processing of data in Apache Arrow
Using LLVM to accelerate processing of data in Apache Arrow
 
drupal 7 amfserver presentation: integrating flash and drupal
drupal 7 amfserver presentation: integrating flash and drupaldrupal 7 amfserver presentation: integrating flash and drupal
drupal 7 amfserver presentation: integrating flash and drupal
 
Xamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupXamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego Meetup
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
On-boarding with JanusGraph Performance
On-boarding with JanusGraph PerformanceOn-boarding with JanusGraph Performance
On-boarding with JanusGraph Performance
 
HTML5 features & JavaScript APIs
HTML5 features & JavaScript APIsHTML5 features & JavaScript APIs
HTML5 features & JavaScript APIs
 
London devops logging
London devops loggingLondon devops logging
London devops logging
 

More from SpringPeople

Growth hacking tips and tricks that you can try
Growth hacking tips and tricks that you can tryGrowth hacking tips and tricks that you can try
Growth hacking tips and tricks that you can trySpringPeople
 
Top Big data Analytics tools: Emerging trends and Best practices
Top Big data Analytics tools: Emerging trends and Best practicesTop Big data Analytics tools: Emerging trends and Best practices
Top Big data Analytics tools: Emerging trends and Best practicesSpringPeople
 
Introduction to Big Data
Introduction to Big DataIntroduction to Big Data
Introduction to Big DataSpringPeople
 
Introduction to Microsoft Azure IaaS
Introduction to Microsoft Azure IaaSIntroduction to Microsoft Azure IaaS
Introduction to Microsoft Azure IaaSSpringPeople
 
Introduction to Selenium WebDriver
Introduction to Selenium WebDriverIntroduction to Selenium WebDriver
Introduction to Selenium WebDriverSpringPeople
 
Introduction to Open stack - An Overview
Introduction to Open stack - An Overview Introduction to Open stack - An Overview
Introduction to Open stack - An Overview SpringPeople
 
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...SpringPeople
 
Why 2 million Developers depend on MuleSoft
Why 2 million Developers depend on MuleSoftWhy 2 million Developers depend on MuleSoft
Why 2 million Developers depend on MuleSoftSpringPeople
 
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorials
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorialsMongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorials
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorialsSpringPeople
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullySpringPeople
 
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...SpringPeople
 
SpringPeople - Introduction to Cloud Computing
SpringPeople - Introduction to Cloud ComputingSpringPeople - Introduction to Cloud Computing
SpringPeople - Introduction to Cloud ComputingSpringPeople
 
SpringPeople - Devops skills - Do you have what it takes?
SpringPeople - Devops skills - Do you have what it takes?SpringPeople - Devops skills - Do you have what it takes?
SpringPeople - Devops skills - Do you have what it takes?SpringPeople
 
Elastic - ELK, Logstash & Kibana
Elastic - ELK, Logstash & KibanaElastic - ELK, Logstash & Kibana
Elastic - ELK, Logstash & KibanaSpringPeople
 
Hadoop data access layer v4.0
Hadoop data access layer v4.0Hadoop data access layer v4.0
Hadoop data access layer v4.0SpringPeople
 
Introduction To Core Java - SpringPeople
Introduction To Core Java - SpringPeopleIntroduction To Core Java - SpringPeople
Introduction To Core Java - SpringPeopleSpringPeople
 
Introduction To Hadoop Administration - SpringPeople
Introduction To Hadoop Administration - SpringPeopleIntroduction To Hadoop Administration - SpringPeople
Introduction To Hadoop Administration - SpringPeopleSpringPeople
 
Introduction To Cloud Foundry - SpringPeople
Introduction To Cloud Foundry - SpringPeopleIntroduction To Cloud Foundry - SpringPeople
Introduction To Cloud Foundry - SpringPeopleSpringPeople
 
Introduction To Groovy And Grails - SpringPeople
Introduction To Groovy And Grails - SpringPeopleIntroduction To Groovy And Grails - SpringPeople
Introduction To Groovy And Grails - SpringPeopleSpringPeople
 
Introduction To Jenkins - SpringPeople
Introduction To Jenkins - SpringPeopleIntroduction To Jenkins - SpringPeople
Introduction To Jenkins - SpringPeopleSpringPeople
 

More from SpringPeople (20)

Growth hacking tips and tricks that you can try
Growth hacking tips and tricks that you can tryGrowth hacking tips and tricks that you can try
Growth hacking tips and tricks that you can try
 
Top Big data Analytics tools: Emerging trends and Best practices
Top Big data Analytics tools: Emerging trends and Best practicesTop Big data Analytics tools: Emerging trends and Best practices
Top Big data Analytics tools: Emerging trends and Best practices
 
Introduction to Big Data
Introduction to Big DataIntroduction to Big Data
Introduction to Big Data
 
Introduction to Microsoft Azure IaaS
Introduction to Microsoft Azure IaaSIntroduction to Microsoft Azure IaaS
Introduction to Microsoft Azure IaaS
 
Introduction to Selenium WebDriver
Introduction to Selenium WebDriverIntroduction to Selenium WebDriver
Introduction to Selenium WebDriver
 
Introduction to Open stack - An Overview
Introduction to Open stack - An Overview Introduction to Open stack - An Overview
Introduction to Open stack - An Overview
 
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...
Best Practices for Administering Hadoop with Hortonworks Data Platform (HDP) ...
 
Why 2 million Developers depend on MuleSoft
Why 2 million Developers depend on MuleSoftWhy 2 million Developers depend on MuleSoft
Why 2 million Developers depend on MuleSoft
 
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorials
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorialsMongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorials
Mongo DB: Fundamentals & Basics/ An Overview of MongoDB/ Mongo DB tutorials
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium Successfully
 
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...
An Introduction of Big data; Big data for beginners; Overview of Big Data; Bi...
 
SpringPeople - Introduction to Cloud Computing
SpringPeople - Introduction to Cloud ComputingSpringPeople - Introduction to Cloud Computing
SpringPeople - Introduction to Cloud Computing
 
SpringPeople - Devops skills - Do you have what it takes?
SpringPeople - Devops skills - Do you have what it takes?SpringPeople - Devops skills - Do you have what it takes?
SpringPeople - Devops skills - Do you have what it takes?
 
Elastic - ELK, Logstash & Kibana
Elastic - ELK, Logstash & KibanaElastic - ELK, Logstash & Kibana
Elastic - ELK, Logstash & Kibana
 
Hadoop data access layer v4.0
Hadoop data access layer v4.0Hadoop data access layer v4.0
Hadoop data access layer v4.0
 
Introduction To Core Java - SpringPeople
Introduction To Core Java - SpringPeopleIntroduction To Core Java - SpringPeople
Introduction To Core Java - SpringPeople
 
Introduction To Hadoop Administration - SpringPeople
Introduction To Hadoop Administration - SpringPeopleIntroduction To Hadoop Administration - SpringPeople
Introduction To Hadoop Administration - SpringPeople
 
Introduction To Cloud Foundry - SpringPeople
Introduction To Cloud Foundry - SpringPeopleIntroduction To Cloud Foundry - SpringPeople
Introduction To Cloud Foundry - SpringPeople
 
Introduction To Groovy And Grails - SpringPeople
Introduction To Groovy And Grails - SpringPeopleIntroduction To Groovy And Grails - SpringPeople
Introduction To Groovy And Grails - SpringPeople
 
Introduction To Jenkins - SpringPeople
Introduction To Jenkins - SpringPeopleIntroduction To Jenkins - SpringPeople
Introduction To Jenkins - SpringPeople
 

Recently uploaded

PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 

Recently uploaded (20)

PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 

SpringPeople Introduction to HTML5 & CSS3

  • 1. © SpringPeople Software Private Limited, All Rights Reserved.© SpringPeople Software Private Limited, All Rights Reserved. Introduction to HTML5 & CSS3
  • 2. © SpringPeople Software Private Limited, All Rights Reserved. What’s New in HTML5? • Client Side Storage • Web SQL Storage • Offline • Geo Location • Web Workers • Drag & Drop • New XHR • Web Sockets
  • 3. © SpringPeople Software Private Limited, All Rights Reserved. Client Side Storage • Old Way: Cookies – Small text files with name values pairs • Not very scalable – Accessible for any one on the client • Security issues, to some extant • New Way: Storage – Browser specific implementation to store name value pairs – Value can be number, string or any complex object – Accessible only for the owning application – Two kinds of storage • Local Storage for persistence across browser sessions • Session Storage for persistence for a given session
  • 4. © SpringPeople Software Private Limited, All Rights Reserved. Client Side Storage API • Feature Detection – If(typeof(localStorage) == undefined) – If(typeof(sessionStorage) == undefined) • Storing in storage – localStorage.setItem(name, value) – sessionStorage.setItem(name, value) • Retrieving from storage – localStorage.getItem(name) – sessionStorage.getItem(name)
  • 5. © SpringPeople Software Private Limited, All Rights Reserved. Web SQL API •Creating database •var db = window.openDatabase() •Opens existing database or creates new •Executing DDL and DML queries •db.transaction(function(tx){ •tx.executeSQL(query, [binding_data], successFn, errorFn); } •Reading data from result set •tx.executeSQL(query, [binding_data], function(tx,data){ // traverse data.rows.item
  • 6. © SpringPeople Software Private Limited, All Rights Reserved. Geo Location •In-built support for GPS •Applications request the browser for the Geo Location information •Geo Location is a privacy issue •Browsers prompt the user before providing the information •Browser can be configured to deal with Geo Location requests from various applications •Browser requests the device for the geo location information •Based on the IP Address and ISP •Based on GPS or Wi-Fi Geo or Cell Phone Location Data •Applications can retrieve geo location information •Altitude •Longitude •Latitude •Speed •Accuracy •Altitude Accuracy
  • 7. © SpringPeople Software Private Limited, All Rights Reserved. Native Drag & Drop • Nodes can be made draggable – From drag source to drop targets • Events can be handled – dragstart – drag: fired repeatedly on the drag source – dragenter: fired on the current target – dragleave: fired on the current target – dragover: fires on the current target of the mouse – drop: fires on the current target – dragend: fires on the dragsource • DataTransfer carries data during dragging
  • 8. © SpringPeople Software Private Limited, All Rights Reserved. Web Workers • Browser & Concurrency – Browser was essentially single threaded – Asynchronous calls also run in the same thread – No support for concurrency • Web Workers – Brings in concurrency – Each worker thread associates with a job/task – Main and worker threads communicate
  • 9. © SpringPeople Software Private Limited, All Rights Reserved. Offline Web App • To run even without network connectivity – Updates when online • Builds Application Cache • Using cache manifest • Window Events for connectivity – online and offline
  • 10. © SpringPeople Software Private Limited, All Rights Reserved. New HTML5 Form Elements • tel Telephone number • email Email address text field • url Web location URL • search Term to supply to a search engine. For example, the search bar atop a browser. • range Numeric selector within a range of values, typically visualized as a slider • number A field containing a numeric value only • progress • color Color selector, which could be represented by a wheel or swatch picker • datetime Full date and time display, including a time zone, as shown in Figure 8-3 • datetime-local Date and time display, with no setting or indication for time zones • time Time indicator and selector, with no time zone information • date Selector for calendar date • week Selector for a week within a given year • month Selector for a month within a given yearColor selector, which could be represented by a wheel or swatch picker
  • 11. © SpringPeople Software Private Limited, All Rights Reserved. New HTML5 Attributes • Placeholder for input text elements • Autocomplete on/off/unspecified • Autofocus max one element per form • Spellcheck true/false for text & textarea • List with Datalist for auto list • Step, Min and Max for range • Required for text
  • 12. © SpringPeople Software Private Limited, All Rights Reserved. HTML5 Form Validations • valueMissing • typeMismatch • patternMismatch • tooLong • rangeUnderflow • rangeOverflow • stepMismatch
  • 13. © SpringPeople Software Private Limited, All Rights Reserved. Media •Two new media tags •Audio and video •Exposes scriptable API to the document •Tag defintion •Attribute: controls •Attribute: autoplay •Children: source with src attribute •Functions •load() to load the media file •play() to play the media file •pause() to pause the playing media file •canPlayType() to verify the compatibility
  • 14. © SpringPeople Software Private Limited, All Rights Reserved. CSS Pseudo Functions • Selector:nth-of-type(even) • Selector:nth-of-type(odd) • Selector:nth-child(n) • Selector:nth-child(n+2) • Selector:nth-child(2n) • Selector:nth-child(2n+4) • Selector:last-child • Selector:nth-last-child(n) • Selector:only-child
  • 15. © SpringPeople Software Private Limited, All Rights Reserved. CSS3 Color & Borders • Color – RGB – RGBa with transparancy(0-1) – Opacity • Borders – border-top-left-radius: 20px; – border-top-right-radius: 20px; – border-bottom-right-radius: 20px; – border-bottom-left-radius:20px; • Box-Shadow: top right bottom left rgba [inset]
  • 16. © SpringPeople Software Private Limited, All Rights Reserved. CSS3 Selectors • Combinators – selector1 > selector2 • Selector2 is direct child of selector1 – selector1 ~ selector2 • selector1 and selector2 share same parent • Attributes – selector[attribute] – selecor[attribute=value] – selector[attribute^=substring] //Value starts with substring – selector[attribute$=substring] //Value ends with the substring – Selector[attribute*=substring] //value contains substring
  • 17. © SpringPeople Software Private Limited, All Rights Reserved. Web Sockets • Answer to Polling & Comet SSP technologies • Need server support – Think of Node.js • Step-1 (Initial Handshaking) – Browser sends WebSocket request to the server on HTTP – Server responds back with the upgraded protocol info – Response code must be 101 • Step-2 (Actual communication) – Browser & server involves in full-duplex communication
  • 18. © SpringPeople Software Private Limited, All Rights Reserved. Become a HTML5 & CSS3 Expert In 2 Days Flat Attend the 2-Days “HTML5 & CSS3 Workshop” View Complete Details
  • 19. © SpringPeople Software Private Limited, All Rights Reserved. Who will benefit? Developers interested in designing, creating, and deploying HTML5 web applications. It is valuable to both beginners and advanced developers that already have experience in developing web applications. View Complete Details
  • 20. © SpringPeople Software Private Limited, All Rights Reserved. Q & A training@springpeople.com +91 80 65679700 www.springpeople.com A SpringSource Certified Partner and VMware Authorized Training Center