• Pagini

  • RSS Metode de promovare

    • Neuvoo.ro Aprilie 27, 2016
      Ce este mai exact Neuvoo:  neuvoo.ro  este unul dintre cele mai mari motoare de cautare de locuri de munca din Romania. Avand punctul de pornire in Canada, unde numele sau este sinonim cu “cautare loc de munca”, numara mai mult de trei ani in domeniul de elita. Cele 15 milioane de locuri de munca pot … Continue reading Neuvoo.ro →
      laurentiu vlad
    • Backlink Analyzer Online SEO Tools Mai 28, 2014
      Optimizarea Off-page nu este efectuata direct pe site, insa nu este mai putin importanta. Optimizarea off-page se reduce la un principiu foarte simplu: generarea a cat mai multe (si calitative) linkuri externe (backlinks) spre site-ul optimizat. Factorii care influenteaza un link extern: Anchor Text of Link – Cuvintele folosite in tagul anchor care constitui […]
      laurentiu vlad
    • Statistici web | Google Analytics Mai 23, 2014
      Statistici web – Web Analytics (Analiza web) este procesul de colectare, măsurare şi analizare a activităţii utilizatorului pe site, în vederea atingerii obiectivelor dumneavoastră. Instrumentele de analiză ajută proprietarul site-ului pentru a urmări statisticile site-ului, inclusiv comportamentul vizitatorilor pe site. Ele ajută, de asemenea, proprietarul […]
      laurentiu vlad
    • Google Translate | Google Traducere Mai 21, 2014
      Google Translate este un traducator automat oferit de Google. Fiind un traducator automat Google Traducere nu are o fidelitate extraordinar de mare, insa este acceptabila. De curand Google Translate a lansat traducerea in cateva limbi noi,  fiind primul traducator automat gratuit din si in bulgara, ceha, croata, hindi, poloneza si romana. Astfel, traducatoru […]
      laurentiu vlad
    • 4 modalitati de promovare a afacerii cu investitii minime Mai 19, 2014
      Pentru ca o afacere sa aiba succes aceasta trebuie sa fie cat mai bine planificata. Planificarea activitatilor de marketing, analiza pietei, conceperea produsului si a modului in care acesta va apare pe piata, estimarea cheltuielilor duc la o conturare cat mai clara a activitatilor si directiilor de evolutie a firmei. Planul de marketing face parte … Continu […]
      laurentiu vlad
    • Keyword Tips – Page optimization Mai 15, 2014
      Frecventa cuvintelor cheie (Keyword Frequency) = De cate ori cuvantul cheie se gaseste intr-o arie specifica a paginii incluzand meta tag-urile, titlurile, textul paginii si alt-tag-urile (descrieri ale imaginilor din site). O regula aproximativa este folosirea cuvantui cheie nu mai mult de trei ori in fiecare meta tag, de patru ori in tag-ul de titlu, … Con […]
      laurentiu vlad
    • Google si alte motoare de cautare pe internet: Cenzurat Mai 14, 2014
      Utilizatorii online vor putea cere  gigantului Google si altor motoare de cautare pe internet sa stearga din rezultatele cautarilor online unele informatii, link-uri catre stiri, decizii judecatoresti si alte documente care contin informatii defaimatoare, potrivit unei hotarari CEJ (Curtea Europeana de Justitie), masura pe care gigantul IT Google o considera […]
      laurentiu vlad
    • Keyword research Mai 13, 2014
      Keyword Research – Ce este si cum se face Keyword Research? Conform definitiei pe care o avem in Glosarul SEO rezulta asa: Keyword Research: se refera la procesul de cautare, cercetare, si intocmirea unui raport ce contine cuvintele cheie relevante pentru un anumit site si analiza celor mai eficiente. Cum procesul de identificare şi alegere … Continue readin […]
      laurentiu vlad
    • Descarca template-uri, carti de vizita si brosuri Mai 12, 2014
      Descarca template-uri, carti de vizita si brosuri. Pe site-ul Serif gasim o categorie de unde putem descarca gratis template-uri, carti de vizita si brosuri. Graphic Design Divizia noastra de grafica va ofera sprijinul in realizarea urmatoarelor repere:​ definire elemente grafice reprezentative (culori si forme), design carti de vizita, pliante, bannere web, […]
      laurentiu vlad
    • Premii – Sponsorizarea unui concurs Mai 12, 2014
      Sponsorizarea unui concurs. Aceasta este o modalitate perfectă pentru a promova produsele sau serviciile oferite. Oamenii îndrăgesc jocurile şi lucrurile gratuite. Costul tău este minim (un premiu pe săptămână şi timpul pentru a organiza concursul), iar profitul este foarte bun. Un concurs va atrage întotdeauna două categorii de vizitatori: aceia care îndrăg […]
      laurentiu vlad
    • Easy Slideshow Maker Mai 11, 2014
      Site-ul Slideshow Maker ne permite sa creem slide show-uri cu pozele noastre. Cu Slideshow Maker putem alege mai multe poze din pc-ul nostru, apoi, putem alege dimensiunile slide show-ului, efecte de tranzitie, viteza de tranzitie etc. Slide show-ul creat, poate fi salvat ca fisier flash in pc-ul nostru. Adresa site-ului: http://www.frobee.comPostat în:Metod […]
      laurentiu vlad
    • Top 8 aplicații web pentru un marketing de succes Mai 10, 2014
      Voi folositi altceva? Te rog sa ne spui si noua. Twitter – glumeam, nu cred că merită locul 1 Facebook – http://www.facebook.com – clar LinkedIn – http://www.linkedin.com – networking, agendă contacte Slideshare –  http://www.slideshare.com – resurse, depozit de prezentări WordPress – http://www.wordpress.org – cei care au blog înțeleg de ce Google Reader – […]
      laurentiu vlad
    • Servicii profesionale de graphic/ui/ux/web design Mai 10, 2014
      Oferim servicii profesionale si de o buna calitate la cele mai mici preturi: web design, magazin virtual, creare site / blog, redesign site existent si multe altele, precum si crearea de grafica tip publicitar: carti de vizita, brosuri, cataloage, invitatii evenimente, pliante, ecusoane, postere si alte elemente grafice. www.ipsum.ro #lovetodesign #thecreati […]
      laurentiu vlad
    • Cum sa fac reclama cu Google Adwords Septembrie 7, 2013
      1. Pasul 1: Start Accesati www.google.ro/adwords Daca aveti deja un cont introduceti in partea dreapta adresa de e-mail si parola sau dati click pe “Incepeti acum” 2. Pasul 2: Contul Adwords Introduceti adresa dvs. de email si alegeti o parola. Urmati instructiuniile simple pentru a crea contul. Verificati-va adresa de email. 3. Pasul 3:  Prima … Continue re […]
      laurentiu vlad
    • S-a implinit 5 ani de la lansarea Blogului Noiembrie 28, 2012
      Astazi acest blog implineste 5 ani de activitate astfel fiind creat in noiembrie 2007 iar primele articole create in decembrie 2007. La multi ani echipei metode de promovare! In continuare poti vedea cum am sarbatorit cand s-a implinit 2 ani de la lansarea Blogului.Postat în:Metode de promovare Tagged: activitate, aniversare, bilanţ, Blogging, la multi ani, […]
      laurentiu vlad
  • Categorii

  • Comentarii recente

    alunu pe Cum sa faci server de CS (cu A…
    MuOnline OldSchooL pe Cum sa faci server de mu onlin…
    Standup comedy in sc… pe Istoria sexului oral
    arabu pe Cum sa faci server de mu onlin…
    Anna pe Cum sa folositi aol 9
  • Arhive

Cum să faci un site folosind programe gratuite

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”&gt;. 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://www.site.ro/cale/paginaB.html”></a&gt;;
* 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.

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s

%d blogeri au apreciat asta: