Management în Tehnologia Informației [619149]

Universitatea din Oradea
Facultatea de Inginerie Electrică și Tehnologia Informației
Management în Tehnologia Informației

Elemente multimedia folosite în HTML5

Peter Kiss

Oradea
2017

2

Cuprins:

1. Introducere ………………………….. ………………………….. ………………………….. …… 3
2. Noile API -ui ………………………….. ………………………….. ………………………….. …… 4
3. Noile tag -uri ………………………….. ………………………….. ………………………….. ….. 5
4. Structura HTML5 ………………………….. ………………………….. ………………………… 7
5. HTML5 audio tag ………………………….. ………………………….. ………………………… 8
6. HTML5 video tag ………………………….. ………………………….. ………………………. 10
7. HTML5 embed tag ………………………….. ………………………….. ……………………. 11
8. HTML5 canvas tag ………………………….. ………………………….. …………………….. 12
9. HTML5 figure tag ………………………….. ………………………….. ……………………… 13
10. Tag-ul progress ………………………….. ………………………….. ……………………… 14
11. Noile tipuri de casete input in HTML5 ………………………….. ……………………. 14
12. Atribute noi pentru <form> adaugate in HTML5 ………………………….. ……… 18
13. Studiu de caz / Aplicatie ………………………….. ………………………….. …………. 19
14. Bibliografie ………………………….. ………………………….. ………………………….. . 29

3
1. Introducere

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru WWW – World
Wide Web , o tehnologie nucleu pentru Internet propusă inițial pentru software -ul Opera .
HTML 5 e ste a cincea revizuire a standardului HTML (creat în 1990 și standardizat ca
HTML4 din 1997 ) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale
au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia
în același timp menținându -l ușor de citit de oameni și bine înțeles de computere și device -uri
(browsere web, parsere , etc.). HTML5 își propune să însumeze nu numai HTML4 , dar
și XHTML 1 și DOM2HTML (îndeosebi JavaScript ). HTML5 este un posibil candidat: [anonimizat]5 au fost create din considerarea
că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smart -phonurile sau tabletele.
Urmărind predecesorii săi imediați HTML 4.01 și XHTML 1.1, HTML5 este un răspuns la
observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de
caracteristici introduse de specificații diferite, împreuna cu acestea mai sunt și carac teristicile
diferite aduse de software, de browsere, și multe erori de sintaxă în documnentele web existente.
Astfle, HTML5 devine o încercare de a defini un singur limbaj de marcare care poate fi scris în
oricare dintre sintaxele HTML sau/și XHTML. Acesta include modele detaliate de prelucrare
pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și raționalizează
disponibilitățile pentru docume ntele web și introduce marcarea și aplicații API ( application
programming interfaces ) pentru aplicații web complexe. Din aceste motive, HTML5 este un
posibil candidat pentru aplicațiile de platform e mobile. Multe caracteristici ale HTML5 au fost
create din considerarea că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smart –
phonurile sau tabletele.
În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente
ca <video>, <audio>, <header> și <canvas> elemente HTML , precum și integrarea
conținutului SVG care a înlocuiește utilizarea tag -ului generic <object>. Aceste noutăți sunt
proiectate pentru a facilita includerea și manipularea în web a conținuturilor multimedia și
grafice fără a fi nevoie să se recurgă la proprietățile de plugin și API. Alte noi elemente
ca <section>, <article>, <header>, și <nav> sunt pr oiectate să îmbunătățească conținutul

