+ All Categories
Transcript
Page 1: Web design si programare web

Elemente de web design

Lucrul cel mai important care trebuie facut inainte de a incepe propriu-zi sa scrieti o pagina web, este proiectarea acesteia.

Primul lucru esential pe care trebuie sa il aveti in vedere cand incepeti proiectarea de design, este faptul ca trebuie sa captati atentia in maxim 10 secunde. Primele secunde in care privirea vizitatorului ia contact cu pagina dvs. vor fi determinante pentru succesul dvs. Al doilea lucru este acela ca prin combinarea tuturor elementelor de webdesign, trebuie sa rezulte, in final, un stil aparte, usor de recunoscut care sa va diferentieze si sa va impuna pe piata.

Caracteristici tehnice

In urma studiilor efectuate, rezulta ca trebuie sa va verificati aspectul paginii folosind cerinte minime. In acest fel veti fi convinsi ca va fi vazut de toata lumea, intr-un mod acceptabil. Aceste cerinte minimale hardware sunt: un monitor VGA de 14 inch, 256 culori si o rezolutie de 640/800 pixeli, un modem intern obisnuit cu rata de transfer de 28 kbps, un calculator Pentium ce foloseste Windows ca sistem de operare si browserele: Internet Explorer si/sau Netscape Navigator. In mod evident, nevoile utilizatorilor cu monitoare de mica performanta trebuie avute in vedere intai.

Text

Tineti cont de urmatorul aspect: oamenii sunt totusi obisnuiti cu cartile in format normal. In marea lor majoritate, textul este de culoare neagra pe fond alb, pentru ca asigura vizibilitatea maxima. Acestea sunt culorile pe care vi le recomand si eu. Pentru a da un aspect mai placut, puteti de exemplu sa realizati un fundal de culoare alba cu mici interferente de aqua marin, sau galben deschis. Atentie insa sa nu se suprapuna textul peste aceste "pete" de culoare in asa fel incat sa se piarda din lizibilitate. Pentru a sublinia titlurile, va recomand sa folositi in primul rand alta culoare (rosu sau negru cel mai bine), textul sa fie marit cu o unitate sau maxim doua fata de restul textului. In nici un caz nu va recomand sa il subliniati. Puteti folosi in schimb scrierea inclinata.

Cuvintele - cheie din text ( acele cuvinte sau grup de cuvinte pe care doriti sa le subliniati in mod special), le puteti scrie cu alta culoare (va recomand albastru). Cele mai "bune" culori sunt :rosu, negru si alb (nu intamplator logo-ul companiei Coca - Cola este rosu, negru si alb). Aveti grija sa nu depasiti mai mult de trei culori pe pagina, pentru ca devine prea "pestrita". Impartiti fraza in propozitii cat mai simple. Nu depasiti patru ,maxim cinci propozitii pe fraza, pentru ca devine prea greu de urmarit. Un sfat: ochiul uman este obisnuit cu paginile de carti normale- nu depasiti o medie de 8-10 cuvinte pe fiecare rand.Puteti folosi fonturile uzuale Arial, Times New Roman, Verdana sau Courier. Nu incercati sa folositi mai mult de doua stiluri de text pentru o pagina, si pastrati aceleasi fonturi pentru toata pagina. ( de exemplu: Arial pentru text si Verdana pentru titluri) . .

Animatie

Page 2: Web design si programare web

Personal, nu va recomand folosirea marcajelor care defileaza, pentru ca pot deveni obositoare pentru o persoana care petrece mai multe ore in fata calculatorului, si in plus s-ar putea sa distraga atentia de la continutul in sine. Puteti folosi mai bine textele care clipesc, acele "blinkuri", dar cu masura ( cel mult unul pe pagina). Nu folositi mai mult de doua ecrane pentru o pagina, pentru ca s-ar putea sa irite utilizatorul prin derularea la nesfarsit. Este mult mai comod sa execute un click (de la inceputul, sfarsitul sau din dreapta paginii) si sa se deplaseze la sectiunea care il intereseaza. De aceea, va recomand cu tarie sa prevedeti o harta a sitului in locurile mai sus mentionate. In ceea ce priveste fisierele grafice, retineti ca un singur banner are o dimensiune medie de 70-80 kb, care pe un modem cu viteza mica se incarca in aproximativ 20-30 de secunde. Aveti toate sansele ca vizitatorul sa isi piarda rabdarea si sa paraseasca pagina. Va recomand ca suma dimensiunilor fisierelor care contin imagini grafice sa fie de maxim 50 kb. Cand alegeti pentru fundal o imagine grafica, tineti cont ca unii utilizatori au dezactivata optiunea de incarcare a imaginilor. Indiferent de imaginea folosita, asigurati-va ca ati folosit o compresie maxima a fisierului grafic. Indiferent de marimea pozei, ele se vor aseza una langa alta, lipite (deci practic fundalul este alcatuit din mici patratele asezate una langa alta, fiecare patratel continand aceeasi imagine). Daca va hotarati sa folosti imagini animate, aveti in vedere ca unele browsere nu suporta animatia. Atunci ele vor afisa numai primul cadru al animatiei, care deci trebuie ales cu maxima atentie. De asemenea, nu uitati ca imaginile animate maresc timpul de incarcare al paginii, lucru foarte important. In orice caz, ele trebuie plasate pe pagina in asa fel incat sa nu atraga atentia de la citirea unui text de maxima importanta.

Pentru crearea butoanelor, puteti folosi imagini sugestive. De exemplu: o casa pentru HOME, un ziar pentru ZIARE/ARTICOLE ELECTRONICE, un premiu care sa sugereze ideea de CONCURS cu PREMII, sageti directionale pentru INAINTE si INAPOI, etc. Tineti cont de un lucru: inainte de a folosi o singura imagine grafica, puteti crea efecte deosebite prin utilizarea tag-urilor HTML text color, size, style, font face. Nu abuzati insa, pentru ca va garantez ca veti da impresia de amatorism. Tineti cont ca JPEG este cel mai mic format, cel mai rapid si poate afisa un numar practic nelimitat de culori, iar formatul GIF este limitat la 256 de culori. Intotdeauna cand creati o imagine Gif, reduceti numarul de culori la cel mai mic numar posibil. In etapa a doua, realizati o imagine mai mica. Folositi aceasta imagine ca un link (legatura) catre o imagine mai mare, care sa poata fi privita in intregime daca utilizatorul doreste. Nu omiteti sa includeti intotdeauna parametrii HEIGHT si WIDTH in tag-ul IMG. Daca le folositi, Navigator rezerva loc pentru ele, si continua sa le incarce impreuna cu textul, in asa fel incat vizitatorul poate citi in timp ce imaginile se incarca ( acest lucru este mai putin adevarat pentru Explorer). Daca vreti sa stiti care este dimensiunea cea mai buna pentru imaginile dvs., in functie de locul in pagina, nu aveti decat o cale directa: modificati si incercati cu diverse valori ale parametrilor mai sus amintiti, pana cand vi se pare ca ati ajuns la ceea ce doriti.

Structurare

Una din sarcinile imediate este aceea de a comunica clar, fara echivoc si intr-un mod structurat informatia. Aceasta inseamna organizarea intregului material ca prima parte a proiectului de webdesign. Dupa care trebuie sa raspundem la intrebarea: va fi structurat pentru acces aleator ?- din orice punct al sitului putem ajunge in oricare altul (aceasta situatie este folosita in cazul siturilor de dimensiuni mari), cu informatie vasta si nu tocmai omogena, sau cu acces structurat ( de exemplu, ca un tur al unei galerii de arte sau al unui Muzeu, in care ghidul ne conduce pe trasee bine stabilite anterior, iar operele de arta sunt asezate dupa autori, perioade sau curente). Eu am ales prima varianta, pentru ca am fixat ca scop principal al sitului: devenirea unei librarii electronice cu carti din toate

Page 3: Web design si programare web

domeniile: afaceri informatica, Internet, calculatoare, ziare electronice, articole, beletristica, carti pentru copii, matematica, etc. De asemenea, m-am gandit ca numarul de clickuri pe care trebuie sa le execute un vizitator este mult mai mare in al doilea caz, daca vrea sa ajunga la un subiect care il intereseaza, decat in primul caz, unde este suficienta o singura apasare pe buton pentru a ajunge din orice punct in oricare altul. A doua intrebare la care trebuie sa raspundem este: ne adresam tuturor sau unui segment de piata foarte bine structurat? In cel de al doilea caz, ganditi-va sa aflati care este nivelul de educatie si de cultura al grupului, care le sunt preferintele si orientarile. Nu este acelasi lucru in a proiecta un sit pentru oameni de afaceri, potentiali oameni de afaceri, profesori si elevi/studenti, sau un sit dedicat in exclusivitate sexualitatii sau unui curent religios. A treia intrebare este: impartim situl in cadre, folosim tabele sau nici una din variantele anterior mentionate? Sa luam fiecare caz in parte. Cadrele (sau frame-urile ) au fost introduse in 1995 de Netscape Navigator 2.0. Se poate imparti fereastra browserului in cate un cadru, in care fiecare reprezinta cate o pagina web diferita. Asta inseamna ca daca dorim sa schimbam continutul unei pagini, practic nu mai este nevoie sa schimbam toata pagina, ci doar cadrul in care este continuta informatia respectiva. Acesta este primul avantaj. Daca raspunsul la intrebarea: " vom face modificari zilnice sau aproape zilnice?" este DA, atunci treceti un punct in dreptul folosirii cadrelor. Al doilea avantaj este ca o accesare a unui cadru poate duce la schimbari in alt cadru. Puteti obtine astfel efecte deosebite.Au insa si dezavantaje: ele sunt indexate mai greu de motoarele de cautare. In general, un motor de cautare indexeaza o pagina in baza sa de date prin: titlul fisierului, tag-urile meta( cuvinte cheie, continut si descriere), si textul efectiv din pagina. Daca pagina este parte a unui set de cadre, motoarele de cautare nu vor tine cont de aceasta, iar utilizatorii nu vor avea acces la meniul de navigare. In orice caz, daca va decideti la aceasta solutie, nu folositi cadre pe prima pagina ( adica in fisierul index.html). O alta solutie mai buna ar fi folosirea tabelelor ca metoda de impartire a continutului. Dar, in nici un caz (acesta este sfatul meu) nu incepeti pagina cu un tabel. Eu am ales cea de a doua solutie, dar dupa ce am introdus la inceputul paginii un text de aproximativ 20 de propozitii.

Introducere in HTML

Hyper Text Markup Language -HTML, este un ansamblu de coduri specifice, care se insereaza intr-un document, pentru a oferi informatii despre legaturi, formatare, etc. Se bazeaza pe SGML- adica limbajul Generalizat Standard de Marcare. Toate definitiile HTML incep cu caracterul < ( simbolul "mai mic") si se termina cu caracterul > - simbolul "mai mare" (cu unele mici exceptii). De exemplu:< html > < / html > Acest cod comunica unui interpretor faptul ca ceea ce urmeaza este scris in limbajul HTML. Definitiile incluse intre caracterele mai sus amintite se numesc controale, marcaje sau tag-uri. Noi le vom numi controale. Unele din controale sunt pereche (ca cel de mai sus), iar altele nu. Controlul de

Page 4: Web design si programare web

inceput se numeste "de deschidere", iar cel de sfarsit control " de inchidere". HTML nu face diferenta intre literele mari si literele mici. De exemplu, < html > , este totuna cu < HTML > .

Pentru a obtine un document HTML, este suficient sa il scrieti folosind un editor de texte, formatat folosind controalele respective, sa il salvati cu un nume oarecare, dar obligatoriu cu extensia .html (sau .htm), si sa nu uitati ca la tipul fisierului sa indicati "All Files". In general, puteti folosi orice editor care permite salvarea fisierelor obisnuite ASCII (adica text).

Deschideti editorul de texte Notepad, scrieti aici codul:

<html>

</html>

Si salvati-l astfel:

La numele fisierului scrieti index.html, si tipul trebuie ales “All Files”.

pa care nu mai aveti altceva de facut decat sa il deschideti cu un browser ( Internet Explorer sau Netscape Navigator).

Dati dublu click pe el, il deschideti si ceea ce vedeti, este evident o pagina alba.

Daca doriti sa vedeti sursa, adica codul, accesati meniul View --- > Source, si puteti face toate modificarile dorite. Nu uitati sa il salvati inainte de a-l inchide (bineinteles, daca doriti aceasta). Ca sa vizualizati modificarile facute, apasati tasta F5 sau butonul Refresh. Daca veti scrie pur si simplu documentul fara a folosi nici un control, veti avea surpriza ca oricare din programele de navigare il va vedea altfel decat v-ati asteptat. Desigur, puteti folosi orice program care realizeaza prin cateva apasari de taste pagini Web destul de "dragute". Dezavantajul major ar fi ca aceste programe costa. Inainte de a da banii pe un astfel de program, va sfatuiesc sa studiati bine HTML. Chiar daca veti sfarsi prin a achizitiona un astfel de program, veti putea crea pagina cu ajutorul lui, dupa care puteti intra in codul sursa HTML, si veti fi capabili sa faceti orice modificare doriti. De asemenea, cunoscand HTML, puteti studia si analiza codul sursa al unor pagini web de "top", "furandu-le" astfel secretele. Toate fisierele HTML este bine sa se afle in acelasi folder. Daca veti avea referinte (adica legaturi intre fisiere), intre fisiere care nu se gasesc in acelasi director, veti fi nevoiti sa indicati toata calea spre acele fisiere. Dupa cum arata si numele, HTML este un limbaj de tip "script". Ce este un limbaj de tip "Script"? Este un limbaj de programare folosit pentru a adauga in paginile web interactivitate. Un limbaj script se foloseste in principal in interiorul altor programe, in vederea extinderii posibilitatilor acestuia. Daca ati scris un macro in Visual Basic pentru a realiza o sarcina in Microsoft Word, atunci inseamna ca deja ati folosit un limbaj script. Cand vedeti o pagina Web, in realitate, documentul HTML este transferat de pe server (sau host) pe calculatorul dvs., este incarcat intr-un browser si este interpretat, rezultatul fiind cel afisat pe display.

