Suport de Curs Webdesign

CURSUL 1
Curs Introductiv

In acest prim curs, mai mult va voi povesti despre materia care o studiem si despre tot
ce tine de aceasta. O sa si notati anumite parti, insa per total, de-a lungul cursurilor nu vom
avea parte de multa teorie, ne vom axa mai mult pe practica si activitate pe calculator.

Principala tema a acestor cursuri vor fi limbajele HTML si CSS. Nu voi intra astazi prea
mult in detalii despre ele, nu vreau sa va sperii de la primul curs. In shimb le vom lua cu
timpul, pe rand, pas cu pas pentru a ma asigura ca fiecare dintre voi o sa intelegeti ce este de
inteles. In functie de implicarea si rezultatele voastre, va voi invata in timp si putine notiuni
despre JavaScript, Adobe Photoshop si poate PHP. Acestea sunt elemente mai avansate ale
webdesignului, insa sper sa va ridicati la nivelul in care va pot invata despre ele.



Revenind la webdesign:

Ce este webdesign-ul?
Designul web, sau webdesign-ul (din engleza) este domeniul care integreaza o
multitudine de tehnici si platforme (atat software cat si hardware) avand scopul final de a
realiza un site web.
Prin webdesign intelegem toti pasii pe care ii parcurgem, de la momentul conceperii
structurii, a interfetei grafice pana la finalizarea programarii si introducerea propriu-zisa
a datelor care alcatuiesc continutul site-ului - imagini, text, articole, fisiere si multe alte
elemente.

Diferitele arii si pasi ale webdesignului includ gandirea structurii siteului, realizarea
interfetei grafice intr-un program de editare software (de ex: Adobe Photoshop),
transformarea acestei interfete in cod pentru a putea fi citit de catre browserele web,
introducerea de continut in cadrul website-ului si deasemenea optimizare pentru motoarele
de cautare (SEO – search engine optimization). Acestor etape de baza, se pot adauga si
altele, optionale, printre care ar fi realizarea de scripturi in diferite limbaje de programare
(PHP, JavaScript), in functie de nevoile respectivului proiect.

Mai pe intelesul tuturor. Serviciul de webdesign este dedicat celor care doresc sa
existe in lumea virtuala. Internetul si website-urile sunt viitorul, oferind o nenumarata sursa
de clienti, oferte si informatii din intreaga lume. Imaginea conteaza atat in lumea reala cat si
in cea virtuala.
Un web design bine conceput iti poate oferii sansa sa te imbogatesti si/sau sa fii
cunoscut. Merita incercat, merita ceva nou.
Imaginea conteaza, impactul pe care trebuie sa il lase imaginea unui website trebuie
sa ramana in mintea vizitatorului.

Desi webdesign-ul are o istorie relativ scurta, pentru a putea intelege de unde si cum
a aparut acest domeniu, il putem asocia cu anumite puncte cheie din istoria internetului.
La 30 Iunie, 2012, se estimea ca internetul are in jur de 2 miliarde 400 milioane de
utilizatori. Tinand cont ca pe toata planeta suntem in jur de 7 miliarde, este o cifra enorma.
In fiecare zi, in mod constient sau nu, acesti utilizatori descopera o multitudine de website-
uri, website-uri care pentru a prinde viata au trecut prin intreg procesul numit web design.

World Wide Web
Vreau sa va povestec putin despre istoria web-ului, ce este acesta, cum a luat
nastere. Stiu ca webdesignul, pe langa partea de vizualizare si creare a unei interfete grafice,
este o stiinta exacta, bazata pe cod si logica, insa consider ca toti trebuie sa avem minimul
necesar de cunostiinte asupra domeniul care sta la baza sa, daca nu de curiozitate, macar
pentru faptul ca pentru a putea intelege si apoi aplica, trebuie sa stim istoria si sa cunoastem
bazele si tehnologiile de care ne folosim pentru a crea website-uri.

Vom incepe cu anul 1967 cand un proiect al statului american a prins contur. In
octombrie s-a facut planul pentru realizarea unei retele de calculatoare ( a fost numit
ARPANET), iar in decembrie 1969 primele patru calculatoare functionau in retea. Astfel
putem considera ca prima instanta a Internetului, care practic reprezinta o interconectare si
intercomunicare intre calculatoare, a luat viata in 1969.

Important: Web-ul nu este internetul. Deseori se confunda. WWW-ul (World Wide
Web) este de fapt doar una din multitudinea de modalitati prin care se pot schimba
informatii prin Internet, alta din ele, de exemplu, este e-mail-ul.

Web-ul s-a inventat in 1990 de catre o echipa a CERN condusa de Tim Berners-Lee.
Scopul acestei echipe a fost schimbarea de informatii in comunitatea stintifica, deci intr-un
cerc restrans. Totusi in 1993, Marc Anderson si Eric Bina au realizat primul browser usor de
utilizat. Punerea in functiune a Mozaic, primul browser care afisa imagini intr-o fereastra
browser, a fost vestitorul sosirii a World Wide Web.