4
semantic al documentelor. Noi atribute au fost introduse în același scop, în același timp unele
elemente și atribute au fost îndepărtate. Unele elemente ca <a>, <cite> și <menu> au fost
schimbate, redefinite și standar dizate. API -urile și DOM -urile ( document object model ) sunt
certitudini și sunt părți fundamentale în spe cificațiile HTML5. [4] HTML5, de asemenea,
definește in câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa
erorilor va fi tratată uniform de toate browserele cunoscute.
HTML5 introduce un număr de noi elemente și atribute care reflectă utilizarea tipică a unui
site modern. Unele dintre ele sunt semantic înlocuite cu utilizări comune de blocuri generice
(<div>) și de elemente inline (<span>) , de exemplu <nav> – block de navigatie în site –
, <footer> – în mod normal se referă la partea de jos a unei pagini web sau la ultima linie de cod
HTML – sau <audio> și <video> în loc de <object>. Unele elemente depreciate din HTML 4.01
au fost șterse, inclusiv nevinovatul element de prezentare <font> și <center>, al căror efect este
realizat cu CSS ( Cascading Style Sheets ). Se pune astfel accent pe importanț a DOM
scripting (e.g. JavaScript) în comportamentul web.
Sintaxa HTML5 nu mai este bazată pe SGML în ciuda asemănării cu marcajele acestuia.
Oricum a fost dezvoltată pentru compatibilitatea cu parserele comune de HTML mai vechi.
Aceas ta vine cu o nouă linie introductivă, arată ca tipurile de declarare SGML, <!DOCTYPE
html>, care declanșează modurile standard de redare. Din 5 ianuarie 2009, HTML5 include de
asemenea Web Forms 2.0, anteriorul caiet de sarcini WHATWG.

2. Noile API -ui

În completarea marcajelor prezentate mai sus, HTML5 aduce scriptingul API ( applicat ion
programming interfaces ). Interfața existentă document object model (DOM) este extinsă de fapt
cu caracteristici noi, documentate. Sunt noi API -uri, cum ar fi:
 Elementul canvas pentru modul de desen 2D. A se vedea Canvas 2D API Specification
1.0 specifi cation
 Timed media playback – mod de redare media cronometrat

5
 Offline storage database (offline web applications)
 Editare de documente
 Drag -and-drop
 Mesagerie Cross -document
 Managementul de istorie a browserului
 MIME type și protocolul de manipulare a înregistrărilor
 Microdata

3. Noile tag -uri

O lista cu noile tag -uri introduse odata cu HTML 5:
<article> marcheaz ă un articol
<aside> marcheaz ă un continut aparte fata de continutul paginii, dar care are legatura cu el.
<audio> marcheaz ă introducerea de continut audio
<canvas> marcheaz ă introducerea de continut grafic
<command> marcheaz ă un buton de comanda
<datalist> marcheaz ă un meniu drop -down
<details> marcheaz ă detaliile unui element
<dialog> marcheaz ă un dialog, o conversatie
<embed> marcheaz ă continut interactiv extern sau introducerea unui plugin
<figure> marcheaz ă un grup de elemente care au legatura unul cu celalalt si care pot fi
considerate in pagina, continut de sine statator.
<footer> marcheaz ă sectiunea footer a pagini

6
<header> marcheaz ă sectiunea header a pagini
<hgroup> marcheaz ă o sectiune a pagini
<keygen> marcheaz ă un cod generat automat intr -un formular
<mark> marcheaz ă text evidentiat
<meter> marcheaz ă valoarea unei unitati de masura cunoscute
<nav> marcheaz ă o bara de navigare cu linkuri
<output> marcheaz ă diferite tipuri de rezultate ale unu i script oarecare.
<progress> marcheaz ă o bara de progres fie ea grafica sau numerica
<rp> defineste continut care va fi afisat in cazul in care browser -ul nu supotra tag -ul ruby
<rt> defineste o regula sau o explicatie pentru tagul ruby
<ruby> folosit impreuna cu caracterele asiatice
<section> marcheaza o sectiune oarecare (header, footer, bara de navigare, capitole sau orice
alta sectiune)
<source> marcheaz ă sursa fisierului multimedia
<time> marcheaz ă ora / data
<video> marcheaz ă introducerea unui video

Pe de alta parte tag -urile scoase din HTML 5 sunt dupa cum urmeaza:
– acronim, applet, basefont, big, center, dir, font, frame, frameset, noframes, s, strake, tt,
u, xmp.

