Sunteți pe pagina 1din 39

H TM L5

HTML5.............................................................................................................................................3
1.1. Faciliti.................................................................................................................................3
1.2.Faciliti grafice 2D si 3D ......................................................................................................5
1.3. Integrarea fiierelor audio i video........................................................................................6
1.4. Elemente DOM n formulare.................................................................................................8
1.5.Tipuri Input n HTML5 ..........................................................................................................8
1.6. CSS3....................................................................................................................................10
1.7. Rolul scripturilor n aplicaii de Geolocaie ........................................................................15
1.8. Metalimbajele......................................................................................................................23
1.8.1. XML i XSL.....................................................................................................................23
1.8.2. Avantajele documentelor XML........................................................................................27
1.8.3. Particulariti XML .........................................................................................................28
1.8.4. SVG XML ....................................................................................................................31
1.8.5. DOM i SAX................................................................................................................32
Bibliografie: ...............................................................................................................................34

HTML5
1.1. Faciliti
HTML5 a aprut n 2012 din necesitatea de a extinde funcionalitile i dinamismul paginilor
Web. HTML5 nu este nc un standard oficial, i doar unele browsere au support HTML5. Toate
browserele populare ca Safari, Chrome, Firefox, Opera, Internet Explorer continu s adauge
faciliti HTML5 ultimelor versiuni. HTML5 este o cooperare dintre World Wide Web
Consortium (W3C) i Web Hypertext Application Technology Working Group (WHATWG).
WHATWG a lucrat la formularele web i aplicaii, W3C a lucrat cu XHTML 2.0. In 2006, au
decis cooperarea la crearea noii versiuni HTML 5.
HTML 5 integreaz noi faciliti dintre care amintim elementele:
<canvas> pentru desene 2D
<video> i <audio> pentru media playback
suport pentru memorare local
coninut specific al elementelor: <article>, <footer>, <header>, <nav>, <section>
noi controale ale formularului: calendar, date, time, email, url, search
noi elemente Semantice/Structurale
Avantajele HTML5 pot fi sintetizate prin:
Faciliti noi bazate pe HTML, CSS, DOM, i JavaScript
Reducerea nevoii de plugins externe (Flash)
Manipularea bun a erorilor
Marcatori de nlocuire a scripturilor
HTML5 va deveni device independent la fel ca i limbajul Java iar procesul de dezvoltare poate
fi visibil publicului.
Din HTML 4.01 sunt elemente la care s-a renunat n HTML5: <acronym>, <applet>, <basefont>
3

H TM L5

<big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>


In HTML5 apare o singur declaraie <!doctype>, simpl:
<!DOCTYPE html>
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
Coninut de document......
</body>
</html>
HTML5 ofer noi elemente pentru o structurare mai bun a documentelor:
<article>
Definete un articol
<aside>
Definete coninut aside fat de coninutul paginii
<bdi>
Isolaeaz o parte din text ce poate fi formatat n diferite direcii fa de alt text
<command>
Definete a un buton de comand pe care utilizatorul poate s-l invoce
<details>
Definete detailii adiionale pe care utilizatorul poate s le vad sau s le ascund
<summary>
Definete un heading visibil pentru elemental <details>
<figure>
Specific un coninut specific ca i ilustraii, diagrame, foto, cod, etc.
<figcaption>
Definete o captur pentru elementul <figure>
<footer>
Definete un footer pentru document sau section
<header>
Definete un header for a document or section
<hgroup>
Groupeaz un set de elemente <h1> la <h6> cnd headingurile au mai multe
nivele
<mark>
Definete text marked/highlighted
<meter>
Definete msur scalar cu rang determinat
<nav>
Definete link-uri navigation
<progress>
Reprezint progresul unui task
<ruby>
Definete ruby annotation (pentru tipografie East Asian)
<rt>
Definete explicaii /pronunie a caracterelor (pentru tipografie East Asian)
<rp>
Definete ce apare n browsers i nu suport ruby annotations
<section>
Definete o seciune n document
<time>
Definete data/ora
<wbr>
Definete o posibil line-break
HTML5 ofer noi elemente form, pentru a extinde funcionalitatea:
<datalist>
Specific o list de opiuni pre-definite pentru controale input
<keygen>
Definete generator de cmp ca perechi de chei (pentru formulare)
<output>
Definete rezultatul calculelor
Elemente Media
<audio>
Definete coninut sound
4

H TM L5

<video>
<source>
<embed>
<track>

Definete un video sau film (movie)


Definete media resurse multiple pentru <video> i <audio>
Definete un container pentru aplicaii externe sau coninut interactive (plug-in)
Definete text tracks pentru <video> i <audio>

Exemple:
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
</body>
</html>

1.2.Faciliti grafice 2D si 3D
Element <canvas> este o facilitate nou, utilizat la realizarea graficelor sau desenelor via
scripting (usual JavaScript)
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Toate desenele din canvas trebuie realizate n scripturi JavaScript:
Exemple 1 :
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Explicaii:
Prima linie de cod caut elementul<canvas>:
var c=document.getElementById("myCanvas");
Apoi cheam metoda getContext() cu parametru ir "2d"
var ctx=c.getContext("2d");
Obiectul getContext("2d") este construit deja n HTML5, i posed multe proprieti i metode de
desenare a diverselor primitive grafice de baz: boxes, circles, text, sau images sau alte elemente.

Exemplele utilizate sunt adaptate dup www.w3cschools.com i pot fi aprofundate i extinse

H TM L5

Proprietatea fillStyle poate fi culoare CSS, gradient, sau textur (pattern), implicit fillStyle este
#000000 (black).
Metoda fillRect(x,y,width,height) deseneaz un dreptunghi (rectangle) umplut cu fillStyle curent.
Canvas este un grid bi-dimensional, ce respecta standardele de coordinate Web sus-stnga cu
coordonate (0,0) i dreapta jos de 150x75 pixeli.
O alt soluie o constituie cele 2 metode:
moveTo(x,y) definete punctul iniial al unei linii
lineTo(x,y) definete punctul final al unei line
Pentru desenarea efectiv se utilizeaz metoda stroke().
Exemple
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Pentru a desena cercuri se folosete metoda:
arc(x,y,r,start,stop)
unde x,y, sunt coordonatele centrului, r raza i metodele "ink": stroke() sau fill().
Exemple
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Pentru a desena un text n Canvas cele mai importante proprieti i metode sunt:
font - definete proprieti font pentru text
fillText(text,x,y) deseneaz text umplut ("filled")
strokeText(text,x,y) - deseneaz text (no fill)
Using fillText():
Exemplu
Scriem cu 30px high filled text, folosind font "Arial":
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

1.3. Integrarea fiierelor audio i video


HTML5 AUDIO
Diferite browsere pot avea plug-ins diferit pentru redarea fiierelor audio. De accea HTML5
definete un nou element ce specific un mod standard pentru a integra fiiere audio n pagina
web prin element-ul <audio>. Browserele care suporta HTML5 sunt: Internet Explorer 9,

H TM L5

Firefox, Opera, Chrome, i Safari . Internet Explorer 8 i versiunile anterioare nu suport element
<audio>.
Tag-urile audio sunt:
<audio>
<source>
<audio>

Definete coninut sound


Definete resurse media multiple pentru elemente media, ca i <video> i

Exemplu:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Pentru browsere ce nu suporta audio
</audio>
Atributele de control adaug controale audio: play, pause, i volume. Se poate aduga text ntre
tag-urile <audio> i </audio> tags pentru browsere ce nu suporta audio.
Elementul <audio> permite multiple elemente <source>.Elementele <source> se pot lega cu
diferite fiiere audio iar browserul utilizeaz primul format recunoscut.
Browserele care suport formate de fiier pentru element <audio>: MP3 (audio/mpeg), Wav
(audio/wav), and Ogg (audio/ogg):
Browser
MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+
YES YES YES
Firefox 3.6+
NO YES YES
Safari 5+
YES YES NO
Opera 10+
NO YES YES
HTML5 Video
Diferite browsere pot avea plug-ins diferit pentru redarea fiierelor video/movie. De accea
HTML5 definete un nou element ce specific un mod standard pentru a integra fiiere
video/movie n pagina web prin element-ul <video>. Browserele care suporta HTML5 sunt:
Internet Explorer 9, Firefox, Opera, Chrome, i Safari .
Exemplu
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Pentru browsere ce nu suporta video tag.
</video>
Atributele de control adaug controale audio: play, pause, i volume. Se poate aduga text ntre
tag-urile <audio> i </audio> tags pentru browsere ce nu suporta audio.Dac sunt setate
7

