andrei_botici final.doc
-
Upload
mirabela-botici -
Category
Documents
-
view
78 -
download
0
Transcript of andrei_botici final.doc
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