Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP [604526]

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

8

CAPITOLUL I
HTML și CSS

1.1. Internet. Scurt istoric
Triumf al tehnologiei dezvoltate de om de -a lungul mileniilor, internetul care azi ne
influențează în atât de mare măsură existența are o istorie scurtă, dar densă și accelerată,
jalonată de câteva momente de referință, care l -au structurat în form a pe care o cunoaștem
azi.
Apariția internetului nu poate fi atribuită unei singure persoane. Tehonologia ce stă la
baza internetului este atât de complexă și în continuă schimbare încât este mai mult decât
evident că o serie de persoane și-au adus aport ul la această invenție care a schimbat cu totul
lumea în care trăim.
Internetul este rezultatul muncii a zeci de cercetători, programatori și ingineri care au
dezvoltat diferite tehnologii care aduse împreună au format ceea ce se numește “Information
super highway”. Povestea internetului începe cu mult timp înainte ca tehnologia care a permis
crearea acestuia să fi apărut. Unul dintre primii oameni care au jonglat cu ideea unui system
“world wireless” a fost Nikola Tesla la începutul anilor 1900.
Istoria Int ernetului începe odată cu dezvoltarea timpurie a calculatoarelor și a
rețelelor de comunicații (1950 și 1960) și poate fi împărțită în mai multe etape. Ideea unei
rețele de calculatoare destinate să permită comunicarea generală între utilizatorii aflați la
diferite calculatoare a depins de evoluțiile tehnologice și de fuziune a infrastructurii
sistemelor și a rețelelor existente de telecomunicații. Prima descriere documentată despre
interacțiunile sociale care ar apărea prin crearea unor rețele ( networking ) este conținută într -o
serie de note scrise de J.C.R. Licklider de la Institutul de Tehnologie din Massachusetts , în
august 1962, în care Licklider a discutat conceptul de Galactic Network – rețea galactică.
Internetul s -a nascut la mijlocul anilor 60 in forma ARPAnet (Advanced Research
Projects Agency Net) – o retea intre mai multe computere din unele institutii america ne, ce
lucrau pentru ARPA, un departament de cercetare din cadrul Pentagonului. ARPA a fost pus
in functiune ca reactie la succesul sovietic al lansarii satelitului Sputnik in spatiu in 1957.
Unul din obiectivele ARPAnet era crearea unei retele, care sa n u fie distrusa datorita

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

9
atacurilor asupra sistemului . Razboiul Rece fiind la apogeu, scenariul unui dezastru era
considerat fie lansarea unei bombe fie un atac nuclear.
Internet -ul a inceput ca o retea de patru computere intre Universitatile din Utah, San ta
Barbara si Los Angeles si Institutul de Cercetare din Stanford . In curand, cercetatori din alte
institutii de stat au devenit interesati. Deoarece folosirea computerelor era costisitoare, ei au
vazut imediat avantajele folosirii in comun a unei retele.
La sfarsitul anilor 60 si inceputul anilor 70 , cand Internetul numara in jur de 5o de
computere , s-au dezvoltat primele dintre programele , folosit inca si azi pentru transferul
informatiei:
 File Transfer Protocol pentru trimiterea si regasirea fisierelor
 Telnet pentru accesarea si folosirea bazelor de date, a bibliotecilor si a cataloagelor
din toata lumea
 e-Mail pentru trimiterea mesajelor personale.
Un protocol de rețea realizat în 1974 (RFC 675 – Specification of Internet Transmission
Control Program), de către Vinton Cerf, Yogen Dalal și Carl Sunshine, conținea
cuvântul internet , prescurtare de la internetworking. Pesemne că nici autorii nu prevedeau
succesul pe care îl va avea acest termen, devenit azi unul dintre cele mai uzitate substantive .
Internetul este, așadar, o rețea unitară de computere și alte dispozitive cu adrese
computerizate, toate conectate între ele și operând coordonat grație unui ansamblu
standardizat de protocoale de transfer de date.
In urmatoare decada, Internetul a crescut la o retea de 200 de computere . Partea militara
era organizata intr -o retea separata, Milnet . In acelasi timp, au aparut alte retele, mai ales in
sectorul academic . Important printre acestea era (si este) USENET sau Users’ Network, care
a inceput in 1979, cand cateva UNIX -computere au fost conectate impreuna.
10 ani dupa ce Usenet incepuse, Internetul a crescut la 80.000 de computere. A inceput
sa fie un factor de luat in considerare in politica. Si curand, expr esia “Information
SuperHighway” (autostrada informatiei) a devenit uzuala. In aceasta metafora, Internetul era
vazut ca o importanta infrastructura pentru transportul unor bunuri vitale (informatii).
In anii 80 si inceputul anilor 90, cand Internetul era folosit doar de un numar mic de
cercetatori, arata mult diferit decat astazi. Principalele aplicatii erau atunci E-Mail si
Newsgroups ( grupuri de discutii) plus diverse routine de cautare si mecanisme de transfer al
fisierelor. Aceasta era o lume UNIX, i n care toate comunicatiile existau doar ca text sau
numere , si liniile de comanda trebuiau memorate si tiparite. Cand e -mail, dar mai ales

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

10
programele de cautare si de transfer al fisierelor au trebuit sa faca fata unor cerinte mai
complexe, new navigators s-au dezvoltat. Software -ul pentru fiecare trebuia sa fie obtinut si
configurat separat. Folosirea fiecaruia trebuia sa fie invatata. Datorita metalimbajului foarte
dificil, folosirea Internetului in acea perioada era restransa la un mic grup de oameni di n
universitati si institute de cercetare.
Marea schimbare a inceput, cand Tim Berners Lee de la CERN (Centrul European
pentru Fizica Nucleara) in Geneva a pus bazele in 1989 dezvoltarii primului prototip al
World Wide Web (WWW sau 3W).
Se confundă adesea noțiunea de internet cu cea de WWW (World Wide Web); ele nu sunt
însă același lucru, căci WWW este numai una dintre aplicațiile internetului (e -mail-ul, de
pildă, este alta). WWW este un sistem de documente hipertext interconectate, ce pot fi
accesate prin internet.
Ca de obicei in istoria Internetului, scopul initial al WWW -ului era destul de limitat.
Era destinat sa fie o platforma interna de comunicatii pentru cercetatorii din intraga lume care
lucrau pentru CERN. Sarcina principala era sa asigure u n sistem, care sa faca legatura intre
varietatea de plaforme ale diverselor computere . Solutia se baza era idea de a face legatura
intre documente via "hypertext" .
Hypertext inseamna, a marca sirurile de text sau alte obiecte si de a le lega cu alte
obiecte, care ar putea fi din punct de vedere fizic la mare distanta de obiectul original. Cand
legatura este selectata, cineva poate "sari" la documentul legat. In acest fel este posibil de a
lega un numar nelimitat de documente intre ele intr -o structura we b ne-ierarhica. Pentru a
putea deosebi aceste documente si pentru a le regasi, fiecare are o adresa unica. Aceasta este
Unique Resource Locator (URL). URL -urile constau intr -un protocol de transmitere (in
cazul WWW -ului acest a este Hypertext Transfer Pro tocol – http), urmat de www (in cele mai
multe cazuri) si de domeniu (de exemplu numele serverului si numele paginii).
In Iunie 1993 130 Webservere erau inregistrate, in 1994 erau deja 11.576 servere.
Dar web -ul nu a facut doar sa se dezvolte. De asemene a, posibilitatile de a prezenta
datele au crescut dramatic. Curand au aparut poze si animatilei pe website -uri, urmate de
sunete . Doar un mic pas mai era necesar pentru a aduce cataloage, directoare si formulare de
comanda pe website -uri. Astfel, cativa a ni mai tarziu s -a nascut E-Commerce .
Noțiunea de website (sau pur și simplu site, ori „site web”) desemnează o grupă de
pagini web multimediale (conținând texte, imagini fixe, imagini mișcătoare și chiar sunete),
accesibile în Internet în principiu oricui, de obicei pe o temă anume, și care sunt conectate

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

11
între ele prin așanumite hyperlinkuri. Diversele situri web pot fi oferite de către o companie,
un proiect, o rețea de utilizatori, o persoană particulară, o administrație publică și multe altele.
Pentru crearea paginilor web s -a impus limbajul HTML ( HyperText Markup
Language) – un limbaj de marcare, al cărui scop constă în prezentarea într -un anumit format a
informațiilor: paragrafe, tabele, fonturi, culori, ș.a.m.d.
Calculatorul pe care se găsește site -ul se numește „server”, iar calculatoarele care
accesează conținutul site -ului se numesc „client”. Orice calculator client trebuie să dispună de
un program specializat, numit „browser”, cu ajutorul căruia să se poată interpreta și deci
vizualiza fișierele HTML. Pe server trebuie să se găsească un program care ră spunde cererilor
browser -ului aflat pe calculatorul client. Cererea efectuată de către browser și răspunsul
server -ului se fac prin respectarea unui anumit protocol. Acest protocol se numește HTTP
(HyperText Transfer Protocol).
1.2. Limbajul HTML
HTML este o fo rmă de marcare orientată către prezentarea documentelor text pe o
singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML , cel
mai bun exemplu de astfel de software fiind browserul web . HTML furnizează mijloacele prin
care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de
redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi
specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine tr ebuie introdusă,
până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații
despre titlul și autorul documentului, informații structurale despre cum este împărțit
documentul în diferite segmente, paragrafe, liste, titlu ri etc. și informații cruciale care permit
ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink -uri
(sau web-ul).
HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând
un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe
solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar
fi Macromedia Dreamweaver , Adobe GoLive sau Microsoft FrontPage permit ca paginile web
sa fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează
un cod HTML care este de multe ori de proastă calitate.
Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu
orice editor de texte. Au fost insa dezvoltate edito are specializate care permit editarea intr -un

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