Primul designer web a fost chiar inventatorul www-ului, Tim Berners Lee, care a
publicat primul site din istorie in anul 1991. La inceput, site-urile nu erau nici pe departe atat
de complexe si incarcate grafic cum sunt in prezent, limbajul utilizat - HTML - fiind nu prea
puternic si permitand numai o serie limitata de formatari, precum si inserarea de linkuri,
pentru a putea "lega" paginile intre ele, designul web fiind, de fapt, mai mult "programare"
web.

In anul 1996, Microsoft a lansat primul browser web disponibil pentru utilizatorii de
rand, celebrul Internet Explorer. Acesta propunea propria varianta de HTML si a fost primul
browser ce permitea folosirea de style-sheeturi. Din pacate, datorita lipsei standardizarii
codului HTML, si a tuturor celorlalte tehnologii disponibile la cel moment, toate browserele
ce au aparut la acea vremea afisau in mod diferit paginile web, astfel era imposibil sa
realizezi o pagina web compatibila cu toate calculatoarele.

Din fericire, avem W3C (World Wide Web Consortium), organizatie condusa de insusi
Tim Berners-Lee, fondatorul internetului, al carei scop este tocmai standardizarea
tehnologiilor web, pentru a garanta functionarea si afisarea corecta pe orice dispozitiv cu
acces la internet. Deasemenea alt scop este si dezvoltarea de noi tehnologii, ce vor duce la
avansarea web-ului. Motto-ul lor este „Leading the Web to Its Full Potential” (Conducerea
Web-ului la potentialul sau maxim).

In prezent preocuparea pentru aspectul grafic al siteurilor, devenite puternice
instrumente comerciale si publicitare, justifica in intregime denumirea de "design web", iar
tehnologiile utilizate s-au diversificat si au devenit din ce in ce mai complexe.

Care este concluzia care o trageti in urma acestei scurte istorii?

Astfel, in urma acesti scurte istorii, concluzia care o puteti trage este urmatoarea:
Fara standardizare nu se poate avansa la o scala asa larga. Luati spre exemplu automobilele.
Existenta acestora si posibilitatea utilizarii lor de catre orice persoana de pe planeta, este
datorata in exclusivitate standardizarii. Toate au schimbator de viteze, volan, pedale, faruri,
stopuri, semnalizari si toate cele, lista poate continua.
Aceeasi situatie este si in cazul web-ului. Tuturor browserelor le trebuiesc impuse
anumite standarde pentru a afisa corect ceea ce noi, web designerii vrem sa afisam clientilor
si vizitatorilor.



Ce este necesar pentru realizarea unui site web?

Orice site web trece in mod necesar prin mai multe etape:

1. Analiza preliminara
2. Concretizarea ideilor
3. Schitarea elementelor vizuale și compunerea structurii site-ului
4. Programarea paginilor web în HTML, CSS, Javascript etc.
5. Testarea site-ului
6. Schimbarea parților care nu corespund tintei si actualizarea dupa nevoi
7. Publicarea site-ului pe Internet sau pe un intranet
8. Modificarea ulterioara si relansarea pe Internet, dupa nevoile clientilor sau ale
timpului (procesc cunoscut si ca administrare)


Ce este HTML? Notiuni de baza

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la
baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html
sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere
<eticheta> și alta de inchidere </eticheta>, mai exista si cazuri in care nu se inchid, atunci se
foloseste <eticheta /> browserul interpreteaza aceste etichete afisand rezultatul pe ecran.
HTML-ul nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari). Pagina
principala a unui domeniu este fisierul index.html respectiv index.htm. Aceasta pagina este
setata a fi afisata automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului
www.nume.ro este afisata pagina www.nume.ro/index.html.

 HTML este un format fara propietar: nu este al nimanui, el este sursa
deschisa si libera, adica oricine poate sa o foloseasca liber, fara nici o plata.
 HTML poate fi creat de o mare varietate de instrumente: - poate fi creat de
oricine. El nu necesita un soft sofisticat sau scump, si poate fi scris cu cele mai
simple editoare de text, libere. In cazul nostru vom folosi Notepad.
 HTML poate fi procesat de o mare varietate de instrumente: - dupa ce a fost
scris, el poate fi citit de o varietate larga de dispozitive cum ar fi browser-ul
vostru, noul vostru telefon mobil etc.
 HTML poate structura textele in legaturi hypertext: - are abilitatea sa
converteasca textul si imaginea in legaturi hypertext sau altfel spus linkul pe
care faceti clic ca sa va miscati de la o pagina web la alta.



