Embed Size (px)
Citation preview
CARNetova korisnička konferencija – CUC 2014
Implementacija responzivne Web-aplikacije u jednoj
HTML-datoteci
Krunoslav Peter
Nastavni zavod za javno zdravstvo „Dr. Andrija Štampar“
Sažetak
Responzivna Web-aplikacija u jednoj HTML-datoteci uključuje HTML-kôd koji
definira elemente sučelja, CSS-kôd stila i responzivnosti te JavaScript-kôd koji opisuje logiku
interakcije s elementima Web-sučelja. Članak donosi jednostavni predložak takve aplikacije.
Prema načelu nenametljivoga programiranja, izvorni kôd JavaScripta za obradu događaja
povezanoga s elementom postavlja se u zaglavlje HTML-datoteke i referira na identifikator
toga elementa. Novi element moguće je dodati u tri jednostavna koraka.
Ključne riječi
Web-aplikacija, HTML, CSS, JavaScript, responzivnost, događaj, programiranje
Uvod
Web je medij koji je pogodan za stvaranje i dijeljenje multimedijalnih sadržaja [1, str.
37], a isto tako i interaktivnih sadržaja u formi Web-aplikacija1 namijenjenih edukaciji,
razonodi ili poslovanju. Za razvoj aplikacija koje ne uključuju funkcionalnosti pohrane ili
1 U novije vrijeme u uporabi je termin mrežna aplikacija/stranica. Izraz Web-stranica (web-stranica)
navodi Pravopisni rječnik Instituta za hrvatski jezik i jezikoslovlje koji je dostupan na Web-adresi
http://pravopis.hr/rjecnik/ te Hrvatski jezični portal s nizom povezanih izraza na Web-adresi: http://hjp.novi-
liber.hr/index.php?show=search_by_id&id=f15mXRR6&keyword=web. U praksi je također u primjeni izraz
internetska aplikacija/stranica.
2 Razdvajanje područja (engl. separation of concerns).
čitanja podataka u bazi podataka na poslužitelju pogodne su standardne Web-tehnologije
(HTML5, CSS3, JavaScript); one su korisne i za rapidnu implementaciju prototipova sučelja.
U članku će biti predstavljena implementacija funkcionalne Web-aplikacije u jednoj
HTML-datoteci prema načelima razdvajanja područja2 [2, str. 3] i nenametljivoga
programiranja3 u jeziku JavaScript [2, str. 58] i to klasičnim pristupom – uporabom
tekstualnog editora. Prema prvome načelu, strukturiranje sučelja Web-aplikacije primjenom
oznaka jezika HTML odvaja se od definiranja postavaka njezine prezentacije u jeziku stila
CSS i ponašanja sa skriptama u programskom jeziku JavaScript [2, str. 5] [3, str. 3].
U skladu s načelom nenametljivoga programiranja, izvorni kôd JavaScripta izdvaja se
iz definicije sučelja Web-aplikacije, to jest sadržaja Web-stranice4 unutar tijela HTML-
dokumenta omeđenoga oznakama <body> i </body> [2, str. 10] te se referira na vrijednosti
atributa id elemenata sučelja.
Članak donosi jednostavni predložak Web-aplikacije s osobinom responzivnosti5,
implementirane uporabom aktualnih Web-tehnologija HTML5, CSS3 i JavaScript [3, str. 1]
[1, str. 233], prema spomenutim načelima razdvajanja područja i nenametljivoga pisanja
izvornoga koda JavaScripta, za one koji implementaciji pristupaju pisanjem koda u editoru [3,
str. 5]. Taj predložak pogodan je i za edukaciju izrade jednostavnih Web-aplikacija, jer
pregledno pokazuje njihovu strukturu. Predložena Web-aplikacija pogodna je za izvršavanje
sa svakim preglednikom koji podržava programski jezik JavaScript te s preglednicima
mobilnih uređaja [3, str. 2]. Takva aplikacija može biti dostupna na Webu ili se distribuirati
na memorijskim medijima ili e-poštom. Budući da je implementirana u jednoj datoteci, za
njezino izvršavanje dovoljan je preglednik (bez povezanosti s Internetom). Alternative
ovakvom prijedlogu Web-aplikacije obilježava kompleksnost strukture i načina distribuiranja.
U članku su objašnjene postavke responzivnosti Web-aplikacije, definiranje njezina
sučelja te je podrobno objašnjen izvorni kôd u JavaScriptu za postupanje prema događajima
koji nastaju u interakciji korisnika s elementima sučelja. Opisan je postupak dodavanja
elementa sučelju takve Web-aplikacije koji obuhvaća tri jednostavna koraka, ako postoji
definicija stila za takvu vrstu elementa.
2 Razdvajanje područja (engl. separation of concerns).
3 Nenametljivo programiranje (engl. unobtrusive programming).
4 U literaturi je naveden naslov s primjerom poziva funkcije u JavaScript-kodu unutar tijela HTML-
dokumenta [3, str. 10].
5 Responzivni Web-dizajn (engl. responsive Web design). U praksi je također u uporabi pridjev
„prilagodljivi“.
Predložak izvornoga koda Web-aplikacije u jednoj HTML-datoteci
Izvorni kôd 1 donosi predložak izvornoga koda HTML-datoteke Web-aplikacije: on
pregledno pokazuje njezina četiri dijela: meta-podatke, postavke stila, izvorni kôd za obradu
događaja i definicije elemenata sučelja. U zaglavlje osnovnoga HTML5-dokumenta [4, str.
26] [2, str. 14], između oznaka <head> i </head>, postavljeni su meta-podaci (naslov,
postavka responzivnosti i dr.) te su umetnuti CSS-kôd (omeđen je oznakama <style> i
</style>) i JavaScript-kôd (između oznaka <script> i </script>). Definicije elemenata
sučelja nalaze se u tijelu HTML-dokumenta (unutar oznaka <body> i </body>)
<!DOCTYPE HTML>
<html>
<head>
<-- meta-podaci -->
<title>Predlozak Web-aplikacije u jednoj HTML-datoteci</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<-- postavke stila -->
<style type="text/css">
</style>
<-- obrada događaja -->
<script type="text/javascript">
function obradaDogadjaja() {
}
window.onload = obradaDogadjaja;
</script>
</head>
<body>
<-- definicije elemenata sučelja -->
</body>
</html>
Izvorni kôd 1: Predložak izvornoga koda Web-aplikacije u jednoj HTML-datoteci
Responzivni dizajn Web-sučelja aplikacije
Prikaz responzivne Web-stranice prilagodljiv je dimenzijama zaslona mobilnoga
uređaja na kojemu se izvršava Web-preglednik. Ponašanje preglednika u prikazivanju Web-
stranice definirano je s meta-oznakom naziva viewport u zaglavlju HTML-dokumenta [5],
[6]; ona definira fragment stranice koji je prikazan na prozoru preglednika, to jest vidno polje
(engl. viewport). Izvadak iz izvornoga koda Izvorni kôd 2 prikazuje primjer takve oznake s
potrebnim elementima:
<meta name="viewport" content="width=device-width, initial-scale=1">
Izvorni kôd 2: Definiranje vidnoga polja širine zaslona mobilnoga uređaja
Atributu content pridružen je znakovni niz koji uključuje dvije postavke:
width=device-width, initial-scale=1; prva postavka upućuje Web-preglednik na
prilagodbu sadržaja Web-stranice širini svoga prozora, odnosno zaslona mobilnoga uređaja, a
druga na početno uvećanje [6]. Postavljanjem vrijednosti inicijalnog uvećanja na 1 osigurava
se početno uvećanje [5].
Značajke stila elemenata Web-sučelja, njihove dimenzije i raspored za pojedini medij
prikaza (zasloni mobilnoga uređaja, tableta i dr.) definiraju se unutar media-upita u
postavkama stila [5] koje su u predlošku izvornoga koda aplikacije u jednoj HTML-datoteci
postavljene unutar oznaka <style> i </style>. Izvorni kôd 3 prikazuje media-upit s
uvjetom za zaslon mobilnoga uređaja širine 320 točaka6:
@media screen and (max-width: 320px) {
/* postavke stila */
}
Izvorni kôd 3: media-upit za zaslon širine 320 točaka
Elementi sučelja aplikacije mogu se u tijelu HTML-dokumenta postaviti unutar
pravokutnoga područja definiranoga uporabom oznaka <div> i </div> [4, str. 31] [7];
postavkom njihove širine width: 100% postiže se prilagodba širini medija prikaza [5]. Osim
6 Točka (engl. pixel, kratica px u CSS-u).
prilagodbe dimenzija elemenata Web-sučelja, moguća je i promjena redoslijeda elemenata ili
njihovo izostavljanje (ako nisu presudni za funkcionalnost Web-aplikacije).
Definiranje Web-sučelja
Web-aplikacija u zasebnoj HTML-datoteci može se promatrati kao Web-stranica s
ugrađenom programskom logikom [3, str. 1]; sadržaj te stranice, to jest Web-sučelja,
uključuje elemente poput teksta, slika, poveznica, upisnih polja, gumba i ostalih elemenata. U
kontekstu sučelja aplikacije u jednoj HTML-datoteci elementi su svrstani u dvije skupine.
Prva je skupina dinamičkih elemenata; u interakciji korisnika s njima nastaju događaji.
Primjer dinamičkoga elementa jest gumb, a događaj u njegovoj primjeni – klik mišem [3, str.
10] ili pritisak na dodirnom zaslonu na gumb sučelja; takav događaj ima implementiranu
programsku logiku u skriptama programskoga jezika JavaScript, u zaglavlju HTML-
dokumenta. U vezi sa statičkim elementima sučelja, kakvi mogu biti tekst, slika ili poveznica,
ne odvijaju se događaji za koje je definirana logika u programskom kodu.
Prema načelu nenametljivoga programiranja, koje je spomenuto u uvodu članka,
dinamičkim elementima Web-sučelja dodjeljuju se identifikatori – vrijednosti atributa id [3,
str. 7] – da bi se na njih moglo referirati u programskom kodu za obradu događaja. Nekim je
elementima pridružen identifikator radi definicije obilježja njihova jedinstvena stila, npr.
pravokutnim područjima koja se definiraju pomoću HTML-oznaka <div> i </div> [4, str.
31] [7]. Izvorni kôd 4 opisuje Web-sučelje koje uključuje tekstualnu oznaku (odlomak
definiran oznakama <p> i </p>) i gumb (oznaka <input type="button">); svaki element
ima svoj identifikator: oznakaSlucBroj i gumbSlucBroj. Ti elementi postavljeni su
unutar forme (<form> i </form>), a forma je element područja podrSucelje. Forma nema
svoj identifikator, jer se u vezi s njom ne obrađuju događaji; ona je statički element.
<div id="podrSucelje">
<form action=".">
<p id="oznakaSlucBroj">_</p>
<p><input type="button" value="#" id="gumbSlucBroj"></p>
</form>
</div>
Izvorni kôd 4: Definicija područja, forme, tekstualne oznake i gumba
Responzivnost ovoga jednostavnog Web-sučelja u pregledniku mobilnog uređaja sa
zaslonom širine 320 točaka ostvariva je smanjenjem veličine slova te postavkom 100% širine
pravokutnoga područja podrSucelje u odnosu na širinu zaslona u okviru media-upita u
Izvornom kodu 5:
@media screen and (max-width: 320px) {
body {
font-size: 2em;
}
#podrSucelje {
width: 100%;
}
}
Izvorni kôd 5: media-upit za zaslon širine 320 točaka
Obrada događaja
Za definiciju obrade događaja u vezi s nekim elementom Web-sučelja potreban je
nalog u programskom jeziku JavaScript koji naznačuje taj objekt u modelu objekata
dokumenta7, vrstu događaja i izvorni kôd za obradu događaja [7]; u ovom dijelu članka riječ
je pristupu obradi događaja u Web-preglednicima pod nazivom „postupanje u vezi s
događajem“ (engl. event handling) [8]. U predlošku izvornoga koda aplikacije u jednoj
HTML-datoteci (Izvorni kôd 1), unutar oznaka <script> i </script>, postavljen je nalog
window.onload = obradaDogadjaja; taj nalog definira događaj učitavanja HTML-
dokumenta (događaj onload) u prozor preglednika (objekt8 window) i poziv
9 funkcije
7 Model objekata dokumenta (engl. Document Object Model – DOM) predstavlja interpretaciju objekata
strukture HTML-dokumenta od strane preglednika [2, str. 62] [3, str. 10] [7].
8 JavaScript je objektni programski jezik [2, str. 56], a u slučaju ovoga naloga radi se o referenci na
objekt DOM-a.
9 U slučaju naloga za obradu događaja, operator jednakosti događaju (na lijevoj strani) pridružuje naziv
funkcije za njegovu obradu (na desnoj strani). U drugom slučaju, obilježju (engl. property) na lijevoj strani
pridružena je vrijednost (podatak) na desnoj strani [8].
obradaDogadjaja(). Unutar definicije te funkcije umetnut će se nalozi za obradu događaja
u međudjelovanju korisnika s ostalim elementima Web-sučelja10
. Prema tome, preglednik
izvorni kôd za obradu događaja izvršava nakon učitavanja Web-stranice u svoj prozor. Tako
se osigurava učitavanje tijela stranice s njezinim elementima prije nego što se izvrši kôd
JavaScripta koji se referencira na njih.
Nadovezujući se na definiciju Web-sučelja s tekstualnom oznakom i gumbom u
Izvornom kodu 4, predstavljeno je u Izvornom kodu 6 jednostavno programsko rješenje za
generiranje slučajnih brojeva u rasponu od 0 do 9: nakon pritiska ili klika na gumb „#“
prikazat će se generirani slučajni broj na mjestu tekstualne oznake „_“, a isto tako i nakon
svakoga sljedećeg pritiska na gumb prijepisom prošloga slučajnog broja:
<script type="text/javascript">
function genSlucBroj() {
var iSlucBroj = Math.round(Math.random() * 9);
document.getElementById('oznakaSlucBroj').innerHTML = iSlucBroj;
}
function obradaDogadjaja() {
document.getElementById('gumbSlucBroj').onclick = genSlucBroj;
}
window.onload = obradaDogadjaja;
</script>
Izvorni kôd 6: Skripta za generiranje slučajnih brojeva u rasponu od 0 do 9
Referenciranje na gumb s identifikatorom gumbSlucBroj kao na element DOM-a
izvedeno je uz pomoć metode getElementById() objekta document koji predstavlja Web-
stranicu [2, str. 67]; u trenutku kada korisnik izvede klik na gumb Web-sučelja ili ga pritisne
prstom na dodirnom zaslonu – to je događaj onclick [8] – izvršit će se poziv funkcije
genSlucBroj().
10
Prozor preglednika u koji je učitana stranica također je element Web-sučelja.
U tijelo funkcije genSlucBroj() postavljena su dva JavaScript-naloga: (1.)
definicija11
lokalne varijable iSlucBroj čija je zadana vrijednost slučajni broj u rasponu od
0 do 9 koji je generiran izvršenjem izraza Math.round(Math.random() * 9) i (2.) nalog
za promjenu sadržaja tekstualne oznake Web-sučelja s identifikatorom oznakaSlucBroj.
Generiranje slučajnoga broja u rasponu brojeva od 0 do 1 izvedeno je uz pomoć
metode random() objekta Math [9]; generirani slučajni broj množi se s brojem 9 i
zaokružuje primjenom metode round() koja također pripada objektu Math.
U drugom nalogu funkcije genSlucBroj() postavljena je vrijednost varijable
iSlucBroj u odlomak s identifikatorom oznakaSlucBroj (u kojemu je inicijalno znak
„_“). Referenca na spomenuti odlomak ponovno je ostvarena uz pomoć metode
getElementById(), a njegovu svojstvu innerHTML [3, str. 10] pridružen je sadržaj
varijable iSlucBroj.
U Prilogu 1 ovoga članka predstavljen je izvorni kôd Web-aplikacije za generiranje
slučajnih brojeva iz kojega potječu navedeni izvaci izvornoga koda.
Dodavanje elementa Web-sučelja i njegove programske logike
Dodavanje novog elementa Web-sučelju, s njim i nove funkcionalnosti aplikacije,
izvodi se u tri jednostavna koraka:
1. definicija elementa sučelja i određivanje njegovog identifikatora;
2. umetanje definicije događaja u vezi s novim elementom u tijelo funkcije
obradaDogadjaja() i imenovanje funkcije s kodom za obradu događaja;
3. pisanje izvornoga koda za obradu događaja u tijelu imenovane funkcije.
Dakle, produktivnost u razvoju Web-aplikacija prema pristupu opisanome u ovom
članku temelji se na danom predlošku i metodi za dodavanje elemenata sučelja.
Iz takve aplikacije može se izdvojiti element Web-sučelja s pripadajućim izvornim
kodom (definicija događaja i funkcija za obradu toga događaja) i, eventualno, definicijom
stila te postaviti u drugu aplikaciju temeljenu na predlošku iz ovoga članka. Također se mogu
izdvojiti postavke stila u zasebnu datoteku, a u zaglavlju HTML-datoteke postavi se tada
oznaka <link> s referencom na tu datoteku [3, str. 8]; isto tako i izvorni kôd JavaScripta pa
se pridruži naziv datoteke s kodom atributu src unutar oznake <script> [2, str. 10].
11
Deklaracija lokalne varijable izvodi se primjenom ključne riječi var; deklariranoj varijabli u istom
nalogu moguće je pridružiti vrijednost uz pomoć operatora pridruživanja „=“ [2, str. 20].
Predložak Web-aplikacije u jednoj HTML-datoteci nadopunjen s opisanim postupkom
dodavanja elementa sučelja pogodan je za rapidni razvoj prototipova, a standardne tehnologije
HTML, CSS i JavaScript sasvim su uporabljive za njihovu implementaciju.
Aplikaciju temeljenu na predstavljenom predlošku moguće je nadograditi
bibliotekama u JavaScriptu poput Prototype i jQuery koje donose funkciju $() kao zamjenu
za metodu document.getElementById() i dodatne funkcionalnosti [2, str. 99].
Pristup Web-aplikaciji ostvarenoj u jednoj HTML-datoteci
Web-aplikacija s izvornim kodom u jednoj HTML-datoteci može biti dostupna na
Webu ili na lokalnom memorijskom mediju računala ili mobilnog aparata [3, str. 5]. Web-
aplikaciji na Webu moguće je pristupiti s preglednikom kao i svakoj drugoj stranici
referenciranjem na njezinu Web-adresu [1, str. 36].
Dva su načina za izvršenje Web-aplikacije pohranjene u lokalnoj memoriji računala ili
mobilnog uređaja. Jednostavniji način svodi se na primjenu upravitelja datotekama,
izvođenjem dvostrukoga klika ili pritiska na sličicu HTML-datoteke aplikacije na radnoj
površini ili u otvorenoj mapi. Drugi je način da se datoteka otvori primjenom Web-
preglednika i to dijalogom za otvaranje ili specificiranjem prefiksa file:/// te putanje i
naziva datoteke Web-aplikacije u polju za upis Web-adrese.
Web-aplikacija može se distribuirati kao djelo u javnom vlasništvu (engl. public
domain), prema licenci Creative Commons (CC) ili prema aktima o zaštiti autorskih prava.
Pregled tehnologija, područja i referiranja u Web-aplikaciji
Tablica 1 prikazuje tehnologije i područja spomenuta u uvodu članka te pregled
identifikatora i referenci u responzivnoj aplikaciji u jednoj HTML-datoteci (Prilog 1):
Tehnologija Područje Identifikator/referenca
HTML struktura id="identifikator"
CSS prezentacija #identifikator
JavaScript ponašanje document.getElementById('identifikator')
Tablica 1: Pregled tehnologija, područja i referiranja u predlošku aplikacije
Zaključak
Predložak za implementaciju responzivne Web-aplikacije u jednoj HTML-datoteci
može poslužiti u svrhu rapidnoga razvoja jednostavne aplikacije ili prototipa sučelja.
Primjenjiv je u edukaciji izrade Web-aplikacije uporabom tekstualnog editora, jer pregledno
prikazuje njezine dijelove i omogućuje jednostavnu nadopunu koda. Postupak implementacije
nove funkcionalnosti – dodavanje novog elementa sučelja – svodi se na tri koraka: dodavanje
elementa s identifikatorom, specificiranje događaja u interakciji s njim i pisanje izvornoga
koda za obradu događaja. Dodavanjem media-upita u postavke stila, Web-sučelje biva
pripremljeno za prilagodbu dimenzijama zaslona pojedinog uređaja ili računala.
Razdvajanjem definicija elemenata sučelja, postavaka njihove prezentacije i izvornoga koda
programske logike napisanoga prema načelu nenametljivoga programiranja u JavaScriptu, u
proces razvoja uvodi se red, transparentnost i mogućnost odvojenoga rješavanja zadataka u
nabrojanim područjima te se pojednostavljuje nadogradnja i održavanje Web-aplikacije.
Popis literature
1. Berners-Lee, Tim; Fischetti, Mark. Weaving the Web: The Original Design and Ultimate
Destiny of the World Wide Web, by Its Inventor. New York: Harper Collins, 2000.
2. Yank, K.; Adams, C. Simply JavaScript. Collingwood: SitePoint, 2007.
3. Stark, J. Building iPhone Apps with HTML, CSS, and JavaScript. Sebastopol: O’Reilly
Media, 2010.
4. Nixon, R. Robin Nixon's HTML5 Crash Course. Kent: Nixon Publishing, 2011.
5. Underwood, P. Understanding the Viewport Meta Tag. Bristol: Paulund [citirano 22. 4.
2014.]. Dostupno na <http://www.paulund.co.uk/understanding-the-viewport-meta-tag>
6. Usobiaga, J. Stop using the viewport meta tag (until you know how to use it). Barcelona:
HTMLBOY [citirano 22. 4. 2014.]. Dostupno na <http://blog.javierusobiaga.com/stop-
using-the-viewport-tag-until-you-know-ho>
7. Mavrody, S. Sergey's HTML5 & CSS3 Quick Reference, eBook, 2nd Edition. Belisso
Corporation, 2012.
8. Chapman, S. Unobtrusive Events. New York: About.com [citirano 7. 5. 2014.]. Dostupno
na: <http://javascript.about.com/od/learnmodernjavascript/a/tutorial02.htm>
9. JavaScript Maths. Refsnes Data [citirano 12. 8. 2014.]. Dostupno na:
<http://www.w3schools.com/js/js_math.asp>
Prilog 1: Responzivna Web-aplikacija za generiranje slučajnoga
broja u rasponu od 0 do 9
Prilog 1 ovoga članka donosi izvorni kôd responzivne Web-aplikacije za generiranje
slučajnoga broja u rasponu od 0 do 9 (Izvorni kôd 7), a čiji su izvaci navedeni u poglavljima
članka.
<!DOCTYPE HTML>
<html>
<head>
<title>Slucajni broj</title>
<meta name="author" content="KP.">
<meta name="generator" content="the Vim editor">
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="slucajni broj, random number, CUC 2014">
<meta name="description" content="Responzivna Web-aplikacija u jednoj
HTML-datoteci - generator slucajnoga broja u rasponu od 0 do 9.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: DimGray;
font-size: 3em;
line-height: 1.5em;
font-family: Courier, monospace;
text-align: center;
}
#podrSucelje {
margin: 0 auto;
}
input {
color: Red;
background-color: transparent;
font: inherit;
width: 1.5em;
border: thin solid LightGray;
}
@media screen and (max-width: 320px) {
body {
font-size: 2em;
}
#podrSucelje {
width: 100%;
}
}
</style>
<script type="text/javascript">
function genSlucBroj() {
var iSlucBroj = Math.round(Math.random() * 9);
document.getElementById('oznakaSlucBroj').innerHTML = iSlucBroj;
}
function obradaDogadjaja() {
document.getElementById('gumbSlucBroj').onclick = genSlucBroj;
}
window.onload = obradaDogadjaja;
</script>
</head>
<body>
<div id="podrSucelje">
<form action=".">
<p> </p>
<p id="oznakaSlucBroj">_</p>
<p> </p>
<p><input type="button" value="#" id="gumbSlucBroj"></p>
<p> </p>
</form>
</div>
</body>
</html>
Izvorni kôd 7: Responzivna Web-aplikacija za generiranje slučajnih brojeva u rasponu od 0 do 9
HTML5-kôd aplikacije provjeren je primjenom alata W3C Markup Validation Service
dostupnim na Web-adresi http://validator.w3.org/. CSS-kôd udovoljava standardu
CSS3, što je provjereno s alatom W3C CSS Validation Service dostupnim na Web-adresi
http://jigsaw.w3.org/css-validator/.
Umjesto vrijednosti "text/javascript" atributa type oznake <script> može se
u HTML5 upotrijebiti vrijednost "text/application"; prethodna vrijednost zadržana je
radi kompatibilnosti sa starijim preglednicima [7].
