H TM L5

HTML5.............................................................................................................................................3 1.1. Facilităţi.................................................................................................................................3 1.2.Facilităţi grafice 2D si 3D ......................................................................................................5 1.3. Integrarea fişierelor 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 aplicaţii de Geolocaţie ........................................................................15 1.8. Metalimbajele......................................................................................................................23 1.8.1. XML şi XSL.....................................................................................................................23 1.8.2. Avantajele documentelor XML........................................................................................27 1.8.3. Particularitãţi XML .........................................................................................................28 1.8.4. SVG XML ....................................................................................................................31 1.8.5. DOM şi SAX................................................................................................................32 Bibliografie: ...............................................................................................................................34

HTML5
1.1. Facilităţi
HTML5 a apărut în 2012 din necesitatea de a extinde funcţionalităţile ş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 facilităţi 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 aplicaţii, W3C a lucrat cu XHTML 2.0. In 2006, au decis cooperarea la crearea noii versiuni HTML 5. HTML 5 integrează noi facilităţi dintre care amintim elementele: • <canvas> pentru desene 2D • <video> şi <audio> pentru media playback • suport pentru memorare locală • conţinut 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: • Facilităţi 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 renunţat în HTML5: <acronym>, <applet>, <basefont> 3

H TM L5

<big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt> In HTML5 apare o singură declaraţie <!doctype>, simplă: <!DOCTYPE html> Exemplu: <!DOCTYPE html> <html> <head> <title>Titlul documentului</title> </head> <body> Conţinut de document...... </body> </html> HTML5 oferă noi elemente pentru o structurare mai bună a documentelor: <article> Defineşte un articol <aside> Defineşte conţinut aside fată de conţinutul paginii <bdi> Isolaează o parte din text ce poate fi formatat în diferite direcţii faţă de alt text <command> Defineşte a un buton de comandă pe care utilizatorul poate să-l invoce <details> Defineşte detailii adiţionale pe care utilizatorul poate să le vadă sau să le ascundă <summary> Defineşte un heading visibil pentru elemental <details> <figure> Specifică un conţinut specific ca şi ilustraţii, diagrame, foto, cod, etc. <figcaption> Defineşte o captură pentru elementul <figure> <footer> Defineşte un footer pentru document sau section <header> Defineşte un header for a document or section <hgroup> Groupează un set de elemente <h1> la <h6> când headingurile au mai multe nivele <mark> Defineşte text marked/highlighted <meter> Defineşte măsură scalară cu rang determinat <nav> Defineşte link-uri navigation <progress> Reprezintă progresul unui task <ruby> Defineşte ruby annotation (pentru tipografie East Asian) <rt> Defineşte explicaţii /pronunţie a caracterelor (pentru tipografie East Asian) <rp> Defineşte ce apare în browsers şi nu suportă ruby annotations <section> Defineşte o secţiune în document <time> Defineşte data/ora <wbr> Defineşte o posibilă line-break HTML5 oferă noi elemente form, pentru a extinde funcţionalitatea: <datalist> Specifică o listă de opţiuni pre-definite pentru controale input <keygen> Defineşte generator de câmp ca perechi de chei (pentru formulare) <output> Defineşte rezultatul calculelor Elemente Media <audio> Defineşte conţinut sound 4

H TM L5

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

Defineşte un video sau film (movie) Defineşte media resurse multiple pentru <video> şi <audio> Defineşte un container pentru aplicaţii externe sau conţinut interactive (plug-in) Defineşte 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.Facilităţi 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> Explicaţii: 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 proprietăţi şi metode de desenare a diverselor primitive grafice de bază: boxes, circles, text, sau images sau alte elemente.

1

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

5

