Incorporarea elementelor multimedia in paginile web- Curs HTML

Încorporarea elementelor multimedia în pagini web

Am studiat pînă acum inserarea și manipularea textului, dar web-ul ar fi extrem de plictisitor, dacă am folosi doar text în paginile web. Să începem să studiem, cum să introducem în documentele web, conținut mai interesant. Această secțiune explorează modul de utilizare a marcajului HTML, pentru a include multimedia în paginile web și anume, imagini, videoclipuri, audio și chiar pagini web întregi.

Imagini in HTML

Cum inseram o imagine intr-o pagină web?

Pentru a insera o imagine simplă pe o pagină web, folosim elementul <img>. Acesta este un element gol (ceea ce înseamnă că nu are conținut text sau etichetă de închidere) si necesită un minimum de atribut pentru a fi util - src (sursă). Atributul src conține o cale catre imaginea pe care doriți să o încorporați în pagină, care poate fi o adresă URL relativă sau absolută, în același mod ca valorile atributului href din elementele <a>.

De exemplu, dacă imaginea se numește cal.png și se află în același director cu pagina HTML, puteți încorpora imaginea astfel:

<img src="cal.png">

Dacă imaginea se afla într-un subdirector de imagini, (Google recomandă acest lucru în scopul unei bune indexari-SEO ), care se afla în același director cu pagina HTML, atunci o încorporați astfel:

<img src="imagini/cal.png">

Puteți încorpora imaginea folosind adresa URL absolută, de exemplu:

<img src="https://www.example.com/imagini/cal.png">

Însă acest lucru nu are rost, deoarece face ca browserul să munceasca mai mult, căutând din nou adresa IP de pe serverul DNS, etc. Ideal este sa plasezi imaginile pe același server, unde se afla si paginile site-ului tău.

Codul de mai sus ne oferă următorul rezultat:

Textul alternativ

Următorul atribut la care ne vom referi este alt. Se presupune că valoarea acestuia este o descriere textuală a imaginii, pentru a fi utilizată în situații în care imaginea nu poate fi văzută / afișată sau durează mult timp pentru a fi redată din cauza unei conexiuni lente la Internet. De exemplu, codul nostru de mai sus ar putea fi modificat astfel:

<img src="imagini/silueta-cal.png" alt="silueta unui cal negru pe un fond alb">

Cel mai simplu mod de a testa textul alt, este de a greși în mod intenționat numele fișierului imagine. Dacă, de exemplu, numele imaginii noastre ar fi scris astfel, silueta-caaaaaaaal.png, browserul nu va afișa imaginea și va afișa textul alt în schimb:

De ce este nevoie de textul alternativ? Iata citeva motive:

• Utilizatorul este deficient de vedere și folosește un cititor de ecran pentru a citi pagiile web. De fapt, un text alt disponibil, pentru a descrie imaginea, este util pentru majoritatea utilizatorilor.
• După cum am descris mai sus, ortografia fișierului sau calea catre acesta poate fi greșită.
• Browserul nu acceptă tipul de imagine utilizat.
• Poate doriți să furnizați text alt pentru motoarele de căutare pe care le utilizați, de exemplu, motoarele de căutare pot potrivi textul alt cu interogări de căutare.
• Utilizatorii au oprit afisarea imaginilor pentru a reduce distragerea și volumul transferului de date. Acest lucru este frecvent întâlnit în special la telefoanele mobile și în țările în care lățimea de bandă este limitată sau costisitoare.

Ce anume ar trebui să scrieți în interiorul atributului alt? Depinde de ce imaginea este acolo în primul rând. Cu alte cuvinte, ce pierdeți dacă imaginea dvs. nu apare:

• Stilizarea. Presupune să utilizați imagini de fundal CSS, pentru imagini decorative, dar dacă trebuie să utilizați HTML, adăugați un atribut alt gol alt="" ". Dacă imaginea nu face parte din conținutul HTML, un cititor de ecran nu ar trebui să piardă timpul citind-o.
• Conţinut. Dacă imaginea dvs. oferă informații semnificative, furnizați aceleași informații într-un scurt text alt - sau chiar mai bine, în textul principal pe care toată lumea îl poate vedea. Nu scrieți text alt redundant. Cât de enervant ar fi pentru un utilizator cu probleme de vedere, dacă toate paragrafele ar fi scrise de două ori în conținutul principal? Dacă imaginea este descrisă în mod adecvat de corpul principal al textului, plasat linga imagine, atunci puteți folosi din nou un atribut alt gol alt="".
• Link. Dacă infasurati o imagine între etichetele <a>, pentru a o transforma într-un link, trebuie să furnizați totuși text de legătură accesibil. În astfel de cazuri, îl puteți scrie în interiorul aceluiași element <a> sau în interiorul atributului alt al imaginii - oricare dintre metode vă convine cel mai mult.
• Text. Nu ar trebui să plasați text în imagini. Dacă titlul principal are nevoie de o umbră, de exemplu, folosiți CSS pentru asta, mai degrabă decât sa introduceți textul într-o imagine. Cu toate acestea, dacă nu puteți evita acest lucru, ar trebui să furnizați textul accesibil, în interiorul atributului alt.

