Bazele realizarii unui web site

Design si Dezvoltare Web on June 28th, 2009

Ideea ca “a face un site e usor” a existat de foarte mult timp, multumita unor aplicatii precum Microsoft FrontPage si Adobe Dreamweaver ( ex Macromedia Dreamweaver).

Totusi, a face un site banal cu cateva linkuri, poze si pagini pentru un proiect la scoala difera foarte mult de a face un site profesional, care sa reprezinte o firma, un brand. Ca sa faci un site placut din punct de vedere vizual si optimizat pentru motoarele de cautare si care, in acelasi timp,  sa poata comunica bine cu utilizatorul, sa se poata actualiza de client, care sa fie usor de folosit, etc. etc, este nevoie de alte cunostinte, ce pot pune probleme multor designeri - mai ales daca ei vin din mediul „print”.

Pentru inceput este foarte important:

- sa alegi tehnologia care se potriveste cel mai bine;
- sa ai in vedere ce sistem de administrare a continutului (CMS - content management system) ti se potriveste cel mai bine;
- sa te asiguri ca site-ul o sa fie compatibil cu toate browserele importante;
- sa alegi un plan de hosting bun;
- sa ai grija ca site-ul sa se claseze bine in motoarele de cautare;

Aceste lucruri pot ameti, destul de repede, orice incepator.

Deci, ce merge si ce nu? Ei bine, depinde. In cazul fiecarui proiect, deciziile importante se iau in functie de scopul proiectului, de buget, de timp, de experienta membrilor echipei si de preferintele personale ale celor implicati.

Cu toate ca multe dintre deciziile legate de tehnologie nu sunt luate de designeri, ci de cei care „vorbesc in 1 si 0″, sunt cateva adevaruri universale care se aplica la toate proiectele web. Este foarte important ca orice web designer sa inteleaga aceste fundamente, indiferent ca el face doar css/xhtml, „deseneaza” layout-ul sau ambele.

Scripturi Client-side

Multi web designeri decid inainte de a incepe un site, ca-l vor face in Flash (sau Silverlight de la Microsoft) fara a lua in considerare trioul de standarde web: HMTL, CSS si JavaScript. Ca designeri „adevarati” ce sunt, evita limitele impuse creativitatii de compatibilitatea site-ului cu browserele, asa ca aleg Flash, crezand ca este cea mai buna optiune.

Este de inteles de ce designerii aleg Flash-ul atat de mult. Este un mediu extraordinar pentru a crea experiente vizuale si interactive nemaipomenite. Flash-ul este de asemenea foarte raspandit prin browserele noastre, asa ca este o alternativa demna de luat in considerare, atunci cand te gandesti la problemele legate de compatibilitatea site-ului cu browserele. In plus, Flash-ul, corect folosit, poate obtine un „wow”  de la vizitatorii unui site si chiar de la clientii pentru care lucrezi.

Din pacate, Flash-ul are si cateva mici secrete murdare. De fapt, nu sunt chiar mici!  Inainte de a te apuca sa dezvolti un site in Flash, trebuie sa cunosti urmatoarele:

-  Site-urile facute cu Flash, in comparatie cu site-urile create in HTML, se comporta foarte slab in motoarele de cautare. Specialistii de la Google mai destul de lucru pana cand roboteii care „scaneaza” web-ul vor ajunge la un nivel acceptabil de intelegere a unui fisier Flash.

- Multe site-uri Flash sunt mai putin accesibile persoanelor cu unele handicapuri decat site-urile HTML.

-  Site-urile Flash, de obicei, sunt mai limitate din punct de vedere functional decat site-urile HTML/CSS. Lipsesc elemente cheie precum: posibilitatea de a semnaliza selectarea unui text pentru copy/paste (lipsa highlight-ului), butonul pentru „inapoi”, posibilitatea de a modifica marimea fontului, optiunea de a deschide un link intr-o noua fereastra sau un nou tab.

-  Problemele ce apar la incercarea de a vizualiza site-uri Flash pe telefoanele mobile. Nici macar pe iPhone, care este probabil cel mai avansat gadget mobil din lume, nu pot fi vizualizate fisierele Flash (inca J )

Bineinteles, sunt alte circumstante in care are sens sa folosesti Flash: diverse animatii, filme embed (incastrate), interfete interactive sunt unele dintre ele. Totusi, aceste situatii, rareori implica realizarea in intregime a unui site folosind Flash.

Asa cum site-uri precum csszengarden.com au demonstrat, nu este necesar sa faci un site in Flash ca sa arate bine. Multi designeri se rezuma la Flash pentru ca doar asta stiu, iar clientul sufera cel mai mult. Intre timp, suportul pentru CSS a fost imbunatatit considerabil in browserele din ziua de azi, si, datorita unei game largi de librarii JavaScript, este mult mai usor acum sa scrii JavaScript.

Scripturi Server-side

Desi e obisnuit ca un designer sa detina cateva cunostinte de HTML, CSS si JavaScript, programarea in limbaje server-side este, de obicei, treaba programatorilor.

Totusi, din ce in ce mai multe roluri, cer designerilor sa fie obisnuiti si cu partea de programare, chiar daca acest lucru e necesar doar pentru a actualiza un template al unui CMS.

Iata care sunt cele mai des intalnite limbaje de programare server-side:

- CGI-Pearl: limbajul de programare Perl exista de la inceputurile World Wide Web-ului. Limbajul este un proiect open source aflat in continua dezvoltare si il gasesti instalat la fiecare provider de gazduire web. Oricum, iti recomand sa-l inveti numai daca ai o motivatie intemeiata, pentru ca este foarte dificil

- PHP: Ca si Perl, PHP este de asemenea un limbaj open source. Dar, spre deosebire de Perl, PHP ii atrage pe programatorii incepatori deoarece este foarte usor de invatat si extrem de raspandit printre cei care ofera hosting. Popularitatea PHP-ului este indiscutabila, acesta fiind limbajul ales de multe CMS-uri gratuite si platforme de blogging (pe care le voi prezenta mai tarziu in acest articol).

Pachetul XAMPP, te ajuta sa instalezi PHP si alte tehnologii care se integreaza cu acesta. Acest pachet este disponibil pentru utilizatorii Windows, Mac si Linux.

- ASP.NET: Pentru acei clienti care sunt sceptici privind folosirea unor tehnologii open  source produsul celor de la Microsoft poate fi o alegere potrivita. Mediul de dezvoltare Visual Studio este alegerea naturala pentru a dezvolta site-uri folosind ASP.NET.

Visual Studio simplifica drastic dezvoltarea unui site, dar cu un cost. Este scump si consumator de resurse (cu toate ca exista si o versiune gratuita „express edition”). Din pacate, codul generat de catre Visual Studio este de multe ori ineficient si nu corespunde standardelor, iar unele firme de hosting nu ofera gazduire pentru site-uri realizate cu ASP.NET

- Ruby: Limbajul Ruby exista de peste 10 ani, dar popularitatea lui a crescut recent, fiind alimentata de Ruby on Rails (ce este Ruby on Rails sau mai pe scurt RoR?). In ciuda numelui neobisnuit, RoR forteaza dezvoltatorul sa urmeze cele mai bune practici in privinta structurii, reutilizarii codului si testarii. Exista o oarecare curba de invatare, dar cei care persista, de multe ori devin evanghelisti in favoarea RoR.

- Adobe Flex: Flex se refera la o colectie de tehnologii Adobe folosite pentru a dezvolta Rich Internet Aplications (sau RIA) - aplicatii online cu un grad mare de interactivitate. In Flex, interfetele sunt definite folosind un limbaj numit MXML, interactiunile sunt definite cu ActionScript, iar produsul final ruleaza ca un fisier Flash. Adobe ofera gratuit kitul de dezvoltare Flex, dar daca vrei sa folosesti Flex in mod regulat, atunci se merita sa cumperi varianta pro a acestuia: Flex Builder Pro.

