SlideShare a Scribd company logo
Introduction to HTML5
                            adrian.olaru@1and1.ro




Friday, December 10, 2010
What is HTML5?
                  New Wave of Exciting Technologies for Making Web Apps.




Friday, December 10, 2010
New doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN"
 "http://www.w3.org/TR/html4/strict.dtd">


   <!DOCTYPE html>



Friday, December 10, 2010
New Elements
                            header    hgroup
                             nav       details
                            section   summary
                            article   output
                             aside    progress
                            footer     menu



Friday, December 10, 2010

Recommended for you

REST: Theory vs Practice
REST: Theory vs PracticeREST: Theory vs Practice
REST: Theory vs Practice

This document discusses REST theory versus practice. It begins with introducing the two speakers, Subbu Allamaraju and Mike Amundsen. The objectives of the talk are then outlined, which are to understand that REST is a set of constraints that can be knowingly relaxed, work with underlying protocols, and apply sound software engineering. Common REST principles are then explained including identifying resources, using URIs, designing representations, using a uniform interface, and using hypermedia as the engine of application state. An example address book REST API is then demonstrated. The talk concludes by discussing practical considerations when implementing REST including managing concurrency, being creative with URIs, and that IDs alone are not as good as full URIs.

rest
NU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web PerformanceNU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web Performance

The document discusses various techniques for improving website performance and speed. It recommends prioritizing speed to provide a better user experience with slow networks or expensive data plans. Specific techniques mentioned include minimizing HTTP requests through combining and compressing CSS and JavaScript files, leveraging HTML5 features like application caching, optimizing images, and deferring unnecessary JavaScript loading. The document emphasizes that performance impacts both users and search engines like Google.

mobile webweb performance
Prerendering Chapter 0
Prerendering Chapter 0Prerendering Chapter 0
Prerendering Chapter 0

The document discusses concepts related to browser UI components and pre-rendering in Firefox and Fennec. It covers topics like nsWebShellWindow, browser.xul, tabbrowser, and GeckoView. It provides an overview of major source files and classes involved in rendering like browser.js, content.js, and DocShell. It also explains concepts like the browsing context, session history, windows, and the relationship between windows, DocShell, and documents.

geckoprerenderbrowser
Form enhancements
                                  new input types
                                 color             number
                                 time               month
                                 date              datetime
                                  url               range
                                 email              search
                                  tel               week
                             datetime-local

                      <input type="color" required="required" />
Friday, December 10, 2010
Form enhancements
                                 new attributes
                              required           autocomplete
                              autofocus             pattern
                                 ...




                      <input type="color" required="required" />
Friday, December 10, 2010
Video & Audio
                <video>
                <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
                 <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                 <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
                 fallback content here
                <video>



                <audio src="audio.mp3">fallback content here</audio>



                Video Formats:
                .mp4 = H.264 + AAC
                .ogg/.ogv = Theora + Vorbis
                .webm = VP8 + Vorbis

Friday, December 10, 2010
Canvas
                <canvas id="mycanvas" width="150" height="150">
                 fallback content here
                </canvas>




                var canvas = document.getElementById('mycanvas');
                var context = canvas.getContext('2d');
                context.fillStyle = "rgb(255,0,0)";
                context.fillRect(30, 30, 50, 50);


Friday, December 10, 2010

Recommended for you

Cookie and session
Cookie and sessionCookie and session
Cookie and session

This document discusses cookies and sessions in PHP. Cookies are used to store small pieces of data on the user's browser and move across pages, avoiding relogging in. Sessions store data on the server and are more secure. PHP uses the setcookie() function to set cookies and $_COOKIE to retrieve them. Sessions are started with session_start() and use $_SESSION to set and retrieve session variables. Cookies can be used to remember the session ID so sessions persist across browser closes.

phpsessioncookie
Distributed Identities with OpenID
Distributed Identities with OpenIDDistributed Identities with OpenID
Distributed Identities with OpenID