H TM L5

atributele height i width, spaiul solicitat pentru video este rezervat la ncrcarea paginii, altfel
nu se cunoate dimensiunea exact i pagina se va schimba n timpul ncrcrii Elementul
<audio> permite multiple elemente <source>.Elementele <source> se pot lega cu diferite fiiere
audio iar browserul utilizeaz primul format recunoscut.
Browserele care suport formate de fiier pentru element <video>: MP3 (video/mp4), WebM
(video/webm), i Ogg (video/ogg):
Browser
MP4 WebM Ogg
Internet Explorer 9+ YES NO
NO
Chrome 6+
YES YES YES
Firefox 3.6+
NO YES YES
Safari 5+
YES NO
NO
Opera 10.6+
NO YES YES
MP4 = fiiere MPEG 4 cu H264 video codec i AAC audio codec
WebM = fiiere WebM cu VP8 video codec i Vorbis audio codec
Ogg = fiiere Ogg cu Theora video codec i Vorbis audio codec
HTML5 posed metode DOM, proprieti, i evenimente pentru elemente <video>i <audio>,
ce permit manipularea acestora pentru JavaScript.Astfel apar metode pentru: play, pause,
loading, sau cele de redare (duration i volume). Evenimentele DOM notific: play, pause, end,
etc.

1.4. Elemente DOM n formulare


HTML5 poseda urmtoarele elemente form:
<datalist>
<keygen>
<output>
Element <datalist>
Elementul <datalist> specific o list de opiuni pre-definite pentru element <input>. Este
utilizat pentru a furniza faciliti de "autocomplete" n <input>. Utilizatorul vede lista drop-down
cu opiuni pre-defined ca i datele de intrare. Un element <input> leag lista de atribute din
<datalist>.
Exemple
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
8

H TM L5

Elementul <keygen>
Scopul elementului <keygen> este de a furnmiza securitate la autentificarea user-ilor. Tag-ul
<keygen> specific un generator de ci pereche n form.Cnd form este submis, sunt generate 2
chei : una privat i una public. Cheia privat este memorat local, cheia public este trimis la
server. Cheia public poate fi utilizat pentru a genera certificatul client pentru autentificarea
user-ului pe viitor.
Exemple
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
Elementul <output>
Elementul <output> reprezint rezultatul calculelor (ca i cum sunt executate de un script).
Exemple
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50">100 +
<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>
Atribute noi pentru <form>:
autocomplete
novalidate
Atribute noi pentru <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

H TM L5

Atributul Autocomplete din <form> / <input>


Atributul Autocomplete specific dac o form sau un camp pot /sau nu s aib autocomplete.
Cnd autocomplete este on, browser-ul completeaz automat valori bazat pe valorile anterior
introduce de utilizator. Este posibil ca forma s aib autocomplete "on", i "off" pentru un camp
specific, sau invers.
Atributul autocomplete funcioneaz cu <form> i cu urmtoarele tipuri <input>: text, search, url,
tel, email, password, datepickers, range, i color.
Exemplu:
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Unele browsere solicit activarea funciei autocomplete.
Atributul novalidate <form>
Atributul novalidate este Boolean i specific dac forma-datele de intrare
validate la submit.
Exemplu

(input) trebuie

<form action="demo_form.asp" novalidate>


E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
Atributul autofocus <input>
Atributul autofocus este Boolean i specific dac elementul <input> va fi focalizat la ncrcarea
paginii.
Example
Cmpul "First name" va fi focalizat la ncrcarea paginii:
First name:<input type="text" name="fname" autofocus>
Atributul form <input>
Atributul form specific dac mai multe formulare au n comun elemental <input>.
Pentru a referi mai multe formulare, se utilizeaz spaii ce-separ lista de id a formularelor.
Exemplu
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
Cmpul lname aparine formularului form1.

H TM L5

Atributul formaction <input>


Atributul formaction specific URL-ul unui fiier ce va procesa controlul intrrilor cnd
formularul este submis. Acesta suprascrie aciunea atributului din elementul <form>.
Atributul formaction este utilizat cu type="submit" i type="image".
Exemplu
An HTML form with two submit buttons, with different actions:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
Atributul formenctype <input>
Atributul formenctype specific modul n care datele din form for fi codificate la trimiterea pe
server (doar n formulare cu method="post"). Acesta suprascrie aciunea atributului din
elementul <form>. Atributul formenctype este utilizat cu type="submit" i type="image".
Exemplu
Se trimit date din form codificate implicit (primul submit button), i apoi codificate ca
"multipart/form-data" (al doilea submit button):
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
Atributul formmethod <input>
Atributul formmethod definete metoda HTTP de trimitere a datelor din form action la URL.
Acesta suprascrie aciunea atributului din elementul <form>. Atributul formmethod este utilizat
cu type="submit" i type="image".
Example
Buttonul al doilea submit suprascrie (post ) metoda HTTP din form (get) :
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
Atributul formnovalidate <input>
Cu valori Boolean, atributul novalidate specific dac elementul <input> trebuie validat cnd
este submis. Acesta suprascrie
aciunea atributului din elementul <form>. Atributul
formnovalidate este utilizat cu type="submit".

H TM L5

Example
Apar 2 butoane submit (cu i fr validare):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
Atributul formtarget <input>
Atributul formtarget specific un nume sau cuvnt cheie (keyword) ce indic unde va fi afiat
rspunsul primit dup trimiterea formularului. Acesta suprascrie aciunea atributului din
elementul <form>. Atributul formmethod este utilizat cu type="submit" i type="image".
Exemplu
Un formular cu 2 submit buttons, cu diferite fereste int:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
Atributele height and width <input>
Acestea specific dimensiunile elementului <input> i sunt utilizate numai cu <input
type="image">. Atributele sunt prezente (amandoua) ca s specifice spaiul rezervat imaginii la
ncrcare. In lipsa lor browserul nu cunoate dimensiune aimaginii i forma paginii se schimbn
timpul ncrcrii.
Exemplu
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Attributul list <input>
Atributul list se refer la elementul <datalist> ce conine opiuni pre-definite pentru un element
<input>.
Exemplu
Un element <input> cu valori pre-definite n <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Atributele min and max <input> specific valori minimum i maximum pentru un element
<input>. Acestea sunt valabile la urmtoarele tipuri input: number, range, date, datetime,
datetime-local, month, time and week.
6

H TM L5

Exemplu
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input> multiple Attribute
Atributul multiple este boolean i specific dac utilizatorul permite intorducerea valorilor
multiple n elementul <input>. Atributul funcioneaz cu tipurile input: email i file.
Example
A file upload field that accepts multiple values:
Select images: <input type="file" name="img" multiple>
Atributul pattern <input> specific o expresie regular ca valoare de element <input>0020i se
poate folosi cu tipurile input: text, search, url, tel, email, i password. Se recomand utilizarea
atributului global title pentru a descrie ablonul ajuttor.
Example
Un camp cu 3 litere:
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three
letter country code">
Atributul placeholder <input> specific o descriere scurt a valorilor ateptate pentru cmpul
input.Acesta este afiat n camp cnd este gol, i dispare cnd cmpul este focalizat.Atributul este
util la cmpurile input: text, search, url, tel, email, and password.
Exemplu
<input type="text" name="fname" placeholder="First name">
Atributul required <input> este boolean i specific dac un camp trebuie completat nainte de a
trimite formularul. Atributul este util la cmpurile input: text, search, url, tel, email, password,
date pickers, number, checkbox, radio, i file.
Exemplu
Username: <input type="text" name="usrname" required>
Atributul step <input> specific un numr interval legal pentru un <input> element. he step
Atributul poate fi utilizat mpreun cu max i min pentru a crea rang de valori legale. Atributul
este util la cmpurile input: number, range, date, datetime, datetime-local, month, time i week.
Exemplu: dac step="3", numerele legale sunt -3, 0, 3, 6, etc.
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">

