HTML 5

Proiectarea Clientului Web

Student: Constandache Alexandra
Anul IV Facultatea de Automatica si Calculatoare Iasi

Cuprins
• Scurt istoric HTML • HTML 5
• • • • • • • • Elemente simplificate in HTML5 Elemente noi in HTML5 Grafica in HTML5 <CANVAS> HTML5 API VIDEO & AUDIO Aplicatii offline WEB WORKERS Compatiblitatea browserelor cu HTML 5 Ce mai ofera HTML5?

SĂ NE REAMINTIM DE HTML.

HTML sau Hypertext Markup Language este așa cum sugerează și definiția un limbaj pentru marcare hypertext ce descrie conținutul şi structura informațiilor într-o pagina web.

Scurt Istoric HTML
• HTML 1.0 şi HTML+ 1990, respectiv 1993. • HTML 2.0 - 1994, a fost prima versiune standardizată, (49 taguri). • HTML 3.0 - 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje pentru notaţii matematice, bannere etc. • HTML 3.2, - Ianuarie 1997, este considerat ca succesorul versiunii 2.0, incorporând o serie de taguri din HTML 3.0. • HTML 4 - Decembrie 1997 extinde HTML cu mecanisme pentru stylesheets, script-uri, frame-uri, un suport mai mare şi îmbunătăţit pentru alinierea textului, tabele mai bogate şi îmbunatăţiri ale formularelor, oferind o accesibilitate mai mare pentru oamenii cu deficit. • HTML 4.01 - Decembrie 1999 este o versiune revizuită de HTML4.0 care corecteaza unele erori si face unele schimbari in privinta modului de functionare a unor sintaxe.

Scurt Istoric HTML
• Consorţiul Web W3C (World Wide Web Consortium) deţine controlul asupra specificaţiilor. • Odata cu dezvoltarea HTML-ului browserele au evoluat foarte mult insa au aparut si pagini web ce nu respectau constrangerile si regulile descrise de HTML sau nu aveau sintaxa corecta. • In Ianuarie 2000 este introdusa versiune de xHTML 1.0 ce se bazează pe versiunea de HTML 4.0.1.

HTML5
• 2004 Web Hypertext Application Working Group (WHATWG) au inceput lucrul la noul standard HTML • 2004 Consortiul W3C se concentrau asupra dezvoltarii XHTML 2.0 desi HTML 4.01 nu mai fusese actualizat inca din 2000. • 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate de catre W3C ca punct de start al noului standard HTML.

HTML 5
• HTML5 este ultima versiune HTML si XHTML. Standardul incearca sa rezolve problemele intalnite in versiunile anterioare HTML si se adreseaza nevoii de APLICATII WEB, un domeniu ce nu a fost acoperit de catre HTML pana in acest moment. • Desi ultima versiune HTML 5 lansata pe data de 13 Ianuarie 2011 este o „ciorna” (W3C Working Draft), dezvoltatorii browserelor au inceput sa implementeze parti din functionalitatile prezente in standardul HTML5.

De ce HTML5?
Calculatoare performante folosite insuficient Numarul utilizatorilor de servicii web devine din ce in ce mai mare

• Performantele JavaScript.

Avem nevoie de un web mai puternic!

ELEMENTE SIMPLIFICATE IN HTML5

DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN„ “http://www.w3.org/TR /xhtml1/DTD/xhtml1transitional.dtd">

• HTML 5 <!DOCTYPE html>

Radacina HTML
<html xmlns=http://www.w3.org/1999/x html lang="en" xml:lang="en">

• HTML 5 <html lang="en">

CHARSET
• <meta http-equiv="Content-Type" content="text/html; charset=utf8">

• HTML 5 <meta charset="utf-8">

STYLESHEET
• <link rel="stylesheet" href="styleoriginal.css" type="text/css" />

• HTML 5 <link rel="stylesheet" href="style-original.css" />

ELEMENTE NOI IN HTML5

Elementul Base
<head> <base href=“url” target="_blank" /> </head> -se introduce adresa de baza.

Elemente semantice de sectionare
• HTML 4

Elemente semantice de sectionare
• HTML 5

<HEADER>
HTML 4
<div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div>

HTML 5
<header> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> … </header>

<HGROUP>
HTML 4 <h1>My Weblog</h1> <h2>A lot of effort went into making this effortless.</h2>
HTML 5

<header>
<hgroup> <h1>My Weblog</h1> <h2>A lot of effort went into making this ffortless.</h2> </hgroup> …

</header>

<FOOTER>
HTML 4 <div id="footer"> <p>&#167;</p> <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p> </div> HTML 5

<footer> <p>&#167;</p> <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a> </p> </footer>

<SECTION>
• HTML 5 (sectiune generica de aplicatie sau document)
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section>

<ARTICLE>
<div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h2> </div>

HTML 4

HTML 5

<article> <header> <p class="post-date">October 22, 2009</p> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> … </article>

<ASIDE>
HTML5 <aside>
<h1>Archives</h1> <ul>
<li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul>

</aside>