This document summarizes a presentation about identities on the web. It discusses the history of identity providers like Microsoft Passport and the rise of OpenID as an open standard for decentralized authentication. OpenID Connect is presented as an easier to implement specification built on OAuth 2.0 that provides a simpler user experience. Issues with OpenID 2.0 like usability and lack of marketing are covered. The role of proprietary solutions like Facebook Connect is also discussed.

oauthopenid connectopenid
Introduction to php web programming - sessions and cookies
Introduction to php   web programming - sessions and cookiesIntroduction to php   web programming - sessions and cookies
Introduction to php web programming - sessions and cookies

This document discusses cookies and sessions in PHP. Cookies are used to maintain state between HTTP requests and can store a small amount of text data in the user's browser. Sessions serve the same purpose as cookies but store data on the server rather than in the browser. The document demonstrates how to create, access, and destroy both cookies and sessions in PHP code. It also compares the key differences between cookies and sessions, such as cookies persisting after the browser closes while sessions do not.

introduction to php - web programmingsessions and cookies
History
                 manipulate the contents of the history stack


                history.pushState({page: 1}, "page 1", "page1.html");
                history.replaceState()


                window.onpopstate = function(e) {
                  e.state;
                };




Friday, December 10, 2010
Web Storage
                localStorage
                      data persists after the window is closed
                      data is shared across all browser windows.

                sessionStorage
                      data doesn't persist after the window is closed
                      data is not shared with other windows



                localStorage.setItem("size", "2"); //or localStorage.size = "2";
                localStorage.getItem("size"); //or localStorage.size
                localStorage.removeItem("size");
                localStorage.clear();

Friday, December 10, 2010
Web Workers
                var worker = new Worker('task.js');
                worker.addEventListener('message', function(e) { e.data; }, false);
                worker.postMessage('Hello World'); // Send data to our worker.
                worker.terminate(); //to terminate the running worker

                task.js:
                onmessage = function (event) { postMessage(e.data); };
                importScripts('foo.js', 'bar.js'); /* imports two scripts */

                There are some HUGE stipulations, though:
                     Workers don't have access to the DOM
                     Workers don't have direct access to the 'parent' page.


Friday, December 10, 2010
But wait, there’s more
                                selectors      inline editing

                              drag & drop       offline apps

                            web SQL database   geolocation

                               messaging       server events

                              web sockets            ...



Friday, December 10, 2010

Recommended for you

Php ssession - cookies -introduction
Php ssession - cookies -introductionPhp ssession - cookies -introduction
Php ssession - cookies -introduction

Session and cookies knowledge is very important for a web developer. In these slides we are going to explore basics of Sessions and Cookies in PHP. How to create and destroy a session. How to create and destroy a cookie. How sessions and cookies are stored.

phpsessioncookies
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11

This document discusses using jQuery for building rich internet applications and provides tips to avoid making a mess of projects with jQuery. It recommends choosing jQuery due to its large community and documentation but warns that jQuery can lead to unmaintainable code if not used properly. It provides examples of bad jQuery code that mixes concerns of structure, style and behavior, and good code that uses semantic classes, progressive enhancement, and external templates. The document advises to separate styling from interaction, use semantics, external templates, and learn real JavaScript concepts beyond jQuery.

PHP Cookies and Sessions
PHP Cookies and SessionsPHP Cookies and Sessions
PHP Cookies and Sessions

This document discusses PHP cookies, sessions, and includes/requires. It explains that cookies are small files stored on a user's computer that identify the user. Sessions store information about a user across multiple pages using the $_SESSION variable. Includes/requires insert the code from one PHP file into another before execution. Examples are provided for setting cookies and sessions, incrementing session values, and including external PHP files.