7
4. Structura HTML5

Doctype in HTML5 e mai simplu:
<!doctype html>
Tag-ul Meta charset e mai simplu:
<meta charset="utf -8">

Div-urile sunt acum folosite petru stil si design, nu mai sunt necesare pentru structura;
HTML5 include mai multe elemente noi pentru structurare, care ajuta la definirea si organiza rea
diferitelor parti in document.
Acestea sunt principalele elemente de structura care sunt folosite mai des in HTML5:
 <header> – e folosit pentru a defini titluri (si sub -titluri), sau meniu de navigare in site.
Poate fi adaugat direct in BODY, sau in <a rticle>, ori <section>.
– De obicei in acest element se adauga tag -uri H1, H2, Hx, sau <nav> cu principalele
link-uri.
 <footer> – reprezinta subsolul paginii sau a unui <section>, ori <article>; poate contine
informatii despre autor, copyright, etc.
 <secti on> – representa o sectiune distincta a documentului sau aplicatiei. Se foloseste
pentru a grupa logic structura documentului.
Poate contine header, articles, meniu de navigare si footer.
 <nav> – in acest tag se adauga meniul de navigare in paginile site-ului. Acest element
ar trebui folosit doar pentru link -uri grupate intr -un meniu.
Daca aveti un <footer> cu link -uri de navigare in site, nu mai e necesar sa le adaugati
si in <nav>, deoarece <footer> e suficient.
 <article> – se foloseste pentru a def ini un element independent in pagina (sau in
<section>), si poate contine articole de stiri, postari de blog, comentarii, sau alt
continut cu text si imagini.

8
 <aside> – poate fi folosit ca sa defineasca o zona laterala, sau alt continut care e
considerat i ntr-un fel separat de continutul din jurul lui. Un exemplu ar fi, banner sau
publicitate.
 <hgroup> – se foloseste pentru a grupa un set de doua sau mai multe elemente H1, H2,
H3, …, cand avem de exemplu un titlu si subtitluri
Iata o structura comuna a un ei pagin cu HTML5, ce contine un header in partea de sus a
paginii (cu u meniu in el), o sectiune in partea stanga (cu un meniu de navigare "aside" pt.
banner), o alta sectiune (cu Header, 2 articole si footer), si un footer in subsolul:

Puteti folosi tag-urile pentru structurare cu atributele "id" si "class", precum si <div>, <span>,
<p>, si alte tag -uri HTML pentru design si organizare /aranjare continut in documentul HTML.

5. HTML5 audio tag

Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pa gina web.
Poate folosi aceste atribute:
 autoplay (autoplay="autoplay") – Sunetul, muzica va incepe automat.

9
 controls (controls="controls") – Controalele audio (play / pauza, etc.) vor fi afisate.
 loop (loop="loop") – Muzica va incepe din nou dupa ce se te rmina.
 preload (preload="auto|metadata|none") – Specifica daca si cum va fi incarcat fisierul
audio cand pagina se incarca. Atributul "preload" este ignorat daca se adauga
"autoplay".
("auto" – incarca tot fisierul audio cand pagina se incarca; "metadata" – incarca numai
metadata cand pagina se incarca; "none" – browser -ul nu ar trebui sa incarce fisierul
audio cand se incarca pagina).
 src (src="url") – Adresa URL a fisierului audio.
Elementul <audio> foloseste tag -ul <source> ca sa specifice sursa fisierului audio si
fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec
recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV).
– Exemplu:
<audio controls="controls">
<source src="audio_file.ogg" type="audio/ogg" />
<source src="audio_file.mp3" type="audio/mp3" />
Browser -ul dv. nu recunoste tag -ul audio, dar puteti <a href="audio_file.mp3">Descarca
fisierul</a>.
</audio>
– Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag –
ul audio. In exemplu de mai sus, daca browser -ul nu recunoste tag -ul <audio>, va fi afisat in acel
loc un link de download.
Rezultat:

10
6. HTML5 video tag

Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video
clipuri si alt continut video.
Tag-ul HTML5 <video> poate folosi aceste atribute:
 autoplay (autoplay="autoplay") – Filmul /videoclip -ul va incepe automat.
 controls (controls="controls") – Butoanele de control (play / pauza, etc. ) vor fi afisate.
 height (height="pixeli") – Inaltimea player -ului, in pixeli.
 width (width="pixeli") – Lungimea player -ului, in pixeli.
 muted (muted="muted") – Sunetul din film va fi pe mut, nu e redat.
 poster (poster="URL") – Specifica o imagine care sa fie afisata in timp ce filmul se
incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi
afisat primul cadru din film.
 loop (loop="loop") – Filmul va porni de la inceput dupa ce se termina.
 preload (preload="auto|metadata|none" ) – Specifica daca si cum va fi incarcat filmul
cand pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay".
("auto" – incarca tot fisierul video cand pagina se incarca; "metadata" – incarca numai
metadata cand pagina se incarca; "no ne" – browser -ul nu ar trebui sa incarce filmul
cand se incarca pagina).
 src (src="url") – Adresa URL a fisierului video.
Elementul <video> foloseste tag -ul <source> ca sa specifice sursa fisierului video si
fisiere alternative pentru diferentele dintre na vigatoarele web, bazate pe tipul de codec
recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV)
– Exemplu:
<video controls="controls"width="200" height="150">
<source src="video/video_file.mp4" type="video/ mp4" />
<source src="video/video_file.ogg" type="video/ogg" />

11
Browser -ul dv. nu recunoste tag -ul video, dar puteti <a
href="video/video_file.mp4">Descarca filmul</a>.
</video>
– Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag –
ul video. In exemplu de mai sus, daca browser -ul nu recunoste tag -ul <video>, va fi afisat in acel
loc un link de download.
Rezultat:

7. HTML5 embed tag

Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum sunt
prezentarile flash SWF, plug -inuri, sau fisiere cu imagini.
Poate sa foloseasca aceste atribute:
 height (height="pixeli") – Inaltimea cadrului in care e afisat continutul, in pixeli.
 width (width="pixeli") – Lungimea cadrului in care e afisat co ntinutul, in pixeli.
 type (type="MIME_type") – Tipul MIME al continutului.
 src (src="url") – Adresa URL a fisierului.
Exemplu:
<embed src="flash_game.swf" width="150" height="150" />
Rezultat:

12

8. HTML5 canvas tag

Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script -uri (de
obicei JavaScript), sau compozitii foto si animatii simple.
Atribute:
 height (height="pixeli") – Lungimea cadrului canvas, in pixeli.
 width (width="pixeli") – Inaltimea cadrului canvas, in pixeli.
– Exemplu (creaza un patrat albastru):
<canvas id="cvs1" width="88" height="88">
Acest text e afisat daca browser -ul nu recunoste elementul HTML5 Canvas.
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('cvs1');
var ctx=canva s.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>

13

– Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas.

Rezultat:

9. HTML5 figure tag

Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un continut
de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure> e atasat la
derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa afecteze cursul
paginii.
Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la ceea
ce e adaugat in <figure> .
– Exemplu:
<figure>
<img src="html_course.jpg" alt="Curs HTML" width="200" height="100" />
<figcaption> Curs HTML: www.marplo.net/html/</figcaption>
</figure>
Rezultat:

14
10. Tag -ul progress

Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu script –
uri JavaScript.
Poate folosi aceste atribute:
 max (max="nr") – Specifica totalul de unitati din bara de progres.
 value (value="nr") – Specifica numarul de unitati completate din bara de progres.

– Exemplu:
<progress value="33" max="100"></progress>
Rezultat:

11. Noile tipuri de casete input in HTML5

