Šta je web dizajn?

Šta je web dizajn? Web dizajn je vrsta dizajna koji omogućava kreiranje i unaprijeđivanje internet prezentacije. Smatra se i oblikom grafičke umjetnosti. Kad je riječ o prodaji postoji “izreka”: Dobar web dizajner će potencijalne kupce pretvoriti u nove. Ko je web dizajner? Web dizajner je osoba koja osmišljava i realizuje web prezentaciju, odnosno interfejs koji se nalazi pred posjetiocima internet stranice.

Šta je web sajt? Web sajt (prezentacija, sajt) je mjesto na internetu. To je skup stranica koje sadrže slike, tekst, video... Sajt može biti smješten na lokalnom računaru ili na web/internet serveru (računar), tj. računaru poslužiocu.

Kakvi web sajtovi mogu biti? Web sajtovi mogu biti dostupni svima ili samo korisnicima koji imaju korisničko ime i šifru. Statički – web sajt čiji se podaci ne mijenjaju ili osvježavaju na duže vrijeme. Dinamički – web sajt čiji se podaci često osvježavaju i mijenjaju. Više su posjećeni nego statički.

Od čega se sastoji sajt? Domen – adresa sajta Hosting – lokacija na kojoj je smješten sajt Sadržaj – tekstovi, slike, video, muzika Primjeri nekih ekstenzija

Šta je to domen? Domen je adresa servera na Internetu sa kojeg se vrši posluživaje stranica i ostalih dostupnih servisa. Budući da je svaki domeni (i svaka IP adresa) jedinstvena, moguće ga je registrovati samo jednom u cijelom svijetu.

Šta je to domen? Domeni se definišu sa desna na lijevo. Svaki logički dio domena odvojen je tačkom. Određuje internet servis Jedinstveni naziv sajta Ekstenzija

Web stranice Dizajn, sadržaj i navigacija su tri osnovna principa koji svaki sajt mora zadovoljiti da bi bio kvalitetan. • Dizajn - je slika vaše firme na internetu. Loše dizajniran web sajt narušava imidž vaše kompanije. • Sadržaj - je razlog dolaska posjetioca na vaš web sajt. Način na koji je napisan sadržaj može da utiče na uspjeh vašeg sajta. U zavisnosti da li je sadžaj kvalitetan ili loš zavisiće i rangiranje vašeg sajta na internet pretraživačima, a time i broj posjeta sajtu. • Navigacija - je važan element koji ne smijete zanemariti. Posjetilac ne smije biti zbunjen i dezorijentisan, jer može jednim klikom miša napustiti vaš web sajt.

Primjer mape web sajta

HTML Hyper Text Markup Language - prezentacijski jezik za izradu web stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom oblikuje se sadržaj i stvaraju se hiperveze (linkovi) dokumenta. Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio još poprilično ograničen, pa nije bilo moguće čak ni dodati slike u HTML dokumente. 1995. izlazi verziju 3.0, koja donosi mogućnosti definicije tablela. . . HTML 5 je prva nova revizija standarda od HTML 4.01, koji je izdan 1999. godine

HTML Osnova HTML predstavljaju atributi i tagovi. Atributi se nalaze unutar tagova.

HTML HTML znači hipertekstualni (tekst čitljiv u više dimenzija) označeni jezik, to nije programski jezik. Dakle, radi se o običnoj tekstualnoj datoteci, koju Internet browseri "vide" kao malo manje običnu tekstualnu datoteku, tj. interpretiraju kod u tekst, slike i zvuk. Cijela stranica, koliko god multimedijalnih dodataka imala, nije ništa drugo nego tekst. Kliknite desnim tasterom miša i na meniju odaberite View Source - vidjet ćete kako izgleda bilo koja stranica u HTML-u.

HTML HTML kod sastoji se od mnoštva tagova. Tag je najmanja jedinica, dio koda. Možete prepoznati tag po tome što se nalazi unutar matematičkih operatora za veće i manje <> .Na početku svake HTML stranice nalazi se tag <html>. On označava početak stranice. Na kraju dokumenta naći ćete </html> - on označava kraj stranice. Sve što se nalazi unutar tih dviju oznaka, browser će interpretirati kao HTML stranicu, a ono što se nalazi izvan neće.

HTML Prvi tag unutar stranice je <head>. On sadrži stvari koje određuju stranicu, kao naslov stranice, encoding, meta tagove i slično. Negdje između <head> i </head> treba smjestiti <title> </title>. Između se upisuje naslov stranice, koji će se prikazati u naslovnoj traci (title bar).Nakon head taga, slijedi <body> </body>. Sve što upišete u taj tag bit će vidljivo na stranici. Ovdje idu tekst, slike, tabele, zvuk...

