Grup colar Bicaz Specializarea MATEMATIC-INFORMATIC

2012

Lucrare pentru atestarea competentelor profesionale1

PAGIN WEBCoordonator: Prof. Fral Mirela Absolvent: Pavelescu Rzvan

Tema lucrrii:

2

Web 2.0Pagin WEB

Cuprins1. Motivaia alegerii temei............................43

2. Despre limbajul folosit..............................5 3. Detalii tehnice de implementare...............17 4. Resurse utilizate.........................................25 5. Modaliti de utilizare.................................26 6. Concluzii finale............................................27 7. Bibliografie....................................................28

1.

Movaia alegerii temei

Ce este web 2.0 ?, este o ntrebare la mod, fr un rspuns clar care s satisfac toate nevoile. Cutnd pe Google cum s-o descriu mai exact am gsit cca. 700 milioane de rezultate. Foarte bine pentru un termen care nu are o definiie concret. Cea mai pe placul meu era formularea lui Tim OReilly, inventatorul i promotorul termenului WEB 2.0, care a descris acest termen ca o atitudine nu o tehnologie??? .4

Iniial internetul a constat din pagini statice, care erau actualizate doar ocazional de ctre deintorii lor. Creatorii de siteuri de succes nu doreau ca orice vizitator s adauge sau sa modifice coninutul siteului lor. Chiar dac au existat ncercri de a implementa o astfel de funcionalitate, ele au fost ignorate de public i s-au lovit de capacitile tehnice limitate ale acelor vremuri. Ulterior au fost realizate i sisteme de gestiunea automat a informaiilor dintr-un site Web, numite Content Management Systems (CMS). Acestea puteau construi pe loc - n mod dinamic, la cerere - versiunea cea mai nou posibil a paginii web, i anume prin consultarea unei bnci de date (sigur c i aceasta trebuia actualizat permanent, dar asta se face pe ci tradiionale, nelegate direct de WWW). Dar i aceast tehnic mparte oamenii n "creatori" de pagini Web i "consumatori" mai mult sau mai puin pasivi ai acestor pagini/informaii/documente. Cam din anul 2005 ncoace ns, unii specialiti afirm c Internetul ofer din ce n ce mai des o nou calitate, idee care a fost susinut i de mediile de mase. Internetul a devenit mijloc de transport pentru conversaie, iar conversaia se ntampl din ce n ce mai mult n timp real. Bloggingul, podcastingul, publicarea de informaii, programarea, toate acestea au devenit omniprezente i toi putem participa la aceste procese. Astfel Web 2.0 se caracterizeaz prin faptul c folosete la maxim puterea comunitilor i sunt susinute puternic de comuniti concentrate n jurul aplicaiilor respective. n fine Web 2.0 este o platforma web ce se bazeaz pe standarde ca RSS, XML, Javascript, APIuri i pe utilitare ca bloggingul, podcastingul i alte servicii. Este vorba pur i simplu de o colecie de tehnologii i metodologii care fac Web-ul mult mai participativ, mai n timp real, mai personalizabil, permitnd o cooperare mai strns ntre oameni i o comunicare mai fidel ntre calculatoare Web 2.0 se bazeaz pe ncredere, pe o nou generaie de dezvoltatori, pe existena Open Source, pe broadband i pe dorint de conversaie a oamenilor. Acest curent presupune implicarea tuturor i nu dictarea de la centru. Cei care conduc aceast micare sunt milioanele de utilizatori de pe tot globul i nu afaceritii din Silicon5

Valley. Desigur nici acestea din urma nu rmn n umbr: printre marii juctori care au implementat aceasta tehnologie se numra: Microsoft, Yahoo, Amazon i desigur Google.