sessionphpcookie
Resources
  HTML5 Spec @ WHATWG                                            Using HTML5 Today
  http://www.whatwg.org/specs/web-apps/current-work/multipage/   http://www.facebook.com/note.php?note_id=43853209391

  W3C Spec                                                       HTML5 Demos and Examples
  http://www.w3.org/TR/html5/                                    http://html5demos.com/

  Dive Into HTML5 by Mark Pilgrim                                Introducing HTML5
  http://diveintohtml5.org                                       http://introducinghtml5.com/

  HTML5 Rocks                                                    Using HTML5's new Semantic Tags Today
  http://www.html5rocks.com/                                     http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx

  HTML5 Doctor                                                   Wrapping Things Nicely with HTML5 Local Storage
  http://html5doctor.com/                                        http://24ways.org/2010/html5-local-storage

  HTML5 Unleashed: Tips, Tricks and Techniques                   MDN HTML5
  http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-       https://developer.mozilla.org/en/HTML/HTML5
  tricks-and-techniques




Friday, December 10, 2010
Thank You



Friday, December 10, 2010

More Related Content

What's hot

HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
Gabriele Gigliotti
 
Cookies and sessions
Cookies and sessionsCookies and sessions
Cookies and sessions
Lena Petsenchuk
 
Php Sessoins N Cookies
Php Sessoins N CookiesPhp Sessoins N Cookies
Php Sessoins N Cookies
mussawir20
 
REST: Theory vs Practice
REST: Theory vs PracticeREST: Theory vs Practice
REST: Theory vs Practice
Subbu Allamaraju
 
NU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web PerformanceNU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web Performance
Lee Roberson
 
Prerendering Chapter 0
Prerendering Chapter 0Prerendering Chapter 0
Prerendering Chapter 0
Samael Wang
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
Aashish Ghale
 
Distributed Identities with OpenID
Distributed Identities with OpenIDDistributed Identities with OpenID
Distributed Identities with OpenID
Bastian Hofmann
 
Introduction to php web programming - sessions and cookies
Introduction to php   web programming - sessions and cookiesIntroduction to php   web programming - sessions and cookies
Introduction to php web programming - sessions and cookies
baabtra.com - No. 1 supplier of quality freshers
 
Php ssession - cookies -introduction
Php ssession - cookies -introductionPhp ssession - cookies -introduction
Php ssession - cookies -introduction
Programmer Blog
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
virtualsciences41
 
PHP Cookies and Sessions
PHP Cookies and SessionsPHP Cookies and Sessions
PHP Cookies and Sessions
Nisa Soomro
 
PHP Cookies, Sessions and Authentication
PHP Cookies, Sessions and AuthenticationPHP Cookies, Sessions and Authentication
PHP Cookies, Sessions and Authentication
Gerard Sychay
 
Prerendering: Revisit
Prerendering: RevisitPrerendering: Revisit
Prerendering: Revisit
Samael Wang
 
PHP - Introduction to PHP Cookies and Sessions
PHP - Introduction to PHP Cookies and SessionsPHP - Introduction to PHP Cookies and Sessions
PHP - Introduction to PHP Cookies and Sessions
Vibrant Technologies & Computers
 
HTML5: Building for a Faster Web
HTML5: Building for a Faster WebHTML5: Building for a Faster Web
HTML5: Building for a Faster Web
Eric Bidelman
 
An Overview of HTML5 Storage
An Overview of HTML5 StorageAn Overview of HTML5 Storage
An Overview of HTML5 Storage
Paul Irish
 
Rich Web Interfaces with JSF2 - An Introduction
Rich Web Interfaces with JSF2 - An IntroductionRich Web Interfaces with JSF2 - An Introduction
Rich Web Interfaces with JSF2 - An Introduction
eduardo_mendonca
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick Armstrong
Nick Armstrong
 
FP512 Cookies sessions
FP512 Cookies sessionsFP512 Cookies sessions
FP512 Cookies sessions
Fatin Fatihayah
 

What's hot (20)

HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
 
Cookies and sessions
Cookies and sessionsCookies and sessions
Cookies and sessions
 
Php Sessoins N Cookies
Php Sessoins N CookiesPhp Sessoins N Cookies
Php Sessoins N Cookies
 