HTML5 adauga mai multe tipuri de casute input pentru formular (datetime, datetime -local, date,
month, week, time, number, range, email, url, search, si color), care sunt prezentate mai jos:
type="date" – Creaza o caseta de control pentru specificarea datei (an, luna, zi), prec um un
calendar. Valoarea initiala (adaugata in atributul "value") trebuie sa fie furnizata in format data
ISO.
<input type="date" name="set_date" value="2011 -10-15" />

15

type="datetime" – Creaza o caseta input pentru data si ora, care poate fi adaugat i n format ISO
date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011 -06-14T01:26:32:00Z" />
type="datetime" – Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO
date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011 -06-14T01:26:32:00Z" />

type="datetime -local" – Creaza o caseta input pentru data si ora, care poate fi adaugat in format
ISO date/time, la fel ca "datetime", dar presupunand ca timpul este cel din fusul orar local.
<input type="datetime -local" name="dtl" value="2011 -06-14T01: 26:32:00">
type="month" – Creaza o caseta input in care se poate specifica anul si luna.
<input type="month" value="2012 -09" name="mnt" />

16

type="week" – o caseta input pentru anul si numarul unei anumite saptamani din an (AN -Wnr ,
nr e numarul s aptamanii).
<input type="week" name="weeks" value="2011 -W34" />

type="time" – creaza o casuta de formular pentru ora (ora, minute, secunde).
<input type="time" name="currenttime" value="18:12:00" />

type="tel" – o caseta input pentru numar de telefon.
<input type="tel" name="hometel" value="123 -888-2012" />

type="url" – e folosit pentru campuri de formular care trebuie sa contina doar adresa URL.
Valoarea din acest input e automat validata cand datele din formular sunt trimise (daca nu are un
format URL valid, returneaza un mesaj de eroare).

17
<input type="url" name="site" size="25" value="http://www.marplo.net" />
Top of Form
http://w w w .marplo.net

type="number" – creaza casete de formular care sa contina doar n umere. Se poate restrictiona
numerele acceptate, cu atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />

type="range" – Creeaza o zona cu un cursor de control care indica o valoare dintr -o serie de
numere. Numerele acceptate incep de la valoarea specificata in atributul "min" (0 default), pana
la numarul specificat in atributul "max" (100 default).
<inpu t type="range" name="val" min="1" max="10" />

type="email" – e folosit pentru campuri de formular care trebuie sa contina doar adresa de e –
mail. Valoarea din acest input e automat validata cand datele din formular sunt trimise.
<input type="email" n ame="email" />

type="search" – Creaza un camp de text special folosit pentru cautare (de ex. cautare in site, cu
un script).
<input type="search" name="srch" size="25" value="Cautare" />
Top of Form
Cautare

Bottom of Form

18

type="color" – Creaza un camp de formular special pentru selectarea unei culori.
<input type="color" name="get_color" />

12. Atribute noi pentru <form> adaugate in HTML5

autocomplete="on | off" – Permite browser -ului sa completeze automat datele in formular
(on), sau de fiecare data utilizatorul trebuie sa introduca el insusi datele (off).
– Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url, tel, email,
password, date -pickers, range, color.
<form action="script.php" method="post" autocomplete="on" id="idf">
Name:<input type="text" name="fname" />
<input type="submit" value="Send" /> </form>
novalidate – (novalidate="novalidate" in XHTML) – Seteaza ca formularul, sau campul input
unde e adaugat, sa nu valideze automat datele cand sunt trimise.
– Se poate ada uga in <form> si in urmatoarele casete <input>: text, search, url, tel, email,
password, date -pickers, range, color.
<form action="script.php" id="idf" novalidate="novalidate">
E-mail: <input type="email" name="email" />
<input type="submit" value="Send"/>
</form> Bottom of Form

19

13. Studiu de caz / Aplicatie