Dupa cum poti vedea, ai mai multe posibilitati atunci cand vine vorba de dezvoltarea unui proiect online. Efortul de a invata diferentele fundamentale dintre aceste limbaje si tehnologii (desi nu este obligatoriu, dupa cum spune si Alexandru Bucur ), te vor face un web designer mai bun, chiar daca, doar pentru simplu motiv ca vei putea comunica mai eficient cu colegii din celelalte departamente (in cazul in care nu vrei sa lucrezi ca freelancer - dar asta este alta poveste)

Alegi un sistem de management al continutului (CMS - Content Management Systems) personalizat sau unul deja consacrat?

Mai sus, am argumentat de ce  web designerii ar trebui sa invete limbaje server-side. Acum o sa-ti recomand sa folosesti un limbaj alternativ pentru a dezvolta un web site. Poate ca e putin ametitor, dar ai rabdare.

Iata de ce ar trebui sa dezvolti un site folosind cat mai putin cod personalizat cu putinta:

Cu siguranta, in atmosefera competitiva din online, este un avantaj sa fii programator si designer in acelasi timp, dar realitatea este ca multe site-uri exista datorita continutului lor. Pentru astfel de site-uri un CMS (Content Management System) este satisfacator.

Una dintre cele mai dificile provocari in realizarea unui web site este: sa te asiguri ca beneficiarul poate actualiza continutul site-ului o perioada indelungata dupa terminarea proiectului. Un CMS este elementul cheie in a realiza acest scop. Chiar daca exista clienti care invata mai greu  si clienti care invata mai repede, gasim pe piata CMS-uri cu care clientii se pot obisnui rapid, fara sa posede cunostinte tehnice de specialitate.

Ai mai multe avantaje daca folosesti un CMS cu renume, decat daca dezvolti propriul CMS:

- Securitatea: Folosind un CMS care evolueaza constant insemna ca la fiecare upgrade acesta primeste imbunatatiri de securitate (si nu numai). Aceste actualizari pot repara gauri de securitate nedescoperite pana atunci, pot adapta produsul la schimbari in modul de operare al browserelor sau pot imbunatati suportul pentru versiuni actualizate ale bazelor de date.

Atentie! Daca ai de gand sa scrii cod personalizat accesibil online fara sa investesti timp in teste si actualizari viitoare, poti compromite securitatea web site-ului clientului tau.

- Familiarizarea: Poate ca nu exista CMS-ul perfect, dar este un numar finit de CMS-uri pe piata. Poate, daca ai noroc, clientul tau a mai folosit tipul de CMS pe care-l propui pentru proiectul respectiv. Acest lucru poate fi pe placul clientului si te va face pe tine sa arati bine in ochii lui.

- Administrare si suport: Atunci cand codul folosit la site este complet personalizat, clientul tau va depinde mai mult de tine, sa-i aduci viitoare imbunatatiri sau schimbari, decat daca ai fi folosit un CMS consacrat. Dependenta pe care o vei crea in acest mod o sa ti se pare un mod inteligent de a-l lega pe client de serviciile tale, dar o astfel de practica ar putea strica relatia dintre tine si el, in cazul in care tu nu-i vei putea indeplini anumite cerinte la timp.

Poate ca e mult mai bine sa folosesti un CMS pentru care exista o comunitate mare de dezvoltatori, astfel incat, daca tu nu-ti poti ajuta clientul din diverse motive, ii poti recomanda pe altcineva. Poate acel cineva este un prieten de-al tau, iar in acest caz, toata lumea este fericita:

-  Prietenul, datorita faptului ca i-ai trimis un client;
-  Clientul,  pentru ca i-ai recomandat pe cineva de incredere;
-  Tu, pentru ca ai facut o afacere buna si poate prietenul tau iti va trimite si el un client, daca se va ivi ocazia.