12
fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afișează
acelasi document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de
asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si
formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile
anterioare deoarece limbajul HTML este inca incomplet.
HTML este prescurtarea de la Hyper Text Mark -up Language si este codul care sta la
baza paginilor web. Paginile HTML sunt formate din etichete sau taguri și au extensia „.html”
sau „.htm”. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <tag> și
alta de închidere </tag>, mai există și cazur i în care nu se închid, atunci se folosește <tag />.
Navigatorul web interpretează aceste etichete afișând rezultatul pe ecran. HTML -ul este un
limbaj care nu face deosebire între litere majuscule și minuscule.
Pagina principala a unui domeniu este fisieru l „index.html” respectiv „index.htm”.
Unele taguri permit utilizarea de atribu te care pot avea anumite valori.
Sintaxa: <tag atribut="valoare"> … </ tag>
1.2.1. Structura unui document HTML
HTML utilizează pentru descrierea documentelor web – taguri, numite și etichete,
specifice pentru fiecare element descris. Tag -urile stabilesc atât structura documentului, cât și
aspectul acestuia. Un tag este un identificator care furnizează browser -ului instrucțiuni de
formatare a documentului. Petru a fi del imitate, tag -urile HTML sunt încadrate între paranteze
unghiulare (< >). Tag -urile se divizează în:
• taguri pare sau taguri pereche – care impun după sine existența unui tag de închidere;
• taguri impare sau singulare – care nu necesită închidere.
Tagul <html>
Sintaxa : <html>….</html>
Semantica: este primul tag care trebuie să apară într -un fișier HTML și care
încadrează întreaga pagină web.
Tagul <head>
Sintaxa : <head>….</head>
Semantica: marchează partea de antet a
Tagul <body>
Sintaxa : <body>….</body>

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

13
Semantica: încadrează conținutul paginii web; corpul poate conține texte și/sau
imagini.
Tagul <title>
Sintaxa : <title>….</title>
Semantica: încadrează titlul paginii web; acesta apare pe bara de titlu a ferestrei
afișate în browser
Una din metodele creării unui document HTML este scrierea codului acestuia în
editorul de texte Notepad++.
Exemplu :

După scrierea codului și salvarea fișierului (de exemplu sub numele index) cu extensia
html, la deschiderea ultimului intr-un browser (ex. Google Chrome) se obține următorul
document:

Figură 1.Crearea unei pagini web
• Comentariile, care nu sunt afișate de către browser, pot fi scrise între tag -urile <!– și –>.
• Numele tag urilor nu sunt case sensitive, deci pot fi scrise atât cu litere mici cât și cu litere
mari.
Tagul <meta>
Sintaxa : <META NAME="nume" CONTENT="continut">
Semantica : conțin e cuvinte cheie, descrierea paginii , date despre autor, informații utile
motoarelor de căutare rtc

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

14
Exemplu:

1.2.2. Taguri ale limbajului HTML
Tagurile HTML pot fi clasificate astfel:
 marcaje de bază – cele care delimitează pagina / documentul HTML, titl ul
acesteia și corpul paginii;
 marcaje pentru structurarea documentului – care permit introducerea de
subtitluri, p aragrafe, linii de delimitare;
 marcaje pentru formatarea text ului si crearea listelor;
 marcaje pe ntru crearea hiperlegăturilor;
 marcaje pentru introducerea de obiect e – tabele, formule, imagini sau obiecte
multimedia preluate din fișiere, formulare.
1.2.2.1. Taguri pentru introducerea antetelor
Antetele (titlurile) sunt utilizate pentru ierarhizarea diferitelor secțiuni de text.
Sintaxa: <H1 lista de atribute> ,<H2 lista de atribute > ,…, <H6 lista de atribute >
unde amintim din lista de atribute
 align = specifica modul de aliniere a textului; valori posibile: left, center, right
Semantica: definesc 6 nivele pentru antet unde H1 = cel mai important, H6 = cel mai
puțin important; browserele vizuale de obicei interpretează titlurile mai importante cu fonturi
mai mari decat cele mai putin importante.
Exemp lu:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

15
1.2.2.2. Paragrafe
O metodă elegantă și conformă standardului pentru scrierea paragrafelor în HTML
este folosirea marcajelor dedicate.
Sintaxa: <p lista de atribute> Un paragraf </p>
unde din lista de atribute amintim
 align care poate luca valorile left = aliniere la stânga right = aliniere la dreapta
center = aliniere la centru
Semantica: incadrează un paragraf; la afișare, două paragrafe consecutive vor f i
separate printr -o linie goală; t agul </p> poate lipsi;
Exemplu:
Codul

Va afișa in browser:

1.2.2.3. Comentarii
Este bine să punem comentarii în codul sursă. Dacă sursa HTML este complexă,
comentariile vor fi de neprețuit dacă vrem să schimbăm ceva. Acest lucru este adevărat mai ales
în cazul scripturilor.
Sintaxa: <!–comentariu –>
Semantică: texte din codul sursă care nu sunt afișate de browser și care se folosesc
pentru explicarea codului
Comentariile se pot extinde pe mai multe linii, dar este indicat să nu scriem comentarii
mai lungi de o linie, din motive de claritate.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

16
1.2.2.4. Bara orizontală
O foarte simplă metodă de a separa vizual părțile dintr -un document HTML este folosirea
unei bare orizontale
Tagul <hr>
Sintaxa : <hr lista de atribute >
unde din lista de attribute amintim:
 width (lățimea pe orizontală, adică lungimea), în puncte sau procente
 align (centrat implicit)
 size (grosime, măsurată în puncte – implicit este 2) sau
 noshade
 color (culoarea liniei)
Semantică : inserează in pagina web o linie orizontală cu diferite proprietăți
Exemplu:
Inserăm după primul paragraf o bară orizontală de lățime de 50% din pagină, de zece
puncte grosime, aliniat la dreapta.
Dacă schimbăm mărimea ferestrei browserului, vom observa c ă lățimea orizontală a liniei
(de fapt, lungimea ei) se păstrează la 50% din lățimea ferestrei.
Codul html:

va genera in browser:

Figură 2. Linii orizontale

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

17
1.2.2.5. Texte preformatate
Majoritatea documentelor HTML contin text format at cu taguri. Asta inseamna ca
textul respectiv este afectat de restrictiile HTML, in sensul ca toate spatiile suplimentare,
taburi, etc sa fie ignorate de catre navigator.
Tagul <pre>
Sintaxa : <pre>…</pre>
Semantica : se afișează textel e exact asa cum apar in cod
Exemplu:
Codul html:

In browser:

Figură 3. Texte preformatate
1.2.2.6. Taguri care permit formatarea textului
Tagul <BR>
Sintaxa : <BR>
Semantica: are ca efect forțarea afișării a ceea ce urmează pe rândul următor ; acest tag
nu creează un nou paragraf (să ne reamintim că între două paragrafe este automat lăsată o
linie vidă)
Tagul <B>
Sintaxa: <B>…</B>
Semantica : are rolul de a afișa bold (îngroșat) textul cuprins între cel e două tag uri ale
sale;u n tag sinonim al lui <B> este: <STRONG> …</STRONG>
Tagul <I>
Sintaxa : <I>…</I>
Semantica : are rolul de a afișa italic (înclinat) textul cuprins între cele două taguri ale
sale; tag-uri sinonime ale lui <I> sunt: <EM> …</EM> , <DFN> …</DFN> ,<CITE> …</CITE> .
Tagul <U>
Sintaxa: <U>…</U>
Semantica : are rolul de a afișa subliniat textul cuprins î ntre cele două tag -uri ale sale;
un tag sinonim al lui <U> este: <INS> …</INS>

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

18
Tagul <S>
Sintaxa : <S>…</S>
Semantica : are rolul de a afișa tăiat (cu o linie orizontală) textul cuprins între cele două
tag-uri ale sale ; un tag sinonim al lui <S> este: <DEL> …</DEL>
Tagul <BIG>
Sintaxa: <BIG> …</BIG>
Semantica: are rolul de a afișa textul cuprins între cele două tag -uri ale sale mai mare
decât textul în care este cuprins.
Tagul <SMALL>
Sintaxa : <SMALL> …</SMALL>
Semantica : are rolul de a afișa textul cuprins între cele două tag -uri ale sale mai mic
decât textul în care este cuprins.
Tagul <SUP>
Sintaxa :<SUP> …</SUP>
Semantica : are rolul de a afișa textul cuprins între cele două tag -uri ale sale mai sus
Tagul <SUB>
Sintaxa : <SUB> …</SUB>
Semantica : are rolul de a afișa textul cuprins între cele două tag -uri ale sale mai jos
Exemplu:
Codul html:

In browser:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

19

Figură 4. Formatarea textului
Tagul <FONT>
Sintaxa : <FONT lista de atribute> …<FONT>
unde amintim din lista de atribute
 face indică numele font -ului
 size indică mărimea (trebuie să fie un număr cuprins între 1 și 7. Implicit este 3)
 color permite specificarea culorii.
Semantica : stabilirea font -ului și a proprietăților acestuia
Culoarea se specifică fie prin intermediul constantelor predefinite ale HTML -ului (numele
englezesc al culorii) fie prin componentele sale de Roșu, Verde și Albastru exprimate în
hexazecimal, de forma #R RGGBB.
Exemplu:
Codul html:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

20

In browser:

Figură 5. Formatar ea textului

1.2.2.7. Liste
Acestea permit ca anumite enunțuri (texte, elemente) să fie numerotate sau marcate
într-un anumit fel. O astfel de organizare poartă numele de liste.
În HTML distingem 3 feluri de liste:
A. Liste ordonate (Ordered Lists)
Listele ordonate sunt liste în care elementele sunt numerotate.
Tagul <OL>
Sintaxa: <OL lista de parametri> …</OL>, itemii fiind introduși între aceste două
tag-uri prin <LI> …</LI> (tagul de sfârșit nefiind obligatoriu)
unde sin lista de parametri amintim
 type – modifică stilul de numerotare și care poate lua valorile

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

21
– a : numerotarea se va face cu litere mici (a, b, c, …)
– A : numerotarea se va face cu litere mari (A, B, C, …)
– i : numerotarea se va face cu numere romane mici (i, ii, iii, iv …)
– I : numerotarea se va face cu numere romane mari (I, II, III. IV, …)
– 1 : (implicit) numerotarea se va face cu numere arabe obișnuite (1, 2, 3, …)
 start – stabilește valoarea i nițiala a secvenței de ordonare; valoarea acestui atribut
trebuie sa fie un numar întreg pozitiv.
Semantica: inserează in pagina web o lista numerotată

Figură 6

