UNIVERSITATEA "AUREL VLAICU" ARAD

UNIVERSITATEA AUREL VLAICU DIN ARAD

FACULTATEA DE TIINE EXACTE

DOMENIUL DE LICEN: INFORMATIC

PROGRAMUL DE STUDIU: INFORMATIC

FORMA DE NVMNT: ID

LUCRARE DE LICEN

NDRUMTORI TIINIFICI:

Lect. dr. Dominic Bucerzan

Lect. drd. Mihaela Crciun

ABSOLVENT:

Botici Andrei Sabin

ARAD

2011

UNIVERSITATEA AUREL VLAICU DIN ARAD

FACULTATEA DE TIINE EXACTE

DOMENIUL DE LICEN: INFORMATIC

PROGRAMUL DE STUDIU: INFORMATIC

FORMA DE NVMNT: ID

Protector Security

Site de promovare

NDRUMTORI TIINIFICI:

Lect. dr. Dominic Bucerzan

Lect. drd. Mihaela Crciun

ABSOLVENT:

Botici Andrei Sabin

ARAD

2011

Cuprins3INTRODUCERE

4Capitolul 1 - Istoricul Internetului i clasificarea reelelor

41.1 Despre Internet

51.2 Despre reele de calculatoare

61.2.1 Clasificare dup topologie

61.2.2 Clasificare dup modul de conectare

61.2.3 Clasificare dup extindere

10Capitolul 2 - HTML i site-ul web

102.1 Ce este un site web?

132.2 O scurta istorie a HTML-ului

142.3 Structura unui document HTML

26Capitolul 3 - Elemente utile pentru dezvoltarea unui site web

263.1 ASP / ASP.NET

273.2 Java (JavaEE)

273.3 AJAX (Asynchronous JavaScript and XML)

293.4 JavaScript

293.5 Google Web Toolkit

303.6 ColdFusion

303.7 Web Content Management System (WCMS)

313.8 Wordpress

313.9 Notepad++

323.10 Macromedia Dreamweaver

363.11 Cascading Style Sheets

48Capitolul 4 - Analiza site-ului Protector Security

504.1 Pagina Home

524.2 Pagina Armament

534.2.1 Paginile pentru subcategorii

554.3 Pagina Echipament

554.3.1 Paginile pentru subcategorii

574.4 Pagina Legislatie

574.5 Pagina Contact

584.6 Pagina Disclaimer

584.7 Stilurile CSS

60CONCLUZII

62BIBLIOGRAFIE

INTRODUCERE

Site-ul a fost creat pentru promovarea imaginii i produselor firmei Protector Security. Aceast firm (fictiv) se ocup cu distribuirea de arme, muniii i diverse accesorii, att pentru arme ct i articole de mbrcminte i nclminte.

Popularitatea Internetului a crescut exponenial datorit World Wide Web, aplicaie ce a mplinit promisiunile pe care le aducea reeaua la nfiinarea sa, acelea de a deveni un nou mediu de comunicare i informare. Aceast ultim tehnologie, a crei rezultat a constituit o combinaia ntre text, grafic i chiar sunet ntr-un format aspectuos i usor de accesat, a determinat extinderea.

Lucrarea este structurat n patru capitole dup cum urmeaz. Primul capitol descrie istoria Internetului i clasific reelele, cel de al doilea face referire la elemente HTML. Capitolul al treilea conine elemente utile pentru dezvoltarea unui site: ASP, JAVA, AJAX, JavaScript, Google Web Toolkit, ColdFusion, WCMS, Wordpress, Notepad++, Macromedia Dreamweaver, CSS. Originalitatea lucrrii const n utilizarea elementelor stil cascad care dau posibilitatea de control asupra proiectrii site-ului. Utilizarea CSS permite separarea clar a prezentrii documentelor de coninutul acestora, astfel simplificndu-se ntreinerea aplicaiei. Ultimul capitol, cel mai important, descrie aplicaia lucrrii. Este vorba despre un site de prezentare i promovare a produselor din gama arme, muniii i accesorii, din cadrul unei firmei Protector Security.

Scopul acestei lucrri este de a realiza un site web de prezentare i promovare a firmei Protector Security ntr-un mod ct mai atractiv i de a arta faptul c se pot realiza lucruri deosebite cu resurse minime.Capitolul 1 - Istoricul Internetului i clasificarea reelelor1.1 Despre InternetPrimul lucru pe care trebuie s-l nelegem este cum a aprut Internetul, ce este de fapt el i de ce nu este acelai lucru ca World Wide Web-ul, chiar dac majoritatea cred c este.

Internetul a fost dezvoltat de ctre o agenie finanat de ctre guvernul Statelor Unite, numit Advanced Research Projects Agency (ARPA), n anii 60[12]. Cuvntul internet se refer la setul de reguli (sau protocoale ale Internetului) prin care doua reele de calculatoare pot schimba informaii ntre ele, indiferent de sistemul de operare folosit. La nceput, aceste protocoale ale Internetului erau folosite la comunicarea ntre reeaua civil ARPANET, care lega universiti i centre de cercetare, i reeaua militar MILNET. Calculatoarele care erau folosite n cadrul acestor reele erau complet diferite. Aceste protocoale ale Internetului, numinte TCP/IP au fcut ca sistemele s poat comunica unele cu celelalte, chiar dac erau diferite. S-au dovedit a fi foarte populare i au fost folosite din ce n ce mai mult. Datorit faptului c reeaua ARPANET s-a extins n anii 80, ea s-a dezvoltat i s-a transformat n NSFNET. Protocolul TCP/IP s-a rspndit n toat lumea, permind calculatoarelor din aproape orice ar s comunice ntre ele, indiferent de productor sau tipul de reea din care fceau parte.

Internetul, aa cum este cunoscut, este un simplu set de instruciuni care permite calculatoarelor s comunice ntre ele, indiferent de locaia lor sau de model. Internetul ofer o palet foarte variat de servicii, amintind e-mail-ul, servicii de tiri, administrare la distan etc. Observm aceste protocoale TCP/IP doar atunci cnd folosim calculatoarele pentru a executa diferite operaiuni prin intermediul Internetului i scriem caracterele http:// sau ftp:// sau news:// (acestea apar la nceputul adresei serviciului pe care l accesm).

Pentru ca toate calculatoarele conectate la Internet s se gseasc, ele trebuie s aib nite nume unice, nume ce sunt formate dintr-un ir lung de cifre care definete poziia calculatorului. Pentru a fi mai uor oamenilor, irul de numere este nlocuit cu o adres, spre exemplu: www.google.com. Ultima parte a adresei, .com, reprezint domeniul de baz. Astfel exist mai multe domenii de baz, n funcie de scopul site-ului:

com: organizaie comercial

edu: instituie educativ

gov: departament guvernamental

mil: militar

org: organizaie non-profit

tv: televiziune.

Pe lng aceste cteva domenii de baz care definesc scopul site-ului, mai exist o list foarte mare de domenii care reprezint locaia. Astfel, fiecrei ri i-a fost alocat un domeniu: Romania are .ro, Ungaria are .hu, Marea Britanie are .uk etc.

Folosirea .com n adresa unui site Web este una din particularitile Internetului. Acest .com definea, la nceputul Internetului, paginile de Web din Statele Unite. Astfel, Statele Unite nu are domeniu de baz. Organizaiile comerciale din Statele Unite au folosit .com pentru c era un domeniu uor de reinut i scurt. Dar a .com a devenit foarte popular pentru majoritatea companiilor din afara Statelor Unite, pentru c reprezint un loc bun pe Internet.

Observm c domeniul de baz al rilor se folosete din ce n ce mai puin pentru scopul lui original i devine tot mai mult o operaiune de marketing. Trebuie tiut c, pentru companiile multinaionale, domeniul de ar mpreun cu numele companiei sau al produselor, ar trebui s fie rezervate de la nceput n toate combinaiile posibile pentru a evita ca imitatorii sau competitorii s foloseasc brandul respectiv.1.2 Despre reele de calculatoareReeaua de calculatoare (englez: computer network[11]) leag ntre ele o mulime mai mic sau mai mare de calculatoare, astfel nct un calculator poate accesa datele, programele i facilitile unui alt calculator din aceeai reea.

Metodele de conectare sunt n continu dezvoltare i deja foarte diverse, ncepnd cu tot felul de cabluri metalice i de fibr optic, chiar submarine, terminnd cu legturi prin unde radio cum ar fi WLAN, Wi-Fi, WiMAX sau Bluetooth, prin raze infraroii ca de ex. IrDA sau prin intermediul sateliilor.

La reelele moderne de telefonie, radio, televiziune .a. informaiile de transmis sunt mai nti digitalizate (transformate n date) i apoi transmise tot prin reele de calculatoare i/sau Internet, deoarece acestea ofer mari avantaje fa de reelele analoage tradiionale respective.

1.2.1 Clasificare dup topologie

Topologia (structura) unei reele rezult din modul de conectare a elementelor reelei ntre ele. Ea determin i traseul concret pe care circul informaia n reea "de la A la B". Principalele tipuri de topologii pentru reelele LAN sunt[13]:

topologia Bus (nseamn magistral) - are o fiabilitate sporit i o vitez mare de transmisie;

topologia Ring (inel) - permite ca toate staiile conectate s aib drepturi i funciuni egale;

topologia Star (stea) - ofer o vitez mare de comunicaie, fiind destinat aplicaiilor n timp real.

Reelele mai mari prezint o topologie format dintr-o combinaie a acestor trei tipuri.

1.2.2 Clasificare dup modul de conectare

Reelele de calculatoare pot fi clasificate i dup tehnologia care este folosit pentru a conecta dispozitive individuale din reea, cum ar fi fibr optic, Ethernet, Wireless LAN, HomePNA sau Power line.

Foarte rspndit este metoda Ethernet, termen care se refer la natura fizic a cablului folosit i la tensiunile electrice ale semnalului. Cel mai rspndit protocol de comunicare n reelele Ethernet se numete CSMA/CD ("Carrier Sense Multiple Access / Collision Detection"). Dac sunt utilizate undele radio, atunci reeaua se numete reea fr fir (englez: wireless).

"HomePNA" este un sistem de conectare ntre ele a calculatoarelor i aparatelor "inteligente" dintr-o locuin, bazat pe fire normale de telefon sau cablu normal de televiziune.

n fine, sistemul "Power line communication" (PLC) se bazeaz pe reeaua de curent electric, att cea de nalt ct i cea de joas tensiune, care practic ajung la orice loc din lume.

1.2.3 Clasificare dup extindere

Reelele de calculatoare se mpart dup extinderea lor n urmtoarele tipuri: LAN, MAN, WAN i, ceva mai nou, PAN. Reelele relativ mici, de exemplu cu cel mult cteva sute de calculatoare n aceeai cldire legate ntre ele direct, se numesc Local Area Network (LAN). O reea de tip LAN dar fr fir (prin unde radio) se numete WLAN (Wireless LAN). Reele de mare ntindere geografic, de exemplu ntre 2 orae, pe o ar, un continent sau chiar pe ntreaga lume, se numesc Wide Area Network (WAN). Reelele de tip WAN au fost iniial foarte costisitoare. Numai companiile mari i puteau permite un WAN particular. La ora actual ns, cele mai multe conexiuni de tip WAN folosesc ca mijloc de comunicaie Internetul - acesta este universal i public, deci nu foarte controlabil de ctre un utilizator, n schimb ns foarte convenabil ca pre. n sfrit, PAN nseamn Personal Area Network - o reea de foarte mic ntindere, de cel mult civa metri, constnd din aparatele interconectabile din apropierea unei persoane, cum ar fi o imprimant sau un scanner, sau chiar aparatele pe care o persoan le poart cu sine, ca de exemplu un telefon mobil sau un smartphone, un player MP3 sau un aparat de navigaie GPS portabil.Reele personale (Personal Area Network)

