Druga zadaća - Zadatak
Napravite web-stranicu u skladu s modernim web-standardima (HTML5 + CSS3). To može biti osobna stranica ili stranica posvećena nečemu od osobnog interesa. Stranica može (ali ne mora) imati i eventualne dinamičke efekte u jeziku JavaScript.
Nužni uvjeti za predaju druge domaće zadaće (drugim riječima, kršenje bar jednog od tih uvjeta rezultira dobivanjem 0 bodova na ovoj zadaći):- Čitljivost. Stranica mora biti čitljiva u bar jednom od sljedeća dva preglednika: Google Chrome ili Mozilla Firefox (verzija instalirana na računalima u praktikumima).
- Validacija. Stranica se mora validirati u validatoru validator.w3.org za HTML5 i validatoru jigsaw.w3.org/css-validator za CSS, bez ikakvih grešaka, upozorenja i sličnog.
- Originalnost - preciznije, ne-plagiranje. Ne smijete samo zalijepiti tuđi kod i pobacati par elemenata unutra! Također, nije dozvoljeno samo prekopirati neki dugački tekst s Wikipedie ili nekog drugog izvora i ukrasiti ga CSS-om (primjerice, ako na predaji na zahtjev asistenta zalijepite dio teksta u Google tražilicu da ne ispadne stranica s istim tekstom kao na Vašoj stranici, samo drugačije oblikovanim).
- Odvajanje sadržaja od prezentacije. Svi isključivo vizualni detalji moraju biti u posebnoj stilskoj kartici.
-
Logična organizacija sadržaja.
Ispravno korištenje semantički orijentiranih elemenata: header, footer, article, section i sličnih za
globalnu strukturu web-stranice, kao i svih ostalih (
address,h1-h2,p, ...) za njihovu namjenu. -
Dovoljna kompleksnost izvornog dokumenta.
Stranica treba koristiti minimalno 10 različitih elemenata, odnosno biti "dovoljno komplicirana".
Pri tome nemojte forsirati upotrebu elemenata tek toliko da ispunite ovaj zahtjev
(npr. usred teksta staviti
spani/ili obojati jednu riječ u zeleno); vidi i prethodnu točku. - Fluidnost. Ukratko, vizualno prezentirana stranica se ne smije ponašati kao PDF, ili još gore, kao jedna velika slika. HTML se gleda na raznim medijima u raznim kontekstima, i treba se tome prilagoditi. Ne mora izgledati sjajno u malim prozorčićima ili s velikim fontovima, ali mora biti čitljivo. Pokušajte izbjeći horizontalni scrollbar. Stranica treba imati ispravan prikaz, bez horizontalnog scrollbara i potrebe za "zoomanjem" na mobilnom uređaju. Uputa: osim mobitela, u Firefoxu možete koristiti Tools->Web Developer->Responsive Design View i isprobati kako stranica izgleda na različitim rezolucijama. Pogledajte i ovaj link.
- Vizualni dojam. Nismo grafički dizajneri, ali ako je glavni tekst žut na sivoj podlozi, ili susjedni elementi nemaju usklađene margine, ili se tekst negdje "prelijeva" preko drugog teksta ili slike, ili imate horizontalne scrollbarove, ili je osnovna visina fonta 3 piksela i sl, jasno je da tada vizualni dojam nije dobar. Koristite svoj "osjećaj za lijepo" :)