primul bootcamp de programare web si web design din romania

cursuri programare web si web design ploiesti si in toata lumea ·


Primul bootcamp de programae web si web design din romania, se desfasoara in ploiesti, dureaza o luna, cate 5 zile pe saptamana, cate 4 ore pe zi. Au inceput inscrierile. Costa 1200 lei, iar plata se face: 400 lei la inscriere, 400 lei la inceputul cursului, iar restul la jumatatea cursului. Plata se face prin transfer bancar, in contul societatii, sau numerar, la sediul societatii. Pentru informatii suplimentare trimiteti un email la centruldoxis@gmail.com, in care cereti detalile. Cursul se poate tine si online, pe skype, si in acest caz costa 600 lei. Inscrieri si relatii la centruldoxis@gmail.com.
Structura bootcamp:
1. HTML si XHTML
2. CSS
3. Java script
4. sql si php
5. seo
6. POO
7. applet-uri java si jocuri GUI in jaa
8. promovare online eficienta
9. elemente de design
0729 131 325 - prof. Bogdan Boroghina
administrator si lector Centrul Doxis

Cate ceva despre legatura SEO si web design- de Bogdan Boroghina

Web design, programare web, optimizare SEO si promovare


Titlul de mai sus reprezinta cele patru elemente care va vor asigura succesul afacerii
dvs. pe Internet. Cu alte cuvinte: trebuie sa ai o pagina cat mai atractiva din punct de vedere grafic, pentru a convinge vizitatorii sa ramana pe pagina, sa fie echilibrat
programata (usor de vizitat, informatiile/produsele usor de gasit, etc), sa fie optimizata pentru motoarele de cautare (pentru a fi cat mai “sus” in Google), si eficient promovata.

Retineti: puteti avea cel mai frumos site: daca sunteti pe pozitia 200 in Google, e
degeaba. Nu va gaseste nimeni. Puteti fi pe prima pagina in Google: daca se incarca
greu, daca nu este usor de folosit, enervant de greu de navigat, daca nu captati atentia in primele 20 de secunde, vizitatorul va iesi imediat. Pentru ca are de unde alege. Utilizati cat mai multe din criteriele din algoritmii Google Panda si Penguin.
Aveti grija cand alegeti numele domeniului. Determinati cat mai corect titlul fiecarei
pagini in parte. Cercetati intai care trebuie sa fie cuvintele cheie determinante pentru paginile dvs, folosinf uneltele Google Analytics si siturile concurente, bine pozitionate in lista. Folositi cat mai des cuvintele cheie in paginile site-ului. Includeti cuvintele cheie in adresele de email, tag-urile “alt” din imagini. 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". Publicati un E-mail Informativ. 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 de email si anunta noile concursuri prin email informativ. Oamenii interesati sa castige intra pe site si afla de produsele/serviciile dvs. Folositi 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-ora72/cele-maibunecampanii-online-top-10-2616.html.
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 exportati ca PDF, sau ca fisier HTML in Notepad si sa-l transformati in ebook folosind Sbook Builder, care de asemenea este gratuit. Site-urile “cârlig” atrag diversi utilizatori deoarece ofera ceea ce ei doresc, de obicei informatii. Teoretic, toate site-urile 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.
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.
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. Profil pe Facebook, linkedin, twitter, twoo, badoo. Creaza un profil pe unul sau mai multe siteuri de socializare.
Publicarea de comunicate de presa – Daca aveti un produs/serviciu nou si demn de anuntat, puteti folosi publicarea in siteuri de comunicate de presa.
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.
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.
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 nu numai) si adauga un link in profil. Inscrierea sitului in google analytics: micsoreaza perioada de indexare a sitului in google, din momentul inscrierii lui.

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.

Noi indicatii pentru SEO- de prof. Bogdan Boroghina

Primul curs online din Romania de web design si programare web in javascript, destinat copiilor. Pentru ca vin sarbatorile...

Cum alegem cuvintele cheie potrivite (folosind Google Analytics si siturile concurente) si implementarea corecta a tag-urilor meta