H TM L5

1.5.Tipuri Input n HTML5


HTML5 are noi tipuri input pentru formulare. Acestea permit un control i o validare mai bun a
introducerii datelor i sunt:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Dac browsere nu le suport cmpurile vor apare ca i obinuite.
Input Type: color este utilizat pentru intoducerea cmpului ce conine culoare.
Exemplu
Select your favorite color: <input type="color" name="favcolor">
Input Type: date permite selectarea datei.
Exemplu
Birthday: <input type="date" name="bday">
Input Type: datetime permite selectarea datei i a orei (cu time zone).
Exemplu
Birthday (date and time): <input type="datetime" name="bdaytime">
Input Type: datetime-local permite selectarea datei i a orei (fr time zone)
The datetime-local type allows the user to select a date and time (no time zone).
Exemplu
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Input Type: month permite selectarea lunii a anului
Input type week permite selectarea sptmnii i anului.
Exemplu
Select a week: <input type="week" name="week_year">
Input Type: time permite selectarea timpului (no time zone).
Exemple
8

H TM L5

Select a time: <input type="time" name="usr_time">


Input Type: email permite introducerea cmpuriloe de email, validate cnd sunt submise
Exemplu
E-mail: <input type="email" name="usremail">
Safari sau iPhone recunosc tipul email, i schimb ecranul pe structura (adds @ and .com).
Input Type: number este utilizat la introducerea cmpurilor numerice, care pot avea i set de
restricii:
Exemplu
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Restriciile pot fi specificate cu atributele: max , min , step , value valoare implicit
Input Type: range este utilizat la introducerea cmpurilor numerice, care pot avea valori ntr-un
rang de numere. Se pot seta restricii.
Exemplu
<input type="range" name="points" min="1" max="10">
Input Type: search permite cutri n cpuri.
Exemplu
Search Google: <input type="search" name="googlesearch">
Input Type: tel definete camp numr de telefon
Example
Telephone: <input type="tel" name="usrtel">
Input Type: url folosit pentru a introduce adrese URL.Valoarea cmpului url este automat
validat cnd forma este submis.
Exemplu
Add your homepage: <input type="url" name="homepage">
Safari sau iPhone recunosc tipul url, i schimb ecranul pe structura (adds.com).
HTML5 Drag and Drop
Drag and drop este parte a standardului HTML5, orice element poate fi draggable.
Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
9

H TM L5

}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
<script>

1.6. CSS3
Specificaiile CSS3 sunt dezvoltate de W3C, multe proprieti CSS3 au fost implementate n
browsere moderne. CSS3 este perfect compatibil cu versiuni anterioare, suport CSS2. CSS3 este
divizat n "module". Cele mai importante module CSS3 sunt:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
CSS3 Borders
Folosind CSS3 se pot crea bordure rotunjite, aduga umbre, se pot folosi imagini ca bordure,
fr a utiliza programe de design, ca i Photoshop.
Proprieti border:
border-radius
box-shadow
border-image
Browser Support
Internet Explorer 9 suport border-radius and box-shadow, Firefox suport toate proprietile
border, Chrome i Safari suport border-radius i box-shadow, dar solicit prefix -webkit- pentru
border-image iar Opera suport border-radius i box-shadow, dar solicit prefix o pentru-borderimage.
CSS3 Rounded Corners
10

H TM L5

Adaug coluri rotunjite fa de CSS2 i se pot utiliza diferite imagini pentru fiecare col.In
CSS3, proprietatea border-radius este utilizat la crearea colurilor rotunjite:
Exemplu
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
CSS3 Backgrounds
CSS3 conine noi proprieti background, ce permit control sporit asupra elementului
background.
Proprieti background:
background-size -dimensiunea
background-origin -originea
Firefox 3.6 nu suport background-origin, i solicit prefix -moz- pentru proprietatea
background-size, Safari 4 solicit prefix -webkit- pentru proprietatea background, Internet
Explorer 9, Firefox 4, Chrome, Safari 5 i Opera suport background.
Proprietatea background-size specific dimeniunea imaginii fundal. In CSS3 este posibil
specificarea size pentru imaginea background, ceea ce permite re-utilizarea ei n diferite
contexte. Dimeniunea se specific n pixeli sau %. Dac se specific size ca %, size este relativ
la width i height n elemental printe.
Exemplu 1
Redimensionare imaginii background:
div
{
background:url(img_flwr.gif);
moz-background-size:80px 60px; /* Old Firefox */
background-size:80px 60px;
background-repeat:no-repeat;
}
Exemplu 2
div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Old Firefox */
background-size:100% 100%;
background-repeat:no-repeat;
}
Proprietatea background-origin specific aria de posiionare a imaginii fundal.Ea poate fi plasat
n content-box, padding-box, sau border-box .

11

H TM L5

Exemplu
Pozitionarea imaginii fundal n content-box:
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
Example
Setarea a 2 imagini n body element:
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
Proprieti Background
background-clip
Specific zona de desenare a imaginii fundal
background-origin
Specific zona de poziionare a imaginii fundal
background-size
Specific dimeniunea imaginii fundal
Efecte Text
CSS3 conine cteva caracteristici noi.
Proprieti
text-shadow
word-wrap
Internet Explorer nu suport text-shadow,Firefox, Chrome, Safari, and Opera suport textshadow i majoritatea browserelor suport word-wrap.
In Text Shadow se specific: horizontal, vertical, distan blur, i culoare:
Exemplu
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Word Wrapping permite desprirea cuvntului pe mai multe linii, chiar dac se realizeaz pe mai
multe rnduri
12

H TM L5

Exemplu
p {word-wrap:break-word;}
Properieti Text
hanging-punctuation
punctuation-trim
text-justify
text-outline
text-overflow
text-shadow
text-wrap
word-break
word-wrap
CSS3 @font-face Rule
Inainte de CSS3, web designerii foloseau fontile deja instalate pe computer.In CSS3, web
designeri pot utilize orice font i fonturile proprii sunt definite n CSS3 @font-face rule.
@font-face Firefox, Chrome, Safari, and Opera suport fonturi.ttf (True Type Fonts) i .otf
(OpenType Fonts),Internet Explorer 9+ suport @font-face rule, dat numai de tip.eot (Embedded
OpenType).
Example
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
Using Bold Text
You must add another @font-face rule containing descriptors for bold text:
Example
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

13

H TM L5

Fiierul "Sansation_Bold.ttf" este un alt fiier ce conine caractere bold din Sansation. Browserele
vor utilize acesta cand apare un font-family "myFirstFont" ce trebuie redat bold.
Pot fi create mai multe @font-face rules pentru acelai font.
CSS3 Font Descriptors
font-family Name Required. Definete numele fontului
src
URL Definete URL pentru font file font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style
normal
italic
oblique
font-weight normal
bold
100
200
300
400
500
600
700
800
900
unicode-range unicode-range Optional. Definete rang caractere UNICODE pentru font.
Implicit "U+0-10FFFF"
CSS3 User Interface
In CSS3, apar faciliti noi de interfa user: redimensionarea elementelor, a chenarelor,etc.
Proprieti
resize
box-sizing
outline-offset
Resize este suportat de Firefox 4+, Chrome, i Safari, box-sizing este suportat n Internet
Explorer, Chrome, i Opera. Firefox solicit prefix -moz-. Safari solict prefix -webkit-.
Outline este suportat de majoritatea browserelor, exceptnd Internet Explorer.
CSS3 Resizing
Elementul div este redimensionabil de utilizator (n Firefox 4+, Chrome, i Safari).
Example
div
{
14

H TM L5

resize:both;
overflow:auto;
}
CSS3 Box Sizing permite definirea elementelor certe pentru a fixa zona.
Exemple
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
CSS3 Outline Offset deseneaz n spatele marginii border i difer de border:
Outlines nu ia din spaiu
Outlines poate fi non-rectangular
Exemple
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Proprieti
appearance
box-sizing
icon
nav-down
nav-index
nav-left
nav-right
nav-up
outline-offset
resize

