Documente Academic
Documente Profesional
Documente Cultură
HTML5
Încărcat de
Popovici AdrianDrepturi de autor
Formate disponibile
Partajați acest document
Partajați sau inserați document
Vi se pare util acest document?
Este necorespunzător acest conținut?
Raportați acest documentDrepturi de autor:
Formate disponibile
HTML5
Încărcat de
Popovici AdrianDrepturi de autor:
Formate disponibile
H TM L5
HTML5.............................................................................................................................................3 1.1. Faciliti.................................................................................................................................3 1.2.Faciliti grafice 2D si 3D ......................................................................................................5 1.3. Integrarea fiierelor audio i video........................................................................................6 1.4. Elemente DOM n formulare.................................................................................................8 1.5.Tipuri Input n HTML5 ..........................................................................................................8 1.6. CSS3....................................................................................................................................10 1.7. Rolul scripturilor n aplicaii de Geolocaie ........................................................................15 1.8. Metalimbajele......................................................................................................................23 1.8.1. XML i XSL.....................................................................................................................23 1.8.2. Avantajele documentelor XML........................................................................................27 1.8.3. Particulariti XML .........................................................................................................28 1.8.4. SVG XML ....................................................................................................................31 1.8.5. DOM i SAX................................................................................................................32 Bibliografie: ...............................................................................................................................34
HTML5
1.1. Faciliti
HTML5 a aprut n 2012 din necesitatea de a extinde funcionalitile i dinamismul paginilor Web. HTML5 nu este nc un standard oficial, i doar unele browsere au support HTML5. Toate browserele populare ca Safari, Chrome, Firefox, Opera, Internet Explorer continu s adauge faciliti HTML5 ultimelor versiuni. HTML5 este o cooperare dintre World Wide Web Consortium (W3C) i Web Hypertext Application Technology Working Group (WHATWG). WHATWG a lucrat la formularele web i aplicaii, W3C a lucrat cu XHTML 2.0. In 2006, au decis cooperarea la crearea noii versiuni HTML 5. HTML 5 integreaz noi faciliti dintre care amintim elementele: <canvas> pentru desene 2D <video> i <audio> pentru media playback suport pentru memorare local coninut specific al elementelor: <article>, <footer>, <header>, <nav>, <section> noi controale ale formularului: calendar, date, time, email, url, search noi elemente Semantice/Structurale Avantajele HTML5 pot fi sintetizate prin: Faciliti noi bazate pe HTML, CSS, DOM, i JavaScript Reducerea nevoii de plugins externe (Flash) Manipularea bun a erorilor Marcatori de nlocuire a scripturilor HTML5 va deveni device independent la fel ca i limbajul Java iar procesul de dezvoltare poate fi visibil publicului. Din HTML 4.01 sunt elemente la care s-a renunat n HTML5: <acronym>, <applet>, <basefont> 3
H TM L5
<big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt> In HTML5 apare o singur declaraie <!doctype>, simpl: <!DOCTYPE html> Exemplu: <!DOCTYPE html> <html> <head> <title>Titlul documentului</title> </head> <body> Coninut de document...... </body> </html> HTML5 ofer noi elemente pentru o structurare mai bun a documentelor: <article> Definete un articol <aside> Definete coninut aside fat de coninutul paginii <bdi> Isolaeaz o parte din text ce poate fi formatat n diferite direcii fa de alt text <command> Definete a un buton de comand pe care utilizatorul poate s-l invoce <details> Definete detailii adiionale pe care utilizatorul poate s le vad sau s le ascund <summary> Definete un heading visibil pentru elemental <details> <figure> Specific un coninut specific ca i ilustraii, diagrame, foto, cod, etc. <figcaption> Definete o captur pentru elementul <figure> <footer> Definete un footer pentru document sau section <header> Definete un header for a document or section <hgroup> Groupeaz un set de elemente <h1> la <h6> cnd headingurile au mai multe nivele <mark> Definete text marked/highlighted <meter> Definete msur scalar cu rang determinat <nav> Definete link-uri navigation <progress> Reprezint progresul unui task <ruby> Definete ruby annotation (pentru tipografie East Asian) <rt> Definete explicaii /pronunie a caracterelor (pentru tipografie East Asian) <rp> Definete ce apare n browsers i nu suport ruby annotations <section> Definete o seciune n document <time> Definete data/ora <wbr> Definete o posibil line-break HTML5 ofer noi elemente form, pentru a extinde funcionalitatea: <datalist> Specific o list de opiuni pre-definite pentru controale input <keygen> Definete generator de cmp ca perechi de chei (pentru formulare) <output> Definete rezultatul calculelor Elemente Media <audio> Definete coninut sound 4
H TM L5
<video> <source> <embed> <track>
Definete un video sau film (movie) Definete media resurse multiple pentru <video> i <audio> Definete un container pentru aplicaii externe sau coninut interactive (plug-in) Definete text tracks pentru <video> i <audio>
Exemple: <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> </video> </body> </html>
1.2.Faciliti grafice 2D si 3D
Element <canvas> este o facilitate nou, utilizat la realizarea graficelor sau desenelor via scripting (usual JavaScript) <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> Toate desenele din canvas trebuie realizate n scripturi JavaScript: Exemple 1 : <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> Explicaii: Prima linie de cod caut elementul<canvas>: var c=document.getElementById("myCanvas"); Apoi cheam metoda getContext() cu parametru ir "2d" var ctx=c.getContext("2d"); Obiectul getContext("2d") este construit deja n HTML5, i posed multe proprieti i metode de desenare a diverselor primitive grafice de baz: boxes, circles, text, sau images sau alte elemente.
Exemplele utilizate sunt adaptate dup www.w3cschools.com i pot fi aprofundate i extinse
H TM L5
Proprietatea fillStyle poate fi culoare CSS, gradient, sau textur (pattern), implicit fillStyle este #000000 (black). Metoda fillRect(x,y,width,height) deseneaz un dreptunghi (rectangle) umplut cu fillStyle curent. Canvas este un grid bi-dimensional, ce respecta standardele de coordinate Web sus-stnga cu coordonate (0,0) i dreapta jos de 150x75 pixeli. O alt soluie o constituie cele 2 metode: moveTo(x,y) definete punctul iniial al unei linii lineTo(x,y) definete punctul final al unei line Pentru desenarea efectiv se utilizeaz metoda stroke(). Exemple var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); Pentru a desena cercuri se folosete metoda: arc(x,y,r,start,stop) unde x,y, sunt coordonatele centrului, r raza i metodele "ink": stroke() sau fill(). Exemple var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); Pentru a desena un text n Canvas cele mai importante proprieti i metode sunt: font - definete proprieti font pentru text fillText(text,x,y) deseneaz text umplut ("filled") strokeText(text,x,y) - deseneaz text (no fill) Using fillText(): Exemplu Scriem cu 30px high filled text, folosind font "Arial": var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
1.3. Integrarea fiierelor audio i video
HTML5 AUDIO Diferite browsere pot avea plug-ins diferit pentru redarea fiierelor audio. De accea HTML5 definete un nou element ce specific un mod standard pentru a integra fiiere audio n pagina web prin element-ul <audio>. Browserele care suporta HTML5 sunt: Internet Explorer 9,
H TM L5
Firefox, Opera, Chrome, i Safari . Internet Explorer 8 i versiunile anterioare nu suport element <audio>. Tag-urile audio sunt: <audio> <source> <audio> Definete coninut sound Definete resurse media multiple pentru elemente media, ca i <video> i
Exemplu: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Pentru browsere ce nu suporta audio </audio> Atributele de control adaug controale audio: play, pause, i volume. Se poate aduga text ntre tag-urile <audio> i </audio> tags pentru browsere ce nu suporta audio. Elementul <audio> permite multiple elemente <source>.Elementele <source> se pot lega cu diferite fiiere audio iar browserul utilizeaz primul format recunoscut. Browserele care suport formate de fiier pentru element <audio>: MP3 (audio/mpeg), Wav (audio/wav), and Ogg (audio/ogg): Browser MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES YES NO Opera 10+ NO YES YES HTML5 Video Diferite browsere pot avea plug-ins diferit pentru redarea fiierelor video/movie. De accea HTML5 definete un nou element ce specific un mod standard pentru a integra fiiere video/movie n pagina web prin element-ul <video>. Browserele care suporta HTML5 sunt: Internet Explorer 9, Firefox, Opera, Chrome, i Safari . Exemplu <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Pentru browsere ce nu suporta video tag. </video> Atributele de control adaug controale audio: play, pause, i volume. Se poate aduga text ntre tag-urile <audio> i </audio> tags pentru browsere ce nu suporta audio.Dac sunt setate 7
H TM L5
atributele height i width, spaiul solicitat pentru video este rezervat la ncrcarea paginii, altfel nu se cunoate dimensiunea exact i pagina se va schimba n timpul ncrcrii Elementul <audio> permite multiple elemente <source>.Elementele <source> se pot lega cu diferite fiiere audio iar browserul utilizeaz primul format recunoscut. Browserele care suport formate de fiier pentru element <video>: MP3 (video/mp4), WebM (video/webm), i Ogg (video/ogg): Browser MP4 WebM Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES NO NO Opera 10.6+ NO YES YES MP4 = fiiere MPEG 4 cu H264 video codec i AAC audio codec WebM = fiiere WebM cu VP8 video codec i Vorbis audio codec Ogg = fiiere Ogg cu Theora video codec i Vorbis audio codec HTML5 posed metode DOM, proprieti, i evenimente pentru elemente <video>i <audio>, ce permit manipularea acestora pentru JavaScript.Astfel apar metode pentru: play, pause, loading, sau cele de redare (duration i volume). Evenimentele DOM notific: play, pause, end, etc.
1.4. Elemente DOM n formulare
HTML5 poseda urmtoarele elemente form: <datalist> <keygen> <output> Element <datalist> Elementul <datalist> specific o list de opiuni pre-definite pentru element <input>. Este utilizat pentru a furniza faciliti de "autocomplete" n <input>. Utilizatorul vede lista drop-down cu opiuni pre-defined ca i datele de intrare. Un element <input> leag lista de atribute din <datalist>. Exemple <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> 8
H TM L5
Elementul <keygen> Scopul elementului <keygen> este de a furnmiza securitate la autentificarea user-ilor. Tag-ul <keygen> specific un generator de ci pereche n form.Cnd form este submis, sunt generate 2 chei : una privat i una public. Cheia privat este memorat local, cheia public este trimis la server. Cheia public poate fi utilizat pentru a genera certificatul client pentru autentificarea user-ului pe viitor. Exemple <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form> Elementul <output> Elementul <output> reprezint rezultatul calculelor (ca i cum sunt executate de un script). Exemple <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50">100 + <input type="number" name="b" value="50">= <output name="x" for="a b"></output> </form> Atribute noi pentru <form>: autocomplete novalidate Atribute noi pentru <input>: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step
H TM L5
Atributul Autocomplete din <form> / <input> Atributul Autocomplete specific dac o form sau un camp pot /sau nu s aib autocomplete. Cnd autocomplete este on, browser-ul completeaz automat valori bazat pe valorile anterior introduce de utilizator. Este posibil ca forma s aib autocomplete "on", i "off" pentru un camp specific, sau invers. Atributul autocomplete funcioneaz cu <form> i cu urmtoarele tipuri <input>: text, search, url, tel, email, password, datepickers, range, i color. Exemplu: <form action="demo_form.asp" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> Unele browsere solicit activarea funciei autocomplete. Atributul novalidate <form> Atributul novalidate este Boolean i specific dac forma-datele de intrare validate la submit. Exemplu <form action="demo_form.asp" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> Atributul autofocus <input> Atributul autofocus este Boolean i specific dac elementul <input> va fi focalizat la ncrcarea paginii. Example Cmpul "First name" va fi focalizat la ncrcarea paginii: First name:<input type="text" name="fname" autofocus> Atributul form <input> Atributul form specific dac mai multe formulare au n comun elemental <input>. Pentru a referi mai multe formulare, se utilizeaz spaii ce-separ lista de id a formularelor. Exemplu <form action="demo_form.asp" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> Cmpul lname aparine formularului form1. (input) trebuie
H TM L5
Atributul formaction <input> Atributul formaction specific URL-ul unui fiier ce va procesa controlul intrrilor cnd formularul este submis. Acesta suprascrie aciunea atributului din elementul <form>. Atributul formaction este utilizat cu type="submit" i type="image". Exemplu An HTML form with two submit buttons, with different actions: <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form> Atributul formenctype <input> Atributul formenctype specific modul n care datele din form for fi codificate la trimiterea pe server (doar n formulare cu method="post"). Acesta suprascrie aciunea atributului din elementul <form>. Atributul formenctype este utilizat cu type="submit" i type="image". Exemplu Se trimit date din form codificate implicit (primul submit button), i apoi codificate ca "multipart/form-data" (al doilea submit button): <form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> Atributul formmethod <input> Atributul formmethod definete metoda HTTP de trimitere a datelor din form action la URL. Acesta suprascrie aciunea atributului din elementul <form>. Atributul formmethod este utilizat cu type="submit" i type="image". Example Buttonul al doilea submit suprascrie (post ) metoda HTTP din form (get) : <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"> </form> Atributul formnovalidate <input> Cu valori Boolean, atributul novalidate specific dac elementul <input> trebuie validat cnd este submis. Acesta suprascrie aciunea atributului din elementul <form>. Atributul formnovalidate este utilizat cu type="submit".
H TM L5
Example Apar 2 butoane submit (cu i fr validare): <form action="demo_form.asp"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form> Atributul formtarget <input> Atributul formtarget specific un nume sau cuvnt cheie (keyword) ce indic unde va fi afiat rspunsul primit dup trimiterea formularului. Acesta suprascrie aciunea atributului din elementul <form>. Atributul formmethod este utilizat cu type="submit" i type="image". Exemplu Un formular cu 2 submit buttons, cu diferite fereste int: <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form> Atributele height and width <input> Acestea specific dimensiunile elementului <input> i sunt utilizate numai cu <input type="image">. Atributele sunt prezente (amandoua) ca s specifice spaiul rezervat imaginii la ncrcare. In lipsa lor browserul nu cunoate dimensiune aimaginii i forma paginii se schimbn timpul ncrcrii. Exemplu <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> Attributul list <input> Atributul list se refer la elementul <datalist> ce conine opiuni pre-definite pentru un element <input>. Exemplu Un element <input> cu valori pre-definite n <datalist>: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> Atributele min and max <input> specific valori minimum i maximum pentru un element <input>. Acestea sunt valabile la urmtoarele tipuri input: number, range, date, datetime, datetime-local, month, time and week. 6
H TM L5
Exemplu <input> elements with min and max values: Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input> multiple Attribute Atributul multiple este boolean i specific dac utilizatorul permite intorducerea valorilor multiple n elementul <input>. Atributul funcioneaz cu tipurile input: email i file. Example A file upload field that accepts multiple values: Select images: <input type="file" name="img" multiple> Atributul pattern <input> specific o expresie regular ca valoare de element <input>0020i se poate folosi cu tipurile input: text, search, url, tel, email, i password. Se recomand utilizarea atributului global title pentru a descrie ablonul ajuttor. Example Un camp cu 3 litere: Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> Atributul placeholder <input> specific o descriere scurt a valorilor ateptate pentru cmpul input.Acesta este afiat n camp cnd este gol, i dispare cnd cmpul este focalizat.Atributul este util la cmpurile input: text, search, url, tel, email, and password. Exemplu <input type="text" name="fname" placeholder="First name"> Atributul required <input> este boolean i specific dac un camp trebuie completat nainte de a trimite formularul. Atributul este util la cmpurile input: text, search, url, tel, email, password, date pickers, number, checkbox, radio, i file. Exemplu Username: <input type="text" name="usrname" required> Atributul step <input> specific un numr interval legal pentru un <input> element. he step Atributul poate fi utilizat mpreun cu max i min pentru a crea rang de valori legale. Atributul este util la cmpurile input: number, range, date, datetime, datetime-local, month, time i week. Exemplu: dac step="3", numerele legale sunt -3, 0, 3, 6, etc. An input field with a specified legal number intervals: <input type="number" name="points" step="3">
H TM L5
1.5.Tipuri Input n HTML5
HTML5 are noi tipuri input pentru formulare. Acestea permit un control i o validare mai bun a introducerii datelor i sunt:
color date datetime datetime-local email month number range search tel time url week Dac browsere nu le suport cmpurile vor apare ca i obinuite. Input Type: color este utilizat pentru intoducerea cmpului ce conine culoare. Exemplu Select your favorite color: <input type="color" name="favcolor"> Input Type: date permite selectarea datei. Exemplu Birthday: <input type="date" name="bday"> Input Type: datetime permite selectarea datei i a orei (cu time zone). Exemplu Birthday (date and time): <input type="datetime" name="bdaytime"> Input Type: datetime-local permite selectarea datei i a orei (fr time zone) The datetime-local type allows the user to select a date and time (no time zone). Exemplu Birthday (date and time): <input type="datetime-local" name="bdaytime"> Input Type: month permite selectarea lunii a anului Input type week permite selectarea sptmnii i anului. Exemplu Select a week: <input type="week" name="week_year"> Input Type: time permite selectarea timpului (no time zone). Exemple 8
H TM L5
Select a time: <input type="time" name="usr_time"> Input Type: email permite introducerea cmpuriloe de email, validate cnd sunt submise Exemplu E-mail: <input type="email" name="usremail"> Safari sau iPhone recunosc tipul email, i schimb ecranul pe structura (adds @ and .com). Input Type: number este utilizat la introducerea cmpurilor numerice, care pot avea i set de restricii: Exemplu Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> Restriciile pot fi specificate cu atributele: max , min , step , value valoare implicit Input Type: range este utilizat la introducerea cmpurilor numerice, care pot avea valori ntr-un rang de numere. Se pot seta restricii. Exemplu <input type="range" name="points" min="1" max="10"> Input Type: search permite cutri n cpuri. Exemplu Search Google: <input type="search" name="googlesearch"> Input Type: tel definete camp numr de telefon Example Telephone: <input type="tel" name="usrtel"> Input Type: url folosit pentru a introduce adrese URL.Valoarea cmpului url este automat validat cnd forma este submis. Exemplu Add your homepage: <input type="url" name="homepage"> Safari sau iPhone recunosc tipul url, i schimb ecranul pe structura (adds.com). HTML5 Drag and Drop Drag and drop este parte a standardului HTML5, orice element poate fi draggable. Example <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); 9
H TM L5
} function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> <script>
1.6. CSS3
Specificaiile CSS3 sunt dezvoltate de W3C, multe proprieti CSS3 au fost implementate n browsere moderne. CSS3 este perfect compatibil cu versiuni anterioare, suport CSS2. CSS3 este divizat n "module". Cele mai importante module CSS3 sunt: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface CSS3 Borders Folosind CSS3 se pot crea bordure rotunjite, aduga umbre, se pot folosi imagini ca bordure, fr a utiliza programe de design, ca i Photoshop. Proprieti border: border-radius box-shadow border-image Browser Support Internet Explorer 9 suport border-radius and box-shadow, Firefox suport toate proprietile border, Chrome i Safari suport border-radius i box-shadow, dar solicit prefix -webkit- pentru border-image iar Opera suport border-radius i box-shadow, dar solicit prefix o pentru-borderimage. CSS3 Rounded Corners 10
H TM L5
Adaug coluri rotunjite fa de CSS2 i se pot utiliza diferite imagini pentru fiecare col.In CSS3, proprietatea border-radius este utilizat la crearea colurilor rotunjite: Exemplu div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } CSS3 Backgrounds CSS3 conine noi proprieti background, ce permit control sporit asupra elementului background. Proprieti background: background-size -dimensiunea background-origin -originea Firefox 3.6 nu suport background-origin, i solicit prefix -moz- pentru proprietatea background-size, Safari 4 solicit prefix -webkit- pentru proprietatea background, Internet Explorer 9, Firefox 4, Chrome, Safari 5 i Opera suport background. Proprietatea background-size specific dimeniunea imaginii fundal. In CSS3 este posibil specificarea size pentru imaginea background, ceea ce permite re-utilizarea ei n diferite contexte. Dimeniunea se specific n pixeli sau %. Dac se specific size ca %, size este relativ la width i height n elemental printe. Exemplu 1 Redimensionare imaginii background: div { background:url(img_flwr.gif); moz-background-size:80px 60px; /* Old Firefox */ background-size:80px 60px; background-repeat:no-repeat; } Exemplu 2 div { background:url(img_flwr.gif); -moz-background-size:100% 100%; /* Old Firefox */ background-size:100% 100%; background-repeat:no-repeat; } Proprietatea background-origin specific aria de posiionare a imaginii fundal.Ea poate fi plasat n content-box, padding-box, sau border-box .
11
H TM L5
Exemplu Pozitionarea imaginii fundal n content-box: div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; } Example Setarea a 2 imagini n body element: body { background-image:url(img_flwr.gif),url(img_tree.gif); } Proprieti Background background-clip Specific zona de desenare a imaginii fundal background-origin Specific zona de poziionare a imaginii fundal background-size Specific dimeniunea imaginii fundal Efecte Text CSS3 conine cteva caracteristici noi. Proprieti text-shadow word-wrap Internet Explorer nu suport text-shadow,Firefox, Chrome, Safari, and Opera suport textshadow i majoritatea browserelor suport word-wrap. In Text Shadow se specific: horizontal, vertical, distan blur, i culoare: Exemplu h1 { text-shadow: 5px 5px 5px #FF0000; } Word Wrapping permite desprirea cuvntului pe mai multe linii, chiar dac se realizeaz pe mai multe rnduri 12
H TM L5
Exemplu p {word-wrap:break-word;} Properieti Text hanging-punctuation punctuation-trim text-justify text-outline text-overflow text-shadow text-wrap word-break word-wrap CSS3 @font-face Rule Inainte de CSS3, web designerii foloseau fontile deja instalate pe computer.In CSS3, web designeri pot utilize orice font i fonturile proprii sunt definite n CSS3 @font-face rule. @font-face Firefox, Chrome, Safari, and Opera suport fonturi.ttf (True Type Fonts) i .otf (OpenType Fonts),Internet Explorer 9+ suport @font-face rule, dat numai de tip.eot (Embedded OpenType). Example <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style> Using Bold Text You must add another @font-face rule containing descriptors for bold text: Example @font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
13
H TM L5
Fiierul "Sansation_Bold.ttf" este un alt fiier ce conine caractere bold din Sansation. Browserele vor utilize acesta cand apare un font-family "myFirstFont" ce trebuie redat bold. Pot fi create mai multe @font-face rules pentru acelai font. CSS3 Font Descriptors font-family Name Required. Definete numele fontului src URL Definete URL pentru font file font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded font-style normal italic oblique font-weight normal bold 100 200 300 400 500 600 700 800 900 unicode-range unicode-range Optional. Definete rang caractere UNICODE pentru font. Implicit "U+0-10FFFF" CSS3 User Interface In CSS3, apar faciliti noi de interfa user: redimensionarea elementelor, a chenarelor,etc. Proprieti resize box-sizing outline-offset Resize este suportat de Firefox 4+, Chrome, i Safari, box-sizing este suportat n Internet Explorer, Chrome, i Opera. Firefox solicit prefix -moz-. Safari solict prefix -webkit-. Outline este suportat de majoritatea browserelor, exceptnd Internet Explorer. CSS3 Resizing Elementul div este redimensionabil de utilizator (n Firefox 4+, Chrome, i Safari). Example div { 14
H TM L5
resize:both; overflow:auto; } CSS3 Box Sizing permite definirea elementelor certe pentru a fixa zona. Exemple div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; } CSS3 Outline Offset deseneaz n spatele marginii border i difer de border: Outlines nu ia din spaiu Outlines poate fi non-rectangular Exemple div { border:2px solid black; outline:2px solid red; outline-offset:15px; } Proprieti appearance box-sizing icon nav-down nav-index nav-left nav-right nav-up outline-offset resize
1.7. Rolul scripturilor n aplicaii de Geolocaie
HTML5 Geolocation HTML5 Geolocation este utilizat pentru a localiza pozitia utilizatorului. The HTML5 Geolocation API este utilizat pentru a obine pozitia geografic a utilizatorului. Aceasta nu este disponibil dac utilizatorul nu accept.Browsere ce suport Geolocalizarea: Internet Explorer 9, Firefox, Chrome, Safari and Opera.Geolocalizarea are acuratee mai mare pentru dispozitive cu GPS, ca i iPhone.
15
H TM L5
Geocoding i Reverse Geocoding Geocoding-ul reprezint conversia unei adrese sau cod potal n coordonate geografice. Prin geocoding, codul potal din UK - EC1N 2NS returneaz coordonatele zecimale : Latitudine = 51.5184 ; Longitudine = -0.111. Procesul de reverse geocoding funcioneaz n sens invers celui de geocoding prin convertirea coordonatelor geografice ale unei locaii ntr-un set de caracteristici locale. Reverse geocoding a coordonatelor -23.70090 latitudine i 133.87690 longitudinde returneaz o adres pe Stott Street, Alice Springs, Northern Territory, Australia. HTML5 - Using Geolocation Metoda getCurrentPosition() furnizeaz pozitia utilizatorului (longitudine, latitudine). Exemplu <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> Explicaii: Dac este suportat Geolocation, metod getCurrentPosition()returneaz coordonatele obiectului ca parametru ( showPosition ). Funcia showPosition() afieaz Latitudinea i Longitudinea. Manipularea erorilor The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location: Exemplu function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation."
16
H TM L5
break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } Coduri de eroare: Permission denied Utilizatorul nu are acces la Geolocation Position unavailable Nu este disponibil locaia curent Timeout Operaia a expirat (timed out) Afiarea rezultatelor n hart (Reverse Geolocation) Parametri necesari: latitude and longitude, Google Maps: Example function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url=http://maps.googleapis.com/maps/api/staticmap?center= +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; } Utiliznd o imagine static Google map latitudinea i longitudinea permit localizarea pe hart. Google Map Script Scriptul permite hri interactive cu opiuni de marker, zoom i drag. Metoda getCurrentPosition() ntoarce un obiect Geolocation object (dac este executat cu success).. Proprieti Descriere Cords.latitude Latitudinea (numr zecimal) Cords.longitude Longitudinea (numr zecimal) Cords.accuracy Acurateea poziiei Cords.altitude Altitudinea (metri deasupra nivelului mrii) Cords.altitudeAccuracy Acurateea altitudinii Cords.heading Heading ca grade de la Nord Cords.speed Viteza (m/s) Timestamp Data/timpul de rspuns 17
H TM L5
Alte metode ale Geolocation watchPosition() Intoarce poziia curent a utilizatorului i continu s o actualizeze (ca un GPS n main). clearWatch() Oprete watchPosition(). Metoda watchPosition() solicit dispozitiv GPS (iPhone): Exemplu <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> Google Maps JavaScript API v3 Toate aplicaiile Maps API 2 * solicit API key, care . permite monitorizarea aplicaiilor Maps API, i permite Google s ia despre aplicaia dezvoltat. Dac utilizarea aplicaiei Maps API exceede Usage Limits, se poate cumpra cot suplimentar. * Google Maps API for Business developers nu include o cheie la solicitare. Crearea unei API key: 1. 2. 3. 4. La https://code.google.com/apis/console se logheaz cu Google Account. Se acceseaz Services. Se activeaz serviciul Google Maps API v3. Click pe API Access. API key este disponibil din pagina API Access, n seciunea Simple API Access. Se mapeaz API cu Key for browser apps.
https://developers.google.com/maps/documentation/javascript/tutorial
18
H TM L5
Figura 1 Google Apis Se poate specific ace domeniu este permis pentru API key prin : Edit allowed referrers... cu link la cheia proprie. Exemplu: Pagina web afieaz o hart folosind CSS <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript"> src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_ OR_FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP 19
H TM L5
}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> Explicaii Am creat aplicaia ca HTML5 cu declaraia <!DOCTYPE html>. Am inclus Maps API JavaScript cu tag script. Am creat un element div numit "map_canvas" pentru a reine Map. Am creat un obiect JavaScript literal pentru a numra proprietile map. Funcia JavaScript creaz un obiect "map". Se initializeaz map object din tagul body la eveniment onload. Se recomand declararea DOCTYPE n aplicaia web. <!DOCTYPE html> Pentru o funcionare optim a stilurilor CSS se recomand includerea declaraiei <style> : <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> In declaraia CSS se indic un container map <div> (named map_canvas) ce va lua 100% din nlimea body HTML. Trebuie specificat declaraia procentelor pentru <body> i <html>. Incrcarea Google Maps API <html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_ OR_FALSE"> </script> URL coninut n tag-ul script este locaia unui fiier JavaScript ce ncarc toate simbolurile i definiile necesare pentru Google Maps API. Tag-ul script este obligatoriu. Parametrul key conine cheia aplicaiei API.Aceaste nu este identic cu cheia utilizat de v2 API, i trebuie generat de la consol. Parametrul sensor al URL trebuie inclus, indicnd dac aplicaia utilizeaz senzor (GPS locator) pentru a determina locaia utilizatorului. Valoarea variabilei set_to_true_or_false subliniaz setarea explicit. Google Maps API for Business se refer la ncrcarea Google Maps API n documentaia Business. HTTPS Dac aplicaia este HTTPS, se ncarc Google Maps JavaScript API peste HTTPS: <script 20
H TM L5
type="text/javascript"></script> src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRU
E_OR_FALSE
Acest lucru este necesar n aplicaii SSL pentru a evita erori de securitate n majoritatea browsers, i este recomandat pentru aplicaii ce includ n cerere date sensitive, ca i locaia utilizatorului. Libraries La ncrcarea JavaScript Maps API via http://maps.googleapis.com/maps/api/js URL, se poate ncrca n plus libraries folosind parametrul libraries. Libraries sunt module de cod ce dau funcionalitate adiional JavaScript API. Incrcarea asincron API Se paote ncrca Maps API JavaScript dup ce pagina s-a terminat de ncrcat sau la cerere. In tag-ul <script> se precizeaz ca rspuns la evenimentul window.onload sau prin apel de funcie, caz n care de ofer instruciuni ctre Maps JavaScript API despre ntrzierea execuieipn la terminarea ncrcrii codului Maps JavaScript API. Exemplu: function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& sensor=TRUE_OR_FALSE&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; Instruciunile aplicaiei ncarc Maps API dup ce pagina a fost complet ncrcat (window.onload) i scrie Maps JavaScript API ntr-un tag <script> n pagin. In plus cerem API doar s execute funcia initialize() dup ce API este complet ncrcat transmitnd callback=initialize to the Maps API bootstrap: Map DOM Elements Harta are un spaiu rezervat pentru afiare, creat i denumit n elemental div i obinut ca referin n browser ca document object model (DOM). <div id="map_canvas" style="width: 100%; height: 100%"></div>
21
H TM L5
In exemplu, s-a definit <div> numit "map_canvas" i s-a setat dimensiunea cu atribute style. Dimensiunea setat la "100%" va expanda la valori potrivite pe dispozitive mobile. Harta va lua dimensiunea din conteiner i size este precizat explicit n <div>. Map Options var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; Pentru a initializa Map, se creaz nti Map options, un obiect ce conine iniializarea variabilelor map, creat ca obiect literal. var mapOptions = {}; Latitudes and Longitudes Dac se dorete centrarea pe un anume punct, se creaz obiectul LatLng ce reine locaiaprin coordonate { latitude, longitude }: center = new google.maps.LatLng(-34.397, 150.644) Zoom Levels Permite setarea la rezoluii mai bune sau mai slabe iar Google Maps i Maps API sunt divizate n hri "tiles"i "zoom levels." zoom: 8 Map Types Se specific tipul hrii mapTypeId: google.maps.MapTypeId.ROADMAP Sunt disponibile urmtoarele tipuri: ROADMAP afiat normal, 2D din Google Maps. SATELLITE afiat fotografic. HYBRID afiat ca mix de secvene fotografice i layere pentru caracteristici proeminente (strzi, nume de orae). TERRAIN afiat ca relief fizic ce ofer elevaia formelor de relief (muni, ruri, etc.). Map Object var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); In JavaScript hrile sunt reprezentate prin clasa Map. Obiectele din clas definesc o singur hart pe o pagin. Instanele se creaz cu operatorul new i se specific <div> ca i container pentru map. Nodurile HTML sunt fii ai obiectului JavaScript document, i se obine referin la aceste elemente via metoda document.getElementById(). Funcia Map() este constructor i are definiia: Map(mapDiv:Node, opts?:MapOptions) Creaz o nou hart (map) in interiorul containerului HTML (tipic elemental DIV) folosind (oponal) parametrii transmii. Incrcarea hrii <body onload="initialize()">
22
H TM L5
La ncrcarea paginii HTML, document object model (DOM) este construit, i orice imagini externe i scripturi sunt primate i incorporate n obiectul document. Pentru a ne asigura c harta este plasat dup ce pagina s-a ncrcat complet, se execut funcia ce construiete obiectul Map n elementul <body> din HTML, la eveniment onload.
1.8. METALIMBAJELE 1.8.1. XML I XSL
XML (Extensible Markup Language) este un metalimbaj de marcare ce permite structurarea informaiei din cadrul unei pagini Web. XML a fost creat de Consoriul Web (www.w3.org) i provine din metalimbajul SGML. XML permite separarea informaiei de prezentarea ei, ajungnud-se la crearea unui document autodescriptiv i permite transferul de date ntre aplicaii. Avantajul acestei separri este posibilitatea utilizrii i n cadrul altor dispozitive care pot avea conexiune la Internet. XML este independent de platform, extensibil i compatibil Unicode. Sistemele bazate pe servicii Web implic studiul limbajului XML i al tehnologiilor bazate pe acest standard de descriere a datelor. Arhitecturile bazate pe XML implica utilizarea unei varieti mari de tehnologii bazate pe XML i specializate n realizarea unor servicii. O incursiune n istoria acestui limbaj ne conduce la mijlocul anilor 70, atunci cnd Charles F. Goldfarb a dezvoltat i introdus metalimbajul SGML (Standard Generalized Markup Language) care a devenit un limbaj internaional standardizat (1986) de reprezentare i schimb al datelor. XML permite separarea informaiei de prezentarea ei, ajungnduse la crearea unui document autodescriptiv i permite transferul de date ntre aplicaii, la fel HTML. Avantajul acestei separri este posibilitatea utilizrii i n cadrul altor dispozitive care pot avea conexiune la Internet. XML este independent de platform, extensibil i compatibil Unicode. Dac limbajul HTML permite descrierea modului de prezentare a informaiei n cadrul unei pagini Web, XML permite mbogirea coninutului cu metainformaii, etichete autodescriptive care permit etichetarea coninutului unei pagini Web. Documente XML.Unitatea de structur a unui document XML este elementul, care poate fi fiind declarat n DTD sau XML Schema. Structurarea informaiei ntr-un document XML se realizeaz prin marcaje care definesc elementele documentului. Un element este alctuit dintrun marcaj de deschidere, un coninut i un marcaj de nchidere. Atributele furnizeaz informaii suplimentare despre un element, reprezint proprieti ale unui element, definite prin proprieti care vor lua valori. Prima varianta se aplic n general la frunzele arborelui, atunci cnd elementele respective nu mai conin subelemente, ci doar date. Cnd se dorete adncirea arborelui pe mai mult nivele, lizibilitatea poate crete prin transferarea unor date sub form de atribute. Regulile pe care un element trebuie s le respecte sunt : elementele sunt case sensitive; numele nu pot ncepe cu xml sau XML. toi marcatorii sunt simetrici i perfect imbricai (n HTML se accept construcii de genul <b><i>text</b></i>); marcatorii nu pot s conin spaii i trebuie s nceap cu o liter; marcatorii i atributele lor (inclusiv valorile) sunt casesensitive (spre 23
H TM L5
deosebire de HTML); valorile atributelor trebuie incluse n ghilimele sau apostroafe; un element poate s conin un numr de subelemente i coninut de date n acelai timp. Unitatea de structur a unui document XML este elementul, acesta fiind declarat n DTD sau XML Schema. Structurarea informaiei ntr-un document XML se realizeaz prin marcaje care definesc un elementele documentului. Un element este alctuit dintr-un marcaj de deschidere, un coninut i un marcaj de nchidere. Atributul furnizeaz informaii suplimentare despre un element. Regulile pe care un element trebuie s le respecte sunt : elementele sunt case sensitive; numele nu pot ncepe cu xml sau XML. Un document XML are o structur arborescent format din elemente i subelemente. Elementul rdcin conine toate celelalte elemente, iar n documentul XML poate exista un singur element de acest fel. n exemplul de mai jos se poate observa un exemplu care utilizeaz elementul rdcin Client i conine trei elemente: numeprenume, email i parol. Prima linie a documentului se numete declaraie XML
Exemplu: <?xml version="1.0"> <client> <numeprenume>Popescu George</numeprenume> <email>georgep@yahoo.com</email> <parola>george</parola> </client> <client> <numeprenume>Ionescu Dan </numeprenume> <email>ionescu@yahoo.com</email> <parola>informatica</parola> </client>
Se poate observa un exemplu care utilizeaz elementul rdcin Client i conine trei elemente: numeprenume, email i parol. Prima linie a documentului se numete declaraie XML. Elementul rdcin este echivalentul marcatorului HTML din limbajul HTML.Interiorul acestuia va fi populat cu subelement care la rndul lor pot s conin alte elemente, obinnduse astfel un arbore de elemente, cu relaii tat -fiu. Elementele de pe acelai nivel sunt n relaie de tip frate. Relaia de tip arborenscent care se constituie n aceast situaie permite generalizarea relailor pornind de la nivelul rdcinii ctre nivele inferioare cu un grad de particularizare din ce n mai mare [Buchmann06]. Regulile la care trebuie s se supun un document XML: S fie bine formatat (wellformed) s fie compatibil cu standardul XML (documentul trebuie s aib un singur elementrdcin, toate marcajele s fie nchise, elementele s fie imbricate corect i valorile atributelor s fie incluse ntre ghilimele) S fie valid s fie bine formatat i s fie compatibil cu o definiie DTD. Elementele vide sunt elemente ce conin doar marcatori, fr coninut informaional. Elementele XML pot fi grupate i clasificate n vocabulare, adic seturi generalizate de elemente deservind unui anumit scop (Ex. elementele unei facturi). O instan a unui vocabular poart 24
H TM L5
denumirea de document. Utilizarea vocabularelor i documentelor XML permite stabilirea unor seturi standard de vocabulare pentru comunicare i schimb de informaii ntre firme. Vocabularele XML pot fi descrise prin intermediul unor limbaje de definire a unor scheme. Un astfel de limbaj este DTD (Document Type Definitions). Cu ajutorul acestuia se precizeaz: elementele care pot aprea n documentul XML, ordinea i relaiile dintre elemente, atributele unui element i mti de verificare a valorii acestora. Limbajul DTD prezint ns o serie de dezavantaje, dintre care menionm: nu este bazat pe XML i n consecin aplicaiile care proceseaz documentul XML trebuie s cunoasc limbajul DTD, nu pot fi definite dou elemente diferite cu acelai nume, nu poate fi controlat tipul de date utilizate de un element sau de un atribut. Aceste lipsuri au fost nlturate prin utilizarea XML Schema Defnition language (XSD), care este un limbaj bazat pe XML, documentele scrise n acest limbaj fiind procesate n mod similar documentelor XML, asigur suport complet pentru spaiile de nume, permind utilizarea a dou obiecte cu acelai nume n contexte diferite, asigur un set complet de tipuri de date simple i suport pentru definirea tipurilor complexe de date. Un alt avantaj al XSD este posibilitatea definirii de constrngeri suplimentare, prin intermediul crora se pot stabili reguli de validare a informaiei propriuzise, nu doar a structurii de marcatori. Regulile se pot referi la limite de valori, la valori obligatorii, la dependene de valori i inclusiv la tipul valorilor, cu posibilitatea de a defini tipuri personalizate (subtipuri ale celor implicite) [Buchmann07]. Un alt element important n cadrul tehnologiilor XML este interfaa de manipulare a elementelor. Astfel documentele XML pot fi manipulate prin intermediul unei interfee arborescente, bazat pe evenimente sau clase. Consoriul W3C asigur un API standard de manipulare a elementelor prin intermediul DOM (Document Object Model). Cel mai popular API bazat pe evenimente este Simple API for XML (SAX) pentru care majoritatea platformelor de dezvoltare asigur recunoaterea i utilizarea lui. DOM descrie documentele XML prin intermediul unei vederi arborescente, n cadrul creia elementele sunt vzute ca noduri. XSLT (Extensible StyleSheet Language Transformations) este un limbaj care realizeaz transformarea documentelor XML n alte tipuri de documente (ex. XHTML, SVG) sau n documente text. Practic XSLT adaug informaii de stil documentelor surs XML. XSL poate fi utilizat att pe parte de client, ct i pe parte de server, aceasta din urm fiind soluia preferabil. XSLT respect sintaxa XML i nu necesit DTD. XSLT asigur practic dou aspecte extrem de importante: tranformare structural conversia unui document XML n alt document XML transformare estetic conversia documentului XML ntrun format diferit, publicabil, accesibil utilizatorilor (ex. XHTML, PDF, TXT). [Erl04] Limbajul XPath (XML Path) asigur reutilizarea unui set de specificaii XML de ctre alte standarde. Elementele XML sau valri ale astfel de documente pot fi cutate i filtrate utiliznd funcii XPath. Expresiile care identific locaia sunt numte expresii i permit integrarea lor n alte documente XML. Practic XPath adreseaz un document XML n acelai fel n care sunt adresate n mod tradiional cile fiierelor n cadrul unei structuri de directoare.
25
H TM L5
Limbajul XQuery (XML Query) asigur un limbaj de interogare a datelor n cadrul documentelor XML. Odat cu specificaiile XPath 2.0, XQuery utilizeaz limbajul XPath pentru a adresa sursele de date. Expresiile XQuery pot fi incluse n documente XML, grupate n funcii organizate pe module din punct de vedere logic. O caracteristic important este posibilitatea interogrii mai multor documente XML utiliznd o singur interogare. n funcie de natura datelor cutate i de tipul expresiei care urmeaz a fi construit, pot fi determinate mai multe formate ale expresiilor XQuery: FLWR asigur o serie de cuvinte cheie; Expresii de localizare permit accesul la elemente i atribute ale unui document de intrare; Constructori ai elementelor permit creare dinamic de noi elemente i valori XML ; Expresii condiionale permit utilizarea expresiilor complexe utiliznd construcii de tip if else; Expresii cuatificate includ logica cuantificrii, utiliznd cuvinte cheie precum some sau every. O scurt prezentare a principalelor limbaje i specificaii utilizate n cazul tehnologiilor XML, ofer o privire de ansamblu asupra complexitii acestora. Relaiile dintre documentele XMl i specificaiile prezentate anterior sunt sintetizate de Th. Erl n lucrarea Service Oriented Architecture, A Field to Integrating XML and Web Services i prezentate n figura 2.1.
Figura 2. Relaii ntre specificaiile XML 3
(Erl Th., ServiceOriented Architecture A Field to Integrating XML and Web
Services, Prentice Hall, 2004, p. 19)
26
H TM L5
1.8.2. Avantajele documentelor XML
Separarea coninutului de prezentare. Premisa esenial a Internetului este distribuia de coninut informaional. Tehnologiile de transfer i conversie de coninut au fost o preocupare intens la nceputurile Webului i hipertextului. Un document XML poate fi prezentat n moduri diferite fr a i se afecta semantica i structura. O aceeai prezentare poate afia date preluate din diferii arbori XML de structur similar sau apropiat. ntreinerea unui site cu o rat nalt de mprosptare a coninutului (aa cum ar trebui s fie orice site) depinde n mod vital de aceast modularizare. Standardizarea. n ciuda concurenei acerbe pe piaa tehnologiilor Web, XML, mai mult dect HTML (datorit concurenei browserelor), a fost una din puinele idei care a adus la aceeai mas i a aliniat la aceleai scopuri companii ca IBM, Sun, Oracle i Microsoft, sub moderarea Consoriului W3. Am mai amintit c validarea spaiului economic virtual este direct dependent de robusteea unei fundaii tehnologice omogene. XML este, poate, cel mai important pas fcut pn acum n acest sens. Dinamica. Paginile Web dinamice au lansat o nou etap n istoria Webului, etapa dialogului, a comunicrii bilaterale, i au garantat micorarea timpilor de reacie n accesarea informaiei, obinnduse astfel o mai bun oportunitate a informaiei. XML ofer potenial pentru generarea i modificarea dinamic a coninutului documentelor XML. Lizibilitatea informaiei. Regulile de formare a arborilor XML nu accept abateri de la imbricare i de la modul de construcie a marcatorilor. Astfel, se pot scrie diverse programe care s trateze marcatorii XML folosii ntr-o clas de documente, n diferite scopuri, inclusiv pentru conversii n alte formate de fiiere. Programele de conversie XML sunt eseniale n comunicare B2B n special i n spaiul economic virtual n general[BuCHMANN_08] Regulile la care trebuie s se supun un document XML: S fie bine formatat (well-formed) s fie compatibil cu standardul XML (documentul trebuie s aib un singur element-rdcin, toate marcajele s fie nchise, elementele s fie imbricate corect i valorile atributelor s fie incluse ntre ghilimele) S fie valid s fie bine formatats i fie compatibil cu o definiie DTD. Documentele XML pot fi descrise prin intermediul unui DTD. Cu ajutorul acestuia se precizeaz: elementele care pot aprea n documentul XML, ordinea i relaiile dintre elemente, atributele unui element i mti de verificare a valorii acestora. Limbajul DTD prezint ns o serie de dezavantaje, dintre care menionm: nu este bazat pe XML i n consecin aplicaiile care proceseaz documentul XML trebuie s cunoasc limbajul DTD, nu pot fi definite dou elemente diferite cu acelai nume, nu poate fi controlat tipul de date utilizate de un element sau de un atribut. Aceste neajunsuri au fost nlturate prin utilizarea XML Schema, care este un limbaj bazat pe XML, documentele scrise n acest limbaj fiind procesate n mod similar documentelor XML, asigur suport complet pentru spaiile de nume, permind utilizarea a dou obiecte cu acelai nume n contexte diferite, asigur un set complet de tipuri de date simple i suport pentru definirea tipurilor complexe de date.
27
H TM L5
XSL (Extensible StyleSheet Language) este un limbaj care realizeaz transformarea documentelor XML n alte tipuri de documente (ex. XHTML, SVG) sau n documente text. Practic XSL adaug informaii de stil documentelor-surs XML. XSL poate fi utilizat att pe parte de clinet, ct i pe parte de server, aceasta din urm fiin soluia preferabil. Limbajul XSL respect sintaxa XML i nu necesit DTD. XML, SGML. De asemenea XML permite nlocuirea i extinderea marcatorilor limbajelor brevetate (HTML, ColdFusion, ASP), asigurnd caracter multiplatform site-urilor concepute n cele mai variate tehnologii. Spre exemplu, codul HTML: Astfel, devine foarte strns legtura sintax-semantic, codul capt claritate i motoarele de cutare pot realiza cutri mai exacte. Standardele legate de XML care realizeaz aceste transformri sunt CSS (stilurile n cascad) i XSL (limbajul de extindere a stilurilor). n plus, XML permite ca marcatorii s precizeze tipul informaiei marcate, ceea ce n HTML era posibil doar pentru adrese, abrevieri, acronime, citate, enumerri i variabile i chiar acolo sunt folosite nu pentru caracterizarea datelor, ci pentru formatare. [PHILIPS]
1.8.3. Particulariti XML
Orice document XML respect gramatica din Document Type Definition (DTD) fie n internal subset fie n external subset. Exemplu : Internal external < ? xml version = " 1.0" ?> < ?xml version= " 1.0 " > <!DOCTYPE anunt [ <!DOCTYPE anunt ] </ELEMENT greeting (#PC DATA)> SYSTEM hello.dtd> <anunt> Intalnirea se anuleaza < anunt >Intalnirea se anuleaza!</ anunt > </ anunt > Atributele type sunt de 3 feluri: String - CDATA tokenized - ID, IDREF, IDREFS. ENTITY, ENTITIES, NMTOKEN i NMTOKENS enumerare Fiecare declaraie d informaii spre procesorul XML prin # REQUIRED atribut ce trebuie furnizat sau # IMPLIED nu ne furnizeaz valoarea implicit. Default value este folosirea valorii implicit dac atributul nu este furnizat iar # FIXED default value atributul trebuie s aib valoare implicit Exemplu: <!ELEMENT Zona EMPTY> <!ATTLIST Zona nume CDATA # REQUIRED tara CDATA # IMPLIED > Structura fizic Fiecare document XML are o entitate document entity ce servete la poarta de intrare al procesorului XML. Entitile pot fi parsed (Coninutul se refer la text ntocmit, considerat parte integrant a documentului) sau unparsed, asociate cu notation identificator prin nume. Sunt 2
28
H TM L5
tipuri de parsed entities: general entities- folosit n coninutul documentului i parameter entities folosit n interiorul DTD. Exemplu: referine externe general-entity: <! DOCTYPE book SYSTEM book.dtd[ <! ENTITY toc SYSTEM toc.xml> ]> <book> <head> &toc; </head> </book> referine parameter entry: <: ENTITY %pattern CDATA> <!ENTITY % actions #PC DATA> <! ELEMENT rule % actions;> <! ATTLIST rule pattern % pattern; #REQUIRED> XML Namespaces se bazeaz pe nume codificate formate din prefix namespaces i local name i se declar cu: <?xml:namespace ns=urn:urid:C4ED1820-6207-11d1 src = http://www.w3.org prefix=W3C ?> unde: ns conine URI src adrese opionale URI pentru a reprezenta i schema prefix attribute ce o asociaz numele n doc XML Odat declarat cu nume prefix poate fi folosit pentru a califica nume ca i: tip element, nume atribut, inta instruciunii procesate. Exemplu: pentru a specifica tip de dat <?xml:namespace ns=urn:urid:C2F4../ prefix=dt?> <Date dt:Case Type =date.iso8601> 1997-03-17 </Date> XML linking language (Xlink) XLink descrie legturi ntre obiecte date i au atribut Xml:link cu valori posibile simple sau extended (locator grup sau document ce identific legturi relative cu tipuri de elemente). Exemplu: <A xml:link=simple href=http://www.w3.org>The w3c </A> XLink definete elmente de legtur: simple link (online i totdeauna unidirecionale) respectiv extended link ce poate fi inline, out-of-line i trebuie folosite pentru legturi multidirecionale, legturi originale spre resurse read-only, etc. Ambele legturi au implementat funcii associate ca i: unul sau mai muli locatori ce identific resurse remote (una pentru fiecare resurs remote) semantica legturii semantica resursei remote semantica resursei locate, pentru legturi online (leag resurse ce nu pointeaz la locatori) 29
H TM L5
Simple link: <Citation xml:link=simple href=http://www.xyz.com/xml/Popescu.xml title=Popescu show=new content-role =Reference> tratat de Popescu (1998) </Citation> Extended link: xml: link are valoarea atributelor pentru locator i este extended <Commentary xml:link=extended inline=false> <locator href=Oprea 2.1 role=Carte/> <locator href=Lemay1.4 role=Articol/> <locator href=Arba4.2 role=Referat/> </Commentary> Comportamentul link Xlink furnizeaz politici comportamentale ce permit: Show expliciteaz politica n contextul n care resursa este afiat sau procesat. Are valori: embed n timp ce se traverseaz legtura, remise este embeded pentru afiare sau procesare, n corpul resursei i localizeaz unde ncepe tranzacionarea; replace nlocuiete n timp ce se traverseaz legtura, remise este embedded pentru afiare sau procesare, n corpul resursei este nlocuit unde ncepe tranversarea; new n timp ce se traverseaz legtura, resursa este embeded pentru afiare sau procesare, n corpul resursei i se afieaz sau proceseaz n context nou ; - Actuate apare cnd : - auto indic resursa ce poate fi gsit cnd se ntlnesc aceleai legturi ; - user resursa nu este prezent pn cnd nu se face o cerere explicit extern ; - Behaviors comportamentul (instruciuni implementate) XML Printer Language XPrinter este o serie de location terms, fiecare specific locaia, de obicei relativ i are keyword ca i id sau child i argumente (m.instanei, top element attribute). Absolute Location Terms pot fi utilizai la localizarea resurselor ca self contained XPrinter. Include: root() sursa locaiei este elementul root; origin() pentru o subresurs (ca i Xlink); id(name) sursa locaiei este un element ID Relative Location Terms conine: child noduri directe child pentru sursa locaiei descendant - nodul apare oricnd n context ancestor - identific noduri element coninute n cadru following - noduri ce apar dup location source psibling - noduri cu acelai printe ce apar naintea location source fsibling - noduri cu acelai printe ce apar dup alocaiei source Argumente poteniale: selecia numrului de apariii (pozitive, negative, all) selecia tipului de nod: element implicit, pi (process, instructiune), comment, text (n elemente CDATA), cdata, all. nume de attribute i valori 30
H TM L5
Exemple: child(5) descendant (-1, Section) ancestor (1, #element, name,3.2) Ali termeni Location - spanning location term identificat cu span localizeaz subresurse id(11).Span(child(1), child(3)) - attribute location term attr ia nume de atribute ancestor i ntoarce valori ancestor (1,#element), attr(name) - string location term - string identific i selecteaz unul sau mai multe siruri sau poziii ntre iruri din locaie Argumentele gestionate sunt: numrul instanelor (positive, negative, all) string candidate - gsit n sursa locaiei position /character offset a nceputului pentru iruri candidate (positive, negative, end) numrul de caractere selectate Exemple: string(3, ) poziia caracterului al 3-lea string(5,!,1,1) selecteaz 5! i urmtorul caracter dup el Ca i concluzii XML furnizeaz suport puternic pentru format flexibil pentru expresii de date: exchange format (date change, aplicaii BD) wire format pentru transfer date ntre obiect i server persistence format de nmagazinare date pentru document repositiony XML conine n plus: Chanel Definition Format (CDF) pentru coninut Wcb, Open Financial Exchange Format (OFX) pentru schimb de date financiare i instruciuni ntre instituii financiare, Open Software Distribution (OSD) pentru componente soft i versiuni i relaii ntre componente, Chemical Markup Language (CML), Mathematical Markup Language (HML). utilizatori i va putea organiza un propriu Yahoo pe calculatorul de acas.
1.8.4. SVG XML
Scalable Vector Graphics (SVG) ca recomadare W3C, este utilizat pentru a defini un grafic vector-based pentru Web. SVG definete graficul n format XML i nu i pierde calitatea la zoom sau redimensionare. Fiecare element i atribute din fiierele SVG pot fi animate. Advantaje: Fa de ale formate de imagini (JPEG sau GIF) SVG ofer posibilitatea: creare i editare cu orice editor text, cutare, indexare, scripting, i comprimare, imagini scalabile, tiprire cu rezoluie de nalt calitate, proprietatea de zoom (fr degradare). Browser ce suport SVG: Internet Explorer 9, Firefox, Opera, Chrome, and Safari. Inglobarea direct a SVG n pagini HTML Example
31
H TM L5
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html> Diferene ntre SVG i Canvas SVG este un limbaj de descriere a graficelor 2D n XML iar Canvas deseneaz grafice 2D din zbor folosind JavaScript. SVG este XML based, fiecare element este disponibil din SVG DOM. Se pot ataa event handleri JavaScript la element. In SVG, fiecare form desenat este memorat ca obiect. Dac atributele unui obiect SVG sunt schimbate, browserul poate automat redesena forma. Canvas este redat pixel cu pixel. In canvas, odat graficul desenat, este uitat browser. Dac se schimb poziia, ntreag scena trebuie desenat, incluznd obiecte ce n-au fost acoperite de grafic. Tabel 1 Comparaie dintre Canvas SVG Canvas SVG Rezoluie independent Rezoluie dependent Suport la event handlers Fr suport la event handleri Potrivit la aplicaii cu zone mari de redare Slabe capabiliti de redare text (Google Maps) Imaginea rezultat se salveaz ca .png or .jpg Redare lent la soluii complexe (DOM este Potrivit la jocuri grafice-intensive ncet) Nepotrivit la aplicaii games
1.8.5. DOM i SAX
SAX (simple API for XML) este event based API pentru XML. SAX furnizeaz evenimente pentru urmtoarele infomaii structurale din XML: nceput i sfrit document ; declaraie document type ; nceput i sfrit element ; atribute pentru fiecare element ; date caracter ; declaraiid e entiti neverificate (unparsed entity); declaraii de notificare (notation declarations) ; instruciuni de procesare; SAX este coninut n org.xml.sax pachetul care pune la dispoziie: - interfeele implementate de interpreter XML (Pauser, AttributeList i Location) 32
H TM L5
- interfee implementate de interpreter aplicaie (Document Handler,DTD Handler, Entity Resolver i Error Handler) - clase SAX standard: Hand (erParse, InputSource, SAXException i SAXPAUSEException Clasele helper sunt incluse n pachetul org.xml.sax.helpers i sunt ParseFactory, AttributeListImplementation i Location Implementation Interfaa Parser comun deoarece toate nterpreterele SAX trebuie s implementeze aceast interfa. Metode: setDocumentHandler(DocumentHandler handler) permite aplicaiei s nregistreze un manipulator eveniment setDTDHandler (DTDHandler handler) permite aplicaiei s nregistreze un DTD setEntityResolver (EntityResolver resolver) permite aplicaiei s nregistreze o entitate resolver Custom setErrorHandler (ErrorHandler handler) permite aplicaiei s nregistreze un eroare setLocale(java.util.Locale locale) permite aplicaiei s cear locale pentru erori i avertismente parse (InputSource source) interpreteaz doc.XML parse (String SystemID) interpreteaz de la URI SystemID Interfaa AtributeList conine specificaiile atributelor elemente: getLenghth ( ) numr de attribute din list getName(int i) ntoarce String de atribute din list dup nume getType(int i) ntoarce (String) de atribut din list (dup poziie) getType(String name) ntoarce (String) de atribut din list (dup nume) getValue(int : ) ntoarce (String) valoarea atributului din list (dup poziie) getValue(String name) ntoarce (String) valoarea atributului din list (dup poz.) Interfaa Location asociaz ev.SAX cu locaia documentului. Metodele : getPublicID( ) ntoarce (String) identificator public al evenimentului documentului curent getSystemID() ntoarce (String) identificator system al evenimentului documentului curent getLineNumber() ntoarce (int) numrul liniei unde se termin evenimentului documentului curent getColumnNumber() ntoarce (int) numr de coloane unde se termin evenimentului documentului curent Interfaa DocumentHandler furnizeaz metode callback pentru a primi notificrile evenimentelor generale ale documentului. Metodele : setDocumentLocator(Locator locator) regsete obiectul pentru a localiza originea evenimentului document SAX startDocument() primete notificarea de la nceputul documentului end Document( ) primete notificarea de la sfritul documentului startElement (String name, AttributeList atts) primete notificarea de la nceputul elementului endElement (String name) primete notificarea de la sfritul elementului characters (char[] int start int lenght) primete notificarea de la caractere spannableWhiteSpace( ) int start int leeght) primete notificarea de la white space
33
H TM L5
processingInstruction(String Larget, String data) int start int leeght) primete notificarea de la instruciune DDTHandllerInterface furnizeaz metode callback pentru a primi notificarea evenimentului DDT. Metode: notationDecl(String name String publicID String SystemID) primete notificarea unui evniment declarat unparsedEntityDecl(String name String publicID String SystemID String notationName) primete notificarea unei entiti nedeclarate Interfaa EntityResolver resolveEntity(String public ID, String System ID) ntoarce obiectul InputSource pentru resolve external entity Interfaa Error Handler error(SAXPauseException exception) fatalError(SAXPauseException exception) warning(SAXPause Exception exception) Clasa HandlerBase are constructor HandleBase() i implementeaz interfeele DocumentHandler, DDTHandler EntityResolver i ErrorHandler Clasa InputSource permite aplicaiilor SAX s ncapsuleze informaii despre sursa de intrare ntr-un singur obiect. Constructori: Input Source( ) InputSource(String system ID) InputSource(java.io.InputStream byte Stream) InputSource(java.io.Readle characterStream) Metode: getPublicId() setPublicId( ) getSystemID( ) setSystem Id( ) getByteStream( ) setByteStream( ) getCharacterStream( ) getCharacterStream( ) getEndchoding( ) getEndcoding( ) Clasa ParserFactory clas ajuttoare ce furnizeaz metode convenabile pentru ncrcarea dinamic a interpretului SAX. Metode: makeParser() creaz i ntoarce (Parser) folosind proprietile system org.xml.jax.pauser makeParser(String className) creaz i intrarea n (Parser) folosete proprietile din numele clasei. Asupra acestor clase i metode vom reveni ntr-o alt abordare, extinderea lor depind obiectul propus n demersul de fa.
Bibliografie:
1. www.w3schools.com/html5/ 2. dev.w3.org/html5/spec/ 3. [html5demos.com/ -
34
H TM L5
4. 5. 6. 7. 8.
beta.theexpressiveweb.com/ - Adobe The expressive Web Beta www.w3schools.com/css3/default.asp www.css3.com/ www.w3.org/TR/selectors/ https://developers.google.com/maps/documentation/javascript/tutorial
35
S-ar putea să vă placă și
- The Odyssey: (The Stephen Mitchell Translation)De la EverandThe Odyssey: (The Stephen Mitchell Translation)Evaluare: 4 din 5 stele4/5 (7770)
- How to Win Friends and Influence People: Updated For the Next Generation of LeadersDe la EverandHow to Win Friends and Influence People: Updated For the Next Generation of LeadersEvaluare: 4 din 5 stele4/5 (2314)
- Habit 6 Synergize: The Habit of Creative CooperationDe la EverandHabit 6 Synergize: The Habit of Creative CooperationEvaluare: 4 din 5 stele4/5 (2499)
- Pride and Prejudice: Bestsellers and famous BooksDe la EverandPride and Prejudice: Bestsellers and famous BooksEvaluare: 4.5 din 5 stele4.5/5 (19653)
- Wuthering Heights (Seasons Edition -- Winter)De la EverandWuthering Heights (Seasons Edition -- Winter)Evaluare: 4 din 5 stele4/5 (9486)
- The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeDe la EverandThe Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeEvaluare: 4 din 5 stele4/5 (5795)
- The Iliad: The Fitzgerald TranslationDe la EverandThe Iliad: The Fitzgerald TranslationEvaluare: 4 din 5 stele4/5 (5646)
- Habit 3 Put First Things First: The Habit of Integrity and ExecutionDe la EverandHabit 3 Put First Things First: The Habit of Integrity and ExecutionEvaluare: 4 din 5 stele4/5 (2507)
- Wuthering Heights Complete Text with ExtrasDe la EverandWuthering Heights Complete Text with ExtrasEvaluare: 4 din 5 stele4/5 (9929)
- The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeDe la EverandThe Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeEvaluare: 4.5 din 5 stele4.5/5 (20030)
- American Gods: The Tenth Anniversary EditionDe la EverandAmerican Gods: The Tenth Anniversary EditionEvaluare: 4 din 5 stele4/5 (12948)
- The 7 Habits of Highly Effective PeopleDe la EverandThe 7 Habits of Highly Effective PeopleEvaluare: 4 din 5 stele4/5 (353)
- How To Win Friends And Influence PeopleDe la EverandHow To Win Friends And Influence PeopleEvaluare: 4.5 din 5 stele4.5/5 (6522)
- The Iliad: A New Translation by Caroline AlexanderDe la EverandThe Iliad: A New Translation by Caroline AlexanderEvaluare: 4 din 5 stele4/5 (5718)
- The 7 Habits of Highly Effective PeopleDe la EverandThe 7 Habits of Highly Effective PeopleEvaluare: 4 din 5 stele4/5 (2568)
- The Picture of Dorian Gray (The Original 1890 Uncensored Edition + The Expanded and Revised 1891 Edition)De la EverandThe Picture of Dorian Gray (The Original 1890 Uncensored Edition + The Expanded and Revised 1891 Edition)Evaluare: 4 din 5 stele4/5 (9054)
- Never Split the Difference: Negotiating As If Your Life Depended On ItDe la EverandNever Split the Difference: Negotiating As If Your Life Depended On ItEvaluare: 4.5 din 5 stele4.5/5 (3279)
- The Picture of Dorian Gray: Classic Tales EditionDe la EverandThe Picture of Dorian Gray: Classic Tales EditionEvaluare: 4 din 5 stele4/5 (9756)
- The 7 Habits of Highly Effective People Personal WorkbookDe la EverandThe 7 Habits of Highly Effective People Personal WorkbookEvaluare: 4 din 5 stele4/5 (2515)
- Art of War: The Definitive Interpretation of Sun Tzu's Classic Book of StrategyDe la EverandArt of War: The Definitive Interpretation of Sun Tzu's Classic Book of StrategyEvaluare: 4 din 5 stele4/5 (3321)
- Habit 1 Be Proactive: The Habit of ChoiceDe la EverandHabit 1 Be Proactive: The Habit of ChoiceEvaluare: 4 din 5 stele4/5 (2556)