În concluzie, cheia este de a oferi o experiență placută, chiar și atunci când imaginile nu pot fi văzute. Acest lucru face ca niciun utilizator sa nu fie privat de conținut. Încercați să dezactivați imaginile în browserul dvs. și vedeți cum arată lucrurile. În curând veți realiza cât de util este textul alt dacă imaginea nu poate fi văzută.

Lățimea și înălțimea

Puteți utiliza atributele de lățime și înălțime pentru a specifica dimensiunile imaginii. Revenind la exemplul nostru, am putea face acest lucru:

<img src="imagini/silueta-cal.png" alt="silueta unui cal negru pe un fond alb" width="400" height="341">

In circumstanțe normale, nu vom vedea o mare diferenta. Dar dacă, de exemplu, utilizatorul tocmai a ajuns pe pagină, iar imaginea nu s-a încărcat încă, veți observa că browserul lasă un spațiu pentru ca imaginea să apară:

Acest lucru este in regula, si va duce la o încărcare a paginii mai repede și mai lin.

Cu toate acestea, nu ar trebui să modificați dimensiunile imaginilor dvs. folosind atribute HTML. Dacă setați dimensiunea imaginii prea mare, veți avea imagini care arată prost și risipesc lățimea de bandă, descărcând o imagine care nu se potrivește cu restul continutului. Imaginea poate de asemenea să pară distorsionată, dacă nu mențineți raportul de aspect corect. Ar trebui să utilizați un editor de imagini, pentru a aduce imaginea la dimensiunea dorită, înainte de a o plasa in pagina web.

Titlul imaginii

Ca și în cazul link-urilor, puteți adăuga, de asemenea, atribute de titlu pentru imagini, pentru a oferi informații suplimentare, dacă este nevoie. În exemplul nostru, am putea face acest lucru:

<img src="imagini/silueta-cal.png" alt="silueta unui cal negru pe un fond alb" width="400" height="341" title="Cal stilizat de culoare negra pe fond alb">

Acum, cind cursorul mouse-ului se afla deasupra imaginii, va fi afisat textul continut de atributul title, ca un tooltip.

Cu toate acestea, acest lucru nu este recomandat - titlul are o serie de probleme de accesibilitate, bazate în principal pe faptul că suportul pentru cititorul de ecran este foarte imprevizibil și majoritatea browserelor nu îl vor afișa, decât dacă plasați mouse-ul deasupra. Este mai bine să includeți astfel de informații, în textul care se refera la imagine, decât să fie atașate la imagine cu ajutorul atributului title.

Adnotarea imaginilor in HTML5

O soluție mai bună este utilizarea elementelor HTML5 <figure> și <figcaption>. Acestea sunt create exact pentru acest scop - pentru a furniza un container semantic si pentru a lega clar imaginea de text. Exemplul nostru de mai sus ar putea fi rescris astfel:

<figure>
    <img src="imagini/silueta-cal.png" alt="silueta unui cal negru pe un fond alb" width="400" height="341">   
    <figcaption>Cal stilizat de culoare neagra pe fond alb</figcaption> 
</figure>

Elementul figcaption spune browserelor și tehnologiei de asistență că textul afisat (legenda) descrie conținutul elementului figure.

Un element figure nu trebuie să fie o imagine. Este o unitate independentă de conținut care:

• exprimă sensul într-un mod compact, ușor de înțeles,
• poate fi plasata în mai multe locuri din fluxul liniar al paginii,
• oferă informații esențiale care susțin textul principal.

Un element figure ar putea contine mai multe imagini, un fragment de cod, audio, video, ecuații, un tabel sau altceva.

Imagini de fundal CSS

De asemenea, puteți utiliza CSS pentru a încorpora imagini în pagini web. Proprietatea de imagine de fundal CSS și celelalte proprietăți de fundal, sunt utilizate pentru a controla plasarea imaginii de fundal. De exemplu, pentru a plasa o imagine de fundal lîngă fiecare paragraf dintr-o pagină, puteți face acest lucru:

 p {
   background-image: url("imagini/silueta-cal.png");
 }

Imaginea încorporată astfel este mai ușor de poziționat și controlat decât imaginile încorporate in codul HTML. După cum am arătat mai sus, imaginile de fundal CSS, ar trebui sa aiba doar rol decorativ. Dacă doriți să adăugați o imagine drăguță pe pagina dvs. pentru a o face mai interesantă, este în regulă. Deși, astfel de imagini nu au deloc o semnificație semantică, nu pot avea niciun echivalent text si sunt invizibile pentru cititorii de ecran.

