Izrada web sjedišta Dan 1. Jasmin Klindžić
Materijali, poveznice http://delicious.com/jklindzic/azoo_web
Prvi dan - sadržaj <ul><li>Organizacija i priprema materijala web sjedišta </li></ul><ul><li>Analiza strukture / mape sadr...
Organizacija, priprema materijala <ul><li>Format materijala </li></ul><ul><li>Količina materijala </li></ul><ul><li>Digita...
Organizacija sjedišta <ul><li>Organizacija sjedišta: </li></ul><ul><ul><li>linearna </li></ul></ul><ul><ul><li>hijerarhijs...
Tehnički dio organizacije <ul><li>Fizičko računalo / poslužitelj: </li></ul><ul><ul><li>Postojeće ili novo </li></ul></ul>...
Organizacija (ljudski aspekt) <ul><li>Odrediti moguće: </li></ul><ul><ul><li>autore  </li></ul></ul><ul><ul><li>urednike  ...
Analiza strukture i navigacije <ul><li>Logičnost i jednoznačnost </li></ul><ul><li>Jednostavnost (ako je moguća) </li></ul...
Vrste web stranica <ul><li>Statičke web stranice: </li></ul><ul><ul><li>Lokalna kopija (na osobnom računalu) </li></ul></u...
Kraći repetitorij iz HTML-a i CSS-a <ul><li>HTML (HyperText Markup Language) </li></ul><ul><li>CSS (Cascading Style Sheet)...
Neophodni programi i alati <ul><li>Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivač </li></ul><ul><li>Program(i) za...
Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivač <ul><li>Statičke stranice ili predlošci za dinamičke stranice </li...
Program(i) za obradu slika <ul><li>Komercijalni: </li></ul><ul><ul><li>Adobe Photoshop </li></ul></ul><ul><ul><li>Corel Ph...
Program(i) za konverziju formata datoteka <ul><li>RTF ili TXT: MS Word </li></ul><ul><li>PDF: Adobe Acrobat, CutePDF </li>...
Program(i) za postavljanje sadržaja na poslužitelj <ul><li>FTP / SFTP programi: </li></ul><ul><ul><li>WS_FTP Lite </li></u...
Internet preglednici <ul><li>Potrebni za testiranje: </li></ul><ul><ul><li>Internet Explorer (6,7 ili 8) </li></ul></ul><u...
Odabir i prilagodba postojećih predložaka <ul><li>Tisuće postojećih predložaka: </li></ul><ul><ul><li>Besplatni, kvalitetn...
Kvalitetni izvori predložaka <ul><li>http://www.openwebdesign.org/ </li></ul><ul><li>http://opensourcetemplates.org/ </li>...
Rad na izradi i održavanju web sjedišta <ul><li>Praktični rad… </li></ul>
Case study <ul><li>Analiza 2 slučaja ( case study ):  </li></ul><ul><ul><li>osobne web stranice predavača </li></ul></ul><...
Osobne web stranice predavača <ul><li>Miljenko Hajdarović  http://hajdarovic.com/   </li></ul><ul><ul><li>Navigacija jasna...
Osobne web stranice predavača <ul><li>Tomaž Lasić  http://tomazlasic.net/ </li></ul><ul><ul><li>Navigacija jasna i logična...
Web stranice škole <ul><li>1. gimnazija, Zagreb  http://www.prva.hr/ </li></ul><ul><ul><li>Navigacija jasna i logična (pre...
Web stranice škole <ul><li>1. gimnazija, Split  http://www.gimnazija-prva-st.skole.hr/ </li></ul><ul><ul><li>Navigacija ja...
Materijali, poveznice http://delicious.com/jklindzic/azoo_web
Kraj (za danas)
Upcoming SlideShare
Loading in …5
×

Izrada web sjedista - dan 1.

