Documente Academic
Documente Profesional
Documente Cultură
HTML5
HTML5
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
H TM L5
<video>
<source>
<embed>
<track>
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.
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);
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>
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.
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
(input) trebuie
H TM L5
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
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
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
15
H TM L5
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
https://developers.google.com/maps/documentation/javascript/tutorial
18
H TM L5
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
25
H TM L5
26
H TM L5
27
H TM L5
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.
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
H TM L5
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.
35