Sunteți pe pagina 1din 5

Acest articol i propune s demonteze unul dintre "miturile" cele mai vehiculate pe pia a de web design din Romnia,

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 aa. Un site nu este nimic altceva dect un produs oarecare i, drept urmare, trebuie gndit n termeni de investi ie i recuperare a investi iei. Dac firma la care lucra i are nevoie de un site simplu, fr efecte speciale i alte brizbrizuri, nu are rost s cheltui i aproximativ 1.700 de euro (cam att cost licen ele pentru programele de mai sus) sau s risca i o amend de 2.500 de euro (dac le instala i fr licen ), din exact acelai motiv pentru care nu ave i nevoie de un Porsche pentru a merge pn vizavi la alimentara. Sau, ca tnr proprietar al unei firme de web design, nu are rost s investeti n asemenea licen e pn ce nu eti sigur c vei avea clien i pe msur, care s justifice investi ia. S-ar putea s ai surpriza de a constata c majoritatea clien ilor ti vor de fapt numai site-uri mici, care s- i aduc venit mai mult din ntre inerea, dect 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 obinuit, cnd ceea ce dori i s realiza i nu e dect o pagin personal sau un site de firm care s fie pur i simplu informativ, uor de navigat i plcut ochiului, este bine s ncerca i s-l face i cu ct 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 crora 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. - Macromedia Dreamweaver e un program cu ajutorul cruia web designerii profesioniti "asambleaz" (adic monteaz) elementele unui site, pornind de la texte, imagini, anima ii i terminnd 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, fr 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, uor de folosit i stabil dintre toate. Pe lng el mai exist ns i altele, mai pu in folosite, cum ar fi Microsoft Frontpage sau Adobe GoLive. De fapt, adevratul avantaj al folosirii acestor programe este acela c ele includ numeroase buc i de cod "ready-made" i instrumente utile, cu ajutorul crora proiecte voluminoase pot fi finalizate extrem de rapid. Pe lng editoarele de tip WYSIWYG mai exist pe pia i editoarele HTML simple, n care web designerul construiete site-ul pe baza cunoaterii codului (X)HTML. Designerul introduce codul necesar afirii paginii dorite, apoi compileaz pagina i o afieaz n browser. Practic, cu ajutorul unui editor HTML simplu orice web designer poate ob ine exact aceleai rezultate pe care le-ar ob ine i cu ajutorul lui Dreamweaver. Singura diferen const n productivitatea mbunt it adus de Dreamweaver.
                  

Oferta actual de editoare HTML de pe pia e impresionant i cuprinde att editoare care cost bani (dar nu mai mult de 40-50 de euro), ct i editoare gratuite. Pe noi ne intereseaz, evident, ultimele (cele gratuite). Dintre acestea vom prezenta trei care ni s-au prut c ies n eviden n mod deosebit prin facilit ile deosebite oferite web designer-ului. Freeware - interfa a este plcut i uor de n eles, cu fereastra principal 1. rupt ntre o zon de editare (n dreapta) i o zon organizatoric (n stnga) de unde pute i introduce automat diverse instruc iuni html, pute i edita fiiere 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, hr i de imagini, cadre, pn 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 grei i atunci cnd insera i n pagin elementele dorite (de aceea e bine s face i mai nti exerci ii cu o pagin simpl). Din pcate, 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. - i acesta e un editor html foarte performant, preferat de foarte mul i creatori profesioniti de pagini web. Ceea ce ofer este pur i simplu uimitor i depete 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 cnd ave i de lucrat la mai multe site-uri deodat. Programul dispune i de un instrument de introdus imagini roll-over. - e un editor HTML un pic mai special. Dup instalare nu dispune de nici 3. 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 mbunt it prin instalarea unor plug-in-uri suplimentare care pot fi descrcate (tot gratuit) de pe site-ul chami.com. n general, cuiva care cunoate sintaxa html lucrul cu HTML Kit i se va prea foarte uor. Nu este totui recomandabil s-l ncerca i dac nu sunte i dispui s "investi i" un pic i n cunoaterea sintaxei html.
   


