Izrada web sjedištaIzrada web sjedišta

Dan 1.Dan 1.

Jasmin KlindžićJasmin Klindžić

Materijali, povezniceMaterijali, poveznice

http://delicious.com/jklindzic/azoo_webhttp://delicious.com/jklindzic/azoo_web

Prvi dan - sadržajPrvi dan - sadržaj Organizacija i priprema materijala web sjedištaOrganizacija i priprema materijala web sjedišta Analiza strukture / mape sadržajaAnaliza strukture / mape sadržaja Vrste web stranicaVrste web stranica Kraći repetitorij iz HTML-a i CSS-aKraći repetitorij iz HTML-a i CSS-a Neophodni programi i alatiNeophodni programi i alati Odabir i prilagodba postojećih predložakaOdabir i prilagodba postojećih predložaka Rad na izradi i održavanju web sjedištaRad na izradi i održavanju web sjedišta Analiza 4 slučaja (Analiza 4 slučaja (case studycase study): ):

2 osobne web stranice predavača2 osobne web stranice predavača 2 web stranice škole2 web stranice škole

Organizacija, priprema materijalaOrganizacija, priprema materijala

Format materijalaFormat materijala Količina materijalaKoličina materijala Digitalizacija materijala (po potrebi)Digitalizacija materijala (po potrebi) Uniformnost i unificiranostUniformnost i unificiranost Osoba/e zadužene za prikupljanjeOsoba/e zadužene za prikupljanje Upute onima koji posjeduju materijaleUpute onima koji posjeduju materijale Izvori informacijaIzvori informacija

Organizacija sjedištaOrganizacija sjedišta

Organizacija sjedišta:Organizacija sjedišta: linearnalinearna hijerarhijskahijerarhijska poput mrežepoput mreže

U svakom slučaju - planiranaU svakom slučaju - planirana

Tehnički dio organizacijeTehnički dio organizacije

Fizičko računalo / poslužitelj:Fizičko računalo / poslužitelj: Postojeće ili novoPostojeće ili novo Minimalna konfiguracijaMinimalna konfiguracija Način povezanosti na Internet (uplink)Način povezanosti na Internet (uplink)

Operativni sustavOperativni sustav MS Windows ili Linux (rijetko MacOS)MS Windows ili Linux (rijetko MacOS)

Programska platforma / softverProgramska platforma / softver Statičke ili dinamičke straniceStatičke ili dinamičke stranice Otvoreni kod ili komercijalno zatvoreno rješenjeOtvoreni kod ili komercijalno zatvoreno rješenje

Organizacija (ljudski aspekt)Organizacija (ljudski aspekt)

Odrediti moguće:Odrediti moguće: autore autore urednike urednike administratoreadministratore

Odrediti “liniju zapovijedanja” ili Odrediti “liniju zapovijedanja” ili odgovornostiodgovornosti

Analiza strukture i navigacijeAnaliza strukture i navigacije

Logičnost i jednoznačnostLogičnost i jednoznačnost Jednostavnost (ako je moguća)Jednostavnost (ako je moguća) Redundantnost navigacijskih elemenataRedundantnost navigacijskih elemenata Mapa sadržajaMapa sadržaja ““Gdje sam sada?”Gdje sam sada?” Mogućnost lake izmjene navigacijeMogućnost lake izmjene navigacije

Vrste web stranicaVrste web stranica

Statičke web stranice:Statičke web stranice: Lokalna kopija (na osobnom računalu)Lokalna kopija (na osobnom računalu) Udaljena kopija (na poslužitelju)Udaljena kopija (na poslužitelju)

Dinamičke web stranice:Dinamičke web stranice: Udaljena kopija sadržaja (baza podataka – Udaljena kopija sadržaja (baza podataka –

poslužitelj)poslužitelj) Udaljena kopija HTML/CSS predloška (na Udaljena kopija HTML/CSS predloška (na

poslužitelju)poslužitelju) Lokalna kopija HTML/CSS predloška (PC)Lokalna kopija HTML/CSS predloška (PC)

Kraći repetitorij iz HTML-a i CSS-aKraći repetitorij iz HTML-a i CSS-a

HTML (HyperText Markup Language)HTML (HyperText Markup Language)

CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)

Neophodni programi i alatiNeophodni programi i alati

Uređivač tekstualnih datoteka ili HTML Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivačWYSIWYG uređivač

Program(i) za obradu slikaProgram(i) za obradu slika Program(i) za konverziju formata datotekaProgram(i) za konverziju formata datoteka Program(i) za postavljanje sadržaja na Program(i) za postavljanje sadržaja na

poslužiteljposlužitelj Internet pregledniciInternet preglednici

Uređivač tekstualnih datoteka ili Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivačHTML WYSIWYG uređivač

Statičke stranice ili predlošci za dinamičke Statičke stranice ili predlošci za dinamičke stranicestranice

HTML WYSIWYG uređivači:HTML WYSIWYG uređivači: MS FrontpageMS Frontpage Macromedia DreamWeaverMacromedia DreamWeaver NVU ili NVU ili KompoZerKompoZer

Uređivači tekstualnih datoteka:Uređivači tekstualnih datoteka: NotepadNotepad Notepad++Notepad++

Program(i) za obradu slikaProgram(i) za obradu slika

Komercijalni:Komercijalni: Adobe PhotoshopAdobe Photoshop Corel PhotoPaintCorel PhotoPaint Corel Draw (vektorsko crtanje)Corel Draw (vektorsko crtanje)

