Oblikovanje in razvoj spletnih predstavitev Web design Web

Oblikovanje in razvoj spletnih predstavitev (Web design & Web development) Interaktivni mediji Doc. dr. Aleš Hladnik

Spletno mesto in spletna stran n Spletno mesto (Web site) je zbirka spletnih strani (Web pages), slik, zvočnih, video in drugih vsebin n Spletna mesta oz. strani se nahajajo na spletnih – HTTP – strežnikih (Web servers), do njih dostopamo s spletnim brskalnikom (browser) – t. i. HTTP odjemalcem n Napisana so v enem od spletnih jezikov (HTML, XML…) è è Statična spletna mesta: strani so shranjene na strežniku v taki obliki, kot si jih bo uporabnik ogledal Dinamična spletna mesta: informacije se pogosto posodabljajo in spreminjajo vsakič, ko je neka spletna stran zahtevana

Spletna aplikacija n Spletna aplikacija je program, do katerega dostopamo preko omrežja (internet, intranet) n Običajno je sestavljena iz odjemalca, strežnika (spletnega, aplikacijskega) in podatkovne baze. n Uporaba: spletna pošta, spletna prodaja, sistemi Wiki, spletni forumi, blogi, on-line video igre, itd. n Pri načrtovanju in izdelavi spletne aplikacije je poudarek na zagotavljanju učinkovite in čim hitrejše rešitve zadane naloge ali problema, manj na obliki (dizajnu)

Oblikovanje spletnih mest n Namen oblikovanja (Web design) je ustvarjanje spletnega mesta, strani ali aplikacije n Postavljanje enostavnejših elementov – besedilo, točkovne slike, obrazci – na spletno stran poteka s pomočjo HTML / XML značk (tags) n Za prikaz kompleksnejših vsebin – predmetna grafika, animacije, video, zvok – so praviloma potrebni dodatki (plug-ins), npr. Flash, Quick. Time, JRE (Java Runtime Environment).

Spletno oblikovanje Animacija Tipografija Optimizacija spletnih strani Informacijska arhitektura Spletno oblikovanje (Web design) Ustvarjanje spletnih strani Korporativno oblikovanje Načrtovanje interakcij in HCI Grafično oblikovanj e Fotografija Marketing

Korporativno oblikovanje - Vizualna identiteta n Vizualna identiteta – celostna grafična podoba (CGP) – podjetja ali organizacije je “izražanje podobe podjetja v vizualnem jeziku” n CGP je odraz identitete podjetja, kakor jo opredeljujejo njeno poslanstvo, vizija in strategija n Osnovni elementi n Ime podjetja n Zaščitni znak n Logotip n Barve n Tip (družina) pisave www. rlv. si

Informacijska arhitektura n Informacijska arhitektura je prikaz razporeditve vsebin in funkcionalnosti spletne rešitve ter njihove medsebojne povezanosti n http: //www. kalidej. net/mitja/pdf/04_09_informacijska_arhit ektura_spletnega_mesta%20 -%20 Mitja%20 Mavsar. pdf

Optimizacija spletnih strani n Cilj optimizacije spletnega mesta/strani je doseči čim višje mesto pojavljanja med zadetki iskanja z iskalnikom (SERP) n On-site optimizacija: prilagoditve samega spletnega mesta n Ustrezne meta oznake v glavi spletne strani (naslov, meta opisi), ki naj vsebujejo ključne besede n Vsebinska preureditev z namenom optimalne gostote ključnih besed n Poimenovanje grafičnih elementov (oznake img) in opisa grafičnih elementov (oznake alt) n Notranje povezave, ki naj vsebujejo ustrezne ključne besede n Pravilna uporaba naslovov (h 1, h 2, h 3) n Primerna HTML struktura spletne strani in pravilna uporaba CSS

Optimizacija spletnih strani (2) n n Off-site optimizacija: zajema dejavnike izven našega spletnega mesta n Vpisovanje spletnega mesta v iskalnike in imenike n Nakupovanje zunanjih povezav (sporno; Google ga odsvetuje in gleda nanj kot na nedovoljen način optimizacije) n Izmenjava povezav s sorodnimi – čim pomembnejšimi! – spletnimi stranmi Google uporablja svoj algoritem iskanja Page Rank, ki temelji na štetju povratnih povezav n Razvrščanje spletnih strani po več kot 200 kriterijih, katerih teža se dnevno spreminja