REST: Theory vs Practice
REST: Theory vs PracticeREST: Theory vs Practice
REST: Theory vs Practice
 
NU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web PerformanceNU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web Performance
 
Prerendering Chapter 0
Prerendering Chapter 0Prerendering Chapter 0
Prerendering Chapter 0
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
 
Distributed Identities with OpenID
Distributed Identities with OpenIDDistributed Identities with OpenID
Distributed Identities with OpenID
 
Introduction to php web programming - sessions and cookies
Introduction to php   web programming - sessions and cookiesIntroduction to php   web programming - sessions and cookies
Introduction to php web programming - sessions and cookies
 
Php ssession - cookies -introduction
Php ssession - cookies -introductionPhp ssession - cookies -introduction
Php ssession - cookies -introduction
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
 
PHP Cookies and Sessions
PHP Cookies and SessionsPHP Cookies and Sessions
PHP Cookies and Sessions
 
PHP Cookies, Sessions and Authentication
PHP Cookies, Sessions and AuthenticationPHP Cookies, Sessions and Authentication
PHP Cookies, Sessions and Authentication
 
Prerendering: Revisit
Prerendering: RevisitPrerendering: Revisit
Prerendering: Revisit
 
PHP - Introduction to PHP Cookies and Sessions
PHP - Introduction to PHP Cookies and SessionsPHP - Introduction to PHP Cookies and Sessions
PHP - Introduction to PHP Cookies and Sessions
 
HTML5: Building for a Faster Web
HTML5: Building for a Faster WebHTML5: Building for a Faster Web
HTML5: Building for a Faster Web
 
An Overview of HTML5 Storage
An Overview of HTML5 StorageAn Overview of HTML5 Storage
An Overview of HTML5 Storage
 
Rich Web Interfaces with JSF2 - An Introduction
Rich Web Interfaces with JSF2 - An IntroductionRich Web Interfaces with JSF2 - An Introduction
Rich Web Interfaces with JSF2 - An Introduction
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick Armstrong
 
FP512 Cookies sessions
FP512 Cookies sessionsFP512 Cookies sessions
FP512 Cookies sessions
 

Viewers also liked

Making More UX Designers in Education
Making More UX Designers in EducationMaking More UX Designers in Education
Making More UX Designers in Education
Fred Beecher
 
liz claiborne ar 2008
liz claiborne   ar 2008liz claiborne   ar 2008
liz claiborne ar 2008
finance48
 
Branding portfolio by Vadim Andreev
Branding portfolio by Vadim AndreevBranding portfolio by Vadim Andreev
Branding portfolio by Vadim Andreev
Vadim Andreev
 
Publicitaris jornada t_milan
Publicitaris jornada t_milanPublicitaris jornada t_milan
Publicitaris jornada t_milan
trinamilan
 
Morris Jumel Mansion
Morris Jumel MansionMorris Jumel Mansion
Morris Jumel Mansion
klee4vp
 
telephone data systems TDS_Proxy06
telephone data systems  TDS_Proxy06telephone data systems  TDS_Proxy06
telephone data systems TDS_Proxy06
finance48
 
liz claiborne cert_incorp
liz claiborne cert_incorpliz claiborne cert_incorp
liz claiborne cert_incorp
finance48
 
FUSTERIA LA PLANA MONT-RÓS
FUSTERIA LA PLANA MONT-RÓSFUSTERIA LA PLANA MONT-RÓS
FUSTERIA LA PLANA MONT-RÓS
Diego Roldán
 
Aesthetic and Archetecture in Construction Project
Aesthetic and Archetecture in Construction ProjectAesthetic and Archetecture in Construction Project
Aesthetic and Archetecture in Construction Project
Rajesh Prasad
 
Excursion Coruña
Excursion CoruñaExcursion Coruña
Excursion Coruña
cri2lu
 
Thesis Final120309
Thesis Final120309Thesis Final120309
Thesis Final120309
klee4vp
 