1.7. Rolul scripturilor n aplicaii de Geolocaie


HTML5 Geolocation
HTML5 Geolocation este utilizat pentru a localiza pozitia utilizatorului. The HTML5
Geolocation API este utilizat pentru a obine pozitia geografic a utilizatorului. Aceasta nu este
disponibil dac utilizatorul nu accept.Browsere ce suport Geolocalizarea: Internet Explorer 9,
Firefox, Chrome, Safari and Opera.Geolocalizarea are acuratee mai mare pentru dispozitive cu
GPS, ca i iPhone.

15

H TM L5

Geocoding i Reverse Geocoding


Geocoding-ul reprezint conversia unei adrese sau cod potal n coordonate geografice. Prin
geocoding, codul potal din UK - EC1N 2NS returneaz coordonatele zecimale :
Latitudine = 51.5184 ;
Longitudine = -0.111.
Procesul de reverse geocoding funcioneaz n sens invers celui de geocoding prin convertirea
coordonatelor geografice ale unei locaii ntr-un set de caracteristici locale. Reverse geocoding a
coordonatelor -23.70090 latitudine i 133.87690 longitudinde returneaz o adres pe Stott Street,
Alice Springs, Northern Territory, Australia.
HTML5 - Using Geolocation
Metoda getCurrentPosition() furnizeaz pozitia utilizatorului (longitudine, latitudine).
Exemplu
<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>
Explicaii:
Dac este suportat Geolocation, metod getCurrentPosition()returneaz coordonatele obiectului ca
parametru ( showPosition ). Funcia showPosition() afieaz Latitudinea i Longitudinea.
Manipularea erorilor
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a
function to run if it fails to get the user's location:
Exemplu
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."

16

H TM L5

break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
Coduri de eroare:
Permission denied Utilizatorul nu are acces la Geolocation
Position unavailable Nu este disponibil locaia curent
Timeout Operaia a expirat (timed out)
Afiarea rezultatelor n hart (Reverse Geolocation)
Parametri necesari: latitude and longitude, Google Maps:
Example
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url=http://maps.googleapis.com/maps/api/staticmap?center=
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
Utiliznd o imagine static Google map latitudinea i longitudinea permit localizarea pe hart.
Google Map Script
Scriptul permite hri interactive cu opiuni de marker, zoom i drag.
Metoda getCurrentPosition() ntoarce un obiect Geolocation object (dac este executat cu
success)..
Proprieti
Descriere
Cords.latitude
Latitudinea (numr zecimal)
Cords.longitude
Longitudinea (numr zecimal)
Cords.accuracy
Acurateea poziiei
Cords.altitude
Altitudinea (metri deasupra nivelului mrii)
Cords.altitudeAccuracy Acurateea altitudinii
Cords.heading
Heading ca grade de la Nord
Cords.speed
Viteza (m/s)
Timestamp
Data/timpul de rspuns
17

H TM L5

Alte metode ale Geolocation


watchPosition() Intoarce poziia curent a utilizatorului i continu s o actualizeze (ca un GPS
n main).
clearWatch() Oprete watchPosition().
Metoda watchPosition() solicit dispozitiv GPS (iPhone):
Exemplu
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(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>
Google Maps JavaScript API v3
Toate aplicaiile Maps API 2 * solicit API key, care . permite monitorizarea aplicaiilor Maps
API, i permite Google s ia despre aplicaia dezvoltat. Dac utilizarea aplicaiei Maps API
exceede Usage Limits, se poate cumpra cot suplimentar.
* Google Maps API for Business developers nu include o cheie la solicitare.
Crearea unei API key:
1.
2.
3.
4.

La https://code.google.com/apis/console se logheaz cu Google Account.


Se acceseaz Services.
Se activeaz serviciul Google Maps API v3.
Click pe API Access. API key este disponibil din pagina API Access, n seciunea
Simple API Access. Se mapeaz API cu Key for browser apps.

https://developers.google.com/maps/documentation/javascript/tutorial

18

H TM L5

Figura 1 Google Apis


Se poate specific ace domeniu este permis pentru API key prin : Edit allowed referrers... cu link
la cheia proprie.
Exemplu: Pagina web afieaz o hart folosind CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_
OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
19

H TM L5

};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Explicaii
Am creat aplicaia ca HTML5 cu declaraia <!DOCTYPE html>. Am inclus Maps API
JavaScript cu tag script. Am creat un element div numit "map_canvas" pentru a reine Map. Am
creat un obiect JavaScript literal pentru a numra proprietile map. Funcia JavaScript creaz
un obiect "map". Se initializeaz map object din tagul body la eveniment onload.
Se recomand declararea DOCTYPE n aplicaia web.
<!DOCTYPE html>
Pentru o funcionare optim a stilurilor CSS se recomand includerea declaraiei <style> :
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
In declaraia CSS se indic un container map <div> (named map_canvas) ce va lua 100% din
nlimea body HTML. Trebuie specificat declaraia procentelor pentru <body> i <html>.
Incrcarea Google Maps API
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_
OR_FALSE">
</script>
URL coninut n tag-ul script este locaia unui fiier JavaScript ce ncarc toate simbolurile i
definiile necesare pentru Google Maps API. Tag-ul script este obligatoriu. Parametrul key
conine cheia aplicaiei API.Aceaste nu este identic cu cheia utilizat de v2 API, i trebuie
generat de la consol. Parametrul sensor al URL trebuie inclus, indicnd dac aplicaia utilizeaz
senzor (GPS locator) pentru a determina locaia utilizatorului. Valoarea variabilei
set_to_true_or_false subliniaz setarea explicit.
Google Maps API for Business se refer la ncrcarea Google Maps API n documentaia
Business.
HTTPS
Dac aplicaia este HTTPS, se ncarc Google Maps JavaScript API peste HTTPS:
<script
20

H TM L5

type="text/javascript"></script>
src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRU
E_OR_FALSE

Acest lucru este necesar n aplicaii SSL pentru a evita erori de securitate n majoritatea browsers,
i este recomandat pentru aplicaii ce includ n cerere date sensitive, ca i locaia utilizatorului.
Libraries
La ncrcarea JavaScript Maps API via http://maps.googleapis.com/maps/api/js URL, se poate
ncrca n plus libraries folosind parametrul libraries. Libraries sunt module de cod ce dau
funcionalitate adiional JavaScript API.
Incrcarea asincron API
Se paote ncrca Maps API JavaScript dup ce pagina s-a terminat de ncrcat sau la cerere. In
tag-ul <script> se precizeaz ca rspuns la evenimentul window.onload sau prin apel de funcie,
caz n care de ofer instruciuni ctre Maps JavaScript API despre ntrzierea execuieipn la
terminarea ncrcrii codului Maps JavaScript API.
Exemplu:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&
sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Instruciunile aplicaiei ncarc Maps API dup ce pagina a fost complet ncrcat
(window.onload) i scrie Maps JavaScript API ntr-un tag <script> n pagin. In plus cerem API
doar s execute funcia initialize()
dup ce API este complet ncrcat transmitnd
callback=initialize to the Maps API bootstrap:
Map DOM Elements
Harta are un spaiu rezervat pentru afiare, creat i denumit n elemental div i obinut ca referin
n browser ca document object model (DOM).
<div id="map_canvas" style="width: 100%; height: 100%"></div>

21

H TM L5