arc(95. Canvas este un grid bi-dimensional.font="30px Arial". Exemple var c=document.40. ctx. ce respecta standardele de coordinate Web sus-stânga cu coordonate (0. sau textură (pattern).getContext("2d").beginPath().PI).getElementById("myCanvas").getContext("2d"). sunt coordonatele centrului.getElementById("myCanvas"). var ctx=c.getElementById("myCanvas").0.0). gradient.stroke().fillText("Hello World".x.0) şi dreapta jos de 150x75 pixeli. 6 .defineşte proprietăţi font pentru text fillText(text.y) defineşte punctul final al unei line Pentru desenarea efectivă se utilizează metoda stroke(). Pentru a desena cercuri se foloseşte metoda: arc(x. Exemple var c=document. ctx. O altă soluţie o constituie cele 2 metode: moveTo(x.3.stop) unde x.y.getContext("2d"). 1.y) . De accea HTML5 defineşte un nou element ce specifică un mod standard pentru a integra fişiere audio în pagina web prin element-ul <audio>. ctx. r raza şi metodele "ink": stroke() sau fill(). ctx. Metoda fillRect(x.50). ctx. Pentru a desena un text în Canvas cele mai importante proprietăţi şi metode sunt: font .moveTo(0. Integrarea fişierelor audio şi video HTML5 AUDIO Diferite browsere pot avea plug-ins diferit pentru redarea fişierelor audio.desenează text (no fill) Using fillText(): Exemplu Scriem cu 30px high filled text.lineTo(300. ctx.10. ctx.x.stroke().r.2*Math.50.width.y.y) defineşte punctul iniţial al unei linii lineTo(x. var ctx=c. implicit fillStyle este #000000 (black).H TM L5 Proprietatea fillStyle poate fi culoare CSS.height) desenează un dreptunghi (rectangle) umplut cu fillStyle curent.150). folosind font "Arial": var c=document.start. Browserele care suporta HTML5 sunt: Internet Explorer 9.y) –desenează text umplut ("filled") strokeText(text. ctx.y. var ctx=c.

Browserele care suportă formate de fişier pentru element <audio>: MP3 (audio/mpeg). and Ogg (audio/ogg): Browser MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.mp3" type="audio/mpeg"> Pentru browsere ce nu suporta audio </audio> Atributele de control adaugă controale audio: play. Opera. </video> Atributele de control adaugă controale audio: play. Chrome.Dacă sunt setate 7 . Chrome. Firefox. ca şi <video> şi Exemplu: <audio controls> <source src="horse. şi volume.ogg" type="video/ogg"> Pentru browsere ce nu suporta video tag. Internet Explorer 8 şi versiunile anterioare nu suportă element <audio>. Tag-urile audio sunt: <audio> <source> <audio> Defineşte conţinut sound Defineşte resurse media multiple pentru elemente media.ogg" type="audio/ogg"> <source src="horse. Se poate adăuga text între tag-urile <audio> şi </audio> tags pentru browsere ce nu suporta audio. De accea HTML5 defineşte un nou element ce specifică un mod standard pentru a integra fişiere video/movie în pagina web prin element-ul <video>. pause. şi Safari . pause. şi volume.mp4" type="video/mp4"> <source src="movie.Elementele <source> se pot lega cu diferite fişiere audio iar browserul utilizează primul format recunoscut.H TM L5 Firefox. Exemplu <video width="320" height="240" controls> <source src="movie. Elementul <audio> permite multiple elemente <source>. şi Safari . Opera. Browserele care suporta HTML5 sunt: Internet Explorer 9. Se poate adăuga text între tag-urile <audio> şi </audio> tags pentru browsere ce nu suporta audio.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 fişierelor video/movie. Wav (audio/wav).

Utilizatorul vede lista drop-down cu opţiuni pre-defined ca şi datele de intrare.H TM L5 atributele height şi width. şi evenimente pentru elemente <video>şi <audio>. loading. altfel nu se cunoaşte dimensiunea exactă şi pagina se va schimba în timpul încărcării Elementul <audio> permite multiple elemente <source>. spaţiul solicitat pentru video este rezervat la încărcarea paginii. etc. proprietăţi. WebM (video/webm). Browserele care suportă formate de fişier pentru element <video>: MP3 (video/mp4). 1.Astfel apar metode pentru: play.6+ NO YES YES MP4 = fişiere MPEG 4 cu H264 video codec şi AAC audio codec WebM = fişiere WebM cu VP8 video codec şi Vorbis audio codec Ogg = fişiere Ogg cu Theora video codec şi Vorbis audio codec HTML5 posedă metode DOM. 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 . Elemente DOM în formulare HTML5 poseda următoarele elemente form: <datalist> <keygen> <output> Element <datalist> Elementul <datalist> specifică o listă de opţiuni pre-definite pentru element <input>. ce permit manipularea acestora pentru JavaScript. end. sau cele de redare (duration şi volume).Elementele <source> se pot lega cu diferite fişiere audio iar browserul utilizează primul format recunoscut. şi Ogg (video/ogg): Browser MP4 WebM Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3. Un element <input> leagă lista de atribute din <datalist>.4. Evenimentele DOM notifică: play.6+ NO YES YES Safari 5+ YES NO NO Opera 10. pause. Este utilizat pentru a furniza facilităţi de "autocomplete" în <input>. pause.

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). Tag-ul <keygen> specifică un generator de căi pereche în form. Cheia privată este memorată local. Cheia publică poate fi utilizată pentru a genera certificatul client pentru autentificarea user-ului pe viitor. cheia publică este trimisă la server.H TM L5 Elementul <keygen> Scopul elementului <keygen> este de a furnmiza securitate la autentificarea user-ilor.value)+parseInt(b. Exemple <form oninput="x.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 9 .value=parseInt(a. sunt generate 2 chei : una privată şi una publică.Când form este submis.

Este posibil ca forma să aibă autocomplete "on". Exemplu: <form action="demo_form. Exemplu <form action="demo_form. browser-ul completează automat valori bazat pe valorile anterior introduce de utilizator. Atributul autocomplete funcţionează cu <form> şi cu următoarele tipuri <input>: text.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"> Câmpul lname aparţine formularului form1.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 încărcarea paginii. (input) trebuie 4 .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 funcţiei autocomplete. password. Când autocomplete este on. Example Câmpul "First name" va fi focalizat la încărcarea paginii: First name:<input type="text" name="fname" autofocus> Atributul form <input> Atributul form specifică dacă mai multe formulare au în comun elemental <input>. tel. datepickers. email. search. Pentru a referi mai multe formulare. range. şi color. Atributul novalidate <form> Atributul novalidate este Boolean şi specifică dacă forma-datele de intrare validate la submit. sau invers. Exemplu <form action="demo_form.H TM L5 Atributul Autocomplete din <form> / <input> Atributul Autocomplete specifică dacă o formă sau un camp pot /sau nu să aibă autocomplete. se utilizează spaţii ce-separă lista de id a formularelor. şi "off" pentru un camp specific. url.

şi apoi codificate ca "multipart/form-data" (al doilea submit button): <form action="demo_post_enctype.H TM L5 Atributul formaction <input> Atributul formaction specifică URL-ul unui fişier ce va procesa controlul intrărilor când formularul este submis.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. Atributul formnovalidate este utilizat cu type="submit". Exemplu An HTML form with two submit buttons. Atributul formmethod este utilizat cu type="submit" şi type="image". Acesta suprascrie acţiunea atributului din elementul <form>. Acesta suprascrie acţiunea atributului din elementul <form>. 5 .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 defineşte metoda HTTP de trimitere a datelor din form action la URL.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. Atributul formaction este utilizat cu type="submit" şi type="image". atributul novalidate specifică dacă elementul <input> trebuie validat când este submis. Example Buttonul al doilea submit suprascrie (post ) metoda HTTP din form (get) : <form action="demo_form. Atributul formenctype este utilizat cu type="submit" şi type="image".asp" value="Submit using POST"> </form> Atributul formnovalidate <input> Cu valori Boolean. Exemplu Se trimit date din form codificate implicit (primul submit button). with different actions: <form action="demo_form.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 acţiunea atributului din elementul <form>. Acesta suprascrie acţiunea atributului din elementul <form>.

Acesta suprascrie acţiunea atributului din elementul <form>. month. Acestea sunt valabile la următoarele tipuri input: number. range. cu diferite fereste ţintă: <form action="demo_form.gif" alt="Submit" width="48" height="48"> Attributul list <input> Atributul list se referă la elementul <datalist> ce conţine opţiuni pre-definite pentru un element <input>. date. Atributul formmethod este utilizat cu type="submit" şi type="image".H TM L5 Example Apar 2 butoane submit (cu şi fără validare): <form action="demo_form. Exemplu <input type="image" src="img_submit. Atributele sunt prezente (amandoua) ca să specifice spaţiul rezervat imaginii la încărcare. datetime. datetime-local.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 cuvânt cheie (keyword) ce indică unde va fi afişat răspunsul primit după trimiterea formularului. Exemplu Un formular cu 2 submit buttons. 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>. time and week. 6 .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">. In lipsa lor browserul nu cunoaşte dimensiune aimaginii şi forma paginii se schimbăîn timpul încărcării.

Exemplu Username: <input type="text" name="usrname" required> Atributul step <input> specifică un număr interval legal pentru un <input> element. 3. search. range. Atributul este util la câmpurile input: text. search. An input field with a specified legal number intervals: <input type="number" name="points" step="3"> 7 . search. url. Atributul funcţionează cu tipurile input: email şi file. url. email. 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 aşteptate pentru câmpul input. month. email. and password. şi file. Se recomandă utilizarea atributului global title pentru a descrie şablonul ajutător. 0. checkbox. date pickers. time şi week. date. etc. Atributul este util la câmpurile input: number. 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>0020şi se poate folosi cu tipurile input: text. Exemplu: dacă step="3". number. numerele legale sunt -3. şi password. radio. tel. şi dispare când câmpul este focalizat. he step Atributul poate fi utilizat împreună cu max şi min pentru a crea rang de valori legale. 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. 6. url. datetime-local.Acesta este afişat în camp când este gol. tel. email.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>. datetime. password.Atributul este util la câmpurile input: text. tel.

Exemplu Select a week: <input type="week" name="week_year"> Input Type: time permite selectarea timpului (no time zone). Exemplu Select your favorite color: <input type="color" name="favcolor"> Input Type: date – permite selectarea datei. Exemple 8 . Exemplu Birthday: <input type="date" name="bday"> Input Type: datetime– permite selectarea datei şi a orei (cu time zone). Input Type: color este utilizat pentru intoducerea câmpului ce conţine culoare.H TM L5 1. 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ă câmpurile vor apare ca şi obişnuite.5. Exemplu Birthday (date and time): <input type="datetime-local" name="bdaytime"> Input Type: month – permite selectarea lunii şî a anului Input type week permite selectarea săptămânii şi anului. Exemplu Birthday (date and time): <input type="datetime" name="bdaytime"> Input Type: datetime-local – permite selectarea datei şi a orei (fără time zone) The datetime-local type allows the user to select a date and time (no time zone).Tipuri Input în HTML5 HTML5 are noi tipuri input pentru formulare.

Input Type: number –este utilizat la introducerea câmpurilor numerice. } function drag(ev) { ev. Exemplu Search Google: <input type="search" name="googlesearch"> Input Type: tel –defineşte camp număr de telefon Example Telephone: <input type="tel" name="usrtel"> Input Type: url – folosit pentru a introduce adrese URL. Exemplu Add your homepage: <input type="url" name="homepage"> Safari sau iPhone recunosc tipul url.com). şi schimbă ecranul pe structura (adds.target.id). care pot avea şi set de restricţii: Exemplu Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> Restricţiile pot fi specificate cu atributele: max .Valoarea câmpului url este automat validată când forma este submisă.preventDefault(). Example <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.setData("Text".dataTransfer. şi schimbă ecranul pe structura (adds @ and . validate când sunt submise Exemplu E-mail: <input type="email" name="usremail"> Safari sau iPhone recunosc tipul email.H TM L5 Select a time: <input type="time" name="usr_time"> Input Type: email– permite introducerea câmpuriloe de email. care pot avea valori într-un rang de numere. 9 . value – valoare implicită Input Type: range –este utilizat la introducerea câmpurilor numerice. min . step . Se pot seta restricţii.com). HTML5 Drag and Drop Drag and drop este parte a standardului HTML5. Exemplu <input type="range" name="points" min="1" max="10"> Input Type: search –permite căutări în câpuri. orice element poate fi draggable.ev.

Chrome şi Safari suportă border-radius şi box-shadow. multe proprietăţi CSS3 au fost implementate în browsere moderne.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> <script> 1. ca şi Photoshop. CSS3 Specificaţiile CSS3 sunt dezvoltate de W3C. suportă CSS2. CSS3 Rounded Corners 10 . CSS3 este perfect compatibil cu versiuni anterioare. dar solicită prefix –o pentru-borderimage. Proprietăţi border: border-radius box-shadow border-image Browser Support Internet Explorer 9 suportă border-radius and box-shadow. dar solicită prefix -webkit. se pot folosi imagini ca bordure.appendChild(document.pentru border-image iar Opera suportă border-radius şi box-shadow. CSS3 este divizat în "module". ev.preventDefault().dataTransfer.target.getElementById(data)). Firefox suportă toate proprietăţile border. var data=ev.6. } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo. adăuga umbre.H TM L5 } function drop(ev) { ev. 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. fără a utiliza programe de design.getData("Text").

şi solicită prefix -moz. Proprietatea background-size specifică dimeniunea imaginii fundal.gif). Chrome. Safari 4 solicită prefix -webkit. background-repeat:no-repeat. ce permit control sporit asupra elementului background.pentru proprietatea background-size. /* Old Firefox */ background-size:100% 100%. Safari 5 şi Opera suportă background.In CSS3. Internet Explorer 9. 11 . -moz-background-size:100% 100%.Ea poate fi plasată în content-box. /* Old Firefox */ } CSS3 Backgrounds CSS3 conţine noi proprietăţi background. ceea ce permite re-utilizarea ei în diferite contexte.gif). background-repeat:no-repeat.H TM L5 Adaugă colţuri rotunjite faţă de CSS2 şi se pot utiliza diferite imagini pentru fiecare colţ. Dacă se specifică size ca %. padding-box. -moz-border-radius:25px. Exemplu 1 Redimensionare imaginii background: div { background:url(img_flwr. proprietatea border-radius este utilizată la crearea colţurilor rotunjite: Exemplu div { border:2px solid. In CSS3 este posibilă specificarea size pentru imaginea background. /* Old Firefox */ background-size:80px 60px. } Exemplu 2 div { background:url(img_flwr. moz-background-size:80px 60px. sau border-box . size este relativă la width şi height în elemental părinte. } Proprietatea background-origin specifică aria de posiţionare a imaginii fundal. Dimeniunea se specifică în pixeli sau %.6 nu suportă background-origin.pentru proprietatea background. Proprietăţi background: background-size -dimensiunea background-origin -originea Firefox 3. border-radius:25px. Firefox 4.

In Text Shadow se specifică: horizontal. background-repeat:no-repeat.url(img_tree. } Proprietăţi Background background-clip Specifică zona de desenare a imaginii fundal background-origin Specifică zona de poziţionare a imaginii fundal background-size Specifică dimeniunea imaginii fundal Efecte Text CSS3 conţine câteva caracteristici noi. Safari.H TM L5 Exemplu Pozitionarea imaginii fundal în content-box: div { background:url(img_flwr. Proprietăţi text-shadow word-wrap Internet Explorer nu suportă text-shadow.gif). distanţă blur. Chrome. vertical. şi culoare: Exemplu h1 { text-shadow: 5px 5px 5px #FF0000. } Word Wrapping permite despărţirea cuvântului pe mai multe linii. } Example Setarea a 2 imagini în body element: body { background-image:url(img_flwr. -webkit-background-origin:content-box. background-size:100% 100%.gif). /* Safari */ background-origin:content-box.Firefox. chiar dacă se realizează pe mai multe rânduri 12 . and Opera suportă textshadow şi majoritatea browserelor suportă word-wrap.gif).

Internet Explorer 9+ suportă @font-face rule. } </style> Using Bold Text You must add another @font-face rule containing descriptors for bold text: Example @font-face { font-family: myFirstFont.eot'). Example <style> @font-face { font-family: myFirstFont. url('Sansation_Bold. Safari. @font-face Firefox.} Properietăţi 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. Chrome. } 13 . dat numai de tip. src: url('Sansation_Bold. /* IE9+ */ } div { font-family:myFirstFont. web designeri pot utilize orice font şi fonturile “proprii” sunt definite în CSS3 @font-face rule.otf (OpenType Fonts). and Opera suportă fonturi.In CSS3.H TM L5 Exemplu p {word-wrap:break-word. /* IE9+ */ font-weight:bold. url('Sansation_Light. src: url('Sansation_Light.eot (Embedded OpenType).ttf').ttf').ttf (True Type Fonts) şi . web designerii foloseau fontile deja instalate pe computer.eot').

Browserele vor utilize acesta cand apare un font-family "myFirstFont" ce trebuie redat bold. Chrome. exceptând Internet Explorer. Outline este suportată de majoritatea browserelor. CSS3 Resizing Elementul div este redimensionabil de utilizator (în Firefox 4+.H TM L5 Fişierul "Sansation_Bold. box-sizing este suportată în Internet Explorer. a chenarelor. CSS3 Font Descriptors font-family Name Required. şi Opera. Firefox solicită prefix -moz-. Defineşte rang caractere UNICODE pentru font. apar facilităţi noi de interfaţă user: redimensionarea elementelor. Safari solictă prefix -webkit-. şi Safari. Defineşte numele fontului src URL Defineşte 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. Pot fi create mai multe @font-face rules pentru acelaşi font. Implicit "U+0-10FFFF" CSS3 User Interface In CSS3.etc. Example div { 14 .ttf" este un alt fişier ce conţine caractere bold din Sansation. Chrome. Chrome. Proprietăţi resize box-sizing outline-offset Resize este suportată de Firefox 4+. şi Safari).

ca şi iPhone.7. -moz-box-sizing:border-box. Safari and Opera. 15 . /* Firefox */ -webkit-box-sizing:border-box. Firefox. Aceasta nu este disponibilă dacă utilizatorul nu acceptă. outline:2px solid red. overflow:auto.Browsere ce suportă Geolocalizarea: Internet Explorer 9. } Proprietăţi appearance box-sizing icon nav-down nav-index nav-left nav-right nav-up outline-offset resize 1.Geolocalizarea are acurateţe mai mare pentru dispozitive cu GPS. Rolul scripturilor în aplicaţii de Geolocaţie HTML5 Geolocation HTML5 Geolocation este utilizat pentru a localiza pozitia utilizatorului.H TM L5 resize:both. float:left. } CSS3 Box Sizing permite definirea elementelor certe pentru a fixa zona. } CSS3 Outline Offset desenează în spatele marginii border şi diferă de border: Outlines nu ia din spaţiu Outlines poate fi non-rectangulară Exemple div { border:2px solid black. The HTML5 Geolocation API este utilizat pentru a obţine pozitia geografică a utilizatorului. /* Safari */ width:50%. Exemple div { box-sizing:border-box. Chrome. outline-offset:15px.

innerHTML="User denied the request for Geolocation.latitude + "<br>Longitude: " + position.innerHTML="Latitude: " + position.coords.Using Geolocation Metoda getCurrentPosition() furnizează pozitia utilizatorului (longitudine. Northern Territory. } </script> Explicaţii: Dacă este suportat Geolocation.geolocation) { navigator. HTML5 . metod getCurrentPosition()returnează coordonatele obiectului ca parametru ( showPosition ).longitude. codul poştal din UK . Procesul de reverse geocoding funcţionează în sens invers celui de geocoding prin convertirea coordonatelor geografice ale unei locaţii într-un set de caracteristici locale.getElementById("demo").87690 longitudinde returnează o adresă pe Stott Street. } else{x. Alice Springs.} } function showPosition(position) { x. Prin geocoding. Funcţia showPosition() afişează Latitudinea şi Longitudinea. It specifies a function to run if it fails to get the user's location: Exemplu function showError(error) { switch(error. Reverse geocoding a coordonatelor -23. Manipularea erorilor The second parameter of the getCurrentPosition() method is used to handle errors.code) { case error. Australia.coords. function getLocation() { if (navigator. Exemplu <script> var x=document.5184 .".EC1N 2NS returnează coordonatele zecimale : Latitudine = 51.geolocation.innerHTML="Geolocation is not supported by this browser.H TM L5 Geocoding şi Reverse Geocoding Geocoding-ul reprezintă conversia unei adrese sau cod poştal în coordonate geografice.70090 latitudine şi 133.getCurrentPosition(showPosition)." 16 .PERMISSION_DENIED: x.111. Longitudine = -0. latitudine).

UNKNOWN_ERROR: x.POSITION_UNAVAILABLE: x.innerHTML="<img src='"+img_url+"'>". var img_url=http://maps. } } Coduri de eroare: Permission denied – Utilizatorul nu are acces la Geolocation Position unavailable – Nu este disponibilă locaţia curentă Timeout – Operaţia a expirat (timed out) Afişarea rezultatelor în hartă (Reverse Geolocation) Parametri necesari: latitude and longitude.altitude Altitudinea (metri deasupra nivelului mării) Cords." break. zoom şi drag.coords.coords.longitude Longitudinea (număr zecimal) Cords.getElementById("mapholder").accuracy Acurateţea poziţiei Cords.." break.com/maps/api/staticmap?center= +latlon+"&zoom=14&size=400x300&sensor=false".innerHTML="Location information is unavailable.latitude+".altitudeAccuracy Acurateţea altitudinii Cords. case error. Proprietăţi Descriere Cords.heading Heading ca grade de la Nord Cords."+position.innerHTML="The request to get user location timed out.latitude Latitudinea (număr zecimal) Cords.TIMEOUT: x." break.innerHTML="An unknown error occurred. Metoda getCurrentPosition() întoarce un obiect Geolocation object (dacă este executată cu success).googleapis. document.longitude. case error.H TM L5 break. Google Maps: Example function showPosition(position) { var latlon=position.speed Viteza (m/s) Timestamp Data/timpul de răspuns 17 . case error. Google Map Script Scriptul permite hărţi interactive cu opţiuni de marker. } Utilizând o imagine statică Google map latitudinea şi longitudinea permit localizarea pe hartă.

clearWatch() – Opreşte watchPosition(). * Google Maps API for Business developers nu include o cheie la solicitare. Dacă utilizarea aplicaţiei Maps API exceede Usage Limits. care . 3. } </script> Google Maps JavaScript API v3 Toate aplicaţiile Maps API 2 * solicită API key. Crearea unei API key: 1.google. se poate cumpăra cotă suplimentară.com/apis/console se loghează cu Google Account. API key este disponibilă din pagina API Access. Se mapează API cu Key for browser apps.". Se accesează Services.H TM L5 Alte metode ale Geolocation– watchPosition() – Intoarce poziţia curentă a utilizatorului şi continuă să o actualizeze (ca un GPS în maşină). permite monitorizarea aplicaţiilor Maps API. Se activează serviciul Google Maps API v3. 4.watchPosition(showPosition).} } function showPosition(position) { x.geolocation.innerHTML="Geolocation is not supported by this browser.innerHTML="Latitude: " + position. 2.getElementById("demo"). La https://code.coords.google.coords.geolocation) { navigator.com/maps/documentation/javascript/tutorial 18 . Click pe API Access. 2 https://developers. şi permite Google să ia despre aplicaţia dezvoltată. } else{x. Metoda watchPosition() solicită dispozitiv GPS (iPhone): Exemplu <script> var x=document.longitude.latitude + "<br>Longitude: " + position. în secţiunea Simple API Access. function getLocation() { if (navigator.