liz claiborne AR2001
liz claiborne  AR2001liz claiborne  AR2001
liz claiborne AR2001
finance48
 
広島アニメ関連イベントカレンダー(仮)はじめました
広島アニメ関連イベントカレンダー(仮)はじめました広島アニメ関連イベントカレンダー(仮)はじめました
広島アニメ関連イベントカレンダー(仮)はじめました
Yoshitake Takata
 
autozone Bylaws4
autozone  Bylaws4autozone  Bylaws4
autozone Bylaws4
finance46
 
Twitter: For Beginners
Twitter: For BeginnersTwitter: For Beginners
Twitter: For Beginners
Trendplanner .com
 
omnicare annual reports 1994
omnicare annual reports 1994omnicare annual reports 1994
omnicare annual reports 1994
finance46
 
Holes
HolesHoles
tenneco annual reports 2004
tenneco annual reports 2004tenneco annual reports 2004
tenneco annual reports 2004
finance46
 
Plan Presentation
Plan PresentationPlan Presentation
Plan Presentation
kellyman33
 
Presentatie 27 Mei Cluster Htv
Presentatie  27 Mei Cluster HtvPresentatie  27 Mei Cluster Htv
Presentatie 27 Mei Cluster Htv
Johan Lapidaire
 

Viewers also liked (20)

Making More UX Designers in Education
Making More UX Designers in EducationMaking More UX Designers in Education
Making More UX Designers in Education
 
liz claiborne ar 2008
liz claiborne   ar 2008liz claiborne   ar 2008
liz claiborne ar 2008
 
Branding portfolio by Vadim Andreev
Branding portfolio by Vadim AndreevBranding portfolio by Vadim Andreev
Branding portfolio by Vadim Andreev
 
Publicitaris jornada t_milan
Publicitaris jornada t_milanPublicitaris jornada t_milan
Publicitaris jornada t_milan
 
Morris Jumel Mansion
Morris Jumel MansionMorris Jumel Mansion
Morris Jumel Mansion
 
telephone data systems TDS_Proxy06
telephone data systems  TDS_Proxy06telephone data systems  TDS_Proxy06
telephone data systems TDS_Proxy06
 
liz claiborne cert_incorp
liz claiborne cert_incorpliz claiborne cert_incorp
liz claiborne cert_incorp
 
FUSTERIA LA PLANA MONT-RÓS
FUSTERIA LA PLANA MONT-RÓSFUSTERIA LA PLANA MONT-RÓS
FUSTERIA LA PLANA MONT-RÓS
 
Aesthetic and Archetecture in Construction Project
Aesthetic and Archetecture in Construction ProjectAesthetic and Archetecture in Construction Project
Aesthetic and Archetecture in Construction Project
 
Excursion Coruña
Excursion CoruñaExcursion Coruña
Excursion Coruña
 
Thesis Final120309
Thesis Final120309Thesis Final120309
Thesis Final120309
 
liz claiborne AR2001
liz claiborne  AR2001liz claiborne  AR2001
liz claiborne AR2001
 
広島アニメ関連イベントカレンダー(仮)はじめました
広島アニメ関連イベントカレンダー(仮)はじめました広島アニメ関連イベントカレンダー(仮)はじめました
広島アニメ関連イベントカレンダー(仮)はじめました
 
autozone Bylaws4
autozone  Bylaws4autozone  Bylaws4
autozone Bylaws4
 
Twitter: For Beginners
Twitter: For BeginnersTwitter: For Beginners
Twitter: For Beginners
 
omnicare annual reports 1994
omnicare annual reports 1994omnicare annual reports 1994
omnicare annual reports 1994
 
Holes
HolesHoles
Holes
 
tenneco annual reports 2004
tenneco annual reports 2004tenneco annual reports 2004
tenneco annual reports 2004
 
Plan Presentation
Plan PresentationPlan Presentation
Plan Presentation
 