Ca si aplicatie se va implementa un plugin bazat pe HTML5 de la DSGNWRKS
(http://dsgnwrks.pro/ ) pentru prezentari multimedia pe o platforma WordPress. În cazul în
care se doreste utilizarea propriilor stiluri și a ignora complet stilurile implicite oferite de
catre plugin , se poate adăuga un stylesheet numit html5slide -replace.css în dosarul temă. În
cazul în care se doreste adăuga rea unui stylesheet în plus față de cel e oferite, se poate adăuga
un stylesheet numit html5slide -style.css tot în dosarul temă.
Plugin -ul oferă o opțiune pentru a activa sau dezactiva partea de header sau footer a
slideurilor <php wp_head (?); ?> , <wp_footer php (?); ?> . Totodata se pot face prezentari
pe mai multe limbi dupa cum se poate observa in imaginea de mai jos, browserul poate
detecta limba pe care este accesata pagina web cu prezentarea dupa care redirectioneaza
utilizatorul la limba corespunzatoare in cazul in c are prezentarea este creata pe mai multe
limbi. In imaginea de mai jos se poate observa editorul pentru crearea unei pagini de titlu a
unei prezentari.

20

In urmatoarea imagine este prezentata pagina de titlu care se afiseaza in urma
implementarii unei pagini de titlu pe limba romana.

Fiind bazat pe HTML5 in slideuri se pot include diferite elemente mult imedia cum ar fi
tabele, imagini , videoclipuri sau alte elemente de tip <embed> linkuri etc. Totodata exista mai
multe setari pentru tranzitia dintre slideuri, imaginea din fundal folosita, se poate seta viteza si
animatia slideurilor, se pot seta butoane pentru slideul urmator sau anter ior sau se pot folosi
sagetile de pe tastatura sau cu clickul de la mouse. Se poate modifica stilul textului, subliniat,
bold, italic etc , la fel ca si tipul slideului, slide de titlu, slide standard, slide cu imagini sau alte
elemente multimedia.
In urmatoarea imagine se prezinta un slide cu elemente multimedia, de exemplu un video
de pe youtube cu marimea canvasului definita prin atributele width si height.

21

Slide ul de mai jos prezinta rezultatul implementarii unui videoclip youtube pe un slide cu
elemente multimedia.

22

Implicit exista mai multe variante de slideuri standard, de titlu etc. Acestea se pot extinde
manual pentru diferite cerinte si stiluri multimedia. Totodata exista mai multe stiluri implicite
pentru slideur i la care se poat crea sau adauga altele noi prin css. În cazul în care se doreste
utilizarea propriilor stiluri și a ignora complet stilurile implicite oferite de catre plugin , se poate
adăuga un stylesheet numit html5slide -replace.css în dosarul temă. În cazul în care se doreste
adăuga rea unui stylesheet în plus față de cel e oferit e, se poate adăuga un stylesheet numit
html5slide -style.css tot în dosarul temă. Totodata exista mai multe setari pentru tranzitia dintre
slideuri, imaginea din fundal folosita, se poate seta viteza si animatia slideurilor , se poate seta
marimea caracterelor si a textului etc.

23

Codul sursa a aplicatiei:

html {
height: 100%;
background -image: url(../images/zigzag.png);
}

body {
margin: 0;
padding: 0;

display: block !important;

height: 100%;
min-height: 740px;

overflow -x: hidden;
overflow -y: auto;

background: rgba(200, 200, 200, .3);
/*background: rgba(215, 215, 215, .01);
background: -o-radial -gradient(rgb(255, 255, 255), rgb(90, 90, 90));
background: -moz-radial -gradient(rgb(255, 255, 255), rgb(90, 90, 90));
background: -webkit -radial -gradient(rgb(255, 255, 255), rgb(90, 90, 90));
background: -webkit -gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(90, 90, 90)),
to(rgb(255, 255, 255)));*/

-webkit -font-smoothing: antialiased;
}

24
.html5_edit, .slides > article:hover .html5_edit.hide_edit_link, .slides > article:hover
.html5_ed it.hide_edit_link a {
display: none;
}
.slides > article:hover .html5_edit {
/*font -size: .5em;
position: absolute;
bottom: 10px;
left: 60px;*/
box-sizing: border -box;
-o-box-sizing: border -box;
-moz-box-sizing: border -box;
-webkit -box-sizing: border -box;

border -radius: 10px;
-o-border -radius: 10px;
-moz-border -radius: 10px;
-webkit -border -radius: 10px;

text-transform: uppercase;
text-align: center;
color: white;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .9);
}
.slides > article:hover .html5_edit a {

25
margin -top: -40px;
position: absolute;
width: 100%;
left: 0;
top: 50%;
font-size: 80px;
color: white;
display: block;
font-weight: bold;
}

