WEB dizajn
HTML i CSS
Praktične vježbe, projekti i dodatni izvori za razvoj mrežnih stranica
tijekom nastavne godine.
vježbe i aktivnosti
osnove i izrada sjedišta
oblikovanje i responzivni dizajn
Uvod
Preglednici i pretraživači
Skriptni jezici
Otvori vježbu →
Razlika klijentskog i poslužiteljskog skriptiranja
Sustavi boja
Proces razvoja mrežnog sjedišta
HTML
HTML – osnove
HTML – stilovi, slike i poveznice
HTML – liste i tablice
HTML – obrasci
HTML – meta podaci i putanje
HTML – multimedija
HTML – semantika i raspored sadržaja
HTML – istraživanje i izrada mrežnog sjedišta
HTML – ispitna vježba
Ispitna aktivnost.
HTML – priprema, oblikovanje i izrada osobnog mrežnog sjedišta
Blagdanska aktivnost.
CSS
Siječanj
CSS – povezivanje, vrste i sintaksa
CSS – vrste selektora i njihova primjena
CSS – pozadine i prikaz elemenata
Veljača
CSS – box model, tekst i ikone
CSS – uređivanje poveznica, tablica i listi
CSS – prikaz, pozicioniranje i prozirnost
CSS layout – max-width, overflow, block, align
Ožujak
CSS – pseudoklase i pseudoelementi
CSS – navigacija, slike i galerija
CSS – flex model
CSS – prijelazi
Travanj
CSS – obrasci, brojači i web layout
Otvori vježbu →Projekt 1 – logotip
CSS – responzivni web dizajn
CSS – Media queries
Otvori vježbu →
CSS igra
Projekt 1 – opis
Kriteriji za ocjenjivanje
CSS – animacije
Isprobajte animacije, odaberite jednu i demonstrirajte je
na vlastitoj mrežnoj stranici te je objasnite.
Svibanj – lipanj
CSS – responzivni web okviri
SEO – optimizacija mrežnog sjedišta
SEO_1 →
SEO preporukeRad na projektnom zadatku.
Pregled projekata
Pregled projekata / zaključivanje ocjena
Zaključivanje ocjena
Projekti, radionice i pitanja
LV13a · Korisnički zahtjevi kod dizajna mrežnih stranica
Radionica. Učenici se podijele u grupe od dva do tri učenika.
Jedna grupa su naručitelji, a druga izvođači.
Rezultat rada u obliku nacrta i opisa zahtjeva i projekta potrebno
je objaviti na mrežnim stranicama najmanje jednog učenika iz grupe
uz navođenje svih članova.
Mogu se razmatrati svrha mrežnog sjedišta, izgled, sadržaji,
sigurnost, brzina učitavanja, interakcije s korisnicima,
baze podataka i navigacija.
SEO · pitanja za ponavljanje
- Što je i što ima za cilj optimizacija mrežnog sjedišta za tražilice?
- Kako možemo podijeliti proces optimizacije?
- Koji je osnovni, a koji sporedni cilj optimizacije?
- Što predstavlja konverzija?
- Koje vrste rezultata tražilice prezentiraju korisniku?
- Zašto je važna prva stranica rezultata pretraživanja?
- Kako tražilica pronalazi mrežno sjedište?
- Koje vrste sadržaja možemo pretraživati tražilicom?
- Koji parametri utječu na rezultate tražilice?
- Koje su osnovne kategorije upita?
- Što je SERP?
- Koje su faze onsite SEO procesa?
- Čemu služe persone?
- Kako struktura URL-a utječe na optimizaciju?
- Kako koristiti oznaku title?
- Čemu služi Yoast SEO?
Ovdje po potrebi vrati i preostala pitanja iz stare stranice.
Dodatna pitanja o preglednicima i pretraživanju
- Skicirajte i objasnite osnovne komponente preglednika.
- Objasnite osnovni tijek renderiranja stranice.
- Objasnite parsing kod prikaza web sadržaja.
- Ukratko objasnite Googleov algoritam pretraživanja.
- Ukratko objasnite Bingov algoritam pretraživanja.
- Ukratko objasnite DuckDuckGo algoritam pretraživanja.
- Ukratko objasnite YouTube algoritam pretraživanja.
Projekt 1 · mrežno sjedište zamišljene tvrtke
Napravite mrežno sjedište zamišljene tvrtke.
- izrađuje se u HTML i CSS tehnologiji;
- koristi se responzivni dizajn, preporučeno mobile first;
- naslovna stranica nosi naziv
index.html; - koristi se jedna vanjska CSS datoteka;
- datoteke su uredno raspoređene u mape;
- koristi se ranije izrađen logotip;
- grafički sadržaji moraju biti legalno korišteni;
- sve stranice trebaju biti vizualno usklađene;
- zaglavlje, podnožje i navigacija trebaju biti dosljedni;
- sjedište treba sadržavati najmanje četiri stranice;
- potrebni su terminski plan, dokumentacija i SEO informacije.