Cum sa-ti faci un site propriu folosind programe gratuite?

Tutorial (1)

Cum sa faci un site folosind numai programe gratuite (1) Autor: Adrian Sandu | adrian.sandu(at)ksd.ro

[Partea I] [Partea II] [Partea III]

~~

ti place acest tutorial? Te-a ajutat cu ceva? Vrei sa-l continuam si sa vorbim si despre cum trebuie gndit un layout, cum trebuie gndita cromatica sau cum se promoveaza un site? Atunci avem o mica rugaminte la tine. Spune-le si prietenilor tai despre el. Pune pe site-ul tau un link:

<a href="http://www.ksd.ro/news/cum-sa-faci-un-website-1.php">Tutorial de web design</a>

~~

Acest articol i propune sa demonteze unul dintre "miturile" cele mai vehiculate pe piaa de web design din Romnia, i anume c pentru realizarea unui site ai nevoie de programe puternice cum ar fi Macromedia Dreamweaver (pentru cod si asamblare), Adobe Photoshop (pentru editarea imaginilor) sau Macromedia Flash (pentru animatii).

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 investiie si recuperare a investiiei. Dac firma la care lucrai are nevoie de un site simplu, far efecte speciale si alte brizbrizuri, nu are rost sa cheltuii aproximativ 1.700 de euro (cam att costa licentele pentru programele de mai sus) sau sa riscai o amenda de 2.500 de euro (daca le instalai fara licenta), din exact acelasi motiv pentru care nu aveti nevoie de un Porsche pentru a merge pna vizavi la alimentara. Sau, ca tnar proprietar al unei firme de web design, nu are rost sa investeti n asemenea licente pna ce nu esti sigur ca vei avea clienti pe masura, care sa justifice

investitia. S-ar putea sa ai surpriza de a constata ca majoritatea clientilor tai vor de fapt numai site-uri mici, care sa-i aduca venit mai mult din ntreinerea, dect din realizarea lor.

Programele amintite mai sus sunt indispensabile numai firmelor profesioniste de web design, care trebuie s fac faa n mod curent unor cerine specifice venite din partea unei clienele diverse. n mod obinuit, cnd ceea ce dorii s realizai nu e dect o pagina personal sau un site de firma care s fie pur si simplu informativ, usor de navigat i placut ochiului, este bine s ncercati s-l faceti cu ct mai puine 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 - animatiile - de care se ocup programul de animaie vectorial.

n continuare vom vedea care sunt cele mai bune soluii 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 caruia web designerii profesioniti "asambleaza" (adica monteaza) elementele unui site, pornind de la texte, imagini, animaii si terminnd cu paginile site-ului. Este un editor HTML de tip WYSIWYG ("what you see is what you get"), adica poi construi site-ul direct pe interfata de previzualizare, fara a fi nevoit sa scrii cod html. Dreamweaver MX 2004 este cel mai cunoscut editor de tip WYSIWYG de pe piaa, fiind cel mai robust, usor de folosit si stabil dintre toate. Pe lnga el mai exista nsa si altele, mai putin folosite, cum ar fi Microsoft Frontpage sau Adobe GoLive. De fapt, adevaratul avantaj al folosirii acestor programe este acela ca ele includ numeroase bucai de cod "ready-made" si instrumente utile, cu ajutorul crora proiecte voluminoase pot fi finalizate extrem de rapid.

Pe lng editoarele de tip WYSIWYG mai exista pe piata si editoarele HTML simple, n care web designerul construiete site-ul pe baza cunoasterii codului (X)HTML. Designerul introduce codul necesar afisarii paginii dorite, apoi compileaza pagina si o afiseaza n browser. Practic, cu ajutorul unui editor HTML simplu orice web designer poate obtine exact aceleasi rezultate pe care le-ar obtine si cu ajutorul lui Dreamweaver. Singura diferen const n productivitatea mbunatatit adus de Dreamweaver.