B. Liste neordonate (Unordered Lists)
Listele neordonate sunt liste în care elementele nu sunt numerotate, ci în dreptul
fiecăruia este afișat un marcator.
Tagul <UL>
Sintaxa: <UL lista de atribute >…</UL> , itemii fiind introdu și între aceste două tag uri
<LI> …</LI> (tagul de sfârșit nefiind obligatoriu).
unde din lista de atribute amintim:
 Type – modifică stiulul marcatorului și a cesta poate lua una dintre valorile:
 disc : marcarea se face cu cerculețe pline (implicit)
 square : marcarea se face cu pătrățele
 circle : marcarea se face cu cerculețe goale

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

22
Semantica : inserează in pagina web o listă neordonată

Figură 7. Liste
C. Liste de definiție (Definition Lists)
Tagul <DL>
Sintaxa: <DL> …</DL>
<DT> …</DT> -termenul care este definit (tagul de sfârșit nefiind obligatoriu).
<DD> …</DD> – Definiția propriu -zisă (tag -ul de sfârșit nefiind obligatoriu).
Semantica : inserează in pagina web o listă de definiții
Codul html:
In browser se va afisa:

Figură 8. Liste

Listele ordonate pot fi imbricate intre ele sau cu liste neordonate.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

23

Figură 9. Liste

1.2.2.8. Imagini
Folosirea imaginilor sporește atractivitatea și designul paginii, duce la o mai bună
ințelegere a mesajului, dar trebuie luat în considerație și faptul că excesul de imagini va duce
la încărcarea greoaie a site-ului. Există numeroase formate grafice, dar cele mai răspândite
sunt:
 GIF (Graphics Interchange Format) introdus de Compuserve
 JPEG (Joint Photographic Expert Group)
 PNG (Portable Network Graphic – Format Grafic portabil în rețea)
Imaginile grafice su nt construite din pixeli, care sunt puncte distincte de informație de
imagine. Fiecare pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de
imagine sunt: numărul de culori, compresia, transparența, întrețeserea și animația.
Asemă nările și deosebirile dintre cele trei formate grafice sunt:
 Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biți, în timp ce
formatele JPEG și PNG pot utiliza milioane de culori, având 24 de biți de culoare, respectiv
32 de biți /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta
mică de culori (256), dar și posibilitatea reducerii numărului de culori, astfel, dacă este nevoie
doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fișierului de 8 ori.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

24
 Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile
fișierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, și, din aceste
motive, ele pot avea dimensiuni mai mici într -un format decât în al tul.
Formatele GIF și PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite
transparența.
 Formatele GIF și PNG admit animația, în timp ce, cu formatul JPEG, nu se poate
obține animație. De exemplu, pentru a obține animație pentru imagini GIF se poate folosi
pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft
GIFBuilder.
Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi
recomandate:
 GIF – pentru majoritatea imaginilor din web, butoa ne, panouri publicitare, desene etc.,
datorită dimensiunii mici a fișierelor.
 JPEG pentru fotografii, când se dorește să se redea cât mai exact culoarea reală a
imaginii.
 PNG – pentru desene complexe, dar și pentru fotografii, acesta fiind formatul care
îmbină caracteristicile celor două
Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform
Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fișiere) și pot
fi adrese URL absolute și relative.
Adrese URL absolute
Adresele absolute identifică locația unui fișier imagine de pe Internet sau alte
calculatoare conectate la Internet și au sintaxa:protocol/nume_calculator/cale/nume_fișier
Un exemplu de adresă URL absolută: http://antipa.rdsbv.ro/images/e u.jpg
unde:
• htpp:// – este protocolul Internet utilizat;
• antipa.rdsbv.ro – este numele calculatorului;
• images – este calea până la fișierul imagine dorit;
• eu.jpg – este fișierul imagine
Adrese URL relative
O adresă relativă identifică locația unei imagini, descriind o cale relativă la directorul
curent unde se află fișierul imagine. Adresele relative se referă la localizarea fișierului
imagine de pe calculatorul personal și are sintaxa: cale/nume_fișier.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

25
Referirea la:
– directorul părinte se poate face prin “../”
– directorul rădăcină se poate face prin “/”
Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate scrie
c:/windows/web/wallpaper/friend.jpg
Tagul <IMG>
Sintaxa: <IMG listă de atribute />
unde din lista de atribute amintim
 src identifică fișierul efectiv de pe disc, ce conține imaginea respectivă. Dacă
imaginease află în directorul curent, se specifică doar numele și extensia sa. Dacă se află într –
un subdirector,acesta se specifică înaintea numelui și extensiei imagi nii, separat prin
caracterul /. Imaginilerecunoscute de majoritatea browser -elor internet sunt de tip .jpg, .gif,
.png
 align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află;
acesta poate lua una dintre valorile următoar e:
– right : imaginea se aliniază în dreapta, iar textul care urmează este scris în locul
rămas liber, în stânga acesteia;
– left : imaginea se aliniază în stânga, iar textul care urmează este scris în locul
rămas liber, în dreapta acesteia;
– top : doar latura de sus a imaginii se aliniază cu rândul de text în cadrul căruia se
află; următorul rând de text va fi afișat după imagine, ocupând întreaga lățime a ecranului;
– middle : rândul de text în cadrul căruia se află imaginea se al iniază la jumătatea
înățimii acesteia; următorul rând de text va fi afișat după imagine, ocupând întreaga lățime a
ecranului;
– bottom : doar latura de jos a imaginii se aliniază cu rândul de text în cadrul căruia
se află; următorul rând de text va fi afișat după imagine, ocupând întreaga lățime a ecranului;
 alt=”text” permite specificarea unui text alternativ ce va fi afișat fie dacă menținem
cursorul de mouse asupra imaginii, fie în locul imaginii propriu -zise, în cazul în care imaginea
nu poate fi î ncărcată din cauza unei probleme de conexiune.
 height și width permit specificarea altor dimensiuni pentru imagine, decât cele reale ale
acesteia.
 border permite stabilirea grosimii unui chenar care va înconjura poza. Implicit,
valoarea acestui atribut este ”0”

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

26
 hspace=”nr.pixeli” respectiv vspace=”nr.pixeli” permit stabilirea distantei minime care
separa imaginea de celelalte obiecte pe verticală, respectiv pe orizontală
Semantica: inserează o imagine cu anumite proprietăți în pogina web

Figură 10. Imagini

Exemplu:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

27

Figură 11. Imagini

1.2.2.9. Tabele
Tabelele ne permit să cream o rețea dreptunghiulară de domenii, fiecare domeniu
având propriile opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Tagul <table>
Sintaxa : <table lista de atribute>…</table>
<tr>…</tr> (de la " table row "= rând de tabel )
<td>..</td> (de la “table data”)
Semantica: inserează un tabel in pagina web; tagul <tr> inserează un rând in tabel, iar
tagul <td> inserează o celulă in tabel;
Dintre atributele tagului <table> amintim:
 border – adăuga un chenar unui tabel ; acest atribut poate primi ca valoare orice numar
întreg ( inclusiv 0 ) si reprezintă grosimea î n pixeli a chenarului tabelului; d acă
atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală
cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absen ța chenarului.
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.
Exemplu:
Codul html:

In browser se va afisa:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

28

Figură 12. Tabele
 align – pentru alinierea tabelului ; valori posibile ace acestui atribut sunt
left ( valoarea prestabilita ), center , right
 width – lățimea tabelului
 height – înălțimea tabelului
Valorile acestor atribute pot fi:
 numere întregi pozitive reprezentând latime respectiv înălțimea in pixeli a
tabelului;
 numere întregi intre 1 si 100, urmate de semnul %, reprezentând fracțiunea din
latime si înălțimea totala a paginii.
 frame – permite specificarea parților din chenarul unui tabel care vor fi afișate.
Valorile posibile ale acestui atribut sunt:
void – elimina toate muchiile exterioare ale tabelului;
above – afișează o muchie in partea superioara a cadru lui tabelului;
below – afișează o muchie in partea inferioara a cadrului tabelului;
hsides – afișează cate o muchie in partea superioara si inferioara cadrului tabelului;
lhs – afișează o muchie in partea din stanga a cadrului tabelului;
rhs – afișează o m uchie in partea din dreapta a cadrului tabelului;
vsides – afișează o muchie in partea din stanga si din dreapta a cadrului tabelului;
box – afișează o muchie pe toate laturile cadrului tabelului;
border – afișează o muchie pe toate laturile cadrului tabel ului;
 rules – alegerea unor delimitat ori pentru celulele unui tabel;
Valorile posibile sunt:
none – elimina toate muchiile interioare ale tabelului;
groups – afișează muchii orizontale intre toate grupurile din tabel.Grupurile sunt
specificate prin elementele <thead>, <tbody>, <tfoot>si<colgroup>.
rows – afișează muchii orizontale intre toate liniile tabelului;
cols – afișează muchii verticale intre toate coloanele tabelului;
all – afișează muchii intre toate liniile si coloanele;

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

29
 background – stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare
adresa URL a imaginii folosite pentru fond;
 bordercolor – stabilirea culorii pentru chenarul unui tabel;
 bordercolorlight – stabilirea culorii pentru chenarul 3D al unui tabe l;
 bordercolordark – stabilirea culorii pentru chenarul 3D al unui tabel;
 cellpadding=”nr_pixeli” – stabilirea unui spațiu care va fi lăsat, în fiecare celulă a
tabelului, între conținutul celulei și marginile acesteia. Dacă nu se specifică acest atribut, el
este în mod implicit considerat 0
 cellspacing=”nr_pixeli” – stabilirea spațiului care va fi lăsat între chenarele celulelor
vecine în tabel (și inclusiv între ele și chenarul exterior al tabelului). Dacă nu se specifică
acest atribut, el este în mod implicit considerat 2.
Exemplu:

<table border="3" bgcolor="green"
align='center' height='200'
width='200'>
<tr><td>verde 11</td>
<td bgcolor="red">rosu12</td></tr>
<tr bgcolor="blue">
<td> albastru21</td>
<td bgcolor="yellow">galben22
</td></tr>
<tr bgcolor="cyan">
<td>cell 31</td>
<td>cell 32</td></tr>
<tr><td>cell 41</td>
<td bgcolor="white">cell 42</td></tr>
</table>

Figură 13. Tabele

Din atributele tagului <TR> amintim:
 align determină, pentru toate celulele de pe linie, modul alinierii conținutului pe
orizontală, în interiorul celulelor. Poate la una dintre valorile left, right, center sau justify ;

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

30
 valign determină, pentru toate celulele de pe linie, modul alinierii conținutul ui pe
verticală, în interiorul celulelor. Poate la una dintre valorile top, bottom sau middle ;
 bgcolor determină, pentru toate celulele de pe linia respectivă, culoarea de fundal.
Din atributele tagului <TD> amintim:
 width și height determină, pentru celula respectivă, lățimea și înălțimea. Poate fi
dată în procente sau pixeli. Dacă e specificată în procente, se va lua din lățimea, respectiv
înălțimeatabelului. Modificarea lățimii și a înălțimii unei celule va avea efect și asupra
celorlalte celule,pentru ca tabelul să fie aliniat;
 align și valign stabilesc, la fel ca și în cazul lui <TR> , modul în care este aliniat
conținutul în interiorul celulei, pe orizontală respectiv pe verticală, fiind prioritare față de
alinierea la nivel de linie
 colspan=”n” stabilește întinderea celulei respective în dreapta cu n coloane
(echivalentul operației Merge Cells din Word, în cazul în care unim celule adiacente pe
orizontală);
 rowspan=”n” stabilește întinderea celulei respective în jos cu n linii (echivalentul
opera ției Merge Cells din Word, în cazul în care unim celule adiacente pe verticală);
 bgcolor determină, pentru celula respectivă, culoarea de fundal. Evident, este
prioritară
față de același atribut la nivel de linie.
 colspan – care definește numărul de colo ane pe care se întinde celula;
 rowspan – numărul de linii pe care se întinde celula.

Exemplu :

In browser se va afișa:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

31

Figură 14. Tabele
Tagul <CAPTION>
Sintaxa: <CAPTION listă de atribute >…</CAPTION>
unde din lista de atriute amintim
 align – pentru alinierea titlului și poate lua următoarele valori: left (titlul va fi poziționat în
stânga sus), right (poziționare dreapta sus), top (poziționare pe centru sus), bottom (poziționare
pe centru jos);
Semantica : permite scrierea unui titlu pentru tabel ; trebuie să se găsească imediat
după </TABLE> .
1.2.2.10. Legături(link -uri)
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini,
sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini
web.
Tagul <a>
Sintaxa: <a listă de atribute >……</a>
Unde din lista de atribute amintim:
 href este atributul care marcheaza indicarea adresei link -ului
 url este adresa link -ului (a paginii care va fi deschisa).
 title este atributul prin care se da un titlu link -ului (un text ascuns, care apare numai
cand este pozitionat mouse -ul deasupra link -ului)
Culoarea link -urilor poate fi schimbata de următoarele atribute, care trebuie scrise in
interiorul tagului <BODY>
 link="#0000ff – reprezinta culoarea link -ului in browser.
 vlink ="#00ffff – reprezinta culoarea link -ului când pagina respectiva a fost / este
vizitata.
 alink ="#ff0000 – reprezinta culoarea link -ului când acesta este activat.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

32
Exemplu:

Ancore de legătură către fișiere (pentru download)
Se realizează în mod analog cu cele către alte pagini, la atributul href trebuind
specificat adresa fișierului respectiv (dacă este în același director cu pagina din care facem
legătura, e suficient să -i scriem numele și extensia).
Exemplu:
 în cazul în care fișierul pentru download este local pentru a downloada arhiva executa
un click pe cuvîntul „aici”

 în cazul în care fișierul pentru download se află la altă adresă, pentru a descarca
subiectele de bacalaureat la disciplina informatica, da un click

Legăturile către fișiere de tip sunet sau film se fac absolut în aceeași manieră. În
funcție de extensia lor (.wav, .mid, .mp3, .avi) în momentul executării unui click asupra
obiectului care face legătura către ele, acestea vor fi deschise automat către browser cu
programul corespunzător.
Link -urile sunt de doua feluri:
1. Link -uri externe – (sunt ce le mai utilizate), care sunt si ele de doua feluri:
a) Link -uri externe câtre pagini ale aceluiasi site.
Sintaxa:
<a href="nume_fisier.extensie" title="Titlu link">Nume</a>
<a href="../nume_fisier.extensie" title="Titlu link">Nume</a>
<a href="direct or/nume_fisier.extensie" title="Titlu link">Nume</a>
b) Link -uri externe c ătre alte site -uri. Aici, adresa URL din link trebuie sa contina si
domeniul (numele site -ului) paginii țintă
Sintaxa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link -uri interne – sunt link -uri câtre alte texte din aceeasi pagina. Se folosesc când pagina
respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
– Pentru creare de link -uri interne trebuie urmati urmatorii pasi:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

33
 Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se
afla in aceeasi pagina cu linkul

 atributul name indica tinta pentru link, e un fel de semn care indica locatia.
 cuvant poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.
 Textul tinta este textul unde se face saltul.
 In locul unde vrem sa fie link -ul (acolo unde o sa dam click pentru a face saltul câtre
textul ales), se scrie urmatorul cod:

 "cuvant" este ace lasi text scris la pasul 1.

1.2.2.11. Cadre
Cadrele, sau frame -uri, sunt folosite pentru impartirea ferestrei browser -ului astfel
incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Pentru crearea de frame -uri se pot folosi urmatoarele taguri HTML:
<frameset> si <frame> sau <iframe>
A. Tagul <FRAMESET>
Sintaxa: <FRAMESET> … </FRAMESET> – se adaugă in interiorul documentului
HTML, în sectiunea HEAD . Acesta va conține <FRAME>, cate unul pentru fiecare divizare
a ferestrei din browser.
Semantica: <FRAMESET> determina cat din spațiul ferestrei este atribuit fiecărui
cadru, folosind atributele ROWS sau COLS care impart ecranul in linii sau coloane.
Din atributele tagului <FRAMESET> amintim:
 ROWS – determina numarul de linii si marimea cadrelor care vor fi asez ate in linie,
începând de sus; p ot fi folosite urmatoarele valori:
 pixeli absoluti ; E xemplu : "360,120"
 procente din inaltimea ecranului ; Exemplu : "75%,25%"
 valori p roportionale, folosind (*). Acesta putând fi c ombinat cu procente sau pixeli.
Exemplu : "120,*" sau "30%,*"

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

34
 COLS – determina numarul de coloane si marimea cadrelor care vor fi asezate pe
coloane, începând din stanga; p ot fi folosite urmatoarele valori:
 pixeli absoluti ; Exemplu : "380,120"
 procente din lungimea ecranului ; Exemplu : "33%,77%"
 valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli.
Exemplu : "120,*" sau "30%,*"
 frameborder – Stabileste afisarea sau nu a unei borduri in jurul cadrelor. Posibile
valori: 0, 1 sau YES, NO.
 framespacing – Acest atribut este specificat in pixeli. Daca frameborder este 0
atunci si acesta trebuie sa aiba valoarea 0
 border – Marginea cadrelor. Valori posibile: 0 sau 1
 bordercolor – Acest atribut permite sa alegi culoarea bordurii.
Din atributele tagului <FRAME> amintim:
 src – Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
 name – Aici trebuie scris numele de identificare al cadrului.
 marginwidth – Atribut optional, valoare in pixeli. Determina spatiul orizontal dintre
continutul cadrului si marginea acestuia
 marginheight – Atribut optional, valoare in pixeli. Determina spatiul vertical dintre
continutul cadrului si marginea acestuia.
 scrolling – Afiseaza un Scroll Bar in cadru. Valori posibile: YES (permite afisarea
Scroll Bar -ului), NO (nu va fi prezentat nici un Scroll Bar) si AUTO (browser -ul va decide
daca este nevoie de Scroll Bar. Aceasta valoare este cea mai indicata)
 noresize – Optional, impiedica utilizator ul sa modifice marimea cadrului, prin
selectarea marginii acestuia si mutarea in stânga sau dreapta ori sus sau jos.
Exemplu1: o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din
spatiul paginii iar cel din dreapta 77%

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

35

Exemplu2:

„Structura paginii create va fi urmatoarea:

Figură 15. Cadre
 target – foloseste ca valoare textul din atributul NAME al elementului FRAME in
care se va deschide noua pagina; daca nu se specifica atributul target , pagina se va deschide
in cadrul curent; atributul target trebuie sa aiba acelasi nume specificat in codul HTML, ca si
atributul NAME din FRAME -ul in care se doreste afisarea paginii.
Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare
are o functie speciala.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

36
Nr.crt. Valoare Expliație
1 target="_top" încarca link -ul in toata fereastra browser -ului, disparând
astfel cadrele.
2 target="_blank" încarca link -ul intr -o noua fereastra de browser, astfel
ramanand deschisa si vechea fereastra.
3 target="_self" încarca link -ul in aceeasi fereastra de unde a fost actionat
4 target="_parent" cadrul "_parent" este cadrul anterior de la care a fost
deschis noul cadru, daca acesta nu exista atunci link -ul se
va deschide in actuala fereastra de browser

De exemplu, daca avem un link in Meniu.htm l care vrem sa deschidă
pagina Doc3.htm l in spațiul in care se afla celalat cadru, de exemplu Continut.htm l; codul
HTML pentru link va arata astfel in Meniu.htm l:

Tagul <iframe >
Sintaxa: <IFRAME lista de atribute></IFRAME>
unde din lista de parametri amintim:
 width si heigh t reprezinta lungimea respectiv inaltimea cadrului (exprimata in
procente sau pixeli)
 scrolling reprezinta permisiunea de derulare a paginii din cadru ( yes sau no),
 frameborder specifica daca va fi sau nu afisata o margine (bordura) pentru cadru
(1=da, 0=nu),
 name indică este numele cadrului
Semantica: indica adaugarea unui frame in pagina web
Exemplu:

1.2.2.12. Formulare
Formularele sunt elemente ale limbajului HTML. Ele reprezintă o grupare de
componente care permit trimiterea de date și de comenzi către un server. Acesta trebuie să fie
mai mult decât un clasic server HTTP, trebuind să aibă instalată și o componentă capa bilă de

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

37
a răspunde comenzilor și a prelucra datele. Cea mai populară astfel de componentă, foarte larg
utilizată în ultimii 10 ani în programarea pe Internet este limbajul PHP, de care ne vom ocupa
pe larg în alt capitol al acestei lucrări.
Formularele asigură construirea unor pagini web care permit utilizatorilor să introducă
efectiv informații și să le transmită serverului. Formularele pot varia de la o simplă casetă de
text, pentru introducerea unui șir de caractere pe post de cheie de cău tare – element
caracteristic tuturor motoarelor de căutare – până la o structură complexă, cu multiple
secțiuni, care oferă facilități de transmitere a datelor. Pentru a analiza parametrii introduși în
formulare sunt necesare anumite aplicații care decid c um va acționa serverul ca răspuns la
datele primite. Codul acesot aplicații poate fi scris în limbaje de programare web cum ar fi:
ASP, JAVA, PHP, JSP etc.
Tagul <form>
Sintaxa: <form listă de atribute > și </form>.
unde din lista de atribute amintim:
 action care precizează ce va fi cu datele formularului odată ce acestea ajung la
destinație; î n general valoarea atributului action este adresa URL a unui script aflat pe un
server www care primește datele formularului, le prelucrează și expediază utilizatorului un
răspuns.
 method precizează metoda utilizată de browser pentru e xpedierea datelor
formularului; a cest atribut poate lua una din valorile:
 get (valoarea implicită) – datele formularului sunt adăugate la adresa URL
precizată de atributul action. În acest caz nu sunt permise cantități mari de date (maxim – 1kb)
Datele sunt adăugate conform s intaxei: nume_camp=valoare_camp. Între diferite seturi de
date se introduce simbolul „&”. Între adresa URL și date este introdus simbolul „?”.
Exemplu: "http://www.yahoo.com/cgibin/nume_fis.cgi?nume1=valoare1&nume2=valoare2"
 post – datele sunt expediate separat; î n acest caz sunt permise cantități mari de
date (de ordinul MB).

Tagul <input>
Sintaxa : <INPUT lista de atribute>
unde din lista de atribute amintim:
 name – atașează un nume fiecărui element al formularului

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

38
 value – permite atribuirea unei valori inițiale unui element al formularului.
 type – precizează tipul elementului
 size – determină dimensiunea câmpului ca număr de caractere. Implicit
dimensiunea acestui câmp este de 20 de caractere.
 maxlength – determină număru l maxim de caractere care poate fi introdus în
câmp.

Câmp de editare (de tip text)
Pentru a defini un câmp de editar e atributul type al tag -ului <input> primește valoarea
text. În afară de atributele precizate, pentru aceste câmpuri în tag -ul <input> pot fi folosite
următoarele atribute:
Exemplu :

Nume:

Prenume:
prenume

Câmp de tip parolă
Aceste câmpuri sunt definite prin atribuirea valorii password atributului type. Pentru
acest tip de câmp pot fi folosite aceleași atribute ca și pentru câmpul de editare: size,
maxlength, name, value , obținânduse aceleași rezultate.
Exemplu:

Introduceti parola:

Butoane de tip radio
Acestea permit alegerea unei singure variante din mai multe posibile. Pentru definirea
butoanelor radio atributului type i se atribuie valoarea radio . În afară de atributele name și
value , pentru acest tip de butoane tagul <input> poate avea atributul checked care dtermină ca

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

39
una din opțiuni să fie bifată inițial. Evident nu poate fi utilizatîă decât pentru un singur buton
radio. Dacă, totuși, acest atribut a fost folosit pentru mai multe butoane, această specificație
va fi luată în calcul numai pentru ultimul.
Exemplu :

Alegeti categoria de varsta:
…-15 ani
16-20 ani
20-30 ani
30-…ani

Casete de validare (checkbox)
O casetă de validare permite selectarea sau deselectarea unei opțiuni. Pentru definirea
unei casete de acest gen atributului type al tag -ului <input> i se atribuie valoarea ceckbox. Ca
și pentru butoanele radio, pentru casetele de validare pot fi folosite aceleași atribute cu
aceleași rezultate: checked, name, value .
Exemplu :

Ce surse de informare folositi:
TV
Internet
Ziare
Altele

Câmpuri de tip fișier
Aceste câmpuri sunt folosite pentru a permite utilizatorilor să facă upload fișierelor pe
server. În acest caz atributul type ia valoarea file. Pentru câmpuri de fișiere tag -ul <input>
poate avea atributele : size, name, value.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

40
Exemplu:

Figură 16. Camp de tip fișier

Câmpuri ascunse
Aceste câmpuri sunt folosite pentru a trimite date, însă, fără a permite utilizatorului
vizualizarea sau manipularea acestora. Câmpurile ascunse sunt necesare pentru prelucrarea
corectă a formularului. Pentru definirea câmpurilor ascunse atributulu i type i se atribuie
valoarea hidden. În cazul când se definește un câmp ascuns tag -ul <input> poate avea, în
afară de type, doar două atribute: name și value.

Buton de anulare
Rezultatul activării butonului de anulare este golirea conținutului întregului formular.
Pentru acest buton tag -ul <input> poate primi în plus doar atributul value care specifică
numele butonului. În cazul când atributul value lipsește butonul va fi numit Reset.
Exemplu :

Figură 17. Buton de anulare

Buton de trimitere
Acest buton determină browser -ul să trimită datele formularului către server pentru ca
acestea să fie prelucrate. Pentru definirea acestui buton atributului type i se atribuie valoarea
submit. În afară de atributul type <input> poate avea atributele name și value cu rezultatele
deja cunoscute.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

41
Exemplu:

Figură 18. Buton de trimitere

Buton de tip imagine
Acest tip de buton se folosește pentru a adăuga personalitate butonului de trimitere.
Pentru a defini un astfel de buton atributul type primește valoarea image . Iar atributul src
folosit tot în <input> indică url-ul fișierului care conține imag inea respectivă. În afară de
aceste două atribute, poate fi folosit și atributul name.

Buton generic
Acest tip de buton se folosește pentru a adăuga unui formular un buton care nu are un
comportament prestabilit, prin activarea acestui butonse lansează în execuție un anumit script
(folosind JavaScript sau alt limbaj de programare). Pentru a defini acest tip de buton
atributului type i se atribuie valoarea button. Pentru butonul generic, în afară de type, pot fi
folosite atributele name și value.
Exemplu:

Liste de selecție
Sunt două tipuri de liste de selecție: liste cortină (drop -down list) și liste derulante
(scrolling list).
Tagul <SELECT>
Sintaxa: <SELECT listă de atribute>….</SELECT>
<OPTION>… </OPTION>
unde din lista de atribute ale tagului <SELECT > amintim :
• name – numele variabilei care va fi trimisă aplicației ce prelucrează formularul;
• size –numărul de elemente vizibile din listă; pentru listele cortină atributul size poate
fi omis sau i se poate atribui valoarea 1, iar pentru listele derulante orice altă valoare.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

42
• multiple – dacă este prezent, acesta permite realizarea de selecții multiple, a mai
multor elemente concomitent prin folosirea combinațiilor Shift+click pentru elementele
consecutive și respectiv Ctrl+cl ick pentru elementele non -consecutive.
Din atributele tagului <OPTION> amintim:
• selected – când acest atribut este prezent, opțiunea respectivă este preselectată;
• value – specifică valoarea care va fi trimisă aplicației de prelucrare a datelor
formular ului.
Semantica: inserează o listă de selecție cortină sau derulantă; elementele unei liste de
selecție sunt incluse în listă cu ajutorul tagului par <option>.
Exempl u1:

Alegeti tara de origine

Exemplu1:
Codul html:

In browser se va afișa:

Figură 19. Liste de selecție

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

43
Zone de text
Zonele de text permit utilizatorilor să introducă un anumit text. Diferența dintre zonele
de text și câmpurile de editare constă în faptul că prima permite introducerea mai multor linii
de text pe când câmpurile de editare permit introducerea unei singure linii.
Tagul <TEXTAREA>
Sintaxa: <TEXTAREA list ă de atribute>….</TEXTAREA>
unde din lista de attribute amintim:
 name – numele zonei de text
 rows – numărul de rânduri ale zonei de text
 cols – numărul de coloane ale zonei de text
Semantica: inserează o zonă de text
Exemplu:

comenteaza

1.2.3. Entități caracter în HTML
Când un client (un browser) cere o pagină Web de la un server, serverul îi trimite prin
rețeaua Internet fișierul HTML corespunzător. De fapt, fișierul trece prin mai multe servere de
tip diferit, fiecare retransmițându -l spre următorul, până când ajunge l a client. Dacă un fișier
HTML ar conține caractere speciale (de exemplu caracterele românești cu diacritice), s -ar
putea ca aceste caractere să fie modificate în fișier, în timp ce fișierul este retransmis de
serverele intermediare. Acest lucru ar rezulta în faptul că la client, browserul ar afișa eronat
pagina, bazat pe fișierul HTML modificat.
Fișierele HTML conțin text pur, fără coduri speciale de formatare, cum este cazul
documentelor Word, de exemplu. Acest lucru înseamnă că fișierul HTML conține doar
caractere care apar pe o tastatură standard (engleză). Aceste caractere sunt singurele care pot
trece nemodificat prin orice rețea de calculatoare. De fapt, aceste caractere formează setul de
caractere standard ASCII („American Standard Code f or Information Interchange”) pe șapte
biți. Entitățile ca racter cele mai folosite:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

44

Diacritice:
Caracter (semn diacritic) Cod HTML corespunzător
ă &#259;
Ă &#258;
â &#226;
 &#194;
î &#238;
Î &#206;
ș &#351;
Ș &#350;
ț &#355;
Ț &#354;

1.3. HTML5 – elemente noi
HTML5 a apărut în 2012 din necesitatea de a extinde funcționalitățile și dinamismul
paginilor Web. HTML5 nu este încă un standard oficial, și doar unele browsere au support
HTML5. Toate browserele populare ca Safari, Chrome, Firefox, Opera, Internet Explor er continuă DESCRIERE CARACTER NUME COD ZECIMAL
Spațiu nedivizibil &nbsp; &#160;
Mai mic decât < &lt; &#60;
Mai mare decât > &gt; &#62;
Ampersand & &amp; &#38;
Ghilimele ” &quot; &#34;
Secțiune § &sect; &#167;
Copyright © &copy; &#169;
Marcă înregistrată ® &reg; &#174;
Multiplicare × &times; &#215;
Împărțire ÷ &divide; &#247;
Euro € &euro; &#8364;

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

45
să adauge facilități HTML5 ultimelor versiuni. HTML5 este o cooperare dintre World Wide Web
Consortium (W3C) și Web Hypertext Application Technology Working Group (WHATWG).
HTML 5 integrează noi facilități dintre care amintim eleme ntele:
• <canvas> pentru desene 2D
• <video> și <audio> pentru media playback
• suport pentru memorare locală
• conținut specific al elementelor: <article>, <footer>, <header>, <nav>, <section>
• noi controale ale formularului: calendar, date, time, email, url, search
• noi elemente Semantice/Structurale
In HTML5 apare o singură declarație <!doctype>, simplă:
<!DOCTYPE html>
Exemplu:
<!DOCTYPE html>
<html> <head> <title>Titlul documentului</title>
</head> <body>
Conținut de document……
</body> </html>
1.3.1. Zone noi ale prototipului HTML5

Figură 20. Structura unei pagini web

Elemente semantice:
<article> Definește un articol
<aside> Definește conținut aside fată de conținutul paginii
<bdi> Isolaează o parte din text ce poate fi formatat în diferite direcții față de alt

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

46
text
<command> Definește a un buton de comandă pe care utilizatorul poate să -l invoce
<details> Definește detailii adiționale pe care utilizatorul poate să le vadă sau să le
ascundă
<summary> Definește un heading visibil pentru elemental <details>
<figure> Specifică un conținut specific ca și ilustrații, diagrame, foto, cod, etc
<figcaption> Definește o captură pentru elementul <figure>
<footer> Definește un footer pentru document sau section
<header> Definește un header for a document or section
<hgroup> Groupează un set de elemente <h1> l a <h6> când headingurile au mai
multe nivele
<mark> Definește text marked/highlighted
<meter> Definește măsură scalară cu rang determinat
<nav> Definește link -uri navigation
<progress> Reprezintă progresul unui task
<section> Definește o secțiune în document
<time> Definește data/ora
<wbr> Definește o posibilă line -break
HTML5 oferă noi elemente form, pentru a extinde funcționalitatea:
<datalist> Specifică o listă de opțiuni pre -definite pentru controale input

<keygen> Definește generator de câmp ca perechi de chei (pentru formulare
<output> Definește rezultatul calculelor

Elemente Media
<audio> Definește conținut sound
<video> Definește un video sau film (movie)
<source> Definește media resurse multiple pentru <video> și <audio>
<embed> Definește un container pentru aplicații externe sau conținut interactive
(plug -in)
<track> Definește text tracks pentru <video> și <audio>

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

47
Exemplu:

1.3.2. Integrarea fișierelor audio și video cu HTML 5
 AUDIO
Diferite browsere pot avea plug -ins diferit pentru redarea fișierelor audio. De accea
HTML5 definește un nou element ce specifică un mod standard pentru a integra fișiere audio .
Tagul <audio>
Sintaxa:
<audio controls>
<source src="fisier.ogg" type="audio/ogg">
<source src="fisier.mp3" type="audio/mpeg">
</audio>
Semantica: adaugă un fișier audio intr pagina web
 audio – Definește conținut sound
 source -Definește resurse media multiple pentru elemente media
Atributele de control adaugă controale audio: play, pause, și volume. Se poate adăuga
text între tag -urile <audio> și </audio> tags pentru browsere ce nu suporta audio.
Tagul <audio> permite multiple elemente <source>. Elementele <source> se pot lega
cu diferite fișiere audio iar browserul utilizează primul format recunoscut
 VIDEO
Diferite browsere pot avea plug -ins diferit pentru redarea fișierelor video/movie. De acea
HTML5 definește un nou element ce specifică un mod standard pentru a integra fișiere
video/movie în pagina web prin tagul <video>. Browserele care suporta HTML5 sunt: Internet
Explorer 9, Firefox, Opera, Chrome, și Safari .
Tagul <video>
Sintaxa:
<video width="320" height="240" controls>
<source src=" fisier .mp4" type="video/mp4">

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

48
<source src=" fisier .ogg" type="video/ogg">
</video>
1.3.3. Elemente DOM în formulare
1.3.3.1. Tagul <datalist>
Sintaxa: <datalist> …</datalist>
Semantica: specifică o listă de opțiuni pre -definite pentru element <input> ; este
utilizat pentru a furniza facilități de autocomplete în <input>. Utilizatorul vede lista drop –
down cu opțiuni pre -defined ca și datele de intrare.
Exemplu:

Figură 21
1.3.3.2. Tagul <keygen>
Sintaxa: <keygen>
Semantica: furnizează securitate la autentificarea user -ilor; specifică un g enerator de
căi pereche în form: c ând form este submis, sunt generate 2 chei : una privată și una publică.
Cheia privată este memorată local, cheia publică este trimisă la server. Cheia publică p oate fi
utilizată pentru a genera certificatul client pentru autentificarea user -ului pe viitor.

In browser:

Figură 22. Tagul <keygen>

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

49
1.3.3.3. Tagul <output>
Sintaxa: <output>
Semantica: reprezintă rezultatul calculelor (ca și cum sunt executate de un script).
Exemplu:
Codul html:

In browser:

Figură 23. Tagul <output>
1.3.3.4. Tagul <input>

Dintre atributele introduse de HTML5 tagului <input> amintim:
 autocomplete – specifică dacă o formă sau un camp pot /sau nu să aibă
autocomplete. Când autocomplete este on, browser -ul completează automat valori bazat pe
valorile anterior introduce de utilizator. Este posibil ca forma să aibă autocomplete "on", și
"off" pentru un camp specific, sau invers.
Exemplu:
Codul html:

In browser:

Figură 24. Atributul autocomplete

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

50
 novalidate – atributul novalidate este Boolean și specifică dacă forma -datele de
intrare (input) trebuie validate la submit.
 autofocus -atributul autofocus este Boolean și specifică dacă elementul
<input> va fi focalizat la încărcarea paginii.
Exemplu:

 formenctype – specifică modul în care datele din form for fi codificate la
trimiterea pe server (doar în formulare cu method="post"). Acesta suprascrie acțiunea
atributului din elementul <form>. Atributul formenctype este utilizat cu type="submit" și
type="image".
Exemplu :
Se trimit date din form codificate implicit (primul submit button), și apoi codificate ca
"multipart/form -data" (al doilea submit button):

 formmethod – definește metoda HTTP de trimitere a datelor din form action la URL.
Acesta suprascrie acțiunea atributului din elementul <form>. Atributul formmethod este
utilizat cu type="submit" și type="image".

Exemplu:
Buttonul al doilea submit suprascrie (post ) metoda HTTP din form (get) :

 formnovalidate – specifică dacă elementul <input> trebuie validat când este
submis. Acesta suprascrie acțiunea atributului din elementul <form>. Atributul
formnovalidate este utilizat cu type="submit ".

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

51
Exemplu:
Apar 2 butoane submit (cu și fără validare):

 height, width – specifică dimensiunile elementului <input> și sunt utilizate numai cu
<input type="image">. Atributele sunt prezente (amandoua) ca să specifice spațiul rezervat
imaginii la încărcare. In lipsa lor browserul nu cunoaște dimensiune aimaginii și forma paginii
se schimbăîn timpul încărcării.
 min, max – specifică valori minimum și maximum pentru un element <input>.
Acestea sunt valabile la următoarele tipuri input: number, range, date, datetime, datetime –
local, month, time and week.
Exemplu :
Codul html:

In browser:

Figură 25. Campuri de tip data

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

52
 multiple – specifică dacă utilizatorul permite intorducerea valorilor multiple în
elementul <input>. Atributul funcționează cu tipurile input: email și file .
Exemplu:

 pattern – specifică o expresie regulară ca valoare de element <input> și se poate folosi
cu tipurile input: text, search, url, tel, email, și password .
Exemplu: Un camp cu 2 litere:

In browser:

Figură 26. Atributul pattern
 placeholder – specifică o descriere scurtă a valorilor așteptate pentru câmpul
input .Acesta este afișat în camp când este gol, și dispare când câmpul este focalizat.Atributul
este util la câmpurile input: text, search, url, tel, email, and password.
 required – specifi că dacă un camp trebuie completat înainte de a trimite formularul.
Atributul este util la câmpurile input : text, search, url, tel, email, password, date pickers,
number, checkbox, radio, și file .
Exemplu :
Codul html:

In browser:

Figură 27. Câmp obligatoriu

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

53
 step – specifică un număr interval legal pentru un <input> element. Atributul poate fi
utilizat împreună cu max și min pentru a crea rang de valori legale. Atributul este util la
câmpurile input: number, range, date, datetime, datetime -local, month, time și week.
Exemplu:
Dacă step="3", numerele legale sunt -3, 0, 3, 6, etc.
Codul html:

In browser:

Figură 28. Atributul step
 color – este utilizat pentru intoducerea câmpului ce conține culoare.
Exemplu :

 date – permite selectarea datei.
Exemplu:

 datetime – permite selectarea datei și a orei (cu time zone).
 datetime -local – permite selectarea datei și a orei (fără time zone)
 month – permite selectarea lunii și a anului
 time permite selectarea timpului
 email – permite introducerea câmpurilo r email, validate când sunt submise
 number –este utilizat la introducerea câmpurilor numerice, car e pot avea și set de
restricții care pot fi specificate cu atributele : max , min , step , value
Exemplu :

In browser:

Figură 29. Câmpuri numerice

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

54
 range –este utilizat la introducerea câmpurilor numerice, care pot avea valori într -un
rang de numere. Se pot seta restricții.
Exemplu :

In browser:

Figură 30. Câmpuri numerice
 search –permite căutări în câpuri.
Exemplu :

 tel –definește camp număr de telefon
 url – folosit pentru a introduce adrese URL.Valoarea câmpului url este automat
validată când forma este submisă.
1.3.4. MCV (Model View Controler)
Un sablon reprezintă o soluție comună a unei probleme într -un anumit context.
Arhitectul Christopher Alexander definea sabloanele de proiectare astfel: “ Fiecare șablon
descrie o problemă care apare mereu în domeniul nostru de activitate și indică esența soluției
acelei probleme într -un mod care permite utilizarea soluției de nenumărate ori în contexte
diferite ”.
 De ce sunt utile sabloanele de proiectare?
1. Proiectarea unui software presupune luarea unor decizii a caror corectitudine este
testata mai tarziu la partea d e implementare.
2. Unul din avantajele folosirii sabloanelor de proiectare este acela ca poate duce la
cresterea vitezei de dezvoltare a software -ului, cat si a calitatii acestuia, utilizand solutii
testate, a caror eficacitate a fost dovedita.
 De ce sa uti lizam sablonul Model View Controller?
Paradigma MVC se refera la izolarea logicii interne a unei aplicatii de partea sa de
prezentare (interfata), prin impartirea responsabilitatilor.
Organizarea MVC, ofera posibilitatea modificarii independente a compone ntelor si
faciliteaza reutilizarea. Acest lucru va rezulta in aplicatii extrem de usor de modificat.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

55
 Scurt Istoric
Trygve Reenskaug a introdus MVC in limbajul Smalltalk -76 in timp ce vizita
compania Xerox Parc (companie de cercetare si dezvoltare in Palo Alto, California, cu o
reputatie foarte buna pentru contributiile sale in Tehnologia Informatiei si Sisteme Hardware),
in anii 1970. In 1980, Jim Althoff si alte personae au implementat o versiune de MVC pentru
biblioteca de clase a limbajului Smalltalk -80. De-abia mai tarziu, in anul 1988, intr -un articol
din “The Journal of Object Technology”, MVC a fost exprimat ca un concept general.
 Conceptul Model View Controller
Aplicatia software este impartita in trei parti interconectate, pentru a separa
reprezent area interna a informatiei de modul in care aceasta este prezentata sau acceptata de
catre utilizator.

Figură 31. MCV

Prezentarea modelului MVC
Programarea utilizând MVC (Model -View -Controller) separă aplicația în trei mari părți:
1. Modelul – reprezintă datele aplicației;
2. View -ul oferă o prezentare a datelor din Model:
3. Controller -ul rutează cererile făcute de client, se ocupă de partea logică a aplicației și
face legătura dintre Model și View.
MVC este un concept foarte răspîndit în programarea Web. Scopul MVC este de a ține
separate logica business -ului și interfața utilizator, ast fel încît cei care întrețin aplicația să
modifice mult mai ușor o parte, fără a afecta alte părți
Principiul care stă la baza conceptului Model -View -Controller este împărțirea
responsabilităților. Într -o aplicație creată trebuie să respecte acest concept, avem:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

56
 Componenta Model
Modelul reprezintă partea de hard -programming, partea logică a aplicației. El are în
responsabilitate acțiunile și operațiile asupra datelor, autentificarea utilizatorilor, integrarea
diverselor clase ce permit procesarea informaț iilor din diverse baze de date.
 Componenta View
View -ul se ocupă de afișarea datelor, practic această parte a programului va avea grijă de cum
vede end -userul informația procesată de controller. O dată ce funcțiile sunt executate de
model, view -ului îi sun t oferite rezultatele, iar acesta le va trimite către browser.
 Componenta Controler
Controller -ul reprezintă creierul aplicației. Aceasta face legătura între model și view,
între acțiunile user -ului și partea decizională a aplicației. În funcție de nevoile utilizatorului,
controller -ul apelează diverse funcții definite special pentru secțiunea de site în care se află
user-ul.
Exemplu de MVC:
– Partea 1: View (Client)
– Partea 2: Controller (Server)
– Partea 3: Model (Baza de date)

Figură 32. Eemplu MCV
Structura componentei MODEL
În model de obicei se scrie o clasă cu funcțiile de apel pentru baza de date, cum ar fi:
• funcție care primește ca parametru o variabilă de tip array cu datele ce trebuiesc
salvate în baza de date și returnează FALSE în caz de eroare sau un ID în caz de salvare cu
succes a datelor;
• funcție care preia datele din baza de date, primește ca parametru o variabilă de tip
array pentru interogarea în baza de date (condiția pentru WHERE) și returnează FALSE sau o
variabila de tip array cu datele obținute din baza de date;

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

57
• funcție pentru a afla numărul total de înregistrări din baza de date (folosită de obicei la
paginare) care primește ca parametru o variabilă de tip array pentru interogarea în baza de
date (condiția pentru WHERE) și returnează FALSE sau un număr întreg ce reprezintă
numărul de înregistrări găsite;
Rolurile componentei MODEL
Partea de model înmagazinează datele sub formă de proprietăți și pune la dispoziție
metode specifice aplicației care permit extragerea și fixarea datelor. Metodele care
gestionează datele nu sunt ceva generic, ele sunt adaptate cerințelor aplicației și trebuie să fie
cunoscute părților de control și de vedere.
Structura componentei VIEW
View -ul este partea care afișează informațiile, aici nu trebuie să se facă calcule sau
prelucrări de date, și nici o decizie (if, switch, etc)
De obicei facem un switch și în el în funcție de caz afișăm codul html corespunzător
împreună cu datele primit e de la controller, sau facem pagini separate pentru fiecare formular
sau secțiune ce trebuie afișată.
Structura componentei CONTROLER
Aici este cel mai mult cod de scris, fiind pagina care se cere prima dată și care le
include pe celelalte, este nevoie de multe verificări și prelucrări de date, iar la sfârșit datele se
trimit sub forma unor variabile de tip array la view -er sau în baza d e date prin intermediul
funcțiilor din model.
Rolurile componentei CONTROLER
Controller -ul reprezintă creierul aplicației. Aceasta face legătura între model și view,
între acțiunile user -ului și partea decizională a aplicației. În funcție de nevoile utili zatorului,
controller -ul apelează diverse funcții definite special pentru secțiunea de site în care se află
user-ul.
Funcția se va folosi de model pentru a prelucra (extrage, actualiza) datele, după care
informațiile noi vor fi trimise către view, ce le va afișa apoi prin template -uri.
Controller -ul așteaptă anunțarea de evenimente din partea părții de vedere ca urmare a
unor modificări realizate de utilizator și să le transpună în modificări pentru model. În unele
cazuri speciale, controller -ul ar putea să inducă modificări părții de vedere prin apelarea de
metode din cadrul vederii.
Modificările sunt trimise direct vederii doar în cazul în care sunt doar de cosmetizare a
vederii și nu au nici un efect asupra modelului (de exemplu funcțiile de ordonare de liste).

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

58
Comunicarea in cadrul MVC
Fiecare obiect MVC pastreaza o referinta catre catre celelalte obiect(e) cu care
interactioneaza. Mai exact, instanta model are nevoie de o referinta utila instantei view la
crearea prezentarii modelului, in timp ce pa rtile de view si controller au nevoie fiecare de o
referinta model la model si referinte reciproce, una catre cealalta.
Avantaje MVC
• Claritatea designului : Ușurință pentru a controla comportamentul modelului;
• Reutilizarea codului : Arhitectura optimizează reutilizarea codului;
• Modularitate eficientă : Modularitatea design -ului permite schimbarea oricărei
• Multiple view -uri cu același model : Separarea modelului de view permite folosirea
multiplă de view -uri păstrînd același model;
• Suport pentru tipuri noi de client : Pentru a integra un nou tip de client nu trebuie decît
• Ușurință în versionare : Controller -ele și view -urile pot crește în paralel cu modelul;
• Permite mai multe reprezentări (views) ale aceeași informații (model);
• Permite interfețelor utilizator (views) să fie ușor adăugate, înlăturate sau modificate
• Separarea responsabilitatilor
• Permite reutilizarea logicii de business in cadrul aplicatiilor
• Pot fi dezvoltate mai multe interfete grafice fara a afecta celelalte componente
• Ajuta dezvoltatorii sa fi e focusati la un moment dat pe un singur aspect al aplicatiei.
De exemplu, in ceea ce priveste interfata grafica, dezvoltatorii vor fi contrati doar pe aspectul
vizual al aplicatiei, fara a avea legatura cu partea sa de logica.
• Dezvoltarea aplicatiei de c atre echipe separate in acelasi timp
• Vizualizarea multipla: Deoarece vizualizarea este separata de model si nu exista o
dependenta directa intre acestea, interfata utilizator permite vizualizari multiple ale acelorasi
date in acelasi timp.
Dezavantaje MVC
• Instabilitatea view -ului: Separarea view -ului de model permite un model mai
robust(trainic) însă codul de interfață suferă schimbări frecvente și chiar dramatice;
• Greu de implementat;
• Clase Controller mari : Pe o aplicație mare, cu multe screen -uri, contro ller-ul ajunge să
fie foarte mare;
• Datorită folosirii interogărilor simple, elementele de grafică ar trebui realizate direct în
interfața grafică;

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

59
• Interfața grafică poate fi programată să realizeze funcții de validare a cîmpurilor,
accelerînd astfel funcți onarea aplicației;

1.4. CSS
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML . Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere
externe sau în cadrul documentului.
Un stil reprezintă o colecție de atribute ale textului și ale modului de aranjare a
documentului care pot fi aplicate în mod selectiv unui document sau doar unei părți din
acesta. Aceste atribute pot fi tipul de font, mărimea și grosimea acestuia, marginile,
paragrafele și orice altceva ce poate influența aspectul textului în pagină.
Stilurile HTML pot fi aplicate într -o pagină Web în trei moduri:
 Încapsulate (embedded ): stilurile sunt incluse în documentul asupra căruia se aplică,
și anume în secțiunea <HEAD> a documentului. Prin includerea lor în antetul documentului,
stilurile rămâ n invizibile pentru vizitatorul paginii.
 Legate (linked ): stilurile sunt definite în fișiere separate de documentul HTML.
Documentul face apel la foaia de stiluri prin intermediul etichetei <LINK>. Folosirea acestui
tip de stiluri face posibilă utilizarea aceleiași foi de stil pentru documente diferite. De
asemenea, este posibilă aplicarea mai multor foi de stiluri pentru același document.
 In-line: stilurile sunt incluse ca atribute în cadrul etichetelor HTML din document.
Aceasta înseamnă că ele vor afecta doar elementul asupra căruia sunt aplicate. Este o
modalitate mai puțin utilizată deoarece contrazice principiul general al stilurilor, acela de a
simplifica și de a face mai lizibil codul documentului HTML.
1.4.1. Stiluri încapsulate
Tagul <STYLE >
Sintaxa: <STYLE> </STYLE>
Semantica: crează un stil incapsulat; î ntre cele două etichete se introduc definițiile de
stil. Eticheta de stil este plasată în antetul documentului adică în secțiunea <HEAD>.
Acest lucru se face astfel:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

60
Atunci când dorim să faceți o schimbare de stil (mărimea fontului, culoare, etc) va
trebui să operăm modificarea în toate paginile ce conțin acel stil. Metoda descrisă este bună
atunci când avem de stilizat doua, trei pagini, însă când avem de a face cu site -uri de zeci sau
sute de pagini este destul de neplăcut sa modificam toate paginile.
1.4.2. Stiluri legate – foi de stiluri externe
Stilurile incluse în pagină se aplică elementelor prezente în respectivul document
HTML, reducând dimensiunea codului și ef ortul de a defini fiecare element în parte. Această
idee se poate extinde la nivelul mai multor documente care pot beneficia, toate, de aceleași
stiluri, reunite într -o foaie de stiluri externă .
Declararea stilurilor externe unui document html se f ace într -un fișier text care apoi se
include în documentul care utilizează stilurile declarate în acel fișier Fișierul trebie salvat cu
extensia .css. Inserarea fisierului extern in paginile HTML se face prin plasarea unui link
(legatura) in secțiunea a fi ecărei pagini pe care dorim sa folosim stilul respectiv.
Sintaxa: <LINK rel=”stylesheet” href=”fisier.css”>
Iata un exemplu de inserare a unui fisier extern .css intr -o pagina HTML:

Folosind metoda fisierelor CSS externe, toate paginile HTML vor folosi același fișier de
stil. Asta înseamnă ca dacă dorim sa facem o schimbare care să aibă efect in toate paginile,
este de ajuns sa modificăm un singur fișier, si anume cel de stil (.css), si efectul se va observa
pe toate paginile (X)HTML ce folosesc acel fi sier.
1.4.3. Stilurile in linie
Stilurile în linie se definesc chiar în codul HTML, în elementul pe care doriți sa il stilizați.
Exemplu:

Stilurile in linie nu vor permite schimbari rapide si facile, pe mai multe fisiere in acelasi
timp, fiecare element necesitand atenție, pe toate paginile.
Ordinea cascadelor
Toate cele trei tipuri de declarări a stilurilor poate fi folosită, chiar simultan. Ordinea este
urmatoarea:
 Foaie de stil externa
 Foaie de stil interna
 Stiluri in linie

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

61
Practic toate s tilurile declarate se cascadează într -o foaie de stil virtuală iar importanța
stilurilor este cea dată de tipul de declarare. Astfel stilurile declarate în foi de stil externe pot
fi suprascrise ( sau completate) de foi de stil interne , care la rândul lor pot fi suprascrise (sau
completate) de stilurile în linie.
Sintaxa css
Sintaxa CSS: selector { proprietate: valoare }
 Selectorul este elementul HTML pe care il modificăm
 Proprietatea este chiar titlul (numele) proprietății respective
 Valoarea reprezintă stilul pe care se aplică proprietății.
Selectorii sunt de 3 feluri:
1. selector HTML
2. selector de tipă clasă
3. selector de tip ID
1. Selector de tip HTML – rescrie f orma de afișaj a tag -urilor html
Exemplu:

2. Selector de tip clasă – pot fi aplicate oricăror taguri
Exemplu:

În codul html la diverse tag -uri poate apărea un atribut class care să primească
valoarea test.

3.Selector de tip ID – se aplică obiectelor care se identifică printr -un ID
Exemplu:

Atunci cand plasăm un element in interiorul altuia, elementul plasat va mosteni
proprietatile elementului in care a fost plasat. Asta doar daca nu se atribuie aceleași proprietăți
însă cu valori diferite fiecărui element. De exemplu, un font specificat pen tru corp (body) va

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

62
fi folosit în toată pagina, indiferent de elementul unde este folosit, doar dacă nu specificați un
font diferit pentru elementul respectiv.
body {font -family: Verdana, serif;}
In acest caz, tot textul din fisierul HTML va folosi fontul Verdana. Daca dorim sa
folosim un alt font pentru un element anume (de exemplu pentru paragraf sau pentru h1), va
trebui sa definim acest lucru, cum este in exemplul de ma jos:
h1 {font -family: Georgia, sans -serif;}
p {font -family: Tahoma, serif;}
Acum toate tagurile vor folosi fontul Georgia si toate paragrafele vor folosi Tahoma,
lasand totusi restul textului (din alte taguri) neschimbat, folosind in continuare Verdana .
Efecte obținute cu aj utorul stilurilor
Iată câteva atribute care se pot asocia cu diverse etichete HTML permițând schimbarea
aspectului textului.

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

63
1.4.4. CSS3 – Proprietăți
Proprietpțile CSS3 nu sunt suportate în toate browserele web și, de cele mai multe ori, vom
fi nevoiți să apelăm la prefixarea acestora în funcție de suportul în diferite browsere. Prefixele
pe care le vom întâlni mai departe sunt:
 -webkit – Specific browserelor Webkit (Google Chrome, Safari și, în curând, Opera);
 -moz- Specific browserului Mozilla Firefox;
 -ms- Specific browserului Internet Explorer;
 -o- Specific browserului Opera.
CSS3 reprezintă un upgrade ce aduce c âteva atribute noi și ajută la dezvoltarea noilor
concepte in webdesign. Unele dintre cele mai importante segmente ( module ) noi adăugate
acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in
dezvoltarea activități webdesign.
1.4.4.1. Border -radius
div { border -radius: 3px 4px 3px 4px; }
CSS3 oferă posibilitatea de a crea borduri cu colțurile rotunjite fară a folosi elemente
grafice de fundal așa cum se folosea anterior acestui upgrade.
Proprietatea CSS3 Border -radius definește prin valorile exprimate in pixeli cat de
rotunjite vor fi col țurile unui element HTML sau unei imagini. Fiecare colț poate avea o alta
valoare exprimată in pixeli diferită de un alt colț al aceluiași element. Prin urmare putem
folosi pana la 4 valori diferite atribuite unui element HTML sau imagine.
Border -radius ne permite să stilizăm rotunjimea colțurilor unui element HTML.
Poate primi valori în orice măsură validă pentru fiecare dintre cele patru colțuri ale
elementului prin notația prescurtată border -radius: 3px 2px 3px 2px, sau separat, folosind
proprietățile border -top-left-radius , border -top-right -radius , border -bottom -left-
radius și border -bottom -right -radius .
Exemplu:

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

64

1.4.4.2. Text -shadow
div { text-shadow: 1px 2px 3px #000; }
Text -shadow ne permite să a dăugăm textelor din pagini web umbre de text. Primește ca
valori de mărime, în această ordine:
 mărimea umbrei pe orizontală (poate fi negativă);
 mărimea umbrei pe vertica lă (poate fi negativă);
 factor de estompare (blur);
 culoarea umbrei [care poate avea și factor de opacitate, cum ar fi rgba(0, 0, 0, 0.5)] .
Multe dintre proprietățile CSS3 pot primi valori multiple, astfel că și în cazul text-shadow
putem afișa 2 umbre simultan aceluiași bloc de text, astfel:
p { text-shadow: 0 1px 0 red, 0 -1px 0 blue }
1.4.4.3. Box-shadow
div { box-shadow: inset 1px 2px 3px #000; }
Box-shadow ne permite să afișăm umbre elementelo r HTML și funcționează în mare
parte ca text -shadow -ul de mai sus. Diferența este că box -shadow poate lua două valori în
plus: inset, care va împinge umbra în interiorul elementului și un factor de extindere.
Exemplu :
div { box-shadow: 0 1px 2px 4px rgba( 0, 0, 0, .3), inset 0 -1px 1px 2px red } se poate traduce
astfel: o umbră exterioară de 0px lățime, 1px înălțime (în jos), estompată cu 2px și o
răspândire de 4px de culoare neagră cu opacitate de 30%, apoi aplică o umbră interioară de
0px lățime, 1px înăl țime (în sus), estompată cu 1px și o răspândire de 2px de culoare roșie.
1.4.4.4. Transition
div { transition: all 400ms ease-in-out; }
Transition este foarte util atunci când dorim să realizăm efecte de tranziție între diferite
stadii ale unui element HTML. De exemplu, putem anima culoarea de background a unui
element pe stadiul de :hover astfel:
a:hover {background:yellow; transition: background -color 200ms}
Transition poate primi următoarele valori:
 proprietatea asupra căreia se dorește efectuarea tranziției (poate lua valoarea de
“all” atunci când dorim tranziție pentru toate atributele CSS ale selectorului),
 durata (ex: 200ms – milis ecunde, 1s – secundă),

Modalități de optimizare a comunicării dintre școală și părinți prin aplicație PHP

65
 efect (poate fi: linear, ease, ease -in, ease -out, ease -in-out)
1.4.4.5. Background Gradient
div { background: linear -gradient(top, #000, #fff); }
1.4.4.6. 2D Transforms
div { transform: rotate(10deg) scale(0.93) skew(33deg) translate(2px); }
Metodele de transformare ale unui obiect HTML:
 rotate(Xdeg) – măsurat în grade (deg), poate lua valori negative
 scale(x, y) – definește dimensiunea relativă față de valoarea inițială a
elementului pe scara XY
 skew(Xdeg, Ydeg) – măsurat în grade, distorsionează oblic elementul pe axa
XY
 translate(Xpx) – mută obiectul pe axa XY relativ față de poziția inițială
1.4.4.7. Resizing
Tagul div este redimensionabil de utilizator (în Firefox 4+, Chrome, și Safari).
div { resize:both; overflow:auto; }
1.4.4.8. Box Sizing
Box Sizing permite definirea elementelor certe pentru a fixa zona.
div { box -sizing:border -box; -moz-box-sizing:border -box; /* Firefox */
-webkit -box-sizing:border -box; /* Safari */
width:50%; float:left; }