Un Personal Area Network (PAN) este o reea de calculatoare folosit pentru comunicarea ntre cteva mici calculatoare sau i aparate multifuncionale inteligente (smart), apropiate unele de altele. Exemple de dispozitive care sunt folosite n reeaua de tip PAN sunt imprimantele, aparatele de fax, telefoanele mobile, Personal Digital Assistant (PDA-uri), scanere, aparate de poziionare i navigaie GPS, playere "inteligente" i altele. Raza de aciune a reelelor PAN este aproximativ de la 6-9 metri. Reelele PAN pot fi conectate cu magistrale USB i FireWire. Cu ajutorul unor tehnologii ca IrDA (unde infraroii) i Bluetooth (unde radio) se pot crea i reele de tip Wireless PAN (reele PAN fr fir).Reele locale (Local Area Network)

Un LAN este o reea care acoper o zon geografic restrns, cum ar fi la domiciliu, birou, sau o cldire. Reelele LAN curente sunt bazate pe tehnologia Ethernet. De exemplu, o bibliotec va avea o conexiune prin fir sau de tip Wireless LAN pentru a interconecta dispozitive locale (ex.: imprimante, servere) i pentru a accesa Internetul. Toate calculatoarele din bibliotec sunt conectate prin fir de reea de categoria 5, numit UTP CAT5 cable, ruleaz protocolul IEEE 802.3 printr-un sistem de dispozitive interconectate care eventual se conecteaz i la Internet. Cablurile care duc spre server sunt de tipul numit UTP CAT5e enhanced cable; ele suport protocolul IEEE 802.3 la o vitez de 1 Gbit/s.n prezent tehnologia Ethernet sau i alte tehnologii LAN conforme standardului IEEE 802.3 opereaz la viteze de peste 10 Mbit/s. Aceasta este rata de transfer teoretic maxim. IEEE are ns proiecte de dezvoltare a standardelor de 40 i chiar 100 Gbit/s.

Reea academic (Campus Area Network)

Un Campus Area Network (CAN) este o reea de LAN-uri interconectate, asemntoare cu cea de tip MAN, dar ea se extinde pe o zon geografic limitat, de exemplu a unei universiti.

n cazul unei universiti o reea CAN poate face legtura ntre diferite cldiri ale campusului: departamentele academice, biblioteca universitar, cminul studenesc. CAN este ca extindere n general mai mare dect reelele locale LAN dar mai mic dect WAN. Reelele CAN au fost create cu scopul de a facilita studenilor accesul liber la reeaua Internet i la resursele universitii.

Reea metropolitan (Metropolitan Area Network)

Reelele metropolitane (MAN) sunt reele de mare extindere care de obicei mpnzesc orae ntregi. Aceste reele folosesc pentru legturi cel mai des tehnologii fr fir (wireless) sau fibr optic.

Reelele metropolitane MAN la rndul lor depind de canalele de comunicaii, i ofer un transfer moderat pn la transfer nalt de date. Reeaua MAN n cele mai frecvente cazuri este proprietatea unui singur operator (companie), dar reeaua este folosit de ctre mai multe persoane i organizaii. Reelele MAN mai pot fi deinute i conduse ca utiliti publice.

Implementarea reelelor metropolitane MANUnele tehnologii folosite pentru aceste scopuri sunt ATM, FDDI i SMDS. Dar aceste tehnologii vechi sunt n procesul de substituire de ctre reele Ethernet bazate pe MAN, ex: Metro-Ethernet. Reelele MAN, la fel ca multe reele LAN, au fost construite fr fir datorit folosirii microundelor, undelor radio, sau a undelor laser infraroii. Multe companii dau cu chirie sau nchiriaz circuitele de la transportatori publici (din cauza costului ridicat al tragerii unui cablu prin ora). Standardul actual de comunicare al reelelor metropolitane este "Distribuite Queue Dual Bus", DQDB. Acesta este specificat n standardul IEEE 802.6. Folosind DQDB, reelele pot avea o ntindere de peste 50 km i pot opera la viteze de la 34 pn la 155 Mbit/s. Printre primii care au creat reele MAN au fost companiile Internet peering points, MAE-West, MAE-East i Sohonet media network.

Reea de arie larg (Wide Area Network)

WAN desemneaz tipul de reele de transport de date care acoper zone geografice mari i foarte mari (de ex. de la un ora la altul, de la o ar la alta, de la un continent la altul), i folosesc de multe ori facilitile de transmisiuni de date de la transportori publici (ca de ex. companiile de telefonie). Tehnologiile WAN funcioneaz n general la nivelele inferioare ale modelului de referin OSI: physical layer, data link layer i network layer.

Reea global (Global Area Network)

Specificaiile reelei globale (GAN) au fost n curs de dezvoltare de ctre multe grupuri de specialiti. n general, reeaua global GAN definete un model de asigurare a comunicaiilor mobile ntre un numr arbitrar de reele WLAN, zone de acoperire prin satelit, etc. n proiectul IEEE 802.20, IEEE a stabilit standardele pentru reeaua terestr GAN, valabile din iunie 2008.

Internetworking

Tehnicile de internetworkig (n sens de inter-networking, i nu internet-working) conecteaz ntre ele dou sau mai multe reele sau segmente de reea, folosind dispozitive ce opereaz la nivelul 3 al sistemului de referin OSI, cum ar fi un ruter. Orice interconexiune ntre reele publice, private, comerciale, industriale sau guvernamentale poate fi numit "internetworking".

n practica actual, reelele interconectate folosesc nivelul Internet Protocol (IP). Exist trei tipuri de reele internetwork, n funcie de cine le administreaz i cine are acces la ele:

intranet

extranet

Internet

Reelele de tip intranet i extranet pot avea sau nu i acces la Internet. Dac ele sunt conectate la Internet, atunci ele trebuie s fie protejate mpotriva accesului neautorizat din Internet. Internetul nu este considerat parte constituent a unui intranet sau extranet. Totui el poate servi drept cale de acces la unele poriuni ale extranet-urilor.

Capitolul 2 - HTML i site-ul web2.1 Ce este un site web?

Noiunea site web provine din expresia englez web site i desemneaz o grup de pagini web multimedia (coninnd texte, imagini fixe, animaii .a.), accesibile n Internet n principiu oriicui, de obicei pe o tem anume, i care sunt conectate ntre ele prin aa-numite hiperlinkuri. Diversele site-uri web pot fi create de ctre o organizaie, o persoan particular, instituii publice etc. Noiunea apare n limba romn scris sub trei forme (fr a exista o poziie oficial care s o favorizeze pe vreuna dintre ele): sit, site (ca n limba englez) i sait (propus de lingvistul George Pruteanu)[14].

De obicei un site web este administrat (creat, ntreinut i actualizat) de ctre un aa-numit webmaster, dar exist i alte posibiliti:

site-ul web se actualizeaz automat i permanent pe baza unei baze de date;

paginile sale se creeaz n mod dinamic i automat n funcie de aciunea utilizatorului n cadrul unei aplicaii web;

site-ul web se creeaz i e administrat chiar de ctre utilizatorii si.La nceputurile Internetului fiecare site web se accesa prin indicarea adresei sale numerice specifice (adresa IP), de ex. 155.284.317.027. Ulterior pentru site-urile web s-au introdus i numele de domenii, care permit indicarea adresei respective n mod mult mai comod, prin cuvinte sau nume uor de reinut, ca de exemplu www.wikipedia.org. Adresele de site-uri web trebuie s fie clar stabilite, unice n lume i chiar garantate pentru posesorul respectiv.Un site web este alctuit de regul din mai multe pagini web. O pagin web este un document creat cu ajutorul limbajului de marcare HTML i (opional) limbaje de programare cum ar fi PHP, ASP .a. fiind accesibil vizitatorilor prin intermediul protocolului HTTP, care transfer informaia de la server la browser. Pagina web se numete aa deoarece, afiat pe un monitor, ea se aseamn cu o pagin de ziar: de obicei paginile web au o lime care ncape n ntregime pe ecran. n schimb, pagina poate fi chiar mult mai nalt (adnc) dect nlimea ecranului, ea putnd fi totui uor afiat cu ajutorul funciilor normale ale mausului i browserului folosite, prin "tragere" n sus i n jos. De asemenea, un site web poate fi vizualizat pe orice dispozitiv conectat la Internet capabil s afieze informaii prin intermediul protocolului HTTP (unele telefoane mobile, PDA-uri, etc.).

Un site alctuit din mai multe pagini are de obicei o pagin iniial sau principal numit index, de la care pleac legturi ctre paginile interioare, secundare. Structurile i schemele de navigare din interiorul site-urilor web sunt foarte diferite, n funcie de scopurile, dorinele i posibilitile ofertantului de informaii. De obicei acest index este chiar pagina de start a site-ului, pe care ofertantul de informaii web o face cunoscut la public drept punct de plecare pentru ntregul site web al su.

Site-urile web se pot clasifica dup o mulime de factori, dar principalul factor rmne subiectul de activitate (sau coninutul) site-ului. Din punct de vedere tehnologic un site web poate fi alctuit din orice tipuri de date i informaii statice, camere de discuii, produse i servicii de vnzare, anunuri, formulare de completat online, sunete digitalizate, clipuri video, imagini statice i animate, efecte speciale, meniuri dinamice i multe, multe altele. Vorbind la un nivel mai nalt, subiectul (tema) unui site web poate fi: un aa-numit blog, portal web, catalog web, magazin virtual, banc, universitate virtual, bibliotec, enciclopedie virtual, revist web, ziar web i aproape orice altceva.

Dac la nceput nu s-a pus accent prea mare pe latura estetic, n zilele de azi se acord o importan din ce n ce mai mare nu numai coninutului de informaii al unui site web, dar i esteticii, dinamicii i atractivitii lui.

La ora actual Internetul conine milioane de pagini web, pe cele mai variate subiecte i limbi. n octombrie 2006, Netcraft, o companie de monitorizare a Internetului care produce statistici despre Internet nc din anul 1995, a anunat c n web exist 101.435.235 site-uri, fiecare cu nume de domeniu propriu unic (fa de 18.000 site-uri n august 1995).

HTML sau HyperText Markup Language este, aa cum o sugereaz i definiia, un limbaj de marcare pentru hypertext. HTML este un limbaj de marcare i nu un limbaj de programare precum C, C++, VisualBasic, etc.

Hipertext se refer la modalitatea n care se fac legturile intre diferite documente HTML. n fapt, hipertext trebuie neles ca un text mai profund dect un text normal. De exemplu, o pagin de hypertext nu este doar o simpl pagin de text. Ea este o pagina care, pe lng textul propriu zis, mai conine i legturi (hiperlegturi) ctre alte texte care abordeaz acelai subiect ca i cel tratat n pagina de unde se fac legturile (hiperlegturile).Astfel vom constata c, pentru un subiect oarecare, avem la dispoziie o documentaie impresionant ce poate fi accesat de la o simpl pagin de hipertext (prin intermediul hiperlegturilor). Datorit acestor trimiteri ctre alte texte constatm c textul iniial are o profunzime mult mai mare, dect ar avea un text normal care este limitat doar la ceea ce se vede[3].