Unul din principalele dorinte ale standardizarii web - care este si una din masurile
luate - este separarea continutului de prezentare. Prin evolutia sa HTML a avut posibilitatea
sa foloseasca si elemente de prezentare, altfel spus, de design, insa din totdeauna scopul
HTML a fost sa structureze si sa dea sens unei pagini web, nu sa se ocupe de aspectul paginii,
aici intervine CSS.

Abordarea conforma standardelor este simpla:

 se foloseste HTML pentru structurarea paginii si a da sens informatiei furnizate
 se foloseste CSS pentru a controla aspectul sau vizual si designul

Acesta nu este un concept nou, dar in urma ineficientei si a complicarii inutile a
domeniului web, a ajuns din nou in centrul atentiei. Aceasta este piatra de temelie,
fundamentul abordarii conform standardelor web.

Pentru a va face o idee si a va fi mai usor, puteti privi programarea, atat limbajul
HTML cat si pe celelalte ce vom urma sa le invatam, ca pe niste comenzi logice ce mereu au
aceasi rezultat. De exemplu, puteti face o asociere cu dresajul canin. Acesta se bazeaza in
mod exclusiv pe comenzi simple si exacte, pentru a obtine un rezultat de la caine. Acelasi
lucru este si in programare. Intotdeauna o linie de cod, va avea acelasi rezultat.

Haideti sa vedem cum arata HTML. In spatele fiecarei pagini web pe care o accesati se
afla HTML. Deschideti browser-ul si accesai site-ul organizatiei ce se ocupa cu dezvoltarea
web-ului, www.w3c.org
Faceti click dreapta -> view source/view page source.
Ceea ce va este afisat, este codul HTML pentru aceasta pagina. Cum toate site-urile
sunt diferite, deasemenea tot codul din spatele lor este diferit, insa structura este aceeasi.
Va rog sa accesati si www.w3schools.com si sa comparati codurile sursa.
Ce similitudini gasiti?

Sa ne lamurim cu forma standard a oricarui document HTML:

<!DOCTYPE html>

<html>

<head>
</head>

<body>
</body>

</html>
Prima linie, <!DOCTYPE html>, trebuie sa fie primul lucru care il scrieti in
documentul vostru HTML. Aceasta declaratie nu este o eticheta html, ci este o instructiune
pentru browserul web pentru a il notifica despre ce versiune HTML este vorba. In trecut,
aceasta linie de cod era mai complexa si includea multi parametrii. Insa o data cu aparitia
HTML5, tot ce trebuie voi sa stiti este <!DOCTYPE html>.
De retinut:
 intodeauna introduceti ca prima linie <!DOCTYPE html>
 <!DOCTYPE html> nu are eticheta de inchidere, astfel trebuie scris doar o data, la
inceputul fiecarui document HTML
 <!DOCTYPE html>, ca restul limbajului HTML, nu este case sensitive, asta inseamna ca
nu este relevant daca scrieti cu litere mari sau mici.



Dupa ce ati declarat tipul documentului, urmeaza prima eticheta, obligatorie in orice
document HTML. Aceasta este <html>. Ea defineste si ii spune browserului ca de acolo
incepe continutul propriu zis al paginii web.
De retinut:
 Eticheta <html> reprezinta radacina unui document html
 Eticheta <html> are si eticheta de inchidere, de forma </html>
 <html> este eticheta ce imbratiseaza restul continutului unui docmunet html, tot
codul pe care il scriem se va plasa intre <html> si </html>, (exceptand
<!DOCTYPE html>).


Privind un document HTML ca pe un corp uman, luat de sus in jos, prima parte este
capul. Astfel, eticheta <head> poate fi considerata capul unei pagini web, locul in care ii
putem spune paginii spre exemplu, titlul dorit. Data viitoare va voi detalia mai mult vis a vis
de eticheta <head>
De retinut:
 Eticheta <head> are si eticheta de inchidere, de forma </head>
 Eticheta <head> este obligatorie in orice document html, in cadrul carei definim titlul
si alte informatii relevante pentru pagina noastra web


Urmatoarea parte a corpului uman, dupa cap, este corpul propriu zis. Astfel in HTML
avem eticheta <body>. In interiorul acesteia vom introduce practic tot continutul ce dorim
sa fie afisat utilizatorilor. Imagini, articole, text, absolut tot ce poate contine o pagina web.
Data viitoare cand vom aprofunda, va voi explica mai detaliat despre toate aceste etichete,
nu vreau sa va bag in ceata de la primul curs.
De retinut:
 Eticheta <body> are si eticheta de inchidere, de forma </body>
 Aceasta cuprinda tot continutul afisat al unui site web
 Eticheta este obligatorie in orice document html



Va rog sa notati un site cu care o sa lucram de acum incolo la fiecare ora:
http://www.w3schools.com
Deasemenea vizitati si www.w3c.org

Final curs 1: Discutie libera vis a vis de primul curs. Intrebari, nelamuriri, impresii.