Conținut video și audio

Acum că stim să adăugam imagini simple pe o pagină web, următorul pas este să începeți să adăugați playere video și audio in documentele HTML. În aceasta sectiune, vom face asta doar cu elementele video și audio.

Elementul video

Elementul <video> vă permite să încorporați un videoclip foarte ușor. Un exemplu foarte simplu arată așa:

<video src="video/jellyfish.webm" controls>
<p>Browserul dvs. nu acceptă formatul video. Incercati urmatorul <a href="video/jellyfish.webm">link către video</a>.</p> 
</video>

Se remarca urmatoarele elemente:

src

În același mod ca și pentru elementul <img>, atributul src (sursă) conține o cale către videoclipul pe care doriți să îl încorporați. Funcționează exact în același mod.

controls

Utilizatorii trebuie să poată controla redarea video și audio (este deosebit de important pentru persoanele care au epilepsie.) Trebuie să folosiți atributul de control pentru a include interfața de control a browserului sau să vă construiți interfața folosind API-ul JavaScript corespunzător. Interfața trebuie să includă, cel puțin, o modalitate de pornire și oprire a fisierului media și de reglare a volumului.

p

Paragraful din interior se numește conținut fallback - acesta va fi afișat în cazul în care browserul care accesează pagina nu acceptă elementul video, permițându-ne să oferim o alternativa pentru browserele mai vechi. Paragraful poate conține orice - în acest caz, am furnizat un link direct către fișierul video, astfel încât utilizatorul să îl poată accesa cel puțin într-un fel, indiferent de browserul pe care îl folosește.

Videoclipul încorporat va arăta astfel:

Utilizarea mai multor formate sursă pentru a îmbunătăți compatibilitatea

Există o problemă cu exemplul de mai sus, si anume, videoclipul nu va fi redat in Internet Explorer sau in alte versiuni mai vechi ale altor browsere, deoarece diferite browsere acceptă diferite formate video (și audio). Din fericire, există lucruri pe care le puteți face pentru a ajuta la prevenirea acestei probleme.

Conținutul unui fișier media

În primul rând, să parcurgem terminologia rapid. Formate precum MP3, MP4 și WebM se numesc formate container. Acestea definesc o structură în care sunt stocate pistele (tracks) audio și/sau video care compun media, împreună cu metadatele care descriu media, ce codec-uri sunt utilizate pentru a codifica canalele sale, etc.

Pistele audio și video din container conțin date în formatul corespunzător codecului utilizat pentru codificarea acelui suport. Diferite formate sunt utilizate pentru piste audio versus piste video. Fiecare pista audio este codată folosind un codec audio, în timp ce pistele video sunt codificate folosind (așa cum probabil ați ghicit) un codec video.

De exemplu:

• Un container WebM conține în mod obișnuit audio Vorbis sau Opus cu video VP8/VP9. Acesta este acceptat în toate browserele moderne, deși este posibil ca versiunile mai vechi să nu funcționeze.
• Un container MP4 contine audio AAC sau MP3 cu video H.264. Acesta este acceptat în toate browserele moderne, precum și în Internet Explorer.
• Containerul Ogg tinde să folosească audio Vorbis și video Theora. Acesta este cel mai bine acceptat în Firefox și Chrome, dar practic a fost înlocuit de un format WebM de mai bună calitate.

Există câteva cazuri speciale. De exemplu, pentru unele tipuri de audio, datele unui codec sunt adesea stocate fără un container sau intr-un container simplificat. Un astfel de exemplu este codecul FLAC, care este stocat cel mai frecvent în fișierele FLAC, care sunt doar piste FLAC brute.

O altă situație este cea a popularului fișier MP3. Un fișier MP3 este de fapt o pistă audio MPEG-1 Audio Layer III (MP3) stocată într-un container MPEG sau MPEG-2. Acest lucru este deosebit de interesant, deoarece, în timp ce majoritatea browserelor nu acceptă utilizarea de media MPEG în elementele video și audio, acestea pot totuși să suporte MP3 datorita popularității sale.

Un player audio va tinde să redea direct o piesă audio, de ex. un fișier MP3 sau Ogg. Acestea nu au nevoie de containere.

Suport pentru fișiere media în browsere

Codecurile descrise în secțiunea anterioară există pentru a comprima video și audio în fișiere gestionabile, deoarece audio și video brute sunt ambele extrem de mari. Fiecare browser web acceptă un sortiment de codecuri, precum Vorbis sau H.264, care sunt utilizate pentru a converti audio și video comprimate în date binare și înapoi. Fiecare codec oferă propriile avantaje și dezavantaje și fiecare container poate oferi, de asemenea, propriile sale caracteristici pozitive și negative care influentează deciziile de utilizare a unuia sau altuia.