2. Despre limbajul folositPunctul de pornire n dezvoltarea Internetului a fost rivalitatea ntre cele dou mari puteri ale secolului al XX-lea: Statele Unite ale Americii i Uniunea Sovietic. n 1957, URSS (Uniunea Republicilor Sovietice Socialiste) lanseaz n spaiul cosmic primul satelit artificial al Pmntului denumit Sputnik. Acest fapt a declanat o ngrijorare deosebit n Statele Unite ale Americii, astfel preedintele Eisenhower nfiineaz o agenie special subordonat Pentagonului: Advanced Research Projects Agency (www.darpa.mil). Aceast agenie a Ministerului de Aprare (Department of Defense, prescurtat DOD) este condus de oameni de tiin, are o birocraie redus, i are ca misiune: Meninerea superioritii tehnologice a armatei Statelor Unite i prevenirea surprizei tehnologice n domeniul securitii naionale prin sponsorizarea celor mai noi i revoluionare descoperiri tiinifice i prin investirea de fonduri teoretic nelimitate pentru realizarea unei legturi ntre cercetarea tiinific i implementarea tehnologic militar a acesteia. n 1959 John McCarthy, profesor la Universitatea Stanford, al crui nume va fi asociat cu inteligena artificial, gsete soluia de a conecta mai multe terminale la un singur calculator central: time-sharing (partajarea timpului). Aceasta este o modalitate de lucru n care mai multe aplicaii (programe de calculator) solicit acces concurenial la o resurs (fizic sau logic), prin care fiecrei aplicaii i se aloc un anumit timp pentru folosirea resursei solicitate. Aprnd apoi primele calculatoare n marile universiti se pune problema interconectrii acestora. Cercettorul Lawrence Roberts susine o soluie de interconectare prin comutare de pachete (packet switching) n modelul numit "client-server". ncercnd s prezint ntreaga istorie a fotografiei ntr-o singur aplicaie complex din punct de vedere al informaiilor oferite asupra acestei teme, am folosit HTML (Hypertext Markup Language) i limbaje de scripting. HTML a fost iniial dezvoltat de Tim Berners-Lee pe vremea cnd lucra la CERN, i a devenit6

popular cu ajutorul browserului Mosaic (n prezent nucleul browserului oferit de Microsoft, Internet Explorer), dezvoltat de cei de la NCSA (National Center for Supercomputing Applications). n timpul anilor 1990 a nflorit odat cu dezvoltarea exploziv a Web-ului. n aceast perioad, HTML a fost extins n nenumrate feluri. Web-ul depinde de autorii de pagini Web i de productorii care mprtesc aceleai conveii HTML. Acest lucru a motivat munca n comun pentru mbuntirea specificaiilor HTML. HTML 2.0 (aprut n Noiembrie 1995) a fost dezvoltat sub egida celor de la Internet Engineering Task Force (IETF), care au unit toate specificaiile aprute pn n 1994 ntr-unul singur. HTML+ (1993) i HTML 3.0 (1995) propuneau i mai bogate i diversificate versiuni de HTML. n ciuda faptului c niciodat nu se ajungea la un consens n privina standardelor, aceste discuii au dus la adoptarea unor noi specificaii. Eforturile depuse de cei de la World Wide Web Consortium HTML Working Group de a codifica practicile comune ale HTML n 1996 au dus la apariia unei noi versiuni, HTML 3.2 (Ianuarie 1997). Majoritatea oamenilor sunt de acord c documentele HTML ar trebui s mearg bine cu orice tip de browser i pe orice platform. Atingerea acestei interoperabiliti diminueaz costurile publicanilor de documente deoarece ei trebuie s dezvolte doar o singur versiune a respectivului document. Dac efortul nu este fcut, este mult mai mare riscul ca Web-ul s se extind ntr-o lume proprietar a incompatibilitii, n final reducnd potenialul comercial i informaional al Web-ului pentru toti participanii. Fiecare versiune de HTML a ncercat s reflecte un consens din ce n ce mai mare n privina utilizrii unui singur format de baz pentru ca investiia fcut de publicani s nu fie risipit i ca documentele lor s nu devin imposibil de citit ntr-o perioad scurt de timp. HTML a fost dezvoltat n ideea ca orice aparat (sau adaptor) poate folosi informaii pe Web: PC-uri cu rezoluii grafice variate i adncimi de culoare diferite, telefoane celulare, PDA-uri sau Hand-Held-uri (agende electronice sofisticate care ncap ntrun buzunar), aparate de vorbit nspre i dinspre calculator, calculatoare cu legtura la Internet mai mare sau mai mic, .a.m.d.. HTML este o form de marcare orientat ctre prezentarea documentelor text pe o singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre7