Alegerea cuvintelor cheie
Se face un cont gratuit pe Google Adwords, folosind o adresa de gmail.
Va conectati la contul dvs, Adwords. (pe adwords.google.com).
In aceasta fereastra, Google ne pune la dispozitie mai multe unelte de analiza. Dati
click I partea de sus pe “Instrumente”. In lista instrumentelor, gasim “Planificatorul cuvintelor cheie”. Dati click pe el. Alegeti din posibilitatile care apar “Cautati idei de cuvinte cheie”. Scrieti grupurile de cuvinte cheie dorite.
Eu am tastat “cursuri web design” si in partea de jos, click pe “Obtineti idei”.
Va apare o fereastra cu toate cautarile, impreuna cu numarul mediu de cautari lunar si concurenta: mica, medie, ridicata- este vorba de concurenta pe aceste cuvinte cheie.
Alegeti de aici lista cuvintelor dorite: personal va recomand pe cele cu volum mare
de cautari si concurenta cel mult medie.
In acelasi mod procedati pentru fiecare grup de cuvinte in parte.


Siturile concurente

Nu strica sa ne aruncam o privire si la siturile concurente, clasate in primele pozitii
in Google.
Intram pe situl respectiv.
Am ales un exemplu pur la intamplare.
In Google Chrome, dati click in coltul dreapta sus, pe “Personalizati Google Chrome”.
Aici alegeti “Instrumente” si “Vedeti sursa”. Dupa ce ati selectat din analiza Google adwords si a siturilor concurente lista cuvintelor cheie, inserati in intre si in pagina dvs. urmatoarele taguri:



Exemplu:




Sfat: folositi cam 20-30 cuvinte cheie si fraza/fraze care sa le includa pe toate.
Folositi cuvinte cheie numai in legatura cu continutul sitului. Folositi cuvinte cheie
diferite pentru fiecare din paginile sitului, Google adora diversitatea.

Despre SEO, pentru toti cei care vor sa isi optimizeze paginile

Primul curs online din Romania de web design si programare web pentru copii. Fa copilului tau un cadou de neuitat

Ce este SEO?


Notiunea de SEO a aparut in anii 90. Este acronim de la Search Engine Optimization, adica optimizare pentru motoarele de cautare. A aparut asadar o noua stiinta, ce are drept scop marirea traficului calitativ al unui site. De ce calitativ?
In loc de 1000 de vizitatori din care doar 5 sunt interesati cu adevarat de continutul sitului, se prefera 100 de vizitatori din care 10 se declara interesati de continut, adica o rata de conversie de 10% (rata de conversie calculata ca raport procentual intre numarul de vizitatori si numarul celor care au o actiune dupa ce viziteaza situl: cumpara ceva, ne recomanda, se aboneaza la un news letter, downlodeaza un soft chiar
si gratuit, etc).

Optimizarea in sine este de doua tipuri:

1. Optimizarea interna, numita si on-site optimizare – in care optimizarea sitului de face direct in pagina, si priveste: scrierea conforma a titlurilor si descrierilor,
eliminarea erorilor, îmbunatatirea vitezei de încarcare a paginii, folosirea cu moderatie a reclamelor etc (cel mai bine deloc). 2. Optimizarea externa numita si off-site optimizare – în care promovarea nu tine în mod direct de SEO, ci se refera la performanta si popularitate, iar drept exemple pot servi: numarul si calitatea legaturilor catre pagina analizata, numarul de interactiuni sociale (Facebook like, share, comment, Tweet, +1 etc.), credibilitatea si autoritatea surselor.

Pe scurt, SEO este stiinta. Aceasta stiinta presupune efectuarea unor operatii precum:

-Analiza cuvintelor cheie, prioritizarea lor dupa importanta pentru situl nostru.
-Analiza concurentei si preluarea punctelor forte, dar în variante îmbunatatite.
-Evitarea site-urilor Flash, cu efecte sofisticate Javascript.