Lucrurile devin ușor mai complicate, deoarece fiecare browser acceptă doar un anume set de formate de fișiere container, dar și o selecție diferită de codecuri. Pentru a maximiza probabilitatea ca site-ul sau aplicația dvs. să funcționeze pe browserul unui utilizator, poate fi necesar să furnizați fiecare fișier media pe care îl utilizați în mai multe formate. Dacă site-ul dvs. și browserul utilizatorului nu partajează în comun un format media, media dvs. pur și simplu nu va fi redată.

Astfel, alegerea celei mai bune combinații de codecuri și container poate fi o sarcină complicată.

Un alt lucru de reținut este ca, browserele mobile pot suporta formate aditionale, care nu sunt acceptate de echivalentele desktop. De cele mai multe ori suportul pentru un anumit tip media, depinde parțial de software-ul instalat pe dispozitivul utilizatorului.

Deci, cum rezolvam aceste probleme? Aruncați o privire la următorul exemplu:

<video controls>
<source src="video/jellyfish.mp4" type="video/mp4">
<source src="video/jellyfish.webm" type="video/webm">
<p>Browserul dvs. nu acceptă formatul video. Incercati urmatorul <a href="video/jellyfish.webm">link către video</a>.</p> 
</video>

Aici am scos atributul src din eticheta video propriu-zisă și în schimb am inclus elemente source separate care indică sursele proprii. În acest caz, browserul va parcurge elementele source și va reda primul element media pentru care are codecul necesar. Includerea surselor WebM și MP4 ar trebui să fie suficientă pentru a reda video în majoritatea platformelor și browserelor din aceste zile.

Fiecare element source are, de asemenea, un atribut type. Acesta este opțional, dar este recomandat să il includeți. Atributul type conține tipul MIME al fișierului specificat de source, iar browserele pot utiliza acest lucru, pentru a sări imediat, peste videoclipuri pe care nu le pot reda. Dacă tipul nu este inclus, browserele vor încărca și vor încerca să redea fiecare fișier până când vor găsi unul care funcționează, ceea ce în mod evident necesită timp și este o utilizare inutilă a resurselor.

Alte caracteristici video

Există o serie de alte funcții pe care le puteți include atunci când afișați un videoclip HTML. Aruncați o privire la următorul exemplu:

<video controls width="400" height="400" autoplay loop muted preload="auto" poster="imagini/cal.png">
<source src="video/jellyfish.mp4" type="video/mp4">
<source src="video/jellyfish.webm" type="video/webm">
<p>Browserul dvs. nu acceptă formatul video. Incercati urmatorul <a href="video/jellyfish.webm">link către video</a>.</p> 
</video>

Rezultatul arata astfel:

Am folosit imaginea cal.png, utilizata mai sus in sectiunea "Imagini in HTML", ca valoare a atributului poster.

Elementele noi care apar in exemplul de mai sus, sunt urmatoarele:

width si height

Puteți controla dimensiunea videoclipului fie cu aceste atribute, fie cu CSS. În ambele cazuri, videoclipurile își păstrează raportul nativ de lățime-înălțime - cunoscut sub numele de raport de aspect (aspect ratio). Dacă raportul de aspect nu este menținut de dimensiunile setate, videoclipul va crește pentru a umple spațiul pe orizontală, iar spațiul neumplut va primi doar o culoare de fundal, solidă în mod implicit.

autoplay

Face ca fisierul audio sau video să înceapă redarea imediat, în timp ce restul paginii se încarcă. Vi se recomandă să nu utilizați aceasta optiune, deoarece utilizatorii pot considera că este foarte enervant.

loop

Face ca videoclipul (sau fisierul audio) să înceapă redarea din nou, de fiecare dată când ajunge la capat. Acest lucru poate fi de asemenea enervant, așa că utilizați optiunea numai dacă este cu adevărat necesar.

muted

Face ca fisierul media să aiba sunetul oprit în mod implicit.

poster

Contine adresa URL a unei imagini care va fi afișată înainte de redarea videoclipului. Este destinat să fie utilizat pentru un ecran splash sau ecran publicitar.

preload

Folosit pentru crearea unui tampon (buffer), in cazul fișierelor mari si poate lua una dintre cele trei valori:

• none - nu creeaza buffer
• auto - creeaza buffer-ul
• metadata - creeaza buffer-ul doar pentru metadate

Afișarea subtitrarilor pentru video

Acum vom discuta despre un concept puțin mai avansat, care este cu adevărat util uneori. Mulți oameni nu pot sau nu doresc să audă conținutul audio/video pe care îl găsesc pe web, cel puțin la anumite ore.

Nu ar fi frumos să le poți oferi acestor persoane o transcriere a cuvintelor rostite în audio / video? Ei bine, se poate. Pentru aceasta, utilizăm formatul de fișier WebVTT și elementul <track>.