Kreiranje stranice: Kreiramo fasciklu pod nazivom Prezentacija. U njoj klik na desni taster miša (DTM), u padajućem meniju izaberemo New, New Text Document. Otvorimo NTD brzim klikom miša dva puta. Datoteka/File, Sačuvaj kao, dobijemo prozor Save As u kome imaju nama bitna tri polja: Ime datoteke/Name: Upisaćemo “index.html” Tip datoteke/Type: Odabraćemo All Files Kodiranje/Encoding: Odabraćemo UTF-8 Sačuvaj/Save

Kreiranje stranice: Prvi korak je da kucamo html tag. Najbolje je prvo otkucati <> a zatim u okviru znakova kucati malim slovima html. Odmah zatim <> a zatim </html> Ova dva taga razdvojiti tako da izgledaju slično kao ovdje: <html> </html>

Kreiranje stranice: Sljedeći korak je da otkucamo dva osnovna dijela od kojih se sastoji sajt: “glava” i “tijelo”. Tag za “glavu” je head, a za tijelo body. Nemojmo zaboraviti zatvoriti tagove. Otvaranje taga head. <html><head></head><body></body></html> Zatvaranje taga head. Otvaranje taga body. Zatvaranje taga body.

Kreiranje stranice: U okviru taga za “glavu” smjestićemo tag title. On ima ulogu da tekst ispisan između dva taga title učita u tab/jezičak naše stranice. Istovremeno ćemo u bodyju ukucati tekst kako je navedeno. <html><head><title>Moj prvi naslov</title></head><body>Ovo je jednostavna stranica.</body></html>

Kreiranje stranice: Sada je vrijeme da pogledamo kako browseri “vide” našu stranicu. Dovoljno je da sačuvamo promjene koje smo uradili: Ctrl + S je prečica za snimanje promjena. 2) Smanjimo prozor dokumenta. 3) Primijetićemo da je naša ikonica promijenila izgled i da sada ima logo jednog od browsera koji koristimo (Mozila, Chrome, Explorer, Opera...) 4) Dva puta brzi klik na stranicu i ona se otvori u browseru. Možemo primijetiti na jezičku prozora/tabu naslov “Moja prva stranica”, a u dijelu za “tijelo” stranice tekst koji smo napisali.

Kreiranje stranice: Prije nego krenemo dalje, spomenućemo najvažnije prečice koje ćemo često koristiti: Ctrl + S za snimanje / čuvanje Ctrl + X za isijecanje / cut Ctrl + V za lijepljenje / paste Ctrl + C za kopiranje / copy Ctrl + A za označavanje (selektovanje) cijelog dokumenta Ctrl + Z za opoziv radnje / undo F5 za osvježavanje stranice, odnosno učitavanje posljednjih promjena na istoj / refresh Ctrl + Shift + strelice za označavanje (markiranje)

Kreiranje stranice: <h> tagovi <h> tagovi predstavljaju naslove. Pobrisaćemo dio u bodyju gdje smo pisali: Ovo je jednostavna stranica i otkucaćemo sljedeće: <html><head><title>Moj prvi naslov</title></head><body><h1>Ovo je naslov sa h1 tagom.</h1></body></html> Zatim ćemo iskoristit prečicu Ctrl + S, smanjiti dokument, otvoriti browser (već smo ga otvorili, sad ga samo podignemo sa statusne linije), F5 za učitavanje promjena. Sada vidimo kako izgleda naslov sa h1 tagom.

Kreiranje stranice: <h> tagovi Nastavljamo sa h1 tagovima. Ima ih ukupno 6. Dakle, otkucaćemo sljedeće: <html><head><title>Moj prvi naslov</title></head><body><h1>Ovo je naslov sa h1 tagom</h1> <h2>Ovo je naslov sa h2 tagom</h2> <h3>Ovo je naslov sa h3 tagom</h3> <h4>Ovo je naslov sa h4 tagom</h4> <h5>Ovo je naslov sa h5 tagom</h5> <h6>Ovo je naslov sa h6 tagom</h6> </body></html> Zatim ćemo iskoristit prečicu Ctrl + S, smanjiti dokument, otvoriti browser (već smo ga otvorili, sad ga samo podignemo sa statusne linije), F5 za učitavanje promjena. Sada vidimo kako izgledaju promjene koje smo unijeli.

