Cursuri programare web si web design, autocad, c++, java
Cursuri programare web si webdesign, autocad, c++, java, regim de meditatie individual, la domiciliul clientului (avand in vedere situatia actuala). O sedinta dureaza 3 ore, 50 min/ora. Sunt doua sedinte saptamanal, in total 4 saptamani. Zilele si orele le stabilim de comun acord. Detalii suplimentare pe situl: boroghina-bogdan.000webhostapp.com, sau la nr. de tel.0729 131 325. Nu sunt necesare cunostinte prealabile.
Se afișează postările cu eticheta web design. Afișați toate postările
Se afișează postările cu eticheta web design. Afișați toate postările
luni, 6 iulie 2020
marți, 21 august 2018
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
marți, 9 decembrie 2014
Web design- concepte de baza
Cursuri web design si programare web online, diplome avizate ANC
1. Sa disecam o pagina web
Indiferent de site, in general, structura este urmatoarea:
- o zona denumita container, in care se afla toate elementele sitului. Ganditi-va la un
container ca la o cutie in care se afla toate elementele paginii.
- logo: acesta este un element de identitate, de obicei plasat in partea de sus a paginii
- zona de navigare: este foarte important ca utilizatorul sa gaseasca foarte usor link-urile catre celelelate pagini ale sitului. In general se afla tot in partea de sus a paginii, dar poate fi si in dreapta sau in stanga. Este important in tot cazul sa se afle deasupra liniei terminale a paginii. Ce este linia terminala? In general, rezolutia este de 1024 x 768 pixeli, unde prima valoare reprezinta latimea paginii, iar a doua este inaltimea paginii. Luand in seama toate elementele care apar, in general, se considera ca linia se afla la 500 pixeli fata de partea de sus. Cum se defineste?
Este linia orizontala incepand de la care utilizatorul nu mai vede restul paginii, trebuind sa apeleze la scroll pentru a derula pagina in jos
- subsol (sau footer- daca ati lucrat in Word stiti la ce ma refer): este plasat in partea de jos a paginii si contine informatii despre firma, contact, proprietar, etc.
- spatiu gol: o tendinta a incepatorilor este de a umple intreaga pagina cu texte sau imagini, dar este o greseala. Spatiul “negativ” sau alb, cum mai este denumit, trebuie sa apara ca o “oaza” de liniste, unde ochiul se poate odihni. Altfel, veti da impresia de “sufocare”.
2. Numarul de aur
Numarul de aur a fost si este folosit pe scara larga in arta, si nu numai (inclusiv de Leonardo da Vinci). Acest numar este 1,6.... (si urmeaza o serie infinita de zecimale) si reprezinta raportul intre elementele sitului. In forma sa simplificata, putem considera numarul egal cu 1,5. Cum aplicam raportul: luam o lungime ca unitate de masura si o impartim astfel: o lungime si urmatoarea de aproximativ de doua ori mai mare. Procedand astfel si pe orizontala si pe verticala, putem imparti zona paginii respectand raportul dat.
3. Echilibrul: acesta poate fi:
- simetric: apare atunci cand dorim ca situl sa fie centrat fata de o linie orizontala sau verticala.
- asimetric: este mai bine perceput vizual decat primul. Ca sa ramana impresia de echilibru, puteti plasa in partea stanga a paginii o poza de dimensiune mai mare, iar in partea dreapta, aceeasi poza, repetata de mai multe ori, dar de dimensiuni mai mici.
Accentuarea: ca sa punem in evidenta anumite aspecte pe care le consideram importante, putem folosi accentuarea. Accentuarea se poate obtine prin mai multe metode: prin plasarea in centrul paginii, primul punct in care se opreste privirea, prin contrast (doua culori diferite sau un text de dimensiune mai mare si unul mai mic), prin repetitie (plasarea aceluiasi element de mai multe ori), prin schimbarea proportiilor (o imagine mult mai mare fata de restul).
4. Culori
Asociatiile de culori:
-rosul este culoarea care stimuleaza cel mai mult
-portocaliul este de asemenea foarte activa si pentru faptul ca nu prea apare in
natura, tinde sa ne sara in ochi
-galbenul este asociat cu fericirea
-verdele inseamna crestere si bogatie
-albastrul are un efect calmant
-violetul este asociat cu puterea
-albul inseamna puritatea
-negrul inseamna forta
Dupa ce am ales culoarea de baza a sitului, pornim de la aceasta culoare.
Exista mai multe scheme de culori:
- monocromatica: se pastreaza culoarea de baza si se alatura mai multe nuante mai inchise sai deschise ale culorii
- analogica
- complementara
- triadica
La aceasta adresa se poate alege o buna schema de culori:
http://www.sessions.edu/color-calculator
Exemplu:
presupunem ca am ales culoarea de baza rosu, adica in cod hexazecimal: #FF0000
Schema monocromatica inseamna alegerea culorii de pe margine: #e662e2e.
Schema complementara inseamna alegerea culorii care se afla in opozitie pe roata
culorii, in cazul nostru verdele.
Schema analogica presupune alegerea culorilor adiacente de pe roata, adica alaturate
Schema triadica inseamna alegerea a inca doua culori, dar alaturate celei complementare pe roata culorilor.
O analiza buna a culorilor folosite poate fi facuta cu urmatoarea unealta:
http://juicystudio.com/services/luminositycontrastratio.php
5. Forme geometrice
Forma de baza este punctul. Din doua puncte se poate obtine o linie, din mai multe linii se pot obtine diverse figuri geometrice mai mult sau mai putin regulate, care pot fi folosite in pagina:
-bazat pe triunghiuri
-bazat pe cerc
-bazat pe triunghiuri si patrate rotite
-bazat pe patrulatere
de prof. Bogdan Boroghina
1. Sa disecam o pagina web
Indiferent de site, in general, structura este urmatoarea:
- o zona denumita container, in care se afla toate elementele sitului. Ganditi-va la un
container ca la o cutie in care se afla toate elementele paginii.
- logo: acesta este un element de identitate, de obicei plasat in partea de sus a paginii
- zona de navigare: este foarte important ca utilizatorul sa gaseasca foarte usor link-urile catre celelelate pagini ale sitului. In general se afla tot in partea de sus a paginii, dar poate fi si in dreapta sau in stanga. Este important in tot cazul sa se afle deasupra liniei terminale a paginii. Ce este linia terminala? In general, rezolutia este de 1024 x 768 pixeli, unde prima valoare reprezinta latimea paginii, iar a doua este inaltimea paginii. Luand in seama toate elementele care apar, in general, se considera ca linia se afla la 500 pixeli fata de partea de sus. Cum se defineste?
Este linia orizontala incepand de la care utilizatorul nu mai vede restul paginii, trebuind sa apeleze la scroll pentru a derula pagina in jos
- subsol (sau footer- daca ati lucrat in Word stiti la ce ma refer): este plasat in partea de jos a paginii si contine informatii despre firma, contact, proprietar, etc.
- spatiu gol: o tendinta a incepatorilor este de a umple intreaga pagina cu texte sau imagini, dar este o greseala. Spatiul “negativ” sau alb, cum mai este denumit, trebuie sa apara ca o “oaza” de liniste, unde ochiul se poate odihni. Altfel, veti da impresia de “sufocare”.
2. Numarul de aur
Numarul de aur a fost si este folosit pe scara larga in arta, si nu numai (inclusiv de Leonardo da Vinci). Acest numar este 1,6.... (si urmeaza o serie infinita de zecimale) si reprezinta raportul intre elementele sitului. In forma sa simplificata, putem considera numarul egal cu 1,5. Cum aplicam raportul: luam o lungime ca unitate de masura si o impartim astfel: o lungime si urmatoarea de aproximativ de doua ori mai mare. Procedand astfel si pe orizontala si pe verticala, putem imparti zona paginii respectand raportul dat.
3. Echilibrul: acesta poate fi:
- simetric: apare atunci cand dorim ca situl sa fie centrat fata de o linie orizontala sau verticala.
- asimetric: este mai bine perceput vizual decat primul. Ca sa ramana impresia de echilibru, puteti plasa in partea stanga a paginii o poza de dimensiune mai mare, iar in partea dreapta, aceeasi poza, repetata de mai multe ori, dar de dimensiuni mai mici.
Accentuarea: ca sa punem in evidenta anumite aspecte pe care le consideram importante, putem folosi accentuarea. Accentuarea se poate obtine prin mai multe metode: prin plasarea in centrul paginii, primul punct in care se opreste privirea, prin contrast (doua culori diferite sau un text de dimensiune mai mare si unul mai mic), prin repetitie (plasarea aceluiasi element de mai multe ori), prin schimbarea proportiilor (o imagine mult mai mare fata de restul).
4. Culori
Asociatiile de culori:
-rosul este culoarea care stimuleaza cel mai mult
-portocaliul este de asemenea foarte activa si pentru faptul ca nu prea apare in
natura, tinde sa ne sara in ochi
-galbenul este asociat cu fericirea
-verdele inseamna crestere si bogatie
-albastrul are un efect calmant
-violetul este asociat cu puterea
-albul inseamna puritatea
-negrul inseamna forta
Dupa ce am ales culoarea de baza a sitului, pornim de la aceasta culoare.
Exista mai multe scheme de culori:
- monocromatica: se pastreaza culoarea de baza si se alatura mai multe nuante mai inchise sai deschise ale culorii
- analogica
- complementara
- triadica
La aceasta adresa se poate alege o buna schema de culori:
http://www.sessions.edu/color-calculator
Exemplu:
presupunem ca am ales culoarea de baza rosu, adica in cod hexazecimal: #FF0000
Schema monocromatica inseamna alegerea culorii de pe margine: #e662e2e.
Schema complementara inseamna alegerea culorii care se afla in opozitie pe roata
culorii, in cazul nostru verdele.
Schema analogica presupune alegerea culorilor adiacente de pe roata, adica alaturate
Schema triadica inseamna alegerea a inca doua culori, dar alaturate celei complementare pe roata culorilor.
O analiza buna a culorilor folosite poate fi facuta cu urmatoarea unealta:
http://juicystudio.com/services/luminositycontrastratio.php
5. Forme geometrice
Forma de baza este punctul. Din doua puncte se poate obtine o linie, din mai multe linii se pot obtine diverse figuri geometrice mai mult sau mai putin regulate, care pot fi folosite in pagina:
-bazat pe triunghiuri
-bazat pe cerc
-bazat pe triunghiuri si patrate rotite
-bazat pe patrulatere
de prof. Bogdan Boroghina
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.
vineri, 5 decembrie 2014
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
Alt exemplu: vrem sa centram un titlu:
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:
font-size
font-weight
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
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.
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:
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
//definim un formular simplu
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.
Abonați-vă la:
Postări (Atom)