Ovaj element ima koristi od druge tehnologije
HTML5 uključuje uzbudljiv element pod nazivom CANVAS. Ima mnogo upotreba, ali da bi ga koristili potrebno je naučiti neki JavaScript, HTML, a ponekad i CSS.
Ovo čini element CANVAS malo zastrašujućim za mnoge dizajnere, a zapravo će većina verovatno ignorisati element dok ne postoje pouzdani alati za kreiranje CANVAS animacija i igara bez poznavanja JavaScript-a.
Za koji HTML5 platno se koristi
HTML5 CANVAS element se može koristiti za mnoge stvari koje ste ranije imali, morali ste da koristite ugrađenu aplikaciju kao što je Flash za generisanje:
- dinamička grafika
- online i offline igrice
- animacije
- interaktivni video i audio
Zapravo, glavni razlog zašto ljudi koriste CANVAS element je to što je jednostavno pretvoriti čistu web stranicu u dinamičnu web aplikaciju, a zatim pretvoriti tu aplikaciju u mobilnu aplikaciju za korišćenje na pametnim telefonima i tabletima.
Ako imamo Flash, zašto nam je potreban platno?
Prema HTML5 specifikaciji, CANVAS element je:
"... platna zasnovana na rezoluciji, koja se može koristiti za prikazivanje grafika, grafike igara, umjetnosti ili drugih vizuelnih slika na samom mjeri."Element CANVAS vam omogućava da u realnom vremenu nacrtate grafikone, grafiku, igre, umjetnost i druge vizuelne prikaze na web stranici.
Možda mislite da to već možemo uraditi sa Flash-om, ali postoje dve velike razlike između CANVAS-a i Flash-a:
- Element CANVAS je ugrađen u HTML. Skripte koje se nanose na njega su ili u HTML-u ili u spoljnoj datoteci. To znači da je element CANVAS dio modela objekta dokumenta ili DOM.
- Flash je ugrađena vanjska datoteka. Koristi element EMBED ili OBJECT za prikaz i ne može direktno da interaguje sa ostalim HTML elementima. Pošto je element CANVAS dio DOM-a, on može da interaguje sa DOM na više načina.
- Na primer, možete kreirati animaciju koja se menja kada se interaktuje neki drugi deo stranice - kao što je ispunjen element formulara. Sa Flash-om, najviše što biste mogli učiniti je pokretanje Flash-a ili animacije, ali sa CANVAS možete kreirati mnogo različitih efekata, čak i dodati tekst iz polja formi u animaciju.
- Element CANVAS podržava web pretraživači. Da bi korisnici mogli koristiti Flash, njihov pretraživač mora imati instaliran dodatak. Ovo je često zabrinutost za većinu ljudi usled zastarele instalacije Flash-a ili činjenice da ih njihov operativni sistem jednostavno ne podržava.
- Bilo je to da svaki pretraživač ima instaliran dodatak, ali to više nije slučaj, a mnogi čak i uklanjaju dodatak zbog poteškoća. Pored toga, on nije dostupan ni na popularnoj iOS platformi.
Platno je korisno čak i ako nikada niste planirali da koristite Flash
Jedan od glavnih razloga zašto je CANVAS element tako zbunjujuće je to što su mnogi dizajneri navikli na potpuno statičku mrežu. Slike mogu biti animirane, ali to se radi sa GIF-om, i naravno možete ugrađivati video na stranice, ali opet, to je statični video koji jednostavno sedi na stranici i možda počinje ili zaustavlja zbog interakcije, ali to je sve.
Element CANVAS vam omogućava da dodate mnogo više interaktivnosti na svoje web stranice, jer sada možete dinamički kontrolisati grafiku, slike i tekst sa skriptnim jezikom. Element CANVAS pomaže vam da slike, slike, grafikone i grafikone pretvarate u animirane elemente.
Kada razmisliti o upotrebi platna
Vaša publika bi trebalo da bude vaša prva pažnja prilikom odlučivanja da li da koristite CANVAS element.
Ako vaša publika prvenstveno koristi Windows XP i IE 6, 7 ili 8, onda kreiranje dinamičke funkcije platna će biti besmisleno, jer ti pretraživači to ne podržavaju.
Ako gradite aplikaciju koja će se koristiti samo na Windows mašinama, onda je Flash možda najbolja opklada. Aplikacija koja se koristi na Windows i Mac računarima može imati koristi od Silverlight aplikacije.
Međutim, ako vašu aplikaciju treba gledati na mobilnim uređajima (Android i iOS), kao i savremenim računarima (ažuriranim na najnovije verzije pretraživača), onda je upotreba CANVAS elementa dobar izbor.
Imajte na umu da pomoću ovog elementa možete omogućiti opcije kao što su statične slike za starije pregledače koji ga ne podržavaju.
Međutim, nije preporučljivo koristiti HTML5 platno za sve. Nikada ga ne smijete koristiti za stvari poput vašeg logotipa, naslova ili navigacije (iako je korištenje za animiranje dela bilo koje od ovih bilo u redu).
Prema specifikaciji, trebalo bi da koristite elemente koji su najpogodniji za ono što pokušavate da izgradite. Znači korišćenje elementa HEADER zajedno sa slikama i tekstom je poželjnije za element CANVAS za vaš zaglavlje i logo.
Takođe, ako kreirate web stranicu ili aplikaciju koja je namijenjena za korištenje na neinteraktivan medij kao što je štampanje, trebali biste biti svjesni da element CANVAS koji je dinamički ažuriran možda neće štampati kako očekujete. Možda ćete dobiti otisak trenutnog sadržaja ili rezervnog sadržaja.