S presupunem c avem un document scris cu un editor de texte precum Word, Wordpad sau orice alt editor mai performant. Ca orice document, el va conine mai multe elemente cum ar fi: un titlu, un paragraf sau poate chiar un tabel. Poziionarea n pagin a textului se face cu ajutorul tastaturii. Un browser de internet (Internet Explorer, Firefox, Opera, Chrome) nu poate citi dect fiiere HTML, adic acele fiiere cu extensia .htm sau .html. Un asemenea browser nu poate afia corect elementele unui text, adic nu poate afia un titlu sau un paragraf, dect dac i se sugereaz acest lucru cu ajutorul unor comenzi.

n concluzie, un fiier HTML va conine pe lng textul care dorim s fie afiat n fereastra browser-ului i elemente (tag-uri) care marcheaz textul respectiv, sugernd n acest fel browser-ului care este titlul documentului, care este paragraful sau care este tabelul.

Acest limbaj de marcare permite realizarea de:

documente independente de platform (care s poat fi citite indiferent de tipul calculatorului utilizat sau de sistemul de operare)

legturi la alte documente din reea (locale sau de pe alte maini)

grafica, sunet i imagini video

interactivitate ntre cititorul paginii i aplicaia realizat de autor (formulare, chestionare)

introducerea de mici programe executabile (appleturi Java).Limbajul HTML a ajuns astzi la versiunea 5.0, dar nu toate navigatoarele implementeaz ultima versiune sau o implementeaz parial. De asemenea, imaginea unui document difer (uneori semnificativ) de la un browser la altul. Realizatorul unei publicaii Web trebuie s in seama de toate diferenele dintre navigatoare i s creeze un document care poate fi citit indiferent de platform. Publicaia trebuie s aib i o versiune "n mod text" pentru acei utilizatori care folosesc browsere "negrafice" (cum ar fi lynx , folosit n sisteme Unix).

Un document HTML poate fi scris ntr-un editor ASCII i vizualizat cu un browser Web sau ntr-un editor specializat de pagini Web. Pentru nceptori este recomandat s foloseasc un editor ASCII (Notepad, de exemplu) pentru a se deprinde cu utilizarea marcajelor. In plus, editoarele specializate creeaz pagini nu tocmai "curate", ele introducnd n sursa diverse coduri specifice.

Specificaiile HTML sunt dictate de World Wide Web Consortium (W3C)[9].

2.2 O scurta istorie a HTML-ului

HTML a fost iniial dezvoltat de ctre Tim Berners-Lee n timp ce era la CERN i popularizat de ctre browser-ul Mosaic dezvoltat de NCSA. n timpul anilor 1990 a nflorit odat cu creterea exploziv a Web-ului. n acest timp, HTML-ul a fost extins ntr-un numr de moduri. Web-ul depinde de autorii de pagini Web i vendori mprind aceleai convenii pentru HTML. Aceasta a motivat lucrul n comun la specificaiile pentru HTML[3].

Cei mai muli oameni sunt de acord c documentele HTML ar trebui s lucreze bine peste diferite browsere i platforme. Obinerea interoperabilitii micoreaz costul pentru furnizorii de coninut pentru c ei trebuie s dezvolte numai o versiune a unui document. Dac efortul nu este fcut, exist un risc mult mai mare ca Web-ul s involueze ntr-o lume de formate incompatibile proprietare, n final reducnd potenialul comercial al Web-ului pentru toi participanii.

Informaii despre versiunea HTML

Un document HTML valid declar ce versiune de HTML este utilizat n document.

HTML 4.01 specific[5] trei DTD-uri, aa c autorii trebuie s includ una din urmtoarele declaraii de tip ale documentului n documentele lor. DTD-urile difer prin elementele pe care le suport.

DTD-ul Strict HTML 4.01 include toate elementele i atributele care nu au fost depite sau care nu apar n documentele frameset. Pentru documentele care utilizeaz acest DTD, se folosete aceast declaraie de tip a documentului:

DTD-ul Tranzitional HTML 4.01 include tot ce exist n DTD-ul strict plus elementele i atributele depite (cele mai multe care au de-a face cu prezentarea vizual). Pentru documentele care utilizeaz acest DTD:

DTD-ul Frameset HTML 4.01 include tot ce exist n DTD-ul tranzitional plus frame-urile. Pentru documentele care utilizeaz acest DTD:

URI-ul din fiecare declaraie de tip a documentului permite agenilor utilizator s descarce DTD-ul i seturile de entiti care sunt necesare. Urmtoarele URI-uri (relative) se refer la DTD-uri i seturi de entiti pentru HTML 4:

"strict.dtd" -- DTD-ul strict implicit

"loose.dtd" -- DTD-ul liber

"frameset.dtd" -- DTD-ul pentru documente frameset

"HTMLlat1.ent" -- entiti Latin-1

"HTMLsymbol.ent" -- entiti simbol

"HTMLspecial.ent" -- entiti speciale.Legtura ntre identificatori publici i fiiere poate fi specificat cu un fiier catalog utiliznd formatul recomandat de Oasis Open Consortium. Ultimele dou litere ale declaraiei indic limba DTD-ului. Pentru HTML, aceasta este ntotdeauna engleza ("EN").

2.3 Structura unui document HTML

Exemplu de cod HTML:

PRIMULDOCUMENT

PRIMULEXEMPLU

Acestaesteunparagraf

Marcajul

Orice document HTML trebuie s nceap i s se termine cu marcajul , declarnd astfel c documentul respectiv este de tip HTML. Este primul lucru din document, iar perechea sa de nchidere este ultimul lucru indiferent de ce conine documentul HTML; el trebuie s conin obligatoriu aceste marcaje. Perechea de marcaje arata ca n exemplul de mai sus. Marcajul

Eticheta HEAD definete un antet de document HTML. Antetul conine mai degrab informaii despre document dect informaii care vor fi afiate n document. Browser-ul web nu afieaz informaia din antet, cu excepia textului coninut de eticheta TITLE.

Marcajul

Mai exista un ultim marcaj obligatoriu, anume . Dup cum ai observat atunci cnd ai navigat pe Web, browserul Web afieaz ntotdeauna un titlu pentru fiecare document ntlnit. Titlul afiat este preluat din coninutul marcajului al documentului HTML original. Acest titlu este de obicei afiat imediat deasupra casetei URL sau Location din partea superioar a ferestrei programului de explorare dei unele versiuni de programe permit utilizatorului s inhibe afiarea URL-ului.Marcajul

Eticheta BODY specific principalul coninut al unui document. Tot coninutul care dorim s apar n pagina web trebuie pus ntre etichetele i . Eticheta BODY are atribute care permite s specificm caracteristicile documentului. Se poate specifica[2] culoarea de fundal sau o imagine pentru a o folosi ca fundal pentru fereastra n care documentul este afiat, culoarea de text implicit, culoarea legturii active, culoarea legturii nevizitate, culoarea legturii vizitate, aciunile care s se ntmple atunci cnd documentul termin de ncrcat sau descrcat etc.

BACKGROUND="bgURL" specifica o imagine care va fi afiat n fundalul documentului. Valoarea URL poate sa fie absolut (de exemplu, "http://www.yourcompany.com/images/ image1.htm") sau relativ (de exemplu, "images/image1.gif"). Imaginea este repetat pentru a umple fereastra sau ntreg cadrul unde documentul este afiat.

BGCOLOR="color" stabilete culoarea fundalului.

TEXT="color" stabilete culoarea normal a textului (cnd textul nu este link). LINK="color" stabilete culoarea implicit a unui link din document. Un link nevizitat este un link care nu a fost fcut click pe el.

ALINK="color" specific culoarea care se schimb cnd dm click pe un link. Link-ul vizitat se schimb n culoarea VLINK daca el a fost specificat; altfel se schimb n culoarea link-ului vizitat dat implicit de browser.

VLINK="color" specific culoarea de text a link-ului vizitat n document.

ONLOAD="loadJScode" specific codul Java Script care se execut cnd documentul este ncrcat.

ONUNLOAD="unloadJScode" specific codul Java Script care se execut cnd documentul este descrcat.

ONFOCUS="focusJScode" specific codul Java Script care se execut cnd fereastra n care documentul este afiat a primit evenimentul onFocus, indicnd cnd fereastra s-a focalizat.

ONBLUR="blurJScode" specific codul Java Script care se execut cnd fereastra n care documentul este afiat a primit evenimentul onBlur, indicnd cnd fereastra a pierdut focalizarea.

Formatarea textului i caracterelor

Formatarea textului

Avnd cunotine despre titluri, paragrafe, liste, linii orizontale, precum i alte elemente care intervin n lucrul cu acestea (cum ar fi tagul BR, entitatea nbsp, etc), se poate realiza partea cea mai importanta a unui document HTML. Cu alte cuvinte, se poate realiza un document care s cuprind titluri, paragrafe, liste, etc.

Elementele discutate n continuare permit finisarea documentului, acestea acionnd asupra modului de apariie a textului n document (este vorba de cuvinte sau fraze ntregi evideniate prin metode precum scrierea mai groas a acestora, fie prin scrierea cu litere cursive, fie prin subliniere, etc). Elementele HTML care realizeaz aceste lucruri se numesc elemente de formatare a textului. Elementele de formatare, dei au rezultate vizuale identice, se mpart n doua categorii: elemente de formatare fizic i elemente de formatare logic.

Elemente de formatare logic a textului

Elementele de formatare logic sunt numite prin cuvinte sau iniiale ale unor cuvinte (din limba englez) care nu au legtura cu modul n care va fi afiat textul cuprins ntre tag-urile lor dar au o strns legtur cu ceea ce vrea s sugereze textul n cauz. De exemplu, elementul CODE "sugereaz" c textul cuprins ntre tagurile i reprezint un cod de program (ca de exemplu C, JavaScript, etc) dar numele acestui element nu face nici o referire la modul n care va arta textul n cauz. Acest text va fi scris cu caractere typewriter similare mainii de scris, cunoscut i sub numele de text monospaiat.

Ceea ce trebuie reinut este c elementele de formatare logic sugereaz ce reprezint textul cuprins ntre tag-urile acestora i nu spune nimic despre modul n care va arta textul n fereastra browser-ului.

Elementele de formatare logic sunt prezentate mai jos.

elementul CITE este utilizat pentru a sugera autorul sau sursa unui citat, precum i orice referire la alte surse. Poate indica un titlu de carte, ziar, articol, precum i numele autorului din care s-a redat un citat:

Codul sursa:Site-ul Mediafax a publicat articolul Internetul

Afisare:Site-ul Mediafax a publicat articolul Internetul

indic o mic poriune de cod de program. Este utilizat pentru poriuni mici. Pentru poriuni mari se utilizeaz PRE. Textul cuprins ntre taguri va fi scris cu caractere typewriter (TT).

Codul sursa:Trebuie scrisa expresia void main(void)

Afisare:Trebuie scrisa expresia void main(void)

indica definiia unui termen

Codul sursa:OPERA este un browser de web

Afisare:OPERA este un browser de web

este utilizat pentru a scoate n eviden o poriune de text care indic ceva important. Vor fi utilizate caractere cursive (italic).

Codul sursa:Trebuie retinut un singur lucru: JavaScript nu are legatura cu JAVA

Afisare:Trebuie retinut un singur lucru: JavaScript nu are legatura cu JAVA

elementul KBD indic ce trebuie s tasteze (s introduc de la tastatur) un utilizator.

Codul sursa:Pentru a arhiva fisierul tasteaza arj urmat de ...

Afisare:Pentru a arhiva fisierul tasteaza arj urmat de ...