In exemplu, s-a definit <div> numit "map_canvas" i s-a setat dimensiunea cu atribute style.
Dimensiunea setat la "100%" va expanda la valori potrivite pe dispozitive mobile. Harta va lua
dimensiunea din conteiner i size este precizat explicit n <div>.
Map Options
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Pentru a initializa Map, se creaz nti Map options, un obiect ce conine iniializarea variabilelor
map, creat ca obiect literal.
var mapOptions = {};
Latitudes and Longitudes
Dac se dorete centrarea pe un anume punct, se creaz obiectul LatLng ce reine locaiaprin
coordonate { latitude, longitude }:
center = new google.maps.LatLng(-34.397, 150.644)
Zoom Levels
Permite setarea la rezoluii mai bune sau mai slabe iar Google Maps i Maps API sunt divizate n
hri "tiles"i "zoom levels."
zoom: 8
Map Types
Se specific tipul hrii
mapTypeId: google.maps.MapTypeId.ROADMAP
Sunt disponibile urmtoarele tipuri:
ROADMAP afiat normal, 2D din Google Maps.
SATELLITE afiat fotografic.
HYBRID afiat ca mix de secvene fotografice i layere pentru caracteristici proeminente
(strzi, nume de orae).
TERRAIN afiat ca relief fizic ce ofer elevaia formelor de relief (muni, ruri, etc.).
Map Object
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
In JavaScript hrile sunt reprezentate prin clasa Map. Obiectele din clas definesc o singur hart
pe o pagin. Instanele se creaz cu operatorul new i se specific <div> ca i container pentru
map. Nodurile HTML sunt fii ai obiectului JavaScript document, i se obine referin la aceste
elemente via metoda document.getElementById().
Funcia Map() este constructor i are definiia:
Map(mapDiv:Node, opts?:MapOptions)
Creaz o nou hart (map) in interiorul containerului
HTML (tipic elemental DIV) folosind (oponal) parametrii transmii.
Incrcarea hrii
<body onload="initialize()">

22

H TM L5

La ncrcarea paginii HTML, document object model (DOM) este construit, i orice imagini
externe i scripturi sunt primate i incorporate n obiectul document. Pentru a ne asigura c harta
este plasat dup ce pagina s-a ncrcat complet, se execut funcia ce construiete obiectul Map
n elementul <body> din HTML, la eveniment onload.

1.8. METALIMBAJELE
1.8.1. XML I XSL
XML (Extensible Markup Language) este un metalimbaj de marcare ce permite structurarea
informaiei din cadrul unei pagini Web. XML a fost creat de Consoriul Web (www.w3.org) i
provine din metalimbajul SGML. XML permite separarea informaiei de prezentarea ei,
ajungnud-se la crearea unui document autodescriptiv i permite transferul de date ntre aplicaii.
Avantajul acestei separri este posibilitatea utilizrii i n cadrul altor dispozitive care pot avea
conexiune la Internet. XML este independent de platform, extensibil i compatibil Unicode.
Sistemele bazate pe servicii Web implic studiul limbajului XML i al tehnologiilor bazate pe
acest standard de descriere a datelor. Arhitecturile bazate pe XML implica utilizarea unei
varieti mari de tehnologii bazate pe XML i specializate n realizarea unor servicii.
O incursiune n istoria acestui limbaj ne conduce la mijlocul anilor 70, atunci cnd Charles F.
Goldfarb a dezvoltat i introdus metalimbajul SGML (Standard Generalized Markup
Language) care a devenit un limbaj internaional standardizat (1986) de reprezentare i schimb al
datelor. XML permite separarea informaiei de prezentarea ei, ajungnduse la crearea unui
document autodescriptiv i permite transferul de date ntre aplicaii, la fel HTML. Avantajul
acestei separri este posibilitatea utilizrii i n cadrul altor dispozitive care pot avea conexiune la
Internet. XML este independent de platform, extensibil i compatibil Unicode. Dac limbajul
HTML permite descrierea modului de prezentare a informaiei n cadrul unei pagini Web, XML
permite mbogirea coninutului cu metainformaii, etichete autodescriptive care permit
etichetarea coninutului unei pagini Web.
Documente XML.Unitatea de structur a unui document XML este elementul, care poate fi fiind
declarat n DTD sau XML Schema. Structurarea informaiei ntr-un document XML se
realizeaz prin marcaje care definesc elementele documentului. Un element este alctuit dintrun
marcaj de deschidere, un coninut i un marcaj de nchidere.
Atributele furnizeaz informaii suplimentare despre un element, reprezint proprieti ale unui
element, definite prin proprieti care vor lua valori. Prima varianta se aplic n general la
frunzele arborelui, atunci cnd elementele respective nu mai conin subelemente, ci doar date.
Cnd se dorete adncirea arborelui pe mai mult nivele, lizibilitatea poate crete prin transferarea
unor date sub form de atribute.
Regulile pe care un element trebuie s le respecte sunt :
elementele sunt case sensitive;
numele nu pot ncepe cu xml sau XML.
toi marcatorii sunt simetrici i perfect imbricai (n HTML se accept
construcii de genul <b><i>text</b></i>);
marcatorii nu pot s conin spaii i trebuie s nceap cu o liter;
marcatorii i atributele lor (inclusiv valorile) sunt casesensitive
(spre
23

H TM L5

deosebire de HTML);
valorile atributelor trebuie incluse n ghilimele sau apostroafe;
un element poate s conin un numr de subelemente i coninut de date n
acelai timp.
Unitatea de structur a unui document XML este elementul, acesta fiind declarat n DTD sau
XML Schema. Structurarea informaiei ntr-un document XML se realizeaz prin marcaje care
definesc un elementele documentului. Un element este alctuit dintr-un marcaj de deschidere, un
coninut i un marcaj de nchidere. Atributul furnizeaz informaii suplimentare despre un
element. Regulile pe care un element trebuie s le respecte sunt :
elementele sunt case sensitive;
numele nu pot ncepe cu xml sau XML.
Un document XML are o structur arborescent format din elemente i subelemente. Elementul
rdcin conine toate celelalte elemente, iar n documentul XML poate exista un singur element
de acest fel. n exemplul de mai jos se poate observa un exemplu care utilizeaz elementul
rdcin Client i conine trei elemente: numeprenume, email i parol. Prima linie a
documentului se numete declaraie XML
Exemplu:
<?xml version="1.0">
<client>
<numeprenume>Popescu George</numeprenume>
<email>georgep@yahoo.com</email>
<parola>george</parola>
</client>
<client>
<numeprenume>Ionescu Dan </numeprenume>
<email>ionescu@yahoo.com</email>
<parola>informatica</parola>
</client>

Se poate observa un exemplu care utilizeaz elementul rdcin Client i conine trei elemente:
numeprenume, email i parol. Prima linie a documentului se numete declaraie XML.
Elementul rdcin este echivalentul marcatorului HTML din limbajul HTML.Interiorul acestuia
va fi populat cu subelement care la rndul lor pot s conin alte elemente, obinnduse
astfel un arbore de elemente, cu relaii tat -fiu.
Elementele de pe acelai nivel sunt n relaie de tip frate. Relaia de tip arborenscent care se
constituie n aceast situaie permite generalizarea relailor pornind de la nivelul rdcinii ctre
nivele inferioare cu un grad de particularizare din ce n mai mare [Buchmann06].
Regulile la care trebuie s se supun un document XML:
S fie bine formatat (wellformed)
s fie compatibil cu standardul XML
(documentul trebuie s aib un singur elementrdcin, toate marcajele s fie nchise, elementele
s fie imbricate corect i valorile atributelor s fie incluse ntre ghilimele)
S fie valid s fie bine formatat i s fie compatibil cu o definiie DTD.
Elementele vide sunt elemente ce conin doar marcatori, fr coninut informaional.
Elementele XML pot fi grupate i clasificate n vocabulare, adic seturi generalizate de elemente
deservind unui anumit scop (Ex. elementele unei facturi). O instan a unui vocabular poart
24

H TM L5

denumirea de document. Utilizarea vocabularelor i documentelor XML permite stabilirea unor