.slides {
width: 100%;
height: 100%;
left: 0;
top: 0;

position: absolute;

-webkit -transform: translate3d(0, 0, 0);
}

.slides > article {
display: block;

position: absolute;
overflow: hidden;

width: 900px;
height: 700px;

26
left: 50%;
top: 50%;

margin -left: -450px;
margin -top: -350px;

padding: 40px 60px;

box-sizing: border -box;
-o-box-sizing: border -box;
-moz-box-sizing: border -box;
-webkit -box-sizing: border -box;

border -radius: 10px;
-o-border -radius: 10px;
-moz-border -radius: 10px;
-webkit -border -radius: 10px;

background -color: white;

-moz-box-shadow: 0 0 50px -18px #000;
-webkit -box-shadow: 0 0 50px -18px #000;
-khtml -box-shadow: 0 0 50px -18px #000;
box-shadow: 0 0 50px -18px #000;
border: 1px solid rgba(0, 0, 0, .4);

transition: transform .3s ease -out;
-o-transition: -o-transform .3s ease -out;
-moz-transition: -moz-transform .3s ease -out;
-webkit -transition: -webkit -transform .3s ease -out;
}

27
.slides.layout -widescreen > article {
margin -left: -550px;
width: 1100px;
}
.slides.layout -faux-widescreen > article {
margin -left: -550px;
width: 1100px;

padding: 40px 160px;
}

.slides.template -default > article:not(.nobackground):not(.bi glogo) {
background: url(../images/wordpress -logo-small.png) 660px 625px no -repeat;
background -color: white;
}

.slides.layout -widescreen.template -default > article:not(.nobackground):not(.biglogo) {
background -position: 60px 625px;
}

.slides.template -io2011 > article:not(.nobackground):not(.biglogo) {
background: url(../images/colorbar.png) 0 600px repeat -x,
url(../images/googleio -logo.png) 640px 625px no -repeat;

background -size: 100%, 225px;

background -color: whi te;
}

28
Suprafata slideurilor :

.slide -area {
z-index: 1000;

position: absolute;
left: 0;
top: 0;
width: 150px;
height: 700px;

left: 50%;
top: 50%;

cursor: pointer;
margin -top: -350px;

tap-highlight -color: transparent;
-o-tap-highlight -color: transparent;
-moz-tap-highlight -color: transparent;
-webkit -tap-highlight -color: transparent;
}
#prev -slide -area {
margin -left: -550px;
}
#next -slide -area {
margin -left: 400px;
}
.slides.layout -widescreen #prev -slide -area,
.slides.layout -faux-widescreen #prev -slide -area {
margin -left: -650px;

29
}
.slides.layout -widescreen #next -slide -area,
.slides.layout -faux-widescreen #next -slide -area {
margin -left: 500px;
}

14. Bibliografie

[1] https://ro.wikipedia.org/wiki/HTML5
[2] https://en.wikipedia.org/wiki/HTML5
[3] https://ro.wikipedia.org/wiki/Application_Programming_Interface
[4] https://tutorialehtml.com/r o/tutoriale -html5 -ce-este-nou-in-html5/
[5] http://dsgnwrks.pro/plugins/html5 -slideshow -presentations/
[6] https://github.com/jtsternberg/HTML5 -Slideshow -Presentations -WordPress -Plugin