WebVTT este un format pentru scrierea fișierelor text care conțin mai multe șiruri de text, împreună cu metadate, cum ar fi timpul din videoclip în care ar trebui să fie afișat fiecare șir text, și chiar informații limitate de stilizare / poziționare. Aceste șiruri de text sunt numite cues (indicii), și există mai multe tipuri de indicii care sunt utilizate în scopuri diferite. Cele mai comune indicii sunt:

subtitrari (subtitles)

Traduceri din limbi străine pentru persoane care nu înțeleg cuvintele rostite în audio.

legende (captions)

Transcrieri sincronizate ale dialogului sau descrierile sunetelor semnificative, pentru a permite persoanelor care nu aud să înțeleagă ce se întâmplă.

timed descriptions (descrierile cronologice)

Text care ar trebui să fie redat de către media player, pentru a descrie momente importante, pentru utilizatorii orbi sau cu deficiențe de vedere.

Un fișier WebVTT tipic va arăta astfel:

WEBVTT

1
00:00:20.2550 --> 00:00:22.711
Aceasta este prima subtitrare.

2
00:00:28.539 --> 00:00:32.092
Aceasta este a doua subtitrare.

...

Pentru a afișa subtitrarea împreună cu redarea media HTML, trebuie să:

1. Salvam fișierul cu extensia .vtt.
2. Adaugam un link către fișierul .vtt, in interiorul elementului track. Elementul track ar trebui plasat în audio sau video, dar după toate elementele source. Utilizați atributul kind pentru a specifica dacă indiciile sunt subtitrări, legende sau descrieri. În plus, utilizați srclang pentru a spune browserului în ce limbă ați scris subtitrările.

Iata un exemplu:

<video controls>
<source src="video/jellyfish.mp4" type="video/mp4">
<source src="video/jellyfish.webm" type="video/webm">
<track kind="subtitles" src="subtitrare_ro.vtt" srclang="ro">
</video>

Astfel, videoclipul va avea subtitrare afișata, cam așa:

Elementul audio

Elementul audio funcționează la fel ca elementul video, cu câteva mici diferențe așa cum este prezentat mai jos. Un exemplu tipic ar putea arăta astfel:

<audio controls>
<source src="audio/test.mp3" type="audio/mp3">
<source src="audio/test.ogg" type="audio/ogg">
<p>Browserul dvs. nu acceptă formatul audio. Incercati urmatorul <a href="audio/test.mp3">link către fisierul audio</a>.</p> 
</audio>

Codul de mai sus, produce ceva de genul următor într-un browser:

Playerul audio ocupă mai puțin spațiu decât un player video, deoarece nu există o componentă vizuală - trebuie doar să afișați controale pentru a reda audio. Alte diferențe față de videoclipurile HTML sunt următoarele:

• Elementul audio nu acceptă atributele lățime/înălțime - pentru ca, nu există nicio componentă vizuală.
• De asemenea, nu acceptă atributul poster - din nou, nicio componentă vizuală.

In rest, toate atributele valabile pentru video sunt valabile si pentru audio.

De la object la iframe - alte tehnologii de încorporare

In aceasta sectiune, va voi prezenta alte elemente care vă permit să încorporați o mare varietate de tipuri de conținut în paginile dvs. web: elementele iframe, embed și object. Elementele iframe sunt destinate încorporarii altor pagini web, iar celelalte două vă permit să încorporați PDF-uri, SVG-uri și chiar Flash - o tehnologie care este pe cale de ieșire din scena, dar pe care o veți mai intilni totusi.

Să ne uităm la modul în care YouTube ne permite să încorporam un videoclip în orice pagină dorim folosind elementul iframe:

1. În primul rând, accesați Youtube și găsiți un videoclip care vă place.
2. Sub videoclip, veți găsi un buton Trimite/Share - faceți clic pentru a afișa opțiunile de partajare.
3. Selectați butonul Incorporeaza/Embed și veti vedea un cod iframe - copiați acest cod.
4. Introduceți codul în orice pagina HTML și vedeți care este rezultatul.

Eu am ales un film Pixar, codul si rezultatul se pot vedea mai jos:

<iframe width="560" height="315" src="https://www.youtube.com/embed/bX1NLuJrPZg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Iframe in detaliu

A fost ușor și distractiv, nu? Elementele iframe sunt concepute pentru a vă permite să încorporați alte documente web în documentul curent. Acest lucru este excelent pentru încorporarea conținutului terților în site-ul dvs. web - cum ar fi video de la furnizorii de video online, sisteme de comentarii precum Disqus, hărți online de la furnizori de hărți, bannere publicitare etc..