seturi standard de vocabulare pentru comunicare i schimb de informaii ntre firme.
Vocabularele XML pot fi descrise prin intermediul unor limbaje de definire a unor scheme. Un
astfel de limbaj este DTD (Document Type Definitions). Cu ajutorul acestuia se precizeaz:
elementele care pot aprea n documentul XML,
ordinea i relaiile dintre elemente,
atributele unui element i mti de verificare a valorii acestora.
Limbajul DTD prezint ns o serie de dezavantaje, dintre care menionm: nu este bazat pe
XML i n consecin aplicaiile care proceseaz documentul XML trebuie s cunoasc limbajul
DTD, nu pot fi definite dou elemente diferite cu acelai nume, nu poate fi controlat tipul de date
utilizate de un element sau de un atribut.
Aceste lipsuri au fost nlturate prin utilizarea XML Schema Defnition language (XSD), care
este un limbaj bazat pe XML, documentele scrise n acest limbaj fiind procesate n mod similar
documentelor XML, asigur suport complet pentru spaiile de nume, permind utilizarea a dou
obiecte cu acelai nume n contexte diferite, asigur un set complet de tipuri de date simple i
suport pentru definirea tipurilor complexe de date. Un alt avantaj al XSD este posibilitatea
definirii de constrngeri suplimentare, prin intermediul crora se pot stabili reguli de validare a
informaiei propriuzise, nu doar a structurii de marcatori. Regulile se pot referi la limite de valori,
la valori obligatorii, la dependene de valori i inclusiv la tipul valorilor, cu posibilitatea de a
defini tipuri personalizate (subtipuri ale celor implicite) [Buchmann07].
Un alt element important n cadrul tehnologiilor XML este interfaa de manipulare a
elementelor. Astfel documentele XML pot fi manipulate prin intermediul unei interfee
arborescente, bazat pe evenimente sau clase. Consoriul W3C asigur un API standard de
manipulare a elementelor prin intermediul DOM (Document Object Model). Cel mai popular
API bazat pe evenimente este Simple API for XML (SAX) pentru care majoritatea platformelor
de dezvoltare asigur recunoaterea i utilizarea lui. DOM descrie documentele XML prin
intermediul unei vederi arborescente, n cadrul creia elementele sunt vzute ca noduri.
XSLT (Extensible StyleSheet Language Transformations) este un limbaj care realizeaz
transformarea documentelor XML n alte tipuri de documente (ex. XHTML, SVG) sau n
documente text. Practic XSLT adaug informaii de stil documentelor surs XML. XSL poate fi
utilizat att pe parte de client, ct i pe parte de server, aceasta din urm fiind soluia preferabil.
XSLT respect sintaxa XML i nu necesit DTD. XSLT asigur practic dou aspecte extrem de
importante:
tranformare structural conversia unui document XML n alt document XML
transformare estetic conversia documentului XML ntrun
format diferit,
publicabil, accesibil utilizatorilor (ex. XHTML, PDF, TXT). [Erl04]
Limbajul XPath (XML Path) asigur reutilizarea unui set de specificaii XML de ctre alte
standarde. Elementele XML sau valri ale astfel de documente pot fi cutate i filtrate utiliznd
funcii XPath. Expresiile care identific locaia sunt numte expresii i permit integrarea lor n alte
documente XML. Practic XPath adreseaz un document XML n acelai fel n care sunt adresate
n mod tradiional cile fiierelor n cadrul unei structuri de directoare.

25

H TM L5

Limbajul XQuery (XML Query) asigur un limbaj de interogare a datelor n cadrul


documentelor XML. Odat cu specificaiile XPath 2.0, XQuery utilizeaz limbajul XPath pentru
a adresa sursele de date. Expresiile XQuery pot fi incluse n documente XML, grupate n funcii
organizate pe module din punct de vedere logic.
O caracteristic important este posibilitatea interogrii mai multor documente XML utiliznd o
singur interogare. n funcie de natura datelor cutate i de tipul expresiei care urmeaz a fi
construit, pot fi determinate mai multe formate ale expresiilor XQuery:
FLWR asigur o serie de cuvinte cheie;
Expresii de localizare permit accesul la elemente i atribute ale unui document de intrare;
Constructori ai elementelor permit creare dinamic de noi elemente i valori XML ;
Expresii condiionale permit utilizarea expresiilor complexe utiliznd construcii de tip if
else;
Expresii cuatificate includ logica cuantificrii, utiliznd cuvinte cheie precum some sau every.
O scurt prezentare a principalelor limbaje i specificaii utilizate n cazul tehnologiilor XML,
ofer o privire de ansamblu asupra complexitii acestora. Relaiile dintre documentele XMl i
specificaiile prezentate anterior sunt sintetizate de Th. Erl n lucrarea Service Oriented
Architecture, A Field to Integrating XML and Web Services
i prezentate n figura 2.1.

Figura 2. Relaii ntre specificaiile XML 3

(Erl Th., ServiceOriented Architecture A Field to Integrating XML and Web

Services, Prentice Hall, 2004, p. 19)

26

H TM L5

1.8.2. Avantajele documentelor XML


Separarea coninutului de prezentare. Premisa esenial a Internetului este distribuia de
coninut informaional. Tehnologiile de transfer i conversie de coninut au fost o preocupare
intens la nceputurile Webului i hipertextului. Un document XML poate fi prezentat n moduri
diferite fr a i se afecta semantica i structura. O aceeai prezentare poate afia date preluate din
diferii arbori XML de structur similar sau apropiat. ntreinerea unui site cu o rat nalt de
mprosptare a coninutului (aa cum ar trebui s fie orice site) depinde n mod vital de aceast
modularizare.
Standardizarea. n ciuda concurenei acerbe pe piaa tehnologiilor Web, XML, mai mult dect
HTML (datorit concurenei browserelor), a fost una din puinele idei care a adus la aceeai mas
i a aliniat la aceleai scopuri companii ca IBM, Sun, Oracle i Microsoft, sub moderarea
Consoriului W3. Am mai amintit c validarea spaiului economic virtual este direct dependent de
robusteea unei fundaii tehnologice omogene. XML este, poate, cel mai important pas fcut pn
acum n acest sens.
Dinamica. Paginile Web dinamice au lansat o nou etap n istoria Webului, etapa dialogului, a
comunicrii bilaterale, i au garantat micorarea timpilor de reacie n accesarea informaiei,
obinnduse astfel o mai bun oportunitate a informaiei. XML ofer potenial pentru generarea i
modificarea dinamic a coninutului documentelor XML.
Lizibilitatea informaiei. Regulile de formare a arborilor XML nu accept abateri de la
imbricare i de la modul de construcie a marcatorilor. Astfel, se pot scrie diverse programe care
s trateze marcatorii XML folosii ntr-o clas de documente, n diferite scopuri, inclusiv pentru
conversii n alte formate de fiiere. Programele de conversie XML sunt eseniale n comunicare
B2B n special i n spaiul economic virtual n general[BuCHMANN_08]
Regulile la care trebuie s se supun un document XML:
S fie bine formatat (well-formed) s fie compatibil cu standardul XML (documentul trebuie s
aib un singur element-rdcin, toate marcajele s fie nchise, elementele s fie imbricate corect
i valorile atributelor s fie incluse ntre ghilimele)
S fie valid s fie bine formatats i fie compatibil cu o definiie DTD.
Documentele XML pot fi descrise prin intermediul unui DTD. Cu ajutorul acestuia se precizeaz:
elementele care pot aprea n documentul XML,
ordinea i relaiile dintre elemente,
atributele unui element i mti de verificare a valorii acestora.
Limbajul DTD prezint ns o serie de dezavantaje, dintre care menionm: nu este bazat pe
XML i n consecin aplicaiile care proceseaz documentul XML trebuie s cunoasc limbajul
DTD, nu pot fi definite dou elemente diferite cu acelai nume, nu poate fi controlat tipul de date
utilizate de un element sau de un atribut. Aceste neajunsuri au fost nlturate prin utilizarea XML
Schema, care este un limbaj bazat pe XML, documentele scrise n acest limbaj fiind procesate n
mod similar documentelor XML, asigur suport complet pentru spaiile de nume, permind
utilizarea a dou obiecte cu acelai nume n contexte diferite, asigur un set complet de tipuri de
date simple i suport pentru definirea tipurilor complexe de date.