1,500 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,500
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Izrada web sjedista - dan 1.

  1. 1. Izrada web sjedišta Dan 1. Jasmin Klindžić
  2. 2. Materijali, poveznice http://delicious.com/jklindzic/azoo_web
  3. 3. Prvi dan - sadržaj <ul><li>Organizacija i priprema materijala web sjedišta </li></ul><ul><li>Analiza strukture / mape sadržaja </li></ul><ul><li>Vrste web stranica </li></ul><ul><li>Kraći repetitorij iz HTML-a i CSS-a </li></ul><ul><li>Neophodni programi i alati </li></ul><ul><li>Odabir i prilagodba postojećih predložaka </li></ul><ul><li>Rad na izradi i održavanju web sjedišta </li></ul><ul><li>Analiza 4 slučaja ( case study ): </li></ul><ul><ul><li>2 osobne web stranice predavača </li></ul></ul><ul><ul><li>2 web stranice škole </li></ul></ul>
  4. 4. Organizacija, priprema materijala <ul><li>Format materijala </li></ul><ul><li>Količina materijala </li></ul><ul><li>Digitalizacija materijala (po potrebi) </li></ul><ul><li>Uniformnost i unificiranost </li></ul><ul><li>Osoba/e zadužene za prikupljanje </li></ul><ul><li>Upute onima koji posjeduju materijale </li></ul><ul><li>Izvori informacija </li></ul>
  5. 5. Organizacija sjedišta <ul><li>Organizacija sjedišta: </li></ul><ul><ul><li>linearna </li></ul></ul><ul><ul><li>hijerarhijska </li></ul></ul><ul><ul><li>poput mreže </li></ul></ul><ul><li>U svakom slučaju - planirana </li></ul>
  6. 6. Tehnički dio organizacije <ul><li>Fizičko računalo / poslužitelj: </li></ul><ul><ul><li>Postojeće ili novo </li></ul></ul><ul><ul><li>Minimalna konfiguracija </li></ul></ul><ul><ul><li>Način povezanosti na Internet (uplink) </li></ul></ul><ul><li>Operativni sustav </li></ul><ul><ul><li>MS Windows ili Linux (rijetko MacOS) </li></ul></ul><ul><li>Programska platforma / softver </li></ul><ul><ul><li>Statičke ili dinamičke stranice </li></ul></ul><ul><ul><li>Otvoreni kod ili komercijalno zatvoreno rješenje </li></ul></ul>
  7. 7. Organizacija (ljudski aspekt) <ul><li>Odrediti moguće: </li></ul><ul><ul><li>autore </li></ul></ul><ul><ul><li>urednike </li></ul></ul><ul><ul><li>administratore </li></ul></ul><ul><li>Odrediti “liniju zapovijedanja” ili odgovornosti </li></ul>
  8. 8. Analiza strukture i navigacije <ul><li>Logičnost i jednoznačnost </li></ul><ul><li>Jednostavnost (ako je moguća) </li></ul><ul><li>Redundantnost navigacijskih elemenata </li></ul><ul><li>Mapa sadržaja </li></ul><ul><li>“Gdje sam sada?” </li></ul><ul><li>Mogućnost lake izmjene navigacije </li></ul>
  9. 9. Vrste web stranica <ul><li>Statičke web stranice: </li></ul><ul><ul><li>Lokalna kopija (na osobnom računalu) </li></ul></ul><ul><ul><li>Udaljena kopija (na poslužitelju) </li></ul></ul><ul><li>Dinamičke web stranice: </li></ul><ul><ul><li>Udaljena kopija sadržaja (baza podataka – poslužitelj) </li></ul></ul><ul><ul><li>Udaljena kopija HTML/CSS predloška (na poslužitelju) </li></ul></ul><ul><ul><li>Lokalna kopija HTML/CSS predloška (PC) </li></ul></ul>
  10. 10. Kraći repetitorij iz HTML-a i CSS-a <ul><li>HTML (HyperText Markup Language) </li></ul><ul><li>CSS (Cascading Style Sheet) </li></ul>
  11. 11. Neophodni programi i alati <ul><li>Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivač </li></ul><ul><li>Program(i) za obradu slika </li></ul><ul><li>Program(i) za konverziju formata datoteka </li></ul><ul><li>Program(i) za postavljanje sadržaja na poslužitelj </li></ul><ul><li>Internet preglednici </li></ul>
  12. 12. Uređivač tekstualnih datoteka ili HTML WYSIWYG uređivač <ul><li>Statičke stranice ili predlošci za dinamičke stranice </li></ul><ul><li>HTML WYSIWYG uređivači: </li></ul><ul><ul><li>MS Frontpage </li></ul></ul><ul><ul><li>Macromedia DreamWeaver </li></ul></ul><ul><ul><li>NVU ili KompoZer </li></ul></ul><ul><li>Uređivači tekstualnih datoteka: </li></ul><ul><ul><li>Notepad </li></ul></ul><ul><ul><li>Notepad++ </li></ul></ul>
  13. 13. Program(i) za obradu slika <ul><li>Komercijalni: </li></ul><ul><ul><li>Adobe Photoshop </li></ul></ul><ul><ul><li>Corel PhotoPaint </li></ul></ul><ul><ul><li>Corel Draw (vektorsko crtanje) </li></ul></ul><ul><li>Besplatni i/ili slobodni: </li></ul><ul><ul><li>GIMP </li></ul></ul><ul><ul><li>Paint.NET </li></ul></ul><ul><ul><li>Inkscape (vektorsko crtanje) </li></ul></ul>
  14. 14. Program(i) za konverziju formata datoteka <ul><li>RTF ili TXT: MS Word </li></ul><ul><li>PDF: Adobe Acrobat, CutePDF </li></ul><ul><li>Audio: BonkEnc, FormatFactory </li></ul><ul><li>Video: FormatFactory </li></ul>
  15. 15. Program(i) za postavljanje sadržaja na poslužitelj <ul><li>FTP / SFTP programi: </li></ul><ul><ul><li>WS_FTP Lite </li></ul></ul><ul><ul><li>Filezilla </li></ul></ul><ul><ul><li>WinSCP </li></ul></ul>
  16. 16. Internet preglednici <ul><li>Potrebni za testiranje: </li></ul><ul><ul><li>Internet Explorer (6,7 ili 8) </li></ul></ul><ul><ul><li>Mozilla Firefox </li></ul></ul><ul><ul><li>Opera </li></ul></ul><ul><ul><li>Google Chrome </li></ul></ul><ul><li>Moguće korištenje i online servisa, npr. browsershots.org </li></ul>
  17. 17. Odabir i prilagodba postojećih predložaka <ul><li>Tisuće postojećih predložaka: </li></ul><ul><ul><li>Besplatni, kvalitetni </li></ul></ul><ul><ul><li>Za statičke / dinamičke web stranice </li></ul></ul><ul><ul><li>Različite namjene </li></ul></ul><ul><ul><li>Različito predznanje </li></ul></ul><ul><li>Procedura: </li></ul><ul><ul><li>Uži odabir (3-5 predložaka) </li></ul></ul><ul><ul><li>Unos osnovnih podataka ( probne stranice ) </li></ul></ul><ul><ul><li>Metoda ankete (više korisnika) </li></ul></ul>
  18. 18. Kvalitetni izvori predložaka <ul><li>http://www.openwebdesign.org/ </li></ul><ul><li>http://opensourcetemplates.org/ </li></ul><ul><li>http://www.opendesigns.org/ </li></ul>
  19. 19. Rad na izradi i održavanju web sjedišta <ul><li>Praktični rad… </li></ul>
  20. 20. Case study <ul><li>Analiza 2 slučaja ( case study ): </li></ul><ul><ul><li>osobne web stranice predavača </li></ul></ul><ul><ul><li>web stranice škole </li></ul></ul><ul><li>Što je dobro, a što ne? </li></ul><ul><li>Kako postupiti u sličnoj situaciji? </li></ul>
  21. 21. Osobne web stranice predavača <ul><li>Miljenko Hajdarović http://hajdarovic.com/ </li></ul><ul><ul><li>Navigacija jasna i logična </li></ul></ul><ul><ul><li>Organizacija sadržaja jasna </li></ul></ul><ul><ul><li>Ažurno, konkretno, ponekad emocionalno </li></ul></ul><ul><ul><li>Iskorak prema posjetiteljima svih dobi i interesa </li></ul></ul><ul><ul><li>Interakcija i komentari </li></ul></ul><ul><ul><li>Teme: tehnologija i obrazovanje, povijest, život u i oko škole, političke teme </li></ul></ul><ul><ul><li>Format bloga </li></ul></ul>
  22. 22. Osobne web stranice predavača <ul><li>Tomaž Lasić http://tomazlasic.net/ </li></ul><ul><ul><li>Navigacija jasna i logična </li></ul></ul><ul><ul><li>Organizacija sadržaja jasna </li></ul></ul><ul><ul><li>Ažurno i konkretno </li></ul></ul><ul><ul><li>Teme: nove tehnologije i obrazovanje, učenje na daljinu (MOODLE) … </li></ul></ul><ul><ul><li>Interakcija i komentari </li></ul></ul><ul><ul><li>Veća količina video / audio materijala </li></ul></ul><ul><ul><li>Koristi Wiki umjesto bloga </li></ul></ul>
  23. 23. Web stranice škole <ul><li>1. gimnazija, Zagreb http://www.prva.hr/ </li></ul><ul><ul><li>Navigacija jasna i logična (predavači, učenici, nastava, aktivnosti…) </li></ul></ul><ul><ul><li>Organizacija sadržaja jasna </li></ul></ul><ul><ul><li>Ažurno, informativno </li></ul></ul><ul><ul><li>Vlastita domena prva.hr </li></ul></ul><ul><ul><li>Koriste CMS (Joomla!) </li></ul></ul>
  24. 24. Web stranice škole <ul><li>1. gimnazija, Split http://www.gimnazija-prva-st.skole.hr/ </li></ul><ul><ul><li>Navigacija jasna i logična (predavači, učenici, nastava, slobodne aktivnosti…) </li></ul></ul><ul><ul><li>Organizacija sadržaja jasna </li></ul></ul><ul><ul><li>Ažurno, informativno </li></ul></ul><ul><ul><li>Domena skole.hr </li></ul></ul><ul><ul><li>Koriste CMS (Joomla!) </li></ul></ul>
  25. 25. Materijali, poveznice http://delicious.com/jklindzic/azoo_web
  26. 26. Kraj (za danas)

×