Веб дизајн: HTML5, CSS3 и WEB3.0

Веб дизајн представља лице web презентације који, у комбинацији са пратећим технологијама, чини једну целину. Web презентација је на неки начин интерактивна реклама, јер врши интеракцију са корисником. Web презентација, чија се функционалност развија (SEO, кодирање, програмирање, дизајн), може се назвати web продукција. Web технологије напредују а напредује и дизајн паралелно са њима. Зато би дизајнер, сам по себи, требало да се упозна са могућностима актуелних и долазећих технологија, како би у потпуности могао да искористи њихов потенцијал приликом дизајнирања web страница. Добро је да web дизајнер ради и друге послове у оквиру web продукције генерално, као и да познаје програмирање у области web-а.

UI – Корисничко окружење (енгл. User Interface), представља прву интеракцију са корисником и јако је битно да планирање и имплементација корисничког окружења буде што једноставнија, функционалнија и допадљивија кориснику, јер јако је битно и корисничко искуство (UX).

UX – Кориснички доживљај (енгл. User Experience) представља емоцију корисника при коришћењу web презентације. Јако је битно да корисник не буде затрпан рекламама и дречавим бојама (уколико се не ради о чудном кориснику). Битно је и да садржај буде доступан и функционалан и уско повезан са корисничким окружењем. Значи, корисничко окружење је дизајн архитектуре, пластично речено, док је корисничко искуство субјективни доживљај и везан је више за визуелну перцепцију корисника. Дословно, важно је ускладити интеракцију корисника са његовим аудио-визуелним доживљајем. Требало би пратити постојеће прописе, мислим од doctype-а, у различитим стандардима html-а, на пример, до проблема компaтибилности прегледача, различите величине екрана… Стандарди се развијају из дана у дан и долазе нове технологије које омогућавају да се стандарди поштују а да се задовоље сви аспекти корисничког доживљаја. Ово је на неки начин била и увертира за технологије које желим описати и које нас чекају у будућности и већ имају практичну примену у садашњости. У питању су html5 и css3. Уз њих ћу најједноставније описати и неки добар UI framework као и пластичну дефиницију grid-а. Да почнемо прво са GRID системом који је одличан за имплементацију и архитектуру UI – корисничког окружењa.

Grid најједноставније речено представља редове и колоне или мноштво хоризонталних и вертикалних линија које омогућују лакше дизајнирање web странице. Одредићемо на пример 10 колона ширине 100 пиксела и сложићемо их у класе каскадних стилова а онда ћемо позивати класе типа – две колоне или три колоне. На тај начин омогућавамо симетричност или баланс web страница уколико желимо испоштовати стандарде разних web прегледача. Grid може бити одличан при коришћењу css3 media query-ја. То су css упити који одређују који ће се стил користити при различитим величинама browser-а. Све што треба урадити је добра дефиниција grid-а и онда само класама које смо поменули позивамо број колона и слажемо их у web страницу. Одличан UI framework заснован на grid-у је SKELETON UI Framework (http://www.getskeleton.com/). Бесплатан је, јако ефикасан и једноставан за употребу. Толико за сада о grid-у.

HTML5 представља наставак познатог стандарда HTML. Прате га нове функционалности (тагови) и семантички елементи, као и новине у самој CLIENT SIDE технологији. У добром делу може заменити flash, бар што се тиче player-а, анимација и тако даље. Притом није никакав додатак, већ могућност browser-а и није власнички што му даје огромну предност у односу на Adobe. Adobe-ов flash ће и даље имати примену на интернету, на пример у RIA (Rich Internet Applications), играма, мултимедијалним програма и слично. Сигурно је да ће HTML5 бити практичан и једноставан стандард. Такође HTML5 је cross-platform што га чини изузетно компатибилним, бар када је реч о новијим browser-има. HTML5 је стандард који еволуира, тако да се не може са сигурношћу рећи кад ће бити потпуно завршен. Важно је да HTML5 има могућности – као што је геолокација, web apps, видео и графика могу бити коришћени одмах, ако Ваш browser има подршку. Уз HTML5 не долази digital rights management (DRM) tехнологија за спречавање копирања, те стога неке компаније морају користити чак и власничке технологије баш из тог разлога. То је разлог зашто ће Flash или SilverLite бити још на „апаратима“. Све у свему HTML5 је стандард који се креће у правцу web3.0 што га и чини перспективним. На слици је приказан семантички склоп једне обичне HTML5 стране и објашњене су новине(тагови). Уместо div тагова појављују се тагови који садрже семантичка својства (header, footer, article…). Те тагове ће претраживачи јасније тумачити и дизајнери ће имати бољи увид у дизајнирање корисничког окружења.

Слика: Семантички склоп једне обичне HTML5 стране

CSS је продукт W3C-а а појавио се са HTML-ом 4.0 као решење које је произашло из све веће потребе за одвајањем садржаја странице од дизајна. CSS3 представља проширени стандард CSS-а и доноси нове могућности на пољу интерактивних и динамичних страница. Неке од могућности новог стандарда су у виду тагова донели новине типа заобљених страница, транзиција, сенке текста, текстура позадине, градијента, вишеструких колона… Овај стандард би требало у некој будућности да замени велики део графичког дизајна кроз саме могућности CSS3-а, јер би тада CSS3 могао да „црта“ по страници. У неким сегментима може заменити и flash странице јер има могућност ротирања садржаја, анимација, транзиције… Још једна интересантна новина у CSS3 стандарду је CSS3 Media Queries. Та новина доноси решење за различите екране и учитава различите стилове по упитима. Занимљиви извори:
http://www.css3.info/
http://www.css3.com/
http://www.css3maker.com/

Web нове генерације, како га зову, пластично – семантички web, долази у виду комбинације више технологија као што су: RDF, XML, HTML5, CSS3… Могућност овог концепта била би између осталог и та да претраживачи и „агенти“ (ботови) ишчитавају метаподатке из проширивих markup-а, сакупљају их, слажу, интегришу и испоручују у “интелигентној” форми крајњем кориснику. Циљ web3.0 уопштено је интеракција са корисником и пријатељско окружење као и концепт “интелигентног” web садржаја. Пошто се web3.0 не може описати у пар реченица, предлажем да претражите интернет таквим упитом, јер је web3.0 веома широк концепт а опет јако једноставан…
Извор за почетак авантуре:
http://en.wikipedia.org/wiki/Semantic_web