Acum ca „te-am convins” sa nu faci un web site de la zero, probabil vrei sa pui urmatoarea intrebare „Ce CMS trebuie sa folosesc?” Aceasta intrebare a nascut multe discutii aprinse intre dezvoltatori, iar raspunsul pe care-l dau eu este: „Depinde”

Din pacate, scopul acestui articol nu este sa fac o comparatie intre CMS-urile disponibile. Exista mai multi factori demni de luat in considerare.

Acestea sunt doar cateva dintre intrebarile  pe care ar trebui sa ti le pui inainte de a alege un CMS:

- Contine toate caracteristicile necesare pentru dezvoltarea proiectului meu?

- Exista unele sisteme anterioare cu care trebuie sa interactioneze CMS-ul? (aplicatii mai vechi, diverse baze de date, etc)

-  Cat de mare este comunitatea dezvoltatorilor acestui CMS?

-  Clientul este de acord cu folosirea unei solutii open source?

-  Care este planul de extindere al site-ului respectiv?

Un CMS open source este solutia perfecta pentru clientii cu un buget limitat. Instrumente precum Drupal, Joomla, WordPress si eZ Publish sunt toate open source si sunt scrise in PHP. Fiecare dintre acestea are puncte forte si puncte slabe, dar merita luate in calcul.

Un loc excelent pentru a incepe cercetarea pentru a alege un CMS este opensourcecms.com. Site-ul ofera demonstratii a peste 90 de CMS-uri open source pe care le poti testa fara a fi nevoit sa instalezi ceva.

Clasarea in motoarele de cautare.

Bravo! ai lansat site-ul si acum publici continut interesant si unic in fiecare zi. Probabil ca vizitatorii se ingramadesc pe site-ul tau, nu-i asa? Ei bine, nu prea cred. Daca oamenii nu-ti pot gasi site-ul, cum vor stii de existenta lui?

Daca statisticile iti arata ca doar doua persoane iti viziteaza site-ul in fiecare zi (si tu esti una din cele doua), atunci trebuie sa lucrezi la optimizarea site-ului pentru motoarele de cautare (SEO, pe scurt, in engleza)  - Search Engine Optimization (SEO)

SEO este un aspect important al fiecrui web site comercial si sunt multe tehnici legale pe care trebuie sa le folosesti pentru a te asigura ca oamenii iti gasesc site-ul prin intermediul motoarelor de cautare.

Imi este imposibil, in acest articol, sa-ti descriu cum sa dezvolti o strategie complexa de SEO, dar daca imi urmezi sfatul si folosesti HTML in loc de Flash, esti pe drumul cel bun.

Multi cred ca pozitionarea unui site in rezultatele unui motor de cautare este strict legata de PageRank-ul site-ului respectiv. Gresit! PageRank este un termen folosit de Google pentru a determina importanta unui web site. Pe scurt, PageRank-ul lucreaza cam asa: cu cat exista mai multe link-uri care trimit catre un anumit site, cu atat Google ii acorda un PageRank mai mare.

In realitate, algoritmul care determina PageRank-ul unui site este secret si se afla intr-o schimbare constanta, incercand sa tina pasul cu schimbarile din Web. Totusi, putem spune ca PageRank-ul este unul dintre elementele care influenteaza pozitia in Google a rezultatelor cautarilor.

NOTA: Nu uita ca Google este doar unul dintre motoarele de cautare existente in momentul de fata si poate ca el domina acum, dar  acest lucru se poate schimba in viitor (lumea deja vorbeste din ce in ce mai des despre Bing). Nu este recomandat sa te concentrezi doar pe un motor de cautare.

Un web site nu o bucata de hartie, el este un produs software.

Este important, ca web designer, sa intelegi ce se intampla in partea tehnica a dezvoltarii unui site, altfel „capodoperele” tale nu vor atinge un potential maxim din cauza tehnologiilor care le implementeaza.

