Web design

Prin web design sau webdesign se Intelege In general realizarea de siteuri web, de la momentul conceperii structurii si interfetei grafice si pana la finalizarea programarii si introducerea propriu-zisa a datelor - imagini, text, fisiere si alte elemente - care alcatuiesc continutul siteului.

1. Scurt istoric

Primul webdesigner a fost chiar inventatorul www-ului, Tim Berners Lee, care a publicat primul site din istorie In anul 1991. La Inceput siteurile nu erau nici pe departe atat de complexe si Incarcate grafic cum sunt In prezent, limbajul utilizat - HTML - fiind nu prea puternic si permitand numai o serie limitata de formatari, precum si inserarea de link-uri, pentru a putea "lega" paginile Intre ele, webdesignul fiind, de fapt, mai mult "programare" web.
In prezent preocuparea pentru aspectul grafic al siteurilor, devenite puternice instrumente publicitare si comerciale, justifica In Intregime denumirea de "webdesign", iar tehnologiile utilizate s-au diversificat si au devenit din ce In ce mai complexe. Firmele care produc siteuri lucreaza cu angajati specializati pentru fiecare etapa a dezvoltarii unui site, de la stadiul de conceptie grafica la programare si editare de continut pentru SEO (Search Engine Optimization - optimizarea siteurilor pentru motoarele de cautare). Siteurile actuale sunt din ce In ce mai mult axate pe animatie interactiva si dinamism, aceste deziderate fiind Indeplinite de exemplu de cunoscutul program Adobe Flash, precum si de alte programe aparute dupa acesta, care pot genera automat fisiere animate cu extensia .swf.

2. Introducere

Siteurile, In forma in care ele se afiseaza In browsere, sunt de fapt interpretari vizuale, menite sa fie Intelese de orice persoana, fara sa fie necesare cunostinte In domeniul informaticii sau al secventelor de cod redactate de programatori. Acestia lucreaza ori In diverse limbaje din care apoi se genereaza limbajul specific de script al internetului HTML (HyperText Markup Language), ori direct in HTML. Daca nu ar exista browserele care stiu sa interpreteze limbajul de script si sa afiseze rezultatul pe ecran, siteurile ar fi doar Insiruiri de texte neformatate si, cel mai probabil, fara imagini. In principiu, limbajul HTML indica locul In care sa se afiseze diversele elemente vizibile, dimensiunea, culoarea, precum si alti parametri care confera unei pagini web atat aspectul dorit cat si functionalitate optima.

3. Ce este necesar pentru realizarea unui site?

Orice site web trece in mod necesar prin mai multe etape:

1. Concretizarea ideilor
2. Schitarea elementelor vizuale si compunerea structurii siteului
3. Programarea paginilor web in (HTML, CSS, Javascript etc.)
4. Testarea siteului
5. Schimbarea partilor care nu corespund tintei
6. Publicarea siteului pe Internet sau intranet
7. Modificarea ulterioara si relansarea pe Internet, dupa nevoile clientilor sau ale timpului

Dupa stabilirea structurii siteului se intra In etapa conceperii unei interfete grafice care, pe langa scopul pur estetic, trebuie sa faciliteze accesul vizitatorilor la toate sectiunile publice ale siteului, sa fie comprehensiva si, nu in ultimul rand, sa asigure si incarcarea rapida a paginilor, prin modul in care vor fi realizate diversele elemente grafice.

Din punctul de vedere al designului, siteurile sunt in mare parte alcatuite din tabele cu linii invizibile in care se insereaza imagini (sigla, imagini-simbol, butoane etc.) si texte, in asa fel incat aspectul sa fie unitar si sa nu se sesizeze vizual organizarea tabelara.
Celulele tabelelor:

* pot avea fundaluri colorate,
* pot fi alcatuite din imagini si desene care se repeta pe orizontala sau pe verticala,
* pot fi umplute cu texturi mai mult sau mai putin neregulate (ca pietrisul, frunzisul etc.)
* sau pot ramane si albe.

Este de notat ca actualmente locul tabelelor a fost luat de popularul mod de formatare CSS, care reprezinta o solutie mai "curata" din punctul de vedere al programarii decat utilizarea tabelelor.

Astfel, graficianul utilizeaza initial un program de grafica (de exemplu, Adobe Photoshop sau Corel PhotoPaint) pentru a concepe un "instantaneu" al siteului respectiv. El creeaza forma butoanelor, dimensioneaza si pozitioneaza sigla siteului, stabileste locatia meniurilor, dimensiunea si aspectul textului, schema de culori a siteului, precum si alte aspecte specifice. Datorita faptului ca aceasta imagine primara este apoi "taiata" in imagini mai mici, care urmeaza sa fie inserate in tabele sau definite in CSS, din punct de vedere grafic, siteurile se supun acelorasi reguli de compozitie ca si lucrarile grafice tiparite, Imbinate insa cu o serie de parametri tehnici care permit implementarea ulterioara a elementelor de programare. Astfel, un "grafician de web" va lucra altfel decat un "grafician de print", incercand sa anticipeze locurile unde pot aparea probleme potentiale si sa gaseasca solutii pentru a evita orice deformare a siteului, indiferent daca urmeaza sa fie utilizate dimensiuni relative sau absolute. De exemplu, un grafician de web stie ca este preferabil sa utilizeze fundaluri de tip "culoare indicata din cod" sau de tip "imagine repetata pe axa x sau y", decat fundaluri dintr-o singura imagine foarte mare, care ar reduce mult viteza de incarcare a siteului.

Dupa ce imaginea initiala a fost Impartita in mai multe imagini mici, acestea se introduc in tabele sau se pozitioneaza cu ajutorul CSS, fie prin scrierea directa a codului HTML intr-un program simplu de editare text, cum ar fi Notepad, fie prin utilizarea unui editor HTML, in general de tip WYSIWYG, cum ar fi Dreamweaver. Astfel se genereaza un prim "schelet" al siteului, denumit "mock-up", care simuleaza siteul si toate functiile lui, fara a avea insa continutul real, ci numai texte de tip lipsum si imagini provizorii. In cazul in care este vorba de un site simplu, cu putine pagini, tot ce mai ramane de facut este introducerea continutului final. In cazul in care este vorba de un site complex, de exemplu un catalog sau un magazin virtual, mock-up-ul intra in etapa de programare complexa, care poate utiliza limbaje mai complicate (de tip server-side ca de exemplu PHP, ASP, sau si de tip client-side) precum si baze de date.

Sursa* Wikipedia.