2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday...
-
Upload
keyshawn-lansdowne -
Category
Documents
-
view
216 -
download
1
Transcript of 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday...
![Page 1: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/1.jpg)
![Page 2: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/2.jpg)
2
History of World-Wide Web and HTML
1989: WWW has been invented at CERN 1991: Official birthday of HTML
![Page 3: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/3.jpg)
HTML: Reminder
<!DOCTYPE html><html><head> <title>School Announcement</title></head><body> <h1>JINR/CERN School 2014</h1>
<p>JINR, <a href="http:\\www.cern.ch">CERN</a> and MEPhI are organizing a school on grid and advanced information systems.</p>
<p class="topics"> The main topics of the school are:
<ul> <li>NICA project</li> <li>Advanced Information Systems</li> <li>Introduction to the GRID technologies</li> </ul> </p></body></html>
Markup version
HTML header
Heading
Paragraph
link
List
![Page 4: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/4.jpg)
CSS: Reminder
body { font-family: Arial, MS Sans Serif; background: url(gr1.jpg) repeat }
h1 { background: url(gr3.jpg); color: white; padding: 10px}
p { font-weight: bold; padding-left: 5px }
p.topics { color: #800517}
li { list-style-image: url(b.jpg); margin-top: 1em}
CSS = Cascading Style Sheets
<link rel="stylesheet" href="Style.css">
![Page 5: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/5.jpg)
History of HTML Language
Official birthday (20 elements)1991
v.2.01995
CSS 11996
JavaScript1996
3.2 and 4.0 (W3C Recommendation)1997
XHTML1999/2000
World is asynchronous (AJAX)2005
5.02009-…
![Page 6: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/6.jpg)
HTML5: Philosophy
Reduce the need for external plug-ins Error handling Device independent Replace scripting with markup
HTML5 = HTML + CSS + JavaScript
![Page 7: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/7.jpg)
![Page 8: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/8.jpg)
HTML5: New Features in a nutshell
Semantic elements New form controls Local offline storage New JavaScript APIs Media: video and audio Canvas element for drawing User Interface improvements SVG and WebGL
New tags added in HTML5
http://www.testking.com/techking/infographics/ultimate-html5-cheatsheat/
![Page 9: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/9.jpg)
HTML5: Simplification of code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Markup version
HTML4
<!DOCTYPE html> HTML5
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Metadata
HTML4
<meta charset=''utf-8''/>HTML5
![Page 10: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/10.jpg)
HTML5: New form elements
![Page 11: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/11.jpg)
HTML: Structure
No semantics in layout
<div id=“header”>
<div id=“footer”>
<div id=“sidebar”>
<div class=“post”>
<div class=“post”>
![Page 12: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/12.jpg)
<section>
HTML5: Semantic markup
<header”>
<nav>
<header>
<article>
<footer>
<aside>
<header”>
![Page 13: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/13.jpg)
HTML5: Semantic elements example
<header>
<nav>
<section>
<aside>
<footer>
![Page 14: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/14.jpg)
Web Storage: a bit of history
Introduced in 1994
Key-value storage
4Kb of data per cookie
Data sent back to the server on every request
Browsers are not required to retain more than 300 cookies in total
HTTP Cookies
![Page 15: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/15.jpg)
Web Storage
Storing data on the client side (up to 5-10Mb)
Local storage: per domain, stored forever
Session storage: per page/window, stored for a session
The API is the same for both types of storage
Example:
11+
![Page 16: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/16.jpg)
Indexed DB Database of records and hierarchical objects
Indexed: provides fast search
Transactional: supports data integrity
Unlimited size, unlimited storage time
var request = indexedDB.open("library");
request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn"}); var titleIndex = store.createIndex("by_title", "title", {unique: true}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: 123456}); store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567}); store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678}); };
request.onsuccess = function() { db = request.result; }; (example from the W3C Editor’s Draft page)
![Page 17: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/17.jpg)
HTML5: Media
http://www.youtube.com/html5
Extra video field attributes:
autoplay
controls
height / width
loop
preload
poster
playbackRate
Special JavaScript events:
play, pause, ended, playing, progress, …
![Page 18: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/18.jpg)
HTML5: Media Support
HTML 4:
HTML 5:
![Page 19: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/19.jpg)
Codecs Challenge
Ogg/Theora
WebM
MPEG-4/H.264
Video codecs support in different browsers
Works with an installed WebM codechttp://caniuse.com
MPEG-4/H.264: Commonly used video compression format (not royalty-free)
OGG/Theora: Royalty-free codec not encumbered by any known patents
WebM: Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video.
No single combination of codecs works in all HTML5 browsers and this is not likely to change in the near future. To make your video watchable across all of these
devices and platforms, you’re going to need to encode your video more than once.
![Page 20: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/20.jpg)
HTML5: Canvas
Canvas is an API for 2D drawing
<canvas/>
Context selector
Lines, shapes,path,
…
Pixels
Save image(Data URL)
![Page 21: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/21.jpg)
Canvas example
![Page 22: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/22.jpg)
… a more advanced example
https://sketch.io/sketchpad/
![Page 23: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/23.jpg)
HTML5: Scalable Vector Graphics (SVG)
SVG is an XML-based format for describing 2D vector graphics
SVG in HTML5:
![Page 24: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/24.jpg)
Canvas or SVG?
![Page 25: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/25.jpg)
Canvas + WebGL
http://glslsandbox.com/
WebGL is a JavaScript API for interactive 2D/3D graphics
Based on the OpenGL ES standard
Supported by most modern browsers without plug-ins
Compatibility
![Page 26: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/26.jpg)
HTML5 or Flash?
https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash
![Page 27: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/27.jpg)
Geolocation The geolocation API allows the user to provide their location to web
applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
<script>
var x = document.getElementById("demo");
function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; }}
function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
</script>
![Page 28: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/28.jpg)
HTML5 Communication
![Page 29: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/29.jpg)
HTML5 and browser support
Use Modernizr
Small JS library that detects over 40 features
Easy to use
Doesn’t add missing features (but can help replacing it with a “polyfill”)
Before using an HTML5 feature you must check whether it is supported
“polyfill” is a JavaScript library that replicates the standard API for older browsers
If (Modernizr.canvas) { // let’s draw} else { // no native canvas support available}
![Page 31: 2 History of World-Wide Web and HTML 1989: WWW has been invented at CERN 1991: Official birthday of HTML.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649c7c5503460f94930a6c/html5/thumbnails/31.jpg)