Daca intelegi cand trebuie sa alegi HTML si cand Flash, plusurile si minusurile diverselor limbaje server-side, cum sa alegi un CMS si ce factori influenteaza pozitionarea unui site in motoarele de cautare, vei fi capabil sa oferi clientilor tai servicii mult mai bune.

10 Raspunsuri la “Bazele realizarii unui web site”

  1. Andrei Dutu says:

    Doua chestii am de zis si eu, na ca sa zic si eu ceva:

    CMS nu are legatura cu compatibilitatea cu browserele. Degeaba folosesti WordPress daca ai o tema varza. ;)
    Pagerankul nu influenteaza aproape deloc serp-ul. Exista o legatura intre ele, dar nu la modul in care sa influenteze direct pozitia in Google.

  2. Catalin says:

    Pai n-a zis nimeni ca CMS-urile ar avea legatura cu compatibilitatea cross-browser. Si inca mai astept cu nerabdare comentariile lui Coolgoose - asta daca va intra sa citeasca :D

  3. Andrei Dutu says:

    “Trebuie sa ai in vedere ce sistem de administrare a continutului (CMS - content management system) trebuie folosit pentru ca site-ul sa fie compatibil cu toate browserele”

    Eu de acolo aia am inteles. :P

  4. Catalin says:

    hmm ai dreptate :) trebuie sa vad daca am gresit eu sau spionul ala mic care mi-a corectat articolul :) - ca se plangea ca nu intelege ce vreau sa spun in unele paragrafe :)

  5. Catalin says:

    edit: nu vreau sa dau vina pe nimeni :) e doar vina mea ca nu am citit si eu articolul dupa ce l-a corectat Andreea :P

  6. CoolGoose says:

    1. Un cms are oarecum legatura cu compatibilitatea cross-browser deoarece trebuie investigat daca back-end-ul (aka admin area) este compatibil cu diferitele browsere deoarece unii dezvoltatori au considerat ca nu merita sa mai piarda timp cu compatibilitatea IE6 de exemplu.
    2. Flash-ul are si problema timpului de incarcare (asta la nivelul de baza, dar e vorba de web-designeri nu web-developeri pana la urma)
    3. Silverlight nu e destul de extins ca sa merite deranjul.
    4. Folosind un framework de javascript scapi de multe probleme de compatibilitate cu diferitele browsere (inclusiv probleme de css deoarece cam orice framework de javascript are un system de aplicat stiluri pe css (inclusiv css3)) stiind sa foloseasca automat de ce hack-uri are nevoie ( ca exemplu pot da opacity care nu e suportat de IE6 /7/ dar folosind opacity ca proprietate de css din jquery acesta stie sa aplice de fapt controller-ul de activeX al microsoft)

    ps
    Ruby nu e folosit direct pe web mai de nimeni, ci doar prin intermediul unui framework, din care 90% este reprezentat de catre Ruby on Rails (mai ales in urma merge-ului cu Merb)
    De asemenea nu trebuie uitat python + framework-uri (Django | Turbogears | Pylons).

  7. Catalin says:

    si castigatorul premiului de 10 beri corona pt cel mai folositor comentariu - coolgoose :D

    PS. vreau si eu sa vad live pe cineva care lucreaza cu ruby :) si framework-ul de js :D

    care te oferi sa faci un demo :)

  8. Cred ca sunt mult mai multe lucruri de spus despre ce uneori trebuie folosit Flash. Oricum problemele pe care le mentionai tin strict de cunostintele programatorilor de ActionScript, cat despre SEO, s-a rezolvat de cateva saptamani total. ;)

  9. “despre de ce”.

  10. Catalin says:

    bine de stiu ca s-a rezolvat problema SEO pentru cei care folosesc Flash-ul. O sa ma documentez si eu mai bine ca sa nu dezinformez populatia cu informatiile mele :) .
    Mersi pentru “trasul de maneca” :P

Lasa un raspuns