Cum sa faci o pagina web

Acest articol îşi propune să demonteze unul dintre “miturile” cele mai vehiculate pe piaţa de web design din România, şi anume că pentru realizarea unui site ai nevoie de programe puternice cum ar fi Macromedia Dreamweaver (pentru cod şi asamblare), Adobe Photoshop (pentru editarea imaginilor) sau Macromedia Flash (pentru animaţii).

Din fericire, lucrurile nu stau deloc aşa. Un site nu este nimic altceva decât un produs oarecare şi, drept urmare, trebuie gândit în termeni de investiţie şi recuperare a investiţiei. Dacă firma la care lucraţi are nevoie de un site simplu, fără efecte speciale şi alte brizbrizuri, nu are rost să cheltuiţi aproximativ 1.700 de euro (cam atât costă licenţele pentru programele de mai sus) sau să riscaţi o amendă de 2.500 de euro (dacă le instalaţi fără licenţă, din exact acelaşi motiv pentru care nu aveţi nevoie de un Porsche pentru a merge până vizavi la alimentara. Sau, ca tânăr proprietar al unei firme de web design, nu are rost să investeşti în asemenea licenţe până ce nu eşti sigur că vei avea clienţi pe măsură, care să justifice investiţia. S-ar putea să ai surpriza de a constata că majoritatea clienţilor tăi vor de fapt numai site-uri mici, care să-ţi aducă venit mai mult din întreţinerea, decât din realizarea lor.

Programele amintite mai sus sunt indispensabile numai firmelor profesioniste de web design, care trebuie să facă faţă în mod curent unor cerinţe specifice venite din partea unei clientele diverse. În mod obişnuit, când ceea ce doriţi să realizaţi nu e decât o pagină personală sau un site de firmă care să fie pur şi simplu informativ, uşor de navigat şi plăcut ochiului, este bine să încercaţi să-l faceţi cu cât mai puţine cheltuieli posibile.

Se poate spune că la baza site-urilor web de succes stau patru formate:

* .html - paginile ca atare - de crearea cărora se ocupă editorul html
* .jpg, .gif - imaginile - de care se ocupă editorul de imagini
* .swf - animaţiile - de care se ocupă programul de animaţie vectorială.

În continuare vom vedea care sunt cele mai bune soluţii gratuite pentru crearea paginilor web, în cazul în care folosim sistemul de operare Windows.

Editorul HTML: Alternativele la Dreamweaver - Macromedia Dreamweaver e un program cu ajutorul căruia web designerii profesionişti “asamblează” (adică montează elementele unui site, pornind de la texte, imagini, animaţii şi terminând cu paginile site-ului. Este un editor HTML de tip WYSIWYG (”what you see is what you get”, adică poţi construi site-ul direct pe interfaţa de previzualizare, fără a fi nevoit să scrii cod html. Dreamweaver MX 2004 este cel mai cunoscut editor de tip WYSIWYG de pe piaţă, fiind cel mai robust, uşor de folosit şi stabil dintre toate. Pe lângă el mai există însă şi altele, mai puţin folosite, cum ar fi Microsoft Frontpage sau Adobe GoLive. De fapt, adevăratul avantaj al folosirii acestor programe este acela că ele includ numeroase bucăţi de cod “ready-made” şi instrumente utile, cu ajutorul cărora proiecte voluminoase pot fi finalizate extrem de rapid.

Pe lângă editoarele de tip WYSIWYG mai există pe piaţă şi editoarele HTML simple, în care web designerul construieşte site-ul pe baza cunoaşterii codului (X)HTML. Designerul introduce codul necesar afişării paginii dorite, apoi compilează pagina şi o afişează în browser. Practic, cu ajutorul unui editor HTML simplu orice web designer poate obţine exact aceleaşi rezultate pe care le-ar obţine şi cu ajutorul lui Dreamweaver. Singura diferenţă constă în productivitatea îmbunătăţită adusă de Dreamweaver.

Oferta actuală de editoare HTML de pe piaţă e impresionantă şi cuprinde atât editoare care costă bani (dar nu mai mult de 40-50 de euro), cât şi editoare gratuite. Pe noi ne interesează, evident, ultimele (cele gratuite). Dintre acestea vom prezenta trei care ni s-au părut că ies în evidenţă în mod deosebit prin facilităţile deosebite oferite web designer-ului.

1. Ace HTML 5.0.8 Freeware - interfaţa este plăcută şi uşor de înţeles, cu fereastra principală ruptă între o zonă de editare (în dreapta) şi o zonă organizatorică (în stânga) de unde puteţi introduce automat diverse instrucţiuni html, puteţi edita fişiere etc. Programul are instrumente pentru aproape tot ce trebuie să existe într-o pagină web - de la instrumentul care vă ajută să introduceţi imagini, hărţi de imagini, cadre, până la cel care vă ajută să formataţi tabele. Există şi o bibliotecă de instrucţiuni html, care vă va ajuta să formataţi corect o instrucţiune de care sunteţi nesigur. Practic, nici nu e nevoie să ştiţi să scrieţi cod html - trebuie doar să nu greşiţi atunci când inseraţi în pagină elementele dorite (de aceea e bine să faceţi mai întâi exerciţii cu o pagină simplă. Din păcate, va fi un pic mai dificil să inseraţi animaţii flash (dar nu imposibil). Conţine şi o bibliotecă de peste 170 de JavaScript-uri (unele fiind foarte utile).
2. 1st Page - şi acesta e un editor html foarte performant, preferat de foarte mulţi creatori profesionişti de pagini web. Ceea ce oferă este pur şi simplu uimitor şi depăşeşte în multe privinţe programe de web design licenţiate. Ca şi în AceHTML, aveţi instrumente pentru absolut tot ce trebuie introdus într-o pagină web, inclusiv o bibliotecă de instrucţiuni html; puteţi crea template-uri (şabloane) de cod, pe care să le editaţi şi în cadrul altor proiecte; puteţi să vă organizaţi site-urile în proiecte, ceea ce este foarte util mai ales când aveţi de lucrat la mai multe site-uri deodată. Programul dispune şi de un instrument de introdus imagini roll-over.
3. Chami HTML - e un editor HTML un pic mai special. După instalare nu dispune de nici un instrument special, în schimb are predefinite formate de cod pentru absolut toate cerinţele unui web designer - inclusiv cod .php sau SSI (server side include). Programul însă poate fi îmbunătăţit prin instalarea unor plug-in-uri suplimentare care pot fi descărcate (tot gratuit) de pe site-ul chami.com. În general, cuiva care cunoaşte sintaxa html lucrul cu HTML Kit i se va părea foarte uşor. Nu este totuşi recomandabil să-l încercaţi dacă nu sunteţi dispuşi să “investiţi” un pic şi în cunoaşterea sintaxei html.

Editorul de imagini - Fără îndoială, cea mai bună soluţie de înlocuire a unui program puternic precum Adobe Photoshop o reprezintă GIMP. GIMP este un editor de imagine open-source (ceea ce înseamnă că, în esenţă, poate fi folosit gratuit) şi pune la dispoziţia utilizatorilor majoritatea funcţiilor clasice dintr-un program performant similar. Cu GIMP se pot realiza prelucrări avansate de imagini şi animaţii .gif şi se poate lucra pe bază de straturi (layer-e). Programul dispune de o colecţie importantă de efecte speciale şi are şi opţiune de hărţi de imagini. Deşi a fost iniţial dezvoltat pentru utilizatorii de Linux, GIMP funcţionează fără probleme şi sub Windows, cu condiţia ca utilizatorul să-şi fi instalat în prealabil GTK+ Runtime Environment (care poate fi descărcat de regulă odată cu GIMP).

Un alt foto-editor gratuit interesant este şi VCW VicMan’s PhotoEditor Freeware, dar acestuia îi lipseşte o funcţie esenţială: lucrul pe bază de straturi. În web design, este esenţial să îţi poţi organiza elementele grafice independente unul de celălalt.

Animaţii flash - Din păcate, momentan nu există o soluţie gratuită mulţumitoare pentru înlocuirea programelor care pot desena animaţii flash. Aceasta este vestea rea. Vestea bună, dimpotrivă, este aceea că pentru un site de un nivel calitativ ridicat de fapt nici nu aveţi nevoie să folosiţi flash. În general, este recomandată folosirea animaţiilor flash pe acele site-uri care pot miza pe faptul că vizitatorul lor tipic e suficient de răbător pentru a aştepta deschiderea paginilor. În schimb, dacă vă propuneţi să prezentaţi pe site-ul dumneavoastră informaţii de interes general, o simplă imagine a activităţii firmei pe care o conduceţi, sau un catalog de produse, folosirea animaţiilor flash e mai mult decât contraindicată. Vizitatorul, venit acolo pentru a regăsi o informaţie pertinentă şi la obiect, va migra rapid pe alte site-uri care se încarcă rapid şi îi oferă imediat informaţiile dorite.

Totuşi, pentru aceia care chiar doresc să foloseasca animaţii pe site-ul propriu, există posibilitatea să folosească un program gratuit precum Liveswif Lite. Liveswif este unul din multele programe care s-au dezvoltat în ultimii ani ca alternative ieftine la Macromedia Flash (cele mai cunoscute fiind Swish, KoolMoves şi Firestarter). Varianta “Lite” vă ajută să realizaţi animaţii suficient de puternice, inclusiv folosind imagini, dar nu vă pune deloc la dispoziţie vreo urmă de ActionScript. Acest lucru înseamnă că dacă doriţi să comandaţi o acţiune, oricât de simplă, nu aveţi cum. Totuşi, dacă vreţi ca animaţia să nu ruleze la infinit, puteţi eluda incapacitatea de a folosi comanda stop() precizând în codul-sursă al paginii parametrul <param name=”loop” value=”false”>.

În plus, un alt lucru care merită ştiut înainte de a lucra cu Liveswif este, desigur, felul în care se realizează propriu-zis animaţiile. Deşi Liveswif Lite prezintă o interfaţă asemănătoare cu a celorlalte programe de gen lucrul cu el este îngreunat de lipsa unui tutorial precum şi de logica oarecum diferită a animaţiilor. De exemplu, în Flash un simplu click-dreapta pe linia de timp urmat de “Insert motion” inserează automat animaţia dorită. În Liveswif acest lucru se realizează de la meniul Insert > Transform motion.

După ce ne-am “înarmat” cu programele care ne trebuie pentru a construi website-ul dorit, urmează să trecem propriu-zis la lucru. Chiar dacă nu e nevoie să fim nişte maeştri ai penelului, trebuie să ştim totuşi câte ceva despre limbajul HTML, în special, şi despre site-urile web, în general.

Limbajul HTML (sau XHTML, cum i se spune la ora actuală ultimei sale variante) se remarcă prin simplitate. Este un limbaj pe bază de marcaje (sau tag-uri), fiecare marcaj putând suporta mai multe atribute. De exemplu, pentru a scrie îngroşat sau italic textul din interiorul unui anumit paragraf, trebuie să folosim marcajele <p></p> - pentru a delimita paragraful, respectiv <b></b> (bold)şi <i></i> (italic) pentru formatele speciale.

Codul paragrafului precedent, de exemplu, arată astfel:

<p>Limbajul HTML (sau XHTML, cum i se spune la ora actuală ultimei sale variante) se remarcă prin simplitate. Este un limbaj pe bază de <i>marcaje</i> (sau <i>tag</i>-uri), fiecare marcaj putând suporta mai multe <i>atribute</i>. De exemplu, pentru a scrie <b>îngroşat</b> sau <i>italic</i> textul din interiorul unui anumit paragraf, trebuie să folosim marcajele <code><p></p></code> - pentru a delimita paragraful, respectiv <code><b></b><code> (<b>b</b>old)şi <code><i></i><code> (<i>i</i>talic) pentru formatele speciale.</p>

O pagină web are 3 părţi principale. Fiecare dintre aceste părţi trebuie tratată cu atenţie, dacă doriţi ca site-ul să fie reuşit. Aceste părţi sunt:

* Declaraţia de conformitate, care defineşte tipul documentului creat. În cazul unui document XHTML, aceasta este <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>. Oricum, nu e nevoie să o scrieţi dumneavoastră. Editorul HTML va şti să o introducă singur.
* Antetul (head), care conţine meta-marcajele necesare clasificării şi indexării corecte a paginilor pe internet. Urmează imediat după declaraţia de conformitate şi este delimitat în interiorul marcajului <head></head>. Cele mai importante meta-marcaje conţinute în antet sunt <title></title> - titlul paginii, <meta name=”description” content=”” /> - descrierea paginii şi <meta name=”keywords” content=”” /> - cuvintele-cheie care descriu cel mai bine conţinutul paginii.
* Pagina propriu-zisă, delimitată de marcajul <body></body>. Aici apar toate celelalte marcaje folosite.

Există câteva sute de marcaje HTML, dar cele mai folosite sunt aproximativ 20:

* marcajele pentru blocuri de conţinut: <p></p> - paragrafe, <div></div> - diviziuni
* marcajele pentru formate de text: <b></b> - bold, <i></i> - italic
* marcajele pentru liste: <ul></ul> - listă cu marcatori, <ol></ol> - listă cu numere, <li></li> - rând în listă
* marcajele titlu: <h1></h1> - titluri foarte importante, <h2></h2> - titluri importante … <h7></h7> - subtitluri putin importante
* marcajele semantice: <strong></strong> - evidenţiere puternică, <em></em> - evidenţiere
* marcajele pentru tabele: <table></table> - tabel, <tr></tr> - rând de tabel, <td></td> - celulă
* marcajele pentru obiecte: <img src=”” /> - imagine, <object></object> sau <embed></embed> - animaţii flash, <applet><applet> - aplicaţii Java
* alte marcaje importante: <a href=””></a> - link (legătură, <span></span> (conţinut în linie), <hr /> - despărţitor orizontal

Editorul HTML vă va ajuta să introduceţi automat aceste marcaje, fără să mai fie nevoie să le scrieţi de mână. De exemplu, dacă doriţi să scrieţi cu caractere-bold un anumit text, selectaţi acel text şi apăsaţi butonul de “bold” (de obicei un B mare, ca în Word) de pe bara de instrumente. Veţi observa că textul dorit este încadrat cu marcajul <b></b>. În cazul în care doriţi să introduceţi o imagine, editorul vă va ajuta să selectaţi imaginea de pe hard disk şi să o introduceţi în locul dorit.

Marcajele pot conţine, ele însele, diverse atribute care să le rafineze înţelesul. De exemplu, în cazul unei imagini, putem întâlni atributele width (lăţime în pixeli), height (înălţime în pixeli) şi alt (text alternativ): <img src=”” width=”” height=”” alt=”” />

În interiorul site-ului, paginile sunt legate între ele prin hiperlinkuri, sau legături, iar informaţia este organizată exact ca în Windows - sub formă de fişiere şi directoare. Să presupunem că site-ul dvs. este www.ipsum.ro. Pentru ca pagina A să conţină o legătură (un link) la pagina B, codul acesteia va putea fi:

* absolut: de tipul <a href=”http://metodepromovare.wordpress.com/cale/paginaB.html”></a>;
* relativ: <a href=”cale/paginaB.html”></a>. Dacă pagina B este aşezată, ierarhic, înainte de pagina A (adică într-un director mai aproape de baza site-ului comparativ cu pagina A), atunci linkul din A către B va conţine două puncte (”..” pentru orice director superior ierarhic (de ex., <a href=”../paginaB.html”></a>

Cea mai simplă modalitate de a învăţa limbajul HTML este să faceţi încercări în editorul HTML şi să vedeţi ce iese. În câteva ore veţi ajunge să cunoaşteţi tot ceea ce vă trebuie pentru a înţelege funcţionarea corectă a marcajelor. Fireşte, de la a cunoaşte la a aplica este o cale lungă - dar cel puţin veţi putea să realizaţi cu uşurinţă o pagină web care, deşi lipsită de complexitate, va arăta simplu şi la obiect.