Ofert actual de editoare HTML de pe piaa e impresionanta si cuprinde att editoare care cost bani (dar nu mai mult de 40-50 de euro), ct si editoare gratuite. Pe noi ne intereseaz, evident, ultimele (cele gratuite). Dintre acestea vom prezenta trei care ni s-au parut c ies n evident n mod deosebit prin facilitile deosebite oferite web designer-ului. Ace HTML 5.0.8 Freeware - interfaa este placut si usor de neles, cu fereastra principala rupt ntre o zona de editare (n dreapta) si o zona organizatoric (n stnga) de unde putei introduce automat diverse instruciuni html, putei edita fisiere etc. Programul are instrumente pentru aproape tot ce trebuie sa existe ntr-o pagina web - de la instrumentul care va ajuta s introducei imagini, hari de imagini, cadre, pn la cel care va ajuta s formatai tabele. Exist si o biblioteca de instructiuni html, care va va ajuta sa formatati corect o instructiune de care sunteti nesigur. Practic, nici nu e nevoie sa stiti s scrieti cod html - trebuie doar s nu greiti atunci cnd inserai n pagina elementele dorite (de aceea e bine sa facei mai nti exerciii cu o pagina simpl). Din pcate, va fi un pic mai dificil s inserai animaii flash (dar nu imposibil). Conine i o biblioteca de peste 170 de JavaScript-uri (unele fiind foarte utile). 1st Page - si acesta e un editor html foarte performant, preferat de foarte multi creatori profesionisti de pagini web. Ceea ce ofera este pur si simplu uimitor si depaeste n multe privine programe de web design liceniate. Ca si n AceHTML, aveti instrumente pentru absolut tot ce trebuie introdus ntr-o pagina web, inclusiv o bibliotec de instructiuni html; putei crea template-uri (sabloane) de cod, pe care sa le editai si n cadrul altor proiecte; putei sa va organizai site-urile n proiecte, ceea ce este foarte util mai ales cnd avei de lucrat la mai multe site-uri deodat. Programul dispune i de un instrument de introdus imagini roll-over. 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 cerinele unui web designer inclusiv cod .php sau SSI (server side include). Programul nsa poate fi mbunatait prin instalarea unor plug-in-uri suplimentare care pot fi descarcate (tot gratuit) de pe site-ul chami.com. n general, cuiva care cunoaste sintaxa html lucrul cu HTML Kit i se va parea foarte usor. Nu este totusi recomandabil sa-l ncercati daca nu sunteti dispusi sa "investiti" un pic si n cunoasterea sintaxei html. i place acest tutorial? Te-a ajutat cu ceva? Vrei sa-l continum si s vorbim si despre cum trebuie gndit un layout, cum trebuie gndit cromatica sau cum se promoveaz un site? Atunci avem o mica rugaminte la tine. Spune-le si prietenilor ti despre el. Pune pe site-ul tau un link:

<a href="http://www.ksd.ro/news/cum-sa-faci-un-website-1.php">Tutorial de web design</a>

~~

Continuam tutorialul de web design cu programe gratuite, prezentnd pe scurt alternativele pentru programul de editat imagini si cel de animatii flash.

Editorul de imagini - Far ndoial, cea mai bun soluie de nlocuire a unui program puternic precum Adobe Photoshop o reprezinta GIMP. GIMP este un editor de imagine open-source (ceea ce nseamna ca, n esena, poate fi folosit gratuit) si pune la dispozitia utilizatorilor majoritatea funciilor clasice dintrun program performant similar. Cu GIMP se pot realiza prelucrari avansate de imagini si animaii .gif si se poate lucra pe baza de straturi (layer-e). Programul dispune de o colectie importanta de efecte speciale si are si optiune de hari de imagini. Dei a fost iniial dezvoltat pentru utilizatorii de Linux, GIMP functioneaza far probleme si sub Windows, cu condiia ca utilizatorul sa-i fi instalat n prealabil GTK+ Runtime Environment (care poate fi descarcat de regul odata cu GIMP).

Pe site-ul www.gimp.org se gasesc tutoriale detaliate privitoare la utilizarea programului GIMP.

Un alt foto-editor gratuit interesant este si VCW VicMan's PhotoEditor Freeware, dar acestuia i lipseste o functie esentiala: lucrul pe baza de straturi. n web design, este esential s i poi organiza elementele grafice independente unul de celalalt.