Page 5: Web design si programare web

Structura unui document HTML< html > < head > .....definirea headerului< /head > < title > .... definirea titlului< /title > < body > .... corpul documentului < /body >< /html > Sa le analizam pe rand. Documentul HTML (asa cum am mai spus), este inclus intre tag-urile < > (control de deschidere), si < /html > (control de inchidere). Tot ceea ce se gaseste in afara acestor controale ar trebui sa fie ignorat de browser (in realitate vom vedea ca lucrurile nu stau intotdeauna asa).Sectiunea a doua este headerul, inclus intre tag-urile < head > si < /head > . Aceasta sectiune contine informatii despre: descrierea paginii, cuvintele cheie dupa care se va face cautarea, si nu este afisata in document. Ca sectiune inclusa in header, exista titlul documentului. Acesta va fi afisat in bara de titlu a ferestrei browserului. Este inclus intre tag-urile < title > si < /title > . Ultima sectiunea reprezinta chiar "corpul" documentului, si este inclus intre tag-urile < body > si < /body > . Daca doriti sa comunicati faptul ca documentul pe care il creati este in conformitate cu standardele HTML in vigoare, va trebui ca incepeti documentul astfel:< !DOCTYPE HTMLPUBLIC"-/IETF//DTD HTML 2.0//EN" > Aceasta este o declaratie standard pentru HTML de nivelul 2.Se pune intrebarea fireasca: daca semnul"<" este interpretat ca fiind inceputul unei definitii, cum vom reprezenta in pagina semnul de " mai mare" ? Veti utiliza simbolul "&" urmat de grupul de caractere "lt" (less than)- pentru semnul "mai mare", respectiv simbolul "&" urmat de grupul de caractere "gt" (great then)-pentru simbolul "mai mare".Pentru a indica titlul unei lucrari, aL unui articol, al unei carti, puteti folosi tag-ul < cite > .Exemplu:Informatii suplimentare in lucrarea: < cite > Programarea in C++ < /cite >, iar efectul va fi:Informatii suplimentare in lucrarea:Programarea in C++.

Formatarea textului

Trecerea la o linie noua sau paragraf nou.

Se realizeaza cu controlul: < br > - pentru linie noua, respectiv < p > pentru paragraf nou. Exemplu: daca veti scrie-

< html >Numele meu este < br > Bogdan.

Veti obtine ceva de genul:

Page 6: Web design si programare web

Numele meu este (ati indicat trecerea la linie noua) Bogdan.

Pentru ca textul sa apara scris ca si cum ar fi o semnatura, se foloseste marcajul < pre >,marcaj pereche cu < /pre >. De exemplu:

< html >Astept sa ma contactati cat mai curand< pre >Sincer, al dvs.Bogdan</pre >< /html>

rezultatul va fi: Astept sa ma contactati cat mai curand

Sincer, al dvs.

Bogdan

Este indicat sa impartiti textul in sectiuni logice. Pentru aceasta, aveti posibilitatea introducerii in document a liniilor orizontale subtiri, care mai sunt numite si "riglete". Marcajul este:< hr size=numar1 noshade/shade width=numar2 > Parametrii au urmatoarea semnificatie:- numar1: indica "grosimea" in pixeli a rigletei- noshade sau shade" indica daca linia va fi fara efecte de umbrire sau cu aceste efecte.- numar2: indica lungimea liniei. Acest parametru poate fi specificat in 2 moduri: in procente (exemplu: width=50%, indica o linie pe o jumatate de ecran), sau in pixeli (exemplu: width=200).

Se poate indica un anumit tip de font.< font size=numar color=culoare face=tip_font >. Acest marcaj are perechea: < /font > .-size=numar semnifica inaltimea fontului. Acest numar trebuie sa fie un numar intreg, cu valori posibile intre 1 si 7( 1 pentru cel mai mic, 7 pentru cel mai mare). Exemplu:

< font size=6 > Acest text e scris cu 6< /font > - va avea ca efect:

Acest text e scris cu 6

iar:

< font size=4 >

Page 7: Web design si programare web

Acest text e scris cu 4< /font >- va avea ca efect:

Acest text e scris cu 4

Pentru a indica un text mai mare decat cel utilizat in mod curent, puteti folosi elementul < big >, cu perechea sa < /big >. De exemplu:

< big > Acest text e marit < /big > iar acesta e normal. Efectul:

Acest text e marit iar acesta e normal.

Pentru a evidentia un text, putem folosi elementul < em >, cu perechea < /em >. Exemplu:

< em > Acest text e evidentiat < /em > fata de restul. Efectul:

Acest text e evidentiat fata de restul.

Culoarea poate fi specificata prin numele in limba engleza, sau in hexazecimal. Exemple:black- negru, white- alb, aqua-albastru marin, blue- albastru, cyan- portocaliu, green- verde, etc. aqua- 00FFFF.Exemplu:

< font color=aqua > Acest text e scris cu aqua< /font >- va avea ca efect:

Acest text e scris cu aqua

sau in hexazecimal: < font color=#00FFFF >Acest text e scris cu aqua< /font >- va avea ca efect:Acest text e scris cu aqua

Observati ca valoarea in hexazecimal a fost precedata de caracterul: "#". Introducerea indicilor superiori sau inferiori in cadrul unui text, se face prin tag-urile:< sup> (cu perechea < /sup > )- pentru indice superior, respectiv < sub > (cu perechea < /sub > ) -pentru indice inferior. Iata un exemplu:

Spectacolul incepe la 7 < sup > 40 < /sup > , efectul in pagina fiind:Spectacolul incepe la 740

In final, iata tag-ul care va permite sa subliniati un text, pentru a-l pune in evidenta:< u > - de la underline, cu perechea < /u > . Un exemplu:

< u > Acest text e subliniat, < /u > , iar acesta nu mai este subliniat.

Page 8: Web design si programare web

Efectul:

Acest text e subliniat, iar acesta nu mai este subliniat.

Pentru a lasa mai mult de un spatiu liber intre cuvinte, utilizati tag-ul "&" urmat de combinatia de litere "nbsp"(de la "non-breaking space"). Urmatoarele 2 cuvinte sunt scrise cu 4 spatii libere intre ele (evident, am folosit de 4 ori tag-ul de mai sus):

cuvant1 cuvant2.

Exista elementul < code > (cu perechea sa), pentru a specifica faptul ca ceea ce urmeaza este codul sursa al unui program (C++, Pascal, sau alt limbaj de programare):< code >void main (void){printf("Hello, World");}< /code >

Iata si efectul:void main (void){printf("Hello, World");}

In ceea ce priveste tipul fontului (parametrul "face"), puteti indica unul sau mai multe fonturi, separate prin virgula. Daca browserul nu va gasi instalat primul font, va trece la urmatorul, si asa mai departe. Exemplu:

< font face="Times New Roman, verdana" >

Acesta este un text scris cu caractere "Times New Roman" sau "verdana". Efectul va fi:

Acesta este un text scris cu caractere "Times New Roman" sau "verdana".

Pentru a indica inclinarea corpului literei, adica scris italic, controlul este:< i >,( cu perechea < / i >), iar pentru a indica scris "ingrosat", adica bolduit, controlul este : < b > (cu perechea < /b >).Exemplu:

< i > Acesta e text inclinat< /i >

cu efectul: Acesta e text inclinat, sau: < b >

Page 9: Web design si programare web

Acesta e text bolduit< /b >

cu efectul: Acesta e text bolduit

Culoarea textului

Culoarea poate fi specificata prin numele in limba engleza, sau in hexazecimal. Iata o lista de culori uzuale (denumirea in limba engleza si valoarea hexa):

aqua-00FFFFazure-F0FFFFblack-000000blue-0000FFbrown-A52A2Achocolate-D2691Ecoral-FF7F50cyan-00FFFFfuchsia-FF00FFgold-FFD700gray-808080green-008000indigo-4B0082lime-00FF00magenta-FF00FFmaroon-800000olive-808000pink-FFC0CBred-FF0000silver-C0C0C0teal-008080violet-EE82EEwhite-FFFFFFyellow-FFFF00

Grafica

Reprezinta unul din aspectele cele mai importante ale unei pagini de web. O imagine grafica reusita sau o animatie poate produce un efect vizual deosebit asupra vizitatorului. Atentie, insa: daca pagina este prea incarcata cu grafica, poate obosi si poate duce la marirea considerabila a timpului in care se incarca.

Page 10: Web design si programare web

Inserarea imaginilor grafice

Se foloseste tag-ul:< image src="fisier_grafic" > Pot fi specificati o serie de parametrii:-height=numar; este inaltimea imaginii; numarul poate fi specificat in pixeli, sau in procente-width=numar; este lungimea imaginii; numarul reprezinta acelasi lucru -ALT="text asociat imaginii"; este textul care va apare in cazul in care imaginea nu va fi incarcata-align=paramteru; specifica pozitionarea textului fata de care imaginea nu e separata cu < br > sau < p > Parametrul poate fi:-top : text plasat in partea superioara a imaginii-midlle: text plasat la mijlocul imaginii -left: text plasat la stanga-right:text plasat la dreapta

Puteti centra o imagine, folosind tag-ul : < center > (cu perechea < /center > ).

Iata exemplul unei imagini care se gaseste in fisierul "poza.jpg", va avea inaltimea de 200 pixeli, latimea de 150 pixeli, iar textul asociat va fi "imagine noua". Tag-ul complet este:< image height=200 width=150 src="poza.jpg" ALT="imagine noua" >

Texte animate

Puteti introduce si texte care defileaza (efectul de "scroll"). Se va folosi tag-ul: < marquee > Text care defileaza < /marquee > Acest tag are o serie de parametrii prin care pot fi specificate: modul de "defilare", timpul intre 2 aparitii succesive, directia de deplasare. Acestia sunt:-directia de deplasare: direction=left-stanga (e implicita), right-dreapta, down- in jos, up-in sus.- modul de comportare: behavior=scroll (implicit- defileaza permanent), slide (dupa ce parcurge o data ecranul se opreste), alternate (se deplaseaza alternativ dintr-o parte in alta a ecranului). In afara de caracteristicile amintite deja, mai pot fi setate: latimea si inaltimea deplasarii textului, precum si culoarea spatiului in care se deplaseaza acesta. Textul urmator se va deplasa alternativ pe ecran, latimea "benzii" in care se deplaseaza este de 60 % din ecran, inaltimea este de 10 pixeli, iar culoarea in care se produce deplasarea este galbena. Tag-ul complet este:< marquee behavior=alternate width=60% height=10 bgcolor=yellow> Text < /marquee >

Ma simt obligat sa reinserez indicatia pe care am dat-o si in alt capitol. Nu exagerati cu marimea fisierelor grafice, pentru ca se mareste mult timpul de incarcare a paginii, si s-ar putea sa pierdeti multi

Page 11: Web design si programare web

vizitatori grabiti. Testati pagina dvs. pe un calculator cu resurse minime si un monitor asemenea, deoarece nu toti cei care va viziteaza dispun de echipamente de "ultima ora". Nu va recomand folosirea textelor care defileaza, deoarece distrag atentia de la continutul principal, iar in plus s-ar putea sa devina prea obositoare. Daca veti respecta bunul simt al proportiilor intre text si imagine, veti alege minimul de culori care sa creeze un ansamblu placut ochiului si sa asigure lizibilitatea maxima, atunci veti fi reusit intr-adevar sa creati o pagina atractiva. Nu uitati ca nu tot ceea ce va place dvs. place si altora, asa ca ar fi bine sa va "testati" pagina" prin impresiile cunostintelor, prietenilor, rudelor, etc.

In cadrul cursurilor de web design si programare web de la Centrul Doxis ( www.cursuriploiesti.ro ), se realizeaza nmeroase studii practice in sensul “testarii” paginii.

Care este legatura dintre web design si SEO?

De cele mai multe ori, incepatorii nu fac legatura intre partea de web design a site-ului si partea de optimizare pentru motoarele de cautare, iar aceasta este o greseala fundamentala care duce la un site de PROASTA CALITATE.

Trebuie spus de la inceput ca motoarele de cautare (din care ne intereseaza Google, pentru ca acesta este motorul de cautare folosit de 85% dintre romani), pozitioneaza mai bine siturile care pot fi accesate la fel de usor de pe orice tip de computer, orice fel de conexiune la Internet, orice sistem de operare, adica site-urile CAT MAI APROPIATE DE HTML.

Deci, este bine ca situl sa fie in format HTML, si nu Flash.

A doua problema: vizitatorii si motoarele de cautare apreciaza site-urile care se incarca foarte repede. Si aici sunt cazuri cand web designul trebuie sa se raporteze de la inceput la regulile SEO. Adica, imaginile grafice nu vor fi foarte multe, si de o inalta rezolutie.