titlul i autorul documentului, informaii structurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca documentul s poat fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul). HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemntor cu documetele Word, dar cu observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate. HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri i forumuri web genereaz pagini HTML. HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i multe liste de mail le blocheaz intenionat. Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar in care documentele sint distribuite si vzute pe Web. diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atit de variata. Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al documentului vazut de un utilizator ( client ) poate face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de date formate din aceste documente. Orice document HTML incepe cu notatia si se termina cu notatia . Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa " < "8

si se termina cu o paranteza unghiulara inchisa " > ". Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod.Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis. ntre cele doua marcaje si vom introduce doua sectiuni: sectiunea de antet ... si - corpul documentului .... Blocul ... cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului. O eticheta poate fi scris atat cu litere mici, cat si cu litere mari. Adica = = . Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre browser. Deci un prim document HTML ar fi ceva de genul asta: culoare textului Un text de culoare rosie. Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM sau PRIM.HTML. Apoi porniti Netscape Navigator sau Internet Explorer, dati CTRL-O si introduceti calea spre fisier. Dati OK si ... nimic. Sa nu disperam ... vom adauga primele elemente la pagina noastra. In primul rand, titlul unei pagini se obtine inserand in sectiunea ... a urmatoarei linii: Aceasta este prima mea pagina de Web In plus, in sectiunea ... putem scrie texte cat dorim. Daca nu intalnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre: 9

Aceasta este prima mea pagina de Web Bine ati venit in pagina mea de Web! Continutul blocului ... va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului. Blocuri preformatate: Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc ....

bloc preformatat Prima linie A doua linie A treia linie

O culoare poate fi precizata in doua moduri: Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

10

Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori. Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei . Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei , de exemplu: . Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri. Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre delimitatorii ... ( b vine de la "bold" = indraznet ). Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele .... Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele .... Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele ... ( i vine de la " italic "). Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele ..., respectiv .... Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele ... (u vine de la " underline "). Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele ...

sau .... Blocul ... permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre browser cu caractere cursive. " q " vine de la " in-line quotation " (citate inserate in-line); Si blocurile " q " pot fi imbricate. Penrtu a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi: 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare); +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta; -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta. Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive.Numarul astfel precizat reprezinta marimea fontului in puncte tipografice. Acest atribut functioneaza numai cu Netscape Communicator.11

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros). Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. Daca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza facilitatile oferite de o eticheta dedicata: .... Pentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre etichetele .... Intr-un bloc ..., semnificatia marcajelor HTML se pastreaza. Blocul ... este indicat pentru a insera randuri vide (spatiu intre randurile succesive ). Caracterul "spatiu" poate fi luat in considerare de browser daca este inserat explicit prin . Intr-un fisier HTML, caracterele "" au o semnificatie speciala pentru browser. Ele incadreaza comenzile si atributele de afisare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa contina astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de etichete: ... ( 80 de caractere pe rand ); ... ( 120 de caractere pe rand ). Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta " si "CR/LF ". Textul afisat in pagina este monospatiat.

Cu ajutorul etichetei paragraf este posibil trecerea la o linie noua si permite: inserarea unui spatiu suplimentar inainte de blocul paragraf; inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul (acesta fiind optional); alinierea textului cu ajutorul atributului align, avand valorile posibile " left ", " center " sau " right ".

12

Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor . , , , , . Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara. Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (in mod prestabilit ) , in centru si la dreapta. Tag-ul permite scrierea unui titlu cu caractere mai mari si aldine, pe cand foloseste caracterele cele mai mici. Intr-o pagina Web pot fi inserate linii orizontale.acest lucru se face cu ajutorul etichetei . Pentru a configura o linie orizontala se utilizeaza urmatorele atribute ale etichetei : align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " si " right "; width permite alegerea lungimii liniei; size permite alegerea grosimii liniei; noshade cand este prezent defineste o linie fara umbra; color permite definirea culorii liniei.

Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor .... Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc (diviziune) este align (aliniere). Valorile posibile ale acestui parametru sunt: " left " ( aliniere la stanga ); " center " ( aliniere centrala ); " right " ( aliniere la dreapta ). Un bloc ... poate include alte subblocuri. In acest caz , alinierea precizata de atributul align al blocului are efect asupra tuturor subblocurilor incluse in blocul ;

Un bloc ... admite atributul " nowrap " care interzice intreruperea randurilor de catre browser.