Concurenta se schimba in permanenta: apar noi competitori, dispar altii, cei existenti isi modifica strategia. Asta inseamna ca eforturile SEO nu se termina niciodata. Optimizarea nu se termina niciodata. Google este motorul de cautare folosit de marea
majoritate a utilizatorilor Internetului din intreaga lume, precum si de 87% dintre romani. In consecinta, Google va fi motorul de cautare analizat.
Peste 90% din cei care apeleaza la cautari pe Google, se opresc la prima, cel mult a doua pagina din rezultatele cautarii, si mai ales la rezultatele din pozitia superioara. Deci este determinant sa ne plasam pe prima pagina in partea ei superioara.
Exista doi algoritmi determinanti folositi de Google pentru clasarea paginii in rezultatele cautarii: Google Panda si Penguin.

Prezentarea algoritmilor Google Panda si Penguin.

Iata ce trebuie sa facem conform acestor doi algoritmi, pentru a ocupa o pozitie superioara.
Link-uri (sau ancore) -un site cu o ierarhie de linkuri cat mai clara. Fiecare pagina trebuie sa poata fi accesata din cel putin un link de tip text.
-oferiti o harta a sitului, astfel incat vizitatorul sa poata ajunge usor in oricare din paginile sitului.
-fiecare pagina trebuie sa contina un numar rezonabil de linkuri (adica nu foarte mare).
-fiecare ancora trebuie sa contina argumentul “title”.
-eliminati toate linkurile care nu duc nicaieri (catre
pagini inexistente).
-in nici un caz nu folositi schimburi de linkuri, decat daca paginile respective au un Page Rank suficient de mare si sunt din acelasi domeniu de interes cu situl
dvs.
-utilizati linkuri cu texte cat mai diferite intre ele.
-folositi argumentul “alt” in tagurile pentru imagini.


Informatie


Folositi in paginile sitului cat mai multa informatie.
Folositi deseori cuvintele cheie din tag-ul “keywords”
si “description”, dar nu abuzati de ele.
Eliminati pe cat posibil orice script Java, frame-uri sau
Flash-uri.
Creati continut “proaspat”, cu informatii cat mai utile.
Asigurati-va ca ati inclus un fisier “robots.txt”. Acest fisier va spune motoarelor de cautare ce pagini sa nu fie indexate.( documentatia completa pe http:
//code.google.com/web/controlcrawlindex/docs/faq.
html). Testati situl pe diverse browsere si asigurat-va ca apare corect in fiecare din acestea.
Google recomanda sa masurati periodic performanta sitului dvs. folosind Page Speed,YSlow, sau WebPagetest.
Utilizati corect sintaxa “HTML”.
Folositi cuvintele cheie cat mai variate.


Google incearca in acesti algoritmi lui sa simuleze comportamentul uman, bazat pe viata reala. Ganditiva in felul urmator, cumparati un cd cu muzica noua pe care vreti sa o ascultati. Muzica se aude foarte prost. Ati recomanda cd-ul apropiatilor? Exact asa se
intampla si cu site-urile.


Concluzii: ce este cel mai bine pentru situl meu?


1. Faceti o lista cu cuvintele cheie folosite de siturile concurente situate pe primele pozitii in Google, si evidentiati-le pe cele comune. Acestea sunt cuvintele cheie pe care obligatoriu va trebui sa le includeti, plus cele alese de dvs.
2. Includeti toate cuvintele cheie in tagul “keywords”.
3. Includeti toate cuvintele cheie in fraza folosita in tagul “description”.
4. Structurati paginile astfel incat sa folositi cuvinte cheie diferite in fiecare pagina, cat mai variate.
5. Umpleti intati situl cu informatie de calitate, in care includeti cat mai des cuvintele cheie alese, atat in toata pagina cat si in primele 20 de cuvinte ale sitului.
6. Includeti linkurile si nu uitati de atributul “title”.
7. Includeti imaginile, dar nu exagerati nici cu numarul lor, nici cu marimea lor. Nu uitati de atributul “title” pentru fiecare imagine.
8. Denumiti fiecare poza folosind cuvinte cheie.
9. 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.

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

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

12. Trebuie spus de la inceput ca motoarele de cautare 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.


13. Vizitatorii si motoarele de cautare apreciaza siteurile 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 ezolutie.

14. Informatia respectiva este scrisa de o autoritate din domeniul respectiv? Sau este pur si simplu rescrisa din alta parte? Deci, in nici un caz nu duplicati.