Materijali za nastavu iz predmeta Oblikovanje mrežnih stranica

Uvod

U uvodnom dijelu obrađuje se povijest i razvoj world wide weba, utjecaj weba na društvene promjene i osnovna pojmovna određenja.

Tematske cjeline

  • CERN, 1989. godina
  • Tim Berners-Lee
  • Osnovne tehnologije - temelj današnjeg weba
  • Širenje izvan CERNA
  • Deklaracija o stavljanju weba u domenu javnog dobra
  • ISP
  • Web browser Mosaic
  • Prva međunarodna WWW konferencija
  • World Wide Web Consortium (W3C)
  • Širenje korištenja weba u tvrtkama
  • Dot-com balon
  • Web 2.0 siteovi
  • HTML5
  • Izgled i mogućnosti prvih web-stranica
  • Načini korištenja weba u različite svrhe
  • Utjecaji na područjima ljudskog djelovanja
  • Primjeri tvrtki koje su se razvile na webu
  • Internet i Internet protocol suite
  • Usluge interneta
  • Web preglednici
  • Website i web page
  • Domene i web adrese
  • Serveri
Dodatne informacije

Marketinški aspekti u izradi web-sjedišta

Ova cjelina obuhvaća marketinške aspekte u izradi web-sjedišta.

Tematske cjeline

  • Stopa konverzije
  • Ključni indikatori performansi
  • Primarni ciljevi web-sjedišta
  • Sekundarni ciljevi web-sjedišta
  • Primarni ciljevi web-stranice
  • Sekundarni ciljevi web-stranice
  • Call To Action
  • Konverzijski lijevak
  • Prikaz korisnika u vidu persona
  • Postupak kreiranja persona
  • User stories
  • User journey
  • Dijagram toka
  • Usability
  • Accessibility
  • Kategorije web-sjedišta
  • Informacijska arhitektura
  • Red routes
  • Mapa web-sjedišta
  • Sitemap.xml
  • Struktura web-sjedišta
  • Struktura URL-a
  • Komponente za izvršenje cilja
  • Above the fold
  • Tipovi komponenti za izvršenje cilja
  • Korisničko sučelje
  • Identitet web-sjedišta
  • Style guide
  • Tone of voice
Dijagram strukture web sjedišta

Izrada web-stranica

Ova cjelina obrađuje tehničke preduvjete, alate za izradu web-stranica, HTML, CSS i JavaScript.

Tematske cjeline

  • Protokol HTTP
  • Komunikacija klijent-server
  • Statusi HTTP odgovora
  • Domene
  • IP adrese
  • DNS sustav
  • Nastavci domena
  • Hosting
  • FTP
  • Control Panel
  • Faze izrade
  • Brifing
  • WYSIWYG
  • IDE
  • Open Source
  • CMS
  • Pravila
  • Selektori
  • Deklaracije (svojstva i vrijednosti)
  • Zadavanje inline style
  • Zadavanje CSS-a putem style elementa
  • Zadavanje stila putem CSS dokumenta
  • Komentari u CSS kôdu
  • Nasljeđivanje, specifičnosti i kaskadna obilježja CSS-a
  • Box model
Registracija domene
Struktura HTML elementa

struktura elemenata

Primjer jednostavnog HTML kôda

<!DOCTYPE html>
<html lang="hr">
  <head>
    <meta charset="utf-8">
    <title>Naziv web-stranice</title>
  </head>
  <body>
    <h1>Glavni naslov</h1>
    <p>Paragraf na web-stranici</p>
  </body>
</html>
                                        
                                    

Pregled web-stranice

Primjer jednostavne strukture web-sjedišta
  • css mapa s CSS datotekama
    • style.css CSS datoteka za stil
  • images mapa sa slikama
    • logo.png logo koji se koristi na web-stranici
    • timbl.jpg slika koja se koristi na web-stranici
  • js mapa s JavaScript datotekama
    • jquery.js datoteka JavaScript
  • usluge mapa koja sadrži druge mape i datoteke
    • marketing marketing mapa s podkategorijama
      • seo.html datoteka u podkategoriji
      • ppc.html datoteka u podkategoriji
      • social-media.html datoteka u podkategoriji
    • web-design web design mapa s podkategorijama
      • cms.html datoteka u podkategoriji
      • webshop.html datoteka u podkategoriji
    • analytics.html datoteka u kategoriji usluga
    • consulting.html datoteka u kategoriji usluga
  • index.html početna stranica
  • kontakt.html datoteka u korijenskoj mapi
  • onama.html datoteka u korijenskoj mapi
  • robots.txt datoteka Robots za tražilice
  • sitemap.xml datoteka Sitemap za tražilice
Alati za izradu web-stranica
Pisanje i provjera HTML kôda online s primjerima
Materijali za vježbu
Struktura CSS pravila

struktura CSS pravila

Kalkulator CSS specifičnosti
Kôdovi boja
Reference na svojstva CSS-a
Nastavni materijal, radna verzija

Zadatci

Ocjenjivanje

Nastavna metoda Bodovi (max)
Pohađanje nastave 15
Aktivnost u nastavi 5
Samostalni zadatak 5
Praktični rad 25
Pismeni ispit 50
Ukupno 100

Literatura

Obvezatna literatura (u trenutku prijave prijedloga studijskog programa)

Toni Podmanicki: Nastavni materijal: Izrada web-stranica, radna verzija
Mozilla Developer Network

Dopunska literatura (u trenutku prijave prijedloga studijskog programa)
  • Jon Duckett: HTML and CSS: Design and Build Websites, Wiley (2014.)
  • Jennifer Niederst Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, O'Reilly Media (2012.)