Presentatie 27 Mei Cluster Htv
Presentatie  27 Mei Cluster HtvPresentatie  27 Mei Cluster Htv
Presentatie 27 Mei Cluster Htv
 

Similar to Introduction to HTML5

HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
PavingWays Ltd.
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
smueller_sandsmedia
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
Patrick Lauke
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
Patrick Lauke
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
Patrick Lauke
 
Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuning
Andy Pemberton
 
Brian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JSBrian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JS
#DevTO
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Sho Ito
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Sadaaki HIRAI
 
Joshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of DevicesJoshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of Devices
Francois Daoust
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
 
html5
html5html5
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
Beat Signer
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
Christian Rokitta
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 

Similar to Introduction to HTML5 (20)

HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuning
 
Brian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JSBrian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JS
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Joshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of DevicesJoshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of Devices
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 

Recently uploaded

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 

Recently uploaded (20)

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 

Introduction to HTML5

  • 1. Introduction to HTML5 adrian.olaru@1and1.ro Friday, December 10, 2010
  • 2. What is HTML5? New Wave of Exciting Technologies for Making Web Apps. Friday, December 10, 2010
  • 3. New doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> Friday, December 10, 2010
  • 4. New Elements header hgroup nav details section summary article output aside progress footer menu Friday, December 10, 2010
  • 5. Form enhancements new input types color number time month date datetime url range email search tel week datetime-local <input type="color" required="required" /> Friday, December 10, 2010
  • 6. Form enhancements new attributes required autocomplete autofocus pattern ... <input type="color" required="required" /> Friday, December 10, 2010
  • 7. Video & Audio <video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> fallback content here <video> <audio src="audio.mp3">fallback content here</audio> Video Formats: .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + Vorbis Friday, December 10, 2010
  • 8. Canvas <canvas id="mycanvas" width="150" height="150"> fallback content here </canvas> var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); Friday, December 10, 2010
  • 9. History manipulate the contents of the history stack history.pushState({page: 1}, "page 1", "page1.html"); history.replaceState() window.onpopstate = function(e) { e.state; }; Friday, December 10, 2010
  • 10. Web Storage localStorage data persists after the window is closed data is shared across all browser windows. sessionStorage data doesn't persist after the window is closed data is not shared with other windows localStorage.setItem("size", "2"); //or localStorage.size = "2"; localStorage.getItem("size"); //or localStorage.size localStorage.removeItem("size"); localStorage.clear(); Friday, December 10, 2010
  • 11. Web Workers var worker = new Worker('task.js'); worker.addEventListener('message', function(e) { e.data; }, false); worker.postMessage('Hello World'); // Send data to our worker. worker.terminate(); //to terminate the running worker task.js: onmessage = function (event) { postMessage(e.data); }; importScripts('foo.js', 'bar.js'); /* imports two scripts */ There are some HUGE stipulations, though: Workers don't have access to the DOM Workers don't have direct access to the 'parent' page. Friday, December 10, 2010
  • 12. But wait, there’s more selectors inline editing drag & drop offline apps web SQL database geolocation messaging server events web sockets ... Friday, December 10, 2010
  • 13. Resources HTML5 Spec @ WHATWG Using HTML5 Today http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.facebook.com/note.php?note_id=43853209391 W3C Spec HTML5 Demos and Examples http://www.w3.org/TR/html5/ http://html5demos.com/ Dive Into HTML5 by Mark Pilgrim Introducing HTML5 http://diveintohtml5.org http://introducinghtml5.com/ HTML5 Rocks Using HTML5's new Semantic Tags Today http://www.html5rocks.com/ http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx HTML5 Doctor Wrapping Things Nicely with HTML5 Local Storage http://html5doctor.com/ http://24ways.org/2010/html5-local-storage HTML5 Unleashed: Tips, Tricks and Techniques MDN HTML5 http://www.w3avenue.com/2010/05/07/html5-unleashed-tips- https://developer.mozilla.org/en/HTML/HTML5 tricks-and-techniques Friday, December 10, 2010