< Introduction to HTML5 />
description
Transcript of < Introduction to HTML5 />
![Page 1: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/1.jpg)
<Introduction to HTML5/>
Bartosz KowalskiSoftware Developer
CERN
![Page 2: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/2.jpg)
Presentation outline-HTML : introduction and history-HTML5 :- History and philosophy- New features
- Structure- Forms- Media- Canvas- Web Storage- Communication
-Conclusion and Recommendations-Questions
![Page 3: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/3.jpg)
HTML is ?
-Markup language for web pages -Prototyped by Tim Berners-Lee at CERN (in 1989)-HTML consists of elements called tags -Browser interprets HTML tags and generates a web page
Hypertext Markup Language
![Page 4: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/4.jpg)
HTML : history1991 official birthday (20 elements)
1995 v2.0
1997 3.2 and 4.0 (W3C Recommendation)
1999/2000 XHTML
1996 CSS 1
1996 JavaScript
2009 5.0
2005 World is asynchronous (AJAX)
![Page 5: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/5.jpg)
HTML5 : history
2 specifications = Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web
Consortium (W3C)
W3C WHATWG
![Page 6: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/6.jpg)
HTML5 : philosophySome common rules:
Markup to replace scripting
Reduce the need for external plugins
Error handling
Device independent
Development visible to the public
![Page 7: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/7.jpg)
HTML5 : philosophy
HTML5 = HTML + CSS + JS
![Page 8: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/8.jpg)
HTML5 : new features in a nutshell
Canvas element for drawing
Media : video and audio elements
Better support for local offline storage
Semantic elements (article, footer, header or nav)
Form controls (date, email or search)
UI (draggable or progress)
SVG or WebGL
![Page 10: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/10.jpg)
http://shah3d.com
![Page 12: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/12.jpg)
HTML : browser engines
Gecko
WebKit
Trident
Presto
![Page 13: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/13.jpg)
HTML5 : where do we start ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset=''utf-8''/>
Metadata:
Markup version:
![Page 14: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/14.jpg)
HTML : structure POPULARITY VALUE FREQUENCY
1 footer 179,5282 menu 146,6733 style1 138,3084 msonormal 123,3745 text 122,9116 content 113,9517 title 91,9578 style2 89,8519 header 89,274
10 copyright 86,97911 button 81,50312 main 69,6213 style3 69,34914 small 68,99515 nav 68,63416 clear 68,57117 search 59,80218 style4 56,03219 logo 48,83120 body 48,052
![Page 15: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/15.jpg)
HTML5 : structure
![Page 16: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/16.jpg)
HTML5 : structure
http://www.kayak.com/
<nav>
<header>
<section> <aside>
<footer>
![Page 17: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/17.jpg)
HTML5 : form
<input type="email">
<input type="text">
<input type="URL">
<input type="date">type={time, month, week}
<input type="number">
<input type="range">
<input type="color">
![Page 18: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/18.jpg)
HTML5 : formExtra Input field attributes:
required
autocomplete
min / max
step
pattern={regexp}
multiple
list
<datalist/>
![Page 19: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/19.jpg)
HTML5 : media HTML4:
HTML5:
![Page 20: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/20.jpg)
HTML5 : mediaExtra video field attributes:
autoplay
controls
height / width
loop
preload
poster
playbackRate http://www.youtube.com/html5
JS events (play, pause, ended, playing, progress, …)
![Page 22: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/22.jpg)
HTML5 : canvas API for 2D drawing
Canvas is:
Context selector
<canvas/>
Lines,Shapes,Paths,
…..
Pixels
Save image (Data URL)
![Page 23: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/23.jpg)
HTML5 : canvas Canvas sample:
![Page 25: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/25.jpg)
New features : canvas 3D Canvas + WebGL
Canvas 3D is:
-Extended JS-Based on OpenGL ES-Not fully or/and officially supported by browsers
Sample:
![Page 26: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/26.jpg)
HTML5: SVG
XML-based format for describing 2D vector graphics
SVG (Scalable Vector Graphics) is:
SVG in HTML5:
Sample:
![Page 27: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/27.jpg)
HTML5: SVG
XML-based format for describing 2D vector graphics
SVG sample:
![Page 28: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/28.jpg)
Canvas or SVG ?Canvas SVG
Pixel-based Object model-based (XML)
Single HTML container Multiple elements (part of the DOM)
Created and modified via API Created with markup and modified by API or CSS
Interaction manually programmed from mouse coordinates
Interaction is object based on the tree of elements (DOM)
Zooming Scaling
![Page 29: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/29.jpg)
HTML5 or Flash ?HTML5 Flash
Not (yet) fully supported by all browsers
Support for wide variety of browsers (via plugin)
HTML, JavaScript ActionScript
Semantic, Indexed No semantic, not indexed
Access to source code Limited access to source code
Supported on Apple mobile devices
Not supported on Apple mobile devices
Basic interactivity Rich interactivity
![Page 30: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/30.jpg)
HTML : web storage Cookies:
-Data sent back to the server on every request-4kb of data per cookie -Browsers are not required to retain more than 300 cookies in total
![Page 31: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/31.jpg)
HTML5 : web storage Local Storage ans Session Storage:
-Structured data for large content-Client-side relational database (SQL) -Use of SQLite DB (light and fast)-Use it to store temp data (domain specific per session)
Database Storage:
Local SessionPersists after the browser is closed Lifetime Session
Domain specific Scope Per-page-per-windowSend back on request
Client-side key-value database
typically limited to 5/10MB
![Page 32: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/32.jpg)
HTML5 : web storage Local Storage sample :
Session Storage sample :
![Page 33: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/33.jpg)
HTML5 : web storage Database Storage sample:
![Page 34: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/34.jpg)
HTML5 : communication Communication API = Web Messaging (HTML5), Web Workers and Web Sockets
Web Workers:
= parallelism = running multiple JavaScript scripts independently
Web Sockets:
= full-duplex communication channel which operates through a single TCP connection= PUSH technology= real time web applications
Web Messaging:
= cross-site communication
![Page 35: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/35.jpg)
HTML5 and browser support nightmare
http://www.modernizr.com/
-Small JS library that detects the availability of native implementations for HTML5 and CSS3 specifications-Tests for more than 40 features-It doesn’t add missing features
Sample:
Use JS library => e.g. :
![Page 36: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/36.jpg)
Conclusion
- HTML5 is around the corner ! - Full of new 2.0 features :- new structure- web storage - media and canvas- UI (e.g. draggable)
- Web with HTML5 is more semantic- Stick to the recommendations (see the next slide)
![Page 37: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/37.jpg)
Recommendations
-Already a big community- Books and tutorials available- Learn (modern) JavaScript ! - Always check HTML5 browser support matrix
-Consider for mobile websites-Help search engines to correctly index your page
Learn HTML5 now =
Don’t wait for the final specification (available in 20XX)!
![Page 38: < Introduction to HTML5 />](https://reader035.fdocuments.in/reader035/viewer/2022062218/5681661d550346895dd96e05/html5/thumbnails/38.jpg)
<Thank you/>