Continum tutorialul de web design cu programe gratuite, prezentnd pe scurt alternativele pentru programul de editat imagini i cel de anima ii flash. - Fr ndoial, cea mai bun solu ie de nlocuire a unui program puternic precum Adobe Photoshop o reprezint GIMP. GIMP este un editor de imagine opensource (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 prelucrri 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 hr i de imagini. Dei a fost ini ial dezvoltat pentru utilizatorii de Linux, GIMP func ioneaz fr probleme i sub Windows, cu condi ia ca utilizatorul s-i fi instalat n prealabil GTK+ Runtime Environment (care poate fi descrcat de regul odat cu GIMP). Pe site-ul www.gimp.org se gsesc tutoriale detaliate privitoare la utilizarea programului GIMP.


, dar Un alt foto-editor gratuit interesant este i acestuia i lipsete 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 cellalt. Anima ii flash - Din pcate, 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 siteuri care pot miza pe faptul c vizitatorul lor tipic e suficient de rbtor pentru a atepta 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 dect contraindicat. Vizitatorul, venit acolo pentru a regsi 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. Totui, pentru aceia care chiar doresc s foloseasca anima ii pe site-ul propriu, exist . Liveswif este unul din posibilitatea s foloseasc un program gratuit precum multele programe care s-au dezvoltat n ultimii ani ca alternative ieftine la Macromedia Flash , i ). Varianta "Lite" v ajut s (cele mai cunoscute fiind 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, orict de simpl, nu ave i cum. Totui, dac vre i ca anima ia s nu ruleze la infinit, pute i eluda incapacitatea de a folosi comanda stop() preciznd 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. Dei Liveswif Lite prezint o interfa asemntoare 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 nite maetri ai penelului, trebuie s tim totui cte ceva despre limbajul HTML, n special, i despre siteurile 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 putnd suporta sau italic textul din interiorul unui mai multe atribute. De exemplu, pentru a scrie 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 putnd suporta mai multe <i>atribute</i>. De exemplu, pentru a scrie <b>ngroat</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 pr i principale. Fiecare dintre aceste pr i trebuie tratat cu aten ie, dac dori i ca site-ul s fie reuit. Aceste pr i sunt: , care definete 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.
   

, care con ine meta-marcajele necesare clasificrii i indexrii 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.

marcaje folosite. Exist cteva sute de marcaje HTML, dar cele mai folosite sunt aproximativ 20: : <p></p> - paragrafe, <div></div> - diviziuni : <b></b> - bold, <i></i> - italic : <ul></ul> - list cu marcatori, <ol></ol> - list cu numere, <li></li>


- rnd n list : <h1></h1> - titluri foarte importante, <h2></h2> - titluri importante ... <h7></h7> - subtitluri putin importante : <strong></strong> - eviden iere puternic, <em></em> - eviden iere : <table></table> - tabel, <tr></tr> - rnd de tabel, <td></td> celul : <img src="" /> - imagine, <object></object> sau <embed></embed> - anima ii flash, <applet><applet> - aplica ii Java : <a href=""></a> - link (legtur), <span></span> (con inut n linie), <hr /> - despr itor orizontal Editorul HTML v va ajuta s introduce i automat aceste marcaje, fr s mai fie nevoie s le scrie i de mn. De exemplu, dac dori i s scrie i cu caractere-bold un anumit text, selecta i acel text i apsa 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 ntlni atributele width (l ime n pixeli), height (nl ime n pixeli) i alt (text alternativ): <img src="" width="" height="" alt="" />
 

 

, delimitat de marcajul <body></body>. Aici apar toate celelalte

n interiorul site-ului, paginile sunt legate ntre ele prin hiperlinkuri, sau legturi, iar - sub form de fiiere i directoare. S informa ia este organizat presupunem c site-ul dvs. este www.site.ro. Pentru ca pagina A s con in o legtur (un link) la pagina B, codul acesteia va putea fi: : de tipul <a href="http://www.site.ro/cale/paginaB.html"></a>; : <a href="cale/paginaB.html"></a>. Dac pagina B este aezat, ierarhic, nainte de pagina A (adic ntr-un director mai aproape de baza site-ului comparativ cu pagina A), atunci linkul din A ctre 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 ncercri n editorul HTML i s vede i ce iese. n cteva ore ve i ajunge s cunoate i tot ceea ce v trebuie pentru a n elege func ionarea corect a marcajelor. Firete, de la a cunoate la a aplica este o cale lung - dar cel pu in ve i putea s realiza i cu uurin o pagin web care, dei lipsit de complexitate, va arta simplu i la obiect.