Există câteva probleme serioase de securitate care trebuie luate în considerare atunci cind lucram cu iframe, așa cum vom discuta mai jos, dar acest lucru, nu înseamnă că nu ar trebui să le folosești pe site-urile tale, ci necesită doar cunoștințe și gândire atentă. Să explorăm codul de mai jos cu atentie:

<iframe src="https://www.traffic-engine.com/" width="80%" height="500" frameborder="0" allowfullscreen sandbox>
  <p>
    <a href="https://www.traffic-engine.com/">Link pentru browserele care nu suporta iframe</a>
  </p>
</iframe>

Codul de mai sus, incearca sa incarce pagina web traffic-engine.com. Rezultatul nu este cel asteptat. Practic este afisat doar titlul paginii.

Acest exemplu include elementele de bază necesare pentru a utiliza un iframe:

allowfullscreen

Dacă este setat, iframe poate fi plasat în modul ecran complet folosind API-ul Full Screen.

frameborder

Dacă este setat la 1, browserul va desena un chenar (border), între acest iframe și alte iframe-uri, comportamentul fiind cel implicit. 0 elimină chenarul. Utilizarea acestui lucru nu este recomandată cu adevărat, deoarece același efect poate fi obținut mai bine, folosind border: none; în CSS.

src

Calea care indică adresa URL a documentului care va fi încorporat.

width si height

Aceste atribute specifică lățimea și înălțimea pe care doriți să-l aiba iframe-ul.

continut fallback

În același mod ca și la alte elemente similare, puteți include conținut alternativ, între deschiderea și închiderea etichetelor iframe, care vor apărea dacă browserul nu acceptă iframe. Este puțin probabil să întâlniți un browser care nu acceptă iframe în aceste zile.

sandbox

Acest atribut, care funcționează în browserele moderne, solicită setări de securitate crescute, despre care vom spune mai multe în cele ce urmeaza.

Probleme de securitate

Producătorii de browsere și dezvoltatorii web au învățat din greseli, că iframe, sunt o țintă comună (termen oficial: vector de atac) pentru oamenii răi de pe Web (adesea numiți hackeri, sau mai exact, crackers), pentru a ataca, prin modificarea paginii web sau determinind utilizatorii să facă ceva ce nu doresc să facă, cum ar fi dezvăluirea informațiilor sensibile, precum numele de utilizator și parolele.

Din această cauză, dezvoltatorii de browsere, au dezvoltat diferite mecanisme de securitate si o serie de mai bune practici de luat în considerare - vom aborda unele dintre acestea mai jos.

Asa cum am putut observa mai sus, pagina exemplu-iframe, nu a fost incarcata corespunzator. Daca deschidem instrumentele pentru dezvoltatori cu ajutorul tastei F12 si selectam "Consola", vom intelege de ce pagina nu a fost incarcata.

În Firefox, vi se va spune ca încărcarea a fost refuzată de X-Frame-Options, pentru ca site-ul traffic-engine.com nu permite incadrarea in iframe.

Acest lucru se datoreaza unei setari a serverului, care serveste paginile site-ului, pentru a le împiedica să fie încorporate în iframe.

Acest lucru este normal - nu are sens ca o pagina intreaga apartinind unui site, sa fie incorporata in iframe, decit daca doriti să revendicati pagina ca fiind proprietatea dvs. sau încercați să furați date prin clickjacking, ambele lucruri fiind rele si ilegale.

În plus, dacă toată lumea ar începe să facă asta, toată lățimea de bandă suplimentară, ar începe să-l coste pe proprietarul site-ului foarte mult.

Utilizați iframe numai atunci când este necesar

Uneori, are sens să încorporați conținut de la terți - cum ar fi videoclipuri YouTube și hărți - dar vă puteți salva de o mulțime de dureri de cap, dacă încorporați conținut de la terți, numai atunci când este absolut necesar.

O regulă bună pentru securitatea web este:
„Nu puteți fi niciodată prea precaut. Dacă ați făcut-o voi, verificați de doua ori. Dacă altcineva a făcut-o, presupuneți că este periculos până nu se dovedește contrariul”.

Pe lângă securitate, ar trebui să fiți conștienți și de problemele de proprietate intelectuală. In general conținutul este protejat prin drepturi de autor, offline și online, chiar și conținut la care nu te aștepți. Nu afișați niciodată conținut pe pagina web proprie, cu excepția cazului în care va aparține sau proprietarii v-au dat permisiunea scrisă, fără echivoc. Sancțiunile pentru încălcarea dreptului de autor sunt severe. Din nou, nu poți fi niciodată prea precaut.

Dacă conținutul este licențiat, trebuie să respectați termenii licenței. De exemplu, conținutul de pe site-ul nostru este licențiat în baza CC-BY-SA. Asta înseamnă, ca trebuie să ne creditezi corect atunci când citești conținutul nostru, chiar dacă faci modificări substanțiale.

Folosiți HTTPS