<NAV>
HTML 4 <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></ li> <li><a href="#">about</a></li > </ul> </nav> HTML 5

<TIME>
• <time datetime="2009-10-22" pubdate>October 22, 2009</time> • <time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time> • <article> <header>
<time datetime="2009-10-22" pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1>

</header> <p>Lorem ipsum dolor sit amet…</p> </article>

Exemple
• Exemplul1.html

a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.

GRAFICA IN HTML5 <CANVAS>

<CANVAS>
• Sintaxa:
<canvas id="a" width="300" height="225"></canvas>

• Utilizare cu JavaScript & DOM
var a_canvas = document.getElementById("a"); • Desenare

function draw_b() {
var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d");//future 3D b_context.fillRect(50, 25, 150, 100);

}

<CANVAS>
Desenarea in Canvas Context: Sunt esentiale functiile:
 beginPath()  closePath()  stroke()  fill()

Proprietati:
 fillStyle = (CSS color,pattern,gradient)  strokeStyle= (CSS color,pattern,gradient)

<CANVAS>
• Alte functii de desenare in canvas context o Desenare dreptunghiuri
• • • fillRect(x, y, width, height) strokeRect(x, y, width, height) clearRect(x, y, width, height)

o Desenare linii
o moveTo(x, y) o lineTo(x, y)

<CANVAS>
o Desenare arce
• arc(x, y, radius, startAngle, endAngle, anticlockwise)
(pentru cerc startAngle=0, endAngle=Math.pi*2)

• quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

• x,y coordonatele punctului de sfarsit • cp1x,cp1y, cp2x,cp2y coordonatele primului si celui de al doilea punct de control.

Desenarea de text o Proprietati context:
 Context.font= {font}  Context.textAlign={start,end,left,right,center};  Context.textBaseline={top,hanging,middle,alphabetic,ideographic,bottom};

o Functia de desenare
o Context.fillText(text,x,y);

<CANVAS>
o Crearea unui gradient
• createLinearGradient(x0, y0, x1, y1) • createRadialGradient(x0, y0, r0, x1, y1, r1)

• Exemple gradient:
1. var my_gradient = context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);

<CANVAS>
2. var my_gradient = context.createLinearGradient(0, 0, 0, 225); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);

3. var my_gradient = context.createLinearGradient(0, 0, 300, 225); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);

<CANVAS>
o Desenarea de imagini
o drawImage(image, dx, dy) o drawImage(image, dx, dy, dw, dh) o drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

<CANVAS>
• Exemple desenare imagini
1. <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113"> <canvas id="e" width="177" height="113"></canvas> <script> window.onload = function() { var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); var cat = document.getElementById("cat"); context.drawImage(cat, 0, 0); }; </script> 2. <canvas id="e" width="177" height="113"></canvas> <script> var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); var cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { context.drawImage(cat, 0, 0); }; </script>

<CANVAS>
• Transformari
• Pentru a retine si a prelua starile “panzei” :
• Save(); • Restore();
• Starea panzei=transformari, valorile proprietatilor strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

• Translatarea: translate(x, y)

<CANVAS>
• Rotatia: rotate(angle)

• Scalarea: scale(x, y)

• Umbre
• Proprietati context:
• • • • ShadowColor ShadowOffsetX ShadowOffsetY ShadowBlur

Exemple <CANVAS>
• http://html5demos.com/canvas-grad [FF] • First person gifter http://htmlfive.appspot.com/static/gifter.html [FF]

HTML5 API VIDEO & AUDIO

HTML5 API VIDEO & AUDIO
• Continut media fara plugin • Multitudine de formate video:
• • • • MPEG4 FLASH VIDEO OGG AUDIO VIDEO INTERLACED

• HTML 4:
<video src="video.ogg"> <object data="videoplayer.swf" type="application/x-shockwaveflash"> <param name="movie" value="video.swf"/> </object> </video>

HTML5 API VIDEO & AUDIO
• HTML5
<video src="video.ogg" controls> Your browser does not support HTML5 video. </video> <audio controls src="johann_sebastian_bach_air.ogg"> An audio clip from Johann Sebastian Bach. </audio> <video width="320" height="240" controls>

• Functii media
• • • • Load() Play() Pause() canPlayType(type)

<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
<audio controls> <source src="johann_sebastian_bach_air.ogg"> <source src="johann_sebastian_bach_air.mp3"> An audio clip from Johann Sebastian Bach. </audio>

HTML5 API VIDEO & AUDIO
• Atribute ReadOnly
• • • • • • • • • • • • • Duration Paused Ended startTime Error currentSrc Autoplay Loop currentTime Controls Volume (0.0-1.0) Muted Preload

• Atribute ce pot fi folosite in Javascript

• Atribute legate de format
• Type=formatul containerului (e.g video/mp4); • Codecs=“video codec, audio codec”.

Exemple audio/video
• Exemple/av • Player HTML5 al fisierelor audio locale http://antimatter15.github.com/player/player.html

HTML5 API - GEOLOCATIE
O noua proprietate a obiectului global navigator:
• Navigator.geoLocation