Animatii flash - Din pcate, momentan nu exist o soluie gratuit mulumitoare pentru nlocuirea programelor care pot desena animatii flash. Aceasta este vestea rea. Vestea buna, dimpotriv, este aceea c pentru un site de un nivel calitativ ridicat de fapt nici nu avei nevoie sa folosii flash. n general, este recomandat folosirea animaiilor flash pe acele site-uri care pot miza pe faptul ca vizitatorul lor tipic e suficient de rbator pentru a astepta deschiderea paginilor. n schimb, dac v propunei s prezentai pe site-ul dumneavoastr informaii de interes general, o simpla imagine a activitatii firmei pe care o conduceti, sau un catalog de produse, folosirea animatiilor flash e mai mult dect contraindicata. Vizitatorul, venit acolo pentru a regasi o informaie pertinenta si la obiect, va migra rapid pe alte site-uri care se ncarc rapid si i ofer imediat informaiile dorite.

Totusi, pentru aceia care chiar doresc sa foloseasca animaii pe site-ul propriu, exista posibilitatea sa 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 si Firestarter). Varianta "Lite" va ajut sa realizati animatii suficient de puternice, inclusiv

folosind imagini, dar nu v pune deloc la dispoziie vreo urm de ActionScript. Acest lucru nseamn c dac dorii s comandai o aciune, orict de simpl, nu avei cum. Totusi, dac vrei ca animaia s nu ruleze la infinit, putei eluda incapacitatea de a folosi comanda stop() preciznd n codul-sursa al paginii parametrul <param name="loop" value="false">.

n plus, un alt lucru care merita stiut nainte de a lucra cu Liveswif este, desigur, felul n care se realizeaza propriu-zis animatiile. Desi Liveswif Lite prezinta o interfata asemanatoare cu a celorlalte programe de gen lucrul cu el este ngreunat de lipsa unui tutorial precum si de logica oarecum diferita a animatiilor. De exemplu, n Flash un simplu click-dreapta pe linia de timp urmat de "Insert motion" insereaza automat animatia dorita. n Liveswif acest lucru se realizeaza de la meniul Insert > Transform motion. ti place acest tutorial? Te-a ajutat cu ceva? Vrei sa-l continuam si sa vorbim si despre cum trebuie gndit un layout, cum trebuie gndita cromatica sau cum se promoveaza un site? Atunci avem o mica rugaminte la tine. Spune-le si prietenilor tai despre el. Pune pe site-ul tau un link:

<a href="http://www.ksd.ro/news/cum-sa-faci-un-website-1.php">Tutorial de web design</a>

~~

Dupa ce ne-am "narmat" cu programele care ne trebuie pentru a construi website-ul dorit, urmeaza sa trecem propriu-zis la lucru. Chiar daca nu e nevoie sa fim niste maestri ai penelului, trebuie sa stim totusi cte ceva despre limbajul HTML, n special, si despre site-urile web, n general.

Limbajul HTML (sau XHTML, cum i se spune la ora actuala ultimei sale variante) se remarca prin simplitate. Este un limbaj pe baza de marcaje (sau tag-uri), fiecare marcaj putnd suporta mai multe atribute. De exemplu, pentru a scrie ngrosat sau italic textul din interiorul unui anumit paragraf, trebuie sa folosim marcajele <p></p> - pentru a delimita paragraful, respectiv <b></b> (bold)si <i></i> (italic) pentru formatele speciale.

Codul paragrafului precedent, de exemplu, arata astfel:

<p>Limbajul HTML (sau XHTML, cum i se spune la ora actuala ultimei sale variante) se remarca prin simplitate. Este un limbaj pe baza de <i>marcaje</i> (sau <i>tag</i>-uri), fiecare marcaj putnd suporta mai multe <i>atribute</i>. De exemplu, pentru a scrie <b>ngrosat</b> sau <i>italic</i> textul din interiorul unui anumit paragraf, trebuie sa folosim marcajele <code><p></p></code> - pentru a delimita paragraful, respectiv <code><b></b><code> (<b>b</b>old)si <code><i></i><code> (<i>i</i>talic) pentru formatele speciale.</p>