27

H TM L5

XSL (Extensible StyleSheet Language) este un limbaj care realizeaz transformarea


documentelor XML n alte tipuri de documente (ex. XHTML, SVG) sau n documente text.
Practic XSL adaug informaii de stil documentelor-surs XML. XSL poate fi utilizat att pe
parte de clinet, ct i pe parte de server, aceasta din urm fiin soluia preferabil. Limbajul XSL
respect sintaxa XML i nu necesit DTD. XML, SGML. De asemenea XML permite nlocuirea
i extinderea marcatorilor limbajelor brevetate (HTML, ColdFusion, ASP), asigurnd caracter
multiplatform site-urilor concepute n cele mai variate tehnologii. Spre exemplu, codul HTML:
Astfel, devine foarte strns legtura sintax-semantic, codul capt claritate i motoarele de
cutare pot realiza cutri mai exacte. Standardele legate de XML care realizeaz aceste
transformri sunt CSS (stilurile n cascad) i XSL (limbajul de extindere a stilurilor). n plus,
XML permite ca marcatorii s precizeze tipul informaiei marcate, ceea ce n HTML era posibil
doar pentru adrese, abrevieri, acronime, citate, enumerri i variabile i chiar acolo sunt folosite
nu pentru caracterizarea datelor, ci pentru formatare. [PHILIPS]

1.8.3. Particulariti XML