HTTPS este versiunea criptată a HTTP si necesită un certificat de securitate. Ar trebui să vă difuzați site-urile dvs. utilizând HTTPS ori de câte ori este posibil.

HTTPS împiedică accesul la conținutul încorporat în documentul părinte și invers.

Toate companiile de renume care fac conținut disponibil pentru încorporare prin intermediul unui iframe, îl vor pune la dispoziție prin HTTPS - vedeți adresele URL din interiorul iframe, src atunci când încorporați conținut de la Google Maps sau Youtube, de exemplu.

Utilizați întotdeauna atributul sandbox

Dacă vrei să oferi atacatorilor o putere cât mai mică, ar trebui să utilizezi pentru conținutul încorporat, doar permisiunile necesare pentru a-și face treaba. Desigur, acest lucru este valabil și pentru propriul dvs. conținut. Un container pentru cod, care poate fi utilizat în mod corespunzător - sau pentru testare - dar nu poate provoca niciun rău, se numește sandbox.

Conținutul incorporat fara utilizarea sandbox poate face mult prea mult - executa JavaScript, trimite formulare, ferestre pop-up, etc.. În mod implicit, ar trebui să impuneți toate restricțiile disponibile prin utilizarea atributului sandbox fără parametri, așa cum se poate vedea în exemplul anterior.

Sa vedem ce se intimpla daca eliminam setarea Header set X-Frame-Options DENY, de pe site-ul traffic-engine.com si utilizam atributul sandbox, cu toti parametrii - sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms":

Site-ul va fi incarcat in pagina noastra, va fi complet functional si toate script-urile vor fi executate, in interiorul paginii noastre.

Din motive de securitate, am afisat doar o imagine a site-ului incorporat.

Dar, sa vedem ce se intimpla daca incorporam pagina acestui curs in ea insasi, in aceleasi conditii (utilizarea sandbox cu toti parametrii):

Pagina este complet functionala!

Acum sa facem acelasi lucru, dar de data aceasta, sa utilizam atributul sandbox simplu, fara parametri:

Dupa cum puteti observa, este afisat doar textul si nu este executat niciun script.

Dacă este absolut necesar, puteți adăuga permisiunile înapoi una câte una în interiorul sandbox.

Atentie! Daca veti adauga atributele allow-scripts si allow-same-origin, in acelasi timp, conținutul încorporat ar putea ocoli politica de securitate de origine, care oprește site-urile să execute script-uri și să utilizeze JavaScript pentru a transforma sandbox in ceva inutil.

Elementele embed și object

Elementele <embed> și <object> au roluri diferite fata de iframe - aceste elemente sunt instrumente de încorporare cu scop general, pentru încorporarea mai multor tipuri de conținut extern, care includ tehnologii plugin precum Java Applets și Flash, PDF (care pot fi afișate într-un browser cu un plugin PDF) și chiar conținut precum videoclipuri, SVG și imagini.

Cu toate acestea, este puțin probabil să utilizați foarte mult aceste elemente. Aceste elemente nu au mai fost folosite de ani buni, Flash nu mai este foarte popular, din cauza mai multor motive, PDF-urile sunt acum deschise direct de catre browsere, iar imaginile și videoclipurile au elemente mult mai bune și mai ușor de gestionat. Am menționat aceste elemente, pentru cazul în care vă întâlniți cu ele în anumite circumstanțe.

Imaginile SVG - Scalable Vector Graphics

Imaginile realizate prin grafica vectoriala sunt foarte utile în multe circumstanțe - au dimensiuni mici și sunt extrem de scalabile, astfel încât acestea nu pixelează atunci când se măresc până la o dimensiune mare.

Pe web, veți lucra cu două tipuri de imagini - imagini raster și imagini vectoriale:

• Imaginile raster sunt definite folosind o grilă de pixeli - un fișier imagine raster conține informații care arată exact unde urmează să fie plasat fiecare pixel și exact ce culoare ar trebui să fie. Formate raster populare includ Bitmap (.bmp), PNG (.png), JPEG (.jpg) și GIF (.gif.).
• Imaginile vectoriale sunt definite folosind algoritmi - un fișier de imagine vectoriala conține definiții de formă și cale pe care computerul le poate utiliza pentru a calcula, cum ar trebui să arate imaginea, atunci când este redată pe ecran.

Pentru a vă face o idee clara despre diferența dintre cele doua, să ne uităm la un exemplu care arată două imagini aparent identice una lângă alta. Diferența este că cea din stânga este o imagine PNG, iar cea dreapta este o imagine SVG.