.MapTypeId.LatLng(-34.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. margin: 0.googleapis.ROADMAP 19 .0.397. cu link la cheia proprie. padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript"> src="https://maps.H TM L5 Figura 1 Google Apis Se poate specific ace domeniu este permis pentru API key prin : Edit allowed referrers.maps. 150. Exemplu: Pagina web afişează o hartă folosind CSS <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.maps. zoom: 8. user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%. mapTypeId: google..644).

margin: 0. Valoarea variabilei set_to_true_or_false subliniază setarea explicită. se încarcă Google Maps JavaScript API peste HTTPS: <script 20 . height:100%"></div> </body> </html> Explicaţii Am creat aplicaţia ca HTML5 cu declaraţia <!DOCTYPE html>. indicând dacă aplicaţia utilizează senzor (GPS locator) pentru a determina locaţia utilizatorului. var map = new google.googleapis. şi trebuie generată de la consolă. Incărcarea Google Maps API <html> <head> <script type="text/javascript" src="https://maps. } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%. Trebuie specificată declaraţia procentelor pentru <body> şi <html>. mapOptions). padding: 0 } #map_canvas { height: 100% } </style> In declaraţia CSS se indică un container map <div> (named map_canvas) ce va lua 100% din înălţimea body HTML.Aceaste nu este identică cu cheia utilizată de v2 API. Se recomandă declararea DOCTYPE în aplicaţia web. Am creat un element div numit "map_canvas" pentru a reţine Map. <!DOCTYPE html> Pentru o funcţionare optimă a stilurilor CSS se recomandă includerea declaraţiei <style> : <style type="text/css"> html { height: 100% } body { height: 100%.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_ OR_FALSE"> </script> URL conţinut în tag-ul script este locaţia unui fişier JavaScript ce încarcă toate simbolurile şi definţiile necesare pentru Google Maps API. Google Maps API for Business se referă la încărcarea Google Maps API în documentaţia Business. Funcţia JavaScript crează un obiect "map". Tag-ul script este obligatoriu. Parametrul sensor al URL trebuie inclus.Map(document. Am creat un obiect JavaScript literal pentru a număra proprietăţile map.maps.H TM L5 }. Parametrul key conţine cheia aplicaţiei API. HTTPS Dacă aplicaţia este HTTPS.getElementById("map_canvas"). Se initializează map object din tagul body la eveniment onload. Am inclus Maps API JavaScript cu tag script.

In tag-ul <script> se precizează ca răspuns la evenimentul window. center: new google. script.maps. height: 100%"></div> 21 .getElementById("map_canvas"). se poate încărca în plus libraries folosind parametrul libraries.maps. mapOptions).body. Exemplu: function initialize() { var mapOptions = { zoom: 8.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRU E_OR_FALSE Acest lucru este necesar în aplicaţii SSL pentru a evita erori de securitate în majoritatea browsers.onload sau prin apel de funcţie.googleapis. mapTypeId: google.googleapis.397. In plus cerem API doar să execute funcţia initialize() după ce API este complet încărcată transmitând callback=initialize to the Maps API bootstrap: Map DOM Elements Harta are un spaţiu rezervat pentru afişare.644). creat şi denumit în elemental div şi obţinut ca referinţă în browser ca document object model (DOM).maps.Map(document. şi este recomandată pentru aplicaţii ce includ în cerere date sensitive. ca şi locaţia utilizatorului.onload) şi scrie Maps JavaScript API într-un tag <script> în pagină.onload = loadScript.googleapis.LatLng(-34. document.type = "text/javascript". caz în care de oferă instrucţiuni către Maps JavaScript API despre întârzierea execuţieipănă la terminarea încărcării codului Maps JavaScript API. } window. <div id="map_canvas" style="width: 100%.src = "http://maps. Instrucţiunile aplicaţiei încarcă Maps API după ce pagina a fost complet încărcată (window. script.appendChild(script). } function loadScript() { var script = document. 150.MapTypeId.com/maps/api/js?key=YOUR_API_KEY& sensor=TRUE_OR_FALSE&callback=initialize".createElement("script").H TM L5 type="text/javascript"></script> src=https://maps. Libraries La încărcarea JavaScript Maps API via http://maps. Incărcarea asincronă API Se paote încărca Maps API JavaScript după ce pagina s-a terminat de încărcat sau la cerere. Libraries sunt module de cod ce dau funcţionalitate adiţională JavaScript API.ROADMAP } var map = new google.com/maps/api/js URL.

maps.644). longitude }: center = new google.maps. In JavaScript hărţile sunt reprezentate prin clasa Map." zoom: 8 Map Types Se specifică tipul hărţii mapTypeId: google. nume de oraşe).MapTypeId. se crează obiectul LatLng ce reţine locaţiaprin coordonate { latitude. creat ca obiect literal. Nodurile HTML sunt fii ai obiectului JavaScript document. var mapOptions = {}. opts?:MapOptions) Crează o nouă hartă (map) in interiorul containerului HTML (tipic elemental DIV) folosind (opţonal) parametrii transmişi.getElementById().MapTypeId. 150. Latitudes and Longitudes Dacă se doreşte centrarea pe un anume punct.Map(document. zoom: 8. mapOptions). Dimensiunea setată la "100%" va expanda la valori potrivite pe dispozitive mobile.644) Zoom Levels Permite setarea la rezoluţii mai bune sau mai slabe iar Google Maps şi Maps API sunt divizate în hărţi "tiles"şi "zoom levels. Funcţia Map() este constructor şi are definiţia: Map(mapDiv:Node. Map Object var map = new google.H TM L5 In exemplu. s-a definit <div> numit "map_canvas" şi s-a setat dimensiunea cu atribute style. Pentru a initializa Map. mapTypeId: google.LatLng(-34. • TERRAIN afişată ca relief fizic ce oferă elevaţia formelor de relief (munţi.LatLng(-34.). Instanţele se crează cu operatorul new şi se specifică <div> ca şi container pentru map.397.getElementById("map_canvas").maps. • HYBRID afişată ca mix de secvenţe fotografice şi layere pentru caracteristici proeminente (străzi. se crează întâi Map options. Map Options var mapOptions = { center: new google. • SATELLITE afişată fotografic. Harta va lua dimensiunea din conteiner şi size este precizată explicit în <div>. un obiect ce conţine iniţializarea variabilelor map.ROADMAP }. şi se obţine referinţă la aceste elemente via metoda document.maps. 150.ROADMAP Sunt disponibile următoarele tipuri: • ROADMAP afişată normal. etc. 2D din Google Maps.maps. Incărcarea hărţii <body onload="initialize()"> 22 . râuri. Obiectele din clasă definesc o singură hartă pe o pagină.397.

la fel HTML. XML este independent de platformă. XML permite îmbogăţirea conţinutului cu ”metainformaţii”. · marcatorii nu pot să conţină spaţii şi trebuie să înceapă cu o literă. Arhitecturile bazate pe XML implica utilizarea unei varietăţi 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 când elementele respective nu mai conţin subelemente.8. · marcatorii şi atributele lor (inclusiv valorile) sunt casesensitive (spre 23 . atunci când Charles F. XML este independent de platformă. ci doar date. Avantajul acestei separări este posibilitatea utilizării şi în cadrul altor dispozitive care pot avea conexiune la Internet. · toţi marcatorii sunt simetrici şi perfect imbricaţi (în HTML se acceptă construcţii de genul <b><i>text</b></i>). ajungânud-se la crearea unui document autodescriptiv şi permite transferul de date între aplicaţii. document object model (DOM) este construit. reprezintă proprietăţi ale unui element.8.1. Sistemele bazate pe servicii Web implică studiul limbajului XML şi al tehnologiilor bazate pe acest standard de descriere a datelor. XML ŞI XSL XML (Extensible Markup Language) este un metalimbaj de marcare ce permite structurarea informaţiei din cadrul unei pagini Web. Structurarea informaţiei într-un document XML se realizează prin marcaje care definesc elementele documentului. la eveniment onload. lizibilitatea poate creşte prin transferarea unor date sub formă de atribute.org) şi provine din metalimbajul SGML. Avantajul acestei separări este posibilitatea utilizării şi în cadrul altor dispozitive care pot avea conexiune la Internet. ajungânduse la crearea unui document autodescriptiv şi permite transferul de date între aplicaţii. care poate fi fiind declarat în DTD sau XML Schema. definite prin proprietăţi care vor lua valori. Regulile pe care un element trebuie să le respecte sunt : · elementele sunt case sensitive. Un element este alcătuit dintrun marcaj de deschidere. XML permite separarea informaţiei de prezentarea ei. Goldfarb a dezvoltat şi introdus metalimbajul SGML (Standard Generalized Markup Language) care a devenit un limbaj internaţional standardizat (1986) de reprezentare şi schimb al datelor.Unitatea de structură a unui document XML este elementul. Documente XML. Dacă limbajul HTML permite descrierea modului de prezentare a informaţiei în cadrul unei pagini Web. Pentru a ne asigura că harta este plasată după ce pagina s-a încărcat complet. METALIMBAJELE 1.w3. XML a fost creat de Consorţiul Web (www. un conţinut şi un marcaj de închidere. Atributele furnizează informaţii suplimentare despre un element. 1. XML permite separarea informaţiei de prezentarea ei. · numele nu pot începe cu xml sau XML. extensibil şi compatibil Unicode. se execută funcţia ce construieşte obiectul Map în elementul <body> din HTML. Când se doreşte adâncirea arborelui pe mai mult nivele. Prima varianta se aplică în general la “frunzele” arborelui. extensibil şi compatibil Unicode. şi orice imagini externe şi scripturi sunt primate şi incorporate în obiectul document. etichete autodescriptive care permit etichetarea conţinutului unei pagini Web.H TM L5 La încărcarea paginii HTML.

Interiorul acestuia va fi populat cu subelement care la rândul lor pot să conţină alte elemente. Un document XML are o structură arborescentă formată din elemente şi subelemente. un conţinut şi un marcaj de închidere. Elementele de pe acelaşi nivel sunt în relaţie de tip „frate”. Elementele vide sunt elemente ce conţin doar marcatori. email şi parolă. Prima linie a documentului se numeşte declaraţie XML Exemplu: <?xml version="1. Atributul furnizează informaţii suplimentare despre un element. Regulile pe care un element trebuie să le respecte sunt : elementele sunt case sensitive. O instanţă a unui vocabular poartă 24 . · valorile atributelor trebuie incluse în ghilimele sau apostroafe. Elementul rădăcină este echivalentul marcatorului HTML din limbajul HTML. Elementul rădăcină conţine toate celelalte elemente.com</email> <parola>george</parola> </client> <client> <numeprenume>Ionescu Dan </numeprenume> <email>ionescu@yahoo. toate marcajele să fie închise. adică seturi generalizate de elemente deservind unui anumit scop (Ex.H TM L5 deosebire de HTML). Unitatea de structură a unui document XML este elementul. 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 elementrădăcină. obţinânduse astfel un arbore de elemente. Structurarea informaţiei într-un document XML se realizează prin marcaje care definesc un elementele documentului. Prima linie a documentului se numeşte declaraţie XML. Elementele XML pot fi grupate şi clasificate în vocabulare.com</email> <parola>informatica</parola> </client> Se poate observa un exemplu care utilizează elementul rădăcină Client şi conţine trei elemente: numeprenume. Un element este alcătuit dintr-un marcaj de deschidere. iar în documentul XML poate exista un singur element de acest fel. acesta fiind declarat în DTD sau XML Schema. cu relaţii „tată -fiu”. numele nu pot începe cu xml sau XML. În exemplul de mai jos se poate observa un exemplu care utilizează elementul rădăcină Client şi conţine trei elemente: numeprenume. fără conţinut informaţional. 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 definiţie DTD. email şi parolă.0"> <client> <numeprenume>Popescu George</numeprenume> <email>georgep@yahoo. Relaţia de tip arborenscent care se constituie în această situaţie permite generalizarea relaţilor pornind de la nivelul rădăcinii către nivele inferioare cu un grad de particularizare din ce în mai mare [Buchmann06]. elementele unei facturi). · un element poate să conţină un număr de subelemente şi conţinut de date în acelaşi timp.

PDF. Un alt element important în cadrul tehnologiilor XML este interfaţa de manipulare a elementelor. accesibil utilizatorilor (ex. Utilizarea vocabularelor şi documentelor XML permite stabilirea unor seturi standard de vocabulare pentru comunicare şi schimb de informaţii între firme. nu pot fi definite două elemente diferite cu acelaşi nume. nu poate fi controlat tipul de date utilizate de un element sau de un atribut. publicabil. XHTML. Elementele XML sau valri ale astfel de documente pot fi căutate şi filtrate utilizând funcţii XPath. XHTML. cu posibilitatea de a defini tipuri personalizate (subtipuri ale celor implicite)” [Buchmann07]. SVG) sau în documente text. XSLT respectă sintaxa XML şi nu necesită DTD. Un astfel de limbaj este DTD (Document Type Definitions). TXT). · atributele unui element şi măşti de verificare a valorii acestora. [Erl04] Limbajul XPath (XML Path) asigură reutilizarea unui set de specificaţii XML de către alte standarde. DOM descrie documentele XML prin intermediul unei vederi arborescente. Practic XSLT adaugă informaţii de stil documentelor sursă XML. XSL poate fi utilizat atât pe parte de client. Cu ajutorul acestuia se precizează: · elementele care pot apărea în documentul XML. Regulile se pot referi la limite de valori. Practic XPath adresează un document XML în acelaşi fel în care sunt adresate în mod tradiţional căile fişierelor în cadrul unei structuri de directoare. Expresiile care identifică locaţia sunt numte expresii şi permit integrarea lor în alte documente XML. 25 . XSLT (Extensible StyleSheet Language Transformations) este un limbaj care realizează transformarea documentelor XML în alte tipuri de documente (ex. aceasta din urmă fiind soluţia preferabilă. prin intermediul cărora „se pot stabili reguli de validare a informaţiei propriuzise. care este un limbaj bazat pe XML. la valori obligatorii. asigură un set complet de tipuri de date simple şi suport pentru definirea tipurilor complexe de date. în cadrul căreia elementele sunt văzute ca noduri. Cel mai popular API bazat pe evenimente este Simple API for XML (SAX) pentru care majoritatea platformelor de dezvoltare asigură recunoaşterea şi utilizarea lui. permiţând utilizarea a două obiecte cu acelaşi nume în contexte diferite. Astfel documentele XML pot fi manipulate prin intermediul unei interfeţe arborescente. dintre care menţionăm: nu este bazat pe XML şi în consecinţă aplicaţiile care procesează documentul XML trebuie să cunoască limbajul DTD.H TM L5 denumirea de document. Aceste lipsuri au fost înlăturate prin utilizarea XML Schema Defnition language (XSD). Limbajul DTD prezintă însă o serie de dezavantaje. cât şi pe parte de server. nu doar a structurii de marcatori. Vocabularele XML pot fi descrise prin intermediul unor limbaje de definire a unor scheme. Un alt avantaj al XSD este posibilitatea definirii de constrângeri suplimentare. · ordinea şi relaţiile dintre elemente. documentele scrise în acest limbaj fiind procesate în mod similar documentelor XML. Consorţiul W3C asigură un API standard de manipulare a elementelor prin intermediul DOM (Document Object Model). asigură suport complet pentru spaţiile de nume. bazată pe evenimente sau clase. 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. la dependenţe de valori şi inclusiv la tipul valorilor.

ServiceOriented Architecture A Field to Integrating XML and Web Services. Expresiile XQuery pot fi incluse în documente XML. În funcţie de natura datelor căutate şi de tipul expresiei care urmează a fi construită. 19) 26 . Erl în lucrarea ”Service Oriented Architecture.0. · Expresii cuatificate – includ logica cuantificării.H TM L5 Limbajul XQuery (XML Query) asigură un limbaj de interogare a datelor în cadrul documentelor XML. XQuery utilizează limbajul XPath pentru a adresa sursele de date. oferă o privire de ansamblu asupra complexităţii acestora. 2004. 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. Relaţii între specificaţiile XML 3 3 (Erl Th. O caracteristică importantă este posibilitatea interogării mai multor documente XML utilizând o singură interogare. O scurtă prezentare a principalelor limbaje şi specificaţii utilizate în cazul tehnologiilor XML. utilizând cuvinte cheie precum some sau every. Odată cu specificaţiile XPath 2. · Expresii condiţionale – permit utilizarea expresiilor complexe utilizînd construcţii de tip if – else. Figura 2. Relaţiile dintre documentele XMl şi specificaţiile prezentate anterior sunt sintetizate de Th.. grupate în funcţii organizate pe module din punct de vedere logic. A Field to Integrating XML and Web Services” şi prezentate în figura 2.1. Prentice Hall. p. · Constructori ai elementelor – permit creare dinamică de noi elemente şi valori XML .

a fost una din puţinele idei care a adus la aceeaşi masă şi a aliniat la aceleaşi scopuri companii ca IBM. Paginile Web dinamice au lansat o nouă etapă în istoria Webului. permiţând utilizarea a două obiecte cu acelaşi nume în contexte diferite. 27 . Tehnologiile de transfer şi conversie de conţinut au fost o preocupare intensă la începuturile Webului şi hipertextului. a comunicării bilaterale. asigură un set complet de tipuri de date simple şi suport pentru definirea tipurilor complexe de date. obţinânduse astfel o mai bună oportunitate a informaţiei. care este un limbaj bazat pe XML. Oracle şi Microsoft.8. Standardizarea. cel mai important pas făcut până acum în acest sens. Programele de conversie XML sunt esenţiale în comunicare B2B în special şi în spaţiul 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-rădăcină. Avantajele documentelor XML Separarea conţinutului de prezentare. Cu ajutorul acestuia se precizează: elementele care pot apărea în documentul XML. Limbajul DTD prezintă însă o serie de dezavantaje. documentele scrise ăn acest limbaj fiind procesate în mod similar documentelor XML. Premisa esenţială a Internetului este distribuţia de conţinut informaţional. nu pot fi definite două elemente diferite cu acelaşi nume. inclusiv pentru conversii în alte formate de fişiere. XML oferă potenţial pentru generarea şi modificarea dinamică a conţinutului documentelor XML. Aceste neajunsuri au fost înlăturate prin utilizarea XML Schema. Am mai amintit că validarea spaţiului economic virtual este direct dependent de robusteţea unei fundaţii tehnologice omogene. 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 definiţie DTD. nu poate fi controlat tipul de date utilizate de un element sau de un atribut. Documentele XML pot fi descrise prin intermediul unui DTD. În ciuda concurenţei acerbe pe piaţa tehnologiilor Web. XML este. Sun. Întreţinerea unui site cu o rată înaltă de împrospătare a conţinutului (aşa cum ar trebui să fie orice site) depinde în mod vital de această modularizare. atributele unui element şi măşti de verificare a valorii acestora. O aceeaşi prezentare poate afişa date preluate din diferiţi arbori XML de structură similară sau apropiată. etapa dialogului. dintre care menţionăm: nu este bazat pe XML şi în consecinţă aplicaţiile care procesează documentul XML trebuie să cunoască limbajul DTD. Dinamica.H TM L5 1. mai mult decât HTML (datorită concurenţei browserelor). se pot scrie diverse programe care să trateze marcatorii XML folosiţi într-o clasă de documente. Un document XML poate fi prezentat în moduri diferite fără a i se afecta semantica şi structura. şi au garantat micşorarea timpilor de reacţie în accesarea informaţiei. XML. sub moderarea Consorţiului W3. poate. ordinea şi relaţiile dintre elemente. Astfel.2. toate marcajele să fie închise. asigură suport complet pentru spaţiile de nume. în diferite scopuri. Lizibilitatea informaţiei. Regulile de formare a arborilor XML nu acceptă abateri de la imbricare şi de la modul de construcţie a marcatorilor.

NMTOKEN şi NMTOKENS enumerare Fiecare declaraţie dă informaţii spre procesorul XML prin # REQUIRED atribut ce trebuie furnizat sau # IMPLIED nu ne furnizează valoarea implicită. SVG) sau în documente text. XSL poate fi utilizat atât pe parte de clinet. acronime. IDREFS. ASP).H TM L5 XSL (Extensible StyleSheet Language) este un limbaj care realizează transformarea documentelor XML în alte tipuri de documente (ex. asociate cu notation identificator prin nume. Practic XSL adaugă informaţii de stil documentelor-sursă XML. Spre exemplu. devine foarte strânsă legătura sintaxă-semantică.0" ?> < ?xml version= " 1.CDATA tokenized . asigurând caracter multiplatformă site-urilor concepute în cele mai variate tehnologii. XML. Entităţile pot fi parsed (Conţinutul se referă la text întocmit. [PHILIPS] 1. SGML.8.ID. Exemplu : Internal external < ? xml version = " 1. abrevieri. codul capătă claritate şi motoarele de căutare pot realiza căutări mai exacte. În plus. 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 serveşte la poarta de intrare al procesorului XML. ENTITIES. citate. codul HTML: Astfel. ceea ce în HTML era posibil doar pentru adrese. IDREF. XML permite ca marcatorii să precizeze tipul informaţiei marcate. Sunt 2 28 . aceasta din urmă fiin soluţia preferabilă.dtd”> <anunt> Intalnirea se anuleaza < anunt >Intalnirea se anuleaza!</ anunt > </ anunt > Atributele type sunt de 3 feluri: String . considerat parte integrantă a documentului) sau unparsed. Standardele legate de XML care realizează aceste transformări sunt CSS (stilurile în cascadă) şi XSL (limbajul de extindere a stilurilor). enumerări şi variabile şi chiar acolo sunt folosite nu pentru caracterizarea datelor. XHTML. De asemenea XML permite înlocuirea şi extinderea marcatorilor limbajelor brevetate (HTML. Limbajul XSL respectă sintaxa XML şi nu necesită DTD. Particularitãţi XML Orice document XML respectă gramatica din Document Type Definition (DTD) fie în internal subset fie în external subset.3. cât şi pe parte de server. ci pentru formatare.0 " > <!DOCTYPE anunt [ <!DOCTYPE anunt ] </ELEMENT greeting (#PC DATA)> SYSTEM ”hello. ColdFusion. ENTITY.

ţinta instrucţiunii procesate.w3.w3. Exemplu: referinţe externe general-entity: <! DOCTYPE book SYSTEM book.folosit în conţinutul documentului şi parameter entities folosit în interiorul DTD. out-of-line şi trebuie folosite pentru legături multidirecţionale./’ prefix=’dt’?> <Date dt:Case Type =’date. etc. pentru legături online (leagă resurse ce nu pointează la locatori) 29 .H TM L5 tipuri de parsed entities: general entities. Ambele legături au implementat funcţii associate ca şi: unul sau mai mulţi locatori ce identifică resurse remote (una pentru fiecare resursă remote) semantica legăturii semantica resursei remote semantica resursei locate.> <! ATTLIST rule pattern % pattern. Exemplu: pentru a specifica tip de dată <?xml:namespace ns=’urn:urid:C2F4…. nume atribut.. Exemplu: <A xml:link=”simple” href=”http://www. legături originale spre resurse read-only.org’ prefix=’W3C’ ?> unde: ns – conţine URI src – adrese opţionale 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. #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. </head> </book> referinţe parameter entry: <: ENTITY %pattern “CDATA”> <!ENTITY % actions “#PC DATA”> <! ELEMENT rule % actions.org”>The w3c </A> XLink defineşte elmente de legătură: simple link (online şi totdeauna unidirecţionale) respectiv extended link – ce poate fi inline.iso8601”> 1997-03-17 </Date> XML linking language (Xlink) XLink descrie legături între obiecte date şi au atribut Xml:link cu valori posibile simple sau extended (locator grup sau document ce identifică legături relative cu tipuri de elemente).xml”> ]> <book> <head> &toc.dtd”[ <! ENTITY toc SYSTEM “toc.

noduri cu acelaşi părinte ce apar după alocaţiei source Argumente potenţiale: selecţia numărului de apariţii (pozitive. Include: root() sursa locaţiei este elementul root.2” role=”Referat”/> </Commentary> Comportamentul link Xlink furnizează politici comportamentale ce permit: Show explicitează politica în contextul în care resursa este afişată sau procesată.4” role=”Articol”/> <locator href=”Arba4.instanţei.noduri ce apar după location source psibling . new în timp ce se traversează legătura.xyz. Are valori: embed în timp ce se traversează legătura. în corpul resursei şi localizează unde începe tranzacţionarea.Behaviors – comportamentul (instrucţiuni implementate) XML Printer Language XPrinter este o serie de location terms. replace înlocuieşte în timp ce se traversează legătura.H TM L5 Simple link: <Citation xml:link=”simple” href=”http://www.auto indică resursa ce poate fi găsită când se întâlnesc aceleaşi legături .1” role=”Carte”/> <locator href=”Lemay1. remise este embeded pentru afişare sau procesare. resursa este embeded pentru afişare sau procesare. negative. fiecare specifică locaţia. all.identifică noduri element conţinute în cadru following . id(name) sursa locaţiei este un element ID Relative Location Terms conţine: child noduri directe child pentru sursa locaţiei descendant . Absolute Location Terms pot fi utilizaţi la localizarea resurselor ca self contained XPrinter. în corpul resursei şi se afişează sau procesează în context nou . nume de attribute şi valori 30 .com/xml/Popescu. în corpul resursei este înlocuită unde începe tranversarea. . instructiune).Actuate – apare când : .noduri cu acelaşi părinte ce apar înaintea location source fsibling .user resursa nu este prezentă până când nu se face o cerere explicită externă .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. text (în elemente CDATA). comment. .nodul apare oricând în context ancestor . cdata. . remise este embedded pentru afişare sau procesare. pi (process. de obicei relativă şi are keyword ca şi id sau child şi argumente (m. all) selecţia tipului de nod: element implicit. top element attribute). origin() pentru o subresursă (ca şi Xlink).

”!”. Chemical Markup Language (CML). SVG defineşte graficul în format XML şi nu îşi pierde calitatea la zoom sau redimensionare. all) string candidate . Advantaje: Faţă de ale formate de imagini (JPEG sau GIF) SVG oferă posibilitatea: creare şi editare cu orice editor text.1) selectează 5”!” şi următorul caracter după el Ca şi concluzii XML furnizează suport puternic pentru format flexibil pentru expresii de date: exchange format (date change. şi comprimare. utilizatori îşi va putea organiza un propriu Yahoo pe calculatorul de acasă. Chrome.găsit în sursa locaţiei position /character offset a începutului pentru şiruri candidate (positive.#element). SVG XML Scalable Vector Graphics (SVG) ca recomadare W3C.8.2”) Alţi termeni Location .1.spanning location term – identificat cu span localizează subresurse id(11). negative. child(3)) .string identifică şi selectează unul sau mai multe siruri sau poziţii între şiruri din locaţie Argumentele gestionate sunt: numărul instanţelor (positive.”3. name. end) numărul de caractere selectate Exemple: string(3. and Safari. este utilizat pentru a defini un grafic vector-based pentru Web.attribute location term – attr ia nume de atribute ancestor şi întoarce valori ancestor (1. Firefox.” “) poziţia caracterului al 3-lea string(5. căutare.Span(child(1). negative.string location term . Opera. scripting. imagini scalabile. attr(name) .H TM L5 Exemple: child(5) descendant (-1. 1. indexare. #element. Mathematical Markup Language (HML). Fiecare element şi atribute din fişierele SVG pot fi animate. Inglobarea directă a SVG în pagini HTML Example 31 .4. Open Financial Exchange Format (OFX) pentru schimb de date financiare şi instrucţiuni între instituţii financiare. Section) ancestor (1. Open Software Distribution (OSD) pentru componente soft şi versiuni şi relaţii între componente. proprietatea de zoom (fără degradare). tipărire cu rezoluţie de înaltă calitate. Browser ce suportă SVG: Internet Explorer 9. aplicaţii BD) wire format pentru transfer date între obiect şi server persistence format de înmagazinare date pentru document repositiony XML conţine în plus: Chanel Definition Format (CDF) pentru conţinut Wcb.

5.60 160. incluzând obiecte ce n-au fost acoperite de grafic. declaraţii de notificare (notation declarations) . instrucţiuni de procesare. Tabel 1 Comparaţie dintre Canvas SVG Canvas SVG Rezoluţie independentă Rezoluţie dependent Suport la event handlers Fără suport la event handleri Potrivit la aplicaţii cu zone mari de redare Slabe capabilităţi de redare text (Google Maps) Imaginea rezultată se salvează ca .10 40. declaraţie document type . este “uitat” browser.H TM L5 <!DOCTYPE html> <html> <body> <svg xmlns="http://www. SVG este XML based.fill-rule:evenodd. început şi sfârşit element .180 190. odată graficul desenat.8. browserul poate automat redesena forma."> </svg> </body> </html> Diferenţe între SVG şi Canvas SVG este un limbaj de descriere a graficelor 2D în XML iar Canvas desenează grafice 2D “din zbor” folosind JavaScript. Canvas este redată pixel cu pixel. întreagă scena trebuie desenată. SAX este conţinut în org.sax– pachetul care pune la dispoziţie: . atribute pentru fiecare element . fiecare element este disponibil din SVG DOM.180" style="fill:lime.png or . Se pot ataşa event handleri JavaScript la element.interfeţele implementate de interpreter XML (Pauser.org/2000/svg" version="1. In canvas. SAX furnizează evenimente pentru următoarele infomaţii structurale din XML: început şi sfârşit document .1" height="190"> <polygon points="100. AttributeList şi Location) 32 .60 10.stroke:purple.stroke-width:5. In SVG. date caracter . Dacă atributele unui obiect SVG sunt schimbate. declaraţiid e entitãţi neverificate (unparsed entity).jpg Redare lentă la soluţii complexe (DOM este Potrivit la jocuri grafice-intensive încet) Nepotrivit la aplicaţii games 1.xml. Dacă se schimbă poziţia.w3. fiecare formă desenată este memorată ca obiect. DOM şi SAX SAX (simple API for XML) este event based API pentru XML.

Metodele : setDocumentLocator(Locator locator) regăseşte obiectul pentru a localiza originea evenimentului document SAX startDocument() primeşte notificarea de la începutul documentului end Document( ) primeşte notificarea de la sfârşitul documentului startElement (String name. Entity Resolver şi Error Handler) .clase SAX standard: Hand (erParse.) Interfaţa Location – asociază ev. InputSource. AttributeListImplementation şi Location Implementation Interfaţa Parser comunã deoarece toate înterpreterele SAX trebuie să implementeze această interfaţă.xml.DTD Handler.helpers şi sunt ParseFactory.H TM L5 . Metodele : getPublicID( ) întoarce (String) identificator public al evenimentului documentului curent getSystemID() întoarce (String) identificator system al evenimentului documentului curent getLineNumber() întoarce (int) numărul liniei unde se termină evenimentului documentului curent getColumnNumber() întoarce (int) număr de coloane unde se termină evenimentului documentului curent Interfaţa DocumentHandler furnizează metode callback pentru a primi notificările evenimentelor generale ale documentului. AttributeList atts) primeşte notificarea de la începutul elementului endElement (String name) primeşte notificarea de la sfârşitul elementului characters (char[] int start int lenght) primeşte notificarea de la caractere spannableWhiteSpace( ) int start int leeght) primeşte notificarea de la white space 33 .Locale locale) permite aplicaţiei să ceară locale pentru erori şi avertismente parse (InputSource source) interpretează doc. SAXException şi SAXPAUSEException Clasele helper sunt incluse în pachetul org.sax.SAX cu locaţia documentului. Metode: setDocumentHandler(DocumentHandler handler) permite aplicaţiei să înregistreze un manipulator eveniment setDTDHandler (DTDHandler handler) permite aplicaţiei să înregistreze un DTD setEntityResolver (EntityResolver resolver) permite aplicaţiei să înregistreze o entitate resolver Custom setErrorHandler (ErrorHandler handler) permite aplicaţiei să înregistreze un eroare setLocale(java.XML parse (String SystemID) interpretează de la URI SystemID Interfaţa AtributeList conţine specificaţiile atributelor elemente: getLenghth ( ) – număr 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ă poziţie) getType(String name) întoarce (String) de atribut din listă (după nume) getValue(int : ) întoarce (String) valoarea atributului din listă (după poziţie) getValue(String name) întoarce (String) valoarea atributului din listă (după poz.util.interfeţe implementate de interpreter aplicaţie (Document Handler.

pauser” makeParser(String className) crează şi intrarea în (Parser) foloseşte proprietăţile din numele clasei.io.jax.xml.w3.org/html5/spec/ 3.com/html5/ 2. Metode: notationDecl(String name String publicID String SystemID) primeşte notificarea unui evniment declarat unparsedEntityDecl(String name String publicID String SystemID String notationName) primeşte notificarea unei entităţi nedeclarate Interfaţa EntityResolver resolveEntity(String public ID.io. Asupra acestor clase şi metode vom reveni într-o altã abordare. Bibliografie: 1. extinderea lor depãşind obiectul propus în demersul de faţã. www. String System ID) întoarce obiectul InputSource pentru resolve external entity Interfaţa Error Handler error(SAXPauseException exception) fatalError(SAXPauseException exception) warning(SAXPause Exception exception) Clasa HandlerBase are constructor HandleBase() şi implementează interfeţele DocumentHandler.H TM L5 processingInstruction(String Larget. DDTHandler EntityResolver şi ErrorHandler Clasa InputSource permite aplicaţiilor SAX să încapsuleze informaţii despre sursa de intrare într-un singur obiect. dev. [html5demos. Constructori: Input Source( ) InputSource(String system ID) InputSource(java.w3schools.Readle characterStream) Metode: getPublicId() setPublicId( ) getSystemID( ) setSystem Id( ) getByteStream( ) setByteStream( ) getCharacterStream( ) getCharacterStream( ) getEndchoding( ) getEndcoding( ) Clasa ParserFactory clasă ajutătoare ce furnizează metode convenabile pentru încărcarea dinamică a interpretului SAX. String data) int start int leeght) primeşte notificarea de la instrucţiune DDTHandllerInterface furnizează metode callback pentru a primi notificarea evenimentului DDT.InputStream byte Stream) InputSource(java.com/ - 34 . Metode: makeParser() crează şi întoarce (Parser) folosind proprietăţile system “org.

7.com/maps/documentation/javascript/tutorial 35 .H TM L5 4.w3.org/TR/selectors/ https://developers.com/css3/default.com/ www.Adobe The expressive Web Beta www.theexpressiveweb.google.com/ .asp www.css3. 6. 8. 5.w3schools. beta.

Sign up to vote on this title
UsefulNot useful