Orice document XML respect gramatica din Document Type Definition (DTD) fie n internal
subset fie n external subset.
Exemplu :
Internal
external
< ? xml version = " 1.0" ?>
< ?xml version= " 1.0 " >
<!DOCTYPE anunt [
<!DOCTYPE anunt
] </ELEMENT greeting (#PC DATA)>
SYSTEM hello.dtd>
<anunt> Intalnirea se anuleaza
< anunt >Intalnirea se anuleaza!</ anunt > </ anunt >
Atributele type sunt de 3 feluri:
String - CDATA
tokenized - ID, IDREF, IDREFS. ENTITY, ENTITIES, NMTOKEN i NMTOKENS
enumerare
Fiecare declaraie d informaii spre procesorul XML prin # REQUIRED atribut ce trebuie
furnizat sau # IMPLIED nu ne furnizeaz valoarea implicit.
Default value este folosirea valorii implicit dac atributul nu este furnizat iar # FIXED default
value atributul trebuie s aib valoare implicit
Exemplu:
<!ELEMENT Zona EMPTY>
<!ATTLIST Zona
nume CDATA # REQUIRED
tara CDATA # IMPLIED >
Structura fizic
Fiecare document XML are o entitate document entity ce servete la poarta de intrare al
procesorului XML. Entitile pot fi parsed (Coninutul se refer la text ntocmit, considerat parte
integrant a documentului) sau unparsed, asociate cu notation identificator prin nume. Sunt 2

28

H TM L5

tipuri de parsed entities: general entities- folosit n coninutul documentului i parameter entities
folosit n interiorul DTD.
Exemplu:
referine externe general-entity:
<! DOCTYPE book SYSTEM book.dtd[
<! ENTITY toc SYSTEM toc.xml>
]>
<book> <head> &toc; </head>
</book>
referine parameter entry:
<: ENTITY %pattern CDATA>
<!ENTITY % actions #PC DATA>
<! ELEMENT rule % actions;>
<! ATTLIST rule
pattern % pattern; #REQUIRED>
XML Namespaces se bazeaz pe nume codificate formate din prefix namespaces i local name
i se declar cu:
<?xml:namespace ns=urn:urid:C4ED1820-6207-11d1
src = http://www.w3.org prefix=W3C ?>
unde: ns conine URI
src adrese opionale URI pentru a reprezenta i schema prefix attribute ce o asociaz
numele n doc XML
Odat declarat cu nume prefix poate fi folosit pentru a califica nume ca i: tip element, nume
atribut, inta instruciunii procesate.
Exemplu:
pentru a specifica tip de dat
<?xml:namespace ns=urn:urid:C2F4../ prefix=dt?>
<Date dt:Case Type =date.iso8601> 1997-03-17 </Date>
XML linking language (Xlink)
XLink descrie legturi ntre obiecte date i au atribut Xml:link cu valori posibile simple sau
extended (locator grup sau document ce identific legturi relative cu tipuri de elemente).
Exemplu:
<A xml:link=simple href=http://www.w3.org>The w3c </A>
XLink definete elmente de legtur: simple link (online i totdeauna unidirecionale) respectiv
extended link ce poate fi inline, out-of-line i trebuie folosite pentru legturi multidirecionale,
legturi originale spre resurse read-only, etc.
Ambele legturi au implementat funcii associate ca i:
unul sau mai muli locatori ce identific resurse remote (una pentru fiecare resurs remote)
semantica legturii
semantica resursei remote
semantica resursei locate, pentru legturi online (leag resurse ce nu pointeaz la locatori)
29

H TM L5

Simple link:
<Citation xml:link=simple
href=http://www.xyz.com/xml/Popescu.xml
title=Popescu show=new
content-role =Reference> tratat de Popescu (1998)
</Citation>
Extended link:
xml: link are valoarea atributelor pentru locator i este extended
<Commentary xml:link=extended inline=false>
<locator href=Oprea 2.1 role=Carte/>
<locator href=Lemay1.4 role=Articol/>
<locator href=Arba4.2 role=Referat/>
</Commentary>
Comportamentul link
Xlink furnizeaz politici comportamentale ce permit:
Show expliciteaz politica n contextul n care resursa este afiat sau procesat. Are valori:
embed n timp ce se traverseaz legtura, remise este embeded pentru afiare sau procesare, n
corpul resursei i localizeaz unde ncepe tranzacionarea;
replace nlocuiete n timp ce se traverseaz legtura, remise este embedded pentru afiare sau
procesare, n corpul resursei este nlocuit unde ncepe tranversarea;
new n timp ce se traverseaz legtura, resursa este embeded pentru afiare sau procesare, n
corpul resursei i se afieaz sau proceseaz n context nou ;
- Actuate apare cnd :
- auto indic resursa ce poate fi gsit cnd se ntlnesc aceleai legturi ;
- user resursa nu este prezent pn cnd nu se face o cerere explicit extern ;
- Behaviors comportamentul (instruciuni implementate)
XML Printer Language
XPrinter este o serie de location terms, fiecare specific locaia, de obicei relativ i are keyword
ca i id sau child i argumente (m.instanei, top element attribute). Absolute Location Terms pot
fi utilizai la localizarea resurselor ca self contained XPrinter. Include:
root() sursa locaiei este elementul root;
origin() pentru o subresurs (ca i Xlink);
id(name) sursa locaiei este un element ID
Relative Location Terms conine:
child noduri directe child pentru sursa locaiei
descendant - nodul apare oricnd n context
ancestor - identific noduri element coninute n cadru
following - noduri ce apar dup location source
psibling - noduri cu acelai printe ce apar naintea location source
fsibling - noduri cu acelai printe ce apar dup alocaiei source
Argumente poteniale:
selecia numrului de apariii (pozitive, negative, all)
selecia tipului de nod: element implicit, pi (process, instructiune), comment, text (n elemente
CDATA), cdata, all.
nume de attribute i valori
30

H TM L5

Exemple:
child(5)
descendant (-1, Section)
ancestor (1, #element, name,3.2)
Ali termeni Location
- spanning location term identificat cu span localizeaz subresurse
id(11).Span(child(1), child(3))
- attribute location term attr ia nume de atribute ancestor i ntoarce valori
ancestor (1,#element), attr(name)
- string location term - string identific i selecteaz unul sau mai multe siruri sau poziii ntre
iruri din locaie
Argumentele gestionate sunt:
numrul instanelor (positive, negative, all)
string candidate - gsit n sursa locaiei
position /character offset a nceputului pentru iruri candidate (positive, negative, end)
numrul de caractere selectate
Exemple:
string(3, ) poziia caracterului al 3-lea
string(5,!,1,1) selecteaz 5! i urmtorul caracter dup el
Ca i concluzii XML furnizeaz suport puternic pentru format flexibil pentru expresii de date:
exchange format (date change, aplicaii BD)
wire format pentru transfer date ntre obiect i server
persistence format de nmagazinare date pentru document repositiony
XML conine n plus: Chanel Definition Format (CDF) pentru coninut Wcb, Open Financial
Exchange Format (OFX) pentru schimb de date financiare i instruciuni ntre instituii
financiare, Open Software Distribution (OSD) pentru componente soft i versiuni i relaii ntre
componente, Chemical Markup Language (CML), Mathematical Markup Language (HML).
utilizatori i va putea organiza un propriu Yahoo pe calculatorul de acas.

1.8.4. SVG XML


Scalable Vector Graphics (SVG) ca recomadare W3C, este utilizat pentru a defini un grafic
vector-based pentru Web. SVG definete graficul n format XML i nu i pierde calitatea la
zoom sau redimensionare. Fiecare element i atribute din fiierele SVG pot fi animate.
Advantaje:
Fa de ale formate de imagini (JPEG sau GIF) SVG ofer posibilitatea: creare i editare cu orice
editor text, cutare, indexare, scripting, i comprimare, imagini scalabile, tiprire cu rezoluie de
nalt calitate, proprietatea de zoom (fr degradare).
Browser ce suport SVG: Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Inglobarea direct a SVG n pagini HTML
Example

31

H TM L5

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
Diferene ntre SVG i Canvas
SVG este un limbaj de descriere a graficelor 2D n XML iar Canvas deseneaz grafice 2D din
zbor folosind JavaScript. SVG este XML based, fiecare element este disponibil din SVG DOM.
Se pot ataa event handleri JavaScript la element. In SVG, fiecare form desenat este memorat
ca obiect. Dac atributele unui obiect SVG sunt schimbate, browserul poate automat redesena
forma. Canvas este redat pixel cu pixel. In canvas, odat graficul desenat, este uitat browser.
Dac se schimb poziia, ntreag scena trebuie desenat, incluznd obiecte ce n-au fost acoperite
de grafic.
Tabel 1 Comparaie dintre Canvas SVG
Canvas
SVG
Rezoluie independent
Rezoluie dependent
Suport la event handlers
Fr suport la event handleri
Potrivit la aplicaii cu zone mari de redare
Slabe capabiliti de redare text
(Google Maps)
Imaginea rezultat se salveaz ca .png or .jpg
Redare lent la soluii complexe (DOM este
Potrivit la jocuri grafice-intensive
ncet)
Nepotrivit la aplicaii games

1.8.5. DOM i SAX


SAX (simple API for XML) este event based API pentru XML. SAX furnizeaz evenimente
pentru urmtoarele infomaii structurale din XML:
nceput i sfrit document ;
declaraie document type ;
nceput i sfrit element ;
atribute pentru fiecare element ;
date caracter ;
declaraiid e entiti neverificate (unparsed entity);
declaraii de notificare (notation declarations) ;
instruciuni de procesare;
SAX este coninut n org.xml.sax pachetul care pune la dispoziie:
- interfeele implementate de interpreter XML (Pauser, AttributeList i
Location)
32

H TM L5

- interfee implementate de interpreter aplicaie (Document Handler,DTD Handler, Entity


Resolver i Error Handler)
- clase SAX standard: Hand (erParse, InputSource, SAXException i SAXPAUSEException
Clasele helper sunt incluse n pachetul org.xml.sax.helpers i sunt ParseFactory,
AttributeListImplementation i Location Implementation
Interfaa Parser comun deoarece toate nterpreterele SAX trebuie s implementeze aceast
interfa.
Metode:
setDocumentHandler(DocumentHandler handler) permite aplicaiei s nregistreze un
manipulator eveniment
setDTDHandler (DTDHandler handler) permite aplicaiei s nregistreze un DTD
setEntityResolver (EntityResolver resolver) permite aplicaiei s nregistreze o entitate resolver
Custom
setErrorHandler (ErrorHandler handler) permite aplicaiei s nregistreze un eroare
setLocale(java.util.Locale locale) permite aplicaiei s cear locale pentru erori i avertismente
parse (InputSource source) interpreteaz doc.XML
parse (String SystemID) interpreteaz de la URI SystemID
Interfaa AtributeList conine specificaiile atributelor elemente:
getLenghth ( ) numr de attribute din list
getName(int i) ntoarce String de atribute din list dup nume
getType(int i) ntoarce (String) de atribut din list (dup poziie)
getType(String name) ntoarce (String) de atribut din list (dup nume)
getValue(int : ) ntoarce (String) valoarea atributului din list (dup poziie)
getValue(String name) ntoarce (String) valoarea atributului din list (dup poz.)
Interfaa Location asociaz ev.SAX cu locaia documentului.
Metodele :
getPublicID( ) ntoarce (String) identificator public al evenimentului documentului curent
getSystemID() ntoarce (String) identificator system al evenimentului documentului curent
getLineNumber() ntoarce (int) numrul liniei unde se termin evenimentului documentului
curent
getColumnNumber() ntoarce (int) numr de coloane unde se termin evenimentului
documentului curent
Interfaa DocumentHandler furnizeaz metode callback pentru a primi notificrile
evenimentelor generale ale documentului. Metodele :
setDocumentLocator(Locator locator) regsete obiectul pentru a localiza originea evenimentului
document SAX
startDocument() primete notificarea de la nceputul documentului
end Document( ) primete notificarea de la sfritul documentului
startElement (String name, AttributeList atts) primete notificarea de la nceputul elementului
endElement (String name) primete notificarea de la sfritul elementului
characters (char[] int start int lenght) primete notificarea de la caractere
spannableWhiteSpace( ) int start int leeght) primete notificarea de la white space

33

H TM L5

processingInstruction(String Larget, String data) int start int leeght) primete notificarea de la
instruciune
DDTHandllerInterface furnizeaz metode callback pentru a primi notificarea evenimentului
DDT. Metode:
notationDecl(String name String publicID String SystemID) primete notificarea unui evniment
declarat
unparsedEntityDecl(String name String publicID String SystemID String notationName)
primete notificarea unei entiti nedeclarate
Interfaa EntityResolver
resolveEntity(String public ID, String System ID) ntoarce obiectul InputSource pentru resolve
external entity
Interfaa Error Handler
error(SAXPauseException exception)
fatalError(SAXPauseException exception)
warning(SAXPause Exception exception)
Clasa HandlerBase are constructor HandleBase() i implementeaz interfeele
DocumentHandler, DDTHandler EntityResolver i ErrorHandler
Clasa InputSource permite aplicaiilor SAX s ncapsuleze informaii despre sursa de intrare
ntr-un singur obiect. Constructori:
Input Source( )
InputSource(String system ID)
InputSource(java.io.InputStream byte Stream)
InputSource(java.io.Readle characterStream)
Metode:
getPublicId()
setPublicId( )
getSystemID( )
setSystem Id( )
getByteStream( )
setByteStream( )
getCharacterStream( ) getCharacterStream( )
getEndchoding( )
getEndcoding( )
Clasa ParserFactory clas ajuttoare ce furnizeaz metode convenabile pentru ncrcarea
dinamic a interpretului SAX.
Metode:
makeParser() creaz i ntoarce (Parser) folosind proprietile system org.xml.jax.pauser
makeParser(String className) creaz i intrarea n (Parser) folosete proprietile din numele
clasei.
Asupra acestor clase i metode vom reveni ntr-o alt abordare, extinderea lor depind obiectul
propus n demersul de fa.

Bibliografie:
1. www.w3schools.com/html5/
2. dev.w3.org/html5/spec/
3. [html5demos.com/ -

34

H TM L5

4.
5.
6.
7.
8.

beta.theexpressiveweb.com/ - Adobe The expressive Web Beta


www.w3schools.com/css3/default.asp
www.css3.com/
www.w3.org/TR/selectors/
https://developers.google.com/maps/documentation/javascript/tutorial

35

S-ar putea să vă placă și