Dupa cum se poate vedea imaginea PNG devine pixelată pe măsură ce este mărita, deoarece conține informații despre locul în care ar trebui să fie fiecare pixel (și ce culoare). Când imaginea este marită, fiecare pixel are o dimensiune simplă crescută pentru a umple mai mulți pixeli pe ecran, astfel încât imaginea începe să pară blurată. Cu toate acestea, imaginea vectorială continuă să arate frumos și curat, deoarece indiferent de dimensiunea acesteia, algoritmii sunt folosiți pentru a reda imaginea, valorile fiind pur și simplu scalate pe măsură ce devin mai mari.

Mai mult decât atât, imaginile vectoriale sunt mult mai mici decât echivalentele lor raster, pentru că trebuie doar să incorporeze o mână de algoritmi, decât informații despre fiecare pixel individual din imagine.

Ce este SVG?

SVG este un limbaj bazat pe XML pentru descrierea imaginilor vectoriale. Practic vorbim de marcare, la fel cum marcam elementele in HTML, cu excepția faptului că sunt mai multe elemente diferite pentru definirea formelor care dorim să apara în imagine și efectele pe care dorim să le aplicam acestor forme. SVG este pentru marcarea grafica, nu a conținutului. La cel mai simplu capăt al spectrului, gasim elemente pentru crearea de forme simple, precum <circle> și <rect>. Funcțiile SVG mai avansate includ <feColorMatrix> (transforma culorile folosind o matrice de transformare) <animate> (animeaza părți din imagine) și <mask> (creeaza o mască peste imagine).

Următorul cod este foarte simplu si creează un cerc:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Din exemplul de mai sus, puteți avea impresia că SVG este ușor de codat manual. Da, puteți coda manual un SVG simplu într-un editor de text, dar pentru o imagine complexă, acest lucru începe să devină foarte dificil. Pentru crearea de imagini SVG, este utilizat software de grafică vectorială precum Illustrator.

SVG are câteva avantaje în afară de cele descrise până acum:

• Textul din imaginile vectoriale rămâne accesibil (ceea ce e bine pentru și SEO).
• Fiecare componentă a imaginii, poate fi stilizata cu CSS sau manipulata cu JavaScript.

SVG are si unele dezavantaje:

• SVG se poate complica foarte repede, ceea ce înseamnă că dimensiunile fișierelor pot crește. SVG-urile complexe pot cere timp de procesare semnificativ mai mare în browser.
• SVG poate fi mai greu de creat decât imaginile raster, în funcție de ce tip de imagine încercați să creați.
• SVG nu este acceptat în browserele mai vechi.

Cum adaugam imagini SVG in pagina web?

În această secțiune vom parcurge diferitele moduri în care puteți adăuga grafică vectorială SVG în paginile web.

Incorporarea SVG cu ajutorul elementului img

Pentru a încorpora un SVG printr-un element img, trebuie doar să introduceti calea catre imagine in atributul src. Veți avea nevoie de un atribut înălțime sau lățime (sau ambele dacă SVG-ul dvs. nu are un raport de aspect implicit).

<img src="star.svg" alt="stea" height="100" width="100">

Avantaje:

• Sintaxă rapidă și familiară.
• Imaginea poate fi transformata într-un hyperlink.

Dezavantaje:

• Nu puteți manipula imaginea cu JavaScript.
• Dacă doriți să controlați conținutul SVG cu CSS, trebuie să includeți stiluri CSS inline în codul SVG.
• Nu puteți restiliza imaginea cu pseudoclase CSS (cum ar fi: focus).

Puteți, de asemenea, să deschideți fișierul SVG într-un editor de text, să copiați codul SVG și să-l lipiți în documentul HTML - acest lucru este uneori numit inline SVG. Asigurați-vă că fragmentul de cod SVG începe și se încheie cu etichetele <svg>...</svg> (nu includeți nimic în afara etichetelor). Vedeti mai jos, cum arata codul unei imagini SVG, ceva mai complexa:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle id="dot" cx="60" cy="60" r="60"/>
    <text x="12" y="73" font-family="Verdana" font-size="35" fill="white">HTML</text>
  </g>
</svg>

Iata si rezultatul:

Avantaje:

• Dacă introduceți SVG inline, economisiți o solicitare HTTP și, prin urmare, se reduce timpul de încărcare.
• Puteți atribui clase și id-uri elementelor SVG și le puteți stiliza cu CSS. De fapt, puteți utiliza orice atribut de prezentare SVG ca proprietate CSS.
• SVG inline, este singura abordare care vă permite să utilizați interacțiuni CSS (cum ar fi: focus) și animații CSS direct pe imaginea SVG.
• Puteți transforma SVG într-un hyperlink, înglobându-l într-un element <a>.

Dezavantaje:

• Această metodă este potrivită numai dacă utilizați SVG-ul într-un singur loc. Duplicarea poate mări dimensiunea fișierului HTML.
• Browserul nu poate memora în cache SVG inline, asa cum se intimpla cu alte tipuri de imagini.

🧠 Quiz - HTML5: Multimedia și Tehnologii de Încorporare