Pentru a verifica viteza de incarcare a oricarui site, putem accesa:www.verificare.seosite.ro/

Dati click la “web site speed test”, tastati url-ul site-ului si aflati viteza de incarcare a site-ului: Load Time.

Prima intrebare la care trebuie sa raspundem cand incepem proiectarea de web design este: ce promovam prin site. Poate fi un produs, un serviciu, un brand. Sa presupunem ca dorim sa promovam produse cosmetice, ale unei firme nou aparuta pe piata romaneasca.

A doua intrebare: cui promovam, adica stabilirea pietei tinte.

Atentie: promovarea unui produs pe piata romaneasca nu prea respecta regulile

Page 12: Web design si programare web

aplicabile in Occident. Vrem sau nu, suntem o tara in care scandalurile sunt mai mediatizate decat aparitia unei carti bune, unde un spectacol al unui manelist cunoscut face mai multa valva decat un concert al unui cunoscut vilonist.

Cum stabilim corect care este piatra tinta:

Se face in functie de mai multe carateristici.

Economic – adica puterea de cumparare a utilizatorilor site-ului. Vom vinde produse persoanelor cu venituri sub medii, venituri medii sau venituri mari? Avand in vedere ca cei cu venituri mari cumpara produse de firma, iar produsele firmei noastre sunt necunoscute, rezulta ca ne vom adresa primelor 2 categorii. Din cele doua, baza o va reprezenta segmentul cu venituri medii.

Al doilea aspect este aspectul pregatirii profesionale. Sunt trei segmente: persoane cu studii minime, studii medii sau superioare. Ne vom adresa in cazul nostru tuturor celor 3 categorii, insa prponderent persoanelor cu studii medii.

Al treilea aspect este varsta. Ne vom adresa persoanelor cu varste cuprinse intre 16 si 45 de ani.

Ultimul aspect este sexul: in cazul nostru, vor cumpara atat femei, cat si barbati, cei din urma pentru uz personal sau pentru cadouri, surprize facute sexului feminin.

In acest caz, vom alege 24 de persoane din cercul nostru de cunoscuti sau al prietenilor nostri:

− 12 persoane de sex feminin

− 12 persoane de sex masculin

− 24 de persoane cu venituri mici si medii, din care 18 persoane cu venituri medii si 6 persoane cu venit minim

− 24 de persoane cu varste cuprinse intre 16 si 45 de ani, astfel: 12 persoane cu varste cuprinse intre 25 si 35 de anu, 6 persoane cu varste cuprinse intre 16 si 25 ani, 6 persoane cu varste cuprinse intre 35 si 45 de ani.

La ce ne foloseste aceasta esantionare?

Intocmim un chestionar, cu intrebari simple si care admit raspunsuri de genul DA/NU.

Se vor nota raspunsurile pe o scara de la 1 la 10:

1. Este acest produs util pentru dvs?

2. Este ieftin in raport cu alte produse?

3. Este cunoscut pentru dvs?

4. Este usor de procurat?

Pe baza raspunsurilor primite, se va intocmi un clasament: daca produsul este ieftin pentru utilizator, atunci in textul paginii se va insista pe acest lucru, daca utilizatorul nu constientizeaza utilitatea lui, se va insista pe avantajele pe care le aduce folosirea lui, etc.

Care este concurenta noastra?

Page 13: Web design si programare web

Dupa o cautare pe Google, se stabilesc care vor fi competitorii nostri. Se noteaza din siturile lor: lista de cuvinte cheie folosite, lista frazelor, se analizeaza frecventa cuvintelor cheie.

Dupa ce am “creionat” profilul utilizatorului, sa gasim culorile cele mai potrivite.

Din studiile efectuate la nivel mondial rezulta urmatoarele asocieri:

- rosu – pasionat , irascibil

- galben – posesiv, nesigur

- albastru – calm, perfectionist

- verde – prietenos, autoritar

- alb – inocent, simplu

- negru – sobru, serios

- violet – fantezist, fanatic

- portocaliu – sexualitate , caldura

- roz – tinerete , bucuria de a trai

In cazul grupului nostru tinta, vom alege culoare predominanta in background, roz/portocaliu, impreuna cu tente de rosu/violet.

Alegem codul culorilor:

Dupa ce am ales codul culorilor care vor domina backgroundul, alegem contrastul , care este foarte important intr-o pagina web.

Contrastul intr-o pagina web.

Din tabelul de mai jos, vom alege culorile cele mai potrivite pentru text.

Background

Rosu

Portocaliu

Galben

Verde

Albastru Violet Negru Alb Gri

Page 14: Web design si programare web

Prim plan

Rosu Slab Bun Slab Slab Slab Bun Bun Slab

Portocaliu

Slab Slab Slab Slab Slab Bun Slab Slab

Galben Bun Bun Slab Bun Slab Bun Slab Bun

Verde Slab Slab Slab Bun Slab Bun Slab Bun

Albastru Slab Slab Bun Bun Slab Slab Bun Slab

Violet Slab Slab Bun Slab Slab Bun Bun Slab

Negru Slab Bun Bun Bun Slab Bun Bun Slab

Alb Bun Bun Slab Slab Bun Bun Bun Bun

Gri Slab Slab Bun Bun Slab Slab Slab Bun

Rezulta in cazul nostru ca cea mai buna culoare pentru text este culoarea alba. Urmatoarea etapa este “sexualitatea” sitului, unde prin sexualitate nu se intelege in nici un caz prezenta elementelor grafice erotice sau pornografice.. Ne place sau nu, sexualitatea ne guverneaza psihicul. Despre acest subiect, s-au scrise mii de pagini si exista mii de studii. Prin sexualitate noi vom intelege si linii, forme, culori cu tenta sexuala, pe care le vom introduce pe site sub forma unor imagini ce “ating” subconstientul, asa numitele imagini subliminale (despre crearea lor si exemple, in cursul 4). Urmatoarea etapa: ce vocabular folosim? Avand in vedere piata noastra tinta, vom folosi un limbaj de o complexitate medie, bazata pe fraze comune cu cei ce folosesc un vocabular comun.

Urmatoarea etapa este modul de transmitere a mesajului: direct (produsul nostru este cel mai ieftin- mai ieftin nu se poate!), semidirect (studiile de piata arata ca obtineti avantaje daca folositi produsul nostru) si non direct (acestea sunt produsele noastre), Alegerea se va face in functie de piata tinta si de rezultatele chestionarului. In cazul nostru am ales modul direct de transmitere a mesajului.

Alegerea elementului “title”

Cum trebuie sa arate un element “title” corespunzator:

− trebuie sa contina primele doua cuvinte cheie

− trebuie sa faca referire la primele 5 cuvinte din site

Page 15: Web design si programare web

Optimizarea imaginilor

Am vazut multe imagini postate chiar pe situri profesionale, dar neoptimizate atat din punct de vedere al rezolutiei si al redimensionarii corecte, cat si tag-ului HTML folosit pentru includerea imaginilor in pagina.

Un program free care are optiunile de mai sus, este RIOT (Radical Image Optimization Tool). Nu este singurul free, dar este singurul care are optiunea “SaveForWeb”.

Adaugarea uni meta-tag corect

Se poate face din aceeasi resursa expusa inainte.

In continuare, derulam mai jos si facem setarile pentru limba si celelalte elemente:

CSS

CSS este acronim de la Cascade Style Sheet adica foi de stil in cascada.

In general, codul CSS este situat intr-un fisier separat de fisierul HTML. Daca modificam ceva in acest fisier, modificarile se vor reflecta in toate paginile.

Se pot crea efecte deosebite: suprapunerea unei imagini peste alta, suprapunerea unui text peste altul.

Dezavantajos este faptul ca pagina poate arata diferit in functie de browserul folosit.

Iata modurile in care poate fi inclus un stil CSS:

1. codul CSS este inclus in pagina HTML efectul se aplica in tot documentul

<html>

<head>

<style>

B {color: red ;}

I {color: blue ;}

</style>

</head>

<body>

<b> Acest element e ingrosat

</b>

<i> Acest element e inclinat

Page 16: Web design si programare web

</i>

</body>

</html>

Se observa ca acest cod e inclus in header-ul documentului, intre <head> si </head>. Prin <style> anuntam ca ceea ce urmeaza este cod CSS.

b- de la bold- specific culoarea tuturor textelor bolduite- rosu

i- de la italic- specific culoarea tuturor textelor inclinate- albastru

2. Codul este cuprins in document, dar efectul se aplica doar unor elemente.

<html>

<head>

</head>

<body>

<a href=”Concurs.html” style=”color: green;”>stabilim ca acest link sa apara cu culoare verde

Concurs </a>

<a href=”Diverse.html” style=”color: red;”>

Diverse</a>acest link cu culoare rosie

<a href=”Contact.html” style=”color: blue;”>iar acest link cu culoare albastra

Contact </a>

</body>

</html>

In acest fel, fiecare link va fi colorat altfel.

3. Codul CSS este in alt fisier, iar efectul se aplica intregului document.

Fisierul extern va trebui salvat cu extensia CSS, iar la tipul fisierului vom alege All Files.

Evident codul va fi scris tot in NotePad.

Fisierul index.html:

Page 17: Web design si programare web

<html>

<head>

<link rel=stylesheet href=”unu.css” type=”text/css”>link rel= link relativ catre un stylesheet (foaie de stil), codul este cuprins in fisierul unu.css, iar tipul acestui fisier este text/css- acestea fac parte din “gramatica” CSS

</head>

<body>

<a href=”Concurs.html”>

Concurs </a>

<a href=”Diverse.html”>

Diverse</a>

<a href=”Contact.html”>

Contact </a>

</body>

</html>

Fiserul unu.css va avea codul:

Body {color: blue;}stabilim culoarea fundalului albastru

A {color: red}linkurile A (de la <a href…>) sa fie colorate rosu

Numele culorilor poate fi specificat si prin coduri, ca in exemplu de mai jos:

<html>

<head>

<style type="text/css">

h1

{

background-color:#6495ed; este vorba despre cod hexazecimal, despre aceasta in cursul de maine, coduri RGB

}

p

{

background-color:#e0ffff;

}

Page 18: Web design si programare web

div

{

background-color:#b0c4de;

}

</style>

</head>

<body>

<h1>CSS background exemplu</h1>

<div>

Un text.

<p>Un paragraf.</p>

</div>

</body>

</html>

Tag-ul “div” este suport pentru alte tag-uri. Vrem sa creem un meniu, format din 3 link-uri, meniu aliniat stanga:

<div id="menu" align="right" >

<a href="#">ACASA</a> | <a href="#">CONTACT</a> | <a href="#">DESPRE NOI</a>

</div>

Alt exemplu: vrem sa centram un titlu:

<div id="content" align="center" bgcolor="white"> Titlu

</div>

Decorarea unui text:

<html>

<head>

<style type="text/css">

Tag-urile h1, h2…. h6 definesc niste head-uri, adica text scris evidentiat alfel- cu alta marime, fata de restul textului

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

Page 19: Web design si programare web

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

</style>

</head>

<body>

<h1>Acesta e primul paragraf </h1>

<h2>Acesta e al doilea</h2>

<h3>Al treilea</h3>

<h4>Al patrulea</h4>

<p><b>Observatie:</b> Blink-ul nu va merge in IE, Chrome, sau Safari.</p>

</body>

</html>

Marirea spatiilor dintre cuvintele unui document:

<html>

<head>

<style type="text/css">

p

{

word-spacing:30px;marim distanta dintre cuvinte la 30 de pixeli

}

</style>

</head>

<body>

<p>

Acesta e un text. Acesta e un text.

</p>

</body>

</html>

Alinierea unei imagini cu un text:

Page 20: Web design si programare web

<html>

<head>

<style type="text/css">

img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}

</style>

</head>

<body>

<p>An <img src="poza1.gif" width="270" height="50" /> aliniere implicita.</p>

<p>An <img class="top" src="poza1.gif" width="270" height="50" /> aliniere in partea de sus.</p>

<p>An <img class="bottom" src="poza1.gif" width="270" height="50" /> aliniere in partea de jos.</p>

</body>

</html>

Despre font (corpul literei)

In CSS putem defini o serie de caracteristici al fontului, obtinand efecte deosebot de interesante.

Prima caracteristica este familia din care face parte fontul.

font-family

Aceasta proprietate accepta o serie de valori, separate prin virgula.

In cazul in care browserul nu gaseste prima valoare, trece la cea de a doua, apoi la cea de a treia, si asa mai departe, pana cand gaseste o valoare, iar daca nu, foloseste valoarea fontului implicita.

Daca numele fontului contine spatii, este obligatoriu sa il includem intre ghilimele.

CSS ne pune la dispozitie cinci tipuri de baza. Dupa ce am enumerat toate fonturile apartinand tipului, punem si familia (tipul)din care face parte, la urma.

Cele cinci tipuri sunt:

Page 21: Web design si programare web

serif - ("Times New Roman", Garamond)

sans-serif - (Arial, Verdana, Helvetica, Tahoma)

cursive -("Lucida Handwriting", "Zapf-Chancery")

monospace - (Courier, "MS Courier New", Prestige)

fantasy - ("Comic Sans", Whimsy, Critter, Cottonwood)

- Exemplu:

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }

p { font-family: "Comic Sans", Whimsy, Critter, fantasy; }

Inaltimea fontului:

font-size

Aceasta, evident controleaza inaltimea, care poate fi o valoare fixa, sau se poate referi la inaltimea actuala. Poate avea valori in mai multe unitati de masura:

- Pixels (px),, Inches (in), Centimeters (cm), Millimeters (mm), Points (pt).

Un pixel este cel mai mic punct care paote apare pe ecran.

Un punct (point) este egal cu 1/72 inch.

Unitati de masura relative: mai mare sau mai mic, se refera la cresterea sau descresterea cu o unitate fata de valoarea initiala.

- larger, smaller

- percentage – procent fata de valoarea anterioara.

- Sintaxa:

selector { font-size: value; }

Exemplu:

<html>

<head>

<title>font-size</title>

<style type="text/css"><!--

Page 22: Web design si programare web

#idp1 { font-size: 16px; }idp1, idp2 sunt denumiri date de noi (identificatori), la care vom face referire in corpul documentului

#idp2 { font-size: 125%; }

--></style>

</head>

<body>

<p id="idp1">text 1</p>

<p id="idp2">text 2</p>

</body>

</html>

Grosimea caracterului:

Poate lua mai multe valori:

normal , bold – font normal implicit sau ingrosat..

bolder – mai ingrosat

100 to 900 – O scara de nuante, din 100 in 100.

- Sintaxa:

selector { font-weight: value; }

Exemplu:

<html>

<head>

<title>font-weight</title>

<style type="text/css"><!--

#idp1 { font-weight: bold; }

#idp2 { font-weight: 400; }

--></style>

</head>

<body>

<p id="idp1">Un text</p>

Page 23: Web design si programare web

<p id="idp2">Alt text</p>

</body>

</html>

Litere mari sau litere mici:

font-variant

Aceasta specifica daca textul va fi afisat cu litere mari sau mici.

normal - implicit

small-caps – toate literele mici vor fi convertite la litere mari.

- Sintaxa:

selector { font-variant: value; }

Exemplu:

<html>

<head>

<title></title>

<style type="text/css"><!--

#idp1 { font-variant: small-caps; }

--></style>

</head>

<body>

<p id="idp1">text</p>

</body>

</html>

Stilul fontului:

font-style

normal - Normal - implicit

Page 24: Web design si programare web

italic - Italic

oblique - Oblic

- Sintaxa:

selector { font-style: value; }

Exemplu:

<html>

<head>

<title></title>

<style type="text/css"><!--

#idp1 { font-style: italic; }

--></style>

</head>

<body>

<p id="idp1">text</p>

</body>

</html>

Multiple valori pentru font.

Pot fi stabillite mai multe din proprietatile de mai sus, in o singura definitie (font-style, font-variant, font-weight, font-size, font-family)

- Sintaxa:

selector { font: font-style_val font-variant_val

font-weight_val font-size_val font-family_val; }

Exemplu:

<html>

<head>

<title></title>

Page 25: Web design si programare web

<style type="text/css"><!--

#idp1 { font: italic small-caps bold 12px Georgia, serif; }

--></style>

</head>

<body>

<p id="idp1">text</p>

</body>

</html>

Crearea unui meniu vertical

<style type="text/css">

#verticalmenu {

font-family: Verdana, Arial, sans-serif;

font-size: 100%;

width: 140px;

padding: 0px;

margin: 0px;

}

#verticalmenu h1 {

background-color:#FF9900;

font-size: 80%;

padding: 2px 0 5px 2px;

border: 1px solid #000000;

color: #333333;

margin: 0px;

width:159px;

}

#verticalmenu ul {

margin: 0px;

padding: 0px;

border: none;

Page 26: Web design si programare web

}

#verticalmenu ul li {

margin: 0px;

padding: 0px;

}

#verticalmenu ul li a {

font-size: 70%;

border-bottom: 1px dashed #C39C4E;

padding: 4px 0px 2px 3px;

color: #666666;

width:140px;

}

<style>

Codul care trebuie inclus in documentul HTML:

<div id="verticalmenu">

<h1>Navigation</h1>

<ul>

<li><a href="#" tabindex="1">Acasa</a></li>

<li><a href="#" tabindex="2">Contact</a></li>

<li><a href="#" tabindex="3">Preturi</a></li>

<li><a href="#" tabindex="4">Portofoliu</a></li>

<li><a href="#" tabindex="5">Carti gratuite</a></li>

<li><a href="#" tabindex="6">Link-uri utile</a></li>

</ul>

</div>

Exemplu pentru link-uri {a}

a:link {

color:#0000ff;

font-weight:normal;

font-size:12px;

Page 27: Web design si programare web

font-family: Arial;

}

a:visited {

color:#008080;

font-weight:normal;

font-size: 12px;

font-family: Arial;

}

a:hover {

color:#b54090;

font-weight:normal;

font-size: 12px;

font-family: Arial;

}

Observati cum se modifica culoarea link-ului in momentul in care deplasam mouse-ul deasupra lui.

Link-ul are o culoare, a.link, la deplasare mouse deasupra lui alta culoare, a.hover, iar daca link-ul a fost vizitat macar o data, alta culoare, a.visited.

Background

Background-ul poate fi definit pentru intreaga pagina sau pentru text.

Culoare de fond

background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

- definim un stil pentru intreg BODY si un altul pentru eticheta p

<html><head><title></title>

Page 28: Web design si programare web

