Curs 2 - Medii Si Tehnologii Educationale Interactive

Tehnici de informare i comunicare
Medii i tehnologii educaionale interactive
Prezentare general
Acest curs urmrete formarea cursanilor n utilizarea unui ansamblu de tehnologii orientate spre exploatarea unui mediu colaborativ de creare i distribuire de cunotine. Absolvenii unui astfel de curs pot contribui decisiv n rezolvarea problemei asigurrii resurselor de formare n domenii cu rat mare de nnoire a cunotinelor, mecatronica fiind evident, unul dintre acestea. Ca suport pentru tehnologiile propuse se folosete reeaua Internet, cunotinele predate urmrind paii necesari codificrii i distribuirii de informaii tehnice.
Obiective
Cursul abordeaz urmtoarele teme generale:
Comunicarea prin Internet. Arhitecturi, standarde i protocoale; Codificarea documentelor n HTML (XHTML) Formatarea documentelor folosind CSS (Cascade Style Sheets) Baze de date. Pagini web generate dinamic Platforme de e-learning. Funcii, instalare i configurare Realizarea i publicarea materialelor de formare n format electronic Administrarea platformei de e-learning din perspectiva profesorului
nsuirea cunotinelor incluse n material va permite cursanilor s realizeze i s prezinte ntr-o form deosebit materialele proprii de formare elaborate pe parcursul proiectului i nu numai. Autorii
Capitolul I Limbajul HTML

1.1 Istoric
n urm cu peste 30 de ani, la sfritul anilor '60, Departamentul Aprrii din S.U.A. a pus bazele primei reele de calculatoare destinat s acopere o larg ntindere geografic, ARPAnet (Advanced Research Projects Agency Network). Scopul reelei era schimbul de informaii cu caracter tiinific i tehnic ntre participanii la diferite proiecte de cercetare din cadrul Departamentului Aprrii i cercettori din instituii de nvmnt superior implicate. transferul de date prin reelele de Rezultatele obinute n cadrul acestui (TCP/IP Transfer Control proiect au condus la definirea i apoi la standardizarea unor protocoale folosite la calculatoare Protocol/Internet Protocol, HTTP - HyperText Transfer Protocol, FTP - File Transfer Protocol i altele) i a determinat n anii '70 i '80 o extindere lent dar continu a reelelor de calculatoare. naintea exploziei informaionale din anii '90 au mai trebuit s apar dou realizri importante: 1. Dezvoltarea limbajului HTML, propus de Dr. Tim Berners-Lee, ntr-un articol publicat n 1989. Articolul propunea folosirea pentru codificarea informaiei vehiculate prin reelele de calculatoare a unui subset de marcaje definite n standardul SGML (Standard Generalized Markup Language, 1986). n esen SGML propune un set de marcaje care permit reconstituirea documentelor difuzate pe suport electronic. 2. Apariia n februarie 1992 a primei aplicaii destinate navigrii pe Internet, Mosaic. Aplicaia a fost scris de studeni ai NCSA (National Center of Supercomputing Applications) din cadrul universitii statului Ilinois, USA. Limbajul HTML a fcut obiectul unor standardizri succesive, prima versiune finalizat fiind 2.0, n 1995 (autori Tim Berners-Lee i Dan Connoly). Importana dezvoltrii limbajului a condus la crearea World Wide Web Consortium (W3C), organizaie care n 1997 a finalizat versiunea 3.2 care i n prezent este recunoscut ca standardul HTML.

Spre finele anilor '90 au aprut ns noi tehnologii, legate de realizarea paginilor Web: Cascading Style Sheets (CSS), Active Server Pages (ASP), ceea ce a determinat continuarea activitii n domeniul standardizrii a W3C, organizaia realiznd succesiv standardele 4.0 i 4.01. fiind n curs de pregtire versiunea 5. n viitorul previzibil, HTML va continua s reprezinte suportul pentru difuzarea de informaii prin Internet. Ultima versiune este 4.1, actualmente
1.2. Adresarea
Regsirea unui fiier printre miliardele de fiiere existente n World Wide Web se bazeaz pe folosirea unui sistem unitar de adresare pus la punct odat cu internetul. Sistemul de adresare poart numele de URL (Uniform Resource Locator). Astfel, dac se afieaz n fereastra unei aplicaii de navigare pagina principal a saitului proiectului FLEXFORM aceasta ar putea arta ca n figur.
n caseta pentru introducerea adresei a aplicaiei de navigare s-a tastat adresa http://www.flexform.ro/.

Prima parte a adresei (http) precizeaz protocolul care trebuie folosit pentru exploatarea fiierului, n cazul dat http (HyperText Transfer Protocol) deoarece fiierul este n format hypertext i codificat n html. A doua parte a adresei, www.flexform.ro identific un director de pe discul serverului care gzduiete saitul. 0 i 255. De Ea poate fi scris i folosind adresa fizic din adresele http://www.flexform.ro/ i Internet alocat serverului, care este format din patru numere cuprinse fiecare ntre exemplu http://193.226.7.213/siteflex/ sunt echivalente dar a doua este mai greu de reinut. Punerea n coresponden a celor dou modaliti de indicare a directorului care conine pagina web dorit se realizeaz de una dintre aplicaiile pentru DNS (Domain Name System) accesate de browser. Dac adresa indicat n browser nu mai conine i alte caractere, serverul de Web specificat va trimite solicitantului pagina principal a saitului, fiierul corespunztor fiind denumit de obicei index.html. Adresa unui fiier din Internet poate fi ns mai complex. Astfel adresa
http://www.flexform.ro/cursanti/autentif.html conine dup denumirea serverului o cale, /cursanti/ i denumirea fiierului referit, autentif.html. Aceasta nseamn c n directorul saitului exist un subdirector (cursanti) n care este nregistrat fiierul autentif.html. Se poate deci scrie: URL = protocol + server + cale + fiier Crearea unui numr de subdirectoare derivate din directorul principal al saitului face ntreinerea acestuia mult mai uoar. Aa cum se va vedea n capitolele urmtoare, chiar i n cazul unui sait mic numrul de fiiere coninnd imagini sau a alte tipuri de fiiere poate fi destul de mare, fiind indicat o structurare a lor ca n figur.
imagini
css
pagini web (fiiere .html)
1.3 Principiile limbajului HTML

Codificarea informaiilor n HTML se bazeaz exclusiv pe informaii de tip text (iruri de caractere ASCII). Dac informaia propriuzis este un text acest sistem de codificare este natural. Dac ns informaia este de alt natur (o imagine, o secven video sau audio) documentul n format HTML va conine numele fiierului care conine informaia respectiv. Exemplu de fiier n format hypertext:
<HTML> <HEAD> <TITLE>Prima pagina Web</TITLE> </HEAD>
<BODY bgcolor=yellow> <H1> NUMAI UNA </H1> <P> Pe umeri pletele-i curg rau <BR> Mladie ca un spic de grau, <BR> Cu sortul negru prins in brau, <BR> O pierd din ochi de draga. <BR> Si cand o vad, innebunesc; <BR> Si cand n-o vad, ma-nbolnavesc, <BR> Iar cand merg altii de-o petesc, <BR> Vin popi de ma dezleaga. </P> <IMG src="imagini/cosbuc.jpg" alt="George Cosbuc"> </BODY> </HTML>
n fiierul dat ca exemplu <HTML> ... </HTML>, <HEAD> ... </HEAD>, <BODY> ... </BODY> .a. sunt denumite marcaje HTML. src). Unele marcaje (<body> sau <img>) conin informaii suplimentare ca valori ale unor atribute (bgcolor sau Analiznd coninutul fiierului se observ c informaia propriuzis este ncadrat ntre marcaje <H1> ... </H1> i <P> ... </P>. Marcajul <H1> delimiteaz un titlu (eng. heading) iar <P> ... </P> delimiteaz un paragraf (eng. paragraph). n coninutul fiierului apar i marcaje <BR>. Acestea indic trecerea la linie nou (eng. break) i nu au pereche. Pentru inserarea unei imagini s-a folosit tot un marcaj fr pereche, <IMG>. Acesta indic fiierul care conine imaginea. n exemplul dat atributul src are valoarea "imagini/cobuc.jpg", deci fiierul cobuc.jpg este situat n subdirectorul imagini. Dup scrierea fiierului n Notepad i salvarea sub numele numai_una.html se poate deschide fiierul folosind de exemplu Internet Explorer.
1.4. XML, XHTML

Un limbaj similar limbajului HTML este XML. Spre deosebire de HTML, n XML sintaxa este mai riguroas, marcajele aprnd n mod obligatoriu n perechi. Semnificaia lor este ns nedefinit, interpretarea cznd n sarcina aplicaiilor care exploateaz respectivele fiiere. Faptul c limbajele de programare actuale integreaz funcii specializate pentru prelucrarea fiierelor n format XML a favorizat apariia unui limbaj nou de codificare a paginilor Web, XHTML.

Deosebirile majore dintre HTML i XHTML constau n faptul c marcajele i atributele acestora sunt scrise cu litere mici, toate marcajele apar n perechi i valorile atributelor sunt obligatoriu cuprinse ntre ghilimele. Observaie: Pentru scrierea marcajelor din HTML care practic nu au nevoie de pereche se folosete o sintax aparte. Astfel, pentru trecerea la linie nou n loc s se secrie <br></br> se va scrie mai simplu <br />. La fel pentru inserarea imaginii se scrie <img src="nume_fisier" alt="George Cosbuc" />. n XHTML pagina Web analizat deja s-ar scrie astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head> <title>Prima pagina Web</title> <style type="text/css"> body { background-color: yellow; } </style> </head> <body> <h1> NUMAI UNA </h1> <p> Pe umeri pletele-i curg rau <br /> Mladie ca un spic de grau, <br /> Cu sortul negru prins in brau, <br /> O pierd din ochi de draga. <br /> Si cand o vad, innebunesc; <br /> Si cand n-o vad, ma-nbolnavesc, <br /> Iar cand merg altii de-o petesc, <br /> Vin popi de ma dezleaga. </p> <img src="cosbuc.jpg" /> </body> </html> Fiierul astfel modificat se salveaz sub acelai nume. Primele dou linii din fiier impun browserului modul de tratare a informaiei coninute:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10

DTD (Document Type Definition) indic pe lng natura informaiei coninute (XHTML 1.0) i setul de marcaje utilizate. n exemplul considerat s-a indicat modelul Strict. n loc de Strict se putea indica modelul Transitional, diferena dintre cele dou fiind lista de marcaje i de atribute utilizabile, mai restrns n cazul variantei Strict. A doua linie face trimitere la o adres din Internet. Fiierul referit conine
definiia riguroas a modelului Strict, respectiv modul n care trebuie interpretate marcajele i atributele acestora. n acest mod se dorete impunerea tratrii uniforme, de ctre toate browserele, a coninutului paginilor Web. O alt diferen notabil a variantei XHTML fa de HTML este adugarea n seciunea <head> a marcajului <style>. Acesta conine indicaii privind formatarea coninutului paginii web sub forma unor reguli. Pentru pagina considerat s-a inclus o singur regul: body { background-color: yellow; } Ea impune pentru corpul paginii (seciunea <body>) colorarea fundalului n galben. Caracteristic pentru XHTML este separarea informaiilor propriuzise de Astfel, n HTML pentru a scrie diferit o poriune dintr-un indicaiile de formatare.
paragraf am putea ntlni o succesiune de marcaje ca n exemplul urmtor: <P>Poezia <I><B><FONT color=blue>Numai una...</FONT></B></I> a fost publicata in 1837. </P> n XHTML acelai efect s-ar obine scriind: <p>Poezia <span class="bib">Numai una...</span> a fost publicata in 1837. </p> Marcajul <span> face referin la clasa bib. Definirea ei se poate face prin
adugarea unei reguli suplimentare ntre <style> ... </style>: <style type="text/css"> body { background-color: yellow; } .bib {font-style: italic; font-weight: bold; color: blue} </style> A doua variant de formatare, specific limbajului XHTML este interesant deoarece orice clas astfel definit va putea fi referit n pagina Web ori de cte ori este nevoie. Aa cum se va vedea n continuare, ansamblul de reguli introdus prin <style> poate fi salvat ntr-un fiier separat, utilizarea regulilor definite putnd fi imediat extins la toate paginile care alctuiesc un sait Web dndu-le un aspect
11

unitar. De asemenea eliminarea din corpul paginii (seciunea <body>) a detaliilor
privind formatarea faciliteaz ntreinerea coninutului paginilor.
1.3 Marcaje XHTML
1.3.1. Generaliti
Avnd n vedere avantajele limbajului XHTML i tendina actual de a se renuna la HTML n favoarea limbajului XHTML, n cele ce urmeaz vor fi prezentate doar cunotine de XHTML. O pagin web este coninut ntre marcaje <html> ... </html> i este constituit de cele mai multe ori din dou seciuni, head i body. Seciunea head este delimitat prin <head> ... </head> iar seciunea body este delimitat prin <body> ... </body>. Practic majoritatea paginilor care vor fi scrise n cadrul cursului se vor ncadra n structura urmtoare:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> ...(coninut head) </head> <body> ... (coninut body) </body> </html>
1.3.2 Paragrafe
Ca i n cazul banal al unui document editat cu un procesor de texte, fiecare fraz dintr-o pagin Web este coninut ntr-un paragraf. paragraf se folosete perechea de marcaje <p> ... </p>. Pentru evidenierea unui
12

Exemplu: <p>Primul paragraf poate conine informaii generale. Urmtoarele peragrafe vor aduce precizri suplimentare, n final mesajul transmis fiind limpede. </p> Dispunerea coninutului paragrafului este lsat la latitudinea aplicaiei de navigare. Dac n cadrul unui paragraf trebuie totui trecut forat la linie nou, n locul n care se dorete ruperea paragrafului se va folosi un marcaj <br />. Exemplu: <p> Pe umeri pletele-i curg rau <br /> Mladie ca un spic de grau, <br /> .... </p> n unele cazuri se dorete ca browserul s nu separe pe linii consecutive dou iruri de caractere ntre care exist spaiu. marcaje <nobr> ... </nobr>. Exemplu: <p>Sunai la <nobr> 0745 225236 </nobr> pentru informaii suplimentare.</p> Pentru scrierea caracterelor specifice limbii romne este indicat includerea n seciunea head a marcajului: <meta http-equiv="content-type content="text/html; charset=windows-1252" /> diacriticele putnd fi apoi codificate folosind urmtoarele succesiuni de caractere: Simbol Cod Ş ş Ă ă Â â Simbol Cod Ţ ţ Î î Este cazul numerelor de telefon de exemplu. Pentru astfel de situaii se poate ncadra irul care nu trebuie separat ntre
13

i pentru alte caractere speciale, de exemplu pentru cele folosite la scrierea marcajelor, trebuie folosite secvene de caractere:
< > -
pentru caracterul spaiu pentru < pentru > pentru &
& -
Pentru a evidenia pri dintr-un paragraf se folosesc marcajele <em> ... </em> i <strong> ... </strong>. caractere ngroate (bold). Primul marcaj este interpretat de browsere ca indicnd scrierea nclinat (italic) iar al doilea este interpretat ca indicnd o scriere cu
1.3.3 Titluri
Titlurile din paginile web sunt ncadrate ntre marcaje <h> ... </h>. Ca i n cazul procesoarelor de texte se pot folosi marcaje diferite pentru titluri de diferite nivele : h1, h2, , h6. n lipsa unor specificaii privind mrimea caracterelor, pentru nivelul 4 textul va fi afiat normal. Mrimea caracterelor pentru nivelele 5 i 6 va fi n acest caz mai mic dect cea normal iar pentru 1-3 va fi mai mare. Exemplu: <h2>Programul de lucru cu publicul </h2>
1.3.4 Liste
Marcajele XHTML permit definirea mai multor tipuri de liste.
1.3.4.1 Lista ordonat

Lista ordonat este declarat prin marcajul <ol> (ordered list) i are rndurile numerotate. Fiecare linie este ncadrat ntre marcaje <li> ... </li>.
14

Exemplu <ol> <li>Introducere </li> <li>Limbajul HTML </li> <li>Sistemul de operare UNIX </li> <li>Publicarea saitului pe un server UNIX </li> </ol> Numerotarea liniilor este automat. dorit pentru prima linie a listei: <ol start="4"> <li> Introducere </li> ... </ol> Pentru a ncepe numerotarea de la o valoare diferit de 1, marcajului <ol> i se va aduga atributul start=n, n fiind numrul
1.3.4.2 Lista neordonat

Lista neordonat este declarat prin marcajul <ul> (unordered list) i are rndurile precedate de puncte. Fiecare linie este ncadrat de marcaje <li> Exemplu: <ul> <li>Introducere </li> <li>Limbajul HTML </li> <li>Sistemul de operare UNIX </li> <li>>Publicarea saitului pe un server UNIX </li> </ul> </li>.
1.3.4.3 Lista coninnd definiii

Lista coninnd definiii este declarat prin marcajul <dl> (definition list) i are rndurile precedate de marcaje <dt> pentru titluri i <dd> pentru definiii.
<h2> Definitii</h2> <dl> <dt>Pagin Web </dt> <dd>Fiier (document) aparinnd WWW. </dd> <dt>Server Web </dt>
15

<dd>Calculator care memoreaz pagini web i le pune la dispoziia utilizatorilor reelei. </dd> <dt>Sait Web </dt> <dd>O colecie de pagini Web ntreinut de o firm, o instituie de nvmnt, o agenie guvernamental sau chiar de un individ. </dd> </dl>
1.3.5 Imagini
Pentru includerea n pagina web a unei imagini se folosete marcajul <img />. Acesta accept atributele src pentru indicarea fiierului care conine imaginea i alt pentru definirea textului care va apare n locul imaginii dac afiarea imaginilor n fereastra browserului este inactivat sau la plasarea cursorului mouse-ului deasupra imaginii.
Exemplu: <img src="imagini/trandafir.jpg" alt="Trandafir" />
Din punctul de vedere al programului de navigare, o imagine este un simbol ca i oricare dintre caracterele afiate n pagin. Fa de text, imaginile necesit un timp de ncrcare mai ndelungat, ceea ce impune limitarea mrimii i a numrului de imagini din paginile web. Imaginile pot proveni din diferite surse : alte pagini web, pot fi scanate sau desenate cu ajutorul unei aplicaii specializate.
16

Rezoluia imaginii, cuprins uzual ntre 72 DPI (dots per inch, puncte pe inci) i 600 DPI, influeneaz mrimea fiierului care conine imaginea. Monitoarele uzuale afieaz punctele la 0.23-0.26 mm, deci au o rezoluie de aproximativ 96 DPI. Dac imaginile nu trebuie ulterior imprimate i nu se dorete modificarea mrimii lor n momentul afirii n fereastra browserului, se recomand scanarea folosind aceast rezoluie. Imaginile care trebuie afiate n paginile web sunt pstrate n fiiere separate. Deoarece memorarea informaiei grafice se poate realiza folosind o multitudine de tehnologii, prin convenie formatul fiierelor destinate afirii n cadrul paginilor web trebuie s fie GIF (Graphics Interchange Format, avnd extensia .gif, formatul suportnd 256 culori), JPEG (Joint Photographic Experts Group, avnd extensia .jpg, formatul suportnd 224 = 16777216 culori) sau PNG (Portable Network Graphics, variant ameliorat a formatului GIF avnd extensia .png). Dac aceeai imagine este folosit pe mai multe pagini, programul de navigare o va ncrca i memora temporar pe disc reducnd astfel timpii de ncrcare a paginilor. Adaptarea unei imagini la cerinele unui proiect presupune n principal decuparea zonei interesante i redimensionarea acesteia n coresponden cu spaiul alocat n pagin. Exist o multitudinde de aplicaii care permit manipularea imaginilor. Cele mai utilizate sunt urmtoarele: Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro, The GIMP, Inkscape, Pixel image editor, Paint.NET sau Xara. Alegerea unei aplicaii potrivite pentru realizarea activitilor legate de web design este simpl dac se urmrete minimizarea costurilor deoarece numai Inkscape, The Gimp i Paint.NET sunt gratuite. n cadrul cursului, prelucrrile de Un tutorial succint imagini vor fi realizate cu Inkscape (http://www.inkscape.org/).
din care se poate nva folosirea aplicaiei poate fi accesat la adresa: http://en.flossmanuals.net/Inkscape/.
17
1.3.6 Mic tutorial Inkscape

Din punct de vedere al realizrii grafice, un sait trece prin dou faze. n prima faz se realizeaz un "layout". Practic este vorba despre un fiier n care informaia este dispus pe mai multe nivele, la baz fiind nivelul care conine un fundal. Nivelele conin text, alte mici imagini (de exemplu fundalul unor butoane) sau dreptunghiuri pline care delimiteaz exact zona n care va fi afiat o prezentare (video, succesiune de imagini etc.). Pentru aceast etap se folosete o aplicaie specializat pe informaie grafic deoarece trebuie deplasate i redimensionate imagini, trebuie create diferite efecte i construite imaginile care vor fi folosite ca fundal. Exemplu:
Dup ncheierea acestei etape rezultatul este prezentat firmei care a comandat lucrarea n vederea obinerii aprobrii pentru continuare pe soluia propus. Recomandare: Pentru reuita unui proiect este bine s fie studiate ct mai
multe realizri nrudite, o surs important de inspiraie pentru graficieni i nu numai fiind http://www.templatemonster.com. A doua faz, de decupare (engl. slicing), const n divizarea imaginii obinut ca fundal n prima etap n imagini mai mici a cror alturare permite refacerea fundalului iniial. Aceste imagini vor constitui fundalul unor blocuri care, n etapa de integrare, vor primi informaia efectiv (text, imagini, player video, galerie de imagini n JavaScript sau Flash, etc.).
18

n aceast etap se ascund informaiile iniial introduse n layout rmnnd numai fundalul paginii. Apoi se decupeaz blocurile de imagine dorite i se salveaz fiecare bloc ntr-un fiier separat. Aceste fiiere vor primi denumiri sugestive pentru a putea fi uor identificate i integrate n blocurile care vor fi definite n etapa urmtoare (etapa zis "de integrare").
a. Redimensionarea unei imagini Se pornete aplicaia Inkscape, se deschide fiierul care conine imaginea (File / Open) i se selecteaz fiierul dorit.
Dac fiierul conine o imagine se selecteaz imaginea i apoi se selecteaz n meniul aplicaiei Object / Transform. Aplicaia va afia o fereastr n care se selecteaz tabul de selecie Scale. De obicei dimensiunile imaginilor sunt date n pixeli (puncte ecran) i din acest motiv se selecteaz ca i unitate de msur px.
19
b. Decuparea unei zone dreptunghiulare Dac se dorete decuparea unei poriuni dreptunghiulare dintr-o imagine, se va desena un dreptunghi care ncadreaz regiunea dorit i apoi se va selecta File / Export Bitmap i se va preciza fiierul n care se va pstra noua imagine. Fiierul va fi n format .png. Exemplu:
20
Numele fiierului .png (rect3679) poate fi editat. Numele iniial afiat a fost stabilit folosind denumirea intern a obiectului (dreptunghi) folosit la selecie. c. Slicing (decuparea imaginii de pe fundal) nceperea lucrului la un sait presupune frecvent activiti de decupare a unei imagini pe care un grafician a plasat-o ca fundal al saitului. n urma decuprii imaginii folosite ca fundal vor fi obinute mai multe imagini care vor fi ulterior aplicate ca fundal blocurilor care compun pagina Web i care vor conine informaia propriuzis (text, alte imagini etc). felie). Deoarece n HTML blocurile care formeaz pagina sunt dreptunghiulare, ne intereseaz doar decuparea n aceast form. Pentru a realiza decuparea unei imagini n poriuni mai mici se vor suprapune peste imagine o serie de dreptunghiuri care vor fi utilizate n final pentru tierea poriunilor dorite. Pentru a realiza toate dreptunghiurile naintea decuprii Numele consacrat al acestei activiti este slicing (slice =
21

propriuzise, activitatea va ncepe prin declararea unui nou nivel (layer) care va conine doar dreptunghiuri de selecie.
Noul nivel este imediat impus ca nivel curent. Numele nivelului curent este afiat permanent n partea de jos a ferestrei aplicaiei, n bara de stare.
n noul nivel se deseneaz un dreptunghi suprapus peste una dintre zonele care trebuie decupat. Dimensiunile dreptunghiului pot fi adaptate cu mouse-ul sau pot fi modificate direct, schimbnd valorile afiate pe bara cu instrumente.
22

Pentru a modifica aspectul dreptunghiului (culoare, transparen) se
selecteaz n meniu Object / Fill and Stroke sau se apas butonul instrumente.
de pe bara cu
Rou Verde Albastru Transparen n procesul de decupare vor fi realizate evident mai multe dreptunghiuri. Din considerente legate de uurina manipulrii acestora este bine s fie declarate parial transparente i colorate ntr-o culoare distinct, dei naintea folosirii lor pentru decuparea zonelor dorite acestea vor fi declarate din nou ca fiind complet transparente. Nivelul de transparen se impune prin deplasarea ultimului cursor din fereastr, A (prescurtare de la alpha chanel, denumirea consacrat a componentei transparen). (complet opac). O funcie interesant a aplicaiei Inkscape este posibilitatea impunerii unei alinieri perfecte a unui dreptunghi astfel desenat fa de oricare dintre laturile imaginii iniiale sau fa de alt dreptunghi. Transparena poate varia ntre 0 (complet transparent) i 255
23

Pentru primul caz, alinierea fa de o latur a imaginii iniiale, se afieaz fereastra Align and Distribute (din meniu Object / Align and Distribute sau butonul de pe bara cu instrumente) i se selecteaz dreptunghiul (butonul Situaia iniial: ).
i finalul:
Pentru a realiza o aliniere perfect a laturilor corespunztoare n cazul n care sunt realizate mai multe dreptunghiuri de selecie, fereastra Align and Distribute conine butoane care permit poziionarea unui dreptunghi fa de alt dreptunghi, construit anterior i care este identificat implicit ca referin. Pentru a realiza o astfel de aliniere se selecteaz cu mouse-ul ambele dreptunghiuri (dreptunghiul curent i referina) i se apas butonul (Align tops of objecte to bottom of anchor).
24

Situaia iniial:
Comand aliniere:
Rezultat:
n procesul de decupare este necesar frecvent duplicarea unui dreptunghi deja realizat. Pentru aceasta se selecteaz cu butonul drept dreptunghiul realizat i apoi se selecteaz n meniul contextual afiat opiunea Duplicate. Noul dreptunghi va fi realizat peste cel de referin, deci trebuie imediat deplasat cu mouse-ul i apoi redimensionat i aliniat. Dimensiunile finale ale dreptunghiurilor de selecie trebuie
25

notate deoarece blocurile n care acestea vor fi plasate ca imagini de fundal trebuie s aib aceleai dimensiuni.
n meniul contextual afiat la selectarea unui dreptunghi se afl i opiunea Object properties. n urma selectrii acestei opiuni se afieaz o fereastr n care se poate introduce un nume pentru dreptunghiul selectat. Acest nume va fi pstrat i pentru fiierul care va conine poriunea din imagine decupat cu ajutorul dreptunghiului respectiv.
26

Se reduce parametrul A la 0:
Se selecteaz File / Export Bitmap:
Se observ c numele fiierului coincide cu cel al dreptunghiului, formatul implicit fiind evident tot .png.
27
1.3.7 Tabele
Tabelele sunt folosite n paginile web pentru prezentarea informaiilor organizate ca tabele. Tabelele pot servi i la poziionarea informaiei dintr-o pagin web, dar aceast soluie a fost practic abandonat odat cu extinderea utilizrii CSS (Cascade Style Sheet). Un tabel este format din rnduri de celule. descrierea unui tabel sunt: <table></table> - pentru delimitarea tabelului; <tr></tr> - pentru delimitarea unei linii (table row) <td></td> - pentru delimitarea unei celule din cadrul tabelului (table data) <th></th> - pentru celulele din capul tabelului (table header - determin scrierea implicit bold i centrat). Formatul general al unui tabel este: Principalele marcaje folosite la
<table> (ncepe definirea tabelului) <caption> titlul, dac exist </caption> <tr> (ncepe definirea primei linii) <th> coninut </th> (prima celul din linia 1, titlul coloanei) ... <th> coninut </th> (ultima celul din linia 1, titlu) </tr> (sfritul primei linii) <tr> (ncepe definirea liniei 2) <td> coninutul primei celule </td> ... <td> coninutul ultimei celule </td> </tr> (sfritul liniei 2) ............ <tr> (nceputul ultimei linii) <td> coninutul primei celule </td> ... <td> coninutul ultimei celule </td> </tr> (sfritul ultimei linii) </table> (sfritul tabelului)
28

Includerea unei imagini ntr-o celul a tabelului se face normal, incluznd ntre marcajele <td>...</td> marcajul <img>:
<td><img src="pictura.jpg" alt="" /></td>
Exemplu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tabele</title> </head> <body> <h1>Exemplu</h1> <table> <tr> <th>Produs</th> <th>Pret</th> <th>Cantitate disponibila</th> </tr> <tr> <td>Pantofi Lux</td> <td>156</td> <td>243</td> </tr> <tr> <td>Pantofi Carmens</td> <td>174</td> <td>189</td> </tr> </table> </body> </html>
29
Dou atribute care pot fi incluse n marcajele <td> sau <th> permit unirea celulelor. a. colspan="n" - permite unirea a n celule consecutive de pe aceeai linie. Exemplu:
<td colspan="3">Zona de est</td>
b. rowspan="n" - permite unirea a n celule consecutive din cadrul aceleiai coloane. Exemplu:
<td rowspan=3>Valori</td>
Pentru a nu grei la descriere, n cazul unui tabel avnd celule unite se recomand s se porneasc de la o reprezentare grafic a acestuia pe care s se indice celulele care trebuie efectiv descrise, ca n figur:
30
1 2
1 2 3 4 2 3
<table> <tr> <td> ... </td> <td colspan="2"> ... </td> <td> ... </td> </tr> <tr> <td rowspan="3"> ... </td> <td> ... </td> <td colspan="2"> ... </td> </tr> <tr> <td> ... </td> <td colspan="2" rowspan="2"> ... </td> </tr> <tr> <td> ... </td> </tr> </table> linia 4 linia 3 linia 2 linia 1
Exemplu fundamental: O pagin Web tipic afieaz diverse categorii de informaii. n pagina
prezentat n continuare se pot identifica uor diferitele categorii de informaii. Gruparea lor i plasarea n poziiile dorite, att n pagin ct i una fa de alta, se pot realiza folosind tabele i liste formatate.
31
1.3.8 Marcaje pentru definirea legturilor

Una dintre caracteristicile care dau putere web-ului const n posibilitatea includerii de referine la alte pagini, din acelai sait sau din orice sait accesibil prin reea i indicat prin adres (URL). Selectarea cu mouse-ul a unei referine provoac afiarea imediat paginii referite. Pentru includerea unei referine se va folosi marcajul <a> (anchor).
1.3.8.1 Referine selectate folosind iruri de caractere

Se consider o pagin web de intrare ntr-un sait destinat prezentrii principalelor realizri artistice ale lui Michelangelo avnd coninutul urmtor:
32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head><title>Referinte</title></head> <body> <h1>Michelangelo</h1> <ol> <li><a href="Introd.html">Introduction</a></li> <li><a href="Early.html">Early life in Florence</a></li> <li><a href="First.html">First roman sojourn</a></li> <li><a href="Retour.html">First return to Florence</a></li> <li><a href="Sistine.html">The Sistine Chapel ceiling</a></li> <li><a href="JuliII.html">The tomb of Julius II</a></li> <li><a href="Laurent.html">The Laurentian library</a></li> <li><a href="Medici.html">The Medici tombs</a></li> <li><a href="Last.html">The last judgement</a></li> <li><a href="Campido.html">The Campidoglio</a></li> </ol> <hr> <a href="http://sunsite.unc.edu/wm/paint/auth/michelangelo/"> WebMuseum, Paris: Michelangelo</a><em>Biographical information and images of several of his works on the Web.</em> </body> </html>
33
1.3.8.2 Referine selectate folosind imagini

n acelai fel n care sunt ataate irurilor de caractere, referinele pot fi asociate i imaginilor dintr-o pagin web:
<a href="http://www.tigerworld.com"><img src="tiger.jpg" alt="" /></a>
Imaginea folosit pentru specificarea referinei va fi implicit afiat ntr-un chenar a crui culoare respect aceleai reguli ca i culoarea n care ar aprea irurile de caractere folosite pentru referine. Uneori este util plasarea unei imagini mici ntr-o pagin, avnd o legtur spre o imagine mrit. De exemplu o pagin din saitul despre Michelangelo poate avea n pagina despre Capela Sixtin (Sistine.html) cteva astfel de imagini:
<h1>V THE SISTINE CHAPEL CEILING</h1> <p><a href="tavan1.jpg"><img src="imag1.jpg"></a> <a href="tavan2.jpg"><img src="imag2.jpg"></a> <a href="tavan3.jpg"><img src="imag3.jpg"></a></p> <p>Michelangelo was recalled to Rome by Pope Julius II in 1505 for two commissions. The most important one was for the frescoes of the Sistine
1.3.8.3 Folosirea referinelor pentru navigarea n pagini lungi

Referinele pot servi i la navigarea n interiorul paginilor lungi. destinat navigrii ntr-o pagin lung se scrie astfel: O referin
34
<a href="#eticheta"> </a> sau <a href="nume.html#eticheta"></a>
n al doilea exemplu eticheta indic poziia din care se va realiza afiarea paginii nume.html. Punctele din care se dorete nceperea afirii vor fi etichetate. indic numele etichetei. Exemplu : Pentru
declararea unei etichete se va folosi tot marcajul <a> avnd un atribut name care
<html><head><title>Airplanes</ltitle></head> <body> <h1>AIRPLANE STRUCTURE</h1> <p>Airplanes generally share the same basic configurationeach usually has a fuselage, <a href="#aripi">wings</a>, <a href="#coada">tail</A>, landing gear, and a set of specialized control surfaces mounted on the wings and tail.</p> <h2>Fuselage</h2> <p>The fuselage is the main cabin, or body of the airplane. Generally the fuselage has a cockpit section at the front end, where the pilot controls the airplane, and a cabin section. The cabin section may be designed to carry passengers, cargo, or both. In a military fighter plane, the fuselage may house the engines, fuel, electronics, and some weapons. In some of the sleekest of gliders and ultralight airplanes, the fuselage may be nothing more than a minimal structure connecting the wings, tail, cockpit, and engines.</p> <h2><a name="aripi"></a> Wings </h2> <p>All airplanes, by definition, have wings. Some, like the flying wings built by the Northrop-Grumman Corporation, based in the United States, are nearly all wing with a very small cockpit. Others have minimal wings, or wings that seem to be merely extensions of a blended, aerodynamic fuselage, such as the space shuttle.</p> <h2><a name="coada"></a>Tail Assembly </h2> <p>Most airplanes, except for flying wings, have a tail assembly attached to the rear of the fuselage, consisting of vertical and horizontal stabilizers, which look like small wings; a rudder; and elevators. The components of the tail assembly are collectively referred to as the empennage.</p> Dac se dorete trecerea la eticheta #aripi pornind dintr-o alt pagin web, referina ar fi trebuit scris astfel : <a href="airplane.html#aripi">airplane wings</a>
35
1.3.8.4 Folosirea referinelor pentru lansarea n execuie a unor aplicaii

O referin poate declana execuia unei aplicaii instalate pe calculatorul folosit la navigare. Dac referina conine numele unui fiier (audio, video, prezentare multimedia etc.), aplicaia de navigare realizeaz dou aciuni: lanseaz n execuie aplicaia asociat implicit extensiei fiierului i transfer acesteia fiierul preluat prin reea. a. Lansarea n execuie a aplicaiei destinat trimiterii de mesaje prin e-mail. Exemplu:
<p><em>Pentru orice informatii suplimentare puteti scrie autorului lucrarii, conf.dr.ing. Mihai DAMIAN </em> (<a href="mailto:damian_mihai@yahoo.com"> damian_mihai@yahoo.com </a>)</p>
Dac aplicaia implicit destinat trimiterii de mesaje prin pota electronic este Outlook (integrat n Microsoft Office), aceasta va fi automat lansat n execuie i va fi afiat fereastra de editare a unui mesaj destinat adresei indicate dup mailto.
Variant : folosirea unei imagini :
36

<a href="mailto:Damian_Mihai@yahoo.com,Damian@tempus.east.utcluj.ro"> <img src="http://www.baleares.com/fincas/img/email36.gif"></a>
b. Redarea unei prezentri realizate n PowerPoint. Prezentrile multimedia realizate n PowerPoint i salvate n format PowerPoint Show, *.pps:, pot fi redate fie direct n fereastra programului de navigare (cazul aplicaiei Internet Explorer) fie n fereastra aplicaiei PowerPoint, dac aplicaia de navigare nu dispune de posibilitatea redrii acestor fiiere. Exemplu: <a href=prezentare.pps>Pornire prezentare PowerPoint Show</a>
c. Secvene de film. Pentru a reda o secven de film este necesar ca formatul fiierului care conine filmul s fie compatibil cu o aplicaie instalat pe calculator. De regul pentru afiarea secvenelor video se folosete aplicaia Windows Media Player (component Windows). Exemple: <a href=film.wmv>Start film</a> <a href=film.avi>Start film</a> Not: Dac se dorete integrarea secvenei video n pagina Web este necesar integrarea n pagin a unei miniaplicaii specializate. O soluie gratuit, larg folosit, este mediaplayer-ul JW Player. Acesta poate fi descrcat de la adresa http://www.longtailvideo.com/jw/upload/mediaplayer.zip Dup descrcare i dezarhivare se va transfera fiierul player.swf din directorul astfel creat n directorul paginii (obligatoriu!). Secvena de cod care trebuie inclus pentru a insera n pagina Web player-ul descrcat i modul de scriere a parametrilor necesari rezult din exemplul urmtor.
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='480' height='294'> <param name='movie' value='player.swf'> <param name='allowfullscreen' value='true'> <param name='allowscriptaccess' value='always'> <param name='flashvars' value='file=curs13/asimo.mp4&autostart=false&image=curs13/asimo1.png'> <embed src="player.swf" width="480" height="294" bgcolor="#4B0082" quality="best" allowScriptAccess="always"
37

allowFullScreen="true" scale="showall" wmode="opaque" flashVars="file=curs13/asimo.mp4&autostart=false&image=curs13/asimo1.png" pluginspage= "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" /> </object>
n exemplul dat, fiierul care conine filmul redat este plasat ntr-un director derivat (curs13/asimo.mp4). curs13/asimo1.png. acionrii butonului n secvena scris mai apare referit i fiierul Acesta conine o imagine care se va afia pn n momentul .
Parametrii care stabilesc dimensiunile player-ului video sunt with (limea) i height (nlimea). Pornind de la dimensiunile filmului (480x270, valori afiate de Diferena de 24 pixeli pe Windows Explorer) s-au stabilit dimensiunea 480x294.
vertical este necesar pentru a se putea afia bara cu instrumente de control a player-ului. Not: Fiierul asimo.mp4 a fost descrcat din saitul www.youtube.com folosind aplicaia gratuit YouTube Downloader. d. Secvene sonore. Redarea acestora se face similar celor video. Fiierele coninnd secvena sonor pot avea diferite extensii, cele mai ntlnite fiind .waw sau .mp3. Exemple:
38

<a href=sunet.wav>Start secventa sonora</a> <a href=melodie.mp3>Start melodie mp3</a>
1.3.9 Hri de imagini

Se poate crea o imagine avnd mai multe regiuni, fiecare fiind folosit pentru definirea unei referine. Zonele sensibile la selectarea cu mouse-ul pot fi Determinarea coordonatelor punctelor care rectangulare, poligonale sau circulare. coordonatele cursorului.
definesc regiunile se poate realiza folosind Inkscape, care afieaz n permanen Marcajele care se vor folosi n acest caz sunt <map> i <area>. Numele hrii se declar cu ajutorul atributului usemap="#nume" introdus n cadrul marcajului <img>. Exemplu:
<img src="londra.gif" usemap="#depozite" alt="" /> <map id="depozite"> <area shape="rect" coords="29,48,52,70" href="dep1.html" alt="" /> <area shape="rect" coords="39,78,152,120" href="dep2.html" alt="" /> <area shape="rect" coords="190,38,252,70" href="dep3.html" alt="" /> </map>
Pentru declararea zonelor sensibile la aciunea mouse-ului se vor folosi atributele shape pentru a indica forma zonei i coords pentru a-i defini poziia i dimensiunile. Modul de folosire a acestor atribute reiese din exemplele urmtoare: a. Zon de form rectangular (shape="rect"): axa X (29, 48) axa Y
(52, 70) <area shape="rect" coords="29,48,52,70" href="dep1.html" alt="" />
39
b. Zon de form circular (shape="circle"):
R40 (150,100)
<area shape="circle" coords="150,100,40" href="departe.html" alt="" /> c. Zon de form poligonal (shape="poly") (50,10)
(10,80) (100,100) <area shape="poly" coords="10,80,50,10,100,100" href="cluj.html" alt="" />
Exerciiu: Completai prima pagin a saitului LEGOLAB SRL adugnd legturi conform indicaiilor din figur:
40
catalog.html#baza catalog.html#pers catalog.html#anim catalog.html#massmp
catalog.html#avioane catalog.html#masin catalog.html#robo i
41
Rezolvare: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>LEGOLAB</title> </head> <body> <h1>LEGOLAB - laboratorul virtual</h1> <p>Aici e lumea LEGO. Fara bani, doar pasiune!</p> <ul> <li><a href="#">Home</a></li> <li><a href="noutati.html">Noutati si promotii</a></li> <li><a href="arhitectura.html">Arhitectura</a></li> <li><a href="oras.html">Oras</a></li> <li><a href="creator.html">Creator</a></li> <li><a href="jocuri.html">Jocuri</a></li> <li><a href="mailto:legolab_srl@gmail.com">Contact</a></li> </ul> <h2>LEGO - un joc serios</h2> <p>Dac lumea LEGO nseamn multe piese frumoase, bine realizate si pasiune, atunci acest sait este o parte a acestei lumi. Nu veti putea atinge micile componente dar le vei putea folosi ca si cum ar fi pe masa voastra. Faptul ca ele vor fi doar virtuale nu e neaparat un dezavantaj, ba chiar din contra. Lego-ul virtual inseamna 100% joaca, setul vostru fiind nelimitat. Si nu se va imprastia prin toata casa, nici nu veti pierde elemente. </p> <p>Daca nu stiti de unde sa incepeti, selectati una dintre categorii si refaceti constructiile demonstrative. Veti invata repede cum se foloseste jocul nostru.</p> <table> <tr> <td>Diverse</td> <td colspan="3">Vehicule</td> </tr> <td><img src="imagini/creatura.png" alt="" /></td> <td><img src="imagini/masinagalbena.png" alt="" /></td> <td><img src="imagini/moto.png" alt="" /></td> <td><img src="imagini/masina.png" alt="" /></td> </tr> <tr> <td colspan="4">Kituri complexe</td> </tr> <tr> <td><img src="imagini/avion.png" alt="" /></td> <td><img src="imagini/tren.png" alt="" /></td> <td><img src="imagini/avion1.png" alt="" /></td> <td><img src="imagini/robot.png" alt="" /></td> </tr>
42

</table> <h2>Kituri 4-7 ani</h2> <ul> <li><a href="catalog.html#baza">Elemente de baza </a></li> <li><a href="catalog.html#pers">Personaje </a></li> <li><a href="catalog.html#anim">Animale </a></li> <li><a href="catalog.html#massmp">Masini simple </a></li> </ul> <h2>Kituri 7-10 ani</h2> <ul> <li><a href="catalog.html#avioane">Avioane </a></li> <li><a href="catalog.html#masini">Masini </a></li> <li><a href="catalog.html#robo">Roboti </a></li> </ul> <a href="#">Home</a> | <a href="prezentare.html">Prezentare</a> | <a href="produse.html">Produse</a> | <a href="mailto:legolab_srl@gmail.com">Contact</a> <p id="copyright"> 2011. Toate drepturile rezervate. Proiectat de FLEXFORM. </p> </body>
43
Capitolul II CSS
2.1 Aspecte generale

Evoluia web-ului a condus la apariia unui limbaj destinat specificrii aspectului paginilor web, CSS (eng. Cascading Style Sheets). elemente care formeaz coninutul paginilor. Folosind CSS se pot impune proprietile fonturilor, culori, se poate controla poziia imaginilor sau a altor naintea adoptrii pe scar larg a cuplajului XHTML-CSS se ncerca rezolvarea problemelor legate de aspectul paginilor web folosind marcaje HTML i atribute ale acestora dar neuniformitatea tratrii acestora n diferite browsere a devenit o problem a crei adevrat soluie este reprezentat de CSS. Pe lng specificarea modului de afiare a informaiei din paginile web, CSS ofer posibilitatea impunerii acelorai caracteristici ansamblului de pagini care formeaz un sait. CSS este suportat de toate browserele actuale. Deoarece nvarea CSS presupune un mare numr de exerciii i
experimente, este bine s se acceseze saitul
http://www.w3schools.com/css/.
Exerciiile din acest sait se realizeaz ntr-o aplicaie integrat n browser care permite editarea regulilor CSS i vizualizarea imediat a efectelor.
2.2 Sintaxa CSS

Impunerea modului de afiare a informaiei n CSS se realizeaz prin reguli. O regul indic modul n care trebuie afiat un element din pagin. Sintaxa unei reguli este: selector {proprietate:valoare;}
44

Exemplu:
body { background-color: black; }

sau, mai compact:
body {background-color: black;}
Regulile CSS pot fi definite fie ca valoare a atributului style adugat marcajelor HTML, fie pot fi incluse la nceputul paginii, n seciunea head, ntre marcaje <style> ... </style>. Prima variant realizeaz o modificare local, afectnd doar informaia afiat folosind marcajul modificat, n timp ce a doua se extinde la tot fiierul. n cele ce urmeaz se va folosi ns numai a doua variant deoarece scopul utilizrii soluiei XHTML+CSS n locul limbajului HTML este mai ales acela de a separa coninutul paginilor web de informaiile de formatare. Exemple:
<head> <title> Formatarea textului</title> <style type="text/css"> p {color: white; font-family: verdana,arial; font-size:14px; background-color: purple;} </style> </head> <body> ... <p>Text imprimat pe fond purpuriu.</p> ... Rezultat:
<head><title>Examplu mai complicat</title> <style type="text/css">
h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } body {background-color: black;
45

color: white; } p{ color: green; font-family: tahoma,arial,verdana; font-size: 12px; (stil.css) } </style> </head> Observaie: Dac zona de definire a stilurilor ataate diferitelor marcaje este salvat separat, ntr-un fiier denumit de exmplu stil.css, pentru a impune ntr-o pagin web a saitului aceleai modificri, se va include n seciunea <head> a acesteia un marcaj <link> n care se va specifica fiierul care conine definiiile de stiluri, ca n exemplul de mai jos:
<head> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> <body> ... Avantajul acestei soluii const din faptul c aspectul paginilor sitului n care este inclus fiierul stil.css poate uor modificat, prin simpla editare a regulilor coninute de acesta.
stil.css
46
Medii i tehnologii educaionale interactive 2.3 Selectori

Pentru a impune cui se aplic o anumit regul sau un set de reguli, n CSS se folosesc selectori. n regulile deja scrise, body sau p care precedau regulile scrise sunt selectori. Un selector poate fi deci numele unui marcaj XHTML i n acest caz regulile care i-au fost ataate n zona de definire a stilurilor vor fi aplicate peste tot unde se folosete respectivul marcaj. Dar CSS permite i declararea unor selectori noi care vor fi folosii n coninutul paginii ca valori ale atributelor class sau id. Posibilitatea definirii o singur dat a modului n care un marcaj XHTML opereaz reprezint un argument important n adoptarea CSS ca soluie pentru formatare. n paginile web anumite marcaje pot aprea de multe ori (<p> sau <td> de exemplu). ntreinut. Exemplu fundamental: Dac de fiecare dat am modifica aspectul implicit prin atribute suplimentare fiierul rezultat ar fi mult mai mare i mai greu de pus la punct i de
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Examplu de formatare paragraf</title> <style type="text/css"> p {color: white; font-family: verdana,arial; background-color: purple;} /* Comentariu CSS pe mai multe linii */ .verde {color: white; font-family: verdana,arial; background-color: green;} .albastru {color: white; font-family: verdana,arial; background-color: blue;} #col_stg {position: absolute; left:10px; top:50px; width:200px; background:#fff; border:1px solid #000;padding:8px;} #col_centru {background:#fff; margin-left: 217px; margin-top:35px; border:1px solid #000;padding:8px;} </style> </head> <body> <div id="col_stg"> <h1>Coloana din stanga</h1> <p class="albastru">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div>
47

<div id="col_centru"> <h1>Coloana din centru</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p class="verde">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </p> <br /> </div> </body> </html> n definirea stilurilor s-au specificat caracteristicile a cinci selectori: p, .verde, .albastru, #col_stg, i #col_centru. Primul este un marcaj XHTML, deci peste tot unde acest marcaj va fi folosit va determina afiarea n modul specificat. selectori, .verde i .albastru, Urmtorii doi vor putea fi folosii ca valori ale atributului class.
Folosirea unor selectori suplimentari astfel definii face posibil de exemplu ca anumite zone dintr-un paragraf s fie afiate cu un stil diferit de cel obinuit, definit folosind selectorul p. Ultimii doi selectori sunt folosii ca valori ai atributului ID. Spre deosebire de class, o valoare a atributul ID poate aprea ntr-o pagin o singur dat. se divide o pagin. n CSS atributul ID se folosete n principal pentru a specifica proprietile blocurilor n care n exemplul dat selectorii col_stg i col_centru sunt folosii n marcajele destinate divizrii paginii n blocuri, <div>. Practic s-au definit dou blocuri ale cror proprieti au fost astfel stabilite nct pagina s conin dou coloane. Rezultat:
48
Dac un selector .nume definit de programator va fi folosit numai pentru un tip de marcaj html, la declarare se va scrie marcaj.nume{...}. Exemplu:
p.big{font-size: 2em;} ... <p class="big">Scriere cu litere mari.</p> Un grup de reguli poate fi aplicat mai multor selectori. n astfel de cazuri,
naintea grupului de reguli sunt scrii selectorii desprii prin virgule. Exemplu:
49
p, h1, h2, h3, h4, h5 {font-family: Arial; color: black; }
2.4 Culori
Proprietile CSS pentru definirea culorilor sunt color pentru coninut i background-color pentru culoarea fundalului. O culoare este indicat prin nume (pentru culorile obinuite: white, black, red, yellow, green, blue, maroon, orange, olive, purple, fuchsia, lime, navy, aqua, teal, silver i gray) sau este definit prin componentele RGB (Red + Green + Blue, rou + verde + albastru) care o compun. Fiecare dintre componentele culorii poate fi exprimat printr-un numr ntreg cuprins ntre 0 i 255. Definirea culorii poate fi realizat folosind codul hexazecimal sau zecimal. n cazul folosirii codului hexazecimal notaia culorii ncepe cu caracterul '#' i are formatul #rrggbb. Exemplu: #ff7c0d. n cazul n care cele trei componente ale culorii sunt exprimate prin perechi de cifre identice se poate folosi o scriere prescurtat. Exemplu: #ff00aa se poate scrie #f0a. Pentru a exprima n zecimal codul unei culori se va scrie rgb(rrr, ggg, bbb). Exemplu: color: rgb(62, 178, 12). Pentru a obine codul culorii n hexazecimal se poate folosi Inkscape. Astfel pentru a prelua culoarea unui punct de pe o imagine se selecteaz punctul i se citeta codul de pe bara de stare a aplicaiei. Aplicaia afieaz de asemenea o palet de culori n partea de jos a ferestrei. Codul hexazecimal al unei culori din aceast palet este afiat automat la plasarea cursorului mouse-ului peste mostra de culoare afiat. , se indic
50
2.6 Uniti de msur

Unele dintre proprietile elementelor coninute ntr-o pagin web necesit scrierea unei dimensiuni. Cu excepia valorilor nule, dup dimensiune trebuie scris unitatea de msur.
U.M. % in cm mm em
Explicaie procent. Ex: p.big {line-height: 200%} inch. Ex: h2 {margin: 0.5in;} centimetri. Ex. h2 {margin: 0.5cm;} milimetri 1 em este egal cu mrimea normal a fontului. Ex.
51
h1 {font-size: 2em;} (identic cu font-size:200%) pt pc px 1pt=1/72in 1pc=12px pixeli. Exemplu: p {font-size: 12px}
Exemplu: p {margin: 0 20px 0 20px}
2.7. Fonturi
n CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care se afieaz pagina web fontul indicat poate lipsi, dup denumirea fontului (fonturilor) se precizeaz familia din care acesta face parte. family. Fontul "Times New Roman", Gramond, Georgia Arial, Verdana, Helvetica Courier, "Courier New" sans-serif monospace serif Familia Proprietatea futilizat este font-
Exemplu: h1 {font-family: verdana,helvetica, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Majoritatea paginilor web folosesc Verdana. nclinarea caracterelor se stabilete cu ajutorul proprietii font-style, valorile posibile fiind normal, italic sau oblique. Exemplu:
52

h2 { font-family: "Times New Roman", serif; font-style: italic; } Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici (font-variant: small-caps) sau normal (font-variant: normal). Scrierea bold se poate impune folosind font-weight:. Proprietatea poate avea valorile bold sau normal. Dimensiunea caracterelor poate fi impus folosind proprietatea font-size. De obicei mrimea este definit n pixeli (px) sau procentual (% sau em). Este recomandat varianta definirii procentuale deoarece n acest caz rmne posibil mrirea fontului folosind opiunile programului de navigare. Varianta definirii mrimii caracterelor n uniti absolute (px, in, cm, etc.) se aplic n cazurile n care modificarea mrimii fontului n momentul afirii ar afecta grav aspectul acesteia. De exemplu textul plasat deasupra unui buton desenat nu trebuie s poat fi mrit. Exemplu: h1 {font-family: arial, verdana, sans-serif; font-size: 150%; font-weight: bold} h2 {font-family: "Times New Roman", serif; font-size: 120%;}
2.8. Formatarea textului
Formatarea textului se realizeaz cu un set de proprieti care permit diverse tipuri de alinieri, indentri i spaieri. Indentarea textului se realizeaz folosind proprietatea text-indent. Efectul indentrii este decalarea poziiei de nceput a primei linii a fiecrui paragraf cu o mrime impus. Exemplu: p{ text-indent: 50px; }
53

Alinierea textului se realizeaz folosind proprietatea text-align. posibile ale proprietii sunt: left, right, center sau justify. Exemplu:
th { text-align: right; } td { text-align: center; } p{ text-align: justify; }
Valorile
Sublinierea line-through (tiat). Exemplu:

h1 {
sau
bararea
textului
se
realizeaz
folosind
proprietatea
text-decoration. avnd valorile posibile none, underline (subliniat), overline (barat),
text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
Modificarea distanei dintre caractere se realizeaz folosind proprietatea letterspacing. Exemplu:

h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }
54
Controlul
scrierii
cu
majuscule
se
realizeaz
folosind
proprietatea
text-transform. Valorile posibile sunt:

-
capitalize - prima liter va fi majuscul uppercase - toate literele vor fi majuscule, lowercase - toate literele vor fi mici, normal - caracterele vor fi scrise normal.
2.9. Formatarea referinelor
Legturile sunt evideniate n HTML prin sublinierea irului de caractere folosit ca suport i utilizarea unor culori distincte pentru legturile nevizitate sau vizitate. n CSS aceste atribute implicite pot fi modificate. Modificarea culorii, a fontului sau suprimarea sublinierii se realizeaz ca i pentru textele obinuite. Exemplu:
a{ color: blue; text-decoration:none; }
Pentru a modifica pe rnd proprietile irului folosit pentru o referin se vor folosi pseudoclasele:
-
a:link, pentru legturi nevizitate, a:visited, pentru legturi vizitate, a:active pentru legturi active sau, a:hover. pentru a modifica modul de afiare a irului la plasarea cursorului mouse-ului deasupra lui.
Exemplu:
55
a:link {
color: #6699CC; }
a:visited {
color: #660099; }
a:active {
background-color: #FFFF00; }
a:hover {
text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
2.10. Colorarea scrisului i a fundalului

Culoarea folosit la scriere se definete prin proprietatea color. De exemplu dac titlurile marcate cu <h1> trebuie scrise n rou, aceasta se poate indica prin regula urmtoare: h1 {color:#ff0000; } (sau, mai simplu, h1 {color:red; }) Culoarea fundalului se impune prin proprietatea background-color. colornd diferit fundalul acestora, ca n exemplul urmtor: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tabele</title> <style type="text/css"> html {background-color:#658c96} body {background-color:#adc0c7} p,h1 {color: white; background-color:#076363} </style> </head> <body> <h1>Exemplu</h1> <p>Tabelele vor fi folosite doar in cazul in care natura informatiei impune acest lucru.</p> <p>Exemplu de tabel neformatat:</p> <table> Modul n care dispune browserul diferitele blocuri care formeaz o pagin poate fi evideniat
56

<tr> <th>Produs</th> <th>Pret</th> <th>Cantitate disponibila</th> </tr> <tr> <td>Pantofi Lux</td> <td>156</td> <td>243</td> </tr> <tr> <td>Pantofi Carmens</td> <td>174</td> <td>189</td> </tr> </table> </body> </html>
<p>
<body>
<html>
57
2.11. Geometria unui bloc n CSS

Informaia cu caracter grafic (text, imagine) coninut ntr-o pagin web este dispus ntr-o serie de blocuri alturate. <h1>...<h6>, <p>, <table>, <td> etc. Arhitectura unui bloc este prezentat n figura urmtoare:
top margin (transparent) border padding coninut left (text, imagine) right
Browser-ul genereaz aceste blocuri
automat, la ntlnirea marcajelor care delimiteaz informaia: <html>, <body>,
bottom
Din schi se observ c blocul este nconjurat de un contur transparent (margin) avnd rolul de a permite distanarea blocurilor i eventual de un chenar (border). ntre informaia efectiv coninut i border este o distan definit prin Fundalul este colorat n culoarea definit prin proprietatea proprietatea padding. padding). Geometria implicit a blocurilor depinde de browser. browser la altul nu sunt mari dar pot fi deranjante. Modul implicit n care Internet Explorer construiete i plaseaz blocurile poate fi evideniat construind o mic pagin web i impunnd culori diferite pentru fundalul diferitelor blocuri. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> Diferenele de la un
background-color i se extinde pn la border (include deci i zona definit prin
58

<title>Blocuri</title> <style type="text/css"> html {background-color:yellow} body {background-color:magenta} p,h1 {color: white; background-color:blue} </style></head> <body> <h1>Dispunerea blocurilor</h1> <p>Blocurile de text sunt dispuse unul dupa altul.</p> <p> Imaginile nu sunt tratate ca blocuri. Ele sunt incluse in paragrafe <img src="fig1.png" alt="" /> sau alte tipuri de blocuri (de obicei <h>, <li> sau <td>) si sunt tratate ca fiind niste caractere de o alta marime, de cele mai multe ori mai mari.</p> <p>Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri alaturate.</p> </body></html> Rezultat:
margin pentru <body> sau <h1>
margin pentru <p> (sus i jos)
blocul <html>
59

Proprietile care pot fi specificate pentru a defini geometria unui bloc sunt: margin, border, padding, width (limea) i height (nlimea). Pentru margin, border i padding se pot indica dimensiuni diferite pentru fiecare dintre laturile blocului folosind sufixele -top, -right, -bottom i left. Exemplu: h1 {margin-left:120px; margin-right:12px;border:1px; border-color:blue;} Pentru simplificarea scrierii dimensiunilor, dac toate cele patru valori sunt identice se poate scrie parametru:valoare. bottom, left. Exemplu: p {margin:12px 0 14px 120px; padding:8px;} Not: Pentru valori nule dimensiunile pot fi omise. Dac se impune de exemplu margin:0 pentru body, p i h1 pagina precedent ar fi afiat astfel: Dac valorile sunt diferite se pot scrie toate cele patru valori, una dup alta, desprite prin spaiu, ordinea fiind top, right,
60

De altfel frecvent se impune pentru <body> proprietatea margin=0 (implicit margin este de aproximativ 8px, depinznd de browser).
2.12. ncadrarea blocurilor

Blocurile pot fi ncadrate cu un contur avnd caracteristicile precizate prin proprietile border-width, border-color i border-style. border-width permite specificarea grosimii liniei de ncadrare n pixeli sau printr-una din valorile: thin, medium sau thick.
2px 4px 1px 3px
6px 5px
8px 7px 9px
10px
thin medium thick
border-color permite specificarea culorii conturului de ncadrare. border-style permite precizarea aspectului conturului. valorile posibile sunt cele din figur.
61
Exemplu de definiii de contururi de ncadrare:
h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p{ border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }
Ca i n cazul proprietilor margin i padding, este posibil specificarea unor caracteristici diferite pentru top, right, bottom i left. sau border-left, dup caz. Exemplu: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; Pentru specificarea valorilor specifice vor fi folosite n acest caz denumirile border-top, border-right, border-bottom
62

border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; } Observaie: Pentru border, CSS definete ordinea normal de definire a proprietilor conturului de ncadrare ca fiind border-width -> border-style -> bordercolor. Pentru o scriere mai compact se accept i o variant prescurtat de definire: border: 1px solid blue;
2.13. Parametrii width i height

Standardul W3C permite precizarea mrimii zonei folosite pentru afiarea informaiei. Modelul definit n standard este cel din figur.
Dac descrierea blocului include valori nenule pentru padding, border i margin, limea efectiv se calculeaz adunnd parametrului with mrimile corespunztoare ale celorlalte elemente ale blocului. Exemplu: <html> <head> <title>Blocuri 2</title> <style type="text/css"> html {background-color:yellow} body {background-color:white} h1 { color: white; background-color:#ccc; margin-left:45px; margin-right:0; border-width:1px; border-style:solid;
63

border-color:#000; padding:7px; width:200px; height:200px; } p {color: yellow; background-color:#a00;} </style> </head> <body> <h1>Dispunerea blocurilor</h1> <p>Blocurile de text sunt dispuse unul dupa altul.</p> </body> </html>
padding:7px
width:200px border-width:1px;
margin-left:45px
Limea efectiv a blocului referit prin selectorul h1 este:
64

L = 45 + 1 + 7 + 200 + 7 + 1 = 261px.
Proprietatea overflow permite specificarea modului de tratare a situaiei n care coninutul unui bloc nu ncape n spaiul alocat. Situaia apare n cazul blocurilor pentru care s-au specificat att limea ct i nlimea (width i height). posibile sunt overflow :scroll sau overflow :hidden. afiate automat cursoare pentru defilare (scroll). Valorile n prima variant, dac se
plaseaz ntr-un bloc mai mult informaie dect permit dimensiunile acestuia vor fi
2.14. Marcajele <div> i <span>

n paginile realizate pn acum <body> coninea un numr de blocuri (definite prin selectorii p, h1, h2 etc) dispuse unul dup altul, de sus n jos. Selectorul <body> descrie deci un container care conine celelalte blocuri care formeaz coninutul paginii. La rndul su, <body> este coninut n <html>. Standardul HTML ofer ns programatorilor posibilitatea definirii de containere suplimentare care vor conine fiecare un ansamblu de blocuri. Pentru definirea blocurilor avnd rol de container se folosesc marcaje <div> sau <span>. Diferena dintre cele dou este faptul c <span> este de tip inline, el realiznd o grupare n interiorul unui bloc, asemenea marcajelor <em> sau <strong>. Pentru o pagin obinuit marcajul <div> va fi folosit de exemplu pentru a defini blocuri diferite pentru capul paginii, zona de picior i corp. Separarea n blocuri distincte a zonelor care se repet pe toate paginile saitului este interesant deoarece de cele mai muilte ori problemele ridicate de descrierea coninutului acestora sunt mai complicate. n plus, n timp ce pentru capul i piciorul paginii fonturile sunt de regul de dimensiuni fixe (exprimate n px), pentru coninutul paginii dimensiunile fonturilor vor fi exprimate n uniti relative (em, %) astfel nct cititorul s poat modifica mrimea folosind facilitile browser-ului (n Internet Explorer se selecteaz View/Text Size/ Larger sau Largest).
65

Exemplu fundamental:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Blocuri DIV</title> <style type="text/css"> html {background-color:yellow;margin:0; padding:0;} body {margin:0; padding:0;} div {margin:0; padding:0;} p,h1 {color: white; background-color:#000080; margin:10px; padding:0; font-family:verdana, helvetica, sans-serif;} p {font-size:80%;} img {display: block; margin:10px;padding:0;float:left;} #continut {width:700px; background-color:#008080; text-align:left;margin:0 auto 0 auto;padding:0;} #cap {width:700px; height:87px; background-color:#ff8080;} #cap h1 {font-size: 20px;padding-top:30px;margin:0 10px 0 10px;} #cap p {font-size: 10px;padding:0;} #nav {width:700px; height:40px; background-color:#00aa00; } #nav p {margin:0 10px 0 10px;padding-top:10px; font-size: 10px } #colstg {width:200px; background-color:#ffffff;float: left;} #coldr {width:500px; background-color:#aaaaaa; float:left;} #picior {width:700px; height: 35px; background-color:#ff8080; clear: both;text-align: center;} #picior p {font-size:12px;margin:0 10px 0 10px;padding-top:10px;} </style> </head> <body> <div ID="continut"> <div ID="cap"> <h1>Dispunerea blocurilor</h1> <p>Blocurile de text sunt dispuse unul dupa altul.</p> </div> <div ID="nav"> <p>Navigare. Navigare. Navigare. Navigare. Navigare. </p> </div> <div ID="colstg"> <ol> <li>Unu</li> <li>Doi</li> <li>Trei</li>
66

</ol> </div> <div id="coldr"> <h1>Dispunerea blocurilor</h1> <p>Blocurile de text sunt dispuse unul dupa altul.</p> <img src="fig1.png" alt="" /> <p>Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri alaturate.</p> </div> <div id="picior"> <p>Copyright, webmaster etc.</p> </div> </div> </body> </html>
Spre deosebire de <div>, folosit la definirea de blocuri, marcajul <span> permite modificarea proprietilor unei poriuni din textul coninut ntr-un bloc. Exemplu: <style type="text/css"> .profit {
color:orange; }
67

.paguba {
color:blue; }
</style>
<p>Munca <span class="profit ">in echipa</span> poate creste
<span class=" profit ">eficienta</span> fiecaruia. Munca <span class="paguba ">de unul singur </span> e paguboasa.</p>
2.15 Imagini plasate pe fundal

CSS ofer o multitudine de proprieti care pot restriciona modul de dispunere a unei imagini pe fundalul unui bloc. Exemplu: Se dorete includerea unei imagini pe fundalul paginii. Imaginea va fi automat repetat pn la umplerea spaiului disponibil.
<style type="text/css"> body { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); } </style>
Fiierul care conine imaginea va fi plasat n directorul imagini derivat din directorul care conine pagina web. Repetarea imaginii poate fi controlat prin valorile proprietii backgroundrepeat. Valorile posibile sunt:
Valoare background-repeat: repeat-x background-repeat: repeat-y
Semnificaie Repetare pe orizontal Repetare pe vertical
68
background-repeat: no-repeat
Fr repetare
Exemplu: <style type="text/css"> #header { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; } </style>
n cazul n care imaginea dispus pe fundal nu este repetat iar mrimea blocului difer de mrimea imaginii se va preciza de regul i culoarea fundalului. Alegerea corect a culorii fundalului presupune de obicei determinarea cu Inkscape a culorii frontierei imaginii, trecerea de la imagine la zona alturat putnd fi practic imperceptibil. Comportamentul imaginii n fereastr la defilarea coninutului acesteia (scroll) este specificat prin proprietatea background-attachment. Valorile posibile ale acestei proprieti sunt scroll sau fixed. Prima valoare specific defilarea imaginii de fundal mpreun cu coninutul paginii n timp ce a doua indic o poziie fix a imaginii n raport cu fereastra aplicaiei, pagina defilnd pe deasupra acesteia. Exemplu: <style type="text/css"> #continut { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; background-attachment: fixed; } </style> Poziia imaginii n fereastr este indicat folosind proprietatea backgroundposition. Exist trei moduri de a indica poziia imaginii de fundal:
-
prin coordonate (de obicei pixeli): background-position: 30px 45px;
69

prin procente din dimensiunile zonei afiabile:
background-position: 50% 35%;

-
in raport cu laturile blocului. Valorile posibile sunt top left, top right, bottom left, bottom right sau center center.
Exemplu: #continut { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; }
2.16. Blocuri flotante

n mod normal elementele coninute ntr-o pagin web sunt plasate de browser unul dup altul, de sus n jos. Exist situaii n care se dorete dispunerea de la stnga la dreapta sau de la dreapta la stnga i n aceste cazuri se va folosi la descrierea blocurilor proprietatea float.
70

Exemplu: efectul proprietii float : left asupra unui bloc:
Blocul declarat flotant va fi cadrat n sensul dat de valoarea proprietii (float :left sau float :right) iar restul coninutului paginii este aranjat astfel nct s ocupe spaiul astfel creat.
Exemplul 1. Se dorete plasarea ntr-un bloc la stnga paginii a unei figuri i apoi scrierea unui text astfel nct acesta s ncadreze blocul, ca n figura urmtoare.
71

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Blocuri</title> <style type="text/css"> html {background-color:yellow} body {background-color:#c83737; margin:0;} p,h1 {color: white; background-color:#000080; margin:10px; font-family: arial, verdana, sans-serif;} img.stg{margin-right: 10px; float:left;} </style> <body> <h1>Cafeaua si Java</h1> <p>Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++. El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991. </p> <p><img class="stg" src="cafea.gif" alt=" " /> Conducatorul proiectului, Green James Gosling, este considerat parintele limbajului Java. Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a fost revendicat de o alta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a memrilor echipei - cafeaua. </p> </body> </html> Exemplul 2. Pentru evidenierea primului cuvnt al unui capitol se dorete plasarea primului caracter ca n figura de mai jos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> .stg{ margin-right: 10px; color: blue; font-family: arial, verdana, sans-serif; font-size: 300%;
72

float:left; } p{ color: #008080; font-family: arial, verdana, sans-serif; } </style> </head> <body> <p><span class="stg">W</span>hen you create an action, you automate a series of steps. The hardest part about creating a new action is figuring out what functions you want to automate. Thinck about steps thst you carry out over and whether you could be more productive if you had an action that could do them for you.</p> </body> </html> Proprietatea clear permite plasarea unui bloc anterioare. sub blocurile flotante Astfel la Valorile posibile sunt clear:left, clear:right sau clear:both.
descrierea unui bloc care trebuie dispus sub un numr de blocuri care definesc un ansamblu de coloane (cazul blocului care conine piciorul paginii) folosind clear avem garania c noul bloc nu va fi plasat peste unul dintre blocurile flotante anterioare.
Exemplul 3. Prin folosirea proprietii clear se poate realiza efectul din pagina urmtoare:
73

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <html> <style type="text/css"> div.stg{margin-right: 10px; float:left; } .gata{ color: #008080; font-family: arial, verdana, sans-serif; clear:both; } </style> <body> <div class="stg"><img src="cafea.gif"></div> <p class="gata">Java este un limbaj de programare orientat pe obiecte asemãnãtor limbajului C++. El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datând din 1991. ... </p> </body> </html>
Exemplul 4. Pentru scrierea coninutului unei pagini pe trei coloane s-au definit blocurile col1, col2 i col3 ca n listingul urmtor: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div { color: #008080; font-family: arial, verdana, sans-serif; } .col{ width:31%; padding-right: 15px; float: left; } </style> </head> <body> <h1>Limbajul Java</h1> <div class="col"> <p>Java este un limbaj de . . .</p> (prima coloan) </div <div class="col"> <p>Java este un limbaj de . . .</p> (a doua coloan) </div>
74

<div class="col"> <p>Java este un limbaj de . . .</p> </div> </body> </html>
(a treia coloan)
Validarea paginilor web
Pentru a avea garania corectitudinii coninutului unei pagini web, acesta poate fi verificat cu ajutorul unei aplicaii dezvoltate de W3C i disponibile online. O metod uoar de trimitere a paginii spre verificare presupune utilizarea ca browser fie a aplicaiei Internet Explorer versiunea 8 fie a aplicaiei Mozilla Firefox. n cazul folosirii aplicaiei Firefox acesteia trebuie s I se adauge extensia Web Developer . Aceast extensie este destinat dezvoltatorilor de pagini web i ofer un ansamblu de instrumente foarte utile. Pentru adugarea n Firefox a extensiei Web Developer se selecteaz n meniul aplicaiei Tools / Add-ons:
75
n urma instalrii extensiei Web Developer aplicaia va afia o bar cu instrumente suplimentar. Pentru validarea codului unei pagini web se deschide pagina n browser i se selecteaz pe noua bar cu instrumente Tools / Validate Local CSS sau Tools / Validate Local HTML: Aplicaia coninutul specializat validator/validator). foii va de transmite stiluri prin o Internet aplicaie de
spre
(http://jigsaw.w3.org/cssRaportul prezentat
aplicaie va conine erorile depistate i apoi va afia regulile gsite ca fiind corecte. n Internet Explorer se va accesa Tools / Developer Tools i n fereastra afiat se va accesa Validate / Local CSS sau Local HTML. Internet saitul Explorer va accesa i n imediat fereastra
http://jigsaw.w3.org/
afiat se va selecta opiunea By file upload, ca n figur.
76
n fereastra afiat se va selecta fiierul de validat i se va apsa butonul Check.
77
2.17. Poziionarea blocurilor

n CSS poziionarea a blocurilor se poate realiza folosind coordonate absolute sau relative. n mod corespunztor, proprietatea position care specific modul de poziionare a unui bloc poate avea valoarea relative sau absolute. Distanele care precizeaz poziia unui bloc sunt specificate printr-o pereche de proprieti din mulimea top, right, bottom sau left. n cazul poziionrii relative poziia blocului este specificat n raport cu punctul n care blocul ar fi fost afiat n lipsa proprietii position. Exemplu:
div.poz1 { position:relative; left: 200px;
78

bottom: 50px; }
left: 200
bottom: 50
poziia implicit
Dei coninutul blocului din exemplu va fi afiat n alt poziie, browserul va lsa neocupat zona pe care acesta ar ocupa-o n mod normal ! Poziionarea absolut difer fundamental de cea relativ. bloc poziionat absolut browser-ul nu va rezerva loc n pagin. Astfel, pentru un El trebuie s fie
considerat ca aparinnd unui alt nivel, plasat deasupra ferestrei browserului, deci un astfel de bloc se poate suprapune peste un alt bloc din pagin. Astfel de blocuri pot fi folosite pentru a realiza de exemplu meniuri derulante care n stare desfurat acoper parial coninutul paginii. Pentru nelegerea poziionrii absolute se consider regula urmtoare: h1 { position:absolute; top: 100px; left: 200px; }
79
Coordonatele indicate (top:100px i left:200px) au ca i punct de referin colul din stnga-sus al primului bloc poziionat n care noul bloc (h1 n cazul dat) este coninut sau zona util a ferestrei browserului, ca n imagine, dac un astfel de bloc nu exist. n consecin, pentru ca un bloc poziionat absolut s aib ca i punct de referin un bloc exterior (de obicei blocul care conine ntreaga pagin), definiia blocului exterior trebuie s conin proprietatea position:
#bloc_ext { width:800px; text-align:left; background-color:#91d38d; position:relative; margin:0 auto; }
80

O astfel de definire a blocului exterior va determina de exemplu ca un bloc interior acestuia a crui poziie este definit prin regula: {position: absolute; top:0; left:0;} s fie poziionat n colul din stnga-sus al blocului exterior i nu n colul ferestrei browserului. Excemplu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Blocuri</title> <style type="text/css"> html {background-color:yellow} body {background-color:#c83737;} * {padding:0; margin:0;} #bloc_ext { position:relative; width:600px; text-align:left; background-color:silver; margin:0 auto; } p{color: white; background-color:#000080; margin:15px; font-family: arial, verdana, sans-serif;} img.stg{margin-right: 10px; float:left;} .suprapus {position:absolute; top:0; left:0; background-color:teal; margin:25px; color: white; font-family: arial, verdana, sans-serif; } </style> <body> <div id="bloc_ext"> <h1 class="suprapus">Cafeaua si Java</h1> <p>Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++. El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991. </p> <p><img class="stg" src="cafea.gif" alt= /> Conducatorul proiectului, Green James Gosling, este considerat parintele limbajului Java. Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a fost revendicat de o a lta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a memrilor echipei - cafeaua. </p> </div> </body> </html>
81

Rezultat:
Se observ c blocul <h1> este plasat peste primul paragraf. Faptul c <p> este definit ca avnd margin:15px determin deplasarea n jos a blocului body a crui frontier top coincide cu frontiera primului paragraf. evident i blocul bloc_ext inclus n body. Aceast deplasare afecteaz Pentru a evita aceast deplasare primul
paragraf ar trebui s aib ca i body, proprietatea margin:0, deci el trebuie s fie definit ca aparinnd unei clase aparte avnd aceast caracteristic.
p.primul {margin-top:0;} ... <p class="primul"> Java este un limbaj de programare orientat ... </p>
82
2.18. Suprapunerea blocurilor

Poziionarea absolut a blocurilor permite plasarea acestora oriunde n planul xoy ataat zonei client a browserului. Dar CSS permite i specificarea poziiei pe axa Oz (perpendicular pe planul monitorului) i implicit suprapunerea blocurilor. Un exemplu elementar este reprezentat n figura de mai jos. Crile de joc
afiate sunt disponibile ca imagini individuale, dar trebuie afiate parial suprapuse i ntr-o ordine precizat. Pentru a poziiona pe axa z un bloc se va folosi proprietatea z-index a acestuia. Modul de utilizare a acesteia decurge din exemplul considerat.
83

div.ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } div.jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } div.queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } div.king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } div.ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }
Proprietatea z-index poate avea i valori negative, situaie n care blocurile sunt plasate sub planul paginii web. Planul ferestrei browserului are z-index:0.
2.19. Alte proprieti ale blocurilor

Pe lng cele prezentate, CSS ofer i alte proprieti. n continuare vor fi prezentate dou dintre ele, frecvent folosite de realizatorii de situri web.
84

Proprietatea opacity permite definirea unui efect de transparen a unui bloc. Valoarea introdusa pentru aceast proprietate este un numr subunitar, valoarea nsemnnd 0 - lips transparen, 1 transparen total. Exemplu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div.background { width: 500px; height: 250px; background: url(flori.jpg) repeat; border: 2px solid black; } div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* pentru Internet Explorer */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p
85

{ margin: 30px 40px; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html>
Proprietatea visibility permite definirea unor blocuri al cror coninut este afiat la producerea unui eveniment. Proprietatea visibility poate lua vlorile visible sau hidden. ntruct schimbarea valorii proprietii se realizeaz dinamic, folosind o secven de cod programat n JavaScript, exemplificarea utilizrii acestei proprieti se va face la sfritul cursului, dup introducerea unor noiuni de programare n JavaScript.
2.20. Formatarea listelor

CSS pune la dispoziia utilizatorilor o serie de proprieti care permit modificarea radical a modului de afiare a unei liste. sait. In HTML listele sunt plasate decalat fa de marginea din stnga a blocului n care sunt inserate. Deoarece mrimea acestei decalri i modul de realizare (padding pentru Mozilla, Netscape, Safari sau margin pentru Internet Explorer, Opera), pentru Folosind aceste proprieti elementele unei liste pot fi uor aranjate sub forma unui meniu folosit la navigarea n
86

a evita problemele de plasare a listelor, la specificarea regulilor de plasare a listelor (selectorul ul) proprietile padding i margin trebuie impuse. ul {margin: 0; padding: 0;} Proprietatea list-style-type este folosit pentru a impune tipul de marcator folosit naintea fiecrui element din list.. Valorile posibile sunt none (suprimare marcatori), disc, circle sau square pentru liste neordonate (<ul>) respectiv decimal, lower-alpha, upper-alpha, lower-roman sau upper-roman pentru liste ordonate (<ol>). Exemple : <ul> <li>Unix</li> <li>Windows</li> <li>Linux</li> </ul>
ul { list-style-type:disc ;}
ul {list-style-type :circle ;}
ul {list-style-type :square ;}
<ol> <li>Unix</li> <li>Windows</li> <li>Linux</li> </ol>
87
ol {list-style-type :decimal ;}
ol {list-style-type :lower-alpha ;}
ol {list-style-type :upper-alpha ;}
ol {list-style-type :lower-roman ;}
ol {list-style-type :upper-roman ;}
Proprietatea list-style-image permite nlocuirea marcatorilor standard cu o imagine. Exemplu de utilizare:
ul { list-style-image: url("imagini/bulina.jpg");}
Proprietatea display :inline aplicat simultan selectorilor ul i li permite dispunerea elementelor listei pe orizontal. ul,li {display: inline ;} Exemplu: Se dorete realizarea unei liste n care elementele s fie dispuse orizontal, fiecare element fiind n acelai timp i referin spre o alt pagin.
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Liste</title> <style type="text/css"> ul {list-style-type :none; margin: 0; padding: 4px 20px 4px 40px; } ul,li {display: inline;} ul li a {font-family:arial, verdana, sans-serif; padding: 4px; background-color: teal; text-decoration:none; color:white; } ul li a:hover {text-decoration:underline; color:yellow;} </style> </head> <body> <h1>Lista dispusa orizontal</h1> <ul> <li><a href="#">Unix</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Linux</a></li> </ul> </body> </html> Rezultat :
Dac diferena evident de lime a blocurilor afiate astfel constituie o problem se poate modifica descrierea stilurilor astfel:
<style type="text/css"> ul {list-style-type: none; margin: 0; padding: 0;} li { float:left; width:80px; padding: 4px; margin: 4px; background-color: teal; background-image:url("capat_lista.png"); background-repeat: no-repeat; background-position: top-left; font-family: arial, verdana, sans-serif; text-align: center; }
89

ul,li {display: inline;} ul li a {color: white; text-decoration: none;} ul li a:hover {color: yellow;text-decoration: underline; } .decalat {margin-left:100px;} </style> </head> <body> <h1>Lista de prioritati</h1> <ul> <li class="decalat"><a href="#">Unix</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Linux</a></li> </ul> </body> </html> Rezultat :
Not : Deplasarea n direcie orizontal a listei s-a realizat prin impunerea clasei .decalat pentru primul element din list. margin-left: 100px. Pentru decuparea colului blocului li care conine elementele listei s-a plasat pe fundalul acestuia imaginea (capat_lista.png). Clasa .decalat are proprietatea
2.21. Selectori contextuali

n exemplele precedente apare un mod de a scrie selectorii diferit de cele folosite pn n prezent. Exemplu:
#nav ul li a {color: white; text-decoration: none;} ntr-un astfel de caz selectorii trebuie citii de la dreapta la stnga. n
exemplul dat se precizeaz regulile de afiare a unei referine (<a>) dar se dorete ca regulile s se aplice numai referinelor <a> incluse n blocuri <li>, incluse la rndul lor n liste neordonate (<ul>) coninute n blocul identificat prin #nav.
90

Scrierea aceasta poate prea complicat dar este o soluie n a preciza regulile de afiare numai a unui anumit element din pagin. Observaie: Dac n locul spaiului selectorii sunt desprii prin virgule se
obine un grup de selectori. Regulile date dup enumerarea selectorilor care formeaz grupul se aplic tuturor elementelor din grup. Exemplu:
p,h1,h2,h3 {color: white; text-decoration: none;margin:10px; padding:0;}
n cazul n care n grupul de selectori apar i selectori contextuali sintaxa este urmtoarea:
div#news h3, div#news ul {margin:0 2em; }
2.22. Formatarea tabelelor

Un tabel trebuie s fie privit ca fiind un bloc (<table>) care conine un ansamblu de linii (blocuri <tr>), fiecare linie fiind compus din blocuri elementare (<th> sau <td>). Descrierea fiecreia dintre aceste blocuri se realizeaz folosind proprietile folosite deja anterior pentru blocuri <p>, <h>, <div> etc. Pentru ameliorarea aspectului unui tabel sunt eseniale culorile aplicate pe fundal, aspectul liniilor despritoare i distanele dintre coninuturile celulelor i liniile despritoare. Exemplu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tabele</title> <style type="text/css"> table {border-collapse: collapse; border: 4px ridge blue; } th {background-color:#bbbbbb; border: 1px solid blue; width:80px; padding:4px;} td {border: 1px solid blue; text-align: center; padding:4px;}
91

</style> </head> <body> <h1>Tabele</h1> <table> <tr> <th>Nr. crt</th> <th>Valori</th> <th>2008</th> <th>2009</th> </tr> <tr> <td>1</td> <td>Manopera</td> <td>1.232</td> <td>1.230</td> </tr> <tr> <td>2</td> <td>Materiale</td> <td>1.678</td> <td>2.01</td> </tr> </table> </body> </html>
n plus fa de proprietile cunoscute deja i aplicabile oricrui bloc, la formatarea tabelelor intervin cteva proprieti suplimentare :
Proprietate border-collapse
Valori, explicaie collapse / separate Impune unirea / separarea frontierelor celulelor.
border-spacing
dimensiune Aplicabil dac border-collapse:separate.
caption-side
top / bottom / left Specific poziia titlului tabelului (definit prin <caption> ... </caption>)
92
Capitolul III Aplicaii WEB
3.1 Generaliti
n ingineria software o aplicaie web este definit ca fiind o aplicaie care este accesat prin intermediul unui browser web. Spre deosebire de aplicaiile obinuite, care pot fi executate numai dup obinerea unui kit de instalare i instalarea pe calculator, aplicaiile web pot fi executate imediat ce interfaa expus de acestea s-a ncrcat n fereastra browserului. al acestei tehnologii. Componentele software ale unei aplicaii web sunt pstrate i executate pe un calculator conectat la Internet care are rol de server. Unele componente sunt specifice acelei aplicaii iar altele sunt aplicaii generale, partajate de mai multe aplicaii web. n a doua categorie intr de exemplu serverele de baze de date care au rolul de a pstra datele diferitelor aplicaii. Staiile client acceseaz aplicaiile web prin intermediul browserelor, deci aplicaiile web trebuie s trimit staiilor client informaii codificate n html. Pe server ruleaz permanent o aplicaie de tip server care realizeaz trimiterea prin reea a paginilor web cerute de staiile client. Cea mai rspndit aplicaie de acest tip este Apache (www.apache.org) , care este i gratuit. Pe lng trimiterea paginilor web, Apache poate realiza i lansarea n execuie a diferitelor componente ale unei aplicaii web. Aceast caracteristic precum i accesibilitatea, dat de folosirea reelei Internet pentru a accesa aplicaiile, au asigurat succesul rapid
93
calculatoare conectate la Internet
Internet
server Not: Atenie la termenul server! Cnd se refer la un calculator, acesta are nite caracteristici aparte respectiv este conectat ntr-o reea i pe el ruleaz continuu un ansamblu de aplicaii care nu aparin unui utilizator anume ci ateapt comenzi care vin prin intermediul reelei de la aplicaii client. Dac termenul se refer la un program, termenul indic o aplicaie care ruleaz continuu i ateapt ca o alt aplicaie, denumit aplicaie client, s-i trimit o comand. conectate la reea. De cele mai multe ori aplicaiile de tip server ruleaz pe servere iar aplicaiile client ruleaz pe calculatoare
3.2 Marcaje pentru realizarea formularelor

Cunotinele de html prezentate deja permit afiarea n fereastra browser-ului a secvenelor de text i a imaginilor. n cele ce urmeaz va fi prezentat descrierea n
94

html a controalelor windows de baz: casete de text, butoane de diferite feluri, controale cu list etc. destinate introducerii datelor care urmeaz s fie prelucrate ntr-o aplicaie web.
Marcajul <form> </form> servete la gruparea controalelor Windows destinate trimiterii de informaii spre o aplicaie web. n cele ce urmeaz zona din pagina web coninut ntre marcaje <form> ... </form> va fi denumit formular. Marcajul <form> are dou atribute obligatorii : method definete modul n care sunt transmise datele serverului. Atributul poate lua dou valori: method=post dac datele provenite din controalele Windows vor fi citite de aplicaia web ca i fiier standard de intrare (stdin n limbajul C); method=get dac datele din controalele Windows ale formularului vor fi transmise aplicaiei web printr-un ir de caractere. action indic denumirea componentei software a aplicaiei web care va prelucra datele trimise. Aceast component software este lansat n execuie de aplicaia de tip server pentru web (Apache de exemplu). Pentru scrierea componentelor aplicaiilor web n ultimii ani s-au dezvoltat diferite limbaje, cele mai rspndite fiind limbajele PHP i PERL. Ambele sunt limbaje interpretate (execuia instruciunilor are loc ntr-un interpretor de comenzi). Deoarece o component software asociat unui formular poate conine comenzi destinate altor aplicaii de pe server, ea are caracteristicile unui script. Din acest motiv secvenele de cod scrise de exemplu n PHP n care se vor realiza prelucrrile datelor din formulare sunt denumite scripturi PHP. Exemplu :
<form method=post action=programe/calcul.php>
Marcajul <input> definete caracteristicile unui cmp al formularului. Atributele marcajului <INPUT> sunt : type=tip definete tipul controlului Windows name=nume definete numele simbolic al valorii cmpului
95

value=valoare definete coninutul prestabilit al cmpului size=valoare definete lungimea n caractere a unui control de tip text sau password checked se folosete pentru un buton radio dintr-un grup de butoane sau
pentru o caset de validare pentru a impune starea selectat ; maxlength=m numrul maxim de caractere acceptate ntr-un control de tip text sau password. Pentru modificarea aspectului unui control <input> se poate aduga stilurilor definite o regul suplimentar folosind selectorul input. atributului class. n cazuri mai deosebite de formatare se pot defini clase care pot fi asociate controalelor prin adugarea Formularele prezentate n continuare vor conine modificri ale modului normal de afiare a controalelor Windows folosind stiluri. HTML 4 permite definirea urmtoarelor tipuri de cmpuri: button, checkbox, file, hidden, image, password, radio, reset, submit i text.
1.
Tipul text permite definirea unui cmp pentru introducerea unui ir de caractere :
<input type=text name=cod_numeric /> Adugarea atributului maxlength permite limitarea lungimii irului de caractere permis. 2. Tipul password (parol) permite introducerea unei parole. introduse nu vor fi afiate, n cmp aprnd doar caractere * : Caracterele
<input type=password name=parola" />
3. Tipul checkbox (caset de validare) permite desenarea unei casete izolate de validare:
96

<input type=checkbox name="clientnou" checked value="da" /> De regul caseta de validare este inclus ntre marcaje <label> ... </label> pentru a ataa casetei un ir de caractere.
<label> <input type="checkbox" name="clientnou" value="da" checked /> Client nou </label>
Efectul validrii casetei va fi includerea n irul de caractere trimis spre server a irului "clientnou=da". 4. Tipul radio permite descrierea unui grup de butoane radio. Gruparea se
realizeaz prin atribuirea aceluiai nume tuturor controalelor care formeaz grupul. Pentru a aduga n dreptul fiecrui buton un ir de caractere (etichet) descrierea controlului va fi inclus ntre marcaje <label> ... </label>. Exemplu:
<label><input type=radio name="semestrul" checked value="0" /> I (octombrie-februarie) </label> <label><input type=radio name="semestrul" value="1" /> II (martie-iunie)</label>
5. Tipul buton submit are ca i efect transmiterea spre server a valorilor introduse n cmpurile formularului. butoane de tip submit. Exemplu: Un formular poate conine mai multe
<input type=submit name="gata" value ="OK" />
La apsarea butonului din exemplu, n irul de caractere trimis scriptului asociat formularului va fi inclus secvena "gata=OK".
Exemplu de poriune dintr-o pagin web care conine un formular:
97
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Exemplu</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> div#login { margin: 0 0 0 100px; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; width: 300px; } div#login input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; width: 160px; padding: 4px 4px 4px 4px; background-color: #666699; color:white; } div#login .caseta1 { background-image:url("om.jpg"); background-position:top left; background-repeat:no-repeat; padding: 4px 4px 4px 30px; } div#login .simplu { padding: 4px 30px 4px 4px; } div#login .buton { width:80px; }
98
div#login table { width: 100%; border: 2px solid rgb(215,215,215); border-collapse: collapse; background-color: #cccccc; } div#login td {padding:5px; border: 1px solid #ffffff; } .centrat {text-align:center;} } </style> </head> <body> <h1>Formulare</h1> <div id="login"> <form method="post" action="programe/log.php"> <table> <tr> <td>Email: </td><td><input type="text" name="eml" class="caseta1" /></td> </tr> <tr> <td>Password:</td><td><input type="password" name="passwd" class="simplu" /></td> </tr> <tr> <td colspan="2"><label>Remember Me: <input type="checkbox" name="rmbm" checked="checked" value="true" /></label></td> </tr> <tr> <td colspan="2" class="centrat"><input type="submit" name="gata" value ="Login" class="buton" /></td> </tr> </table></form> </div> </body> </html> Pentru a simplifica alinierea informaiilor din formular, coninutul acestuia a fost plasat ntr-un tabel.
6. Tipul buton reset determin crearea unui buton a crui acionare permite utilizatorului s tearg valorile din toate cmpurile formularului.
99

<imput type =reset value="Anulare" />
7. Tipul image permite includerea n formular a unei imagini avnd la selectare un comportament similar unui buton de tip submit:
<input type=image src="imagini/poza.gif" alt="Validare" />
8. Tipul hidden permite transmiterea unor informaii spre server fr ca utilizatorul s le vad pe ecran. De regul cmpurile hidden servesc la realizarea unei sesiuni de lucru. Aceasta presupune nlnuirea coerent a unui ansamblu de pagini, de regul realizate dinamic de scripturile aplicaiei web. O astfel de aplicaie va memora n atributele value din cmpuri hidden informaii necesare urmtorului script lansat n execuie ca urmare a apsrii unui buton de tip submit. 9. Tipul file permite ncrcarea unui fiier pe server. Controlul de tip file afieaz o caset de text i un buton pe care scrie Browse. Dup ce se apas butonul Browse i se selecteaz fiierul numele acestuia va fi automat afiat n caseta de text. Apsarea butonului de tip submit al formularului determin transferul fiierului pe server, ntr-un director temporar. Scriptul asociat formularului va realiza mutarea fiierului din directorul temporar ntr-un director al saitului, eventual dup o validare n care se verific tipul i dimensiunea fiierului. Exemplu : <form enctype=multipart/form-data action=prelucrez.php method=post> <input type=hidden name=MAX_FILE_SIZE value=30000> <p>Selectati fisierul : <input type=file name=fisier /></p> <input type=submit value=Incarcare server> </form>
100

Atributul enctype indic natura informaiei trimise spre server. Valoarea
implicit a acestui parametru este enctype="application/x-www-form-urlencoded" i corespunde formularelor obinuite care trimit spre server un ir de caractere. n cazul transmiterii unui fiier atributul trebuie schimbat n enctype=multipart/form-data. Fiierul astfel transmis poate fi de orice tip. trimise mpreun cu fiierul. Pe lng controlul de tip file
formularul poate conine i alte controale coninnd diverse informaii care trebuie
Marcajul <textarea> permite definirea unei zone n care se poate scrie un text mai lung, dispus pe mai multe linii. n acest mod se definesc de exemplu zonele destinate scrierii unor mesaje, impresii etc. name, rows (cte linii) i cols (cte coloane). Marcajul <textarea> are trei atribute:
<textarea name=rezumat rows=5 cols=35>Rezumatul Dv.</textarea>
Marcajul <select> permite definirea controalelor complexe de tip text plus list (combo box). Caseta de tip combobox afieaz o valoare. Selectarea acesteia sau a sgeii din dreapta ei cu mouse-ul va provoca afiarea listei asociate, vizitatorul paginii putnd selecta linia dorit. Exemplu :
Mergem în raionul cu produse <select name=raion> <option value=niciunde selected>(alegeti raionul) < option value=alimente>Produse alimentare < option value=bautura>Bãuturi < option value=cosmetice>Cosmetice < option value=menaj>Articole de menaj
101

< option value=imbrac>Îmbrãcãminte < option value=electro>Articole electrocasnice < option value=gradina>Articole pentru grãdinãrit </select>
n exemplul dat, dac se selecteaz raionul Produse alimentare, irul de caractere trimis spre server n urma apsrii butonului de tip submit va conine secvena "raion= alimente". n cazul n care trebuie realizat un control de tip list derulant, care de regul permite selectarea mai multor opiuni, se va utiliza atributul size care precizeaz numrul de opiuni vizibile n cadrul controlului i multiple, n cazul n care controlul admite selectare multipl. Pentru selectarea multipl se va ine tasta "Ctrl" apsat. Exemplu:
<p>Ce marc de main ati dori s avei (puteti selecta mai multe)?</p> <p><select name="cars" multiple size=4> <option value="dacia"> Dacia < option value ="renault"> Renault < option value ="wv"> Volkswagen < option value ="audi"> Audi < option value ="opel"> Opel < option value ="fiat"> Fiat < option value ="seat"> Seat </select> </p>
102

Atributul size=4 provoac afiarea pe ecran a 4 dintre opiunile indicate. Dac atributul size lipsete, caseta va conine toate valorile din lista de opiuni. Formularele prezentate au atributul method=post. Atributul method=get ofer posibilitatea lansrii unor scripturi aflate pe servere de cutare, de exemplu Google sau Yahoo. Exemplu :
<table> <tr> <td> Google </td> <td><form action=http://www.google.ro/search method=get> <input type=hidden value="ro" name=hl /> <input type=text size=35 name=q /> <input type=submit value="Cauta" /></form> </td> </tr> <tr> <td> Yahoo </td> <td><form action=http://www.yahoo.com/search method=get> <input type=text size=35 name=p /> <input type=submit value="Cauta" /></form> </td> </tr> </table>
ntruct irul de caractere care trebuie trimis difer pentru serverele de cutare menionate, este esenial transcrierea corect a formularelor.
103
3.3 XAMPP
XAMPP este numele dat unui pachet de aplicaii care constituie infrastructura software necesar gzduirii saiturilor web: server de web (Apache), server de baze de date (MySQL), interpretoare pentru scripturi scrise n limbajele PHP i PERL. Pentru a putea fi folosit pe servere care gzduiesc saituri, dup instalarea pachetului de aplicaii trebuie operate unele configurri, mai ales pentru ameliorarea securitii. XAMPP a fost creat ns i pentru a pune la dispoziia dezvoltatorilor un instrument eficient de testare. Odat instalat pe calculatorul propriu, pachetul de aplicaii va face ca acesta s aib comportamentul unui server conectat la Internet, permind testarea aplicaiilor scrise nainte de a le copia pe serverul firmei care va gzdui n final produsul software realizat. XAMPP (http://www.apachefriends.org/en/xampp-windows.html) are i o
variant lite , XAMPP Lite, care poate fi utilizat imediat dup descrcare i dezarhivare, fr a fi necesar instalarea. Dup instalare, prezena pe calculator a pachetului de aplicaii se manifest prin aplicaia XAMPP Control Panel Application.
104

Dup lansarea n execuie a acestei aplicaii se vor apsa butoanele Start din dreptul celor dou aplicaii eseniale testrii saiturilor : Apache i MySQL. Not : Dac se utilizeaz varianta XAMPP Lite, se dezarhiveaz arhiva descrcat din Internet n rdcina discului care va fi folosit pentru testarea saiturilor (E:\ de exemplu) :
n urma dezarhivrii, pe discul selectat va fi adugat directorul xampplite. n aceast variant pornirea aplicaiilor Apache i MySQL necesare testrii saiturilor se realizeaz selectnd xampp_start din directorul xampplite.
105

Pentru oprirea aplicaiilor se va executa xampp_stop. Verificarea funcionrii aplicaiilor necesare pentru testarea saiturilor se poate realiza tastnd n browser adresa aplicaiei web integrate n XAMPP i destinate administrrii serverului de baze de date MySQL: http://localhost/phpmyadmin/.
3.4 Apache
Apache (http://www.apache.org/) este o aplicaie de tip server pentru web. O aplicaie de acest tip este un program reactiv. El ruleaz n continuu pe calculatorul destinat pstrrii unuia sau mai multor saituri web i ateapt cereri din partea unei aplicaii client (Internet Explorer, Mozilla Firefox, Opera etc.). Ca aplicaie, serverul pentru web acceseaz un ansamblu de fiiere dispuse pe discul calculatorului pe care acesta este instalat. precizat n cererea clientului (http, ftp). Paginile web sunt de regul documente multimedia coninnd text, imagini, sunet, animaii. Ele sunt stocate pe disc n mai multe fiiere, fiecare fiier coninnd Dac o aplicaie client solicit un fiier existent, serverul pentru web l va furniza respectnd regulile unui protocol
106

informaii de un anumit tip. Corespunztor, serverul pentru web va primi din partea aplicaiei client o suit de cereri de transfer de fiiere ncepnd cu fiierul principal. Asamblarea documentului din fragmentele primite cade n sarcina aplicaiei client. Pe serverele pentru Internet funcionnd sub UNIX sau Linux, Apache este configurat astfel nct rdcina structurii arborescente de directoare care gzduiesc saituri difer de cea creat n urma instalrii XAMPP. n cele ce urmeaz se va exemplifica modul de realizare a unei aplicaii pentru web respectnd structura de directoare din imagine, creat prin instalarea XAMPP sau disponibil n directorul creat dup dezarhivarea fiierului coninnd XAMP Lite.
Dup instalarea pachetului de aplicaii XAMPP (sau XAMPP Lite) se va copia n directorul xamplite\htdocs directorul care conine saitul.
107
Se vor porni apoi aplicaiile coninute n XAMPLITE (xampp_start) i se va tasta n caseta de text pentru adrese a browserului adresa saitului. http://localhost/numesite/. Exemplu: http://localhost/legoland/. Aceasta este
108

n lipsa numelui fiierului solicitat, serverul Apache va transmite browserului fiierul index.html.
3.5 MySQL
MySQL este un sistem de gestiune a bazelor de date relaionale produs de compania suedez MySQL AB (preluat n 2008 de Sun Microsystems, cumprat la rndul ei n 2009 de Oracle Co.) i distribuit sub Licena Public General, GNU. Este cel mai popular SGBD open-source i o component principal a pachetului de aplicaii XAMPP. Dei este folosit foarte des mpreun cu limbajul PHP, cu MySQL se pot construi aplicaii n orice limbaj major: C, C++, C#, Borland Delphi, Java, Perl, sau Python. Licena GNU GPL nu permite ncorporarea MySQL n aplicaii comerciale. Cei care doresc s fac acest lucru pot achiziiona, contra cost, o licen comercial de la compania Sun Microsystems (aprox. 900$/server). Pentru a administra bazele de date MySQL se poate folosi modul linie de comand sau aplicaia gratuit, scris n PHP, phpMyAdmin. MySQL poate fi rulat pe multe dintre platformele software existente: Solaris, AIX, FreeBSD, GNU/Linux, Mac OS X, NetBSD, SunOS, Windows 9x/NT/2000/XP/Vista/7. n cele ce urmeaz MySQL va fi componenta aplicaiilor web destinat pstrrii datelor aplicaiei. Dei limbajul PHP n care vor fi scrise secvenele de cod care prelucreaz informaiile aplicaiei web are funcii destinate scrierii de fiiere pe disc, de regul se apeleaz la varianta mult mai sigur a folosirii serverului de baze de date MySQL.
3.5.1 Date i tabele

O aplicaie pentru web prelucreaz date de diferite naturi: iruri de caractere, valori numerice, date calendaristice etc. Exemple : denumiri de produse, nume de
109

utilizatori sau de clieni, parole, adrese de e-mail, preuri, cantiti, date de livrare sau de ncheiere a unei comenzi, etc. Evident pot aprea informaii i de alte naturi : imagini, fiiere n format .pdf, filme, fiiere audio .mp3 etc. Informaiile pstrate ntr-o baz de date relaional sunt dispuse ntr-un ansamblu de fiiere. Din considerente legate de creterea vitezei de accesare a informaiilor, fiierele sunt formate din articole avnd aceeai structur. Structura articolelor unui fiier de date este definit la crearea sa, prin precizarea cmpurilor pe care le va conine fiecare articol. Exemplu:
Fiier
Articol 1
Articol 2
Articol 3
....
Cmpuri: Nume, Prenume, ID_Angajat
Un cmp dintr-un articol conine o informaie elementar. Fiecare cmp are un nume, conine un tip de informaie (ir de caractere, numr, dat calendaristic, fiier etc.), are o lungime de reprezentare a informaiei. n cazul cmpurilor numerice coninnd valori reale se precizeaz de asemenea numrul de zecimale. Datorit faptului c formatul articolului este fix, frecvent se folosete pentru fiier o reprezentare tabelar i chiar se folosete pentru fiierele de date denumirea de "tabele". Cmpuri: Nume, Prenume, ID_Angajat
Articole
110
3.5.2 SQL
O aplicaie de tip server este un program care ateapt comenzi din partea unor aplicaii client. n cazul serverelor de baze de date relaionale (Oracle, MySQL, IBM DB2, Microsoft Access, OpenOffice Base etc.) se folosete limbajul SQL (Structured Query Language). Deoarece prezentarea acestui limbaj depete cadrul acestui curs, n cele ce urmeaz comenzile SQL vor fi construite folosind interfaa grafic oferit de PHPMyAdmin, o aplicaie integrat n XAMPP.
a. Crearea unei baze de date - comanda create database Pentru deschiderea aplicaiei phpMyAdmin se pornete XAMPPLITE
i se tasteaz n caseta de text pentru adrese a aplicaiei Internet Explorer adresa http://localhost/phpmyadmin/
n fereastra afiat se va tasta numele noii baze de date (probd) i se va apsa butonul Create:
111
phpMyAdmin va crea comanda SQL de creare a unei baze de date i o va trimite serverului MySQL. phpMyAdmin va afia de fiecare dat comenzile pe care lea trimis serverului de baze de date MySQL.
Odat creat, baza de date prodb va fi baz de date curent. adresa acesteia.
Comenzile
ulteriore, de exemplu cele prin care se vor crea tabelele (fiierele) acesteia, se vor
La urmtoarele porniri ale aplicaiei phpMyAdmin intrarea n baza de date prodb se va realiza prin selectarea acesteia n arborele afiat n panoul din stnga al aplicaiei.
b. Crearea tabelelor bazei de date - comanda create table Dup crearea bazei de date prodb se vor crea succesiv tabelele acesteia.
Crearea tabelului utilizatori
112

Tabelul utilizatori va conine datele de identificare a utilizatorilor autorizai s opereze n baza de date. Acest tabel este prezent n toate bazele de date accesibile prin Internet. Crearea unui tabel se realizeaz concomitent cu definirea structurii sale.
Tabelul utilizatori are 3 cmpuri (engl. fields). n vederea crerii comenzii create table, phpMyAdmin va cere introducerea numelui i tipului fiecruia dintre cmpurile tabelului.
Cmpurile tabelului Utilizatori sunt ID_Utilizator (INT - valoare ntreag), Nume (VARCHAR lungime maxim 20 caractere) i Parola (VARCHAR - lungime maxim 16 caractere). lungime variabil. Tipul VARCHAR se folosete pentru iruri de caractere de
113

Pentru cmpul ID_Utilizator s-a mai precizat c este PRIMARY i s-a selectat caseta AUTO_INCREMENT. Prima caracteristic, PRIMARY indic faptul c ID_Utilizator este cheie primar. Cheia primar a unui tabel din baza de date are valori distincte pentru toate articolele din tabel i are rolul de identificator unic al acestora. Dac ulterior se va dori suprimarea unui articol se va putea selecta articolul indicndu-i cheia primar. Proprietatea AUTO_INCREMENT indic modul de formare a valorilor cmpului ID_Utilizator. Valoarea acestuia pentru un nou articol care urmeaz s fie adugat se calculeaz automat, prin incrementarea valorii corespunztoare ultimului articol prezent n tabel. Cmpul Nume s-a definit ca fiind INDEX. Impunerea ca index a unui cmp
faciliteaz cutrile n tabel efectuate dup valori ale respectivului cmp. n cazul dat, serverul MySQL va ataa tabelului Utilizatori un fiier ale crui nregistrri vor conine perechi de valori Nume - adres articol pe disc. n noul fiier nregistrrile vor fi pstrate ordonate cresctor dup valorile cmpului Nume. La cutarea dup Nume a unui articol din tabelul Utilizatori se va cuta mai nti n fiierul asociat tabelului adresa articolului cutat dup care se va extrage direct articolul dorit. Not: Spre deosebire de PRIMARY, INDEX nu nseamn valori distincte.
Cmpul Nume permite introducerea aceluiai nume de mai multe ori. n acest caz, n fiierul asociat tabelului Utilizatori vor fi nregistrate grupat mai multe perechi Nume adres coninnd acelai nume. La cutarea unui nume care apare repetat, serverul MySQL va furniza tot grupul de articole corespunznd criteriului de cutare impus. Crearea tabelului se realizeaz prin apsarea butonului .
phpMyAdmin va afia i comanda CREATE TABLE trimis serverului MySQL.
114
Crearea tabelului categorii Baza de date prodb va conine printre altele un tabel cu poze. Pentru afiarea acestora se va declara n prealabil tabelul categorii. Rolul acestuia va fi acela de a permite ulterior selectarea i afiarea grupat a pozelor aparinnd aceleiai categorii. Tabelul categorii are trei cmpuri, ID_Categorie fiind declarat cheie primar.
Not: Cmpul Imagine va conine denumirea unui fiier reprezentativ pentru fiecare categorie. Acesta va permite scrierea unui script PHP care va genera pagina care prezint categoriile de poze din baza de date. Dac acest script va fi scris,
115

adugarea unei noi categorii nu va necesita modificarea unui cod html ci doar adugarea unui nou articol n tabelul Categorii.
Crearea tabelului imagini
c. Inserarea datelor n tabele - comanda INSERT Odat definite tabelele, baza de date poate fi exploatat. Spre deosebire de operaiile realizate deja, respectiv crearea bazei de date i a tabelelor acesteia, inserarea, corectarea i regsirea datelor se realizeaz de regul de ctre scripturile aplicaiei Web. Totui setul de date de testare necesar n etapa de construire a aplicaiei Web se realizeaz tot cu phpMyAdmin. Comanda insert are formatul: INSERT INTO tabel (camp1, camp2 ...) VALUES (v1, v2, ...)
116

Dac toate cmpurile unui tabel primesc valori i valorile sunt dispuse n ordinea n care au aprut la declararea tabelului, comanda INSERT se poate scrie prescurtat: INSERT INTO tabel VALUES (v1, v2, ...) Fiecare dintre valorile v1, v2, ... va fi ncadrat ntre caractere ' (apostrof). Formatul implicit al valorilor de tip dat calendaristic este an-luna-zi: Exemplu:
INSERT INTO tabtest ( nrcrt, data_cal) VALUES ('1', '2009-04-22');
Exemplu: Inserarea unui articol n tabelul Utilizatori folosind phpMyAdmin : Se selecteaz n panoul din stnga al aplicaiei phpMyAdmin baza de date i apoi tabelul (utilizatori). n panoul central se selecteaz tabul Insert:
Observaii: 1. Dei nu s-a specificat o valoare pentru ID_Utilizator, faptul c acest cmp a fost declarat la crearea tabelului ca fiind de tip autoincrement face ca aplicaia s introduc automat o valoare. Urmtorul articol va avea ID_Utilizator = 2 i aa mai departe.
117
2. Cmpul Parola are 16 caractere. Aceste caractere vor fi obinute efectiv prin criptarea parolei efective. n PHP se va apela funcia md5(), care returneaz 16 caractere. Comanda SQL insert care adaug un utilizator va fi:
"insert into utilizatori ('ID_utilizator', 'Nume', 'Parola') values (NULL, '$nume', 'md5($parola)')"
118
Capitolul 4 Platforme de e-learning
4.1. Aspecte generale

Aplicaiile destinate formrii asistate de calculator (e-learning) sunt programe destinate n principal distribuirii de materiale de formare. urmrirea activitii unui numr de cursani. Ele permit nscrierea i Exist multe soluii, cele mai pe larg
folosite n mediul academic fiind Blackboard, e-College, sau WebCT. Printre soluiile larg utilizate sunt i cteva open-source, Moodle fiind reprezentativ. n cele ce urmeaz va fi prezentat o aplicaie folosit destul de frecvent n mediul academic, Claroline. Claroline se definete ca fiind o platform open source de eLearning i eWorking care permite profesorilor s creeze cursuri online i s dirijeza activitile de formare ale elevilor prin Internet. Claroline este tradus n 35 de limbi, printre care i limba Romn. Spre deosebire de Moodle, Claroline necesit din partea realizatorilor de cursuri un efort redus. Aceast caracteristic, securizarea accesului la cursuri, posibilitatea generrii i gestionrii testelor, posibilitatea trimiterii automate de mesaje, gestionarea confortabil a claselor virtuale i alte cteva caracteristici i funcii utile fac soluia aleas interesant pe termen mediu. Desigur, dezvoltarea unei activiti de anvergur n domeniul educaiei la distan va presupune achiziionarea unui sistem puternic, Blackboard fiind n acest domeniu o referin. Nu trebuie ns neglijat problema infrastructurii necesare unui astfel de sistem, n echipamente i personal specializat de deservire.
4.2. CLAROLINE 1.9.5. Instalare i configurare

Claroline este o aplicaie Web. Inastalarea sa se poate face pe oricare dintre sistemele de operare majore. Sistemul pe care se instaleaz trebuie ns s aib
119

instalat pachetul Xampp, sau, mai general, s existe pe calculator un server Apache i un server MySQL n funciune precum i un interpretor PHP. Aplicaia se descarc prin internet de la adresa
http://www.claroline.net/download/stable.html i se dezarhiveaz n directorul n care sunt gzduite saiturile (n Windows C:/xamplite/htdocs/ iar n Linux /var/www/).
n urma dezarhivrii se creaz un subdirector care conine fiierele necesare instalrii i configurrii aplicaiei (pentru versiunea descrcat din exemplu, Claroline 1.95 acesta este /claroline195). Inastalarea decurge n continuare din Internet Explorer. nainte de a ncepe instalarea se va edita n Notepad++ fiierul de configurare a interpretorului php. Acesta este C:/xamplite/php/php.ini. Se vor modifica opiunile:
display_errors = On -> display_errors = Off magic_quotes_gpc = On -> magic_quotes_gpc = Off date.timezone = "Europe/Bucharest"
120

Se repornete xamppp (C:/xapmpp/xampp-restart) i se tasteaz n IE adresa http://localhost/claroline195/claroline/install. Instalarea va decurge n mai muli pai, astfel:
121
122
123
124
125

Dup instalare directorul /claroline/install trebuie ters sau mutat la o alt locaie. El trebuie s devin inaccesibil din exterior deoarece el conine aplicaia Web de configurare executat. Configurarea primar a platformei nou instalate presupune stabilirea limbii, a modului de nregistrare a utilizatorilor i editarea ferestrelor expuse de aceasta n timpul utilizrii. Pentru configurarea iniial se realizeaz conectarea ca administrator:
se acceseaz Platform administration / Configuration /
126
se acceseaz Main settings:
se impune limba i se selecteaz Ok:
127
se revine la fereastra Configuration i se selecteaz User profile options:
se seteaz continutul formularului de inregistrare a unui nou utilizator. Important este s se impun cmpurile obligatorii (zona Data checking) i s se suprime posibilitatea nregistrrii de utilizatori care pot crea cursuri (course creator).
128

De regul la nceputul unui ciclu de colarizare se las libere nscrierile pentru o perioad. Dup nregistrarea majoritii cursanilor se blocheaz nscrierile i se suprim cursanii nscrii abuziv. Identificarea acestora se poate realiza pe baza codului administrativ cerut n formularul de nscriere. Cu setrile realizate, formularul de nscriere pe platform arat ca mai jos.
Desigur pot fi realizate i alte modificri ale aspectului i coninutului platformei, dar cu cele deja realizate se pot deja ncepe activitile de exploatare.
4.3. Crearea cursurilor

Pentru a putea aduga materiale de formare, un utilizator trebuie s primeasc din partea administratorului platformei acest drept.
129
Dup conectarea la platform se va proceda astfel:

-
se selecteaz opiunea Creaz un site de curs; se completeaz formularul de nregistrare a cursului. principal denumirea acestuia, codul atribuit, Acesta conine n n care se
categoria
ncadreaz, datele lectorului i drepturile de acces, ca n figura urmtoare. n final se selecteaz butonul Ok.
130

din pagina principal se selecteaz cursul i apoi se editeaz descrierea cursului i se adaug fiierele acestuia:
De exemplu pentru a aduga descrierea cursului se selecteaz Pentru a aduga fiierele cursului se acceseaz Documente i Linkuri:
131

Interfaa din pagina afiat permite printre altele:
-
adugarea unui fiier prin ncrcare pe server (upload) crearea unui subdirector salvarea unei copii a directorului curent setarea vizibilitii fiierelor tergerea fiierelor
Not: De cele mai multe ori fiierele adugate sunt n format .pdf sau .html. Pentru cele n format .html se recomand ca toate fiierele legate de acestea s fie plasate ntr-un director separat pentru a nu aglomera inutil directorul rdcin al cursului.
4.4. Crearea testelor

Creatorul unui curs poate aduga cursului unul sau mai multe teste. Adugarea unui test se realizeaz selectnd n pagina cursului legtura Exerciii. n pagina afiat se selecteaz Exerciiu nou:
132
Dac se selecteaz Avansat se pot stabili i alte caracteristici:
n continuare se definesc ntrebrile i modul de rezolvare pentru fiecare ntrebare (descriere, rspuns ales dintre mai multe variante, rspuns prin adevrat sau fals).
133
Create an Exercise in Claroline

To add a new exercis
134

Dup validare se va introduce rspunsul posibil. Deoarece s-a ales varianta de rspuns prin completarea unor spaii libere, n noul formular se va introduce rspunsul corect, cuvintele care formeaz rspunsul corect fiind plasate ntre paranteze drepte.
135
Aplicaia va afia n final o fereastr care permite precizarea punctajului acordat pentru fiecare rspuns corect.
4.5. Trimiterea unui anun

Creatorul unui curs poate trimite mesaje cursanilor. Pentru aceasta va accesa pe pagina cursului legtura Anunuri.
136
Dup selectarea destinatarilor se va apsa butonul Depune din fereastra aplicaiei.
137
138
APLICAII
139
Aplicaii (1)
Pentru a realiza temele care v vor fi lansate creai pe discul D: directorul D:\numele_dv\ i n acest director adugai un subdirector denumit imagini. subdirectorul D:\numele_dv\imagini extragei coninutul arhivei disponibil n laborator. Tema 1: Crearea unei pagini Web codificat n HTML cuprinznd un text dat. Pagina va fi realizat n Notepad i deschis n Internet Explorer. 1. Creai cu Notepad fiierul D:\numele_dv\pagina1.html <HTML> <HEAD> pagina </HEAD> <BODY><H1>Prima mea pagina web</H1> <p>Aceasta pagina a fost creata in Notepad. </BODY> </HTML> n imagini.zip
Tema 2: Crearea unei pagini Web coninnd text i imagini. Pentru codificare se va folosi Notepad ++. Imaginile vor fi prelucrate n Paint. 1. Creai cu Notepad++ fiierul D:\numele_dv\robot_honda.html. http://en.wikipedia.org/wiki/Asimo. <HTML> <HEAD> <TITLE>ASIMO</TITLE> </HEAD> <BODY> <H1> ASIMO </H1> <P> From Wikipedia, the free encyclopedia <P> ASIMO is a humanoid robot created by Honda. Standing at 130 centimeters (4 feet 3 inches) and weighing 54 kilograms (119 pounds), the robot resembles a small astronaut wearing a backpack and can walk or run on two feet at speeds up to 6 km/h (3.7 mph), matching EMIEW.[1] <img src="imagini/asimo1.jpg"> Sursa paginii
este fiierul Honda.doc, disponibil n laborator, realizat pornind de la articolul
140

<P>ASIMO was created at Honda's Research & Development Wako Fundamental Technical Research Center in Japan. It is the current model in a line of twelve that began in 1986 with E0. ASIMO resembles a child in size and is the most human-like robot HONDA has made so far. The robot has 7 DOF (Degrees of freedom) in each arm two joints of 3 DOF, shoulder and wrist, giving "Six degrees of freedom" and 1 DOF at the elbow; 6 DOF in each leg 3 DOF at the crotch, 2 DOF at the ankle and 1 DOF at the knee; and 3 DOF in the neck joint. The hands have 2 DOF 1 DOF in each thumb and 1 in each finger. This gives a total of 34 DOF in all joints.[2] <P>The name is an acronym for "Advanced Step in Innovative MObility". Online magazine The Future Of Things (TFOT) states that Honda did not name the robot in reference to science fiction writer and inventor of the Three Laws of Robotics, Isaac Asimov.[3] The name ASIMO is also a pun meaning feet, too. <p>As of February 2009, there are over 100 ASIMO units in existence.[4] Each costs under 100 million ($1 million USD) to manufacture. <H2>Contents</h2> <ol> <li>Development history <ul> <li>1.1 Experimental models <li>1.2 Humanoid prototype models <li>1.3 ASIMO </ul> <li>Features and technology <ul> <li>2.1 Specifications <li>Recognition technology <li>Network integration </ul> <li>Public appearances ... Observaii: a) Respectai marcajele <H1>, <H2> etc. pentru titluri, <p> pentru paragrafe i <ul> sau <ol> pentru liste. b) Pentru a insera imaginile, acestea trebuie plasate n fiiere independente. Va
trebui deci s le preluai una cte una fie din articolul din Internet fie din fiierul asimo.doc i s le salvai fie n directorul paginii (D:\numele_dv) fie ntr-un director derivat din acesta. n codul scris s-a presupus c imaginile sunt n directorul derivat imagini, deci pentru a afia coninutul fiierului asimo1.jpg s-a scris:
<img src="imagini/asimo1.jpg">
141

Imaginile folosite pot fi redimensionate n Paint folosind opiunea Resize. 2. bun parte din aplicaiile urmtoare vor contribui la realizarea unor pagini Web atractive. n cele ce urmeaz se va lucra la dou dintre paginile a saitului Web Roboti
Creai cu Notepad++ fiierul c:\numele_dv\asimo.html <html> <head><title>Roboti</title></head> <body>
142

<h1>Roboti de top</h1> <h2><strong>ASIMO (Honda)</strong></h2> <p >Ajutorul sau inlocuitorul omului? <img src="imagini/robot1.jpg"> <h3>Prezentare</h3> <p> Robot capabil sa realizeze multe dintre activitatile umane, incepand cu cele periculoase sau plictisitoare. <h3>Activitati</h3> <p>Intelege un set de comenzi verbale, se deplaseaza pe teren plan dar urca si scari, poate efectua activitati domestice obisnuite. <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in tot mai multe domenii. Utilizarea lui ar putea deveni curand varianta normala in realizarea unor activitati. <p>Sait proiectat de FlexForm </body> </html> Rezultat: Afiat n Internet Explorer
3. Creai o nou pagin Web denumit jucarie.html. Pentru realizarea ei salvai fiierul asimo.html dndu-i numele indicat i nlocuii secvena de descriere a robotului, astfel:
143
<h2><strong>Robot jucarie</strong></h2> <p >Prietenul copilului tau <img src="imagini/ robot_jucarie.png"> <h3>Prezentare</h3> <p>obotul-jucarie este prietenul ideal. <h3>Activitati</h3> <p>Se deplaseaza, se invârte, râde, doarme. <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in gradinite pentru a creea copiilor un mediu stimulativ. Tema 3: Recodificarea documentelor n XHTML Recodificai documentele realizate n XHTML, astfel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head> pagina </head> <body><h1>Prima mea pagina web</h1> <p>Aceasta pagina a fost creata in Notepad.</p> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head><title>Roboti</title></head> <body> <body> <h1>Roboti de top</h1> <h2><strong>ASIMO (Honda)</strong></h2> <p>Ajutorul sau inlocuitorul omului?</p> <img src="imagini/robot1.jpg" alt="ASIMO" /> <h3>Prezentare</h3> <p> Robot capabil sa realizeze multe dintre activitatile umane, incepand cu cele periculoase sau plictisitoare.</p> <h3>Activitati</h3> <p>Intelege un set de comenzi verbale, se deplaseaza pe teren plan dar urca si scari, poate efectua activitati domestice obisnuite.</p> <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in tot mai multe domenii. Utilizarea lui ar putea deveni curand varianta normala in realizarea unor activitati.</p> <p>Sait proiectat de FlexForm</p> </body> </html>
144
<h2><strong>Robot jucarie</strong></h2> <p >Prietenul copilului tau</p> <img src="imagini/robot_jucarie.png" alt="Robot jucarie" /> <h3>Prezentare</h3> <p>obotul-jucarie este prietenul ideal.</p> <h3>Activitati</h3> <p>Se deplaseaza, se invârte, râde, doarme.</p> <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in gradinite pentru a creea copiilor un mediu stimulativ.</p>
Adugai la sfritului fiierelor realizate (asimo.html i jucarie.html) descrierea coloanei din dreapta a paginii Web. Aceasta conine o list neordonat (<ul>) care conine trei elemente care vor deveni titluri (realizate folosind <h2>), dup fiecare titlu fiind inclus cte o list neordonat. <ul> <li><h2>Roboti de top</h2></li> <li><ul> <li>ASIMO</li> <li>Robotul interpret</li> <li>Nao</li> <li>Robot jucarie</li> </ul></li> <li><h2>Informatii despre...</h2></li> <li><ul> <li>Istoria robotilor</li> <li>Componente electronice</li> <li>Componente mecanice</li> <li>Performante</li> </ul></li> <li><h2>Cei mai performanti</h2></li> <li><ul> <li>Roboti industriali</li> <li>Roboti mobili</li> <li>Roboti medicali</li> </ul></li> </ul>
145
Aplicaii (2)
TEMA 1 :
Crearea unei pagini Web codificat n XHTML cuprinznd diferite
elemente: paragrafe, titluri, imagini. 1. Accesai saitul http://www.wikipedia.org/ i cutai informaii despre o tem care v preocup. Realizai pagina Web cercetare.html coninnd informaiile gsite. Precizri suplimentare: a) Fiierul cercetare.html va fi creat n directorul D:\numele_dv. b) Preluai imaginile din saitul Wikipedia astfel: selectai cu butonul drept al mouse-ului imaginea i apoi folosii opiunea Save picture as... din meniul contextual afiat. Salvai imaginile n D:\numele_dv\imagini_noi dndu-le denumiri sugestive.
TEMA 2 : Prelucrarea a trei imagini n vederea utilizrii n pagini Web folosind Paint.Net i crearea unei pagini Web care utilizeaz imaginile date 1. Refacei imaginea de mai jos folosind fiierele "robot_antet.png", "rand1.jpg", "rand2.jpg" din directorul D:\numele_dv\imagini. aplicaia Paint.Net. Pentru editare folosii
1. Refacei imaginile "rand1.jpg" i "rand2.jpg" schimbnd aspectul i dimensiunea scrisului (componena culorii iniiale: rosu 205, verde 87, albastru 25). Indicaie: Scriei textele n Microsoft Word, copiai ecranul, decupai i redimensionai.
146
TEMA 3 : Realizarea unei pagini coninnd liste de diferite tipuri i tabele. 1. Reluai fiierele D:\numele_dv\asimo.html i D:\numele_dv\jucarie.html i modificai-le astfel nct informaiile despre roboi s apar n tabele cu dou linii i dou coloane, ca n figur:
<h1>Roboti de top</h1> <table> asimo.html <tr> <td><h2><strong>ASIMO (Honda)</strong></h2> <p>Ajutorul sau inlocuitorul omului?</p> </td> <td> </td> </tr> <tr> <td><img src="imagini/robot1.jpg" alt="ASIMO" /></td> <td> <h3>Prezentare</h3> <p> Robot capabil sa realizeze multe dintre activitatile umane, incepand cu cele periculoase sau plictisitoare.</p> <h3>Activitati</h3> <p>Intelege un set de comenzi verbale, se deplaseaza pe teren plan
147

dar urca si scari, poate efectua activitati domestice obisnuite.</p> <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in tot mai multe domenii. Utilizarea lui ar putea deveni curand varianta normala in realizarea unor activitati.</p> </td> </tr> </table>
2. Modificai paginile D:\numele_dv\asimo.html i D:\numele_dv\jucarie.html astfel nct s conin tabele cu dou linii i trei coloane. Ultima coloan va avea celulele unite i va conine listele de la sfritul documentelor. <h1>Roboti de top</h1> <table> <tr> <td><h2><strong>ASIMO (Honda)</strong></h2> <p>Ajutorul sau inlocuitorul omului?</p> </td> <td> </td> <td rowspan="2"> <ul> <li><h2>Categorii</h2></li> <li><ul> <li>ASIMO</li> <li>Robotul interpret</li> <li>Nao</li> <li>Robot jucarie</li> </ul></li> <li><h2>Informatii despre...</h2></li> <li><ul> <li>Istoria robotilor</li> <li>Componente electronice</li> <li>Componente mecanice</li> <li>Performante</li> </ul></li> <li><h2>Cei mai performanti</h2></li> <li><ul> <li>Roboti industriali</li> <li>Roboti mobili</li> <li>Roboti medicali</li> </ul></li> </ul> </td> </tr> <tr>
148

<td><img src="imagini/robot1.jpg" alt="ASIMO" /></td> <td> ...
Tema 4: Inserarea legturilor spre paginile web folosind ca suport iruri de caractere i imagini. 1. Modificai pagina asimo.html astfel nct s conin referinele din figur:
149
http://en.wikipedia.org/wiki/Asimo
# interpret.html nao.html jucarie.html
istorie.html componente1.html componente2.html perfo.html
industriali.html mobili.html medicali.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Roboti</title> </head> <body> <h1>Roboti de top</h1> <table> <tr> <td><h2><strong>ASIMO (Honda)</strong></h2> <p>Ajutorul sau inlocuitorul omului?</p> </td> <td> </td> <td rowspan="2"> <ul> <li><h2>Roboti de top</h2></li> <li><ul>
150

<li><a htef="#">ASIMO</a></li> <li><a href="interpret.html">Robotul interpret</a></li> <li><a href="nao.html">Nao</a></li> <li><a href="jucarie.html">Robot jucarie</a></li> </ul></li> <li><h2>Informatii despre...</h2></li> <li><ul> <li><a href="istorie.html">Istoria robotilor</a></li> <li><a href="componente1.html">Componente electronice</a></li> <li><a href="componente2.html">Componente mecanice</a></li> <li><a href="perfo.html">Performante</a></li> </ul></li> <li><h2>Cei mai performanti</h2></li> <li><ul> <li><a href="industriali.html">Roboti industriali</a></li> <li><a href="mobili.html">Roboti mobili</a></li> <li><a href="medicali.html">Roboti medicali</a></li> </ul></li> </ul> </td> </tr> <tr> <td><a href="http://en.wikipedia.org/wiki/Asimo"><img src="imagini/robot1.jpg" alt="ASIMO" /></a></td> <td> <h3>Prezentare</h3> <p> Robot capabil sa realizeze multe dintre activitatile umane, incepand cu cele periculoase sau plictisitoare.</p> <h3>Activitati</h3> <p>Intelege un set de comenzi verbale, se deplaseaza pe teren plan dar urca si scari, poate efectua activitati domestice obisnuite.</p> <h3>In viitor...?</h3> <p>Va fi folosit pe scara larga in tot mai multe domenii. Utilizarea lui ar putea deveni curand varianta normala in realizarea unor activitati.</p> </td> </tr> </table> <p>Sait proiectat de FlexForm</p> </body> </html>
2. Afiai pagina n Internet Explorer i testai legturile.
Observaie: singurele
legturi care funcioneaz sunt cea referit prin selectarea imaginii, cea care
151

indic "#" ca pagin referit i "Robot jucarie". Simbolul "#" se folosete
pentru a indica o referin spre pagina curent, asimo.html). 3. Adugai legturi i n pagina jucrie.html. Atenie: "ASIMO" va indica o
legtur spre asimo.html iar"Robot jucarie" va fi legtur spre "#".
1. Creai pagina principal a saitului, index.html, de prezentare a robotilor. Pagina va conine un text de prezentare i un un tabel cu trei coloane i trei rnduri coninnd imagini cu roboi. dimensiunile de 175x175. Exemplu de realizare: Pentru realizarea tabelului putei folosi imaginile din Imaginile au directorul imagini sau putei descrca imagini de pe Internet.
Roboti
Un robot este un echipament industrial programabil avnd o nalt grad de flexibilitate. El este comandat prin calculator i din acest motiv poate avea un grad naintat de autonomie. O alt caracteristic definitorie este dotarea cu senzori care i permit s examineze mediul n care opereaz.
robot1a.jpg
robot2.jpg
robot3.jpg
robot4.jpg
robot5.jpg
robot6.jpg
robot7.jpg
robot8.jpg
robot9.jpg
152

Rezultat:
2. Creai o pagin nou denumit interpret.html, cu informaii detaliate despre robotul violonist. Pentru operativitate copiai pagina asimo.html ntr-un fiier nou, denumit interpret.html, i realizai modificrile necesare.
153
Aplicaii (3)
TEMA 1 : Realizarea unei pagini Web n care paragrafele sunt formatate n coresponden cu un set de specificaii (font, dimensiune, culoare, aspect).
1. Pentru mbuntirea aspectului paginilor create, impunei modul de afiare pentru cteva marcaje. Pentru aceasta realizai fiierul stil.css, astfel: body { font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; } h1, h2, h3 { text-transform: lowercase; font-weight: bold; } h2 { letter-spacing: -2px; font-size: 2.6em; color:#00543C; } p{ font: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; color: #000000; } 2. Includei n seciunea <head> a paginilor index.html, asimo.html, jucarie.html i interpret.html marcajul <link>n care s specificai fiierul care conine definiiile de stiluri, astfel: <link href="stil.css" rel="stylesheet" type="text/css" /> 3. Vizualizai paginile n Internet Explorer.
154

TEMA 2 : Realizarea unei pagini Web cu referine formatate conform unor specificaii. (Se va exemplifica i exploatarea referinelor pentru crearea efectelor specifice paginilor Web).
1. Adugai n fiierul de stiluri specificaii privind formatarea referinelor, astfel: a{ color: #008B8B; text-decoration: none; } a:hover { text-decoration: underline; color: #8A2BE2 } a:visited { color: #8A2BE2 } 2. Modificai culorile folosite i schimbai comportamentul referinelor. Pentru codificarea culorilor accesai http://www.w3schools.com/css/css_colornames.asp.
TEMA 3 :
Realizarea unei pagini Web coninnd un ansamblu de blocuri
declarate folosind marcaje <div> pornind de la o structur predefinit. Introducerea coninutului blocurilor. 1. Stabilii blocuri <div> pentru a realiza dispunerea informaiei din paginile site-ului ca n figura de mai jos.
bloc_ext antet continut col1 col2
piciorpag
155

Indicaii: 900px. Inalimea blocului antet va fi de 200px iar a blocului piciorpag va fi de 28px. Limile blocurilor col1 i col2 vor fi de 670px respectiv 200px, ntre ele rmnnd un spaiu de30px (declarat ca margin-left pentru blocul col2). Se completeaz fiierul stil.css cu descrierea blocurilor prezentat n continuare. div{ margin: 0; padding: 0; background-color:#FFF; } #bloc_ext { width: 900px; margin: 0 auto; } #antet { width: 900px; height: 200px; background: #FFF url(imagini/fundal_antet_flex111.png); } #continut { width: 900px; border-top: 2px solid #082840; } #col1 { float: left; width: 670px; } #col2 { float: left; width: 200px; background-color: #fff; margin-left: 30px; } #piciorpag { width: 900px; height: 28px; background-color: #ff8121; } Limea blocurilor bloc_ext, antet, continut i piciorpag se stabilete la
156

Not: Efectul declaraiei margin: 0 auto pentru blocul bloc_ext (care va cuprinde tot coninutul paginii) este centrarea paginii n fereastra aplicaiei de navigare. Pentru testarea structurii de blocuri se va folosi fiierul stil.css pentru afiarea paginii index.html, astfel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Roboti</title> <link href="stil.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bloc_ext">  <div id="antet"> </div> <div id="continut">  <div id="col1"> <h1>Roboti </h1> <p>Un robot este un echipament industrial programabil avand un inalt grad de flexibilitate. El este comandat prin calculator si din acest motiv poate avea un grad inaintat de autonomie. O alta caracteristica definitorie este dotarea cu senzori care ii permit sa examineze mediul in care opereaz.</p> <table border=0> <tr><td><img src="imagini/robot1a.jpg" alt="" /></td> <td><img src="imagini/robot2.jpg" alt="" /></td> <td><img src="imagini/robot3.jpg" alt="" /></td> </tr> <tr><td><img src="imagini/robot4.jpg" alt="" /></td> <td><img src="imagini/robot5.jpg" alt="" /></td> <td><img src="imagini/robot6.jpg" alt="" /></td> </tr> <tr><td><img src="imagini/robot7.jpg" alt="" /></td> <td><img src="imagini/robot8.jpg" alt="" /></td> <td><img src="imagini/robot9.jpg" alt="" /></td> </tr> </table> <p><a href="#">Informatii suplimentare ... </a> | <a href="#">Comentariile Dv....</a></p> </div>  <div id="col2"> <ul> <li><h2>Roboti de top</h2></li> <ul> <li><a href="asimo.html">ASIMO</a></li>
157
<li><a href="asimo.html">ASIMO</a></li> <li><a href="#">Robotul interpret</a></li> <li><a href="#">Nao</a></li> <li><a href="jucarie.html">Robot jucarie</a></li> </ul> <li><h2>Informatii despre...</h2></li> <ul> <li><a href="#">Istoria robotilor</a></li> <li><a href="#">Componente electronice</a></li> <li><a href="#">Componente mecanice</a></li> <li><a href="#">Performante</a></li> </ul> <li><h2>Cei mai performanti</h2></li> <ul> <li><a href="#">Roboti industriali</a></li> <li><a href="#">Roboti mobili</a></li> <li><a href="#">Roboti medicali</a></li> </ul> </ul> </div> <div style="clear: both;"> </div>  </div>  <div id="piciorpag"> <p>Sait proiectat de FlexForm </p> </div> </div>  </body> </html>
Afiat n fereastra aplicaiei de navigare, pagina index.html apare ca n figura urmtoare.
158
Tema 4 : Introducerea n pagina Web unor liste i a unui tabel i formatarea lor folosind un set de reguli definite. 1. Ameliorai modul de afiare a coninutului blocului col1 distannd coninuturile din celulele tabelului. #col1 p{ padding-left: 15px; } #col1 h3{ padding-left: 15px; } 2. Ameliorai modul de afiare a listelor din col2.
159

#col2 ul { margin: 0 10px 0 0; padding: 0; list-style: none; } #col2 ul li ul li { padding: 7px 0 0 20px; } #col2 h2 { height: 30px; margin: 30px 0 0 0; padding: 5px 5px 0 10px; background: #457EE9 url(imagini/img211.gif) repeat-x; letter-spacing: normal; font-size: 15px; color: #FFFFFF; }
Not:
Coninutul blocului piciorpag trebuie formatat.
Deoarece acest bloc
conine un singur paragraf se va modifica doar stilul de afiare a acestuia. #piciorpag p{ color: #FFF; text-align: center; font-size: 12px; font-weight: bold; padding: 3px; } Tot n acest moment se poate valida coninutul paginii index.html accesnd aplicaiile de validare pentru cod i stiluri. Datorit faptului c validarea reuete suntem ndreptii s includem n blocul piciorpag cele dou sigle care atest aceasta:
Blocul piciorpag se va modifica astfel: <div id="piciorpag"> <p>Sait proiectat de FlexForm <img src="imagini/valid-xhtml.png" alt="XHTML validat" /> <img src="imagini/valid-css.png" alt="CSS validat" /></p> </div>
160

Pentru afiarea celor dou sigle ca n imaginea prezentat s-a impus un stil pentru afiare a imaginilor n blocul piciorpag:
#piciorpag img { float: right; margin: 0 10px; }
De asemenea s-a definit clasa litera pentru a evidenia prima liter din titlul unei pagini prin reprezentarea ei mai mare i n alt culoare Clasa opereaz numai n col1, din acest motiv la declararea ei s-a specificat acest lucru. #col1 .litera { font-size: 1.7em; color: #00543C; font-weight: bold; } n index.html de exemplu se poate scrie: <h1><span class="litera">R</span>oboti</h1>
161
Aplicaii (4)
TEMA 1 : Instalarea pachetului de aplicaii XAMPP Lite pe calculatorul personal i lansarea sa n execuie
1. Descrcai
de
la
adresa
http://www.apachefriends.org/en/xampp-
windows.html pachetul de aplicaii xampplite; 2. Dezarhivai n rdcina discului D: acest pachet de aplicaii; 3. Studiai modul de pornire a serviciului.
TEMA 2 : Crearea i testarea unui site folosind fiierele .html, .CSS i a imaginilor realizate n exerciiile precedente.
1. Copiai directorul D:\numele_dv n subdirectorul \xampplite\htdocs, pornii serverul de web Apache, apoi vizualizai pagina index.html tastnd n caseta de text pentru adrese a browserului adresa site-ului, adic http://localhost/numele_dv/. 2. Verificai funcionarea tuturor legturilor i efectuai eventualele corecturi. 3. Revedei coninuturile paginilor asimo.html, jucarie.html i interpret.html. Operai peste tot corecturile necesare utilizrii fiierului stil.css. Observaie: Utilizarea stilurilor permite renunarea la metoda de dispunere a
informaiilor n pagin prin folosirea tabelelor. 4. Completai pagina interpret.html insernd un player n care va rula un film cu robotul interpret.
162

Indicaii: Copiai n directorul paginii fiierul player.swf, (vezi soluia din curs) pregtind astfel afiarea secvenei video. Instalai-va aplicaia Youtube Downloader i preluai fiierul care trebuie redat accesnd adresa: http://www.youtube.com/watch?v=EzjkBwZtxp4.
TEMA 3 :
Definirea unei pagini Web suplimentare coninnd un formular de
nregistrare a caracteristicilor unui robot. Datele culese vor fi expediate la o adres dat folosind pota electronic
1. Creai n directorul D:\xamplite\htdocs\numele_dv pagina caracteristici.html. Indicaie: Plasai coninutul formularului n celulele unui tabel : <div id="col1"> <h1><span class="litera">C</span>aracteristicile robotului</h1> <br /> <table border=0 cellpadding = 10> <form method="post" action="mailto:office@yahoo.com?Subject=Caracteristici"> <tr><td>Denumire : </td> <td> </td> <td><input type="text" name = "num"></td> </tr> <tr><td>Categoria : </td> <td> </td> <td><input type="text" name = "categorie"></td> </tr> <tr><td>Masa (kg) :</td> <td> </td> <td><input type="text" name = "masa"></td> </tr> <tr><td>Inaltime:</td> <td> </td> <td><input type="text" name = "inalt"></td> </tr> <tr><td>Pret (EURO):</td> <td> </td> <td><input type="text" name = "pret"></td> </tr> <tr><td>E-mail sef proiect:</td> <td> </td> <td><input type="text" name = mail></td>
163

</tr> <tr><td colspan = 3 align = "center"><input type="button" name = "trimit" value = "Trimite datele"></td> </tr> </form> </table> </div> ....
Not:
Pe calculatorul Dv. nu exist o aplicaie specializat pe trimiterea O astfel de
mesajului astfel c aplicaia apelat (mailto) nu poate fi executat. Internet.
aplicaie denumit Mail Transport Agent preia mesajul i l trimite la destinaie prin Serverele care gzduiesc saituri ofer sistematic acces la o astfel de aplicaie deci dup transferul paginii create pe un astfel de server formularul va funciona corect.
164

2. Accesai saitul http://www.freelayouts.com/. soluii de stilizare pentru paginile Dv. Acesta conine cteva sute de
Preluai un sait care v place i
dezarhivai-l n directorul D:\xamplite\htdocs\. Verificai funcionarea acestuia. Not: Preluai saituri realizate cu tehnologia studiat, respectiv bazate pe
xhtml i CSS. Nu va fi greu deoarece majoritatea sunt realizate n acest mod.
3. Adaptai saitul preluat astfel nct s putei afia informaiile din paginile create n zilele anterioare ncepnd cu index.html i asimo.html.
165
Aplicaii (5)
Tema 1:
Instalarea aplicaiei Web Claroline pe calculatorul personal,
configurarea i lansarea sa n execuie. 1. Descrcai de la adresa www.claroline.org ultima versiune a platformei de nvmnt la distan Claroline i dezarhivai arhiva. 2. Deschidei n Notepad++ fiierul D:\xamplite\php\php.ini i operai modificrile: a. Linia : display errors = On devine display errors = Off b. Linia comentat : ; date.timezone = devine: date.timezone = "Europe/Bucharest" Repornii xampplite (xampp_restart).
3. Copiai directorul rezultat n urma dezarhivrii n D:\localhost\htdocs\ . Lansai n execuie pachetul de aplicaii xamplite (selectai xampp_start) i instalai aplicaia tastnd n caseta de adrese a aplicaiei Internet Explorer adresa:
Indicaii: a. Pentru a nu avea ulterior probleme cu accesul la aplicaia instalat impunei pentru administrator numele admin i parola tot admin. b. Realizai instalarea aplicaiei Claroline urmrind paii afiai.
166

la pasul 4:
la pasul 6:
Dac pentru instituia care deine noua instalare s-a trecut Flexform iar numele noului "campus" a rmas cel implicit, fereastra afiat de aplicaia proaspt instalat este cea din figura urmtoare.
167
Tema 2: Pregtirea platformei Claroline: adugarea unor utilizatori i definirea drepturilor de acces ale acestora. 1. Conectai-v ca administrator i modificai limba implicit n care sunt afiate informaiile:
168

Deconectai-v de la aplicaie. 2. Creai un cont de profesor dup modelul din figur:
Not: Pe o platform Claroline n exploatare posibilitatea unui nou utilizator de a se nregistra ca profesor trebuie blocat. Pentru aceasta administratorul va modifica formularul de nregistrare a noilor utilizatori. 3. Creai 5 conturi de cursant obinuit. 4. Grupai cursanii ntr-o nou clas. clas: Conectai-v ca administrator i
selectai Platform administration / Administreaza clasele / Creaz o nou
169
Creai o clas (n exemplu sa creat clasa Cluj11_12) i adugai-i civa cursani:
170
Tema 3:
Crearea unui curs.
Se vor defini toate seciunile importante:
descriere, documente i linkuri i lista cursani. 1. Conectai-v ca profesor (login: prof, parola: prof) i creai un curs denumit Robotica:
171

2. Accesai noul curs i adugai-i o descriere sumar pe pagina de start i o prezentare mai consistent n seciunea Descrierea cursului.
3. Adugai cursului cteva documente n format .pdf n seciunea Documente i Linkuri. Pentru adugarea documentelor procedai astfel:
-
selectai Inacarca fisier:
172

selectai Browse... , selectai n fereastra afiat fiierul care va fi ncrcat i apoi apsai butonul Ok:
173

Tema 4: Extinderea unui curs prin adugarea n Documente i Linkuri a unui subdirector coninnd descrierea unui experiment. Pornind de la un document n form brut Word, cursanii vor realiza formatarea acestuia i vor crea un document n format .pdf i unul n format .html. integra i elemente multimedia. 1. Convertii n format .pdf fiierul asimo.doc din directorul D:\numele_Dv\ i adugai-l n seciunea Documente i Linkuri. 2. Adugai fiierele asimo.html, interpret.html, jucarie.html, player.css i stil.css din edinele precedente n seciunea Documente i linkuri. 3. Creai n seciunea Documente i Linkuri un subdirector denumit imagini i ncrcai n acest subdirector coninutul directorului imagini de pe calculatorul Dv. Fiierul n format .html va
4. Verificai afiarea corect a fiierelor n format .html adugate prin selectarea lor cu mouse-ul. 5. nscriei-v pe platforma de nvmnt la distan a centrului Flexform i experimentai funciile oferite de aceasta (acces la materialele folosite, discuii, acces la mesajele profesorului, recuperare parol pierdut. Not: Codul administrativ v va fi indicat de profesor. administratorului neautorizai. platformei la identificarea i tergerea conturilor El servete cursanilor
174

Curs 2 - Medii Si Tehnologii Educationale Interactive

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 2 - Medii Si Tehnologii Educationale Interactive

Încărcat de

Drepturi de autor:

Formate disponibile

Tehnici de informare i comunicare

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Capitolul I Limbajul HTML

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

pagini web (fiiere .html)

1.3 Principiile limbajului HTML

<HTML> <HEAD> <TITLE>Prima pagina Web</TITLE> </HEAD>

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

1.4. XML, XHTML

Medii i tehnologii educaionale interactive

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

privind formatarea faciliteaz ntreinerea coninutului paginilor.

1.3 Marcaje XHTML

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

&nbsp; &lt; &gt; -

pentru caracterul spaiu pentru < pentru > pentru &

1.3.4.1 Lista ordonat

Medii i tehnologii educaionale interactive

1.3.4.2 Lista neordonat

1.3.4.3 Lista coninnd definiii

Medii i tehnologii educaionale interactive

Exemplu: <img src="imagini/trandafir.jpg" alt="Trandafir" />

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

1.3.6 Mic tutorial Inkscape

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

Se selecteaz File / Export Bitmap:

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

<td><img src="pictura.jpg" alt="" /></td>

Medii i tehnologii educaionale interactive

<td colspan="3">Zona de est</td>

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

1.3.8 Marcaje pentru definirea legturilor

1.3.8.1 Referine selectate folosind iruri de caractere

Medii i tehnologii educaionale interactive

Medii i tehnologii educaionale interactive

1.3.8.2 Referine selectate folosind imagini

<a href="http://www.tigerworld.com"><img src="tiger.jpg" alt="" /></a>

1.3.8.3 Folosirea referinelor pentru navigarea n pagini lungi

Medii i tehnologii educaionale interactive

<a href="#eticheta"> </a> sau <a href="nume.html#eticheta"></a>

Medii i tehnologii educaionale interactive

1.3.8.4 Folosirea referinelor pentru lansarea n execuie a unor aplicaii

Variant : folosirea unei imagini :

< > -