Kreiranje stranice: <p> tagovi <p> tagovi predstavljaju paragrafe. Pokušajte kreirati nekoliko paragrafa: <p>Ovo je moj prvi paragraf.</p> <p>A ovo je moj drugi paragraf.</p> Sada pogledajte kako vaša stranica izgleda 

Kreiranje stranice: <p> tagovi Nastavljamo sa <p> tagovima: <p>Ovo je moj prvi paragraf </p> <p>A ovo je moj drugi paragraf </p> <p>Свечаном промоцијом магистара економских наука, магистара економије и дипломираних економиста, 06. Фебруара 2014. године Економски факултет Универзитета у Бањој Луци обиљежио је 39 година постојања и успјешног рада. Прије свечаног уручивања диплома, присутни у препуном амфитеатру Факултета, међу којом су се нашле бројне угледне званице из политичког, јавног и академског живота Српске, руководство Универзитета, те представници партнерских факултета и универзитета из БиХ и земаља региона, имали су прилику да погледају кратки документарни филм о историјату Економског факултета.</p>

Kreiranje stranice: <br> tag Engl. break – prelom. Služi da naš tekst prebaci u novi rad (kao enter na tastaturi) Primjer iz našeg rada: <p>Sada ću napraviti prelom teksta <br> unovi red.</p>

Kreiranje stranice: <hr /> tag Ovo je tag za umetanje horizontalne linije. Primjer iz našeg rada: Sada ću dodati jednu horizontalnu liniju ispod ovog teksta.Ovaj tekst nije u paragrafu. :-) <hr />

Kreiranje stranice: tag Ovaj tag koristimo kada želimo napraviti jedno slovno mjesto razmaka. Primjer iz našeg rada: Ispod linije ću napraviti 5 mjesta razmaka između ovih riječi.

Kreiranje stranice: <b> </b> tag za boldiranje (podebljavanje) teksta. <i> </i> tag za italik (ukoso, kurziv) tekst. Primjer iz našeg rada: <p>Sljedeći tekst će biti <br> <b>boldiran</b> <br> <i>ukoso</i> </p>

Kreiranje stranice: Ako želimo dodati sliku koristićemo sljedeći tag: <img src=“slika.jpg”> Primjer iz našeg rada: <img src="earth.jpg"> Ovdje treba voditi računa o imenu slike. Ime slike ne smije sadržavati razmake. Treba voditi računa i o formatu slike: .jpg .jpeg .png Ili neki drugi format.

Kreiranje stranice: LINKOVANJE Za linkovanje se koriste <a></a> tagovi. U našem zadatku trebalo je postaviti link na jedu riječ i da pri tome tekst izgleda linkovan, ali da link ne vodi nigdje. U ovom slučaju ćemo na mjesto adrese (tj. odredišta gdje nas link vodi) staviti znak tarabice (#): <a href=“#”> </a> Odnosno, konkretno u primjeru biće: Ovaj tekst je <a href="#">LINKOVAN</a>. Da nas neka riječ vodi na drugu stranicu, npr. na google.ba: A ovaj <a href="https://www.google.ba">LINK</a> vodi na www.google.ba

Problemi: Pošto se na pojedinim računarima javljao problem sa učitavanjem promjena koje su rađene u notpedu (html), ovdje je postupak kojim se briše keš memorija za dva pretraživača koja imamo u sali: Mozilla Firefox: Otvorite pretraživač, kliknite na opciju Tools u meni baru, i izaberite Options. U narednom koraku izaberite Advancedstavku. Tu ćete imati četiri podkategorije (General, Network, Update, Encryption). Izaberite Network. Dobicete nove opcije, a ono šta vama treba je Cached Web Content. Desno od naziva opcije treba da kliknete Clear Now, sačekate par trenutaka i uspešno ste obrisali keš memoriju. OK. Google Chrome: U desnom gornjem uglu ima dugme sa nacrtanim ključem, (zavisno od verzije može biti i dugme sa tri horizontalne linije) klik na njega i dobićete padajući meni, izaberite Tools ili Podešavanja. Dobićete novi tab u kome trebate u gornjem lijevom uglu odabrati Istorija a zatim klik na dugme u desnom dijelu prozora Obriši podatke pregledanja pojavi se novi prozor u kome su čekirane opcije za brisanje. Samo potvrdite na Obriši podatke pregledanja. Za drugu verziju (ako imate dugme sa nacrtanim ključem) Odaberite Tools i dobijete meni u kojem treba da izaberete Clear Browsing Data. U poslednjem koraku treba da otkačite opciju Empty the cachei potom kliknete na Clear browsing data. Refrešujte stranicu (Ctrl+F5).

Šta je web dizajn?