Acasa
Cum sa faci un site folosind numai programe gratuite
Acest articol îşi propune sa 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 si asamblare), Adobe Photoshop (pentru editarea imaginilor) sau Macromedia Flash (pentru animatii).
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 si recuperare a investiţiei. Dacă firma la care lucraţi are nevoie de un site simplu, fară efecte speciale si alte brizbrizuri, nu are rost sa cheltuiţi aproximativ 1.700 de euro (cam atât costa licentele pentru programele de mai sus) sau sa riscaţi o amenda de 2.500 de euro (daca le instalaţi fara licenta), din exact acelasi motiv pentru care nu aveti nevoie de un Porsche pentru a merge pâna vizavi la alimentara. Sau, ca tânar proprietar al unei firme de web design, nu are rost sa investeşti în asemenea licente pâna 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 întreţinerea, decât din realizarea lor.
Programele amintite mai sus sunt indispensabile numai firmelor profesioniste de web design, care trebuie să facă faţa în mod curent unor cerinţe specifice venite din partea unei clienţele diverse. În mod obişnuit, când ceea ce doriţi să realizaţi nu e decât 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 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 - animatiile - 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 caruia web designerii profesionişti "asambleaza" (adica monteaza) elementele unui site, pornind de la texte, imagini, animaţii si terminând cu paginile site-ului. Este un editor HTML de tip WYSIWYG ("what you see is what you get"), adica poţi 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 piaţa, fiind cel mai robust, usor de folosit si stabil dintre toate. Pe lânga 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 bucaţi de cod "ready-made" si instrumente utile, cu ajutorul cărora proiecte voluminoase pot fi finalizate extrem de rapid.
Pe lângă editoarele de tip WYSIWYG mai exista pe piata si editoarele HTML simple, în care web designerul construieşte 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 piaţa e impresionanta si cuprinde atât editoare care costă bani (dar nu mai mult de 40-50 de euro), cât 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 facilităţile deosebite oferite web designer-ului.
Ace HTML 5.0.8 Freeware - interfaţa este placută si usor de înţeles, cu fereastra principala ruptă între o zona de editare (în dreapta) si o zona organizatorică (în stânga) de unde puteţi introduce automat diverse instrucţiuni html, puteţi edita fisiere etc. Programul are instrumente pentru aproape tot ce trebuie sa existe într-o pagina web - de la instrumentul care va ajuta să introduceţi imagini, harţi de imagini, cadre, până la cel care va ajuta să formataţi 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 greşiti atunci când inseraţi în pagina elementele dorite (de aceea e bine sa faceţi mai întâi exerciţii cu o pagina simplă). Din păcate, va fi un pic mai dificil să inseraţi animaţii flash (dar nu imposibil). Conţine ş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 depaşeste în multe privinţe programe de web design licenţiate. Ca si în AceHTML, aveti instrumente pentru absolut tot ce trebuie introdus într-o pagina web, inclusiv o bibliotecă de instructiuni html; puteţi crea template-uri (sabloane) de cod, pe care sa le editaţi si în cadrul altor proiecte; puteţi sa va 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.
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 cerţinele unui web designer - inclusiv cod .php sau SSI (server side include). Programul însa poate fi îmbunataţit 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.
Continuam tutorialul de web design cu programe gratuite, prezentând pe scurt alternativele pentru programul de editat imagini si cel de animatii flash.
Editorul de imagini - Fară îndoială, cea mai bună soluţie 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 esenţa, poate fi folosit gratuit) si pune la dispozitia utilizatorilor majoritatea funcţiilor clasice dintr-un program performant similar. Cu GIMP se pot realiza prelucrari avansate de imagini si animaţii .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 harţi de imagini. Deşi a fost iniţial dezvoltat pentru utilizatorii de Linux, GIMP functioneaza fară probleme si sub Windows, cu condiţia ca utilizatorul sa-şi fi instalat în prealabil GTK+ Runtime Environment (care poate fi descarcat de regulă odata cu 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 poţi organiza elementele grafice independente unul de celalalt.
Animatii flash - Din păcate, momentan nu există o soluţie gratuită mulţumitoare 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 aveăi nevoie sa folosiţi flash. În general, este recomandată folosirea animaţiilor flash pe acele site-uri care pot miza pe faptul ca vizitatorul lor tipic e suficient de răbator pentru a astepta deschiderea paginilor. În schimb, dacă vă propuneţi să prezentaţi pe site-ul dumneavoastră informaăii de interes general, o simpla imagine a activitatii firmei pe care o conduceti, sau un catalog de produse, folosirea animatiilor flash e mai mult decât contraindicata. Vizitatorul, venit acolo pentru a regasi o informaăie pertinenta si la obiect, va migra rapid pe alte site-uri care se încarcă rapid si îi oferă imediat informaţiile dorite.
Totusi, pentru aceia care chiar doresc sa foloseasca animaţii 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 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. Totusi, dacă vreţi ca animaţia să nu ruleze la infinit, puteţi eluda incapacitatea de a folosi comanda stop() precizând în codul-sursa al paginii parametrul .
Î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.
Cateva sfaturi:
i, in primul rand trebuie sa stii ce vrei sa iti faci: un site sau un blog. Este o diferenta, clar.
Daca vrei sa-ti deschizi un blog, pentru inceput poti incerca platforme romanesti gen weblog.ro sau voce.ro, sau, cele mai cunoscute si mai folosite – wordpress.com si blogspot.com.
In al doilea rand, ar fi bine sa ai ceva cunostinte de HTML si PHP, dar, daca chiar nu ai habar de asa ceva, nu dispera. Exista o solutie si pentru asta, puteti folosi niste programe pentru incepatori, mai usoare, de genul WebPageMaker sau WebsiteBuilder care va vor ajuta in acest proces. Daca mai stiti cate ceva, puteti incerca si Dreamwaver, care e ceva mai complex si mai inteligent.
In al treilea rand, trebuie sa te gandesti daca vrei sa faci ceva serios cu site-ul si sa il tii o perioada mai lunga de timp, sa ai ceva credibilitate cu el si sa poti castiga si niste bani cu el, iti recomand sa iti cumperi un domeniu propriu si un host serios. Tot la capitolul “vreau sa fac bani cu site-ul meu!“, daca vrei sa castigi ceva mai bine, iti trebuie un numar considerabil de vizitatori si iti recomand sa iti faci site-ul in limba engleza, pentru a fi accesibil unui public mult mai larg. In Romania si, in general, reclamele in romana, sunt platite mult mai prost, industria de advertising fiind inca in faza de dezvoltare si nicidecum de maturitate. Ma voi rezuma doar la atat deocamdata, nu vreau sa vin cu lectii de SEO, webdesign sau alte nebunii, pentru ca nici eu nu stapanesc pe deplin aceste domenii.
Acest articol îşi propune sa 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 si asamblare), Adobe Photoshop (pentru editarea imaginilor) sau Macromedia Flash (pentru animatii).
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 si recuperare a investiţiei. Dacă firma la care lucraţi are nevoie de un site simplu, fară efecte speciale si alte brizbrizuri, nu are rost sa cheltuiţi aproximativ 1.700 de euro (cam atât costa licentele pentru programele de mai sus) sau sa riscaţi o amenda de 2.500 de euro (daca le instalaţi fara licenta), din exact acelasi motiv pentru care nu aveti nevoie de un Porsche pentru a merge pâna vizavi la alimentara. Sau, ca tânar proprietar al unei firme de web design, nu are rost sa investeşti în asemenea licente pâna 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 întreţinerea, decât din realizarea lor.
Programele amintite mai sus sunt indispensabile numai firmelor profesioniste de web design, care trebuie să facă faţa în mod curent unor cerinţe specifice venite din partea unei clienţele diverse. În mod obişnuit, când ceea ce doriţi să realizaţi nu e decât 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 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 - animatiile - 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 caruia web designerii profesionişti "asambleaza" (adica monteaza) elementele unui site, pornind de la texte, imagini, animaţii si terminând cu paginile site-ului. Este un editor HTML de tip WYSIWYG ("what you see is what you get"), adica poţi 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 piaţa, fiind cel mai robust, usor de folosit si stabil dintre toate. Pe lânga 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 bucaţi de cod "ready-made" si instrumente utile, cu ajutorul cărora proiecte voluminoase pot fi finalizate extrem de rapid.
Pe lângă editoarele de tip WYSIWYG mai exista pe piata si editoarele HTML simple, în care web designerul construieşte 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 piaţa e impresionanta si cuprinde atât editoare care costă bani (dar nu mai mult de 40-50 de euro), cât 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 facilităţile deosebite oferite web designer-ului.
Ace HTML 5.0.8 Freeware - interfaţa este placută si usor de înţeles, cu fereastra principala ruptă între o zona de editare (în dreapta) si o zona organizatorică (în stânga) de unde puteţi introduce automat diverse instrucţiuni html, puteţi edita fisiere etc. Programul are instrumente pentru aproape tot ce trebuie sa existe într-o pagina web - de la instrumentul care va ajuta să introduceţi imagini, harţi de imagini, cadre, până la cel care va ajuta să formataţi 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 greşiti atunci când inseraţi în pagina elementele dorite (de aceea e bine sa faceţi mai întâi exerciţii cu o pagina simplă). Din păcate, va fi un pic mai dificil să inseraţi animaţii flash (dar nu imposibil). Conţine ş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 depaşeste în multe privinţe programe de web design licenţiate. Ca si în AceHTML, aveti instrumente pentru absolut tot ce trebuie introdus într-o pagina web, inclusiv o bibliotecă de instructiuni html; puteţi crea template-uri (sabloane) de cod, pe care sa le editaţi si în cadrul altor proiecte; puteţi sa va 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.
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 cerţinele unui web designer - inclusiv cod .php sau SSI (server side include). Programul însa poate fi îmbunataţit 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.
Continuam tutorialul de web design cu programe gratuite, prezentând pe scurt alternativele pentru programul de editat imagini si cel de animatii flash.
Editorul de imagini - Fară îndoială, cea mai bună soluţie 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 esenţa, poate fi folosit gratuit) si pune la dispozitia utilizatorilor majoritatea funcţiilor clasice dintr-un program performant similar. Cu GIMP se pot realiza prelucrari avansate de imagini si animaţii .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 harţi de imagini. Deşi a fost iniţial dezvoltat pentru utilizatorii de Linux, GIMP functioneaza fară probleme si sub Windows, cu condiţia ca utilizatorul sa-şi fi instalat în prealabil GTK+ Runtime Environment (care poate fi descarcat de regulă odata cu 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 poţi organiza elementele grafice independente unul de celalalt.
Animatii flash - Din păcate, momentan nu există o soluţie gratuită mulţumitoare 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 aveăi nevoie sa folosiţi flash. În general, este recomandată folosirea animaţiilor flash pe acele site-uri care pot miza pe faptul ca vizitatorul lor tipic e suficient de răbator pentru a astepta deschiderea paginilor. În schimb, dacă vă propuneţi să prezentaţi pe site-ul dumneavoastră informaăii de interes general, o simpla imagine a activitatii firmei pe care o conduceti, sau un catalog de produse, folosirea animatiilor flash e mai mult decât contraindicata. Vizitatorul, venit acolo pentru a regasi o informaăie pertinenta si la obiect, va migra rapid pe alte site-uri care se încarcă rapid si îi oferă imediat informaţiile dorite.
Totusi, pentru aceia care chiar doresc sa foloseasca animaţii 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 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. Totusi, dacă vreţi ca animaţia să nu ruleze la infinit, puteţi eluda incapacitatea de a folosi comanda stop() precizând în codul-sursa al paginii parametrul .
Î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.
Cateva sfaturi:
i, in primul rand trebuie sa stii ce vrei sa iti faci: un site sau un blog. Este o diferenta, clar.
Daca vrei sa-ti deschizi un blog, pentru inceput poti incerca platforme romanesti gen weblog.ro sau voce.ro, sau, cele mai cunoscute si mai folosite – wordpress.com si blogspot.com.
In al doilea rand, ar fi bine sa ai ceva cunostinte de HTML si PHP, dar, daca chiar nu ai habar de asa ceva, nu dispera. Exista o solutie si pentru asta, puteti folosi niste programe pentru incepatori, mai usoare, de genul WebPageMaker sau WebsiteBuilder care va vor ajuta in acest proces. Daca mai stiti cate ceva, puteti incerca si Dreamwaver, care e ceva mai complex si mai inteligent.
In al treilea rand, trebuie sa te gandesti daca vrei sa faci ceva serios cu site-ul si sa il tii o perioada mai lunga de timp, sa ai ceva credibilitate cu el si sa poti castiga si niste bani cu el, iti recomand sa iti cumperi un domeniu propriu si un host serios. Tot la capitolul “vreau sa fac bani cu site-ul meu!“, daca vrei sa castigi ceva mai bine, iti trebuie un numar considerabil de vizitatori si iti recomand sa iti faci site-ul in limba engleza, pentru a fi accesibil unui public mult mai larg. In Romania si, in general, reclamele in romana, sunt platite mult mai prost, industria de advertising fiind inca in faza de dezvoltare si nicidecum de maturitate. Ma voi rezuma doar la atat deocamdata, nu vreau sa vin cu lectii de SEO, webdesign sau alte nebunii, pentru ca nici eu nu stapanesc pe deplin aceste domenii.