“Korak po korak” do uspješno kreirane web stranice

Sažetak: Ovaj članak predstavlja praktičan pristup izradi obrazovnih mrežnih stranica u visokoškolskim ustanovama. U fokusu je Google Sites kao centralna platforma za integraciju različitih multimedijskih sadržaja, uključujući fotografije, ilustracije, videozapise i interaktivne elemente. Članak detaljno objašnjava postupak izrade, od početnog planiranja strukture mrežne stranice, preko prikupljanja legalnih multimedijskih materijala s platformi poput Pixabayja, Pexelsa i Wikimedia Commonsa te izrade videozapisa pomoću Looma. Posebna pažnja posvećena je integraciji interaktivnih sadržaja kroz alate Genially i H5P (putem Lumi aplikacije) koji omogućuju izradu digitalnih sadržaja poput kvizova i interaktivnih prezentacija. U članku se objašnjava i izrada podstranica te postupak objavljivanja i dijeljenja sadržaja s kolegama i studentima. Cilj je pokazati da izrada profesionalne, funkcionalne i vizualno privlačne obrazovne mrežne stranice ne zahtijeva napredne tehničke vještine ni financijska ulaganja, već samo dobro poznavanje dostupnih besplatnih alata i jasnu viziju. Metodologija provedena „korak po korak“ omogućuje svakom dioniku, na svim razinama digitalne kompetencije, uspješnu izradu mrežne stranice.

Uvod

Za uspješno učenje i poučavanje na svim razinama, od osnovne škole do visokoškolskog obrazovanja, poželjna je komunikacija među dionicima. Digitalni obrazovni sadržaji mogu se učinkovito koristiti za poticanje angažmana učenika i studenata, a jedan od praktičnih načina za njihovu organizaciju i dostupnost je izrada mrežne stranice kojoj mogu pristupiti. Kako ju izraditi i dijeliti s kolegama i studentima, doznajte u članku.

1. Mrežna stranica – zajednički “prostor” u obrazovanju 

Mrežna stranica nije više samo digitalna prezentacija kolegija, ona postaje „živi prostor“ za dijeljenje multimedijskih i interaktivnih sadržaja, komunikaciju te daljnje učenje i usavršavanje. Zahvaljujući inačicama besplatnih digitalnih alata, danas je moguće u samo nekoliko sati izraditi kvalitetnu i pristupačnu mrežnu stranicu koja može okupiti zajednicu visokoškolskog osoblja. Izrada stručnih, pristupačnih i fleksibilnih digitalnih obrazovnih sadržaja koji podržavaju različite stilove učenja, omogućuje studentima uspješnije ostvarivanje odgojno-obrazovnih ishoda što je cilj svakog nastavnog procesa.

U ovom članku prikazujem postupak izrade obrazovne mrežne stranice koristeći isključivo besplatne digitalne alate: Google Sites kao osnovnu platformu, Pixabay i Pexels za vizualne materijale, Openverse i Wikimedia Commons za znanstvene ilustracije, Genially i H5P za interaktivne sadržaje te Loom za jednostavne videozapise. 

2. Osmišljavanje strukture mrežne stranice

Prije nego što otvorite bilo koji digitalni alat, korisno je zamisliti kako bi mrežna stranica trebala izgledati. Nije potreban detaljan nacrt, dovoljno je razmisliti o nekoliko ključnih pitanja: Koje digitalne obrazovne sadržaje želite objaviti (prezentacije, bilješke, videozapise, interaktivne prikaze)? Treba li mrežna stranica pratiti raspored kolegija ili služiti kao stalni repozitorij?