este utilizat pentru a indica anumite litere. Acestea ar trebui s fie un grup de litere ce trebuie identificate n mod precis.

Codul sursa:Literele AEIOUAI sunt vocalele limbii romane.

Afisare:Literele AEIOUAI sunt vocalele limbii romane.

este utilizat pentru a evidenia un text de maxim importan.

Codul sursa:Trebuie retinut un singur lucru: nu intra in panica!

Afisare:Trebuie retinut un singur lucru: nu intra in panica!

Observaie: elementele de formatare (att fizic, ct i logic) necesit prezena tag-ului de sfrit.Elemente de formatare fizic a textului

Codul sursa:Acest text este Italic(cursiv) Afisare:Acest text este Italic(cursiv) afieaz textul n fontul teletype (neproportional). Este utilizat, n general, pentru prezentarea unei ieiri de tip listing (clasic) de calculator. Nu produce o rupere de rnd. Codul sursa:Acest text este TeleType Afisare:Acest text este TeleType subliniaz textul coninut. Nu provoac trecerea pe un rnd nou.Sublinierea cu tagul U poate produce, mpreun cu utilizarea unor culori, confuzii cu legturile utilizate ntr-un hipertext. Codul sursa:Acest text este Underline Afisare:Acest text este Underline produce "tierea" cu o linie a textului coninut (utilizat de obicei pentru producerea unor exemple negative: aa nu se face). Nu are loc rupere de rnd. Codul sursa:Acest text este Strike Afisare:Acest text este Strike afieaz textul din container cu dimensiune mai mare dect fontul de baz. Unele editoare HTML convertesc tagul BIG n text. Tagul nu produce o rupere de rnd. Codul sursa:Acest text este Big Afisare:Acest text este Big afieaz textul cu o dimensiune mai mic dect textul nconjurtor. Nu produce rupere automat de rnd. Codul sursa:Acest text este Small Afisare:Acest text este Small mut textul selectat mai jos dect linia de baz a textului precedent i aplic un font mai mic (face trecerea n indice inferior). Nu produce rupere automat de rnd. Codul sursa:Acest text este SUBscript Afisare:Acest text este SUBscript muta textul selectat mai sus dect linia de baz a textului precedent i aplic un font mai mic (face trecerea n indice superior). Nu produce rupere automat de rnd.Codul sursa:Acest text este SUPrascript Afisare:Acest text este SUPrascriptElemente de tip blocStructura unui document poate conine mai multe elemente cum ar fi: un titlu sau antet, unu sau mai multe paragrafe, un tabel, un citat, etc. n cazul HTML exist echivalentul acestor elemente i care poart tot denumirea de elemente. Denumirea acestor elemente reprezint, de regul, prescurtarea (n unele cazuri doar iniialele) de la forma n limba englez a elementului respectiv. Unul dintre acestea este elementul P (paragraph) care indica un paragraf. La ntlnirea marcajului de paragraf, navigatorul las cteva rnduri libere ntre paragraful care tocmai s-a terminat i paragraful care tocmai ncepe, deci nu se las un "alineat" la nceputul paragrafului aa cum se ntmpla cu tipriturile clasice. Dac nu se folosete marcajul n forma container, paragraful se va termina la ntlnirea unui alt marcaj . Exemplu: Acesta este un paragraf Acesta este un alt paragraf si, prin urmare, va fi scris pe un rind nou. rezultat: Acesta este un paragraf Acesta este un alt paragraf si, prin urmare, va fi scris pe un rind nou. Aa cum se vede din exemplul de mai sus, pentru a indica c o anumit poriune din text trebuie s fie afiat ca un paragraf folosim elementul P, element ce este format din 2 tag-uri. Primul tag, care este i tagul de nceput, este format din dou paranteze unghiulare () ntre care se pune elementul dorit (n cazul nostru P). Tagul de sfrit are n plus fa de tag-ul de nceput i un slash (/) dup prima parantez unghiular. Tag-ul de nceput indica browser-ului unde ncepe elementul respectiv i tag-ul de sfrit unde se termin acel element. De regul, elementele sunt formate din aceasta pereche de tag-uri, dar exist i elemente care nu au dect un singur tag. Acesta este un rand
Acest text va fi scris pe randul urmator rezultat: Acesta este un rand Acest text va fi scris pe randul urmatorElementul DIV dispune de mai multe atribute dar numai atributul ALIGN face obiectul prezentei discuii. Restul atributelor sunt utilizate n combinaie cu CSS.Toate elementele plasate ntre tagurile i vor fi aliniate conform valorii atributului ALIGN. Valorile acestui atribut pot fi: left, center, right i justify. Atunci cnd redm un citat mai mare, vom dori ca acesta s fie pus n eviden fa de restul textului cuprins n pagin. Pentru a realiza acest lucru, exista elementul BLOCKQUOTE care va reda un citat separat de restul textului. Citatul cuprins ntre tag-urile i va fi plasat n pagin la distan egal att fa de marginea stnga ct i fa de marginea dreapta a documentului. Atributele elementului BLOCKQUOTEElementul BLOCKQUOTE are un singur atribut (CITE) a crui form general este: CITE="URI". Acest atribut ar trebui s fie afiat imediat dup terminarea citatului, pentru a sugera sursa citatului n cauz.Pentru a scrie sursa citatului, putem utiliza elementul CITE (a nu se confunda cu atributul CITE) care are ca rezultat scrierea textului sub form nclinat. Acest element este utilizat n astfel de situaii, dar i pentru a evidenia titluri de publicaii, de carte, etc. Acest element poate fi inclus i n alte elemente HTML. Mai jos am utilizat elementul CITE pentru a nominaliza autorul citatului de la nceputul capitolului.Care este sursa de inspiratie folosita pentru tutorialele html? Cursul de programare web la Un document poate conine unul sau mai multe titluri. Pentru aceasta HTML dispune de elementul H (heading). Forma general este: TITLU unde nr este un numr ce poate avea valori de la 1 la 6 n funcie de importana care o are titlul respectiv n cadrul documentului. H1 va duce la realizarea de titluri foarte evidente iar H6 va reprezenta forma cea mai puin evident. Modul de afiare al titlurilor difer n funcie de fonturile utilizate (setul de caractere care este utilizat pentru afiarea paginii n fereastra browser-ului). De exemplu chiar dac utilizm H2 pentru realizarea titlurilor, modul de prezentare poate diferi daca sunt utilizate fonturi diferite.Pentru alinierea pe orizontal se folosete atributul ALIGN iar valorile pe care le poate lua sunt left, right, center i justify. Mai jos este un exemplu de titlu centrat n pagin. Acest titlu este centrat Atenie: utilizarea elementului H trebuie fcut cu discernmnt. Ca regul general nu este estetic s intercalm n sens invers dou titluri de mrimi diferite, adic s avem n pagin o succesiune de titluri de forma H2, H1, H5. Ele trebuie utilizate n ordinea importanei care o sugereaz i este corect s le folosim ntr-o ordine descresctoare. ListeListe de definiii Listele de definiii, denumite i liste glosar, sunt diferite de celelalte liste. Un element al unei liste de definiii are dou pri: termenul de definit i definiia acestuia. Lista de definiii este introdus prin marcajul .... Termenii definii sunt inserai prin marcajul vid , iar definiiile prin marcajul vid .Scrierea unei liste de definiii se face astfel: Termenul 1 Definitia 1 Termenul 2 Definitia 2 Listele de definiii sunt formatate de navigatoare prin spaierea diferit a termenului i a definiiei; ntre termen i definiia sa este lsat o linie.Liste neordonate Listele neordonate sunt introduse prin marcajul ..., iar elementele din list cu marcajul vid (acest marcaj se folosete i pentru introducerea elementelor unei liste ordonate). Elementele unei liste neordonate sunt afiate pe rnduri separate, indentate fa de restul textului i avnd n stnga un simbol grafic ce depinde de navigatorul utilizat (cerc, bulina). O lista neordonat poate fi introdus astfel: Primul element Al doilea element Al treilea element Exist diverse atribute care confer control mai mare asupra modului de marcare a elementelor unei liste neordonate, prin specificarea tipului dorit pentru fiecare element. Se folosete atributul TYPE n marcajul ce introduce un element n list (). Valoarea poate fi:CIRCLE-afiseaza un cerc in fata elementului DISC-afiseaza o "bulina" (optiune implicita) SQUARE-afiseaza un patrat Liste ordonate Listele ordonate difer de cele neordonate doar prin faptul c elementele acestora sunt numerotate. Marcajul utilizat este .... Listele ordonate pot avea o numerotare diferit, n funcie de opiunea specificat de utilizator n atributul TYPE al marcajului , dup cum urmeaz: TYPE=1 este opiunea implicita (1,2,3...) TYPE=a - a,b,c... TYPE=A - A,B,C... TYPE=i - i,ii,iii... TYPE=I - I,II,III... De asemenea, o list poate fi numerotat ncepnd de la o anumit valoare prin utilizarea atributului START=valoare_de_start, care apare tot n cadrul marcajului . Liste meniu si directorMeniurile sunt liste simple de elemente sau scurte paragrafe care nu sunt inserate cu ajutorul numerelor sau bulinelor, afiarea fcndu-se prin indentare diferit fa de restul textului sau printr-o formatare diferit.Listele director sunt simple niruiri de elemente i sunt indentate i formatate n coloane de ctre navigatoare. Listele meniu sunt introduse prin marcajul ..., iar listele director prin .... Elementele sunt introduse tot prin .Referine Printr-o legtur ntr-un document HTML nelegem marcajul locului de unde se poate efectua trecerea (cuplarea, conectarea) la un alt document sau la o nou locaie din documentul curent. Un loc marcat mai este denumit ancorare.Marcajele pot fi de dou tipuri: legturi ctre alte locaii: acestea se vor caracteriza prin textul legturii (vizibil n documentul afiat pe ecran) i prin adresa la care se poate efectua un salt; textul legturii va aprea pe ecran subliniat, ntr-o culoare diferit de cea a textului adiacent; adresa int a legturii apare (daca nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci cnd pointerul mouse-ului este pe textul legturii; definiri de nume care au doar rolul de a introduce inte pentru legturi; nu sunt difereniate n documentul afiat pe ecran. Marcajul utilizat pentru ambele tipuri de legturi este , A provenind de la anchor. n multe cazuri este nevoie s se creeze legturi ntre seciunile aceluiai document. Spre exemplu, atunci cnd documentul este o carte, un tutorial sau un curs vom simi nevoia crerii unui cuprins pentru fiecare capitol al documentului. Se va crea o legtur ntre fiecare tem din cuprins i seciunea din document care trateaz acea tem. Crearea legturilor interne se realizeaz prin utilizarea atributului NAME al tagului , care stabilete un cuvnt cheie ce identific unic paragraful int: Paragraf tinta Folosirea tagului cu atributul NAME poart numele de ancor. Atunci cnd se va face referin la aceasta ancor, documentul va fi derulat n fereastra navigatorului pn cnd textul dintre ajunge n partea de sus a ecranului. Ancorele nu sunt afiate diferit fa de restul documentului ca n cazul legturilor. Referirea la o ancor n documentul de la care pleac legtur se face n acelai fel ca n cazul referirii unui ntreg document adugndu-se simbolul # urmat de cuvntul cheie din ancor: Text explicativ Cele mai importante funcionaliti n HTML5Fiecare versiune de HTML a ncercat s reflecte consensul mai mare dintre juctorii industriei n aa fel nct investiia fcut de furnizorii de coninut s nu fie risipit i ca documentele lor s nu devina necitibile ntr-o scurt perioad de timp. Versiunea 5 a HTML vine cu noi elemente i funcionaliti descrise pe scurt n continuare.Stocarea offline a informaiilor. Cred c aceasta e cea mai important caracteristic. Permiterea navigrii paginilor web offline. Bineneles aceasta este deja posibil prin intermediul Google Gears dar cu ajutorul Html 5 va fi o soluie nativ n browser. Acesta este primul pas serios spre a diminua prpastia dintre desktop i Web i este viitorul Aplicaiilor Web.HTML5 i DOM. Spre deosebire de versiunile anterioare de HTML i XHTML, care sunt definite n termeni de sintaxa, HTML 5 este definit n termeni de Document Object Model (DOM), reprezentarea arborescent folosit de ctre browser pentru a reda documentul.Geolocation Geolocation API gsete locaia curent a utilizatorului. API-ul, n cazul n care browser-ul accept acest lucru i va acorda acces la aplicaii web, ntoarce latitudinea, longitudinea, altitudinea, viteza i cteva alte detalii. (Dac dispozitivul web nu are GPS, aceste detalii vor fi estimate folosind adresa de IP i ali factori).Video & Audio API-urile audio & video sunt upgrade-uri importante pentru viitor (cum am specificat mai sus).Drag and drop mpreun cu o suit de API-uri JavaScript, HTML 5 vine cu un Drag i Drop API, care aducsuport nativ.Capitolul 3 - Elemente utile pentru dezvoltarea unui site web3.1 ASP / ASP.NETASP (Active Server Page) este primul limbaj de programare server-side dezvoltat de Microsoft. ASP nu este un limbaj de programare n sine ci este soluia oferita de Microsoft pentru a folosi limbaje de programare existente ntr-un context web. Programarea n ASP se face folosind obiecte, care reprezint instane ale unor funcii des ntlnite. Cel mai rspndit limbaj de programare ASP este VBScript (Visual Basic) ns se pot configura i alte limbaje pentru a fi folosite n programarea ASP. Limbajul ASP este de fapt un interpretor i nu un limbaj de sine stttor cum este ASP .NET care se bazeaz pe .NET Framework i este un limbaj compilat. ASP .NET este considerat a fi succesorul limbajului ASP i datorit faptului c folosete tehnologia .NET permite programarea n orice limbaj din suita .NET.ASP .NET ofer mai multe metode de programare, una dintre ele fiind code behind, care permite separarea design-ului unui site de coninut. Astfel, se creeaz un fiier separat n care este scris codul pentru diversele situaii ce pot aprea (pagina se ncarc, utilizatorul a fcut click pe un buton, etc.).ASP .NET ncearc s fac trecerea de la dezvoltarea Windows la dezvoltarea Web prin permiterea crerii de aplicaii web ntr-un mod similar crerii de interfee i programe Windows. Dac controalele introduse ntr-o aplicaie Windows apar pe ecran, cele introduse ntr-o pagin ASP .NET genereaz cod HTML i/sau JavaScript care este apoi trimis ctre browser-ul utilizatorului.Intr-o comparaie ntre limbajul ASP i PHP putem constata c dei ambele sunt soluii gratuite, numrul de faciliti i metode incluse n PHP este mult mai mare dect cel inclus n ASP unde este necesar achiziionarea unor script-uri i modul 3rd party externe contra cost pentru a putea obine aceeai funcionalitate.De asemenea, faptul c ASP i ASP .NET sunt tehnologii proprietare Microsoft implic faptul c acestea trebuie s ruleze pe un sistem cu sistemul de operare Windows instalat. Acest lucru duce la creterea costului unui site deoarece este necesar procurarea unei licene Windows, spre deosebire de sistemul LAMP care poate fi descrcat i folosit n regim gratuit cu rezultate similare sau chiar mai bune.Totui, datorit faptului c tehnologia ASP .NET folosete aceleai principii i metode ca n cazul dezvoltrii unei aplicaii Windows, este uor pentru cineva care are deja cunotine de dezvoltarea de aplicaii Windows s treac la dezvoltarea de aplicaii web fr un efort prea mare.Alt avantaj fa de LAMP l constituie faptul c se folosete un singur framework pentru dezvoltarea de aplicaii pe cnd n cazul LAMP avem de a face cu o multitudine de soluii, putnd fi astfel dificil de a alege sau a configura soluia dorit. 3.2 Java (JavaEE)Java reprezint un limbaj de programare dezvoltat de Sun Microsystems cu aplicaii largi nu numai n dezvoltarea web ci i n aplicaii stand-alone att pentru PC-uri ct i pentru terminale mobile. Compilatorul Java transform codul scris de programator ntr-un cod intermediar care poate fi rulat pe orice sistem care are instalat JVM (Java Virtual Machine). Se asigur astfel o compatibilitate ridicat i o portabilitate a aplicaiilor pentru orice sistem de operare. In web development, Java poate fi ntlnit i ca applet-uri care sunt trimise ctre calculatorul utilizatorului de ctre server i executate ca atare sau sub forma de Java Server Pages (JSP) care ruleaz la server i trimit ctre browser-ul utilizatorului rezultatul. Java este folosit n aplicaii complexe i de obicei de o complexitate ridicat, oferind i o securitate sporit.Deoarece exista foarte muli dezvolttori Java este relativ uor pentru acetia s treac de la dezvoltarea de aplicaii stand-alone la programarea web. Pentru a rula ns un site bazat pe Java, sunt necesare cteva extensii pentru serverul web. Astfel, pentru programul Apache exist extensia Tomcat care permite folosirea Java ca limbaj de dezvoltare pentru site-uri web. Nu toate companiile care ofer hosting ofer ns aceasta extensie sau este oferit contra cost, astfel gzduirea unui site Java este mai dificil dect n cazurile precedente.JavaEE (Enterprise Edition) conine n plus fa de varianta SE (Standard Edition) componente i librarii care adaug posibilitatea rulrii de aplicaii pe un server de aplicaii accesibil din internet.Exista cteva tehnologii bazate pe Java care sunt folosite n aplicaii complexe, cum ar fi Websphere dezvoltat de IBM i Google Web Toolkit dezvoltat de Google. 3.3 AJAX (Asynchronous JavaScript and XML)AJAX reprezint o colecie de tehnici de dezvoltare web folosite pentru crearea de aplicaii web sau de Rich Internet Applications (aplicaii web care au funcii i funcionalitate similar cu aplicaiile de desktop tradiionale). Cu AJAX, aplicaiile web pot primi date de la server n mod asincron n background fr ca acest lucru s se observe n comportarea sau n modul de afiare al paginii.Termenul AJAX a ajuns s reprezinte un grup larg de tehnologii folosite n implementarea de aplicaii web care comunic cu un server n background fr s schimbe starea curent a paginii. Aceste tehnologii sunt: XHTML i CSS pentru prezentare Document Object Model pentru afiarea dinamic i interaciunea cu datele XML si XSLT pentru schimbarea i manipularea datelor Metoda XMLHttpRequest pentru comunicarea asincron JavaScript pentru a uni aceste tehnologii.Aceste tehnologii nu sunt ns singurele acceptate, de exemplu, n loc de JavaScript se poate folosi la fel de bine VBScript sau alte limbaje client-side.Principalele avantaje ale AJAX sunt: In multe cazuri paginile unui site conin coninut comun. Cu metode tradiionale, acel coninut va trebui ncrcat de fiecare dat. Cu AJAX, paginile cer de la server doar coninutul care trebuie actualizat, reducnd astfel banda folosit i timpul de ncrcare. Datorita cererilor asincrone, paginile interactive rspund mai repede la datele introduse de utilizator i seciuni din pagina pot fi rencrcate separat. Se reduce numrul conexiunilor la server.Printre dezavantaje putem enumera: Paginile create dinamic nu sunt incluse n istoria browser-ului, astfel c dac se face click pe butonul Back nu ne vom ntoarce la o stare anterioar a paginii create cu AJAX ci la pagina ncrcat naintea acesteia. Din acelai motiv este dificil de a introduce la pagini favorite astfel de pagini. Datorita faptului ca web crawler-ele nu execut cod JavaScript, trebuie oferite alternative pentru ca aceste pagini s poat fi indexate. Utilizatorii trebuie s permit browser-ului s ruleze cod JavaScript pentru a putea accesa aceste pagini.3.4 JavaScriptJavaScript este un limbaj foarte rspndit de programare web de tip client-side. Are la baz limbajul Java ns a fost gndit s fie mai accesibil i celor care nu sunt familiari cu limbajul Java. De-a lungul timpului s-a ndeprtat de limbajul Java i acum nu mai seamn dect foarte puin cu acesta.Principalele utilizri sunt acelea de a include funcii incluse n pagini HTML cum ar fi: Deschidere de ferestre pop-up cu diverse posibiliti de control asupra acestora Validarea datelor introduse de utilizator pentru a fi siguri c acestea sunt acceptate de ctre server Schimbarea imaginilor la trecerea cu mouse-ul peste ele. Folosite pentru a atrage atenia asupra elementelor importante din site.Deoarece codul JavaScript se execut local, acesta rspunde mult mai repede la aciunile utilizatorului, ns acesta trebuie s permit browser-ului s ruleze cod JavaScript pentru a putea naviga corect pe aceste site-uri. De asemenea, JavaScript poate detecta aciunile utilizatorului, cum ar fi apsarea unei taste, ceea ce HTML clasic nu poate face. In combinaie cu rutine server-side pentru operaiunile delicate, JavaScript poate creste simitor funcionalitatea unui site.JavaScript prezint ns i unele vulnerabiliti datorit faptului c codul este trimis utilizatorului i acesta poate acorda drepturi de scriere de date pe harddisk unui cod ru intenionat. Evident c astfel de privilegii nu trebuiesc acordate unui cod de pe web, ns un utilizator neexperimentat poate face uor aceast greeal, astfel, muli utilizatori prefer s evite JavaScript, setnd browser-ul s nu ruleze astfel de cod.3.5 Google Web ToolkitGoogle Web Toolkit (GWT) este un framework open source dezvoltat de Java care permite dezvoltatorilor s creeze aplicaii AJAX in Java. GWT pune accent pe cod reutilizabil i soluii eficiente la provocrile AJAX cum ar fi management-ul istoriei browser-ului, bookmark-urile i portabilitatea.Dezvoltatorul realizeaz aplicaia n Java, iar cnd este gata compilatorul transform codul n JavaScript care este puternic optimizat.n faza de dezvoltarea a aplicaiei, aceasta este rulat n JVM i abia cnd este finalizat este convertit n cod JavaScript pentru a fi disponibil online.Exista foarte multe extensii i librarii 3rd party care mbuntesc foarte mult performanele acestei platforme. Figura 1 Aspect din mediul Google web toolkit3.6 ColdFusionColdFusion este un limbaj de programare i un server de aplicaii folosit pentru dezvoltarea de aplicaii internet. Este similar cu ASP .NET, Java Server Pages (JSP) sau PHP.Principala caracteristic a sa este limbajul de scripting asociat: ColdFusion Markup Language (CFML) care se compar cu JSP, ASP .NET sau PHP ns are sintaxa similar cu HTML. Totui, aplicaiile ColdFusion se pot realiza i n alte limbaje dect CFML, cum ar fi server-side ActionScript, iar script-urile incluse n site pot fi scrise ntr-un limbaj similar cu JavaScript, numit CFScript.De asemenea, ColdFusion suport aciuni asincrone cum ar fi mesageria instant printr-o interfa gateway.3.7 Web Content Management System (WCMS)Site-urile din ziua de azi folosesc baze de date pentru stocarea coninutului i redarea acestuia. Insa management-ul unei baze de date poate fi dificil pentru cineva neiniiat n domeniul programrii. Administrarea coninutului este un element foarte important n dezvoltarea i mai ales n meninerea funcionalitii unui site. Acest lucru se face cu ajutorul unor soft-uri specializate care se prezint de obicei sub forma unor aplicaii web.Funciile unui sistem WCMS includ: Generarea de template-uri se creeaz template-uri standard (HTML sau XML) care se aplica automat noului coninut sau coninutului existent. Editarea cu uurin deoarece coninutul este separat de prezentarea unui site, editarea acestuia devine mult mai uoar, majoritatea sistemelor incluznd editoare WYSIWYG pentru a permite utilizatorilor s modifice coninutul Adugarea de noi module se permite adugarea de noi module care respecta un ablon standard. Controlul documentelor Timpul de via al unui document poate fi urmrit n toate etapele sale. Virtualizarea coninutului Fiecare utilizator lucreaz cu o copie virtual a unui site web, astfel nct fiecare modificare poate fi mai nti testat nainte s fie prezentat utilizatorilor finali.Exista o multitudine de sisteme att contra cost ct i gratuite. 3.8 WordpressWordPress reprezint cea mai performant i actual platform dedicat publicrii personale.Orientarea sa pe estetic, standarde web i uurina de folosire o fac alegerea numrul 1 printre jurnaliti, scriitori sau bloggeri obinuii, iar faptul c e disponibil gratuit fiind software liber, permite distribuirea i personalizarea sa pe placul tuturor. Platforma WordPress este scris n limbajul PHP, folosind pentru gestionarea bazelor de date sistemul MySQL. Dispune de un sistem de abloane scrise n limbajele HTML i CSS. Avantajele majore prezentate de WordPress sunt simplitatea i numeroasele plugin-uri create de ctre comunitate.3.9 Notepad++Notepad++ este un editor de text gratuit pentru Windows, gzduit la Sourceforge. Programul permite editarea codului surs specific unui numr mare de limbaje de programare, precum C, C++, Pascal, Cobol, HTML, PHP.Faciliti remarcabile sunt: Colorare sintactic pentru 48 de limbaje de programare; Tiprirea color a codului surs (WYSIWYG); Autocompletare = deducerea i ntregirea automat a cuvntului de cod din biblioteca utilizat; Interfa cu mai multe fiiere; Suport pentru expresii regulate; Suport pentru macroinstruciuni.Notepad++ se bazeaz pe motorul Scintilla, fiind programat n C++ i utiliznd Win32 API i biblioteca STL, asigurnd astfel o execuie rapid i un consum redus de resurse.Figura 2 Aspect din mediul de lucru Notepad++3.10 Macromedia Dreamweaver Figura 3 Mediul de lucru DreamweaverFolosirea mediului intranet/ internet i a tuturor elementelor componente ne poate asigura o comunicare eficient, un cadru activ pentru dezvoltarea diverselor abiliti tehnice i teoretice ct i posibilitatea efecturii unei selecii riguroase a tot ceea ce nseamn informaie i mod de utilizare a acesteia. Pachetul Macromedia este ideal pentru realizarea unor pagini de internet deosebit de utile, atractive i pline de interactivitate. Modul de utilizare a instrumentelor grafice pe care le gsim n pachetul Macromedia depinde de interesul fa de mediul web, de scopul pe care vrem s-l urmrim i de asemenea de cunotinele noastre n materie de tehnologie i programare.Interfaa prietenoas a acestui pachet de soft ne d posibilitatea de a utiliza instrumentele sale componente, de la un nivel sczut pana la un nivel ultra-profesional, fiind astfel pe placul oricrui utilizator, satisfcnd cerinele de baz. Pachetul Macromedia pentru realizarea paginilor web cuprinde programe precum: Fireworks (utilizat n spe pentru crearea elementelor active din pagina: butoane, cmpuri i diverse grafice); Freehand (avnd cam aceleai atribute ca Fireworks); Director (un instrument deosebit de util pentru crearea aplicaiilor interactive, utiliznd scriptul lingo (movie script) ca mediu principal de programare, descriind toate instanele si posibilitile de manipulare a frame-urilor) i nu in ultimul rnd Dreamweaver (prin intermediul cruia inseram toate aplicaiile create, fiind ntr-o anumita msur programul de implementare i constituire propriu-zis a paginilor web).Dreamweaver, ca i celelalte programe axate pe crearea i implementarea aplicaiilor complexe, permite lucrul n doua medii: cel de interfa grafic, de editare (in care jonglam grafic cu obiectele din bara de instrumente) i cel de script (in care avem posibilitatea inserrii diverselor coduri pentru completare i creare a unor aplicaii, fiind locul propice lucrului cu anumite subtiliti tehnice). Printre scripturile folosite in implementarea aplicaiilor web, Dreamweaver permite lucrul cu HTML (de baz), PHP, JavaScript (folosit tot mai des n tehnologia paginilor web), ASP VB Script, i CSS (pentru crearea de stiluri i fonturi diferite). De asemenea, softul permite i realizarea unor extensii ale programului, aceasta incluznd si achiziionarea unor versiuni mai noi, precum i utilizarea unor scripturi mai avansate, compatibile ns cu mediul de programare. Dreamweaver Exchange te trimite prin intermediul unui link direct la pagina Macromedia de unde poi achiziiona (prin intermediul unui cont gratuit) diverse widget-uri numai bune pentru a face din pagina web o prezentare deosebit de atractiva a scopurilor si obiectivelor urmarite de aceasta.Dreamweaver permite o foarte mare flexibilitate in utilizarea facilitilor sale i reprezint mediul perfect cu ajutorul cruia poi insera diverse creaii sau aplicaii din ce n ce mai complexe. Cteva dintre aplicaiile ce pot fi inserate din mediul extern sunt: obiecte de tip Flash (texte, butoane, video, imagini swf); obiecte de tip Applet (Java Script); obiecte de tip Active X (ce funcioneaz ca o aplicaie in mediul Windows programat utiliznd de regula: C++, C#, Borland Delphi sau Visual Basic); obiecte de tip Shockwave i alte plugin-uri.Toate acestea se gsesc in meniul principal la Insert/Media. Una dintre primele aciuni ce trebuiesc efectuate in vederea construciei unui site este consultarea proprietilor paginii de baz (indiferent ca este n format html, php, asp, xml opiune ce este selectata la intrarea in program). Aici stabilim culoarea de fundal a site-ului (sau alegerea unei imagini ca background), culoarea si fontul textului, modul de vizualizare in browser paginaie (dup coordonatele in numrul de pixeli) si alte setri legate de modul de afisare a link-urilor si apariie a obiectelor n pagin.Componenta Define Site (de la Site/New Site) este de asemenea esenial pentru alctuirea i plasarea site-ului pe un server de unde i va fi accesat in mod public coninutul. Numele i adresa site-ului sunt primele date ce trebuiesc furnizate iar crearea unei conexiuni server prin ftp sau rds permite lucrul direct pe surs, cu toate acestea nefiind permise operaiuni ca: efectuarea de rapoarte a site-ului sau accesri de link-uri. Conectarea la un server FTP presupune: alegerea tipului de server folosit, numele adresei de pe server, numele fiierului n care vor fi stocate datele, username-ul pentru login i parola. Dreamweaver permite efectuarea diverselor teste pentru verificarea conexiunii si a modului de apariie n fereastra de browser.Atunci cnd se lucreaz concomitent pe mai multe site-uri (aflate pe acelai server sau servere diferite) sau cnd se dorete organizarea paginilor n site, componenta Manage Site intervine cu urmtoarele opiuni: editare, duplicare, tergere, export sau import i creare de site-uri noi. Dup ce am definit site-ul si am fcut conexiunea la un server prin intermediul cruia vom aduga datele paginilor putem consulta n detaliu: bara de instrumente aflat n partea de sus a programului, spaiul de lucru, bara de proprieti a obiectelor incluse in spaiul de lucru, testarea rezultatelor (un spaiu in care ni se permite vizualizarea activitii server-ului la care suntem conectai, validarea modificrilor, testarea link-urilor i alte operaiuni), i componenta timeline (n care urmrim activitatea ce s-a desfurat in vederea construirii site-ului pn la un moment dat).n bara de instrumente, la View, observm c avem posibilitatea de a vizualiza ceea ce adugam in spaiul de lucru n mod cod, design sau chiar ambele, pentru a realiza o mai bun legtura ntre ceea ce programm in mod direct i ceea ce editm, pentru a vedea efectele i a face corecturile, pentru a sistematiza i modifica mai facil coninutul. Spaiul de lucru are posibilitatea poziionrii obiectelor inserate ntr-o manier organizat, profesional prin utilizarea celor dou rigle (vertical i orizontal) astfel nct, imaginea rezultat s fie ct mai precis cu putin din punct de vedere geometric. Consultarea elementelor de vizualizare a stilurilor se face tot din spaiul de lucru prin componenta Visual Aids in care avem posibilitatea selectrii/deselectrii diverselor elemente CSS i a layere-lor, tabelelor, frame-urilor, si altor obiecte vizuale.n spaiul de lucru se pot insera: imagini de diverse tipuri (gif, jpg, jpeg, png); obiecte de tip imagine (imagini rollover se schimb la poziionarea mouse-ului peste acestea, bara de navigaie, i obiecte de tip Fireworks HTML; tabele de date; layere (utilizate pentru poziionarea diverselor obiecte oriunde n spaiul de lucru i fixarea acestora ntr-o poziie aleas, pentru evitarea suprapunerii obiectelor i crearea unui aspect plcut, organizat al ntregii pagini); hyperlink-uri (crearea de link-uri pe text stabilind locaiile i modul de accesare); adrese de e-mail; ancore (utilizate pentru referine, reveniri in cadrul paginii, etc.); data (disponibil in diverse formate); comment-uri si alte componente specializate.La Insert, componenta Form ne d posibilitatea inserrii diverselor obiecte precum: Form (ne ajuta la stabilirea unei forme a continutului paginii); cmp de text (Text Field); spaiu de text (Text Area); butoane de diverse tipuri (Checkbox de tip csua bifat -, butoane radio i in diverse design-uri de tip flash); cmpuri de fiiere; liste si meniuri; cmpuri de imagine; cmpuri ascunse; meniuri de tip Jump (in cadrul crora se deschid mai multe opiuni la accesare) si label-uri.Versiuni Dreamweaver 1.0 (lansat n decembrie 1997; Dreamweaver 1.2 a urmat n martie 1998) Dreamweaver 2.0 (lansat n decembrie 1998) Dreamweaver 3.0 (lansat n decembrie 1999) Dreamweaver UltraDev 1.0 (lansat n iunie 2000) Dreamweaver 4.0 (lansat n decembrie 2000) Dreamweaver UltraDev 4.0 (Released decembrie 2000) Dreamweaver MX (lansat n mai 2002) Dreamweaver MX 2004 (lansat n 10 septembrie, 2003) Dreamweaver 8 (lansat n 13 septembrie, 2005) Dreamweaver 9(CS3) (lansat n martie, 2007) Dreamweaver 10(CS4) (lansat n octombrie, 2008) Dreamweaver 11(CS5) (lansat n mai, 2010)3.11 Cascading Style SheetsCSS este un acronim provenind din Cascading Style Sheets, care nseamn "foi de stil n cascad". n documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagin web folosind numai CSS, care a fost proiectat astfel nct s conlucreze cu HTML-ul. Tagurile HTML au fost iniial destinate pentru a defini coninutul unui document. Pentru a afia "Acesta este un antet", "Acesta este un paragraf" sau "Acesta este un tabel", trebuiau folosite taguri ca ,, etc. Modul de aranjare al documentului era sarcina browser-ului, far a fi folosite taguri de structur.Pe msur ce apreau noi taguri HTML i atribute (ca tagul i atributul color) sintaxei HTML originale, devenea din ce n ce mai greu s creezi site-uri web n care coninutul documentelor HTML s fie separat clar de aranjamentul documentului. Stilurile definesc cum s fie afiate elementele HTML 4.0, aa cum face tagul font sau atributul color n HTML 3.2. Stilurile sunt salvate n mod normal n fiiere diferite de cele cu extensia html.CSS este foarte util n Web design, deoarece le permite dezvoltatorilor s controleze stilul i chenarul mai multor pagini web n acelai timp. Ca web developer putei defini un stil pentru fiecare element HTML i s-l aplicai ctor pagini web dorii. Pentru a face o schimbare global, schimbai stilul i toate elementele din paginile web vor fi modificate automat.Dezavantaj lucrului cu CSS este c pagina coninnd cod CSS poate arata diferit n navigatoare diferite, deoarece nu toate browserele interpreteaz codul CSS la fel.Adugnd cod JavaScript, se obin efecte i mai sofisticate, chiar de animaie. CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase justific titulatura de "artiti CSS" sau "artizani CSS" acordat unor creatori de pagini web.Foile de stil dau posibilitatea specificrii informaiei despre stil n mai multe feluri. Stilurile se pot specifica ntr-un singur element HTML, n interiorul elementului al unei pagini HTML sau ntr-un fiier extern CSS. Dintr-un singur document HTML se pot face referiri ctre mai multe foi de stil externe. Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea ce nseamn c va suprascrie fiecare stil declarat n tagul , ntr-o foaie de stil extern i n browser.Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afiate ca i cum CSS n-ar exista, dar cele mai cunoscute i utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera si altele, sunt compatibile CSS.Codurile CSS pot fi scrise in interiorul paginii sau intr-un fiier extern cu extensia".css".Codul CSS, ca form general, este alctuit din: obiectul care va fi formatat, proprietile acestuia i valoarea (sau atributele) fiecrei proprieti.Beneficiile sintaxei CSS sunt: formatarea este introdusa ntr-un singur loc pentru tot documentul; editarea rapid a etichetelor; datorit introducerii ntr-un singur loc a etichetelor se obine o micorare a codului paginii, implicit ncrcarea mai rapid a acesteia.Foile de stil externe v permit s schimbai apariia i aranjarea tuturor paginilor n site-ul dvs. web, doar prin editarea unui singur document CSS. Dac ai ncercat vreodat s schimbai fontul sau culoarea tuturor anteturilor din paginile web pe care le-ai creat, vei nelege cum CSS v poate scuti de mult munc inutil. Proiectanii CSS-ului au urmrit ndeosebi separarea ntre coninutul paginii (textul destinat vizitatorului i imaginile din pagin) i codul-surs. Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scderea dimensiunii n octei a paginii web, atunci cnd codul CSS e coninut ntr-un fiier extern.Modificnd fiierul CSS extern, modificm simultan toate paginile web n care acesta e inclus. Se pot crea efecte mai sofisticate dect cele produse de codul HTML: suprapunerea unei imagini peste alt imagine, a unui text peste alt text, impresia de relief, efectul hover, afiarea unor fonturi mai mari dect h1 etc.Caracteristici ale CSSSintaxa CSS este structurat pe trei nivele, nivelul 1 fiind proprietile etichetelor din documentul HTML, tip inline, nivelul 2 este informaia introdus n blocul HEAD, tip embedded, iar nivelul 3 este reprezentat de comenzile aflate n pagini separate, tip externe[2]. Cea mai mare importan (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mic importan o are cea de nivelul 3. Legtura paginilor HTML cu fiierele externe CSS se face prin introducerea urmtoarei linii: Atributele indica urmtoarele: rel - fiierul este tip stylesheet, type - tip text ce conine comenzi CSS, href - fiierul sau adresa fiierului CSS. Comenzile de nivel 2 sau embedded sunt cele gzduite oriunde ntre perechea de etichete i conform sintaxei:comenzi CSS unde style - specific unde ncepe i unde se termin blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, coninutul blocului style. Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate n zona BODY i au sintaxa:...textul sau obiectul asupra caruia este aplicat codul CSS... n fiierele CSS este permis folosirea comentariilor, eu utiliznd aceast caracteristic pentru a marca n fiier fiecare modul pentru a gsi mai uor elementele care trebuie modificate. /* Acesta este un comentariu in CSS */ id i class sunt comenzi care dau unei formatri CSS un nume. Se folosesc atunci cnd dorim sa aplicm un stil de formatare unei anume zone. Elementul id se aplica unui stil de format o singur dat sau la o singur eticheta HTML, plasndu-se un nume acelui stil. Acest element necesita existenta comenzilor CSS n zona HEAD sau ntr-un fiier extern. Exemplu de folosire a elementului id:Exemplu#albastru{color: #0000FF;}Text albastru introdus prin id "albastru"Text negru Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca i la id necesit existena comenzilor CSS n zona HEAD sau ntr-un fiier extern. Exemplu: folosirea elementului class:Exemplu.rosu{color: #FF0000;}Primul text rosu introdus prin class "rosu"Text negruAl doilea text rosu introdus prin class "rosu" Aceste elemente specific argumentul fontului care se asociaz unui element HTML fiind incluse ori n zona HEAD ori n interiorul etichetei dorite. n cazul de fa se remarc asemnarea cu eticheta font din HTML care accepta argumentele type, style, size i weight.font-familyfont-family este de fapt o list de fonturi din care browserul va folosi n ordinea n care le recunoate (primul folosit va fi primul din list, dac nu este recunoscut l folosete pe al doilea i tot aa mai departe). Este recomandat ca ultima poziie din list s fie un font generic (de exemplu serif, sans-serif sau monospace). n situaia n care numele fontului este format din dou cuvinte se ncadreaz ntre ghilimele duble pentru ca browserul s le interpreteze mpreun. Exemplu: CSS introdus n HEAD aplicat etichetei p. Browserul nu recunoate primele dou fonturi din list, folosindu-l pe al treileaExemplup{font-family: font1,font2,arial;}Text scris cu cu fontul ArialText negruText scris cu cu fontul Arial Exemplu: acelai exemplu dar CSS introdus n eticheta p din HTMLExempluText scris cu cu fontul ArialText negruText scris cu cu fontul Arial font-size este parametrul prin care stabilim dimensiunea fontului, exprimat n pixeli (px), puncte (pt), keywords sau procente. Are o funcionare asemntoare cu eticheta . Exemplu: CSS introdus n HEAD aplicat etichetei p, dimensiunea exprimata n pixeliExemplup{font-size: 20px;}Text scris cu font de 20pxText negru Pentru dimensiunea exprimat n puncte folosim acelai exemplu nlocuind px cu pt. Dimensiunea exprimat prin keywords folosete cuvinte n loc de cifre. apte cuvinte nlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML: xx-small, x-small, small, medium, large, x-large, xx-large. Pentru verificare se poate folosi exemplul anterior n care se nlocuiete 20px cu unul din cuvintele de mai sus. Procentele sunt o alt valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite. font-stylefont-style este folosit pentru a aduga caracteristica italic fontului. Poate lua valorile normal i italic.p{font-style: italic;} font-weightfont-weight este paramerul care stabilete grosimea caracterului putnd lua valori numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.Stilurile prezentate anterior pot fi folosite simultan n interiorul unei etichete fiind desprite de caracterul ; (punct i virgula).text-align poziioneaz pe orizontal obiecte (de exemplu text sau imagini) i admite valorile left, right i center ca i eticheta align din HTML.vertical-align este folosit pentru alinierea pe vertical a obiectelor dintr-un tabel i poate lua valorile: top, middle i bottom.n exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor ale tabelului:.sus{vertical-align: top;} float este folosit pentru alinierea textului cu imaginile i poate avea valorile: left i right. n funcie de valoarea aleas imaginea va fi aliniat n partea opus a paginii. text-decoration adug sublinierea sau tierea blocului text asociat i poate avea valorile underline, line-through sau none. Exemplu: stilul asociat etichetei p este inserat n HEADExemplup{text-decoration: underline;}Text normalText subliniat color definete culoarea textului dintr-o zon sau ntreaga pagin. n HTML culoarea legturilor poate fi stabilit prin atributele LINK, ALINK i VLINK declarate n interiorul etichetei BODY. Acelai lucru i chiar mai mult poate fi realizat folosind sintaxa CSS. Exemplu:a{font-family: arial; font-size: 20px;}a:link {color: #0000FF;}a:visited {color: #00FF00;}a:active {color: #FF0000;}a:hover {color: #000000;} a definete stilul general pentru legtur, a:link definete stilul legturii nevizitate, a:visited definete stilul legturii vizitate, a:active definete stilul legturii active, a:hover definete stilul cnd mouse-ul este deasupra legturii.Culoarea de fundal a paginii sau a unor elemente din pagin poate fi definit folosind background-color i poate fi asociat oricrei etichete HTML. Exemplu: definim un stil pentru ntreg BODY i un altul pentru eticheta pExemplubody {background-color: #FFFF00;}p {background-color: #FF0000;}Text normalText cu background rosu Imaginile pot fi folosite ca fundal n spatele ntregii pagini, a unui obiect sau a textului. background-image asociaz o imagine ca fundal unui obiect.Exemplu: definim un stil pentru eticheta pExemplup {background-image: url(poza.jpg);}Text normalText cu imagine de fond n funcie de dimensiunile obiectului cruia i sunt asociate, imaginile de fond se repet pe orizontal i vertical. Repetarea poate fi controlat prin parametrul background-repeat care poate lua valorile: repeat-x imaginea se repet pe orizontal, repeat-y imaginea se repet pe vertical, no-repeat imaginea nu se repet. Exemplu: imaginea nu se repeta sub eticheta pExemplup {background-image: url(poza.jpg);background-repeat: no-repeat;}Text normalText cu imagine de fond n mod normal imaginea de fundal ncepe din colul stnga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda background-position. Sunt acceptate dou valori: n prima poziie poate fi: top, center, bottom, percentage sau pixel, n a doua poziie poate fi: right, center, left, percentage sau pixel. Exemplu: imaginea de fundal este asociat etichetei BODY fiind amplasat top i center, fr repetare:Exemplubody {background-image: url(poza.jpg);background-repeat: no-repeat;background-position: top center;}Text normal list-style-typeFolosind eticheta ol din HTML crem liste ordonate sau numerotate. Adugnd comenzi CSS putem aduga pe lng numere i cifre sau alte simboluri. Sintaxa este:li {list-style-type: valoare;}Valoarea poate fi: disc, circle, square, decimalnumere ntregi, lower-romannumere romane, caractere mici (i, ii, iii, iv), upper-roman numere romane caractere mari (I, II, III, IV), upper-alpha litere mari (A, B, C, D), lower-alpha litere mici (a, b, c, d), none nimic. Exemplu: lista ordonat folosind marcaje cu litere miciExempluli {list-style-type: lower-alpha;}Necesar materiale:caramidacimentipsos n afara simbolurilor de marcaj prestabilite pot fi folosite i imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url(). Exemplu: list ordonat folosind ca marcaj imaginea punct.gifExempluli {list-style-image: url(punct.gif);}Necesar materiale:caramidacimentipsos Fiecare element este ncadrat ntr-o caset care este compus din urmtoarele elemente: marginea (margin) este spaiul exterior chenarului pn la celelalte elemente, chenarul (border) este o bordur care nconjoar elementul, completarea (padding) stabilete distana dintre coninut i chenar, coninutul include informaia util (text, tabele, imagini, formulare, etc.).Originea elementului este considerat coltul din dreapta sus fa de care se vor raporta toate dimensiunile prezentate n continuare. Limea i nlimea unui element sunt stabilite n HTML prin atributele width i height. Aceste atribute pot fi adugate sau suprascrise prin comenzi CSS. Exemplu: folosind comenzi CSS modificm dimensiunile originale ale imaginii:Exempluimg {width: 50px; height: 100px;} Padding stabilete distana dintre obiect i chenar simultan pentru toate laturile. Distanele pot fi stabilite i individual folosind padding-top, padding-bottom, padding-left sau padding-right. Margin stabilete distana dintre chenar i celelalte obiecte din pagin simultan pentru toate laturile. Distanele pot fi stabilite i individual folosind margin-top, margin-bottom, margin-left sau margin-right. Valorile pentru padding i margin pot fi exprimate n px (pixeli), in (inci), pt (puncte) sau cm (centimetri). Internet Explorer afieaz diferit chenarele. Comanda CSS pentru definirea chenarului este border avnd proprietile asociate width, style i color. Pentru a fi siguri ca aceste proprieti funcioneaz i n Internet Explorer trebuie s declarm pentru border cel puin width i style. border-width stabilete grosimea chenarului i poate fi exprimat n px (pixeli), pt (puncte), cm (centimetri) sau in (inci). border-style stabilete tipul chenarului i poate fi dotted, dashed, solid, double, groove, ridge, inset si outset. border-color stabilete culoarea chenarului i poate fi exprimat prin valoare hexazecimal sau n cuvinte. Exemplu: definim nou clase utiliznd proprietile border-width border-style i border-colorExemplu.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}.clasa3 {border-width: 2px; border-style: solid; border-color: green;}.clasa4 {border-width: 3px; border-style: double; border-color: black;}.clasa5 {border-width: 2px; border-style: groove; border-color: silver;}.clasa6 {border-width: 3px; border-style: ridge; border-color: lime;}.clasa7 {border-width: 2px; border-style: inset; border-color: yellow;}.clasa8 {border-width: 3px; border-style: outset; border-color: aqua;}.clasa9 {border-width: 2px; border-style: hidden; border-color: olive;}border-width: 2px; border-style: dotted; border-color: red;
border-width: 3px; border-style: dashed; border-color: blue;
border-width: 2px; border-style: solid; border-color: green;
border-width: 3px; border-style: double; border-color: black;
border-width: 2px; border-style: groove; border-color: silver;
border-width: 3px; border-style: ridge; border-color: lime;
border-width: 2px; border-style: inset; border-color: yellow;
border-width: 3px; border-style: outset; border-color: aqua;
border-width: 2px; border-style: hidden; border-color: olive; Poziionarea permite aezarea unui obiect ntr-un anume loc folosind coordonatele. Totodat obiectele pot fi poziionate pe straturi diferite, unul deasupra celuilalt. Att poziionarea absolut (ASOLUTE) ct i cea relativ (RELATIVE) folosesc proprietile LEFT i TOP exprimate n px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri). Poziionare absolut plaseaz obiectul n pagin exact n locaia data de left i top. Astfel poate fi creat un element liber fa de celelalte din pagin. Obiectul poate fi orice, de exemplu text sau imagine. Poziionare relativ este poziia normal pe care o ocup un element, dup elementele anterioare i naintea celor urmtoare. Poate fi deplasat fa de aceast poziie folosind proprietile left i top. Poziionarea tridimensionalElementele sunt poziionate pe ecran pe o suprafa bidimensional dar pot fi aezate i unul deasupra celuilalt, ntr-o stiv utiliznd un indicativ (index-z) ncepnd cu 0, urmtorul 1 i tot aa n continuare. Elementul cu indexul cel mai mare este aezat deasupra. Exemplu: am folosit dou obiecte unul poziionat absolut celalalt relativ:Exemplu.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}Capitolul 4 - Analiza site-ului Protector SecuritySite-ul este utilizat pentru promovarea imaginii i produselor firmei Protector Security. Aceast firm (fictiv) se ocup cu distribuirea de arme, muniii i diverse accesorii, att pentru arme ct i articole de mbrcminte i nclminte.Site-ul se compune din: prima pagin, o pagin disclaimer cu termeni de utilizare, o pagin de contact, o pagin despre legislaia privind regimul armelor i muniiilor, 2 categorii de produse (arme i echipament) i o pagin de prezentare a firmei.Schema de principiu a site-ului:Figura 4 Schema de principiu a site-uluiPentru a atrage atenia asupra specificului, site-ul folosete un design cu aspect militar, bazndu-se pe nuane de verde i un colorit camuflaj de pdure.Figura 5 Design pe baz de nuane militareAccesul la paginile site-ului se face folosind 2 meniuri: unul orizontal, fix, aflat deasupra coninutului paginilor (pentru paginile home, contact i disclaimer) i unul vertical, modificabil, (aflat n dreapta coninutului) oferind acces la paginile cu produse, pagina de legislaie i prima pagin . n componena lui se folosesc pagini html codate folosind sintaxe xhtml versiunea 1.0 strict. Acest lucru se poate observa, ca de altfel n tot coninutul site-ului, prin utilizarea a Cnd un browser scaneaz site-ul, primul lucru pe care l caut este DOCTYPE-ul sau elementul care ajut redarea corecta a site-ului. Cnd un DOCTYPE nu exist/este greit/este depit, codurile HTML, CSS sau DOM sunt redate aa cum au fost create n anii 90. Un DOCTYPE descrie un DTD ( document type definition). Este un document citit automat (machine-readable) i care ofer browserului informaia de care are nevoie pentru a afia pagina corect. Dac DOCTYPE se refer la "XHTML 1.0 Strict", se va primi informaia pe care "DTD XHTML 1.0 Strict" o ofer pentru a reda corect pagina web.n componena site-ului mai intr: fiierul de stiluri CSS i elemente multimedia (imagini). 4.1 Pagina HomeHome sau prima pagin reprezint pagina de index. Aceasta cuprinde informaii generale despre firm, produse i despre o firm partener (un club sportiv).Pagina este structurat n head i body. HeadulZona head conine titlul paginii ntre etichetele i , descrieri de tip , stiluri pentru formatarea textului.Coninutul etichetei title este afiat de browser pe cea mai de sus linie (banda de sus). Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor, informaii utile n general motoarelor de cutare. Protector Security - Home Page Seciunea bodySeciunea body reprezint partea care apare n browser. Aceasta seciune este mprit n: main, sidebar i footer. Mainul conine un container n care sunt incluse header-ul (butoanele de navigare i logo-ul) i o seciune de articole (modulul site-content). Deoarece aceasta este prima pagin a site-ului, am folosit o scurt prezentare a firmei i a domeniului de activitate precum i o descriere a principalelor categorii de produse existente. Prezentarea firmei se termin cu o legtur care duce ctre pagina cu informaii detaliate despre firm. Urmnd acelai model, fiecare categorie conine o legtur ctre pagina de prezentare a produselor oferite.Butoanele de navigare sunt create folosind listele de legturi i sunt ncorporate ntr-un bloc tip div.HomeContactDisclaimerMeniul reacioneaz n funcie de pagina deschis, colorndu-se diferit.Figura 6 Bannerul i meniul orizontalCuprinsul paginii este mprit n 3 corpuri: prezentarea firmei cu rezumatul categoriilor de produse, reclama ctre site-ul partener i un corp de reclam proprie cu recomandri privind produsele. HeaderPrezentare firm i produseSidebarReclam site partenerReclam proprie cu recomandri produseFooterFigura 7 Schema de principiu a paginilorn partea denumit sidebar am pus meniul vertical (modulul site-sitebar1), informaii scurte privind activitatea firmei i informaii privind modul de contact. Se poate observa c meniul oferit este expandat (are toate opiunile vizibile), fapt care va fi diferit la celelalte pagini.Figura 8 Sidebar-ul cu meniul verticalFiecare articol este scris folosind un bloc tip div afiliat clasei articol (n fiierul de stiluri este declarat modul n care acesta va fi afiat). Articolele sunt compuse dintr-un div interior (class="articol-interior site-article") care conine titlul la articol (scris cu tag h2) i coninutul propriu-zis (un div din clasa "articolcontent").Ultima parte a paginii principale este format din footer. Aceast component este utilizat pentru a direciona vizitatorul pe alte pagini (n acest caz paginile disclaimer i contact) i pentru copyright. 4.2 Pagina ArmamentPagina Armament este utilizat pentru informarea vizitatorului n legtur cu produsele din categoria arme. Pstrnd formatul primei pagini, pagina Armament este format din aceleai tipuri de structuri head, body i footer. n seciunea head gsim de aceast dat un alt titlu, aceasta datorit faptului c s-a dorit personalizarea fiecrei pagini cu un titlu propriu.Armament Deoarece categoria armament conine 3 subcategorii, acestea apar exemplificate sub informarea despre categoria arme. Nu mai exist reclama ctre site-ul partener ns am pus recomandri privind alte produse ale firmei. Sidebar-ul arat i el puin diferit. Astfel, categoria echipament nu mai este expandat, rmnnd deschis doar categoria armament. Nu am mai folosit modulul cu informaii despre firm ns am folosit spaiul pentru a face reclam i a prezenta i alte produse ale firmei catalogate produse noi.Figura 9 Pagina Armamentn partea de jos a paginii se regsete articolul cu recomandri privind produsele i acel footer descris la pagina principal. 4.2.1 Paginile pentru subcategoriiAccesnd legturile se ajunge pe fiecare subcategorie: armament uor, arme de asalt, muniii. Toate pstreaz stilul i forma paginii principale, cu excepia meniului vertical car eevideniaz fiecare categorie accesat. Acest lucru este posibil folosind clasa active declarat n fiierul de stiluri care este declarat avnd o alt culoare de fundal. Recomandrile de produse din partea de jos a paginilor sunt diferite fa de categoria de produse afiat.Figura 10 Subcategoria armament de asaltFigura 11 Subcategoria armament uorFigura 12 Subcategoria muniii4.3 Pagina EchipamentLa fel ca i pagina Arme, aceast pagin ofer informaii despre produsele din categoria echipament pe care firma Protector Security le comercializeaz. Aceste produse sunt mprite la rndul lor n 3 subcategorii: haine, bocanci i accesorii. Meniul vertical din sidebar este schimbat. Categoria armament este nchis iar categoria echipament este expandat.Figura 12 Pagina Echipamenti n aceast pagin footer-ul este prezent n partea de jos a paginii.4.3.1 Paginile pentru subcategoriiUrmnd modelul din categoria armament, paginile cuprinznd subcategoriile de echipament (haine, bocanci i accesorii) sunt prezentate avnd acelai element distinctiv: meniul vertical este colorat diferit n funcie de subcategoria selectat.Figura 13 Subcategoria mbrcminteFigura 14 Subcategoria nclminteFigura 16 Subcategoria Accesorii4.4 Pagina LegislatiePagina Legislaie este utilizat pentru