13

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; XPM (X PixMap) cu extensia .xmp; XBM (X BitMap) cu extensia .xbm; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 culori posibile) si JPEG (24biti pentru o culoare, 16777216 de culori posibile). Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei border. Valorile acestor atribute sunt numere intregi pozitive. O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei. Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web. Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height. Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori: " left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta; " right " - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga; " top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea; " middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea. " bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de de baza a textului ce precede imaginea. Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre imagine si restul elementelor din pagina. Atributul alt admite ca valoare un text care va fi afisat in locul imaginii. Tagul utilizat este: Text dupa imagine

14

O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei (de la "anchor"=ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei numit href, care ia valoare numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele .... Prezenta etichtetei de sfarsit este obligatorie. In exemplul urmator se utilizeaza adresa URL www.netscape.com care incarca pagina de start din site-ul firmei Netscape Corporation. Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director, atributul href primeste o valoare de forma "nume_fisier.html#nume_ancora". Principii de baza: nainte de a lansa pagini web n reea, trebuie s verificai structura acestora: Exist dou variante: o structur n form de stea pentru site-uri mici i o construcie ierarhic pentru ofertele ample. n cazul structurilor n form de stea plasai pagina de intrare n centrul ateniei, de la aceasta plecnd apoi toate celelalte pagini. Construcia ierarhic amintete pe undeva de structura arborescent a directoarelor de pe harddisk. Din pagina principal pleac link-uri ctre nivelul urmtor - ca i spre subdirectoarele de pe harddisk. Fiecare nivel conine o tem proprie i se ramific n alte subrubrici. Acest tip de construcie este necesar, de exemplu, n momentul n care dorii s introducei n reea o arhiv de texte. Atenia principal trebuie acordat paginii de intrare. Aceasta trebuie s conin link-uri ctre toate celelalte pagini; cnd se lucreaz cu site-uri cu mai multe nivele, este suficient s fie introduse link-uri ctre urmtorul nivel. i invers, pagina de intrare trebuie s poat fi accesat ntotdeauna de pe orice alt pagin. Dac avei mai multe nivele subordonate, este necesar, n plus, un link pentru accesarea nivelului imediat superior. n cazul site-urilor mai mici, aceast structur ierarhic poate fi modificat. n afar de link-ul spre homepage, pot fi15

introduse n conceptul de navigare trimiteri ctre fiecare pagin n parte. De asemenea exist extensii Netscape i Microsoft care nu fac parte din specificaia HTML 3.2, ori pentru c sunt mai puin utilizate, ori au fost omologate dupa apariia HTML 3.2. Pentru c navigatorul Netscape a fost printre primele browsere care suporta anumite tag-uri HTML 3.0, iar Netscape deine n jur de 70% din piaa de browsere, muli au crezut eronat c toate extensiile Netscape (incluznd tag-uri ca i faciliti precum ferestrele) fac parte din HTML 3.0 sau HTML 3.2. Documentele HTML sunt documente n format ASCII i prin urmare pot fi create cu orice editor de texte. Au fost ns dezvoltate editoare specializate care permit editarea ntr-un fel de WYSIWYG (What You See Is What You Get), dei nu se poate vorbi de WYSIWYG atta vreme ct navigatoarele afieaz acelai document oarecum diferit, n funcie de platforma pe care ruleaz. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate (i formatate) cu alte editoare. Adobe Dreamweaver (cunoscut anterior ca Macromedia Dreamweaver) este o aplicaie de dezvoltare web, disponibil att pentru Windows, ct i pentru Mac. Versiunile recente includ suport pentru tehnologii web, cum ar fi CSS, JavaScript, PHP, Cold Fusion, ct i cadre ASP. Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor '90 i momentan deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX cu ajutorul unor emulatoare software, cum ar fi Wine. Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a paginilor web de ctre utilizatorii neexperimentai. Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant a browserelor web. Aceast afirmaie este n mare parte adevarat deoarece paginile web produse folosesc design-ul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform standardelor W3C, dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate acestea, Macromedia a crescut suportul pentru16

tehnologia CSS precum i alte modaliti de design fr a fi necesar folosirea design-ului pe baz de tabel. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i modifica un paragraf sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare. Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare dinamic a coninutului. De asemenea este oferit suport pentru conectarea la baze de date (cum ar fi MySQL i Microsoft Access) pentru a filtra i afia coninutul folosind script-uri de genul PHP, ColdFusion, Active Server Pages (ASP) i ASP.NET, fr a avea nevoie de o prealabil experien n programare. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc aceste extensii i le public (att comercial ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online.

17

3.

Detalii tehnice de implementare3.1 Cod al limbajului HTML

Site-ul Istoria Fotografiei este un site web dinamic, realizat cu ajutorului programului Adobe Dreamweaver CS5, folosind noul limbaj HTML5, CSS si JAVA. La realizarea acestui site am folosit scripturi si date (poze i informaii) culese de pe diferite site-uri de profil gsite cu ajutorul motorului de cutare Google. Proiectul este alctuit din 11 fiiere de tip *.html structurate astfel: - fiierul index.htm este pagina de acasa; el un banner rotativa si deasemenea contine un priview al informatiilor gasite pe site. Codul HTML se mparte n 2 pri:18

- care reprezint lista de meta-tag-uri, titlul site-ului, informaii despre copyright, cuvinte cheie, selectarea codificrii (utf-8 pentru englez/romn) nserare de scripturi, etc.

- care reprezint pagina propriu zis, care se va mpri la rndul ei n fragmentele necesare.

Am structurat aceast lucrare n 5 diviziuni: Caracteristici, Tehnica, Web 2.0 o calitate noua, Retelele sociale, Contact.

19

Site-ul creat conine o zon cu meniuri fix. Cele cinci diviziuni ale sale se gsesc n susul paginii din proiect.

Aceasta zona asigura legtura ntre paginile site-ului, prin legturi de tip hiperlink.

3.2

Adobe Photoshop CS4

Adobe Photoshop este un foarte complex editor att pentru imagini cat i pentru animaii. Aa cum am specificat n pagina web, fiecare efort de manipulare a imaginii este de fapt un set de relaii ntre subiecte i obiecte, capabile s-i schimbe poziia tot timpul. Am decis s folosesc Adobe Photoshop-ul pentru a aduce efecte unor imagini, pentru a crea cteva chenare i pentru folosirea unor fonturi pe care Adobe Dreamweaver-ul nu le are.

3.3

Codul surs

Caracteristici - Pavelescu Razvan 20

Caracteristici

Tehnica Web 2.0 - o noua calitate Retele "sociale" Contact cience Descoperind o noua atitudine Web 2.0 este un termen care desemneaz o mulime ntreag de aspecte interactive i colaborative ale Internetului, i aici n special ale World Wide Web, de natur foarte recent - aprute prin anii 2004 - 2005. Deci la Web 2.0 nu este vorba de versiunea doua a unui software sau a unei tehnici web. 21

1 Calitate

2Schimbare de perspectiva Web 2.0 desemneaz noi ci de a implementa i exploata posibilitile organizatorice ale webului Web 2.0 desemneaz (destul de vag) noi ci de a implementa i exploata posibilitile organizatorice ale webului. Conform acestora, coninutul i informaia din web nu mai e oferit vizitatorilor numai de ctre mass media, guverne i companii particulare, ci i de persoane particulare, legate ntre ele prin reele informale bazate pe Internet, i care contribuie i particip activ la punerea la dispoziie i rspndirea informaiilor pe ntregul glob. Exemple tipice pentru acest nou aspect sunt aa-numitele wiki-uri, weblogs sau mai simplificat blogurile, precum i portalurile i bursele de schimb de imagini, muzic, filme/video i software din Internet, aa cum ar fi Flickr, YouTube i siturile pentru File sharing. De asemenea i aa numitele reele sociale, cum ar fi Facebook sau Twitter. Mediile din ntreaga lume au reacionat intens la aceste puncte de vedere noi, bnuindu-se chiar c ele vor avea efecte sociale i economice directe. Exist ns i voci critice care, contiente c ndrtul lui Web 2.0 nu st nicio tehnologie nou, se plng de faptul c termenul nu e definit exact i poate fi deci exploatat dup pofte de ctre unele companii - de exemplu cu scopuri publicitare sau economice sau chiar pentru trafic de influen. Un exemplu pozitiv sunt activitile de marketing ale unor companii care ncearc s-i conving clienii s participe activ chiar ei la proiectarea i realizarea paginilor web oferite de firma respectiv. Deci, n loc de metoda push (paginile web ale firmei trebuie s-i mping pe clieni s cumpere), se ncearc principiul pull (clienii poteniali sunt atrai s participe la crearea paginilor web ale firmei, dar bine-neles tot cu scopul de a-i determina s cumpere). Retelele ntr-o reea social membrii nscrii particip chiar ei la coninutul reelei Citeste Tehnica Tehnicile folosite de Web 2.0 Citeste Blogger Avantaje: Hosting pe servere internationale, stabilitate, uptime mare, Adsense, scripturi
23

Dezavantaje: Inexistenta unei retele propriuzise, promovare si vizibilitate slaba, functii putine, extrem de complicata realizarea unui design unic
Recomandare: Incepatorilor, celor fara niciun fel de cunostinte tehnice, fara pretentii de design ori functii. Joomla

Joomla! este un Content Management System (CMS), premiat in nenumarate ocazii, care te ajuta sa construiesti websiteuri si alte puternice aplicatii online. In plus, Joomla! este o solutie Open Source disponibila tuturor, gratuit.

Wordpress Wordpress este un CMS (content management system - sistem de administrare a continutului), folosit des ca aplicatie de publicare a blogurilor, care este creat cu PHP si MYSQL. Are foarte multe caracteristici, incluzand si arhitectura pentru pluginuri si teme (template system). Citeste Citeste 24

Citeste

Caracteristici

Tehnica Web 2.0 - o noua calitateRetele "sociale" Contact Site realizate de Pavelescu Razvan, cls a XII-a A - pentru atestare profesionala - Grup Scolar Bicaz 2012 Cufon.now();

25

4.

Resurse utilizate

Site-ul a fost realizat cu ajutorul urmtoarelor programe: Adobe Dreamweaver CS4, Adobe Photoshop CS4 i Paint.net. Resurse recomandate: 1) Hardware : Procesor (CPU): 1000 MHz + Memorie (RAM): 128 MB Spaiu liber pe hard-disk : 120 MB Monitor : VGA 32-bit color (1024x768) Un browser oarecare: Internet explorer, Mozilla, Opera, CometBird

2) Software : - Sistem de operare : Windows XP/Vista/Windows 7 Cerine minime: 1) Hardware: Procesor (CPU): 500 MHz + Memorie (RAM): 64 MB Spaiu liber pe hard-disk: 60 MB Monitor: 1024*768 Un browser oarecare: Internet explorer, Mozilla Firefox, Opera, CometBird