• Detecteaza locatia utilizatorului curent utilizand urmatoarele informatii:
• • • • -Adresa IP -Conexiunile la retele wireless -Turnul de comunicatii cu care comunica telefonul -hardware GPS

HTML5 API - GEOLOCATIE
• Exemplu de implementare:
function get_location() { navigator.geolocation.getCurrentPosition(show_map); } //determina afisarea unei bare de informatii ce intreaba utilizatorul daca doreste sa isi dezvaluie locatia sa. //show_map ->functia de callback function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! }

HTML5 API - GEOLOCATIE
Exemplu de tratarea a erorilor:
navigator.geolocation.getCurrentPosition( show_map, handle_error) function handle_error(err) { if (err.code == 1) { // user said no! } } • handle_error este un obiect ce contine urmatoarele proprietati:
• code short an enumerated value
• • • • PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0)

message DOMString not intended for end users

Exemplu Geolocatie
• Google Maps http://htmlfive.appspot.com/static/whereami.html

APLICATII OFFLINE

APLICATII OFFLINE
• O aplicatie web este o lista de URL-uri- HTML,CSS,Javascript, imagini sau orice alta forma de resursa. • Homepage-ul unei aplicatii offline ne directioneaza catre aceasta lista (fisier manifest) ceea ce este doar un fisier text de pe server. • Un Browser ce implementeaza aplicatii offline HTML5 citeste aceeasta lista, downloadeaza resursele indicate si le inmagazineaza local actualizandu-le doar cand este necesar. • Cand veti accesa aplicatia web fara a avea acces la internet, browserul web va aduce copiile locale. De asemeni exista in DOM un flag ce va indica daca sunteti online sau offline.
• var online = navigator.onLine;

• Acest atribut se modifica in timpul evenimentelor online si offline ce sunt manevrate de obiectul Window.

MANIFESTUL CACHE
• O aplicatie web offline este dependenta de fisierul cache manifest.
• Manifestul CACHE = lista resurselor de care are nevoie aplicatia web cand este deconectata de la retea.

• Utilizarea fisierului cache manifest
<!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html>
Fisierul manifest se poate regasi oriunde pe server dar trebuie servit clientului avand Content-Type: text/cache.manifest.

• Exemplu Manifest Cache de pe server:
CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js

Baza de date
• HTML5 asigura un API de baza de date bazat pe SQL pentru a inmagazina local si structurat datele. • API-ul interactioneaza cu baza de date in mod asincron ceea ce asigura faptul ca interfata utilizator nu se va bloca.

Exemplu de implementare
//pentru a crea un obiect baza de date
var db = window.openDatabase("NoteTest", "1.0","Example DB",200000);

function renderNote(row) { // renders the note somewhere } function reportError(source, message) { // report error }

Baza de date
function renderNotes() { db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', []); tx.executeSql(„SELECT * FROM Notes‟, [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { renderNote(rs.rows[i]); } }); }); } function insertNote(title, text) { db.transaction(function(tx) { tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ], function(tx, rs) { // … }, function(tx, error) { reportError('sql', error.message); }); }); }

APLICATII OFFLINE
• Pentru depozitarea simpla si sincrona a informatiilor pentru utilizare offline HTML introduce atributul localStorage al obiectului Windows.
localStorage["status"] = "Idling.";

EXEMPLU APLICATII OFFLINE
• Sticky notes http://htmlfive.appspot.com/static/stickies.html • [Google Chrome 10]

NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT!

WEB WORKERS

WEB WORKERS
• Javascript ruleaza pe acelasi fir de executie cu browserul ceea ce poate face ca acesta din urma sa nu mai poata raspunde la comenzile utilizatorului. • „Muncitorii” Web definesc un API ce ruleaza scripturile in background. • ! „muncitorii” trebuie sa se afle intr-un script extern. • Exemplu de implementare <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> Muncitorii: function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();

EXEMPLU WEB WORKERS
• http://htmlfive.appspot.com/static/tracker1.html Motion tracker

• http://htmlfive.appspot.com/static/primes-good.html Good Primes
• http://htmlfive.appspot.com/static/primes-bad.html Bad Primes

Compatiblitatea browserelor

Ce mai ofera HTML5?
• Trasaturi noi formularelor (validare la nivelul clientului, date pickers, sliders)

• • • • •

Socket-uri Web Web storage Alte tag-uri noi Manipularea istoricului browserului Drag and Drop

Compatibilitatea browserelor

http://www.findmebyip.com/litmus/

Concluzii
• HTML5 stie unde te afli, stie ce scrii, unde esti si unde ai fost. • HTML5 este viitorul si desi inca nu a ajuns la un stadiu final (se preconizeaza ca in jurul anului 2022) el poate fi implementat si utilizat in cadrul browserelor moderne.

Bibliografie
• Pro HTML5 Programming - Powerful APIs for Richer Internet Application Development (Peter Lubbers, Brian Albers and Frank Salim) • Introduction cu HTML5 (Brad Neuberg) • W3C HTML 5 Working Draft • Dive into HTML5 (Mark Pilgrim)