Besplatni i/ili slobodni:Besplatni i/ili slobodni: GIMPGIMP Paint.NETPaint.NET Inkscape (vektorsko crtanje)Inkscape (vektorsko crtanje)

Program(i) za konverziju formata Program(i) za konverziju formata datotekadatoteka

RTF ili TXT: MS WordRTF ili TXT: MS Word PDF: Adobe Acrobat, CutePDFPDF: Adobe Acrobat, CutePDF Audio: BonkEnc, FormatFactoryAudio: BonkEnc, FormatFactory Video: FormatFactoryVideo: FormatFactory

Program(i) za postavljanje Program(i) za postavljanje sadržaja na poslužiteljsadržaja na poslužitelj

FTP / SFTP programi:FTP / SFTP programi: WS_FTP LiteWS_FTP Lite FilezillaFilezilla WinSCPWinSCP

Internet pregledniciInternet preglednici

Potrebni za testiranje:Potrebni za testiranje: Internet Explorer (6,7 ili 8)Internet Explorer (6,7 ili 8) Mozilla FirefoxMozilla Firefox OperaOpera Google ChromeGoogle Chrome

Moguće korištenje i online servisa, npr. Moguće korištenje i online servisa, npr. browsershots.orgbrowsershots.org

Odabir i prilagodba postojećih Odabir i prilagodba postojećih predložakapredložaka

Tisuće postojećih predložaka:Tisuće postojećih predložaka: Besplatni, kvalitetniBesplatni, kvalitetni Za statičke / dinamičke web straniceZa statičke / dinamičke web stranice Različite namjeneRazličite namjene Različito predznanjeRazličito predznanje

Procedura:Procedura: Uži odabir (3-5 predložaka)Uži odabir (3-5 predložaka) Unos osnovnih podataka (Unos osnovnih podataka (probne straniceprobne stranice)) Metoda ankete (više korisnika)Metoda ankete (više korisnika)

Kvalitetni izvori predložakaKvalitetni izvori predložaka

http://www.openwebdesign.org/http://www.openwebdesign.org/ http://opensourcetemplates.org/http://opensourcetemplates.org/ http://www.opendesigns.org/http://www.opendesigns.org/

Rad na izradi i održavanju web Rad na izradi i održavanju web sjedištasjedišta

Praktični rad…Praktični rad…

Case studyCase study

Analiza 2 slučaja (Analiza 2 slučaja (case studycase study): ): osobne web stranice predavačaosobne web stranice predavača web stranice školeweb stranice škole

Što je dobro, a što ne?Što je dobro, a što ne? Kako postupiti u sličnoj situaciji?Kako postupiti u sličnoj situaciji?

Osobne web stranice predavačaOsobne web stranice predavača

Miljenko Hajdarović Miljenko Hajdarović http://hajdarovic.com/http://hajdarovic.com/ Navigacija jasna i logičnaNavigacija jasna i logična Organizacija sadržaja jasnaOrganizacija sadržaja jasna Ažurno, konkretno, ponekad emocionalnoAžurno, konkretno, ponekad emocionalno Iskorak prema posjetiteljima svih dobi i Iskorak prema posjetiteljima svih dobi i

interesainteresa Interakcija i komentariInterakcija i komentari Teme: tehnologija i obrazovanje, povijest, Teme: tehnologija i obrazovanje, povijest,

život u i oko škole, političke temeživot u i oko škole, političke teme Format blogaFormat bloga

Osobne web stranice predavačaOsobne web stranice predavača

Tomaž Lasić Tomaž Lasić http://tomazlasic.net/http://tomazlasic.net/ Navigacija jasna i logičnaNavigacija jasna i logična Organizacija sadržaja jasnaOrganizacija sadržaja jasna Ažurno i konkretnoAžurno i konkretno Teme: nove tehnologije i obrazovanje, učenje Teme: nove tehnologije i obrazovanje, učenje

na daljinu (MOODLE) …na daljinu (MOODLE) … Interakcija i komentariInterakcija i komentari Veća količina video / audio materijalaVeća količina video / audio materijala Koristi Wiki umjesto blogaKoristi Wiki umjesto bloga

Web stranice školeWeb stranice škole

1. gimnazija, Zagreb 1. gimnazija, Zagreb http://www.prva.hr/http://www.prva.hr/ Navigacija jasna i logična (predavači, učenici, Navigacija jasna i logična (predavači, učenici,

nastava, aktivnosti…)nastava, aktivnosti…) Organizacija sadržaja jasnaOrganizacija sadržaja jasna Ažurno, informativnoAžurno, informativno Vlastita domena Vlastita domena prva.hrprva.hr Koriste CMS (Joomla!)Koriste CMS (Joomla!)

Web stranice školeWeb stranice škole

1. gimnazija, Split 1. gimnazija, Split http://www.gimnazija-http://www.gimnazija-prva-st.skole.hr/prva-st.skole.hr/ Navigacija jasna i logična (predavači, učenici, Navigacija jasna i logična (predavači, učenici,

nastava, slobodne aktivnosti…)nastava, slobodne aktivnosti…) Organizacija sadržaja jasnaOrganizacija sadržaja jasna Ažurno, informativnoAžurno, informativno Domena Domena skole.hrskole.hr Koriste CMS (Joomla!)Koriste CMS (Joomla!)

Materijali, povezniceMaterijali, poveznice

http://delicious.com/jklindzic/azoo_webhttp://delicious.com/jklindzic/azoo_web

Kraj (za danas)Kraj (za danas)