Web design si SEO- de Bogdan Boroghina

Curs de web design si programare Javascript pentru copii (in general pentru incepatori)

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.

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
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).

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 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.

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 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 violonist.

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?

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.

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 viitor).

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


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”.

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






Acest element e ingrosat

Acest element e inclinat





Se observa ca acest cod e inclus in header-ul documentului, intre si . Prin

CSS background exemplu

Un text. Un paragraf.

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

ACASA | CONTACT | DESPRE NOI

Alt exemplu: vrem sa centram un titlu:

Titlu

Decorarea unui text:

Acesta e primul paragraf

Acesta e al doilea

Al treilea

Al patrulea

Observatie: Blink-ul nu va merge in IE, Chrome, sau Safari. Marirea spatiilor dintre cuvintele unui document: Acesta e un text. Acesta e un text. Alinierea unei imagini cu un text: An aliniere implicita.
An aliniere in partea de sus.
An aliniere in partea de jos. 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: 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:

text 1

text 2

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:

Un text

Alt text

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:

text

Stilul fontului: font-style normal - Normal - implicit italic - Italic oblique - Oblic -Sintaxa: selector { font-style: value; } Exemplu:

text

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:

text

Crearea unui meniu vertical Text normal Text cu background rosu Imagine de background Imaginile 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 Text normal Text cu imagine de fond Repetarea imaginii Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile: repeat-x imaginea se repeta pe orizontala repeat-y imaginea se repeta pe verticala no-repeat imaginea nu se repeta - imaginea nu se repeta Text normal Text cu imagine 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: | Produse | Catalog | 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.

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. 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 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: < !-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 Suma Optional, 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 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 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 01001011 00011001 rezultatul 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 stanga a >> b : deplaseaza bitii lui a cu b pozitii la dreapta Exemple: 00110100 << 1 are ca rezultat: 01101000 10110100 >> 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 TRUE SAU logic (OR) ||- are ca rezultat FALSE daca ambii operatorii sunt FALSE NEGATIE LOGICA (NOT)- are ca rezultat TRUE, daca operatorul a fost FALSE, si invers in caz contrar. 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 eturnezaTRUE daca rezultatul comparatiei este adevarat si FALSE in caz contrar. (exemplu: 7<2 -false="" 0="" 122.="" 1="" 255="" 2="" 65="" 90="" 97="" :="" a.="" a="" aceasta="" aceea="" acest="" aceste="" acestei="" adevar="" adevarata-true="" adevarata="" altfel="" are="" asa="" ascii.="" asociat="" astfel:="" atunci="" ca="" calculatorului="" cand="" caracter="" caractere="" care="" cel="" cifre="" cod="" codurile="" compara="" compararea="" conditia="" conditie="" conditiei.="" conditiei="" condition="" conditionala.="" conditionala="" cu="" cuprins="" daca="" de="" decizionala="" decizionale="" din="" direct="" doua="" else="" este="" etc.="" evalua="" evaluata="" executa="" exemplu:="" exemplu="" exista="" expresie="" expresii="" falsa="" false="" fapt="" fiecare="" folosesc="" foloseste="" forma="" generala="" grupul="" iar="" iata="" iei="" if="" in="" inca="" indeplinita.="" indeplinita="" instructiune1="" instructiune2="" instructiune="" instructiunea1="" instructiunea2.="" instructiunea="" instructiuni="" intampla="" intre="" intreg="" js="" la="" larg="" litere="" literele="" lua="" m="(a" mai="" mari="" memoria="" mici="" multe="" nu.="" nu="" numar="" numere="" numerotate="" numi="" numit="" numita="" o="" ordine.="" ordine="" paranteza="" pentru="" ploua="" posibile.="" program.="" punctuatie="" putem="" ramura="" returneaza="" sa="" sau="" scrie="" se="" selectam="" semne="" sens="" si="" sirurilor="" speciale="" spune="" sunt="" trebuie="" trece="" true="" umbrela="" un="" urmatoarea="" va="" val1="" val2-="" val2.="" valoarea="" varianta="" vei="" vida:="" vom="" vrem="" z="">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 = = 4 testam 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. 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=5 document.write(a) a=6 document.write(a) a=7 document.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; Sa vedem exemplul de mai sus rescris: var a=5 while (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=5 while (a<=7) { document.write(a++ +" ") } 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 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 2. Script care foloseste IF ELSE 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 In cazul in care in loc de numere intregi lucram cu siruri de caractere, trebuie sa le includem intre ghilimele. Instructiuni repetitive Instructiunea FOR 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 1="" 2.="" 6.="" 6="" 7="" adevarata="" adica="" afisa="" cand="" care="" ciclu.="" ciclul="" conditia="" continua="" creste="" cu="" deveni="" devine="" din="" dupa="" este="" executa="" iar="" iese="" instructiunea="" lui="" mai="" nou="" nu="" pana="" script="" se="" si="" type="text/javascript" va="" valoarea="" while="" x=""> <!-var x = 1; while (x<7 document.write="" este="" x=""> Initial valoarea lui x este 1. CAT TIMP x<7 data-blogger-escaped-1:="" data-blogger-escaped-adevarata="" data-blogger-escaped-afiseaza="" data-blogger-escaped-ciclare="" data-blogger-escaped-codul:="" data-blogger-escaped-conditia="" data-blogger-escaped-conditie="" data-blogger-escaped-creste="" data-blogger-escaped-cu="" data-blogger-escaped-daca="" data-blogger-escaped-de="" data-blogger-escaped-este....="" data-blogger-escaped-este="" data-blogger-escaped-executa="" data-blogger-escaped-execute="" data-blogger-escaped-falsa.="" data-blogger-escaped-inceput="" data-blogger-escaped-instructiunea="" data-blogger-escaped-la="" data-blogger-escaped-niciodata="" data-blogger-escaped-nu="" data-blogger-escaped-observatia="" data-blogger-escaped-poate="" data-blogger-escaped-sa="" data-blogger-escaped-se="" data-blogger-escaped-var="" data-blogger-escaped-while="" data-blogger-escaped-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. x este 1. conditie adevarata: x<5 data-blogger-escaped-a="" data-blogger-escaped-adevarata="" data-blogger-escaped-conditie="" data-blogger-escaped-de="" data-blogger-escaped-do-while="" data-blogger-escaped-do="" data-blogger-escaped-document.write....="" data-blogger-escaped-document.write="" data-blogger-escaped-executa="" data-blogger-escaped-exista="" data-blogger-escaped-instructiune="" data-blogger-escaped-instructiunea="" data-blogger-escaped-instructiuni="" data-blogger-escaped-lui="" data-blogger-escaped-modificare="" data-blogger-escaped-nu="" data-blogger-escaped-script="" data-blogger-escaped-se="" data-blogger-escaped-type="text/javascript" data-blogger-escaped-valorii="" data-blogger-escaped-while="" data-blogger-escaped-x=""> <!-var x = 9; do { document.write(" valoarea lui x este "+x); x++; } while (x<20> Observatia 1: Corpul intructiunii DO se executa cel putin o data, indiferent de valoarea conditiei (testul WHILE... se face la sfarsit). 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. Nu exista instructiune care sa modifice valoarea lui x, asa incat ramane mereu 8, adica mai mic de 20. 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”. //definim un formular simplu

//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 latime

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". Crearea ferestrelor PROMPT - window.prompt("mesaj", "text care va apare in fereastra") Urmatorul exemplu deschide o fereastra "Prompt". Numele introdus de utilizator poate fi preluat intr-o variabila si folosit mai departe. Scrieti urmatorul text in Notepad si salvati-l cu extensia .html: 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. Se salveaza pe hard, dupa care se executa (se instaleaza). 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: Deci instructiunile PHP sunt cuprinse intre , 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.