2) Software: - Sistem de operare: Windows XP

26

5.

Modaliti de utilizare

Putei accesa site-ul Web 2.0 apsnd dublu click sau enter pe fiierul denumit index.html. Link-urile de meniul aliniat la dreapta din susul paginii v ofer acces spre fiecare element important al acestui site.

-

Folderul site-ului contine urmatoarele fisiere: 8 fisiere tip *.html folderul images continand poze si toate elementele grafice folderul css continand fisiere Cascading Style Sheet folderul js continand scripturile java utilizate in pagina web

Meniul site-ului este realizat in stil de stea, pagina Acasa fiind in centrul stelei. Tehnica

Retele sociale Caracteristci

Web 2.0 o calitate noua

Contact

27

6.

Concluzii finale

Site-ul de fa constituie un mic review pentru web 2.0. Datorit interfaei prietenoase orice utilizator al acestei pagini web poate accesa cu uurin fiecare informaie, fie el amator sau profesionist. Informaiile pot fi folosite ca material didactic pentru elevii interesai deoarece aceasta pagina web contine date generale despre web 2.0. Parerea mea este ca, nucleul interactivitii acestei pagini web l constituie multitudinea de imagini care faciliteaz interpretarea dar i procesarea tuturor informaiilor de ctre utilizator.

28

7.

Bibliografie

n realizarea acestei pagini Web am folosit informaii din cri luate de la bibliotec i am accesat mai multe site-uri precum: o o o o o http://www.wikipedia.ro http://www.google.com/images http://wordpress.com/ http://ac-webs.com/ Web 2.0 un nou inceput, Editura Tehnocrat 2011

29