Veb dizajn: HTML5, CSS3 i WEB3.0

Veb dizajn predstavlja lice web prezentacije koji, u kombinaciji sa pratećim tehnologijama, čini jednu celinu. Web prezentacija je na neki način interaktivna reklama, jer vrši interakciju sa korisnikom. Web prezentacija, čija se funkcionalnost razvija (SEO, kodiranje, programiranje, dizajn), može se nazvati web produkcija. Web tehnologije napreduju a napreduje i dizajn paralelno sa njima. Zato bi dizajner, sam po sebi, trebalo da se upozna sa mogućnostima aktuelnih i dolazećih tehnologija, kako bi u potpunosti mogao da iskoristi njihov potencijal prilikom dizajniranja web stranica. Dobro je da web dizajner radi i druge poslove u okviru web produkcije generalno, kao i da poznaje programiranje u oblasti web-a.

UI – Korisničko okruženje (engl. User Interface), predstavlja prvu interakciju sa korisnikom i jako je bitno da planiranje i implementacija korisničkog okruženja bude što jednostavnija, funkcionalnija i dopadljivija korisniku, jer jako je bitno i korisničko iskustvo (UX).

UX – Korisnički doživljaj (engl. User Experience) predstavlja emociju korisnika pri korišćenju web prezentacije. Jako je bitno da korisnik ne bude zatrpan reklamama i drečavim bojama (ukoliko se ne radi o čudnom korisniku). Bitno je i da sadržaj bude dostupan i funkcionalan i usko povezan sa korisničkim okruženjem. Znači, korisničko okruženje je dizajn arhitekture, plastično rečeno, dok je korisničko iskustvo subjektivni doživljaj i vezan je više za vizuelnu percepciju korisnika. Doslovno, važno je uskladiti interakciju korisnika sa njegovim audio-vizuelnim doživljajem. Trebalo bi pratiti postojeće propise, mislim od doctype-a, u različitim standardima html-a, na primer, do problema kompatibilnosti pregledača, različite veličine ekrana… Standardi se razvijaju iz dana u dan i dolaze nove tehnologije koje omogućavaju da se standardi poštuju a da se zadovolje svi aspekti korisničkog doživljaja. Ovo je na neki način bila i uvertira za tehnologije koje želim opisati i koje nas čekaju u budućnosti i već imaju praktičnu primenu u sadašnjosti. U pitanju su html5 i css3. Uz njih ću najjednostavnije opisati i neki dobar UI framework kao i plastičnu definiciju grid-a. Da počnemo prvo sa GRID sistemom koji je odličan za implementaciju i arhitekturu UI – korisničkog okruženja.

Grid najjednostavnije rečeno predstavlja redove i kolone ili mnoštvo horizontalnih i vertikalnih linija koje omogućuju lakše dizajniranje web stranice. Odredićemo na primer 10 kolona širine 100 piksela i složićemo ih u klase kaskadnih stilova a onda ćemo pozivati klase tipa – dve kolone ili tri kolone. Na taj način omogućavamo simetričnost ili balans web stranica ukoliko želimo ispoštovati standarde raznih web pregledača. Grid može biti odličan pri korišćenju css3 media query-ja. To su css upiti koji određuju koji će se stil koristiti pri različitim veličinama browser-a. Sve što treba uraditi je dobra definicija grid-a i onda samo klasama koje smo pomenuli pozivamo broj kolona i slažemo ih u web stranicu. Odličan UI framework zasnovan na grid-u je SKELETON UI Framework (http://www.getskeleton.com/). Besplatan je, jako efikasan i jednostavan za upotrebu. Toliko za sada o grid-u.

HTML5 predstavlja nastavak poznatog standarda HTML. Prate ga nove funkcionalnosti (tagovi) i semantički elementi, kao i novine u samoj CLIENT SIDE tehnologiji. U dobrom delu može zameniti flash, bar što se tiče player-a, animacija i tako dalje. Pritom nije nikakav dodatak, već mogućnost browser-a i nije vlasnički što mu daje ogromnu prednost u odnosu na Adobe. Adobe-ov flash će i dalje imati primenu na internetu, na primer u RIA (Rich Internet Applications), igrama, multimedijalnim programa i slično. Sigurno je da će HTML5 biti praktičan i jednostavan standard. Takođe HTML5 je cross-platform što ga čini izuzetno kompatibilnim, bar kada je reč o novijim browser-ima. HTML5 je standard koji evoluira, tako da se ne može sa sigurnošću reći kad će biti potpuno završen. Važno je da HTML5 ima mogućnosti – kao što je geolokacija, web apps, video i grafika mogu biti korišćeni odmah, ako Vaš browser ima podršku. Uz HTML5 ne dolazi digital rights management (DRM) tehnologija za sprečavanje kopiranja, te stoga neke kompanije moraju koristiti čak i vlasničke tehnologije baš iz tog razloga. To je razlog zašto će Flash ili SilverLite biti još na „aparatima“. Sve u svemu HTML5 je standard koji se kreće u pravcu web3.0 što ga i čini perspektivnim. Na slici je prikazan semantički sklop jedne obične HTML5 strane i objašnjene su novine(tagovi). Umesto div tagova pojavljuju se tagovi koji sadrže semantička svojstva (header, footer, article…). Te tagove će pretraživači jasnije tumačiti i dizajneri će imati bolji uvid u dizajniranje korisničkog okruženja.

Slika: Semantički sklop jedne obične HTML5 strane

CSS je produkt W3C-a a pojavio se sa HTML-om 4.0 kao rešenje koje je proizašlo iz sve veće potrebe za odvajanjem sadržaja stranice od dizajna. CSS3 predstavlja prošireni standard CSS-a i donosi nove mogućnosti na polju interaktivnih i dinamičnih stranica. Neke od mogućnosti novog standarda su u vidu tagova doneli novine tipa zaobljenih stranica, tranzicija, senke teksta, tekstura pozadine, gradijenta, višestrukih kolona… Ovaj standard bi trebalo u nekoj budućnosti da zameni veliki deo grafičkog dizajna kroz same mogućnosti CSS3-a, jer bi tada CSS3 mogao da „crta“ po stranici. U nekim segmentima može zameniti i flash stranice jer ima mogućnost rotiranja sadržaja, animacija, tranzicije… Još jedna interesantna novina u CSS3 standardu je CSS3 Media Queries. Ta novina donosi rešenje za različite ekrane i učitava različite stilove po upitima. Zanimljivi izvori:
http://www.css3.info/
http://www.css3.com/
http://www.css3maker.com/

Web nove generacije, kako ga zovu, plastično – semantički web, dolazi u vidu kombinacije više tehnologija kao što su: RDF, XML, HTML5, CSS3… Mogućnost ovog koncepta bila bi između ostalog i ta da pretraživači i „agenti“ (botovi) iščitavaju metapodatke iz proširivih markup-a, sakupljaju ih, slažu, integrišu i isporučuju u “inteligentnoj” formi krajnjem korisniku. Cilj web3.0 uopšteno je interakcija sa korisnikom i prijateljsko okruženje kao i koncept “inteligentnog” web sadržaja. Pošto se web3.0 ne može opisati u par rečenica, predlažem da pretražite internet takvim upitom, jer je web3.0 veoma širok koncept a opet jako jednostavan…
Izvor za početak avanture:
http://en.wikipedia.org/wiki/Semantic_web