Prvi statični sajtovi
Kada je web počeo da živi kao tehnologija, kada je HTML bio jedini način za kreiranje websajtova, svi sajtovi su bili statični, kao jednostavan spoj teksta i slika, fajlova koji se nalaze između servera i programa na kompjuteru. Kreiranje websajta je u početku bila samo mogućnost gledanja fajlova na nekom drugom kompjuteru.
Na slici dole je primer kako su izgledali sajtovi nekad.
Daljim razvojem weba, podrazumevalo se da sajt sadrži fajlove koji su povezani sa drugim fajlovima, novim stranicama i u tim okolnostima, kada god bi developer trebalo da doda novi sadržaj slike, stranice, promeni link ili nešto. Sve većim povećanjem kompleksnosti sajtova, sve ove promene su postale teške.
Pojava Server Side tehnologije i jezika
Da bi se smanjio trud, uštedelo vreme i energija, software dizajneri su napravili mrežne servere sa kojih će se pokretati web sajtobvi. Softver je interpretiran preko novih web programskih jezika kao što su CGI, ASP, PHP i konvertovati ih u HTML, jezik koji pretraživač može čitati.
PHP je jedan od najboljih server – side jezika danas. Može raditi mnoge stvari koje ne može HTML, kao što su uključivanje sadržaja jednog fajla u drugi fajl ili izvršavanje matematičkih proračuna.
Kompromis je da kada pišete sajt u PHPu, uploadujete na server, potrebno je konvertovati u HTML pre nego što se sajt prikaže krajnjem korisniku, pošto je HTML jezik koji pretraživač razume.
Na donjoj slici je jedan primer, kako vidimo WordPress sajt, koji je baziran na PHPu
Umesto HTMLa, PHP fajl na serveru izgleda ovako:
Web server prevodi ovaj fajl u HTML pre slanja istog pretraživaču. Ovaj proces traje duže osim ukoliko se na serveru samo nalaze HTML stranice.
Zašto se statički sajtovi vraćaju?
Jedan razlog zašto se statički sajtovi vraćaju je taj što Java Script (koji nije neophodno interpretirati na serveru) preuzima dosta zadataka od server side jezika. Zahvaljujući framework-ovima kao što su Jquery, Angular, React današnje statičke stranice mogu da urade isto što i rade dinamičke stranice.
Glavna razlika između današnjih statičnih sajtova i ranijih statičnih sajtova je postojanje novih generatora koji prevode server side softvare, ali se do dešava pre uploadovanja, što rezultira time da stranice budu statične na serveru.
Statički sajtovi ne zahtevaju proces prevođenja sa servera, tako da mogu da budu pod kontrolom web pretraživača na kompjuteru, što je brzo i jednostavno.
Zašto je potrebno kreirati statični sajt
Za kreiranje statičnih sajtova je potrebno imati znanje HTMLa, CSSa i biti otvoren za učenje novih alata.
Proces rada statiučkog sajta izgleda ovako:
Najvažnije komponente su:
- Markup jezik
- Stilski jezik
- Alat za procesuiranje
Markup jezici
Nije samo HTML markup jezik za web. Statički sajtovi i njihovi generatori mogu koristiti više markup jezika koji su konvertovani u HTML. Može se reći i da su obvi jezici kraći oblik HTMLa.
Postoje dva razloga zašto koristiti markup jezik, koji nije HTML.
- Želite nešto moćnije
- Želite nešto lakše za čitanje i pisanje
Navešćemo primer Jadea
u Jadeu kod izgleda ovako:
Umesto:
Primetili ste da se ne zahtevaju HTMLove zagrade (<tag></tag>). Sintaksa je zasnovana na hijerarhiji gde je neophodno utvrditi koji elementi sadrže druge. Kod je kompakntniji i lak za čitanje.
Takođe u gornjem primeru postoji if – else statement, kao i oni koji se nalaze na strani servera kod programerskih jezika. Takođe, kod Jade se može jedan fajl integrisati u drugi, što nije slučaj sa HTMLom.
Ostali popularni nazivi su HAML, Slim, EJS.
Postoji još jedan popularan jezik koji se zove Markdown.
Jako je bitno primetiti da Markdown nije kompletna zamena za HTML, kao što su Jade ili HAML. Markdown obično služi za deo gde je sadržaj u HTMLu, ono što ide između <body> tagova.
Markdown je dobar za blog postove, članke o dokumentaciji i ostalom tekstualnom sadržaju. Za Markdown su potrebni šabloni, napisani uz pomoć jezika kao što su Liquid ili Handlebars.
Da rezimiramo, ovi markup jezici daju prednost nad HTMLom zbog:
- Dodavanja referenci u druge fajlove
- Šablona za zajedničke stranice
- Jednostavna sintaksa i čitljivost
Style – jezici
Kao kod HTML, postoje varijacije i stilskih jezika. CSS je najpoznatiji i najzastupljeniji, ali ima svoje alternative koje su zadržale osnovnu funkcionalnost CSSa, ali im je dodato malo moći i fleksibilnosti.
Dve najpoznatije alternative su Sass i Less. U primeru ćemo koristiti Sass.
Prednosti i mane su slične kao kod markup jezika. Sposobnost korišćenja promenljivih je jako korisna. Možete definisati sve boje i fontove kao promenljive, tako da je svaki njihov update lak.
Promenljive u Sassu izgledaju ovako:
Što postaje ovo
Kad god želite nešto da promenite, kao što je font ili boja, možete samo promeniti vrednost promenljive. Kod većih sajtova vam ovo može uštedeti dosta vremena.
Generator
Sada dolazimo do stvari koje će objediniti sve ovo što smo pomenuli u tekstu. Potrebno je instalirati program na kompjuteru, koji će prevesti kod markup i style jezika u HTML i CSS.
Popularni generatori su Jekyll, Hugo ili Harp.
Postoji nekoliko razmatranja kao što su:
- Kojim markup i style jezikom pisati – ne podržavaju svi generatori iste jezike
- Veličina sajta – Od nje zavisi vreme prevođenja
- Tip sajta koji pravite – Jekyll i Hugo su optimizovani za blogove
- Koliko ste vešti sa komandama iz terminala.
Ovakvi generatori se pokreću obično u pozadini, u trenucima dok pišete kod i dok kompajlirate u HTML i CSS. Obično nije neophodna interakcija koja zahteva startovanje i zaustavljanje.
Mnogi takođe kreiraju lokalni web server, tako da na vašem računaru možete videti kako izgleda sajt, pre samog uploudovanja.
Neki tekst editori imaju pluginove, kao što su Sass pluginovi za Atom koji kompajlira markup i style jezike koje pišete, tako da nije potrebno koristiti zaseban generator
Hosting
Poslednji deo slagalice je naći mesto vašem sajtu na webu.
Hosting za statičke sajtove je lakše pronaći nego za dinamičke sajtove. Ne postoje dodatni zahtevi da server koristi dodatni softver kao što je PHP ili da ima odgovarajući operativni sistem. Ovo često znači da je hosting jeftiniji, može biti i besplatan zato što potrebe za vaš sajt nisu velike.
Ukoliko nemate trenutno hosting, preporučujemo vam naš hosting, za više informacija nas možete kontaktirati.
Statički ili dinamički sajtovi – Koji su vam potrebniji
Kao i kod većine stvari, ovo zavisi od mnogih faktora.
Navešćemo vam dobre i loše strane statičkih sajtova:
Dobre strane
- Učitavaju se brže.
- Noviji markup jezici su lakši za pisanje, čitanje i interpretiranje
- Manja su zahtevanja za server
Loše strane
- Dodatno učenje novih markup jezika ukoliko niste vešti sa HTML i CSSom
- Prelaz sa dinamičnog sajta na statički može biti nezgodan
- Nije još uvek jasno koje tehnologije će se razvijati u budućnosti.
Bez obzira na to koje tehnologije će se razvijati u budućnosti, svakako da će izrada statičkih sajtova olakšati posao i dizajnerima i programerima,kao i korisnicima.
Statički sajtovi nisu revolucionarni za web, ali su svakako evoluirali. Nadamo se da će vam ovaj tekst malo olakšati razumevanje razlike između statičkih i dinamičkih sajtova i zašto statički sajtovi nisu zastareli, već ih je štaviše ponekad poželjnije koristiti u odnosu na dinamičke.