Razvijanje spletnih mest n Razvijanje spletnih mest (Web development) predstavlja širši pojem v primerjavi z njihovim oblikovanjem è n Vključuje grafično oblikovanje strani, njihovo kodiranje, programiranje “back-end” sistemov, konfiguriranje spletnih strežnikov, itd. Stopnje razvoja spletnega mesta podobne razvojnim fazam programske opreme è Analiza zahtev è Konceptualni dizajn è Modeliranje in izdelava prototipov è Izdelava è Objava è Vzdrževanje

Spletne tehnologije n n Na strani odjemalca običajno potekata oblikovanje in postavitev, na strani strežnika pa skrb za funkcionalnost in “back-end” sisteme spletnega mesta Tehnologije na strani odjemalca n Tehnologije na strani strežnika è HTML oz. XHTML è PHP è CSS è ASP. Net è Java. Script è SQL è VBScript è Java è …

HTML n HTML (Hypertext Markup Language) – označevalni jezik za oblikovanje večpredstavnostnih dokumentov – spletnih strani n S pomočjo značk (tags) določa vsebino in izgled spletne strani, ki jo prikaže brskalnik n HTML dokument – besedilna datoteka s končnico. htm ali. html, sestavljena iz značk n HTML datoteko lahko ustvarimo in urejamo s preprostim urejevalnikom besedila – npr. MS Beležnica – ali z uporabniku prijaznim grafičnim WYSIWYG programom – npr. Adobe Dreamweaver

HTML elementi n HTML elementom lahko določimo lastnosti – atribute in vsebino n HTML elementi predstavljajo naslove, odstavke, hiperbesedilne povezave, sezname, tabele, slike, vgrajene (embedded) večpredstavnostne programe, itd.

HTML značke Značka Pomen <!--. . . --> Komentar (brskalnik ga ne prikaže) <b>; <i>; <u> Krepko; poševno; podčrtano besedilo Skok v novo vrstico <h 1>, <h 2>, . . . , <h 6> Naslov (header) h 1 do h 6 <img> Določa sliko <ol>; <ul>; <li> Urejen; neurejen seznam; postavka seznama <p> Določa nov odstavek <table> Določa tabelo <hr>; <vr> Vodoravna; navpična črta

HTML hiperpovezave n <a href="http: //www 2. ntf. uni-lj. si/ot/">Spletna stran OT NTF!</a> Značka (anchor) za ustvarjanje povezave do drugega dokumenta n Lastnost href določa ime (npr. URL naslov) ciljne datoteke, ki se odpre, ko uporabnik klikne na povezavo <a href="mailto: webmaster@example. com">Pošlji pošto na: </a> Ciljna datoteka je lahko spletna stran, slika, zvočna datoteka, film ali e-poštni naslov n <a href=“kazalo_strani. htm"><img border="0" src="buttonnext. gif" width="65" height="38"></a> Povezava do ciljne datoteke je lahko tudi slika

XHTML n XHTML je označevalni jezik, sestavljen iz HTML in XML è XML (e. Xtensible Markup Language) je namenjen opisovanju, HTML pa prikazovanju podatkov n XHTML omogoča zapis "well-formed" dokumentov, ki bodo pravilno prikazani v vseh brskalnikih in na vseh napravah (osebni računalniki, mobilni telefoni, PDA) n Najpomembnejše razlike med HTML in XHTML è XHTML elementi morajo biti pravilno gnezdeni è XHTML elementi morajo vedno biti zaključeni è XHTML elementi morajo biti zapisani z malimi črkami è XHTML dokumenti morajo imeti en korenski element

XHTML (2) n Gnezdenje elementov <b><i>Danes dežuje. </b></i> Nepravilno gnezdenje (dovoljeno v HTML, prepovedano v XHTML) n <b><i>Danes dežuje. </i></b> Pravilno gnezdenje (obvezno v XHTML) Zaključevanje elementov <p>To je prvi odstavek. . . <p>to je drugi odstavek. Tule sledi nova vrstica: Nepravilno <p>To je prvi odstavek. . . </p> <p>to je drugi odstavek. </p> Tule sledi nova vrstica: Pravilno