Kada odlučite što objaviti, potrebno je pripremiti vizualne elemente. Digitalni alati poput Canve (https://www.canva.com/hr_hr/, čak i u besplatnoj inačici, omogućuju izradu jednostavnog mockupa (vizualne reprezentacije mrežne stranice), naslovne grafike ili ikona za podstranice.

Pripremljeni vizualni elementi pomažu da mrežna stranica izgleda uredno i stručno. Jednostavnim odabirom nekoliko dominantnih boja i ponavljanjem istog fonta stvara se usklađen vizualni identitet. Cilj je dobiti jasnu mentalnu mapu strukture mrežne stranice i pripremiti vizualne elemente za ugradnju.

3. User-friendly digitalni alat i platforma – Google Sites     

Google Sites (https://sites.google.com/), digitalni je alat i platforma koja se odlikuje jednostavnošću. Čim otvorite početnu stranicu, prikazuje se sučelje koje omogućuje brzu i jednostavnu izradu mrežne stranice pomoću zadanih obrazaca. Google Sites je pogodan za korištenje u obrazovanju zbog dobre integracije s ostatkom Googleovog ekosustava. Platforma automatski prilagođava prikaz na različitim uređajima (računalo, tablet, mobilni uređaj) što osigurava pristupačnost sadržaja.

Da biste izradili osnovnu mrežnu stranicu s naslovom i uvodnim tekstom, otvorite Google Sites, odaberite „Blank site“ (prazna stranica) i unesite naziv predmeta (kolegija) ili drugi željeni naslov. Na panelu dostupnom na desnoj strani sučelja nalaze se predlošci pomoću kojih možete dodati sadržaj (content blocks).

Slika 1. Google Sites sučelje

Koristeći mockup možete krenuti graditi strukturu vaše mrežne stranice. Izradite elemente koristeći pripremljeni sadržaj tako da umetnete gotove elemente iz Googleova sustava (kalendar ili Google mapa).

Radi jasnije predodžbe, izradila sam primjer. U content block sam dodala sliku u lijevom kutu, a ispod nje blok text box s pisanim tekstom. Nakon toga sam iz istog izbornika s elementima dodala blokove Google kalendara i mape.

Slika 2. Primjer elemenata i sadržaja; poveznica: https://sites.google.com/view/loremipsumweb1/home

4. Stvaranje i ugrađivanje multimedijskih sadržaja

U okruženju u kojem studenti gledaju sadržaje, vizualna jasnoća postaje jednako važna kao i tekst. Srećom, dostupni su brojni besplatni izvori za pristup multimedijskim platformama. Navodimo ukratko praktične i dostupne izvore multimedijskih sadržaja koji mogu obogatiti vaš digitalni obrazovni sadržaj.
Pixabay (https://pixabay.com)  i Pexels (https://www.pexels.com) nude veliki broj visokokvalitetnih fotografija, ilustracija i videozapisa za općenite prikaze u pravilu pod CC0 licencom. Wikimedia Commons (https://commons.wikimedia.org) je izvor stručnih ilustracija i grafičkih prikaza, a posebno je korisna platforma za prirodne i društvene znanosti.
Openverse (https://openverse.org) služi za pretraživanje CC-licenciranih sadržaja s različitih platformi na jednom mjestu što značajno ubrzava pronalaženje odgovarajućih vizualnih prikaza. Ove prikaze možete dodatno prilagoditi, urediti, modificirati ili kombinirati koristeći digitalni alat Canvu (pogledajte i opcije izrade i uređivanja videozapisa).

Odabrane slike se jednostavno povlače (drag-and-drop) u Google Sites ili dodaju kroz izbornik „Insert“ → „Image“.  

Google Sites omogućuje i jednostavno umetanje videozapisa, no prije toga potrebno je videozapis prenijeti na vlastiti YouTube račun. Nakon prijenosa, potrebno je odabrati Insert → YouTube i potražiti svoj videozapis prema nazivu ili poveznici. Umetnuti videozapis odmah postaje dio stranice i može se prilagoditi veličinom ili pozicioniranjem. Ovakav postupak može značajno obogatiti sadržaj svake obrazovne mrežne stranice.

Slika 3. Umetanje videozapisa

Ukoliko ne posjedujete YouTube račun, možete koristiti Loom (https://www.loom.com/), aplikaciju koja u svojoj besplatnoj inačici omogućuje brzo snimanje zaslona, kamere ili kombinaciju oboje. Nakon instalacije aplikacije, snimanje počinje jednim klikom, a dovršeni videozapis automatski se prenosi u vaš Loom račun. Loom videozapis možete lako urediti unutar aplikacije, a umetanje u Google Sites je jednostavno. Kada odaberete videozapis iz svog računa, kliknite „Share“ → „Embed“, „fixed size“ i kopirajte generirani kod. Ovaj kod možete jednostavno umetnuti, koristeći „Embed“ opciju iz desnog izbornika, a platforma će odmah prikazati ugrađeni videozapis. 

Pogledajte kreirani primjer.

Slika 4. Primjer videozapisa kreiranog u Loomu: https://sites.google.com/view/loremipsumweb-embedloom/home

Videozapisi uvelike mogu pomoći studentima u usvajanju odgojno-obrazovnih ishoda jer omogućuju učenje tempom koji im odgovara, mogućnost pauziranja i ponovnog gledanja te multimodalni pristup koji kombinira vizualne i auditivne informacije. 

5. Stvaranje i ugrađivanje interaktivnih sadržaja

Napravimo korak dalje i pogledajmo mogućnosti integracije interaktivnih sadržaja. 

Jedna od najvećih prednosti digitalnog pristupa visokom obrazovanju je mogućnost interaktivnosti. Upravo ovdje dolaze do izražaja alati poput Geniallyja i H5P-a.

Za razliku od klasičnih prezentacija, Genially (https://genially.com/) omogućuje izradu digitalnog sadržaja koji potiče istraživanje. U besplatnoj inačici Geniallyja možete izraditi interaktivne infografike, prezentacije na više razina, mini kvizove za provjeru usvojenosti odgojno-obrazovnih ishoda te vizualne vodiče koji studentima pomažu pratiti i logički povezivati sadržaje. Sučelje je intuitivno, a predlošci su dobro osmišljeni, tako da je i početnicima lako započeti s radom.
Nakon što u Geniallyju dovršite sadržaj, odaberite opciju „Share“ i kopirajte ponuđeni kod. U Google Sitesu idite na „Embed“ opciju kao i ranije te zalijepite kod i prilagodite veličinu prikaza. Čim spremite promjene, interaktivni sadržaj pojavljuje se na vašoj stranici.

H5P se može praktično integrirati u Google Sites u obliku Lumi Education aplikacije, koja omogućuje korištenje H5P predložaka izvan LMS-a. U besplatnoj inačici Lumi (https://lumi.education/en), možete odabrati bilo koju H5P aktivnost, izraditi interaktivni sadržaj, a zatim ga izvesti kao samostalni HTML dokument. Kada otvorite taj HTML u mrežnom pregledniku, dovoljno je koristiti funkciju „View Source“ i kopirati cijeli generirani HTML kod (ili otvorite tu HTML datoteku u običnom uređivaču teksta, npr. Notepad ili Notepad++). Taj se kod potom jednostavno zalijepi u Google Sites koristeći ponovno „Embed“ opciju, nakon čega se interaktivni sadržaj prikazuje izravno na mrežnoj stranici.

Ovakav pristup omogućava da se interaktivni sadržaji učitavaju brzo, ostaju potpuno funkcionalni i savršeno se uklapaju u mrežnu stranicu. Rezultat je bogata, interaktivna mrežna stranica koja koristi puni potencijal H5P-a, čak i u okruženju koje ga službeno ne podržava. 

Pogledajte izrađeni primjer.

Slika 5. Primjer Hotspota izrađenog u Lumiju: https://sites.google.com/view/loremipsumweb-interactive/home

6. Završno oblikovanje – organizacija mrežne stranice i navigacija

Nakon što ste pripremili sve materijale: vizuale, interaktivne i multimedijske elemente te tekstove, u Google Sitesu ih možete jednostavno složiti u jasne, pregledne cjeline. Iako ne postoji jedinstven način organizacije obrazovne mrežne stranice, nekoliko funkcionalnih digitalnih alata može vam pomoći da izgradite logičan, intuitivan i pristupačan sustav za svoje studente.

U Google Sitesu svaka nova cjelina ili modul može postati zasebna mrežna stranica (podstranica). Na lijevom dijelu prikaza odaberite „Pages“ i vidjet ćete + ikonicu, koja vam daje opciju „New page“. Kliknite i unesite naziv koji odgovara temi (npr. „Tjedan 1“, „Materijali“, „Vježbe“, „Videolekcije“). 

Slika 6. Kreiranje nove mrežne podstranice 

Mrežne podstranice se mogu slagati hijerarhijski: Glavne podstranice služe kao polazišta za velike tematske cjeline, a njihove podstranice omogućuju detaljniju razradu digitalnih sadržaja.
Elemente poput teksta, videa, Genially prezentacija, interaktivnih H5P elemenata ili PDF-ova možete dodavati na svaku podstranicu, a prednost Google Sitesa je što sve ostaje uredno poravnato i vizualno dosljedno.
Google Sites nudi dva osnovna tipa navigacije: gornja navigacija (Top navigation) i bočna navigacija (Side navigation).
U postavkama „Settings“ → „Navigation“, možete odabrati stil navigacije i prilagoditi redoslijed stranica jednostavnim povlačenjem.
Dodatno, kod podstranica koje sadrže više digitalnih sadržaja, praktično je uključiti anchor oznake, kako bi se studenti mogli vraćati na početak ili preskakati na određena poglavlja. To postižemo dodavanjem elementa „Table of contents“ iz desnog izbornika.

7. Objava i dijeljenje

Kada ste zadovoljni izgledom i funkcionalnošću svoje mrežne stranice, dolazi trenutak objave. Proces je jednostavan i intuitivan, a Google jasno odvaja opcije objavljivanja i dijeljenja, što olakšava kontrolu pristupa kolegama u visokoškolskom obrazovanju te studentima.

Klikom na „Publish“ otvaraju se postavke objave. Tu možete provjeriti automatski generirani URL vaše mrežne stranice ili možete dodati osobnu domenu (ili domenu vaše visokoškolske ustanove). Google Sites nudi opciju uključivanja kolega s kojima surađujete kako bi pregledali digitalni sadržaj prije objave.
Opcije dijeljenja, odnosno tko može pristupiti stranici, nalaze se zasebno pod ikonom „Share“. Stranicu možete zadržati privatnom, ali i dopustiti pristup svima koji imaju poveznicu.

Prije dijeljenja poveznice studentima, preporučuje se provesti kratko testiranje. Otvorite stranicu na različitim uređajima: računalu, tabletu i mobilnom uređaju, kako biste provjerili responzivnost i brzinu učitavanja. Kliknite na sve poveznice i ugrađene digitalne sadržaje kako biste se uvjerili da rade ispravno. Dodatno, povratna informacija kolege ili suradnika može otkriti nejasnoće ili propuste koje sami možda niste primijetili.

Na kraju, rezultat ovog koraka je objavljena, funkcionalna i pregledna mrežna stranica na kojoj možete dalje surađivati s kolegama, a koja je lako dostupna studentima.

Zaključak

Izrada obrazovne mrežne stranice pomoću dostupnih besplatnih inačica digitalnih alata omogućuje uspješnu izradu vlastite mrežne stranice dostupne kolegama i studentima. S digitalnim platformama poput Google Sites, digitalnim alatima za kreiranje multimedijskih i interaktivnih sadržaja (Pixabay, Pexels, Wikimedia Commons, Openverse, Loom, Genially, H5P, Lumi aplikacija), moguće je u nekoliko sati izraditi stručnu i vizualno atraktivnu mrežnu stranicu koja uvelike može pridonijeti učenju i poučavanju.
Postupak, od planiranja strukture do konačnog objavljivanja, omogućuje osoblju visokoškolskih ustanova stvaranje digitalnog „prostora“ koji studentima nudi jasnoću, dostupnost i motivaciju za usvajanje odgojno-obrazovnih ishoda.