O pagina web are 3 parti principale. Fiecare dintre aceste parti trebuie tratata cu atentie, daca doriti ca site-ul sa fie reusit. Aceste parti sunt: Declaratia de conformitate, care defineste 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 sa o scrieti dumneavoastra. Editorul HTML va sti sa o introduca singur. Antetul (head), care contine meta-marcajele necesare clasificarii si indexarii corecte a paginilor pe internet. Urmeaza imediat dupa declaratia de conformitate si este delimitat n interiorul marcajului <head></head>. Cele mai importante meta-marcaje continute n antet sunt <title></title> - titlul paginii, <meta name="description" content="" /> - descrierea paginii si <meta name="keywords" content="" /> cuvintele-cheie care descriu cel mai bine continutul paginii. Pagina propriu-zisa, delimitata de marcajul <body></body>. Aici apar toate celelalte marcaje folosite.

Exista cteva sute de marcaje HTML, dar cele mai folosite sunt aproximativ 20: marcajele pentru blocuri de continut: <p></p> - paragrafe, <div></div> - diviziuni marcajele pentru formate de text: <b></b> - bold, <i></i> - italic marcajele pentru liste: <ul></ul> - lista cu marcatori, <ol></ol> - lista cu numere, <li></li> - rnd n lista marcajele titlu: <h1></h1> - titluri foarte importante, <h2></h2> - titluri importante ... <h7></h7> subtitluri putin importante marcajele semantice: <strong></strong> - evidentiere puternica, <em></em> - evidentiere marcajele pentru tabele: <table></table> - tabel, <tr></tr> - rnd de tabel, <td></td> - celula marcajele pentru obiecte: <img src="" /> - imagine, <object></object> sau <embed></embed> - animatii flash, <applet><applet> - aplicatii Java alte marcaje importante: <a href=""></a> - link (legatura), <span></span> (continut n linie), <hr /> despartitor orizontal

Editorul HTML va va ajuta sa introduceti automat aceste marcaje, fara sa mai fie nevoie sa le scrieti de mna. De exemplu, daca doriti sa scrieti cu caractere-bold un anumit text, selectati acel text si apasati butonul de "bold" (de obicei un B mare, ca n Word) de pe bara de instrumente. Veti observa ca textul dorit este ncadrat cu marcajul <b></b>. n cazul n care doriti sa introduceti o imagine, editorul va va ajuta sa selectati imaginea de pe hard disk si sa o introduceti n locul dorit.

Marcajele pot contine, ele nsele, diverse atribute care sa le rafineze ntelesul. De exemplu, n cazul unei imagini, putem ntlni atributele width (latime n pixeli), height (naltime n pixeli) si alt (text alternativ): <img src="" width="" height="" alt="" />

n interiorul site-ului, paginile sunt legate ntre ele prin hiperlinkuri, sau legaturi, iar informatia este organizata exact ca n Windows - sub forma de fisiere si directoare. Sa presupunem ca site-ul dvs. este www.site.ro. Pentru ca pagina A sa contina o legatura (un link) la pagina B, codul acesteia va putea fi: absolut: de tipul <a href="http://www.site.ro/cale/paginaB.html"></a>; relativ: <a href="cale/paginaB.html"></a>. Daca pagina B este asezata, ierarhic, nainte de pagina A (adica ntr-un director mai aproape de baza site-ului comparativ cu pagina A), atunci linkul din A catre B va contine doua puncte ("..") pentru orice director superior ierarhic (de ex., <a href="../paginaB.html"></a>)

Cea mai simpla modalitate de a nvata limbajul HTML este sa faceti ncercari n editorul HTML si sa vedeti ce iese. n cteva ore veti ajunge sa cunoasteti tot ceea ce va trebuie pentru a ntelege functionarea corecta a marcajelor. Fireste, de la a cunoaste la a aplica este o cale lunga - dar cel putin veti putea sa realizati cu usurinta o pagina web care, desi lipsita de complexitate, va arata simplu si la obiect.