CSS n CSS (Cascading Style Sheets) – predloge slogov, ki določajo izgled spletnih strani n Z njimi določamo pisavo, velikosti črk ter vizualno predstavitev spletne strani. n S pomočjo zunanjih slogovnih predlog lahko spreminjamo izgled in postavitev vseh naših spletnih strani, tako da urejamo zgolj en sam CSS dokument n CSS podpirajo novejši spletni brskalniki (Internet Explorer 4. 0 in več, Netscape Navigator 4. 72, Mozilla, Opera). Spletni brskalniki, ki standarda CSS ne podpirajo, bodo prikazali običajen HTML dokument brez oblikovanja

CSS (2)

Java. Script n Java. Script – skriptni jezik, ki omogoča dodajanje interaktivnosti HTML stranem n Nezahteven programski jezik; NI povezan z Javo n Običajno vključen (embedded) neposredno v HTML stran n Uporaba Java. Scripta je brezplačna n Izvaja različna opravila oz. dejanja è Vstavljanje dinamičnega besedila v HTML stran è Branje in pisanje HTML elementov è Prepoznavanje vrste uporabnikovega brskalnika è Ustvarjanje piškotkov, itd.

PHP in ASP n PHP (Hypertext Preprocessor) – skriptni jezik, ki omogoča ustvarjanje dinamičnih in interaktivnih spletnih mest n Skripte se izvedejo na strežniku (server-side scripting) n Odprtokodno brezplačno programje n PHP datoteka lahko vsebuje besedilo, HTML značke in skripte n Pogosto uporabljen skupaj z Apache (spletni strežnik) na različnih operacijskih sistemih n ASP. NET (Active Server Pages) – Microsoftov skriptni jezik za ustvarjanje dinamičnih in interaktivnih spletnih mest

SQL in JAVA n SQL (Structured Query Language) – programski jezik za dostopanje in upravljanje s sistemi podatkovnih baz kot so Oracle, Sybase, SQL Server, DB 2, Access in druge n JAVA – Objektno orientiran programski jezik soroden C in C++ n Razvit v zgodnjih 90 -ih 20. stoletja v podjetju Sun Microsystems n Kot samostojni program ali kot vgrajena aplikacija (applet), ki jo poženemo iz spletnega brskalnika

LAMP n Odprtokodna programska oprema za spletne strežnike, ki omogoča gostovanje dinamičnih spletnih strani è Linux – operacijski sistem è Apache – program za spletni strežnik è è My. SQL – sistem za upravljanje z relacijskimi podatkovnimi bazami (DBMS) PHP, Perl in/ali Python – skriptni jeziki

Ustvarjanje spletnih mest n n HTML urejevalniki: Beležnica, Word, itd. WYSIWYG urejevalniki: Adobe Dreamweaver, MS Front. Page Predloge (templates), Google Sites, Spletnik (Si. OL) Sistemi za upravljanje z vsebinami (CMS) http: //www. homestead. com/~site/hslo/website/gallery. ffhtml

Adobe Dreamweaver

Google spletna mesta

Sistemi za upravljanje spletne vsebine n Sistem za upravljanje vsebine (Content Management System, CMS) je spletni program za ustvarjanje, urejanje, vzdrževanje, objavljanje in arhiviranje vsebine spletnih mest n Spletno mesto urejajo in vzdržujejo (osvežujejo) uporabniki, brez pomoči podjetja ali osebe, ki je CMS izdelalo n Primeren za skupinsko delo (Collaborative content creation) n Veliko število prostih in odprtokodnih (GPL) programov: Joomla!, TYPO 3, Drupal, Media. Wiki, itd.

CMS Typo 3 “Back-end” pogled upravljalca – možnost spreminjanja vsebine http: //typo 3. com/

CMS Typo 3 “Front-End” pogled uporabnika – ni možnosti spreminjanja vsebine

Joomla! n Trenutno najbolj priljubljeni odprtokodni CMS n Številne funkcije

Oblikovanje za splet n Ločljivost n Brskalniki n Barve (Web-safe colours) n Slike (formati, kompresija) n Pisave http: //www. digital-web. com/articles/designing_for_the_web/

Literatura n W 3 school online free Web building tutorials: http: //www. w 3 schools. com/default. asp n Googlove smernice za optimizacijo spletnih strani: http: //www. google. com/support/webmasters/bin/answer. py ? hl=en&answer=35769 n CMS Joomla! http: //www. joomla. org/