<style type="text/css"><!--body {background-color: #FFFF00;}p {background-color: #FF0000;}--></style></head>

<body>Text normal<p>Text cu background rosu</p></body></html>

Imagine de backgroundImaginile pot fi folosite ca fundal in spatele intregii pagini sau a textului.

background-image asociaza o imagine ca fundal unui obiect.

- definim un stil pentru eticheta p

<html><head><title></title><style type="text/css"><!--p {background-image: url(calea catre fisierul care contine poza);}--></style></head><body>Text normal<p>Text cu imagine de fond</p></body></html>

Repetarea imaginii

Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:repeat-x imaginea se repeta pe orizontalarepeat-y imaginea se repeta pe verticalano-repeat imaginea nu se repeta

- imaginea nu se repeta

<html><head><title></title>

Page 29: Web design si programare web

<style type="text/css"><!--p {background-image: url(calea catre fisier);background-repeat: no-repeat;}--></style></head><body>Text normal<p>Text cu imagine </p></body></html>

Harti de imagini Ce este o harta de imagini?

Este o imagine, care poate deschide mai multe fisiere, in functie de zona pe care dam click.

Sa presupunem ca avem doua link-uri:

| <A HREF="produse.html">Produse</A> | <A HREF="Catalog.html">Catalog</A> |

Imaginea va fi aliniata la centru, ( p align….), fisierul care contine imaginea este poza1, stabilim inaltimea imaginii la 240 pixeli si latimea 320 pixeli, adica dimensiunile pozei initiale, margini=0 (border…), numele sub care va fi folosita harta: menuline.

<P ALIGN="center"><IMG SRC="poza.gif" WIDTH="320" HEIGHT="240" BORDER="0" USEMAP="#menuline"></P>

Atentie: numele hartii este case-sensitive, adica MENU nu este totuna cu menu.

Putem privi o poza astfel: ca pe un dreptunghi, cu coordonatele coltului din stanga sus x1,y1 si coordinate colt diametral opus x2,y2.

Putem imparti aceasta suprafata a pozei in patru dreptunghiuri:

Astfel, coordonatele dreptunghiului din stanga sus vor fi: 0,0 si 160,120.

La fel calculam pentru celelalte trei dreptunghiuri.

Page 30: Web design si programare web

<BODY><MAP NAME="menuline"><AREA SHAPE="rect" COORDS="0,0,160,120" HREF="unu.html"><AREA SHAPE="rect" COORDS="160,0,320,120" HREF="doi.html"><AREA SHAPE="rect" COORDS="0,120,160,240" HREF="trei.html"><AREA SHAPE="rect" COORDS="160,120,320,240" HREF="patru.html"></MAP>

Rect- specifica o suprafata rectangulara – dreptunghiulara

COORDS=”X1,Y1,X2,Y2”- coordonatele colturilor dreptunghiului, stanga sus si dreapta jos.

HREF=numele fisierului care se va deschide cand utilizatorul va da click aici.

Putem folosi si alte forme in loc de dreptunghi:

CIRCLE- cerc, se dau x,y- coordonate centru cerc si raza

POLY- polygon, se dau x1,y1…… xn,yn- coordonatele colturilor poligonului

<MAP NAME="harta"><AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.html"><AREA SHAPE="circle" COORDS="67,97,34" HREF="doi.html"><AREA SHAPE="rect" COORDS="129,28,175,108" HREF="trei.html"><AREA SHAPE="rect" COORDS="0,0,200,150" HREF="patru.html"></MAP>

Primele notiuni de Java Script

In cazul in care sunteti un programator cu ceva experienta in C sau C++, Java Script o sa vi se para destul de familiar. Exista oricum unele diferente, mai ales ca Java Script nu este totuna cu Java. Fiecare element inclus in corpul unui document HTML, trebuie cuprins intre tag-urile < SCRIPT > si < /SCRIPT > . Puteti proceda astfel: < SCRIPT LANGUAGE="JavaScript" > . Specificarea unui mod sau a altuia este optionala. Unii programatori le folosesc pe amandoua, pentru mai multa siguranta. De asemenea, deoarece unele browsere nu suporta codul de Java Script, este bine sa-l ascundeti:

Page 31: Web design si programare web

< !--Cod Java Script...-- >

Variabile

Ca orice limbaj de programare, JS foloseste variabile. O variabila este o locatie ce are un nume si contine o valoare. Primul caracter al numelui unei variabile trebuie sa fie obligatoriu o litera sau caracterul "_", iar celelalte caractere pot fi litere, cifre si caracterul "_". Programatorii experimentati folosesc nume de variabile sugestive. Daca programul dvs. foloseste pentru calculul primei rate de platit pentru un obiect, e mai bine sa denumiti variabila Prima_Rata, decat cu o simpla litera. In acest fel, va va fi mai usor daca veti modifica programul peste cativa ani. Trebuie sa retineti ca JS face diferenta intre litere mici si litere mari. Variabila "suma" nu este totuna cu variabila "SUMA". Pentru a putea folosi o variabila, trebuie sa o declarati intai. Pentru a declara o variabila, trebuie sa folositi cuvantul-cheie "var":var SumaOptional, o puteti initializa: var Suma=.89. Ati initializat variabila Suma, inca de la declarare, cu valoarea reala 0.89. Puteti declara mai multe variabile, separate prin virgula, folosind o singura data cuvantul-cheie var:var prima_rata=.6, total=4000, luna In acest exemplu ati declarat doua variabile initializate (una cu o valoare reala-0.6 si cealalta cu valoare intreaga-4000), si una neinitializata.

Pentru a declara o variabila tip sir de caractere, puteti folosi urmatoarea instructiune:var sir="la munte". Intre 2 variabile de tip sir de caractere, se poate folosi operatorul de concatenare "+". Exemplu: y="la munte"+" la mare". Variabila y va retine sirul: " la munte la mare". Puteti concatena o variabila de tip sir de caractere, cu una de tip numeric: z="temperatura este :"+34+" grade celsius", si va rezula sirul "temperatura este 34 grade celsius".. In acest caz, se va face automat convertirea intregului "34" la un sir de caractere.Numerele reale pot fi introduse in format zecimal, ca mai sus, sau in format exponential(stiintific). Exemplu: 123E1. Acesta este numarul 1230. Se inmulteste valoarea din stanga lui "E" cu 10 ridicat la puterea reprezentand valoarea din dreapta. 0.1e-1 insemand 0.1 inmultit cu 10 la puterea -1, adica 0.01. Dupa cum se observa, nu conteaza daca folosim litera "E" sau litera "e".Numerele intregi pot fi scrise si in baza 16.

Sirurile de caractere pot fi incluse intre " " sau ' '. In cazul in care un sir de caractere contine un alt

Page 32: Web design si programare web

sir de caractere, ele trebuie incluse intre semne diferite. De exemplu: 'acesta e un sir "contine alt sir" se continua primul sir'. Pentru valori logice (care pot lua doar doua valori- adevarat sau fals), se folosesc cuvintele-cheie: true sau false.

Exemplu: gasit=true.

Exista o constanta predefinita: NULL (care inseamna NIMIC). Puteti initializa o variabila cu aceasta valoare: var m=null. Care este diferenta intre o variabila neinitializata si una initializata cu valoarea "null"? Sa luam urmatorul exemplu: var m,n=null. Variabila m nu este initializata (este nedefinita), iar variabila n este initializata cu valoarea "null". Daca veti incerca sa afisati prima variabila, nu veti obtine nimic pe ecran, iar daca veti afisa cea de a doua valoare, se va afisa "null".

Exista cateva caractere speciale care pot fi folosite in sirurile de caractere. Pentru programatorii in C, acestea sunt familiare: \b- backspace, \f- formfeed, \n- new line, \t- tab, \r- carriage return. Nu va voi spune ce inseamna fiecare din ele, pentru ca sincer sa fiu, nu stiu de ce au fost incluse in limbaj. Nu au absolut nici un efect. Exemplu:document.write("Ce mai \t\n faci") are exact acelasi efect cu document.write("Ce mai faci"). Cu alte cuvinte, caracterele speciale sunt ignorate. Poate au fost incluse pentru interactiunea intre JS si programele C. Daca vreti sa includeti caracterul"\" (backslash) intr-un sir de caractere, trebuie sa il precedati de alt caracter "\". Exemplu: cale="c:\\desktop\\myfolder".

Operatorii aritmetici

Sunt cei cunoscuti: +,-,* si /. Pentru a afla restul impartirii unui numar intreg la alt numar intreg, puteti folosi operatorul modul %:14 % 5 returneaza valoarea intreaga 4 (restul impartirii lui 14 la 5).

Operatorii de incrementare si decrementare

Acestia realizeaza cresterea, respectiv scaderea valorii unei varible cu 1. Sunt referiti prin " ++ ", respectiv " -- ". Sunt doua moduri de a le folosi: prin plasarea inaintea numelui variabilei, si dupa. Iata cum functioneaza in fiecare caz in parte: Daca x=3, dupa instructiunea y=++x, valoarea lui x va creste cu 1 (si va fi 4), dupa care se va atribui variabilei y, care va fi tot 4. Aceasta este forma prefixata. In forma postfixata, dupa instructiunea y=x++, valoarea lui x se va atribui lui y (deci y va fi 3), dupa care

Page 33: Web design si programare web

va creste cu 1, deci x va fi 4. Analog stau lucrurile pentru operatorii de decrementare (y=--x si y=++x).

Operatorul de asignare

Acesta este cunoscutul operator "=", care asigneaza valoarea expresiei din partea sa dreapta, variabilei din partea stanga. Exista inca o forma, numita asignare prescurtata: x < op >=y, unde op este oricare din operatorii aritmetici. Aceasta este echivalenta cu : x = x < op >. Exemplu: x=x+10 poate fi scris, cu acelasi efect, x+=10. Sau, pentru a realiza impartirea lui y la m+n, putem scrie: y/=(m+n).

Operatori binari

Operatorii pe biti au sens numai pentru variabile intregi ale operanzilor. Se numesc pe biti pentru ca trateaza fiecare operand ca o succesiune de biti (adica 0 sau 1). AND (&). Rezultatul lui a AND b este 1 daca si numai daca ambii operanzi sunt 1. In oricare alt caz, rezultatul este 0.OR (|). Rezultatul este 0 daca si numai daca ambii operanzi sunt 0, si 1 in oricare alt caz. SAU exclusiv OR (^). Rezultatul este 1 numai daca cei 2 operanzi sunt diferiti (adica unul 0 si celalalt 1). Exemple: ( Java Script retine valorile intregi pe 32 de biti, dar pentru mai multa claritate, vom lucra pe 8 biti). Daca m=75 si n=25, adica 0100101100011001rezultatul operatiei m AND n va fi 9 , adica:00001001 Exista inca 2 operatori pe biti, operatorii de shiftare. Acestia sunt 2: shift left ( cu notatia <<) si shift right ( cu notatia >>), cu urmatoarele semnificatii:a << b : deplaseaza bitii lui a cu b pozitii la stangaa >> b : deplaseaza bitii lui a cu b pozitii la dreapta Exemple: 00110100 << 1 are ca rezultat: 0110100010110100 >> 2 are ca rezultat: 11001101

Operatori logici

Au ca rezultat una din doua valori posibile : true sau false. Acestia sunt:SI logic (AND) &&- are ca rezultat TRUE daca ambii operatorii sunt TRUESAU logic (OR) ||- are ca rezultat FALSE daca ambii operatorii sunt FALSENEGATIE LOGICA (NOT)- are ca rezultat TRUE, daca operatorul a fost FALSE, si invers in caz contrar.

Page 34: Web design si programare web

Java Script "stie " daca va referiti la operatori pe biti sau la operatori logici. Astfel, daca x=true, instructiunea document.write(x) va avea ca efect afisarea valorii TRUE, iar daca x=true, dupa instructiunea y=x+10, variabila y va retine valoarea 11.

Operatorii relationali (sau de comparatie)

Sunt cei uzuali: "==" egalitate, "!=" pentru diferit, >, >= , >, si >=. Ei returnezaTRUE daca rezultatul comparatiei este adevarat si FALSE in caz contrar. (exemplu: 7<2 returneaza FALSE). Pentru compararea sirurilor de caractere, se folosesc codurile ASCII. In memoria calculatorului, fiecare caracter (litere mari si mici, cifre, semne de punctuatie, caractere speciale, etc.) este are asociat un numar de ordine intreg cuprins intre 0 si 255, numit cod ASCII. Cand se compara doua caractere, se compara de fapt aceste numere de ordine. Literele mari sunt numerotate de la 65 la 90 (A-Z), iar literele mici de la 97 la 122. De aceea, putem spune ca : Z < a.

Expresii decizionale

O expresie conditionala sau decizionala se foloseste atunci cand vrem sa selectam o varianta din doua sau mai multe posibile. In cel mai larg sens, iata un exemplu: DACA ploua , vei lua umbrela, ALTFEL nu. In acest exemplu, "ploua" este conditia care trebuie indeplinita. Daca este indeplinita (este adevarata-TRUE), atunci se va intampla ca "iei umbrela" ( o vom numi instructiunea 1), ALTFEl (daca este falsa -FALSE), nu (o vom numi instructiunea 2). Forma generala a acestei instructiuni este : If (conditie){instructiune1else {instructiune2}

Se va evalua valoarea conditiei. Daca este adevarata, se va executa instructiunea1 sau grupul de instructiuni, iar daca este falsa, se va executa instructiunea2. Exista si forma cu a doua ramura vida:if (conditie){instructiune

Page 35: Web design si programare web

}

Daca valoarea conditiei este evaluata la valoarea de adevar TRUE, se va executa instructiunea1, iar daca este falsa, se va trece direct la urmatoarea instructiune din program. Exista inca o forma, asa numita instructiune conditionala. In JS, aceasta se scrie astfel: (condition) ? val1 : val2- daca valoarea conditiei din paranteza este adevarata, atunci se va evalua la valoarea val1, altfel se va evalua la val2. Exemplu: m=(a>b)?a:b - se executa membrul drept al instructiunii de atribuire. Conditia este : a>b. Daca este adevarata, atunci rezultatul evaluarii va fi a, iar daca este falsa va fi b. Unul din aceste rezultate se va atribui variabilei " m " din membrul stang.

Ne punem intrebarea fireasca: care este ordinea de evaluare (de executie) intr-o expresie in care nu apar paranteze? Cu alte cuvinte, care este precedenta operatorilor? nivelul 1: NOT logic, ++, -- (incrementare si decrementare) nivelul 2: *, /, %(modulul) nivelul 3: +,- nivelul 4: operatorii relationali nivelul 4: <<, >> (operatorii de shiftare) nivelul 5: ==, != (operatorii de egalitate si inegalitate) nivelul 6: AND (&) - SI pe biti nivelul 7: OR (^) - SAU exclusiv nivelul 8: OR (|) - SAU pe biti nivelul 9: AND ( &&) - AND logic nivelul 10: OR (||) - SAU logic nivelul 12: ? - operatorul conditional. In cazul in care doriti sa schimbati ordinea, puteti folosi parantezele. Exemplu: (a*(b+c))/9. Aici, se va executa intai expresia din paranteza, adica adunarea, apoi inmultirea si in final impartirea (/).

Tipul de data logic

Daca numerele intregi, de exemplu, pot avea o multime de valori, tipul de data logic nu poate avea decat doua valori: adevarat sau fals (true sau false). Valorile de tip logic (sau boolean), sunt in general, rezultatul unei comparatii. De exemplu, daca scriem:

c = = 4testam daca valoarea variabilei c este egala cu numarul 4.Daca este asa, atunci rezultatul comparatiei este TRUE, iar daca nu, este FALSE.

Cel mai des, aceste valori logice sunt rezultatul unei expresii de tip IF.

Page 36: Web design si programare web

De exemplu:

if (a == 3) b = b + 1;else a = a + 2;Aceasta secventa verifica daca a este egal cu numarul intreg 3. Daca da, atunci valoarea lui b va creste cu 1, in caz contrar, valoarea lui a va creste cu 2.

De fapt, ca si in C++, Java Script converteste valoarea lui FALSE la numarul intreg 0, iar valoarea lui TRUE la intregul 1.

Programatorii in C++ si C trebuie sa retina, ca, fata de aceste limbaje, Java Script are propriul tip de data logic, si nu mai este nevoie sa utilizeze numere intregi pentru a simula tipul de data logic.

Cicluri repetitive

In cazul in care trebuie sa indicam ca dorim ca o instructiune sau grup de instructiuni sa se execute de mai multe ori, avem posibilitatea sa folosim ciclurile repetitive. Daca sunteti familiarizat cu unul din limbajele de programare (C, Pascal, Basic, etc.) lucrurile va sunt cunoscute. Sa presupunem ca vrem sa afisam pe ecran secventa de numere intregi consecutive: 567. Putem proceda astfel:var a=5document.write(a)a=6document.write(a)a=7document.write(a) Dar ce facem daca dorim sa afisam o succesiune de 500 de numere? Apelam la ciclurile repetitive care, dupa cum spuneam, permit executarea unei instructiuni sau a unui grup, de mai multe ori.

1. Ciclul CAT TIMP (WHILE)

Acesta are forma generala: CAT TIMP (CONDITIE){ INSTRUCTIUNI } Modul de functionare este urmatorul: se evalueaza conditia; daca este adevarata, se executa instructiunile; se evalueaza din nou conditia, si daca este adevarata se executa instructiunile. Ciclul se termina cand conditia devine falsa. De aici decurg imediat imediat 2 consecinte:- daca de la inceput CONDITIA este falsa, ciclul nu se executa niciodata;- in setul de INSTRUCTIUNI, trebuie sa existe macar o instructiune care sa modifice valoarea de adevar a CONDITIEI; in caz contrar, intram in ceea ce se numeste ciclu infinit;

Page 37: Web design si programare web

Sa vedem exemplul de mai sus rescris:var a=5while (a<=7){document.write(a++)} Initial, valoarea variabilei a este 5. Se intra in ciclu, deoarece 5<=7. Se executa instructiunea: se afiseaza valoarea lui a, si apoi se incrementeaza a cu 1. Devine 6. Ramanem in ciclu, deoarece conditia este adevarat: 6<=7. Se executa instructiunea: se afiseaza 6, creste a cu 1, devenind 7. Ramanem in ciclu (7<=7), se afiseaza 7, creste a cu 1, devine 8 si se iese din ciclu deoarece conditia devine falsa.(8 nu este <=7).Toate valorile indicate se vor afisa pe un singur rand, deoarece nu exista nici o instructiune care sa indice trecerea la randul urmator. Putem folosi pentru aceasta, tag-ul HTML < br >. Iata cum arata secventa de mai sus rescrisa:var a=5while (a<=7){document.write(a++ +"<br>")}Observati faptul ca am inclus tag-ul intre caracterele " ".

2. Instructiunea PENTRU (FOR)

In cazul in care cunoastem exact numarul de executii ale instructiunilor, putem folosi ciclul PENTRU.Acesta are forma generala:for (initializare ; conditie ; actualizare){instructiuni}Iata si un exemplu:for (var b=5;b<=7;b++) {document.write(b){ Initializarea este b=5. Variabila b se mai numeste contor, deoarece are rolul de a "contoriza" numarul de executii ale instructiunii/instructiunilor. (de a le numara). Conditia pentru continuarea executiei este ca b sa fie mai mic sau egal cu 7. Actualizarea este b++, adica increnmentarea valorii variabile b cu 1. Aceasta secventa are efect identic cu cea de mai sus, exceptand trecerea la rand nou. Facem urmatoarele observatii:- daca valoarea initiala a contorului ar fi fost, sa zicem, 7, iar conditia ar fi fost b<=5, ciclul nu s-ar fi executat niciodata.- nu putem modifica conditia in timpul executiei ciclului - valoarea 5 de mai sus se numeste valoare initiala, iar valoarea 7 se numeste valoare finala. for (var b=5;b<=7;b++) {document.write(b)b=9{ Ce se va intampla in acest caz? b va primi valoarea initiala 5, se va afisa aceasta valoare, dupa care va primi valoarea 9. Nefiind mai mica sau egala cu 7, va creste cu 1, deci va deveni 10. Se va repeta instructiunea, si vom intra intr-un ciclu infinit, deoarece niciodata b nu are cum sa devina egal cu

Page 38: Web design si programare web

7.Pentru a iesi "fortat" (adica mai devreme ) dintr-un ciclu repetitiv, avem la dispozitie alte 2 instructiuni: BREAK si CONTINUE>

3. Instructiunile BREAK si CONTINUE

Facem observatia: aceste 2 instructiuni pot fi folosite numai in interiorul ciclurilor WHILE si FOR. Este evident, dupa cum sugereaza si numele, ca instructiunea BREAK foloseste la intreruperea executiei ciclului si iesirea fortata, iar instructiunea CONTINUE foloseste la continuarea executiei. Iata 2 exemple:var a=5 while (true) { document.write(a--) if (a=2) break } Am declarat si initializat variabila a cu valoarea 5, se intra in corpul ciclului WHILE, se afiseaza valoarea 5 si se decrementeaza a cu 1, dupa care urmeaza un test: daca a a devenit egal cu 2, se iese din ciclul WHILE.Instructiunea CONTINUE permite saltul la inceputul ciclului repetitiv. Exemplu:For (var x=3;x<=7;x++) { if (x==5) continue document.write(x) } Ce se va afisa? Valorile 3 si 4 se vor afisa pe ecran. Cand contorul va primi valoarea 5, nu se va mai trece la instructiunea de afisare, ci se va executa salt la inceputul instructiunii, dupa care, se vor afisa valorile 6 si 7.

1. Script care foloseste instructiunea decizionala IF

<script type="text/javascript">

//incepe script-ul<!--

//ascund script-ul de browserele care nu il interpreteaza // daca ora > 17, // va afisa Buna seara! var d = new Date()

// folosim functia predefinita Date, care va returna data si ora din sistem

// preiau data si ora in variabila d var ora = d.getHours() // preiau din variabila d numai ora curenta, in variabila ora if (ora>17) {

// daca ora>17

//se va afisa mesajul Buna seara!

//functia document.write() are ca parametru tag-ul html <b> si textul care va fi afisat

//parametrul se include intre ghilimele “ “ document.write("<b>Buna seara!</b>") }//-->

Page 39: Web design si programare web

</script>

2. Script care foloseste IF ELSE

<script type="text/javascript"><!-- // daca ora > 20, // va scrie în fereastra Buna seara! // Alfel afiseaza "Este ora ..." var d = new Date() var ora = d.getHours() if (time>20) { document.write("<b>Buna seara!</b>") } else {

// functia document.write are 3 parametri

//<b>Este ora- text care apare bold

//se va afisa variabila ora prin concatenare folosind operatorul +

//se termina textul bolduit “</b>” document.write("<b>Este ora " +ora+ "</b>") }//--></script>

3. Instructiunea Switch- se foloseste atunci cand avem mai multe optiuni posibile, pentru a nu folosi un IF imbricat

IF conditie1 executa1

else

IF conditie2 executa2

else

executa3

<script type="text/javascript"><!--

Page 40: Web design si programare web

var d = new Date() var ziua = d.getDay()switch (ziua) {

//zilele se memoreaza ca numere intregi case 4: document.write("Astazi este joi"); break

//cu break se iese din instructiune

//daca am gasit egalitate nu mai are rost sa verificam in continuare case 5: document.write("Astazi este vineri"); break case 0: document.write("Astazi este duminica"); break default: document.write("nici macar nu e wekk-end");

//prin default specificam ce vrem sa se afiseze daca nu am gasit nici o egalitate }//--></script>

In cazul in care in loc de numere intregi lucram cu siruri de caractere, trebuie sa le includem intre ghilimele.

<script type="text/javascript"><!-- var nume = "Ion";switch (nume) { case "Ion": document.write("Tata"); break case "Elena": document.write("Mama"); break case "Andreea": document.write("Sotia"); break default: document.write("Nu il cunosc"); }//--></script>

Page 41: Web design si programare web

Instructiuni repetitive

Instructiunea FOR

<script type="text/javascript"><!--

//pentru (x valoare initiala; x valoare finala; x crescator)for (x=1; x<7; x++) { document.write("<br /> x este "+x); } //--></script>

Valoarea initiala a lui x este 1. Se intra in ciclu. Se afiseaza textul “x este” si valoarea actuala a lui x (+x), unde + este operatorul de concatenare.

Valoarea lui x creste cu 1 (x++). Devine 2, nu este egala cu valoarea finala (x<7), adica 6. Se executa din nou, se va afisa x este 2. Ciclul va continua pana cand x devine 6, dupa care valoarea lui x va creste cu 1, va deveni 7, iar conditia x<7 nu mai este adevarata si se iese din ciclu.

Instructiunea WHILE

<script type="text/javascript"><!--var x = 1; while (x<7) { document.write("<br /> x este "+x); x++; } //--></script>

Initial valoarea lui x este 1.

CAT TIMP x<7 (conditie adevarata)

se executa codul:

se afiseaza x este....

x creste cu 1: x++

Page 42: Web design si programare web

Observatia 1:

Instructiunea de ciclare WHILE poate sa nu se execute niciodata, daca de la inceput conditia este falsa.

Var x=2;

while (x>3)

executa....

Observatia 2:

In corpul instructiunii WHILE trebuie sa existe o instructiune care sa modifice conditia, in caz contrar intram in ciclu infinit.

<script type="text/javascript"><!--var x = 1; while (x<5) { document.write("<br /> x este "+x); } //--></script>

x este 1.

conditie adevarata: x<5

se executa instructiunea document.write

nu exista instructiune de modificare a valorii lui x

conditie adevarata x<5

se executa document.write....

Instructiunea DO-WHILE

DO

instructiuni

WHILE (conditie adevarata)

<script type="text/javascript">

Page 43: Web design si programare web

<!--var x = 9; do { document.write("<br />valoarea lui x este "+x); x++; } while (x<20) //--></script>

Observatia 1:

Corpul intructiunii DO se executa cel putin o data, indiferent de valoarea conditiei (testul WHILE... se face la sfarsit).

<script type="text/javascript"><!--var x = 8; do { document.write("<br /> x este "+x); x++; } while (x>16) //--></script>

Initial x este 8.

Se executa document.write.

X creste cu 1, devine 9.

Se face testul x>16.

Nu este adevarat, se iese din ciclu.

Observatia 2:

aceeasi ca mai sus, in corp trebuie sa existe macar o instructiune care sa modifice valoarea conditiei, altfel intram in ciclu infinit.

Page 44: Web design si programare web

<script type="text/javascript"><!--var x = 8; do { document.write("<br /> x este "+x); } while (x<20) //--></script>

Nu exista instructiune care sa modifice valoarea lui x, asa incat ramane mereu 8, adica mai mic de 20.

<script type="text/javascript"><!--var x = 8; do { document.write("<br /> x este "+x); x--; } while (x<20) //--></script>

Exista instructiune care modifica valoarea lui x, dar descrescator (x--). Prima valoare a lui x este 8, a doua valoare este 7, adica tot mai mica de 20.

Lucrul cu imagini in Java Script.

Definim o imagine img.jpg, cu width si height, dar o denumim “poza”, prin parametrul name=”poza”.

<img name="imagine" src="img1.jpg" width="155" height="155">

//definim un formular simplu<form>

//in cadrul acestui formular definim un buton

//input type=”button”

//value=”Schimba imaginea” este textul care va aparea pe buton

//evenimentul onClick spune ce sa se intample cand dam click pe buton.

//imaginea se va schimba in img1.jpg si va fi afisata in acelasi loc cu prima, cu aceeasi inaltime si

Page 45: Web design si programare web

latime

<input type="button" onClick="document.poza.src='img2.jpg'" value="Schimba imaginea"></form>

Crearea alertelor cu Java Script

Crearea ferestrelor alert se face astfel:

- window.alert("mesaj care va apare pe ecran")Urmatorul exemplu deschide o fereastra cu mesajul "va multumim pentru vizita".

<script type="text/javascript"><!-- window.alert("va multumim pentru vizita");//--> </script>

Crearea ferestrelor PROMPT

- window.prompt("mesaj", "text care va apare in fereastra")Urmatorul exemplu deschide o fereastra "Prompt".

<script type="text/javascript"><!-- window.prompt("Scrieti numele", "Nume");//--> </script>

Numele introdus de utilizator poate fi preluat intr-o variabila si folosit mai departe.

<script type="text/javascript"><!-- var nume = window.prompt("Scrieti numele", "Nume"); alert("Bine ai venit "+nume);//--> </script>

Scrieti urmatorul text in Notepad si salvati-l cu extensia .html:

<html>

<body>

<script type="text/javascript">

var nume = window.prompt("Scrieti numele", "Nume");

window.alert("Bine ai venit "+nume);

</script>

</body>

</html>

Page 46: Web design si programare web

Suntem anuntati ca Internet Explorer a dezactivat rularea script-urilor. Dam click la “Click here for options”, selectam “Allow blocked contents” si “Yes”.

Introducere in PHP

Inainte de orice introducere in PHP, aveti nevoie de un server PHP.

Pentru aceasta, downlodati unul gratuit, care lucreaza care include APACHE, PHP, MySQL sub Windows.

Se gaseste la adresa www.wampserver.com

Este bine sa il downlodati pe cel pe care l-am incercuit eu, pentru ca celalalt are inca bug-uri (ma refer la cel din dreapta).

Se salveaza pe hard, dupa care se executa (se instaleaza).

Daca in timpul instalarii primiti mesaj de genul: Do you want to keep blocked... , raspundeti cu Unblock, pentru deblocare.

La PHP mail parameters, lasati localhost la SMTP, dar la Email completati adresa dvs de email, ca sa verificati ca totul merge OK.

Dupa instalare, in coltul din dreapta jos al Desktopului, langa ceas, se gaseste o iconita cu wamp-server.

Intrati in C:/wamp, daca ati pastrat ca si folder implicit de instalare, calea pe care programul de instalare a propus-o. Aici, aveti un folder numit “www”. In acest folder creati un subdirector, pe care eu l-am denumit “eu”. In acest subdirector vom salva toate fisierele php.

Intrati in Notepad si scrieti un document, ca cel de mai sus, respectand structura generala a unei pagini HTML.

Linia care apare ca noutate in acest fisier este:

<?php print(“un mesaj”); ?>

Page 47: Web design si programare web

Deci instructiunile PHP sunt cuprinse intre <?php si ?>, iar functia print() realizeaza afisarea unui mesaj pe ecran.

Salvati fisierul cu optiunea “All files” si cu numele test.php, in folderul creat mai sus, adica in “eu”.

Accesati din nou iconita wamp, si dati click pe localhost. In partea de sus.

Dati click pe folderul “eu” si se deschide fereastra de mai sus, iar folderul contine fisierul test.php.

Accesati fisierul test.php si se deschide o fereastra, in care apare mesajul pe care noi l-am scris in fisier.

Introducere in PHP

Inainte de orice introducere in PHP, aveti nevoie de un server PHP.

Pentru aceasta, downlodati unul gratuit, care lucreaza care include APACHE, PHP, MySQL sub Windows.

Se gaseste la adresa www.wampserver.com

Este bine sa il downlodati pe cel pe care l-am incercuit eu, pentru ca celalalt are inca bug-uri (ma refer la cel din dreapta).

Se salveaza pe hard, dupa care se executa (se instaleaza).

Daca in timpul instalarii primiti mesaj de genul: Do you want to keep blocked... , raspundeti cu Unblock, pentru deblocare.

La PHP mail parameters, lasati localhost la SMTP, dar la Email completati adresa dvs de email, ca sa verificati ca totul merge OK.

Intrati in C:/wamp, daca ati pastrat ca si folder implicit de instalare, calea pe care programul de instalare a propus-o. Aici, aveti un folder numit “www”. In acest folder creati un subdirector, pe care eu l-am denumit “eu”. In acest subdirector vom salva toate fisierele php.

Intrati in Notepad si scrieti un document, ca cel de mai sus, respectand structura generala a unei pagini

Page 48: Web design si programare web

HTML.

Linia care apare ca noutate in acest fisier este:

<?php print(“un mesaj”); ?>

Deci instructiunile PHP sunt cuprinse intre <?php si ?>, iar functia print() realizeaza afisarea unui mesaj pe ecran.

Salvati fisierul cu optiunea “All files” si cu numele test.php, in folderul creat mai sus, adica in “eu”.

PHP

1. In loc de instructiunea PRINT, pentru a afisa un text pe ecran, poate fi folosita si instructiunea ECHO.

Sintaxa generala este:

echo (“ ceva”);

echo(text oarecare);

evident, textul va fi cuprins intre ghilimele ””:

Includerea tag-urilor HTML

echo( „<H2> Acesta e un header de nivel 2</H2>”);

2. Includerea comentariilor:

//comentariul

<?php

// exemplu mesaj

// cu comentariu

Echo(„Acesta este un script .”);

?>

3. Comentarii pe mai multe linii:

/*

Acesta comentariu se intinde pe mai multe linii.

Page 49: Web design si programare web

Poate contine oricate linii

*/

4. Denumiri corecte pentru variabile:

1. Începeţi obligatoriu cu simbolul dolar (Ş).

2. După simbolul dolar, scrieţi o literă sau o liniuţă de subliniere ( _ ). Litera poate fi scrisă cu majuscule sau minuscule. Atentie: variabila $B nu este totuna cu variabila $b.

Pentru a da o valoare unei variabile, scriem ceea ce se numeşte o instrucţiune de atribuire. Iată un exemplu :

$total = 72.8; atribuie variabile total valoarea 72.8

$câştigător = $punctajul_maxim; atribuie variabilei $castigator valoarea variabilei $punctajul_maxim

Numerele sunt de doua tipuri:

- numere intregi, adica fara zecimale

- numere reale, adica cu zecimale

$x = 1; atribuie variabilei $x tipul întreg.

Dacă instrucţiunea de atribuire $x = 1.5, va fi executată ulterior, variabila $x devine de tip real

<script>

<?php

// PHP

$numar_intreg=2;

$numar_real=3.2e3;

$sir_de caractere=”Acesta este un şir”;

echo(„<H2>PHP</H2”);

echo(„<BR>valoare întreagă:”);

echo($numar_intreg);

echo(„<BR>valoare reala:”);

echo($numar_real);

echo(„<BR>valoare şir:”);

echo($sir_de_caractere);

?>

</script>

5. Operatorii aritmetici: sunt cei uzuali, +, - , * , /

Page 50: Web design si programare web

$profit = $vânzări - $cheltuieli;

$arie = $înălţime * $lăţime;

$rata_impozit = $impozit / 12;

6. Fornulare de trimitere a datelor:

<FORM METHOD="metoda" ACTION="url">

Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificaţi întotdeauna valoarea POST.

<INPUT TYPE="TEXT" NAME="text">

<INPUT TYPE="SUBMIT" VALUE="text">

Includerea formularului intr-o pagina HTML:

<HTML>

<HEAD>

<TITLE>Numele şi e-mail</TITLE>

</HEAD>

<BODY>

<FORM METHOD=”POST” ACTION=”phpinfo.php”>

<H3> Numele e-mail</H3>

<BR>Nume:

<BR><INPUT TYPE=”TEXT” NAME=”numele”>

<BR>Adresa de e-mail:

<BR><INPUT TYPE=”TEXT” NAME=”adresa”>

<BR>

<BR><INPUT TYPE=”SUBMIT” VALUE=”Trimite”>

</FORM>

</BODY>

</HTML>

Page 51: Web design si programare web

Când utilizatorul execută clic pe butonul de expediere, datele introduse de utilizator sunt trimise scriptului phpinfo.php.

7. Alte setari pentru casete de tip text:

<INPUT TYPE=”TEXT” NAME=”text” SIZE=”32” value=”text”>

Specifica un text pe o singura linie, cu lungimea 32 de caractere.

<TEXTAREA NAME=”text” ROWS=”10” COLS=”18””>

Specifica o caseta de tip text, pe mai multe linii si coloane, de exemplu 10 linii si 18 coloane.

8. Plasaţi următorul script PHP într-un fişier denumit ex1.php şi încărcaţi acest fişier în serverul wamp PHP.

<?php

// Fişierul ex1.php

phpinfo()

?>

Plasaţi următoarea pagină HTML într-un fişier denumit ex1.html şi încărcaţi acest fişier în serverul wamp PHP, plasându-l în acelaşi folder ca şi fişierul ex1.php:

<HTML>

<HEAD>

<TITLE>0 caseta </TITLE>

</HEAD>

<BODY>

<FORM METHOD=”POST”ACTION=”ex1.php”>

<H3>Header 3</H3>

<BR> Caseta cu text:

<BR><INPUT TYPE =”TEXT” NAME=”text”>

Page 52: Web design si programare web

Crearea unei baze de date MySQL

La început, o bază de date nu conţine tabelePentru a crea un tabel într-o bază de date, emiteţi comanda CREATE TABLE, care are următoarea formă:

CREATE TABLE tabel (coloana tip, coloana tip, …);

unde tabel este numele tabelului, coloana este numele unei coloane, tip este tipul datelor incluse în coloană, iar ... arată că se poate specifica un număr nedefinit de coloane şi tipuri. De exemplu, comanda următoare creează un tabel numit carte, care conţine coloanele ISBN (un identificator unic asociat unei cărţi), titlu şi preţ:

CREATE TABLE carte (carteid CHAR(10), titlu VARCHAR(255), pret decimal(5,2));

În general, SQL nu este sensibil la diferenţa între majuscule şi minuscule. Deci, dacă preferaţi, puteţi emite comanda următoare, care se comportă exact la fel ca şi precedenta:

create table carte (carteid char(10), titlu varchar(255), pret decimal(5,2));

În afara tipului de date, puteţi specifica numeroase atribute opţionale ale unei coloane:

Atribut Descriere

NOT NULL Fiecare rând trebuie să conţină o valoare a coloanei asociate; valorile nule nu sunt permise.

DEFAULT valoare Dacă nu este dată o valoare a coloanei asociate, se va presupune valoarea

Page 53: Web design si programare web

specificată.

AUTO- INCREMENT

MySQL va repartiza în mod automat un număr de serie ca valoare a coloanei asociate.

PRIMARY KEY Coloana asociată este cheia primară a tabelului care o conţine.

Iată o comandă CREATE TABLE ceva mai complicată, care foloseşte unele atribute opţionale:

CREATE TABLE carte (carteid CHAR(10) PRIMARY KEY,

titlu VARCHAR(255) NOT NULL,

pret DECIMAL(5,2) DEFAULT 50.00);

Ştergerea unui tabel

Ştergerea unui tabel este o operaţie simplă. Prin ştergerea unui tabel, sunt eliminate toate rândurile incluse în tabel. Pentru a şterge un tabel, emiteţi următoarea comandă:

DROP TABLE tabel;

unde tabel este numele tabelului care urmează a fi şters.

Modificarea unui tabel

După crearea unui tabel, îl puteţi modifica prin emiterea unei comenzi ALTER TABLE. O formă a comenzii vă permite să ştergeţi o coloană din tabel:

ALTER TABLE tabel DROP coloana;

unde tabel este numele tabelului care va fi modificat, iar coloana este numele coloanei care va fi ştearsă. De exemplu, pentru a şterge coloana preţ din tabelul carte, emiteţi comanda

ALTER TABLE carte DROP pret;

O altă formă a comenzii vă permite să adăugaţi o nouă coloană în tabel:

ALTER TABLE tabel ADD coloana tip [optiuni];

Page 54: Web design si programare web

unde tabel este numele tabelului care va fi modificat, coloana este numele coloanei care va fi adăugată, tip este tipul noii coloane, iar [opţiuni] constituie toate opţiunile dorite, precum PRIMARY KEY. De exemplu, pentru a adăuga din nou coloana preţ la tabelul carte, emiteţi comanda:

ALTER TABLE carte ADD pret DECIMAL(5,2) DEFAULT 50.00;

Alte operatii care se pot executa:

• INSERT, care permite inserţia rândurilor care conţin coloana specificată

• SELECT, care permite accesul la rândurile care conţin coloana specificată

Accesul la datele dintr-o bază de date: interogările SQL

În afară de Data Definition Language, SQL include Data Manipulation Language[6] (DML). DML vă permite să formaţi interogări, care obţin accesul la datele stocate într-o bază de date relaţională şi raportează aceste date. De asemenea, puteţi folosi DML pentru a insera, actualiza şi şterge rândurile dintr-un tabel. Celelalte secţiuni ale acestui modul vor trata despre DML, iar secţiunea de faţă va aborda cea mai elementară formă de interogare: comanda SELECT simplă.

Cea mai simplă interogare posibilă raportează toate coloanele din toate rândurile unui tabel. Interogarea are următoarea formă:

SELECT * FROM tabel;

unde tabel este numele tabelului la care se va obţine accesul. Formatul datelor de ieşire plasează fiecare rând al tabelului pe o linie separată şi prezintă coloanele într-o ordine arbitrară. Datele de ieşire includ numele coloanelor şi caractere simulate de desenare a liniilor, care separă coloanele.

Dacă doriţi să selectaţi numai anumite coloane sau să raportaţi coloanele într-o anumită ordine, puteţi folosi următoarea formă alternativă a comenzii SELECT:

SELECT coloana1, coloana2 FROM tabel;

unde tabel este numele tabelului, iar coloana1 şi coloana2 sunt coloanele la care se va obţine accesul şi al căror conţinut va fi raportat. Puteţi specifica una, două sau mai multe coloane; pur şi simplu separaţi numele fiecărei coloane de vecinii săi prin intermediul unei virgule. De exemplu, iată o interogare care inversează ordinea coloanelor în comparaţie cu interogarea anterioară:

Page 55: Web design si programare web

SELECT nume, angajatnr FROM angajat;

Deseori, este necesară numai raportarea acelor rânduri care satisfac un anumit criteriu. Clauza WHERE vă permite să specificaţi o condiţie; rândurile care nu satisfac condiţia nu sunt raportate. De exemplu, iată o interogare care raportează un singur rând:

SELECT angajatnr, nume FROM angajat WHERE angajatnr=1;

Forma condiţiilor folosite în sub-limbajul DML al limbajului SQL este similară cu aceea a condiţiilor PHP. Puteţi folosi oricare din următorii operatori relaţionali:

Operator Descriere

= Egalitate

<> Inegalitate

!= Inegalitate

< Mai mic decât

> Mai mare decât

<= Mai mic sau egal cu

=> Mai mare sau egal cu

Puteţi compara valoarea unei coloane cu aceea a unei alte coloane, respectiv valoarea unei coloane cu o valoare literală. Valorile literale şir SQL trebuie să fie incluse între ghilimele simple, nu între ghilimelele duble permise de PHP.

De asemenea, SQL include numeroşi operatori de comparaţie non-algebrici:

Operator Descriere

x BETWEEN y AND z Adevărat, dacă valoarea lui x este cuprinsă între valorile lui y şi z.

Page 56: Web design si programare web

x LIKE y Adevărat dacă valoarea lui x este echivalentă cu modelul y.

x NOT LIKE y Adevărat dacă valoarea lui x nu este echivalentă cu modelul y.

x IN (y1, y2) Adevărat dacă valoarea lui x este un membru al listei y1, y2. Lista poate conţine unul, doi sau mai mulţi membri.

x NOT IN (y1, y2) Adevărat dacă valoarea lui x nu este un membru al listei y1, y2. Lista poate conţine unul, doi sau mai mulţi membri.

x IS NULL Adevărat dacă x are valoarea NULL.

x IS NOT NULL Adevărat dacă x nu are valoarea NULL.

Ca şi PHP, SQL vă permite să formaţi expresii logice care combină expresiile relaţionale. Puteţi folosi oricare din următorii operatori logici:

Operator Descriere

AND Şl, adevărat dacă ambii operanzi sunt adevăraţi

OR SAU inclusiv, adevărat dacă un operand este adevărat

NOT NU, adevărat dacă operandul este fals

De exemplu, următoarea interogare raportează rândurile care au un număr de angajat mai mare decât unitatea sau al căror nume include sub-şirul 'George':

SELECT angajatnr, nume FROM angajat

WHERE angajatnr>1 OR nume LIKE ’%George%’;

MySQL include multe alte extensii ale limbajului SQL. De exemplu, MySQL acceptă următorii operatori ca echivalent:

Operator Echivalent

Page 57: Web design si programare web

AND &&

OR ||

NOT !

Modificarea datelor dintr-o bază de date

Sub-limbajul SQL Data Manipulation Language include comenzi care vă permit să inseraţi rânduri noi într-un tabel, să actualizaţi una sau mai multe coloane ale rândurilor existente în tabele, respectiv să ştergeri rânduri dintr-un tabel. Pentru a insera un nou rând într-un tabel, folosiţi comanda INSERT, care are următoarea formă:

INSERT INTO tabel VALUES (valoare1, valoare2);

unde tabel este numele tabelului la care se va adăuga rândul, valoare1 este valoarea pentru prima coloană din tabel, iar valoare2 este valoarea celei de-a doua coloane din tabel. Se pot da mai mult sau mai puţin de două valori; numărul valorilor date trebuie să fie egal cu acela al coloanelor din tabel. O coloană poate primi şi valoarea NULL, cu excepţia situaţiilor când definiţia coloanei conţine specificaţii contrare.

O formă mai populară a comenzii INSERT specifică numele coloanelor cărora le sunt atribuite valorile:

INSERT INTO tabel (coloana1, coloana2) VALUES (valoare1, valoare2);

În această formă, coloana denumită coloana1 primeşte valoarea valoare1, iar coloana denumită coloana2 primeşte valoarea valoare2. Ca în cazul primei forme a comenzii INSERT, pot fi specificate mai mult, respectiv mai puţin de două coloane şi valori. Numărul coloanelor specificate trebuie să fie egal cu numărul valorilor specificate. Coloanele care nu sunt denumite în comanda INSERT şi care nu au o valoare prestabilită (DEFAULT) primesc valoarea NULL, cu excepţia situaţiilor când valoarea respectivă nu este permisă; în acest caz, comanda INSERT eşuează.

De exemplu, se poate folosi o comandă similară cu următoarea pentru a insera un rând nou în tabelul angajat:

INSERT INTO angajat (angajatnr, nume) VALUES (4, ’Popescu’);

Toate coloanele, cu excepţia coloanelor angajator şi nume, vor primi valoarea NULL.

Pentru a modifica valoarea unui rând sau mai multor rânduri existente într-un tabel, emiteţi o

Page 58: Web design si programare web

comandă UPDATE, care are următoarea formă:

UPDATE tabel SET coloana1=coloana1, coloana2=coloana2

WHERE conditie;

unde tabel este numele tabelului ale cărui rânduri urmează să se modifice, coloana1 este numele primei coloane care urmează a fi modificată, valoare1 este valoarea care va fi repartizată în coloana1, coloana2 este numele celei de-a doua coloane care urmează a fi modificată, valoare2 este valoarea care va fi repartizată în coloana2, iar condiţie identifică rândul sau rândurile care urmează a fi actualizate. Poate fi actualizat un număr mai mare sau mai mic de coloane. Dacă urmează ca fiecare rând să fie actualizat, clauza WHERE poate fi omisă.

De exemplu, comanda următoare modifică numele asociat angajatului al cărui atribut angajator are valoarea 4 în Popescu:

UPDATE angajat SET nume=’Popescu’

WHERE angajatnr=4;

Următoarea comandă măreşte salariul fiecărui angajat cu 10 procente:

UPDATE angajat SET salariu=1.1*salariu;

Pentru a şterge un rând dintr-un tabel, emiteţi comanda DELETE, care are următoarea formă:

DELETE FROM tabel WHERE conditie;

Afaceri pe Internet: tehnici de promovare gratuita

www.cursuriploiesti.ro: cursuri web design, crearea si promovarea unui magazin online /

cursuri autocad 2D si 3D la cele mai mici preturi de pe piata, diplome avizate CNFPA, maxim 3

cursanti in grupa

1.Numele domeniului: este bine sa fie o combinatie de cuvinte cheie. Exemplu:

www.cursuriploiesti.ro

2.Titlul paginii, din tag-ul <title>: este bine sa fie o combinatie de cuvinte cheie.

Scrieti un titlu descifrabil alcatuit din 5 pana la 8 cuvinte. Eliminati cuvintele nefolositoare precum

Page 59: Web design si programare web

articolele "sau", "si", etc. Acest titlu apare pe motorul de cautare cand pagina dumneavoastra e gasita.

3.Cuvintele cheie: includeti cuvintele cheie in tag-urile “keywords” si “description”. Folositi

cat mai des cuvintele cheie in paginile site-ului. Includeti cuvintele cheie in adresele de email, tag-urile

“alt” din imagini.

4.Inscrieti situl pe cat mai multe motoare de cautare.

Alta Vista http://www.altavista.com

Deja News http://www.dejanews.com

Excite http://www.excite.com

Hot Bot http://www.hotbot.com

Infoseek http://www2.ifoseek.com

Lycos, Inc http://www.lycos.com

WebCrawler http://www.Webcrawler.com

Yahoo http://www.yahoo.com

5.Oferiti informatii gratuite care se gasesc greu altfel.

E una cand spui : "Folositi ghidul nostru gratuit cu privire la afacerile pe Internet pe care il gasiti

exclusiv pe site-ul nostru".

6.Publicati un E-mail Informativ

Deoarece e o realizare deosebita in timp, sa publici o scrisoare informativa

saptamanala, lunara sau trimestriala in care mentionati noutatile pe care le oferiti, reducerile de top,

promotiile.

7.Anuntati un Concurs

Oamenilor le place sa ia ceva gratuit. Daca dumneavoastra publicati un concurs valabil

pe site-ul dumneavoastra, veti genera mai mult trafic decat de obicei. Inscrieti concursul in cele mai

importante agregatoare de concursuri, ei au baze de date cu adrese si anunta noile concursuri prin

email informativ. Oamenii interesati sa castige intra pe site si afla de produsele/serviciile dvs.

Konkurs.ro

concursuri.biz

infopromotii.ro

cautpromotii.ro

Page 60: Web design si programare web
Page 61: Web design si programare web

8.Tehnica de Promovare prin Viral Marketing

Asa numitul viral marketing foloseste retelele de comunicare ale vizitatorilor site-ului dumneavoastra

sau ale clientilor pentru a transmite mai departe informatii despre site-ul dumneavoastra.

Exemplul clasic e serviciul de e-mail gratuit hotmail.com, care contine un "tagline"

despre serviciul lor la sfarsitul fiecarui mesaj trimis astfel prietenii le spun prietenilor,

care la randul lor spun prietenilor.

Lista top 10 “virale” o gasiti aici: http://marketingportal.manager.ro/articole/ultima-ora-72/cele-maibune-

campanii-online-top-10-2616.html

9.Scrieti un e-book gratuit, poate sa fie despre orice care are legatura cu situl dvs. Postati ebook-

ul pe site, pe cartiaz.ro, unde intra mii de oameni care doresc carti gratuite din diferite domenii.

Puteti scrie ebook-ul in Open Office (care e gratis) si sa-l exporati ca PDF, sau ca fisier HTML in

Notepad si sa-l transformati in ebook folosind Sbook Builder, care de asemenea este gratuit.

Iata un exemplu de un asemenea ebook:

Cosmetice bio : secretul Cleopatrei

Cleopatra este cunoscuta pentru frumusetea ei si pielea fara cusur. Secretele acestei frumuseti au fost cercetate de-a lungul timpului, iar cercetatorii au fost unanimi: cosmetice bio.

Ea a iubit mierea, datorita proprietatilor sale anti- bacteriene, otetul de mere, ghimbir , antimoniu , calamina , sarea de mare, apa de trandafiri, uleiul de masline, laptele, florile aromatice, strugurii verzi.

Toate acestea au reprezentat magia, frumusetea, farmecul,

carisma si magnetismul Cleopatrei.

www.biofarmacia.ro

Frumusetea este,cu siguranta,o stare de spirit.Frumusetea este,cu siguranta,o binecuvantare data de Dumnezeu.Cand am realizat asta,am incercat sa gasesc esenta unei clipe de perfectiune.Am incercat sa aduc pe masa laboratorului meu plin de formule chimice,puritatea florilor scaldate de lumina si ocean din Tahiti,a apei ce atinge perfectiunea in tratamentele dermaatologice,apa Evian,si a sursei naturale de vitamine pentru piele,morcovul.Pentru ca vreau un tratament instant care sa aduca pe chipul nostru frumusetea de dupa o noapte obraznica,frumusetea zambetului vinovat,frumusetea pe care o meritam. Si se poate realiza prin cosmetice bio.

CREMA DE FRUMUSETE CU ULEI DE MORCOV SI MONOI DE TAHITI este un

Page 62: Web design si programare web

preparat cu grad de puritate farmaceutic, elaborata prin adaptarea retetelor oficinale si innobilarea acestora cu ingrediente de cea mai buna calitate, atestata prin certificareaBIO si ECOCERT.Un element foarte important din compozitia cosmeticelor este apa. Asa cum spune Dr. Dennis Gross, dermatolog in New York City: „Produsele cosmetice pe baza de apa sint mai stabile, mai usoare si nu obtureaza porii, asemeni celor pe baza de uleiuri sau ceara”. Astfel,pentru CREMA CU ULEI DE ARGAN SI AVOCADO by farm Ioana Marinescu, am ales sa folosim exclusiv apa minerala EVIAN.Aceasta, pe masura ce patrunde prin diferitele straturi ale pamintului, aduna in compozitia sa minerale precum sulful, cromul, siliciul. Majoritatea studiilor clinice au demonstrat ca apa de izvor catifeleaza pielea si amelioreaza afectiunile dermatologice, de la eczeme la arsuri solare. Testele au aratat ca, aplicata topic, apa de izvor este mai hidratanta decit apa distilata, ca apa termala reduce inflamatiile pielii cu 46% (in comparatie cu produsele pe baza de apa distilata care au un procent de reusita de numai 16%) si ca seleniul si zincul din apele minerale asigura penetrarea vitaminelor C si E in membrana celulelor, crescind considerabil eficienta cremelor antioxidantealele care s-au pierdut in procesul de purificare. Intre alte cosmetice bio enumeram:

CREMA DE FRUMUSETE este o bomba de energie pentru persoane pretentioase.Ingredientele sale sunt sinergizate in conditii de maxima rigoare,iar sigla by farm Ioana Marinescu este garantia componentelor de puritate maxima.Uleiul de morcovi este un potent ulei refermizant. Prezenta beta-carotenului ajuta la eliminarea iritatiilor provocate de razele solare si protejeaza pielea impotriva cancerului. Cunoscutul ingredient care ajuta vederea,morcovul a intrat in topul ingrijirii pielii. Cele mai multe efectele miroaculoase s-au semnalat in cazul pielii lasate si cu riduri. In plus, s-a constatat ca morcovii redau pielii, vitalitatea si culoarea.Pielea reflecta in cele mai multe cazuri, starea de sanatate. Extractul de morcovii contine numeroase vitamine (A, B, C si E) si minerale (potasiu, fier, zinc, sodiu, clor si iod).Este un bun anti-inflamator si contribuie la reinnoirea si protejarea pielii. Astfel,uleiul de morcovi este folosit in dermato-cosmetologie in tratamentul dermatitelor, eczemelor, eruptiilor cutanate si a ridurilor,probleme cauzate de radicalii liberi. De asemenea, ajuta si la vindecarea ranilor sau a taieturilor.Uleiul de morcovi pastreaza pielea ferma, stralucitoare si tanara.

Un alt ulei pretios din compozitia CREMEI DE FRUMUSETE este Monoi de Tahiti.Acesta este un produs traditional polinezian de o calitate exceptionala, cu reale calitati cosmetice si medicale.Monoi este un ulei parfumat dulce si este un amestec tradi ional din Insuleleț Pacificului, de ulei de nucă de cocos i extract de floare Tahitensis Gardenia.Amestecul esteș cunoscut pentru calită ile sale vindecatoare si se obtine prin macerarea florii tiaré in ulei virginț de cocos.Rezultatul este un ulei dulce parfumat, cu note luxoase si extravagante. Acest ulei hrăne te si netezeste pielea, oferind in acelasi timp fermitate tesuturilor. Este un hidratantș eficient si un protector impotriva agresiunilor externe, in special a radiatiilor UV.Folosindu-l constant ,pielea devine catifelata si elastica,ferma si radianta.Indicatiile acestuin produs sunt :pielea obosita,pielea lipsita de elasticitate,pielea deteriorata, care are nevoie de un plus de frumusete de viata,de optimism.

Folosirea uleiului extras din Monoi de Tahiti reprezinta o revolutie in ceea ce priveste produsele dermatologice antiaging,deoarece Monoi de Tahiti inseamna o alternativa luxoasa in alegerea ingredientelor si ofera o experienta minunata in protocolul de ingrijire a fetei si decolteului.Prin exigenta si calitatea ingredientelor,cat si prin tehnica farmaceutica de prelucrare a acestora, oferim pacientilor nostrii o gama dermato-cosmetica adaptata nevoilor

Page 63: Web design si programare web

particulare ale fiecaruia,cat si tratamente viabile de rejuvenare.

10.Site-urile “cârlig” atrag diversi utilizatori deoarece ofera ceea ce ei doresc, de obicei

informatii.

Teoretic, toate site-uril ofera informatii, dar cele “cârlig” sunt destinate special sa “agate” utilizatorii.

Exemplu

Presupunem ca dorim sa vindem cursuri de web design. Faceti un site referitor la afacerile pe Internet,

in care oferiti informatii despre acest subiect, un alt site despre web design, in care oferiti informatii cu

privire la regulile de design, un alt site despre PHP in care oferiti un mini-curs de PHP si MySQL.Toate

aceste situri vor contine bannere catre situl nostru principal.

11.Inscrierea in directoare (romanesti si straine )– O tehnica mai veche, care aduce inca

rezultate scontate. Inscrierea in directoarele romanesti si straine se face manual, deoarece google

penalizeaza inscrierile automate.

Lista completa a directoarelor romanesti, in care inscrierea este gratuita, o gasiti pe adresa

www.dirpedia.ro.

Cylex-romania.ro

adresa.ro

cere.ro

best-top.ro

gofind.ro

listafirme.ro

roportal.ro

top66.ro

real-web.ro

bizoo.ro

12.Publicarea de anunturi- exista nenumarate situri care ofera posibilitatea de a publica

anunturi gratuite. Un lucru foarte important este ca unele dintre ele accepta inserarea url-ului catre situl

nostru.

Legaturi.ro

evrika.ro

anunt123.com

util21.ro

Page 64: Web design si programare web

anunturigratuite,ro

megaanunturi.ro

olx.ro

online.anuntul.ro

tocmairo

anunturi.ro

e-oferta.ro

13.Profil pe Facebook, linkedin, twitter, twoo, badoo. Creaza un profil pe unul sau mai multe

siteuri de socializare.

In acest moment, varful de lance al siteurilor de socializare este Facebook.com.

14.Publicarea de comunicate de presa – Daca aveti un produs/serviciu nou si demn de anuntat,

puteti folosi publicarea in siteuri de comunicate de presa.

comunicatemedia.ro

comunicatedepresa.ro

15.Linkuri in Wikipedia – O sursa veche ce-i drept, este wikipedia, de aici poti avea cateva

linkuri bune care aduc trafic mult, si in marea lui parte targetat.

16.Comentarii in bloguri, forumuri, comunitati – O buna strategie de obtinere de linkuri este

comentariile si participarea in discutii legate de subiectele de pe nisa ta. Softpedia.ro- e cel mai

important, au si pagina de anunturi. Lista top 10 bloguri romanesti, o gasiti aici: http://itcmedia.ro/top10-

cele-mai-populare-bloguri-romanesti/. ZeList publica saptamanal topul blog-urilor romanesti.

17.Crearea de jocuri virale. Rezultatul poate sa fie fantastic. Se poate folosi Game maker, care

este free, iar pe deasupra nu aveti nevoie de cunostinte de programare prealabila.

18.Link in filmele publicate pe YouTube etc. – Daca publici filme pe YouTube atunci e o idee

buna ca in descrierea filmului sa introduci linkuri catre produsele tale, daca sunt relevante

subiectele filmului.

19.Magazine online pe platforme gratuite – Daca vinzi produse sau vrei sa vinzi cadouri pentru

Page 65: Web design si programare web

fani te poti folosi de magazine pe platforme gratuite gen CafePress, Ecrater, ShareIt etc, in profilul lor

vei putea sa scrii cateva date despre servicii produse. Uneori oferind o alternativa la shopurile clasice,

ai posibilitatea sa ajungi la clienti in care mod normal nu ai ajunge.

20.Inscrie siteul tau in Google Local Business Center si creeaza un profil complet cu adresa,

telefon, url. Mai nou exista posibilitatea sa adaugi imagini cu produse si cu locatia, filme despre firma,

produse si chiar si cupoane. Publica imagini pe Fotolia si adauga un link in profil

21.Promoveaza si vinde folosind agregatoarele romanesti de reduceri: groupon,ro, inzonata.ro,

zumzi.ro, ca sa le enumeram doar pe cele mai mari. Au baze de date cu mii de useri si trimit email

informativ. Nu platiti nimic la inscriere, vi se retine comision doar la vanzarea unui produs. Chiardaca

nu veti vinde mare lucru, numele firmei va fi expus potentialilor clienti.

22Inscrierea sitului in google analytics: micsoreazaperioada de indexare a sitului in google, din

momentul inscrierii lui.

23.Realizarea unui sitemap si trimiterea lui la Google.


Top Related