LUCRARE METODICO-ȘTIINȚIFICĂ PENTRU OBȚINEREA GRADULUI DIDACTIC I Conducător științific, Lect.univ.dr. Viorel PĂUN Universitatea din Pitești,… [305233]

Licență

LUCRARE METODICO-ȘTIINȚIFICĂ PENTRU OBȚINEREA GRADULUI DIDACTIC I Conducător științific, Lect.univ.dr. Viorel PĂUN Universitatea din Pitești,… [305233]

Byadmin ianuarie 1, 2024

[anonimizat]-ȘTIINȚIFICĂ PENTRU OBȚINEREA GRADULUI DIDACTIC I

[anonimizat].univ.dr. [anonimizat]-Informatică

Candidat: [anonimizat]. BĂLAE (RĂDOI) Ionica Iuliana LICEUL TEORETIC “IULIA ZAMFIRESCU” – MIOVENI

– Pitești 2016 –

[anonimizat]. [anonimizat].univ.dr. [anonimizat]-Informatică

Candidat: [anonimizat]. BĂLAE (RĂDOI) Ionica Iuliana LICEUL TEORETIC „IULIA ZAMFIRESCU” – MIOVENI

– Pitești 2016 –

Cuprins

INTRODUCERE 4

Justificarea temei alese 4

Descrierea capitolelor lucrării 6

CAPITOLUL I 7

[anonimizat] 7

I.1. Istoricul apariției Internetului. Rețeaua WWW. Conceptul de Hipertext. 7

I.2. [anonimizat] 10

I.3. [anonimizat] 10

I.3.1. Scrierea de cod HTML. Editoare specializate și validatoare HTML 11

I.3.2. Structura de bază a unei pagini 11

I.3.3. Formatarea și alinierea textului 13

I.3.4. Liste 18

I.3.5. Imagini 21

I.3.6. Tabele 23

I.3.7. Legături (link-uri) 28

I.3.8. Elemente de structură (HTML, HEAD, BODY) 30

I.3.9. Frame-uri (Pagini cu cadre) 33

I.3.10. Formulare 36

I.4. Extinderi ale limbajului 40

I.4.1. CSS (Cascading Style Sheets) 40

I.4.2. JavaScript 43

I.4.3. DOM (Document Object Model) 43

I.5. [anonimizat] 44

I.5.1. Introducere – scurt istoric al apariției limbajului PHP; mod de funcționare 44

I.5.2. Rularea limbajului PHP pe un sistem Windows 45

I.5.3. Constante. Variabile. Operatori. Afișarea datelor 46

I.5.4. Instrucțiuni 47

I.5.5. Formulare 51

I.5.6. Funcții 59

I.5.7. Șiruri de caractere 62

I.5.8. Upload de fișiere 65

CAPITOLUL II ASPECTE METODICE 79

II.1. Forme de organizare a activității didactice 81

II.1.1. Activitatea frontală 82

II.1.2. Activitatea pe grupe 90

II.1.3. Activitatea individuală 94

II.1.3.1. Problematizarea și învățarea prin descoperire 95

II.1.3.2. Metoda conversației 98

CAPITOLUL III 107

III.1. Relația dintre tic și formarea competențelor specifice disciplinelor
informatice 107

III.2. Atractivitatea informaticii în rândul elevilor 120

BIBLIOGRAFIE…………………………………………………………………………………………………………. 124

INTRODUCERE

Justificarea temei alese

Începând cu anii ’95 [anonimizat] (paginile web), s-a dezvoltat cu o repeziciune greu de imaginat.

[anonimizat] a [anonimizat], într-o continuă evoluție.

Un important segment al dezvoltărilor informatice este de domeniul proiectării și dezvoltării de aplicații destinate Internetului.

[anonimizat]. Lucrarea dezvăluie direct subiectul stabilit ca obiectiv principal: programarea Web. [anonimizat], [anonimizat]-o singură lucrare.

Astfel ținta principală a fost focalizată pe furnizarea rapidă, eficace și concisă, axată strict pe utilitatea uzuală, a unor informații de maximă eficiență aplicativă, destinate unei rezolvări rapide a diverselor probleme care apar frecvent în dezvoltarea aplicațiilor Web, folosite la dezvoltarea competențelor digitale ale elevilor.

Din imensa gamă de limbaje și tehnologii de programare utilizate la ora actuală pentru dezvoltarea și întreținerea aplicației numită Internet, lucrarea se oprește doar la o plajă restrânsă de aplicații Web cerute pe piață și posibile de înțeles de elevi.

În lucrare se face referire la următoarele componente: HTML+CSS, PHP acoperind practic întreaga arie de problematici care se cer a fi rezolvate la dezvoltarea unui site Web: programare server-side (PHP), programare client-side (JavaScript), formatare și design (HTML, CSS).

Abordarea temei tratate este însoțită de o tentă aplicativă, orice secvență de cod prezentată putând fi rulată, adaptabilă și extensibilă conform cerințelor programatorului. Abordarea este făcută cu pași mărunți, fiecare exemplu venind ca o completare a noțiunilor teoretice prezentate, respectiv ca un pas în față pentru rezolvarea unei alte probleme, succesiv și logic apărute după rezolvarea celei precedente.

Aceste realități si-au găsit o reflectare și asupra programelor școlare din cadrul disciplinei „informatică”, dar și a opționalelor dorite de elevi la clasele gimnaziale.

Lucrarea de față își propune în primul rând să fie o unealtă didactică, un manual școlar care să îi poată ajuta pe elevi în procesul de învățare.

Limbajul PHP este un limbaj de programare destinat în primul rând Internetului, aducând dinamică unei pagini web. Este unul dintre cele mai importante limbaje de programare web open-source (codul sursă este public, fiind accesibil tuturor) și server-side (rularea sa nu se face pe calculatorul celui care vizualizează pagina, ci pe server-ul care o conține).

Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor sale caracteristici:

Familiaritatea – sintaxa limbajului este foarte ușoară;

Simplitatea – sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document fiind trecut între niște marcaje speciale;

Securitatea – PHP-ul pune la dispoziția programatorilor un set flexibil de măsuri de siguranță;

Flexibilitatea – fiind apărut din necesitatea dezvoltării web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii;

Gratuitatea – este caracteristica importantă a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a sa la nevoile web-ului, eficientizarea și securizarea codului.

Descrierea capitolelor lucrării

În primul acestei al acestei lucrări – Fundamente teoretice ale paginilor WEB – limbajul HTML – mi-am propus o parcurgere amănunțită a limbajului HTML standard, descriind tag-urile cele mai importante și exemplificând aceste descrieri cu exemple.

Capitolul se încheie cu o trecere în revistă a tehnicilor de programare dinamice ale unei pagini web realizată pentru promovarea imaginii unei unități școlare, care rămân însă tot pe domeniul HTML. Acest capitol este mai mult decât necesar, deoarece PHP-ul nu face altceva decât să ruleze programe în urma căruia este generat cod HTML. Nu putem așadar vorbi de limbajul PHP fără a cunoaște elemente de HTML.

În capitolul al II-lea – Forme de organizare a activității didactice – am parcurs metode specifice organizării activității didactice în predarea disciplinei – Prietenul meu Calculatorul, Opțional de Informatică, avizat de I.S.J Argeș.

Sunt prezente descrierile activităților didactice: frontală, pe grupe și individuală. Fiecare dintre aceste activități beneficiază de o descriere teoretică întărită de un exemplu practic de activitate. Tot pe acest plan, sunt prezentate și metode moderne de consumare a actului didactic la clasă, care are drept rezultat una dintre aplicațiile elevilor.

În capitolul III al lucrării am abordat legătura interdisciplinară a Informaticii cu diverse domenii, abordată prin prisma exemplelor elevilor.

Astfel finalul lucrării este presărat cu „pete de culoare informatică” din lucrări ale elevilor, ce pun în evidență „ramurile ce răsar din acest minunat pom” numit INFORMATICA.

CAPITOLUL I

FUNDAMENTE TEORETICE ALE PAGINILOR WEB – LIMBAJUL HTML

I.1. Istoricul apariției Internetului. Rețeaua WWW.
Conceptul de Hipertext.

Noțiunea de Internet apare prin anul 1968, când guvernul S.U.A. intenționa să interconecteze universitățile, departamentele militare și de apărare ale țării, astfel încât ele să coopereze în cadrul unor proiecte de cercetare comune. În acest scop s-a format o agenție numită Advanced Research Projects Agency (ARPA). Una din premisele proiectului punea în discuție faptul că stocarea tuturor informațiilor pe un singur calculator nu ar fi fost deloc sigură, fie din cauză că acesta ar putea fi țintă vulnerabilă a unui eventual atac sau o cauză mult mai simplă ar fi apariția unei defecțiuni tehnice majore. O metodă de a face față unei asemenea situații ar fi de a copia și distribui informațiile pe mai multe calculatoare, în întreaga țară, folosind o rețea.

În 1975, câteva dintre limbajele sau protocoalele pe care calculatoarele le foloseau pentru a comunica între ele au devenit standarde. Majoritatea universităților importante și a departamentelor de apărare din S.U.A. s-au legat împreună într-o rețea numită DARPANET, toate calculatoarele folosind același protocol pe care astăzi îl cunoaștem sub denumirea de TCP/IP. Rețeaua, cu timpul, a fost înlocuită de mai multe rețele, care astăzi împânzesc globul pământesc.

Începând cu anul 1980, mai multe colegii și universități au fost conectate la Internet. Acest lucru a permis universităților să-și împartă informații despre cercetările lor, programe și știri recente. În anii ’90 Internetul s-a deschis și în scopuri comerciale. În curând, multe alte căi de utilizare a informațiilor transmise prin intermediul acestei gigantice rețele au fost dezvoltate.

Astăzi, Internetul este folosit pentru comunicare, schimb de idei și opinii în doar câteva secunde, dar și pentru îmbogățirea universului cunoștințelor.

Reuniunea cuvintelor World Wide Web (WWW) contribuie la definirea ansamblul site-urilor sau documentelor legate între ele, de tip hipertext, care pot fi accesate prin rețeaua internetului. Combinația mai este denumită simplu și web, care în engleză înseamnă „pânză de păianjen” sau rețea.

Principiul de bază al funcționării aplicației constă în faptul că două sau mai multe calculatoare pot comunica între ele. Totuși legătura presupune existența unui „protocol”, adică un ansamblu de norme care trebuie respectate de calculatoare (deci de programele care rulează pe ele) pentru ca schimbul de date să poată avea loc.

Standardele care sunt definite a fi cele de bază sunt:

HTTP – Hypertext Transfer Protocol (protocolul prin care browserul unui calculator comunică cu serverul);

HTML – Hypertext Markup Language (standardul de definire și prezentare a paginilor web);

URI – Uniform Resource Indentifier (sistemul universal de identificare al resurselor web, folosit pentru a identifica și regăsi paginile web)

Interpretate mai simplu aceste norme se referă la:

• găsirea calculatorului destinatar al transferului de date;

• transmiterea efectivă a datelor;

• modalități prin care expeditorul comunică faptul că au fost transmise toate datele, iar destinatarul comunică faptul că le-a recepționat;

• compresia datelor: prin aplicarea anumitor algoritmi matematici, datele care urmează să fie expediate sunt prelucrate de așa natură, încât să fie memorate prin utilizarea unui spațiu cât mai mic de memorie. Prin urmare, transmiterea lor durează mai puțin. Invers, la destinație sunt decompresate prin utilizarea acelorași algoritmi matematici;

• identificarea erorilor care pot interveni în transmiterea datelor: și aici există mai mulți algoritmi care permit identificarea și corectarea erorilor.

Standardul care s-a impus în ceea ce privește Internetul, constă în protocolul TCP/IP. Numele este de fapt, numele comun al unei familii de protocoale utilizate pentru transferul datelor în rețea. Orice calculator conectat la Internet are o adresă, numită adresă IP (Internet Protocol Address). O adresă IP este alcătuită din 4 numere între 0 și 255, prin urmare o astfel de adresă ocupă 4 octeți. Cum transmiterea datelor la un moment dat se face între două calculatoare, datele se transmit de la o adresă IP la alta.

Protocolul IP (Internet Protocol) reglementează transmiterea datelor de la o adresă IP la alta. Datele sunt transmise divizate în pachete. În acest fel, se preîntâmpină monopolizarea transmisiei în rețea doar de către un singur utilizator.

Protocolul TCP (Transmission Control Protocol): de la plecare, un program TCP împarte informația de transmis în mai multe pachete IP. Acestea sunt transmise la destinație prin intermediul rețelei. O dată ajunse la destinație, un alt program TCP asamblează și aranjează în ordinea corectă pachetele IP de date primite. Firește, din cauza unor probleme hardware, unele pachete se pot pierde pe drum. Protocolul TCP se ocupă și de acest lucru. Astfel, când împachetează datele într-un plic „IP”, protocolul TCP al expeditorului adaugă și un număr (numit sumă de control) care va permite destinatarului să se asigure de faptul că datele primite sunt corecte. Receptorul recalculează suma de control și o compară cu cea transmisă de emițător. Dacă ele nu sunt identice, înseamnă că a apărut o eroare în timpul transmisiei, motiv pentru care protocolul TCP anulează acel pachet, cerând retransmiterea sa.

Bazele World Wide Web (WWW) au fost puse în 1989 la Centrul European de Cercetări Nucleare (CERN) în Geneva (Elveția). Propunerea inițială de creare a unei colecții de documente având legături între ele a fost făcută de Tim Berners-Lee în martie 1989. Această propunere a apărut în urma problemelor de comunicare pe care le întâmpinau echipele de cercetători ce foloseau centrul, chiar și folosind poșta electronică.

Primul server web folosit de Tim Berners-Lee a apărut nu mult înainte de decembrie 1991, când s-a făcut prima lui demonstrație publică. Studiul a fost continuat prin apariția primei aplicații grafice Mosaic, în februarie 1993, realizată de cercetătorul Marc Andreessen de la centrul universitar National Center for Supercomputing Applications (NCSA) din orașul Urbana-Champaign din statul federal Illinois, SUA. Ulterior WWW-ul a evoluat până la ceea ce este astăzi, un serviciu integrativ și multimedial, având ca suport fizic Internetul.

Practic, WWW este un sistem de documente și informații de tip hipertext legate ele între ele, care pot fi accesate prin rețeaua mondială de Internet. Documentele, care rezidă în diferite locații pe diverse calculatoare-server, pot fi regăsite cu ajutorul unei adrese unice. Hipertextul este prelucrat cu un ajutorul unui program de navigare în web numit browser care descarcă paginile web de pe un server web și le afișează pe un terminal.

Prin conceptul de hipertext se înțelege o formă de document electronic, o metodă de organizare a informațiilor în care datele sunt memorate într-o rețea de noduri și legături, putând fi accesată prin intermediul programelor de navigare interactivă, și manipulată de un editor structural. Conceptul de bază în definirea hipertextului este „legătura” (link-ul), fie în cadrul aceluiași document, fie către alt document. Legătura de tip link permite organizarea neliniară a informațiilor. Un sistem hipertext permite autorului său să creeze așa-numite „noduri”, să le lege între ele, iar unui cititor navigarea de la un nod la altul. Astfel un nod reprezintă un concept putând conține orice fel de informație: text, grafică, imagini, animații, sunete, etc. Nodul sursă al unei legături se numește „referință” iar cel destinație „referent” sau ancoră, punctele de legătură din respectivele noduri fiind marcate. Activarea marcajelor unei legături duce la vizualizarea nodurilor. Asocierea cu unele elemente mediale a dus la extinderea noțiunii de hipertext către „hipermedii”.

I.2. Despre website-uri

Noțiunea de website (sau pur și simplu site, ori „site web”) desemnează o grupă de pagini web multimedia (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 între ele prin hyperlink-uri. 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.

Calculatoarele conectate la calculatorul care emite semnalele de internet – „server” se numesc calculatoare „client”.

Orice astfel de calculator trebuie să dispună de un program specializat, numit „browser”, cu ajutorul căruia să se poată interpreta și deci vizualiza fișierele HTML. La rândul său serverul trebuie să conțină programul 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).

I.3. HTML standard – limbaj descriptiv al unei pagini WEB

HTML este un limbaj 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 trebuie 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, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri.

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 cum ar fi Macromedia Dreamweaver sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documentele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP.

I.3.1. Scrierea de cod HTML. Editoare specializate și validatoare HTML

Crearea unui fișier HTML este foarte simplă, putând fi făcută cu ajutorul oricărui editor de text. Totuși, pentru a avea un control ridicat asupra corectitudinii codului scris, este recomandat să utilizăm un editor specializat, care să pună în evidență diversele elemente de marcare (TAG-uri, numite și „elemente” sau „etichete”) sau, mai mult, să poată verifica și detecta erorile.

Din categoria editoarelor care pun în evidență diferitele elemente face parte editorul Notepad++, fiind gratuit și putând fi descărcat de pe Internet.

I.3.2. Structura de bază a unei pagini

HTML(HyperText Markup Language) este un limbaj de marcare (formatare, aranjare) a documentelor cu conținut hypertext (hypermedia), adică a paginilor web. El utilizează etichete pentru a marca textul și grafica dintr-o pagină web, indicând astfel browserului modul de a răspunde la acțiunea utilizatorului. Astfel de fișiere sunt fișiere ASCII care au extensia .HTM sau .HTML.

Un document HTML reprezintă o succesiune de blocuri de informație, blocuri care pot fi simple sau cu structura arborescentă. Blocurile sunt delimitate de simboluri speciale numite tag-uri.

Tag-ul este un termen care definește etichetele HTML. Fiecare tag este încadrat între semnele unghiulare “<” și “>”. Majoritatea tag-urilor au un tag corespunzător numit tag de sfârșit, cu aceeași structură, deosebirea constând în apariția caracterului “/” după semnul “<”.

În exemplul următor voi edita cea mai simplă pagină HTML:

Codul sursă al unei pagini HTML este:

Iată și modul în care pagina de mai sus este vizualizată în browserul Chrome:

Pagina a fost creată în editorul Notepad ++ punând în evidență structura cea mai simplă a unei pagini HTML.

O pagină începe cu tag-ul <HTML> și se termină cu tag-ul corespunzător </HTML>;

O pagină conține un antet (HEAD) și corpul propriu-zis (BODY);

Antetul este cuprins între etichetele <HEAD> și </HEAD>;

Corpul este cuprins între etichetele <BODY> și </BODY>;

Opțional, antetul poate conține titlul paginii, cuprins între tag-urile <TITLE> și </TITLE>. Titlul apare pe bara de titlu a ferestrei afișate în browser.

Corpul poate conține texte și/sau imagini. În exemplu, pagina conține textul „Acesta este primul exemplu de pagina…”

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. În continuare, pentru a le pune în evidență, le vom scrie cu litere mari.

I.3.3. Formatarea și alinierea textului

Plecând de la următoarele imagini observam că browserul nu știe să afiseze formatat un text în fereastra în care îl deschide, observându-se ca textul nu apare afișat așa cum este editat.

În general, textele conținute de o pagină se pot găsi în mai multe paragrafe. Un paragraf se introduce între tag-urile <P> … </P>.

La afișare, două paragrafe consecutive vor fi separate printr-o linie goală. Tag-ul </P> poate lipsi; un nou paragraf poate fi detectat prin tag-ul <P>.

În cadrul unui fișier HTML, Enter-ul nu are nici un efect. De asemenea, dacă două cuvinte ale unui paragraf sunt separate prin mai multe spații sau alte caractere albe (enter-uri, tab-uri), browser-ul afișează doar un singur spațiu.

Majoritatea tag-urilor li se pot specifica atribute. Acestea determină comportamentul mai amănunțit al elementului respectiv.

Un alt mod de a împărți o zonă de text pe rânduri se poate efectua folosind tagul <BR>, acolo unde vrem să „rupem” rândul. Acest tag este unul din cele care nu are tag corespunzător de încheiere.

În cadrul unui paragraph, textul poate fi aliniat folosind tagurile:

Pentru alinierea la centru se folosește tag-ul <CENTER> … </CENTER>;

Pentru aliniere mai poate fi folosit și tag-ul <DIV ALIGN= “…”> … </DIV>, tag ce conține pe lângă nume și atribute care primesc valori scrise între ghilimele. În acest caz atributul ALIGN poate lua valorile: CENTER(centru), LEFT(stânga), RIGHT(dreapta). În cazul în care nu se specifică niciuna dintre aceste valori, valoarea LEFT este cea implicită.

Iată pagina al cărei cod tocmai a fost prezentat, vizualizată în browser:

Dar formatarea unui text nu se rezumă doar la așezarea lui în pagină ci și la aspectul textului. Astfel sunt folosite următoarele taguri:

• <B>…</B>: Are rolul de a afișa bold (îngroșat) textul cuprins între cele două tag-uri ale sale. Un tag sinonim al lui <B> este: <STRONG>…</STRONG>;

• <I>…</I> : Are rolul de a afișa italic (înclinat) textul cuprins între cele două tag-uri ale sale. Tag-uri sinonime ale lui <I> sunt: <EM>…</EM>, <DFN>…</DFN>,<CITE>…</CITE>;

• <U>…</U>: 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>;

• <S>…</S>: 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>

• <BIG>…</BIG> : Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mare decât textul în care este cuprins;

• <SMALL>…</SMALL> : Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mic decât textul în care este cuprins;

• <SUP>…</SUP> : Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (la putere);

• <SUB>…</SUB> : Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (ca un indice);

• <TT>…</TT> : Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus monospațiat (toate caracterele ocupă aceeași lungime – practic, se folosește fontul Courier New);

În cod-ul HTML de mai jos se regăsesc aceste tag-uri(Exemplul 3.html)

<HTML>

<HEAD>

<TITLE>Formatarea textului</TITLE>

</HEAD>

<BODY>

<P>

<B>Acest text este afisat îngroșat folosind tag-ul B</B> <BR>

<STRONG>Acest text este afisat folosind tag-ul STRONG</STRONG> <BR>

<I>Acest text este scris cu stil Italic folosind tag-ul I</I> <BR>

<DFN>Acest text este afisat folosind tag-ul DFN</DFN> <BR>

<EM>Acest text este afisat folosind tag-ul EM</EM> <BR>

<U>Acest text este afisat folosind tag-ul U</U> <BR>

<INS>Acest text este afisat folosind tag-ul INS</INS> <BR>

<S>Acest text este afisat folosind tag-ul S</S> <BR>

<DEL>Acest text este afisat folosind tag-ul DEL</DEL> <BR> Normal <BIG>Mai mare</BIG> Normal <BR>

Normal <SMALL>Mai mic</SMALL> Normal <BR> Iata si un <SUP>exponent</SUP> <BR>

iar acum un <SUB>indice</SUB> <BR>

<TT>Acest text este monospatiat</TT>

</P>

</BODY>

</HTML>

Acest cod vizualizat în browser arată în felul următor:

• Pentru scrierea titlurilor se utilizează tag-urile <H1>…<H1>, <H2>…<H2>, … , <H6>…<H6>. Practic, în funcție de numărul de după H mărimea fontului diferă (<H1> utilizează fontul de dimensiune maximă, <H6> fontul de dimensiune minimă) iar textul care apare între tag-uri este scris îngroșat (bold).

• Pentru stabilirea font-ului se folosește tag-ul <FONT>…<FONT>. Atributele acestuia sunt:

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. Aceasta 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 #RRGGBB (vom detalia aceste constante de culoare ceva mai încolo).

Iată un exemplu de utilizare al lor (Exemplul 4.html):

<HTML>

<HEAD>

<TITLE>Titluri si fonturi</TITLE>

</HEAD>

<BODY>

<P>

<H6> Un titlu scris de dimensiune mare</H6>

<H2>Iar acesta este un titlu de dimensiune mare</H2>

Acest text este scris cu fontul Monotype Corsiva, de culoare rosie, dimensiune 4

</FONT><BR>

</P>

</BODY>

</HTML>

Vizualizat în browser arată astfel :

Așa cum am văzut, dacă în cadrul unui text din cadrul documentului HTML apare un grup de mai multe spații, în browser va fi afișat doar unul singur. Dacă dorim forțarea afișării unui spațiu, se folosește identificatorul special   (ultimul caracter, ”;”, face parte din identificator).

I.3.4. Liste

Acestea permit ca anumite enunțuri să fie așezate unele sub altele numerotate sau marcate cu un anumit simbol. O astfel de organizare a elementelor se numește listă.

Distingem 3 feluri de liste:

• Liste ordonate (Ordered Lists): sunt liste în care elementele sunt numerotate.

Inserarea în aplicația de editare Notepad ++ se face prin tag-urile <OL type= “…”>…</OL>, elementele lor fiind introduse între aceste două tag-uri prin <LI>…</LI> (tag-ul de sfârșit nefiind obligatoriu). Implicit, numerotarea se face cu numere arabe (1, 2, 3, …). Ea poate fi modificată prin folosirea atributului type în cadrul tag-ului OL. Acesta poate lua una dintre valorile:

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, …)

• Liste neordonate (Unordered Lists): sunt liste în care elementele nu sunt numerotate, ci în dreptul fiecăruia este afișat un marcator.

Inserarea lor în cadrul documentului HTML se face prin tag-urile <UL>…</UL>, elementele (itemii) lor fiind introduse între aceste două tag-uri prin <LI>…</LI> (tag-ul de sfârșit nefiind obligatoriu).

Implicit, marcarea lor se face prin cerculețe pline. Ea poate fi modificată prin folosirea atributului type în cadrul tag-ului UL. Acesta 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;

• Liste de definiție (Definition Lists): au rolul de a descrie o listă de definiții. Inserarea lor în cadrul documentului HTML se face prin tag-urile <DL>…</DL>. Elementele lor sunt de două tipuri:

Termenul care este definit: este introdus între tag-urile <DT>…</DT> (tag-ul de sfârșit nefiind obligatoriu).

Definiția propriu-zisă: este introdusă între tag-urile <DD>…</DD> (tag-ul de sfârșit nefiind obligatoriu).

Iată și un exemplu cu liste și vizualizarea lui în browser:

Codul HTML(Exemplul 5.html)

<HTML>

<HEAD>

<TITLE>Liste</TITLE>

</HEAD>

<BODY>

<P>

Structura organizatorica a scolii

<LI>PRIMAR</LI>

<LI>GRUPA PREGATITOARE – 3 CLASE</LI>

<LI>CLASA I – 3 CLASE</LI>

<LI>CLASA II – 3 CLASE</LI>

<LI>CLASA IV – 4 CLASE</LI>

</UL>

<LI>GIMNAZIU</LI>

<LI>CLASA a V-a – 3 CLASE</LI>

<LI>CLASA a VI-a – 3 CLASE</LI>

<LI>CLASA a VII-a – 2 CLASE</LI>

<LI>CLASA a VIII-a – 3 CLASE</LI>

</UL>

</OL>

<DL>

<DD> Acest tag urmeaza imediat dupa <html> si este folosit pentru a indica browser-ului, informatii utile precum: titlul pagini, continutul (folosit de motoarele de cautare vechi) si multe altele </DD>

<DD>Este tag-ul care marcheaza deschiderea si incheierea unui paragraf. Asa că atunci cand vei incepe un paragraf asigura-te ca ai pus <p> la inceput si </p> la sfarsit</DD>

</DL>

</P>

</BODY>

</HTML>

I.3.5. Imagini

Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <IMG>. Forma generală a acestui element este <IMG atribute>. Acest tag nu are și formă de închidere.

Atributele sale sunt:

• src identifică fișierul efectiv de pe disc, ce conține imaginea respectivă. Dacă imaginea se află în directorul curent, se specifică doar numele și extensia sa. Dacă se află într-un subdirector, acesta se specifică înaintea numelui și extensiei imaginii, separat prin caracterul /. Imaginile recunoscute de majoritatea browser-elor internet sunt de tip .jpg, .gif, .png. Dacă se cunosc dimensiunile în pixeli ale unei imagini este de preferat să fie specificate deoarece browserul va încărca mai ușor pagina respectivă.

• align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află și poate lua una dintre valorile:

– 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 aliniază 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;

Dacă dorim întreruperea unei alinieri de imagine de tip right sau left înainte ca textul să fi umplut spațiul liber din stânga, respectiv dreapta acesteia, putem folosi tag-ul br, căruia îi adăugăm unul dintre atributele clear=”left” sau clear=”right” sau clear=”all”, după caz.

• Atributul 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.

• atributele height și width permit specificarea altor dimensiuni pentru imagine, decât cele reale ale acesteia. Evident, dacă dimensiunile nu sunt proporționale cu cele reale, imaginea va fi deformată. Totodată, dacă specificăm dimensiuni mai mari decât cele reale, imaginea se va vedea mai puțin clar. În realitate, imaginea este transferată de pe server la dimensiunile sale originale, redimensionarea având loc doar la nivelul calculatorului pe care este vizualizată pagina.

• atributele hspace=”nr.pixeli” respectiv vspace=”nr.pixeli” permit stabilirea distanței minime care separă imaginea de celelalte obiecte pe verticală, respectiv pe orizontală.

Codul sursă și al inserării unei imagini într-o pagină HTML(Exemplul 6.html):

<html>

<head>

<title>Inserarea imaginilor</title>

</head>

<body>

Aceasta este o imagine preluata de pe site-ul nou!<br>

</body>

</html>

Vizualizarea în browser:

I.3.6. Tabele

Un element des folosit în paginile HTML este tabelul cu rolul de a așeza a informația într-un cadru format din celule, dar cel mai ales pentru a așeza informația în zone și direcții în care altfel nu ar fi posibil (tabele invizivile).

Tag-ul <TABLE> … </TABLE> mărginește întregul tabel. Tabelul este format din linii, fiecare linie fiind împărțită în celule. De aceea vom avea nevoie și de tag-uri care să mărginească liniile, respectiv celulele, tag-uri care sunt opționale. Atributele tagului de creare al tabelului sunt:

BORDER = "…" Indică grosimea tabelului. Implicit este 1.

CELLSPACING = "…" Indică dimensiunea spațiului (în pixeli) ce trebuie lăsat între celulele tabelului.

CELLPADDING = "…" Indică dimensiunea spațiului (în pixeli) ce trebuie lăsat între marginea unei celule și conținutul ei.

WIDTH = "…" Indică lungimea tabelului. Poate fi specificată în pixeli sau în procente relativ la lungimea paginii. (Exemplu: WIDTH="600" sau WIDTH="80%".)

HEIGHT = "…" Indică înălțimea tabelului. Se poate specifica în pixeli sau în procente. Nu este recomandabilă folosirea acestui tag. De exemplu: este inutil să specificăm noi că înălțimea unui tabel să fie 300 de pixeli dacă informația din tabel este mare și conduce la o înălțime de 400 de pixeli. Cel mai bine este să lăsăm tabelul "să-și stabilească" înălțimea în mod dinamic, în funcție de conținut.

ALIGN = "…" Specifică cum să fie aliniat tabelul în pagină sau în containerul în care este inclus (de exemplu, un tabel poate să conțină într-o celulă a sa un alt tabel; specificând cum să fie aliniat tabelul mic din interior, așezarea se va face relativ la celula tabelului mare care-l conține). Valori posibile sunt: LEFT, CENTER sau RIGHT. LEFT este implicită.

BGCOLOR = "…" Indică culoarea de fundal a tabelului.

Pentru a marca o linie din tabel trebuie să folosim tag-ul <TR>. Acesta are și el mai multe atribute:

ALIGN = "…" Specifică cum să fie aliniat pe orizontală conținutul unui rând din tabel. Valori posibile sunt: LEFT, CENTER sau RIGHT. LEFT este valoarea implicită.

VALIGN = "…" Specifică cum să fie aliniat pe verticală conținutul unui rând din tabel. Valori posibile sunt: TOP, MIDDLE, BOTTOM. MIDDLE este valoarea implicită.

BGCOLOR = "…" Indică culoarea de fundal a liniei tabelului.

Pentru a marca o celulă din tabel trebuie să folosim tag-ul <TD>. O celulă poate să ocupe mai multe celule standard (pe orizontală sau verticală). Acest tag are și el mai multe atribute:

ALIGN = "…" Specifică cum să fie aliniat pe orizontală conținutul unei celule. Valori posibile sunt: LEFT, CENTER sau RIGHT. LEFT este valoarea implicită.

VALIGN = "…" Specifică cum să fie aliniat pe verticală conținutul unei celule. Valori posibile sunt: TOP, MIDDLE, BOTTOM. MIDDLE este valoarea implicită.

ROWSPAN = "…" Specifică numărul de celule standard pe care celula respectivă le ocupă relativ la linii (pe câte linii se întinde).

COLSPAN = "…" Specifică numărul de celule standard pe care celula respectivă le ocupă relativ la coloane (pe câte coloane se întinde).

WIDTH = "…" Specifică lungimea în pixeli a celulei respective.

BGCOLOR = "…" Indică culoarea de fundal.

Atribute ale tag-ului <TABLE>

• cellpadding=”nr_pixeli” permite 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” permite 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.

Conținutul unei celule poate fi cât se poate de general: de la text și imagini până la alte tabele (se pot deci construi chiar și tabele imbricate).

• width=”lățime” poate stabili cât de lat să fie tabelul. Lățimea poate fi dată în procente, caz în care se va calcula ca și procent din lățimea ferestrei browser-ului (ex: width=”50%”) sau în pixeli (ex: width=”500”);

• height=”înălțime” poate stabili cât de înalt să fie tabelul. Lățimea poate fi dată, la fel ca și în cazul atributului width, în procente sau în pixeli;

• align determină alinierea tabelului în pagină. Poate la una dintre valorile left, right sau center. Dacă, pe lângă tabel, mai scriem și text, acesta se va poziționa față de tabel în același mod în care se poziționează și față de imagini;

• bgcolor=”culoare” permite stabilirea culorii de fundal a tuturor celulelor tabelului;

• bordercolor=”culoare” permite stabilirea culorii chenarului (deopotrivă cel interior cât și cel exterior)

Atribute ale tag-ului <TR>

• 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;

• valign determină, pentru toate celulele de pe linie, modul alinierii conținutului 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.

Atribute ale tag-ului <TD>

• 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țimea.

Iată un exemplu sugestiv de creare a unui tabel simplu (Exemplul 7.html):

<HTML>

<HEAD>

<TITLE>Tabele</TITLE></HEAD>

<BODY>

<tr>

<td rowspan="5">CICLUL PRIMAR</td>

<td>Clasa pregatitoare</td>

</tr>

<tr>

<td>Clasa a I-a</td>

</tr>

<tr>

<td>Clasa a II-a</td>

</tr>

<tr>

<td>Clasa a III-a</td>

</tr>

<tr>

<td>Clasa a IV-a</td>

</tr>

<td rowspan="5">CICLUL GIMNAZIAL</td>

<tr>

<td>Clasa a V-a</td>

</tr>

<tr>

<td>Clasa a VI-a</td>

</tr>

<tr>

<td>clasa a VII-a</td>

</tr>

<tr>

<td>Clasa a VIII-a</td>

</tr>

</table>

</BODY>

</HTML>

I.3.7. Legături (link-uri)

Prezentarea limbajul HTML facută până acum, reprezintă doar partea descriptivă, cu ajutorul căreia putem crea un conținut static.

Legăturile sau link-urile reprezintă procedeul prin care:

cel care accesează pagina să poată găsi informații mai rapid accesând o altă pagină cu un acces cât mai ușor, dar să poată și reveni în pagina de start;

face ca vizitatorul paginii noastre să acceseze un fișier pentru download;

se pot afișa mesaje sau vizualiza aplicații media;

putem ca, prin accesarea unui click, cel care vizitează pagina să ne poată trimite un e-mail.

Pentru a putea realiza toate aceste facilități celor care accesează pagina vom folosi tag-ul <A>…</A>, numit și Ancoră.

Ancore de legătură către alte pagini

Acestea permit ca un anumit element din document să conțină legătura către o altă pagină. Pentru crearea ancorelor de folosesc de obicei imagini sau texte. Atunci când legătura este facută elementul care crează această legătura, aspectul față de elementele din text iar atunci când cursorul mouse-ului se află deasupra elementului care a realizat legătura capătă forma unei mâini, indicându-ne astfel că este vorba de un link pe care îl putem utiliza. Printr-un click se poate accesa pagina către care este făcută legătura.

Acest tip de legătură se realizează practic folosind atributul href, ca în exemplul de mai jos(Exemplul 7.html):

<HTML>

<HEAD>

<TITLE>Tabele</TITLE></HEAD>

<BODY>

<tr>

<td rowspan="5">CICLUL PRIMAR</td>

<td>Clasa pregatitoare</td>

</tr>

<tr>

<td>Clasa a I-a</td>

</tr>

<tr>

<td>Clasa a II-a</td>

</tr>

<tr>

<td>Clasa a III-a</td>

</tr>

<tr>

<td>Clasa a IV-a</td>

</tr>

<td rowspan="5" BGCOLOR = "blue" >CICLUL GIMNAZIAL</td>

<tr>

<td><a href="http://localhost/sitetoparceanu/info_orar.php">Clasa a V-a </a></td> </tr>

<tr>

<td>Clasa a VI-a</td>

</tr>

<tr>

<td>clasa a VII-a</td>

</tr>

<tr>

<td>Clasa a VIII-a</td>

</tr>

</table>

</BODY>

</HTML>

Secvența de mai sus, la rulare, afișează:

În exemplul de mai sus s-a realizat legătura pe text (Clasa a V-a) spre pagina site-ului unde se găsește orarul școlar pentru clasa a V-a.

După cum se observă, atributul href primește adresa completă a paginii către care dorim să facem legătura. Dacă e vorba de un fișier local, din același director cu pagina din care facem legătura, la href este suficient să scriem numele și extensia (de ex: href=”pagina.htm”)

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.

I.3.8. Elemente de structură (HTML, HEAD, BODY)

După cum am văzut în partea introductivă, orice document html este cuprins între tag-urile <HTML> și </HTML>. El este alcătuit dintr-un unic antet (HEAD) și un unic corp (BODY). Aceste 3 elemente au rolul de a defini structura documentului. Din acest motiv ele se mai numesc și elemente de structură.

Tag-ul BODY poate conține următoarele atribute:

background=”fișier_imagine” permite specificarea unei imagini de fundal. Aceasta se va repeta atât pe orizontală cât și pe verticală, până când se acoperă întreaga suprafață necesară corpului;

bgcolor=”culoare” permite specificarea unei culori de fond;

text=”culoare” permite specificarea culorii întregului text cuprins în pagină;

link=”culoare” permite specificarea culorii unui link nevizitat;

alink=”culoare” permite specificarea culorii unui link activ; un link este considerat activ în timpul vizitării și imediat după aceasta;

vlink=”culoare” permite specificarea culorii unui link vizitat, care nu mai este activ.

Conținutul secțiunii <HEAD>

În cadrul acestei secțiuni putem întâlni diverse alte tag-uri. Despre tag-ul <TITLE> am discutat deja, el permițând scrierea unui titlu pentru pagină.

În afară de acestea, vom aminti încă alte 3 tag-uri:

• <BASE> permite stabilirea unei adrese de bază pentru resurse. Acest tag se folosește în special atunci când resursele (sau, în fine, o mare parte a acestora) se găsesc în alt director decât cel în care se află documentul curent. În acest fel, folosirea fișierelor din directorul specificat în BASE se poate face direct prin numele și extensia lor. Specificarea se face prin:

• <META> este folosit pentru a furniza informații motoarelor de căutare. Unele dintre acestea vizitează doar antetul pentru a obține informații. Informațiile conținute de acest element nu sunt afișate de browser, însă este important să îl folosim pentru ca informațiile conținute în site-ul nostru să fie accesibile. Locul tag-ului <META> este în antet (<HEAD>).

Atributele tag-ului <META> sunt name și content. Folosirea lor este ceva mai particulară, rezultând din exemplele următoare:

– pentru a specifica autorul unui document:

– pentru a specifica titlul unui document:

– pentru a preciza cuvintele cheie după care să fie regăsit site-ul:

– pentru a specifica limba în care este scris site-ul:

Există și alte atribute ale elementului META, însă cele două deja prezentate sunt suficiente.

• <STYLE> este utilizat pentru introducerea stilurilor. Acestea permit stabilirea mai amănunțită a modului în care apar, implicit, diferitele elemente din document. Valorile se trec între

<STYLE >…</STYLE Exemplu:

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt;

font-weight: bold;

}

</style>

În cazul exemplului de mai sus fontul cu care va fi deschis textul în browser poate fi unul dintre cele specificate ”Arial, Helvetica, sans-serif”, iar dimensiunea caracterelor să fie de 10, stil îngroșat.

• <SCRIPT> este utilizat pentru introducerea anumitor secvențe de program în cadrul paginilor web. Există mai multe limbaje (numite și limbaje de scriptare) care permite scrierea acestor secvențe, cum ar fi JavaScript, VBscript. Specificarea limbajului în care este codat scriptul se face cu ajutorul atributului language, ca în exemplul de mai jos:

</style>

<"SpryAssets/SpryMenuBar.js"type="text/javascript"> </script>

<linkhref="SpryAssets/SpryTabbedPanels.css"rel="stylesheet" type="text/css" />

Acest exemplu definește în antetul paginii meniul JavaScript capabil să afișeze un meniu vertical.

I.3.9. Frame-uri (Pagini cu cadre)

Paginile cu cadre sunt create cu ajutorul frame-urilor care permite, în cadrul aceleiași, ferestre ale browser-ului să fie afișate simultan mai multe documente HTML

Tag-ul folosit este <FRAMESET> care împărte fereastra în mai multe cadre. În fișierul HTML, el înlocuiește tag-ul <BODY>. Iată câteva atribute ale lui FRAMESET:

rows – descrie liniile în care este împărțită secțiunea FRAMESET respectivă;

cols – descrie coloanele în care este împărțită secțiunea FRAMESET respectivă;

cu descrierile respective de forma:

</FRAMESET>

În exemplu, se definesc 3 cadre orizontale (linii) de înălțimi 30%, 50% respectiv 20% din înălțimea ferestrei. Un alt exemplu, în care înălțimea cadrelor este definită proporțional:

<FRAMESET rows=”3*, 1*, 2*”>… aici se definesc 3 cadre orizontale, proporționale cu 3, 1 și 2 dintr-o înălțime de 3+2+1=6 (deci cadrele vor fi 3/6, 1/6 respectiv 2/6 din înălțimea ferestrei)

Un alt exemplu, în care înălțimea cadrelor este definită în pixeli:

<FRAMESET rows=”100, 200, *”>…

aici se definesc trei frame-uri: unul de înălțime de 100 de pixeli, altul de 200 de pixeli, al treilea fiind alocat cu spațiul rămas.

Tag-ul <NOFRAMES>…</NOFRAMES> reprezintă conținutul care va fi afișat unui vizitator, în cazul în care browser-ul său nu poate afișa cadre (în prezent, nu prea mai este cazul unor asemenea browsere).

Astfel, fiecare tag <FRAMESET>…</FRAMESET> trebuie să conțină descrierile fiecăruia dintre cadrele definite. Acest lucru se face cu ajutorul tag-ului <FRAME> însoțit de atribute:

src – adresa fișierului HTML sau a imaginii care se va încărca inițial în cadru;

marginheight – marginile față de partea de sus și cea de jos, dimensiuni care pot fi specificate în pixeli sau procente;

marginwidth – marginile (în pixeli sau procent) față de partea din stânga și din dreapta;

frameborder – atribut folosit pentru despărțirea unui cadru de altul printr-un chenar. Existența chenarului este data de valoarea implicită 1. Dacă valoarea atributului este 0 înseamnă că acest cadru nu mai este separat de celelalte printr-un chenar.

scrolling – tratează afișarea barei de derulare. Poate lua trei valori: auto – valoarea implicită. Bara de derulare este prezentă numai dacă este valoarea atributului este yes, iar dacă valoarea atributului este no – bara de derulare nu va fi niciodată afișată;

noresize – prezența acestui atribut pentru un cadru nu permite nici redimensionarea cadrelor vecine;

name – este un atribut foarte important. Prin intermediul său poate fi identificat numele frame-ul respectiv. Acest lucru este foarte important, deoarece dintr-un cadru se poate comanda conținutul oricărui alt cadru.

Deschiderea unei pagini într-un anumit cadru, prin intermediul ancorelor, se poate specifica prin folosirea atributului target=”nume cadru” imediat după folosirea atributului href în cadrul tag-ului <A href=”…” .. >.

În imaginea de mai sus este rezultatul rulării Exemplu Frame-uri.html:

<HTML>

<HEAD>

<TITLE>Pagina cu frames</TITLE>

</HEAD>

</FRAMESET>

Browser-ul tau nu este capabil sa afișeze pagini cu frame-uri

</NOFRAMES>

</HTML>

care afișează decât scheletul cadrelor, ele urmând a fi populate inițial, după cum remarcați din codul sursă, cu fișierele Luni.html, respectiv cu fișierul zile.html pentru cel de-al doilea cadru. Documentul html nu poate afișa ceva deoarece cele două fișiere nu există pe disc.

I.3.10. Formulare

Formularele sunt elemente ale limbajului. 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ă capabilă de a răspunde comenzilor și a prelucra datele și anume o componentă PHP.

Un formular este descris prin intermediul tag-ului <FORM>…</FORM>.

Atributele acestuia sunt:

action=”adresa” – acest atribut specifică adresa script-ului care se va ocupa de a răspunde la comenzi și de a prelucra datele;

method – acest atribut specifică modul în care datele vor fi transmise către server. Distinge, două valori pe care le poate lua acest atribut, și anume: get – datele sunt vizibile – acest lucru înseamnă că, în momentul trimiterii lor către server, ele vor apărea scrise în clar, în bara de adresă, într-un anumit format standard și valoarea post – datele nu mai apar în mod explicit utilizatorului dar nu sunt criptate.

Pe lângă componentele specifice, un formular poate conține orice fel de alte elemente valide de HTML – tabele, imagini, text, bare de separare, etc.

În continuare vom prezenta câteva din componentele unui formulare, prin intermediul cărora utilizatorul poate introduce date și trimite apoi aceste date către server. Un atribut foarte important al oricăruia dintre aceste componente este name, deoarece prin intermediul său, server-ul care va primi datele va ști despre care dintre controale este vorba.

Câmpuri text

Permit utilizatorului să introducă date într-un câmp de tip edit (pe o singură linie). Aceste se specifică prin tag-ul <INPUT type=”text” …> care poate fi însoțit de următoarele atribute:

size – specifică lățimea (în număr aprox. de caractere) câmpului text, implicit este considerat ca fiind 20;

maxlength – specifică numărul maxim de caractere ce pot fi scrise în câmpul text. Acest atribut poate primi o valoare mai mare decât cea scrisă la size, caz în care, textul va defila în control (stânga dreapta). Omiterea lui va permite introducerea unui număr foarte mare de caractere (limita diferă de la un browser la altul);

name – numele câmpului text (prin care server-ul va identifica acest câmp, pentru a prelua datele din el;

value – poate specifica o valoare care să fie la încărcarea paginii deja scrisă în cadrul controlului. Dacă omitem acest atribut, câmpul text va fi gol.

Butoane de tip „submit”

Această componenta se prezintă sub forma unui buton. Prin apăsarea sa are loc trimiterea tuturor datelor din formular către script-ul de pe server-ul care le va prelucra.

Un control de tip submit se specifică prin tag-ul: <INPUT type=”submit” …> însoțit de atributele sale sunt:

name – numele de identificare a componentei. Putem omite acest atribut. El se folosește în cazul în care aceluiași formular dorim să-i atașăm mai multe butoane de acest tip, iar apăsarea fiecăruia să producă o acțiune diferită;

value – textul care va fi scris pe buton. De altfel, aceasta va fi și valoarea pe care server- ul o va primi pentru control.

Câmpuri de tip password

Se comportă identic cu câmpurile de tip text. Singura deosebire este că, la scrierea de text în ele, acesta nu va fi vizibil, ci în locul caracterelor introduse se vor afișa asterisc-uri. Totodată, textul dintr-un astfel de control nu poate fi luat cu copy/paste.

Controalele de acest fel se specifică prin tag-ul:

Atributele sunt identice cu cele de la <INPUT type=”text” …>

Câmpuri de tip butoane radio

Sunt controalele care permit ca, dintr-o serie de opțiuni posibile, utilizatorul să aleagă una singură. Controalele de acest fel se specifică prin tag-ul:

Atributele sale sunt:

name – numele de identificare al componentei. Este obligatoriu ca toate butoanele care aparțin aceluiași grup (deci seria de opțiuni din care trebuie aleasă doar una singură posibilă) să poarte același nume de identificare;

value – valoarea pe care o va întoarce butonul respectiv, dacă el a fost cel ales;

checked – dacă acest atribut este prezent, butonul respectiv va fi ales în mod implicit, la încărcarea paginii. Este recomandabil ca, dintre toate butoanele care aparțin aceluiași grup, exact unul singur să conțină acest atribut.

Iată și un exemplu care combină câmpurile unui formulare prezentate până acum (Exemplu Formulare.html):

<HTML>

<HEAD>

<TITLE>Pagina cu frames</TITLE>

</HEAD>

Dupa parcurgerea notiunilor generale de HTML, testati-va nivelul cunostintelor!<BR><BR>

<FORM action="nefunctional.php" method="post"> Introduceti numele

<BR><BR>Alege-ti si o parola

Alege un capitol:<BR><BR>

<INPUT type="radio" name="capitol" value="1"> Inserarea imaginilor<BR>

<INPUT type="radio" name="capitol" value="2"> Liste<BR>

Tabele

<BR>

<INPUT type="radio" name="capitol" value="4"> Formulare<BR><BR>

</FORM>

<font face="Arial " color ="red"> Control de tip selectare</font><BR><BR>

<FORM action="nefunctional.php" method="post"> Alege din lista de mai jos capitolul la care doresti sa sustii testul:<BR><BR>

<BR>

<OPTION value="1">Inserarea imaginilor

<OPTION value="2">Liste

<OPTION value="3" selected>Tabele

<OPTION value="4">Formulare

</SELECT>

</FORM

</HTML>

Care afișează următoarea fereastră:

I.4. Extinderi ale limbajului

Și totuși, noțiunile teoretice prezentate până acum nu sunt suficiente pentru a da finețe și rafinament paginile astfel editate. Astfel limbajului HTML standard este ajutat de extinderi: HTML dinamic și script-uri. Deși HTML-ul clasic permite redactarea unor documente hypertext de un nivel foarte înalt și elaborat, o dată cu evoluția limbajelor de programare vizuale, a început să devină mai puțin atractiv decât a fost la început.

Astfel datorită evoluției din sfera Informaticii, s-a născut DTHML (Dynamic HTML) – care nu este un limbaj în sine, ci un termen prin care sunt desemnate tehnicile utilizate pentru a face paginile web cât mai dinamice și cât mai interactive.

Pe lângă HTML-ul propriu-zis, noile unelte recunoscute de browser-ele din ultima generație sunt CSS (Cascading Style Sheets), JavaScript și DOM (Document Object Model).

Fiind folosite cu arie largă în domeniul paginilor web vom da câteva informații generale despre fiecare.

I.4.1. CSS (Cascading Style Sheets)

Noțiunea de stil este, pentru un document HTML, asemănătoare cu formatarea documentului, spre exemplu, pentru un document Word. Exisă o mulțime de atribute prin care se pot stabili font-urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond și ale literelor, marginile, poziția elementelor, etc.

Pentru a putea gestiona cât mai eficient stilurile, a fost pus la dispoziția programatorilor de pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub numele de CSS (actualmente, vorbim de versiunea CSS2).

Legătura dintre HTML și CSS se realizează prin intermediul tag-ului <STYLE>…</STYLE> care trebuie așezat între <HEAD> și </HEAD>.

În cadrul tag-ului STYLE se stabilește modul de afișare al elementelor paginii. Fiecare element al HTML-ului menționat este identificat, în cadrul CSS-ului de tag-ul care îl gestionează. Spre exemplu, identificatorul CSS pentru paragrafe este P, pentru table este TABLE, pentru imagini este IMG, ș.a.m.d.

Folosind acești identificatori în cadrul unui <STYLE>…</STYLE>, putem face ca toate elementele de același fel din cadrul unui document să arate la fel. Astfel suntem scutiți de a scrie o secvență imensă de cod care s-ar repeta în cazul elementelor de același fel.

Astfel, dacă se dorește, în cadrul paginii html, absolut toate paragrafele să fie scrise cu fontul Comic Sans MS, caractere de 14, culoare albastră, pe fond galben, în loc de a scrie acești parametri la fiecare paragraf din document, este suficient să definim următorul STYLE(Exemplu Style.html):

<HTML>

<HEAD>

<TITLE>Utilizare tag-ului STYLE in HEAD</TITLE>

<STYLE>

P {

background:yellow;

color:blue;

font-family:"Comic Sans MS";

font-size:14pt;}

HR

{text-align:left; width:50%; height:5px; color:red;}

</STYLE>

</HEAD>

<BODY>

<P>ACEST TEXT va fi afisat cu Fontul Comic Sans, culoare albastra, 14 puncte, PE FUNDAL GALBEN</P>

<HR>

Cuvantul "FLOARE" NU SE AFLA IN PARAGRAF

<HR>

<P>Acest text este din nou in cadrul unui paragraf</P>

</BODY></HTML>

Are drept rezultat :

De remarcat faptul că ambele paragrafe, și de asemenea ambele linii orizontale (HR) din cadrul lui BODY nu conțin nici un fel de referință de formatare. Cu toate acestea, definirile lui P și ale lui HR în cadrul lui STYLE au „predefinit” modul în care vor arăta toate paragrafele respectiv toate liniile orizontale ale documentului.

Sintaxa este: Se începe cu identificatorul elementului dorit a fi formatat între acolade trecându-se specificatorii de format (aceștia țin de limbajul CSS) doriți a fi modificați. În cazul de față, avem de-a face cu:

background = culoarea de fundal;

color = culoarea scrisului;

font-familiy = numele font-ului;

font-size = dimensiunea caracterelor;

text-align = alinierea în cadrul unui text;

width = lățimea;

height = înălțimea.

O altă formă de utilizarea a CSS-ului constă în definirea stilurilor cu ajutorul unor identificatori proprii, care se pot aplica ulterior unui anumit paragraf. În acest caz, în cadrul unui style putem defini proprii identificatori, precedându-i de caracterul #. Aplicarea ulterioară a lor asupra unui element, se face specificând un nou atribut, și anume id=”identificator” unde identificator este cel propriu, definit în cadrul lui STYLE.

I.4.2. JavaScript

JavaScript este un limbaj de programare orientat pe obiecte. JavaScript are o sintaxă apropiată de cea a limbajului C și din acest motiv un programator care cunoaște C poate cu ușurință să învețe JavaScript.

Deși acest limbaj are o sferă mai largă de extindere, cel mai des întâlnit este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități, cum ar fi verificare datelor introduse de utilizatori, sau crearea de meniuri ori de alte efecte animate.

Browser-ele rețin în memorie o reprezentare a paginii web sub forma unui arbore de obiecte, punând aceste obiecte la dispoziția JavaScript-ului, care le poate citi și manipula. Acest arbore de obiecte, de care ne vom ocupa în paragraful următor, poartă numele de DOM (Document Object Model).

I.4.3. DOM (Document Object Model)

DOM reprezintă o interfață independentă față de orice limbaj de programare și platformă, care permite programelor informatice și script-urilor să aibă acces sau să actualizeze conținutul, structura sau stilurile unui document. Documentul poate fi apoi prelucrat, iar rezultatele acestor prelucrări pot fi reîncorporate în document atunci când acesta este prezentat.

Înainte de standardizarea DOM-ului, fiecare navigator dispunea de propriul său model. Dacă limbajul de bază destinat manipulării documentelor web a fost repede standardizat în jurul lui JavaScript, nu același lucru se poate spune și despre funcțiile specifice de utilizat și maniera de a parcurge documentul.

Cele două mari browsere care s-au impus (Netscape Navigator și Internet Explorer) denumeau în moduri diferite o serie de componente. În practică, acest lucru obliga programatorul să scrie cel puțin două versiuni ale fiecărui script, dacă dorea ca site-ul său să fie accesibil pentru cât mai multă lume.

Prima încercare de standardizare a aplicației DOM s-a încercat abia în 1998 iar ultimul nivel de standardizare (DOM 3) a avut loc în 2004.

Din punct de vedere dinamizării paginilor web, limbajul JavaScript reprezintă doar o unealtă de lucru. Pentru ca limbajul JavaScript să acționeze asupra conținutului paginii, ei bine, acest lucru îl face tocmai prin intermediul DOM.

Prin intermediul DOM putem accesa orice obiect al paginii web și îl putem face să se comporte exact în felul în care dorim noi.

Ca și în cazul programării vizuale, DOM permite interceptarea anumitor evenimente (poziția mouse-ului, click-uri, etc.) și tratarea lor diferențiată.

I.5. Limbajul PHP – facilități ale acestuia

I.5.1. Introducere – scurt istoric al apariției limbajului PHP; mod de funcționare

PHP este un limbaj de programare destinat în primul rând Internetului, aducând dinamică unei pagini web. Este unul dintre cele mai importante limbaje de programare web open-source și server-side (codul sursă nu se rulează pe calculatorul celui care vizualizează pagina, ci pe serverul web).

Numele său este un acronim recursiv: „Php este un Hypertext Processor”. Limbajul a fost început în 1994 ca o extensie a limbajului server-side Perl, și apoi ca o serie de CGI-uri compilate, de către Rasmus Lerdorf, pentru a genera un curriculum vitae și pentru a urmări numărul de vizitatori ai unui site. A evoluat apoi în PHP/FI 2.0, dar proiectul open-source a început să ia amploare după ce Zeev Suraski și Andi Gutmans au lansat o nouă versiune a interpretorului PHP în vara anului 1998, această versiune primind numele de PHP 3.0. Tot ei au schimbat numele în acronimul recursiv amintit mai sus, până atunci PHP-ul fiind cunoscut ca „Personal Home Page tools”. În prezent este utilizată versiunea 6 a acestui limbaj.

Prin CGI (Common Gateway Interface) se înțelege o interfață a unui server de web, care extinde funcționalitățile acestuia. CGI nu se referă la un anumit limbaj de programare, ci definește un modul standardizat, prezent în cadrul unui server HTTP. Prin intermediul acestui modul se stabilesc regulile prin care server-ul va pasa datele primite de la un utilizator către o aplicație scrisă într-un anumit limbaj de programare, pentru ca apoi să întoarcă rezultatele acestei aplicații înapoi la utilizator.

De regulă se folosește sub formă de secvențe de cod inserate în cadrul unui document HTML. Structura unui script PHP este foarte asemănătoare cu cea a unui cod scris în limbajul C, mai ales în sensul în care structurile de programare au aceeași sintaxă și aceeași funcționalitate.

Rolurile de bază ale unui script PHP constau în aceea că script-ul poate prelua date trimise de către o pagină web de la un client și de a executa o secvență de program în urma căreia va rezulta un cod HTML, cod pe care clientul îl va primi sub forma unei pagini web. Clientul nu va avea acces la codul efectiv al script-ului, ci, prin faptul că acesta se află pe server și se rulează tot pe acesta, va primi direct HTML-ul generat de script.

I.5.2. Rularea limbajului PHP pe un sistem Windows

După cum am văzut în capitolul precedent, PHP nu este un limbaj de programare de sine-stătător ci se folosește în combinație cu HTML, și deci pentru a rula, are nevoie neapărată de un server de web.

Practic, pentru a face ca pe calculatorul nostru să poată rula fișiere php, avem nevoie să instalăm, pe lângă limbajul PHP, și un server de web, și de a face legătura dintre cele două.

Din acest motiv, pentru testarea aplicațiilor pe care le vom studia, vom folosi un pachet gratuit, disponibil pe Internet, numit XAMPP. Acest pachet, foarte simplu de instalat, conține mai multe aplicații. Cele care ne vor interesa pe noi sunt serverul Apache (pentru http), un server de MySQL, și suport pentru limbajul PHP. Cerințele tehnice pentru rularea în bune condiții sunt minimale: practic, pe orice calculator care este capabil să ruleze Windows 2000, XP sau Vista, pachetul XAMPP va rula fără probleme.

Așa cum am anunțat scripturile, codul PHP, nu sunt vizibile clientului, ci acesta vede rezultatul în urma rulării codului.

Înainte de a trece la detalierea limbajului de programare amintim următoarele aspecte:

• un fișier ce conține script-uri PHP se salvează de regulă cu exensia .php;

• orice script PHP este cuprins între tag-urile <?php și ?>;

• instrucțiunea PHP care produce output în pagina HTML este echo;

• rularea unei pagini care conține script PHP se va face întotdeauna prin intermediul serverului de web;

• separatorul dintre instrucțiunile unui script .php este caracterul ”;”, ceea ce ne arată o asemănare cu limbazul de programare C/C++ dar limbajul PHP, spre deosebire de cele două, nu este case-sensitive (deci nu face diferența între literele mari și cele mici) în ceea ce privește cuvintele rezervate ale limbajului (instrucțiunile) respectiv funcțiile (fie că e vorba de cele predefinite ale limbajului, fie că e vorba de cele definite de către utilizator). În schimb, este case-sensitive în ceea ce privește numele de variabile. Astfel, fie că scriem for fie FOR, limbajul va recunoaște instrucțiunea repetitivă cu contor. În schimb, dacă folosim identificatorii $a respectiv $A, va fi vorba de două variabile distincte.

I.5.3. Constante. Variabile. Operatori. Afișarea datelor

1.5.3.1. Constante

Constantele PHP-ului sunt asemănătoare cu ale limbajului C/C++ și sunt:

numerice întregi și reale;

caracter și șir de caractere (”a”, ”\n”, ”Ana are mere”, ’Cici’, ’Mimi’, etc., dar în PHP nu se mai face diferența între un singur caracter și un întreg șir de caractere din punct de vedere al constantelor. Separatorii pot fi atât ghilimelele cât și apostrofurile, rolul lor funcțional fiind puțin diferit. Caracterele speciale sunt: \n, \\, \’, \” și altele.

boolean: false sau true ( fals sau adevărat) păstrându-se convenția că orice valoare diferită de 0 este echivalentă cu true.

Definirea constantelor de către utilizator, în sensul că prin anumiți identificatori putem folosi valori constante, se face cu ajutorul funcției define. Forma generală a acesteia este: define(”nume constanta”, valoare).

1.5.3.2. Variabile

În PHP identificatorii rezervați variabilelor încep cu caracterul ”$” care este urmat fie de o literă sau liniuța de subliniere (”_”), iar în rest pot fi folosite și cifrele. În PHP tipul variabilele este declarant atunci când aceasta este folosită.

Exemplu:

<?php

$a=4+5.5;// se evalueaza expresia din dreapta.Rezultatul 9.5 este real. In urma atribuirii este creata variabila $a, de tip real

echo "Valoarea din variabila a este:",$a,"<BR>\n";

$b="Ana are mere";//Se creeaza variabila $b, de tip string

$a=$b;//Modificam variabila $a, dindu-i continutul lui $b. Acesta fiind de tip string, se modifica si tipul variabilei $a, de la real la string.

echo "Noua valoare din variabila a este: <B><FONT color=\"red\">",$a;

echo "\n</FONT></B>"; //in plus, am mai imbogatit afisarea, folosind tag-urile pentru scris bold si cel pentru caractere de culoare rosie

?>

1.5.3.3. Operatori

Mulți dintre operatorii limbajului PHP sunt și din alte limbaje de programare, motiv pentru care vom prezenta doar anumite particularități specifice limbajului PHP.

Iată câteva dintre acestea în ordinea descrescătoare a gradului de prioritate a lor: !, ++, –, (int), (double), (string); *, %, / ; <, <=, > , >=; ==, !=, ===, !==; &; ^; &&; ?:;=, +=, -=, /=, *=, %=, &=, |=, ^=; And; Xor; Or; ,;

Înstrucțiunea folosită cel mai des pentru afișare este instrucțiunea echo, care are două forme:

a) scrierea între paranteze rotunde a textului care urmează a fi afișat: echo(”Mergem în excursie”);

b) datele afișate sunt scrise după echo, fără a fi grupate între paranteze și separate prin virgule: echo ”Mergem ”, 1+2, ”în excursie”;

O altă instrucțiune folosită pentru afișare este print După ea urmează o singură dată, care poate fi sau nu pusă între paranteze. Funcționează ca și echo, în plus, în cazul în care folosim forma cu paranteze, va întoarce valoarea true dacă afișarea a fost făcută cu succes, respectiv false în caz contrar.

Alte instrucțiuni folosite în special atunci când dorim să depanăm un program sunt var_dump(expresie) care afișează tipul expresiei urmat de valoarea sa și print_r(variabila) pentru variabile compuse.

I.5.4. Instrucțiuni

Instrucțiunile limbajului PHP sunt asemănătoare celor din C/C++.

I.5.4.1. Instrucțiunea expresie

Instrucțiunea expresie ($x=$x*10) folosită pentru atribuiri și calcule;

I.5.4.2 Instrucțiunea compusă

Instrucțiunea compusă care are rolul de a grupa mai mult instrucțiuni astfel încât să aibă același rol sintactic și sunt cuprinse între {}.

I.5.4.3 Instrucțiunea if

Instrucțiunea if are sintaxa:

if(expresie) instrucțiune_1;

else instrucțiune_2;

și se va executa instrucțiune_1 sau instrucțiune_2 în funcție de rezultatul evaluării expresie, adică dacă expresia are valoare de adevăr (sau diferită de 0) se va executa instrucțiune_1, în caz contrar se va executa instrucțiune_2. Dacă instrucțiune_1 și instrucțiune_2 conțin cel puțin două instrucțiuni, acestea se vor grupa în instrucțiune bloc.

Iată un exemplu care extrage dintr-o variabilă a, unde a este și parametru de intrare, de exact 4 cifre, primele două cifre și le depune ăntr-o altă variabilă b iar ultimele două cifre într-o variabilă c. Inițial se testează variabila daca are exact 4 cifre. În caz afirmativ se execută instrucțiunile de extragere, altfel se afișează un mesaj corespunzător.

<?php

$a=1425;

echo 'Valoarea din variabila $a este : ',$a,"<BR>";

if($a>=1000&&$a<=9999)

{

$b=(int)($a/100);

$c=$a%100;

echo "Primele doua cifre ale sale sunt : ",$b,"<BR>";

echo "Ultimele doua cifre ale sale sunt : ",$c,"<BR>";

}

else

echo "Valoarea din variabila a NU are exact 4 cifre!<BR>";

?>

I.5.4.4 Instrucțiunea while

Are următoarea sintaxă:

While (expresie) instrucțiune;

Principilu de funcționare al acesteia este următorul: se evaluează expresie și dacă valoarea acesteia este adevărată se execută instrucțiune după care se revine la testarea valorii de adevăr a expresiei. Dacă valoarea de expresiei nu s-a modificat se execută instrucțiunea aferentă, alfel se termină execuția instrucțiunii repetitive while și se execută următoarea linie de program din codul sursă.

Exemplu:

< ? php

$a = 1425;

echo 'Valoarea din variabila $a este : ',$a,"<BR>";

while($a)

{

$r=$a%10;

$a=(int)($a/10);

echo $r," ";

}

?>

Secventa de cod afișează în ordine inversă cifrele numărului a despărțite prin spațiu. Cât timp valoarea din a este nenulă are loc extragerea unei cifre care este memorată în variabila $r și se înlocuiește valoarea din $a cu câtul obținut. La final se afișează în variabila $r valoarea obținută.

I.5.4.5 Instrucțiunea do…while

Are următoarea sintaxă:

Do

Instrucțiune;

While (expresie);

La această instrucțiune principiul este altul: mai întâi se execută instrucțiunea care urmează lui do și apoi se evaluează expresia. Dacă rezultatul evaluării este fal se termină execuția cicluluiși se execută instrucțiunea care urmează după acesta. În cazul în care este adevărată se reia executarea instrucțiunii.

Reluând exemplul de mai sus în cadrul acestei instrucțiunii va arata astfel:

< ? php

$a = 1425;

echo 'Valoarea din variabila $a este : ',$a,"<BR>";

do

{

$r=$a%10;

$a=(int)($a/10);

echo $r," ";

} while($a);

?>

I.5.4.6 Instrucțiunea for

Are aceeași formă și funcționalitate ca și în limbajul C/C++:

for (expresieinițializare;expresiecontinuare;expresieincrementare) instrucțiune;

Scopul acestei instrucțiuni este de a atribui valori, rând pe rând, unui contor cuprinse între două limite. Principiul de executare al acestei instrucțiuni poate fi ușor întele prin următorul raționament:

expresieinițializare;

while(expresiecontinuare)

{

instrucțiune;

expresieincrementare;

}

Exemplu: Scrieți secvența care calculează suma primelor n numere naturale în variabila s.

<?php

$n=10;

$s=0;

echo 'Valoarea din variabila $n este : ',$n,"<BR>";

for($i=1;$i<=$n;$i++)

$s+=$i;

echo "Suma primelor $n numere naturale este $s<BR>";

?>

I.5.5. Formulare

Formularele sunt mijloacele prin care se transmit date către serverul HTML. Aceste date pot fi preluate de scripturile din HTML și folosite în cadrul programelor. Fie următorul exemplu de creare a unui formular:

<html>

<body>

Name: <input type="text" name="name"><br>

E-mail: <input type="text" name="email"><br>

</body>

</html>

Rezultatul acestui cod în browser este:

Atributul action al tag-ului form se referă la numele fișierului PHP care se va ocupa de prelucrarea datelor iar atributul method de metoda prin care sunt trimise datele către server.

Tag-ul <input type=”text”…> creează un câmp de date de tip text. Atributul name al acestuia specifică un identificator care permite PHP-ul să preia datele.

Tag-ul <input type=”submit”…> creează un buton de trimitere a datelor. Practic, apăsarea pe acest buton permite trimiterea conținutului întregului formular către server.

Preluarea datelor trimise către server prin intermediul metodei POST, în cadrul unui script PHP se face prin intermediul vectorului predefinit $_POST[’nume_câmp_din_formular’]. De exemplu, în cazul nostru, putem recupera această valoare prin intermediul lui $_POST[’name’].

Analog, dacă datele ar fi trimise către server prin intermediul metodei GET în cadrul script-ului PHP asociat, preluarea lor se face prin intermediul vectorului predefinit $_GET[’nume_câmp_formular].

Iață și secvența aplicației care conține adresele de email adrese_get.php, scriptul PHP pe care l-am scris în atributul action al formularului html de mai sus. Ambele aplicații trebuie să se regăsească în același director. Scriptul preia valoarea câmpului text din form:

<html>

<body>

Adrese <?php echo $_GET["name"]; ?><br>

Adresa de email este: <?php echo $_GET["email"]; ?>

</body>

</html>

Același principiu de preluare a datelor se folosește și în cazul unui input de tip password (ascunsă sau vizibilă). În cazul unui input de tip submit, valoarea se poate prelua doar în cazul în care, în cadrul tagului <input type=”submit”…> apare și atributul name.

Totuși, în cazul în care un formular are două sau mai multe butoane de tip submit, cărora vrem să le asignăm funcții diferite, este foarte important să știm care dintre ele a fost apăsat.

Iată și un astfel de exemplu: un formular ce conține două câmpuri text, în care introducem valori numerice. În funcție de controlul submit pe care-l apăsăm, al doilea fișier va prelua datele și va calcula fie produsul fie suma celor două valori numerice:

Iată și aplicația din care se va prelua datele și se vor efectua operațiile afișate pentru cele două valori introduse de la tastatură:

<?php

$op=$_POST['operația'];//controlul cu numele 'operația' este butonul de submit se preia valoarea sa în variabila $op, pentru a vedea care dintre butoane a fost apăsat

$a=$_POST['cta'];//preluăm și cele două valori numerice din cîmpurile text cu numele cta si ctb

$b=$_POST['ctb'];

echo "S-au preluat valorile urmatoare: a=$a si b=$b<br>"; //in funcție de valoarea lui "op" calculam suma sau produsul

if($op=="Suma")

echo "Suma celor doua este ",$a+$b;

else

echo "Produsul este",$a*$b;//se afișează valoarea calculată

?>

În PHP există următoarele tipuri de controale:

de tip radio; în acest caz toate tag-urile de tipul <input type=”radio”…> trebuie să aibă la atributul name același nume, iar la atributul value valori diferite, prin care vom identifica opțiunea aleasă. Această valoare va fi trimisă către PHP. În exemplul de mai jos

Scripul din PHP care ajută la preluarea datelor este:

<?php

$op=$_POST['op']; //controlul cu numele 'op' este grupul de butoane radio.

//preluăm valoarea sa în variabila $op, pentru a vedea care opțiuni a fost aleasă

$a=$_POST['cta']; //preluăm și cele doua valori numerice

$b=$_POST['ctb']; //din câmpurile text cu numele cta și ctb și le afișăm

echo "S-au preluat următoarele valori a=$a si b=$b<br>";

// în funcție de valoarea care s-a preluat pentru "op" se efectuează operația

{

case 1:

echo "Suma este;",$a+$b;

break;

case 2:

echo "Diferența este:",$a-$b;

break;

case 3:

echo "Produsul este:",$a*$b;

break;

default:

echo "Citul este:",$a/$b;

}

?>

de tip checkbox; fiecare control de acest tip are un nume separat și atunci este bifat trimite către PHP valoarea indicată în atributul value a tag-ului <input type=”checkbox”…> (ca șir de caractere). Dacă acest atribut nu este prezent, valoarea trimisă către PHP va fi șirul de caractere „on”. În schimb, dacă nu este bifat, nu are nici un efect, iar cererea $_POST[…] poate să genereze un warning. Pentru ca acest lucru să nu se întâmple, indiferent de setări, așa cum am anunțat mai înainte, folosim caracterul @ în fața cererii $_POST[…].

În următoarea secvență de script vom prezenta și un astfel de exemplu:

<tr><td>Alege nuanța pentru material:

<input type="checkbox" name="N">Negru<br>

</table>

</form>

Scriptul PHP:

<?php

$en=@$_POST['R'];

$fr=@$_POST['N'];

$ge=@$_POST['A'];

$it=@$_POST['L'];

$es=@$_POST['C'];

$l=0; //$l este un flag pe care-l facem 1 când dăm de o culoare bifată

echo "Culoarea bifată este:<br>";

if($R=="on") {echo "Roșu<br>";$l=1;}

if($N=="on") {echo "Negru<br>";$l=1;}

if($A=="on") {echo "Alb<br>";$l=1;}

if($L=="on") {echo "Lila<br>";$l=1;}

if($C=="on") {echo "Crem<br>";$l=1;}

if($l==0) //daca flag-ul a rămas 0, se va returna un mesaj prin care este

// anunțat că nu a fost bifată nici o culoare

echo"Nu ai bifat nici una nici o culoare!";

?>

Controale de tip select simplu; în astfel de cazuri PHP-ul va putea recupera valoarea cu ajutorul numelui stabilit în atributul name al tag-ului <select …>, valoarea trimisă fiind cea stabilită în atributul value al tag-urilor option înglobate în cadrul select-ului. Iată un astfel de exemplu care reia ideea celui prezentat la butoanele radio, mai sus, dar alegerea fiind făcută prin intermediul controlului select.

Exemplu:

<tr><td align="right">Introdu o valoare numerica:

<tr><td align="right">Introdu o alta valoare numerica:

<tr><td colspan="2">Alege operatia pe care doresti<br>

sa o faci cu cele doua:

<option value="1">Suma

<option value="2">Diferenta

<option value="3">Produsul

<option value="4">Citul

</select><tr><td colspan="2" align="center">

Scripul operații. php din PHP corespunzător este:

<?php

$op=$_POST['op']; //controlul cu numele 'op' este grupul de butoane radio.

//preluăm valoarea sa în variabila $op, pentru a vedea care opțiuni a fost aleasă

$a=$_POST['cta']; //preluăm și cele doua valori numerice

$b=$_POST['ctb']; //din câmpurile text cu numele cta și ctb și le afișăm

echo "S-au preluat următoarele valori a=$a si b=$b<br>";

// în funcție de valoarea care s-a preluat pentru "op" se efectuează operația

{

case 1:

echo "Suma este;",$a+$b;

break;

case 2:

echo "Diferența este:",$a-$b;

break;

case 3:

echo "Produsul este:",$a*$b;

break;

default:

echo "Câtul este:",$a/$b;

}

?>

Dacă controlul de tip select este multiplu, form-ul va trimite către PHP un șir în care vom regăsi valorile selectate. Este obligatoriu, totuși, ca atributul name din cadrul tag-ului <select multiple …> să specifice faptul că ceea ce se transmite este un șir. Acest lucru se face punând un set de paranteze pătrate după numele câmpului, deci de forma name=”nume_sir[]”. Preluarea în PHP se face în mod normal prin @variabila=@$_POST[’nume_sir’] (remarcați faptul că nu se mai pun []). Acest șir va conține pe post de elemente valorile stabilite prin atributul value ale opțiunilor selectate. Șirul va începe de la indicele 0, numărul său total de elemente fiind dat de funcția count(nume_șir).

Un astfel de control este arătat în exemplul următor:

<tr><td>Alege, dintre ce cele de mai jos,<br> culorile preferate.<br> Poți selecta mai multe culori, dacă dorești, ținând apăsata tasta CTRL <br>

<option value="R">Roșu

<option value="N">Negru

<option value="A">Alb

<option value="L">Lila

<option value="C">Crem

</select>

</table>

</form>

Scriptul corespunzător de preluare a datelor în formular:

< ? php

$lang=$_POST['lang'

$nl=count($lang); //apelam functia count pentru a vedea câte elemente are sirul

if($nl==0)

echo "Nu ai selectat nici o culoare<br>";

else

{

echo "Ai selectat $nl culori. Acestea sunt:<br>";

for($i=0;$i<$nl;$i)

switch($lang[$i])

{

case "R":echo Roșu<br>";break;

case "N":echo "Negru<br>";break;

case "A":echo "Alb<br>";break;

case "L":echo "Lila<br>";break;

default:echo "Crem<br>";}

}

?>

I.5.6. Funcții

Funcțiile limbajului PHP sunt asemănătoare celor din C/C++. Revenind la un exemplu anterior, care calcula suma cifrelor unui număr, îl vom relua utilizând o funcție care calculează și întoarce suma unui număr întreg pe care îl primește ca parametru:

< ? php

function suma_c($n) // antetul funcțiiei unde apare cuvântul cheie “function”

{

$s=0;

while($n)

{

$s+ = n %10;

$n=(int)($n/10); // deoarece operatorul “/” returnează câtul real îl convertim

// în număr întreg folosind “int”

}

return $s;

}

echo suma_c(13254);

?>

De remarcat este:

pentru a întoarce un rezultat din corpul unei funcții, se folosește, așa cum deja am văzut, instrucțiunea return cu forma sa generală: return expresie;

dacă este utilizată o funcție care nu întoarce rezultat, cuvântul cheie function rămâne obligatoriu fără a face alte specificații, putând să apară oriunde în cadrul funcției cuvântul cheie return fără a mai fi urmat de vreo expresie, având ca efect ieșirea imediată din funcție. El poate fi, de asemenea, omis, ieșirea din funcție producându-se în acest caz în mod natural (după executarea întregului său cod).

În cazul în care parametrii sunt specificați folosind doar numele variabilei, acestia sunt cei transmiși prin valoare. Chiar dacă valoarea unui astfel de parametru este schimbată în cadrul funcției, ea rămâne totuși neschimbată după executarea acesteia. Atunci când apelăm funcția, pe pozițiile acestor parametri se pot transmite atât valori cât și conținut de variabile. Următoarea secvență afișează valoarea variabilei de dinainte de apelul funcției (10) chiar dacă în funcție s-a încercat modificarea valorii transmise:

<?php

function test($x)

{

$x=$x*2;

}

$a=10;

test($a);

echo $a;

?>

Dar, parametrii, pot fi specificați și prin referință. În acest caz ei sunt precedași de caracterul & în antetul funcției. Dacă valoarea unui astfel de parametru este modificată în cadrul funcției, ea rămâne modificată și după executarea acesteia. Evident, atunci când apelăm funcția, pe pozițiile acestor parametrii e obligatoriu să specificăm variabile.

Reluăm exemplul anterior, punând un & (ampersand) în fața parametrului $x. În acest fel, valoarea variabilei după ce apelăm funcția va fi cea obținută în urma modificării (20):

<?php

function test(&$x)

{

$x=$x*2;

}

$a=10;

test($a);

echo $a;

?>

Analog C/C++ variabilele suntde două tipuri: variabile locale și variabile globale, în funcție de domeniul de vizibilitate. Cele globale sunt cele definite în afara oricărei funcții și nu pot fi adresate din corpul funcțiilor. Dacă totuți se dorește utilizarea în cadrul funcției a acestora, le specificăm pe toate, precedate de cuvântul cheie global. Variabilele locale sunt variabilele create în corpul unei funcții sau cele create prin transmiterea parametrilor formali (din antetul funcțiilor). Ele nu sunt recunoscute în afara funcțiilor. Și în PHP putem avea funcții recursive.

Pentru a nu încărca foarte mult un anumit cod de program, putem îngloba toate definițiile complete ale funcțiilor într-un singur fișier de tip text. Mecanismul includerii este unul asemănător cu cel din C/C++ (clauza #include…) cu deosebirea că, putem include codul sursă al funcțiilor în orice loc dorim. Acest lucru se face cu ajutorul funcției predefinite PHP: require(”nume_fisier”)și codul sursă al funcțiilor trebuie inclus și el între tag-urile <?p …?>.

Limbajul PHP conține, și el, biblioteci care conțin numeroase funcții. Vom enumera cele mai cunoscute și uzuale funcții, întâlnite și în alte limbaje de programare:

– abs(număr) – întoarce modulul numărului (valoarea absolută);

– sin(x), cos(x), tan(x) – sinusul, cosinusul și tangenta unui unghi, exprimat în radiani;

– exp(x) – întoarce ex ;

– pow(x, y) – întoarce xy ;

– log10(x), log(x) – întorc log10(x), respectiv ln(x);

– max(x1, x2, … , xn) – întoarce maximul dintre argumentele sale numerice;

– min(x1, x2, … , xn) – întoarce minimul dintre argumentele sale numerice;

– ceil(x) – întoarce cel mai mic nr. întreg care este mai mare sau egal cu x;

– floor(x) – întoarce cel mai mic nr. întreg mai mare sau egal cu x (partea întreagă d.p.d.v. matematic);

– pi() – întoarce o aproximație a numărului π;

– sqrt(x) – calculează radicalul lui x.

I.5.7. Șiruri de caractere

În PHP șirurile de caractere sunt considerate ca și variabilele de sine stătătoare și nu este permisă atribuirea directă între două șiruri de caractere. Din punct de vedere structural, în PHP șirurile de caractere nu mai respectă regulile din C/C++ (și în special, NU mai este valabilă marca sfârșitului de string prin caracterul de cod ASCII 0), în schimb, limbajul ne pune la dispoziție o serie de funcții care fac foarte simplă prelucrarea și manipularea stringurilor. În rest, șirurile se memorează ca o succesiune de caractere ASCII. Putem adresa fiecare caracter al șirului prin indicele său, la fel ca în C/C++, începând de la 0. Iată câteva funcții care prelucrează șiruri:

Funcția strlen(șir) ne întoarce lungimea șirului;

Funcția strpos(sir1, sir2, [poz_start]) caută dacă sir2 este subșir al lui sir1 începând de la poziția poz_start, dacă aceasta este specificată. În caz afirmativ, întoarce poziția de început a acestuia, altfel întoarce false. Exemplu de mai jos

$s="computer";

echo strpos($s,"pu");

se va afișa valoarea 3 (pentru că la indicele 3 este găsită secvența ”pu”.

Funcția se utilizează și pentru a testa dacă un șir include sau nu un anumit subșir. Dacă subșirul este găsit, funcția întoarce poziția de început a acestuia iar dacă nu, întoarce false. După cum știm, valoarea lui false este, de fapt, 0. Pentru a diferenția cazurile în care subșirul nu apare deloc în șir sau apare chiar de la poziția 0, folosim operatorul ===, care rezolvă corect problema:

$s="ana are mere";

$gasit=strpos($s,"a");

if($gasit===false) echo "Negasit";

else echo "Gasit la indicele ",$gasit;

Valoarea întoarsă de funcție este reținută de variabila $gasit. Pentru a face diferență între false și 0, folosim operatorul ===, care testează coincidența atât ca valoare, cât și ca tip. De altfel, acesta este și rostul unui astfel de operator. Este un procedeu folosit și pentru multe alte funcții.

• Funcția strstr(sir1, sir2) returnează din sir1 secvența de caractere din poziția în care a fost găsită prima apariție a lui sir2, dacă sir2 este subșir pentru sir1 sau false, în caz contrar.

• Funcția strcmp(sir1, sir2) compară alfabetic sir1 cu sir2. Funcția va returna o valoare: pozitivă, dacă sir1 se găsește lexicografic după sir2 (sir1 > sir2); nulă (0), dacă sir1 este identic egal cu sir2; negativă, dacă sir2 se găsește lexicografic înainte de sir1 (sir1< sir2). Pot fi folosiți și operatorii relaționali pentru a compara șirurile în sens lexicografic rezultatul fiind true sau false. În cazul comparației se face diferență între litere mari și cele mici.

Funcția substr(sir, indice, [lungime]) întoarce subșirul șirului șir, care începe în poziția indice și are lungimea lungime. Dacă lungimea lipsește, se întoarce șirul care începe în poziția indice și ține până la sfârșitul șirului șir.

Un exemplu care înlocuiește subșirul “are” cu “posedă”, deci va fi afișat șirul “Ana posedă mere”.

<?php

$x= “Ana are mere”

echo substr_replace($s, “poseda”, 4,3);

?>

Funcția strtoupper(sir) întoarce șirul rezultat prin conversia caracterelor scrise cu litere mici, la litere mari, iar funcția strtolower(sir) are efect invers.

În PHP șirurile (masive) nu se declară. În cazul în care dorim să creăm un astfel de șir, pur și simplu se atribuie valori elementelor. Dacă unui element nu i s-a atribuit o valoare acel element va avea valoare nulă. Indici folosiți aici nu sunt neapărat consecutivi. Fiind u limbaj mai permisiv, în PHP șirurile pot primi indici chiar și șiruri de caractere. Acest fel de tablou se numește tablou asociativ. De exemplu, putem crea un șir în care să reținem pe post de indici denumirile unor produse, iar pe post de indici prețurile acestora:

<?php

$x['Piine']=1.61;

$x['Vin']=5.99;

$x['Alune']=2.21;

$x['Ciocolata']=2.69;

Echo $x[‘Piine’],’ ’,$x['Vin'],' ' , $x['Alune'],’ ', $x['Ciocolata'];

?>

În parcurgerea unui astfel de șir nu se mai folosesc regulile clasice, ci există o instrucțiune specială de ciclare ce permite parcurgerea vectorului în ordinea în care elementele au fost create:

foreach(vector as indice=>valoare)

instrucțiune;

În prelucrarea acestui tip de șiruri se folosesc și funcții:

Count(vector) întoarce numărul de elemente al vectorului;

Courrent(vector) afișează valoarea din elementul curent al vectorului;

key(vector) afișează indicele elementului curent al vectorului.

Cele două funcții current și key afișează valoarea false dacă pointerul a trecut de unul dintre capete sau vectorul este nul. Din cauză că valoarea 0 sau ”” pot fi valori valide pentru șir, pentru a testa dacă funcția a întors valoarea false, trebuie utilizat operatorul ===.

Next/prev(vector) deplasează pointerul pe elementul următor, respectiv, anterior al vectorului;

reset/end(vector) deplasează pointerul pe primul, respectiv, ultimul element al vectorului;

asort/arsort(vector) sortează crescător, respectiv, descrescător vectorul după valorile reținute de fiecare element.

ksort/krsort(vector) sortează crescător, respectiv, descrescător vectorul după indicii fiecărui element.

sort/rsort(vector) sortează crescător, respectiv, descrescător vectorul după valorile elementelor vectorului.

I.5.8. Upload de fișiere

Reprezintă acțiunea prin care utilizatorul poate încărca prin intermediul unei pagini web, un întreg fișier pe server-ul pe care este stocată și pagina respectivă. Această acțiune este posibilă cu ajutorul FTP – ului (File Transfer Protocol), care deși este o metodă eficientă de transfer. Avantajul adus de upload-ul prin intermediul unei pagini web constă în faptul că este ușor de folosit de către orice utilizator al internetului, cel care face operația având nevoie doar de câteva cunoștințe minimale de utilizare a calculatorului. O operație de upload des întâlnită este aceea de atașare a unui fișier la un e-mail. Astfel, trebuie conceput, un form în care sunt inserate mai multe elemente de tip <input type=”file”…>. Rezultatul sunt niste casete de tipul textbox lângă care apare butonul “Browse…” . Un click în interiorul textbox-ului sau pe butonul ”Browse” va permite alegerea unui fișier pentru a fi încărcat.

În etapa următoare, după ce utilizatorul apasă, tot în acel form, butonul de postare date, fișierul ales pentru upload va fi trimis către server, tot prin intermediul unui script (cel specificat în cadrul atributului ”action=…” al formularului) și copiat într-o locație temporară. Treaba programatorului PHP este ca el să copieze fișierul la locația sa definitive, apoi este copiat în locația definitive de programatorul PHP. Trebuie precizat că, pentru funcționarea upload-ului, cele două directoare de destinație ale acestuia trebuie să aibă drepturi de scriere pentru orice utilizator de internet.

În cadrul script-ului PHP care se ocupă de preluarea fișierului încărcat, ne vom folosi de un masiv predefinit al limbajului, și anume $_FILES, care ne va furniza date despre fișierul încărcat, și anume (primul parametru al lui $_FILES este dat de numele input-ului de type=”file”):

$_FILES[nume_input][‘name’] – ne întoarce numele și extensia fișierului pe care l-am încărcat;

$_FILES[nume_input][‘tmp_name’] – redă numele complet fișierului temporar care s-a creat în urma upload-ului, nume care poate fi complet diferit de cel al originalului.

$_FILES[nume_input][‘type’] – ne întoarce tipul al fișierului (de exemplu: application/octet-stream sau image/gif);

$_FILES[nume_input][‘size’] – ne întoarce dimensiunea fișierului încărcat în octeți;

$_FILES[nume_input][‘error’] – dă codul de eroare al operației de upload asupra fișierului dat de nume_input. Dacă operația s-a încheiat cu succes, are valoarea 0.

Exemplu:

<?php if($_FILES['fisier_incarcat']['error']!=0)

echo 'Upload nereusit, a aparut o eroare';

else

move_uploaded_file($_FILES['fisier_incarcat']['tmp_name'],

$_FILES['fisier_incarcat']['name']);

echo 'Fisierul a fost incarcat<br>';

echo 'Dimensiunea sa este de ',$_FILES['fisier_incarcat']['size'],' octeti'; }

?>

Functia move_uploaded_file are rolul de a muta șișierul fisierul de la locatia sa temporară la locatia definitivă. Parametrii acestei funcții sunt: sursa și destinația.

Îmbinând noțiunile teoretice prezentate până acum a rezultat aplicația Web care prezintă Școala Gimnazială George Topârceanu – Mioveni.

Aplicația este structurată astfel:

header

left

right

contents

footer

Partea de header conține sigla și banner-ul școlii. Codul sursă care face posibilă afișarea aplicației editat în Notepad ++ este:

Partea de left a aplicației conține meniuri din pagina web create cu ajutorul aplicației Adobe Dreamweaver astfel:

Meniul ales a fost de tip Vertical rezultând următoarea imagine:

Codul sursă:

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

</style>

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt;

font-weight: bold;

}

</style>

<body>

<!– end .sidebar1 –>

<li><a href="index.php">Prima pagina</a> </li>

<li><a href="desprenoi.php">Despre noi</a></li>

<li><a href="#">Anunturi</a>

<ul>

<li><a href="noutati.php">Anunturi</a></li>

<li><a href="oferta_achizitii.php">Achizitii</a></li>

<li><a href="oferta_concursuri.php">Proiecte si concursuri</a></li>

</li></ul></li>

<li><a class="MenuBarItemSubmenu" href="#">Oferta noastra</a>

<ul>

<li><a href="oferta_bazamateriala.php">Baza materiala</a></li>

<li><a href="oferta_cp.php">Clasa pregatitoare</a></li>

<li><a href="oferta_clase.php">Clase</a></li>

<li><a href="#" class="MenuBarItemSubmenu">Oferta educationala</a>

<ul>

<li><a href="oferta_oferta_2013-2014.php">Oferta 2013-2014</a></li>

<li><a href="oferta_oferta_cds.php.">Curriculum la Decizia Scolii 2013-2014 </a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Resurse umane</a>

<ul>

<li><a href="resurse_organigrama.php">Organigrama</a></li>

<li><a href="resurse_conducere.php">Conducerea</a></li>

<li><a href="resurse_personaldidactic.php">Personal didactic</a></li>

<li><a href="resurse_personalauxiliar.php">Personal didactic auxiliar</a></li>

<li><a href="#" class="MenuBarItemSubmenu">Cabinete</a>

<ul>

<li><a href="oferta_cabinet_medical.php">Cabinet medical</a></li>

<li><a href="oferta_cabinet_consiliere.php">Consiliere psiho-pedagogica</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="asociatia_de_parinti.php">Asociatia de parinti</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">Elevi</a>

<ul>

<li><a href="elevi_sefipromotie.php">Sefi de promotie</a></li>

<li><a href="elevi_consiliu.php">Consiliul elevilor</a></li>

<li><a href="elevi_rezultate.php">Rezultate deosebite</a></li>

</ul>

</li>

<li><a href="proiecte.php">Proiecte</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">Informatii utile</a>

<ul>

<li><a href="info_secretariat.php">Program secretariat</a></li>

<li><a href="info_biblioteca.php">Program biblioteca</a></li>

<li><a href="info_auxiliar.php">Program laboratoare</a></li>

</ul>

</li>

<li><a href="galerie.php">Galerie foto</a></li>

<li><a href="arhiva_site/index.html" target="_blank">Arhiva 2011-2013</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

<p></p>

<p> <strong>Legaturi utile</strong></p>

<li><a href="http://www.edu.ro" title="men" target="_blank">Ministerul Educatiei Nationale</a></li>

<li><a href="http://www.didactic.ro" title="didactic" target="_blank">Didactic</a></li>

<li><a href="http://www.isjarges.ro/" title="isj" target="_blank">ISJ Arges</a></li>

<li><a href="http://www.ccdg.ro/" title="ccdg" target="_blank">Centrul Carpato Danubian de Geoecologie</a></li>

<li><a href="http://www.mmediu.ro/beta/" title="mmp" target="_blank">Ministerul Mediului si Padurilor</a> </li>

</ul>

</div>

<!– end .sidebar1 –>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

Partea de contents conține o galerie foto. Codul conține obiecte de tip WS Gallery create cu aplicația WebStuning.com.

Footer-ul conține div-ul cu un text ce conține motto-ul rezultat din distincția internațională “Steagul Verde” și, implicit, titlul de “Eco-Școală” primite de școală începând cu anul 2007.

Ultima parte, right-ul conține un carusel cu imagini din orașul unde se află școala.

În site este prezentă școala cu istoricul ei, oferta educațională, clasele și cadrele didactice, proiecte și concursuri organizate de școală, orarul elevilor și orarul cabinetelor din unitate, premii obținute de copii la diverse concursuri școlare, precum și o galerie foto de la diverse activități școlare.

În imaginea de mai jos este orarul claselor creat cu ajutorul opțiunilor din meniul Inserare SpryAsset TabbedPanels și Spry.Widget.MenuBar.

O parte din codul sursă al creării orarului este prezentat mai jos:

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

<head>

<title>Scoala Gimnaziala George Toparceanu Mioveni</title>

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background: #42413C;

margin: 0;

padding: 0;

color: #000;}

padding: 0;

margin: 0;}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0; padding-right: 15px;

padding-left: 15px; }

a img {

border: none;}

a:link {

color: #42413C;

text-decoration: none; }

a:visited {

color: #6E6C64;

text-decoration: underline;}

a:hover, a:active, a:focus { text-decoration: none;}

.container {

width: 960px;

background: #C6D580;

margin: 0 auto; }

.header {

background: #ADB96E;

width: 960px;}

.sidebar1 {

float: left;

width: 180px;

padding-bottom: 10px;

background-color: #ADB96E;}

.content {

padding: 10px 0;

width: 600px;

float: left;

}

.sidebar2 {

float: left;

width: 180px;

padding: 10px 0;

background-color: #C6D580;

}

ul.nav {

list-style: none; /* this removes the list marker */

border-top: 1px solid #666;

margin-bottom: 15px; /* this creates the space between the navigation on the content below }

.nav1 {

margin-bottom: 15px; font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: normal;

border-top-width: 1px;

border-top-style: dotted;

border-top-color: #666;

list-style-image: none;

list-style-type: disc;

padding-left: 20px;

text-decoration: none;

}

ul.nav li {

border-bottom: 1px solid #666;

margin-right: auto;

}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */

padding: 5px 5px 5px 15px;

display: block; width: 160px text-decoration: none;

background: #C6D580;}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background: #ADB96E;

color: #FFF;}

.footer {

padding: 10px 0;

position: relative;

clear: both;

background-color: #ADB96E;

text-align: center;

vertical-align: middle;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-style: normal;

color: #063;

font-weight: bold;

}

.fltrt { float: right;

margin-left: 8px;}

.fltlft { float: left;

margin-right: 8px;}

.clearfloat {

clear:both;

height:0;

font-size: 1px;

line-height: 0px;}

#apDiv1 {

position:absolute;

left:371px;

top:0px;

width:773px;

height:87px;

z-index:1;

margin-right: 181px;}

.divtag {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

font-variant: small-caps;

text-decoration: none;

background-color: #063;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

left: 20px;

top: 20px;

right: 20px;

bottom: 20px;

height: 10px;

width: 500px;

margin-top: 10px;

margin-right: 10px;

margin-bottom: 0px;

margin-left: 10px;

position: static;

color: #FFF;

padding: 20px;}

.articol {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

background-color: #FFF;

width: 494px;

border-top-color: #063;

border-right-color: #063;

border-bottom-color: #063;

border-left-color: #063;

left: 20px;

top: 20px;

right: 20px;

bottom: 20px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

position: static;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 30px;

text-decoration: none;

padding: 10px;}

</style>

</head>

<body>

<?php

include ("header.php");

?>

<?php

include ("left.php");

?>

<div class="divtag" id="divtag">Orar Clasa pregatitoare</div>

<li class="TabbedPanelsTab" tabindex="0">Clasa pregatitoare A</li>

<li class="TabbedPanelsTab" tabindex="0">Clasa pregatitoare B</li>

<li class="TabbedPanelsTab" tabindex="0">Clasa pregatitoare C</li>

</ul>

<tr>

<th width="72" bgcolor="#ADB96E" scope="col">MARTI</th>

<th width="112" bgcolor="#ADB96E" scope="col">MIERCURI</th>

<th width="132" bgcolor="#ADB96E" scope="col">VINERI</th>

</tr>

<tr>

<td bgcolor="#ADB96E">Comunicare in Limba Romana</td>

</tr>

<tr>

<td bgcolor="#ADB96E">Matematica si explorarea mediului</td>

<td bgcolor="#ADB96E">Religie</td>

<td bgcolor="#ADB96E">Matematica si explorarea mediului</td>

<td bgcolor="#ADB96E">Arte vizule si lucru manual</td>

</tr>

<tr>

<!– end .content –></div>

<?php

include ("right.php");

?>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:7});

var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");

var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");

</script>

<p>Gandesc si refolosesc!</p>

<!– end .footer –></div>

<!– end .container –></div>

</body>

</html>

După cum se observă în secțiunea de cod de mai sus sunt incluse părțile de header, left, footer, right fără a mai fi scris si codul sursă al acestora, se face doar includerea lor.

CAPITOLUL II
ASPECTE METODICE

De-a lungul timpului s-a demonstrat că eficiența activității didactice depinde și de forma de organizare a întregului act didactic. Conform spuselor psihopedagogul Sorin Cristea, aceasta reprezintă o „modalitate de proiectare a procesului de învățământ la nivelul dimensiunii sale operaționale, realizabilă în diferite contexte (frontale – grupale – individuale, în clasă, în afara clasei, (școlare – extrașcolare), conform obiectivelor pedagogice elaborate la nivel general, specific și concret”. (S. Cristea, 2000, p.158)

În ansamblu, formele de organizare se referă la „ansamblul modalităților specifice de realizare a activității didactice a binomului profesor-elev în diferite contexte educaționale […] în conformitate cu obiectivele instructiv-educative prestabilite”. (M. Ionescu, 2004, p.178)

Odată cu trecerea timpului, formele de organizare au evoluat și s-au diversificat.

Istoria pedagogiei evidențiază cele mai importante momente, marcate de contribuțiile unor iluștri pedagogi ca:

J. A. Comenius a cărui sistem pe clase și lecții, din secolul al XVII-lea, dăinuie și astăzi;

J. H. Pestalozzi, K. D. Ușinski, A. W. Diesterweg, J. F. Herbart, T. Ziller, a căror merit este că au perfecționat sistemul comenian;

în a doua jumătate a secolului al XIX-lea și secolul al XX-lea aduc sisteme noi – unele chiar opuse sistemului pe „clase-lecții“ – sistemul monitorial (Bell-Lancaster), planul Dalton (experimentat de Helen Parkhurst), centrele de interes (O. Decroly), sistemul proiectelor (W. H. Kilpatrick), metoda Winnetka (experimentată de C. W. Washburne), activitatea pe grupe (R. Cousinet și P.Petersen), metoda Freinet (C. Freinet), metoda Dottrens (R. Dottrens), sistemul Mannheim (elaborat și aplicat de Sickinger) ș.a.

Sistemul cel mai răspândit în Europa, extins, de fapt, în toată lumea, a fost cel al organizării pe clase și lecții, introdus la noi prin Reforma Învățământului, în 1864, de Al. I. Cuza.

Caracteristicile esențiale ale acestui sistem evidențiat de J. A. Comenius în „Didactica magna“ sunt:

gruparea elevilor pe clase, în funcție de vârstă și nivelul de pregătire;

organizarea conținutului învățământului pe discipline distincte, cu programe proprii, eșalonate pe ani de studiu;

organizarea instruirii pe ani școlari, cu structură bine precizată;

promovarea elevilor în anii superiori pe baza rezultatelor școlare;

desfășurarea activității după un orar, sub formă de lecții cu toți elevii unei clase.

Acest sistem este cunoscut sub denumirea de „sistemul tradițional“ sau „sistemul clasic“. Un sistem criticat, dar variantele care au apărut încercau să elimine multe deficiențe precum: aspectul strict școlăresc al instruirii, dificultatea aplicării principiului diferențierii și individualizării în instruire, rigiditatea relației profesor-elev și a sistemului de avansare în învățare, metodelor de pedagogie ce promovau activismul cadrelor didactice și inactivismul, organizarea conținuturilor pe discipline/obiecte de învățământ fragmentând realitatea și altele.

Alternativele educaționale, în spațiul occidental, au adus organizarea centrată pe elev. De exemplu, „Metoda activităților practice“ – elaborată de J. Dewey, în 1896 când deschide pe lângă Universitatea din Chicago, prima școală experimentală cu activitate fundamentată pe pragmatism – presupune o educație diferențiată în funcție de interesele celor care învață . Teoria sa educațională s-a construit în jurul ideii „learning by doing“. Aceasta școala renunță cu total la planurile de învățământ și la programele școlare și susține că „școala trebuie să fie viața însăși“.

„Planul Dalton”, o altă variantă educațională promovează individualizarea totală a învățământului, în condițiile unei programe unice, propusă prin acest plan. Elevul primește și încheie cu profesorul un „contract de lucru“ prin care se obligă să-și însușească unele teme, având libertate totală de învățare. Fiecare elev evoluează în ritmul său și trece de la o etapă la alta când decide el, în urma verificării însușirii cunoștințelor. Din practică s-a constatat că nu întotdeauna se manifestă o autentică individualizare a instruirii.

„Formula Winnetka” încercă să corecteze Planul Dalton îmbinând activitatea individuală cu cea colectivă, propunând desfășurarea activității în clase organizate pe discipline. Noutatea constă în faptul că i se oferă elevului posibilitatea de a face parte din clase diferite în funcție de aptitudinile și performanțele sale. „Clasele mobile“ au fost susținute în Europa, de E. Claparéde, sistem funcțional în multe landuri din Germania.

Organizarea activității pe „centre de interes“, promotor pedagogul belgian Ovide Decroly, vizează să răspundă unor nevoi fundamentale de hrană, securitate, activitate în comun. Disciplinele de învățământ sunt înlocuite, căci fragmentează realitatea, artificial. Ideea e preluată și dezvoltată în SUA de W.H. Kilpatricke – fondatorul sistemului instruirii pe bază de proiecte, de fapt tratarea temelor complexe în mod interdisciplinare. Astăzi aceste idei sunt preluate de programul „step by step“, funcțional în Europa Centrală și de Est care propune instruirea pe „centre de activitate“: centrul de literatură, centrul de știință, centrul dramatic, tehnic etc. Clasa tradițională dominată de învățător e înlocuită cu activitatea centrată pe dezvoltarea copilului. La noi se aplică în învățământul preșcolar și primar.

O altă variantă alternativă este „activitatea pe grupe de elevi“ – elaborată de pedagogul francez R. Cousinet: echipele se constituie liber și desfășoară activitatea sub coordonarea profesorului. Organizarea pe grupuri este esența Planului Jena propus de P. Petersen, dar echipele sunt constituite, în acest caz, eterogen, copiii au vârste și posibilități intelectuale diferite.

II.1. Forme de organizare a activității didactice

Îmbunătățirea continuă a actului didactic presupune crearea unui cadru organizatoric favorabil realizării obiectivelor instructiv-educative stabilite. Această acțiune se realizează prin:

diversificarea formelor de organizare a activității în cadrul lecției care continuă să reprezinte forma organizatorică de bază;

creșterea ponderii altor forme de organizare a procesului instructiv-educativ cum sunt: excursiile, vizitele, activitățile de teren, activitățile practice etc.

În organizarea procesului de învățământ se are în vedere împletirea optimă, conform obiectivelor urmărite, a celor trei forme principale de activitate:

Activitatea frontală, cu întreaga clasă;

Activitatea pe grupe de elevi;

Activitatea individuală.

II.1.1. Activitatea frontală

Breviar teoretic

Forma predominantă de organizare a activității didactice este lecția tradițională, ponderea acesteia aflându-se în proces de reducere treptată în învățământul modern. În același timp se schimbă și conținutul acesteia.

Dacă până nu demult conținutul activității frontale era orientat cu precădere spre transmiterea cunoștințelor, profesorul și materialul prezentat de acesta constituind principalele surse de informație pentru elevi, acum, în centrul acestei forme de muncă, prinde din ce în ce mai mult contur funcția profesorului ca organizator, îndrumător și stimulator al activității de învățare pe care o realizează elevul. Astfel, activitatea cu întreaga clasă are pe de o parte menirea să pregătească activitatea de grup sau individuală, punându-se și delimitându-se problemele ce trebuie studiate și clarificate, metodele ce trebuie folosite și etapele ce trebuie parcurse. Pe de altă parte, cu colectivul întregii clase se dezbat și rezultatele activității de grup și individuale, se trag concluzii, se fac generalizări, se apreciază calitatea muncii depuse.

Activitatea frontală presupune relația profesorului cu întreg colectivul clasei, se lucrează în același timp cu toți elevii angajați în aceeași activitate. Această formă de organizare asigură manifestarea rolului de conducător al profesorului cu toate consecințele ce decurg de aici. În esență, un asemenea context pedagogic impune raportarea la nivelul mediu al clasei – nivel la care se află majoritatea elevilor din colectivul respectiv.

Avantajul constă în faptul că, din punct de vedere intelectual, se realizează o omogenitate a colectivului, cu care se lucrează, deci conținutul și metodele vor fi adecvate particularităților de vârstă și psihologice ale tuturor elevilor din clasa respectivă.

Dezavantaje majore:

dificultatea cunoașterii elevilor;

posibilitatea redusă de dezvoltare a aptitudinilor individuale și de motivație;

dificultăți de realizare a relațiilor de colaborare între elevii cu posibilități/performanțe diferite;

apariția tendințelor de dezvoltare unilateral intelectuală.

Aspecte metodice la predarea noțiunilor legate de Pagini Web

După prezentarea noțiunilor legate de pagini web, pentru o bună desfășurarea a orelor de TIC pentru însușirea noțiunilor de HTML, pot fi folosite platformele dedicate la serviciile Web și sfaturi practice pentru construirea site-urilor (Web Building). O astfel de platformă este Platforma W3Schools.

Platforma www.w3schools.com este unul dintre cele mai complete site-uri cu tutoriale Web. Acestea sunt grupate pe categorii:

 Tutoriale HTML: HML, HTML5, CSS, CSS3, TCP/IP

 Tutoriale pentru limbaje de script: JavaScript, DHTML, AJAX, VBScript, etc.

 Tutoriale XML: XML, DTD, XQuery, Schema, etc.

 Tutoriale Server Scripting: SQL, ASP, ADO, PHP, ASP.NET, etc.

Astfel, elevii, pot aborda gradual tag-urile HTML. Explicațiile sunt scurte, concise și susținute prin exemple.

Opțiunea “Try Yourself” Opțiunea “Try yourself” permite vizualizarea și editarea conținutului unei pagini HTML într-un panou separat, în același fel în care pagina poate fi văzută într-un browser.

Tot în cadrul activităților de grup putem încadra și lecția de evaluare a noțiunilor asimilate.

PROIECT DE LECȚIE

Unitatea școlară: Liceul Teoretic „Iulia Zamfirescu”- Mioveni

Clasa: a VIII-a A

Profesor: Rădoi Ionica Iuliana

Disciplina: „Calculatorul în Viata Cotidiană” – Informatica opțional

Unitatea de învățare: Pagini web

Conținutul învățării: Tabele, liste și elemente de formatare a textului

Data: 7.12.2015

Tipul lecției: test de evaluare

Competențe specifice/Obiective de referință:

să cunoască forma generală a unei pagini html;

să elaboreze o pagină web;

Obiective operaționale:

Cognitive:

să cunoască formatele de crearea a unei pagini web;

sa identifice elementele de formatate a textului;

să utilizeze corect tag-urile pentru crearea tabelului, definirea liniilor si coloanelor;

să facă deosebirea între o listă ordonată și una neordonată;

Afectiv – atitudinale:

– să argumenteze corect alegerea unei variante ;

– să se autoevalueze în raport cu obiectivele și cu clasa;

Psihomotorii:

– să utilizeze corect noțiunile teoretice însușite ;

Strategia didactică:

Resurse procedurale:

conversatia euristică, dialogul;

problematizarea;

explicația;

studiul individual, descoperirea;

exercițiul;

Resurse materiale:

calculatoare;

fișe de lucru;

Forme de organizare:

frontală ;

Resurse psihologice ale desfășurării activitații

Capacitatea de învățare a clasei

Elevii și-au însușit tag-urile prezentate la crearea tabelelor, listelor precum și modul de utilizare al acestora;

Diagnosticul motivației

Interesul pentru însușirea cunoștințelor necesare prelucrării datelor si reprezentării lor este același la întregul colectiv de elevi;

Motivația

Se vor conștientiza elevii de necesitatea cunoașterii structurii unei pagini web și folosirea acestor cunoștințe pentru consolidarea deprinderilor de utilizare concretă a acestora în elaborarea unei pagini web.

Desfășurarea activității – Moment organizatoric

Pregătirea lecției: întocmirea planului didactic și realizarea testului;

Organizareaa și pregătirea clasei: verificarea frecvenței elevilor;

Captarea atenției elevilor: anunțarea testului și explicarea modului de desfășurarea a evaluării.

Resurse matriale:

– material bibliografic: Informatica pentru liceu de Florin Moraru, Colecția Donaris

– lecții AEL;

Testul după care se desfășoară lecția de recapitulare cunoștințelor:

Nume și prenume elev: …………………………..

data: 7.12.2015

clasa:

Răspunsuri așteptate:

Se acordă 0.6 puncte pentru fiecare răspuns corect + 1 punct din oficiu.

Apple Safari

Marcaje

<align>

Type

<a href=file://C.dir1/first.html>legatura cu first</a>

<a href=”pagina_la_care_vrem_să_ajungem.html”>click pe acest text și ajungi la pagina dorită </a>

HomeSite

<hr>

<pre>

Legatura spre un server de fișiere se realizează astfel:

<a href= ftp.netscape.com>Link spre server</a>

Hyper Text Markup Language

<dd>

<li>

II.1.2. Activitatea pe grupe

Superioritatea soluționării problemelor în condiții de grup, față de rezolvările individuale a fost demult confirmată de cercetările de psihologie socială.

În studiul informaticii activitatea de grup se folosește în vederea realizării unor observații, aplicații, lucrări practice. În funcție de condițiile materiale și de timp grupele pot executa concomitent aceeași lucrare sau lucrări diferite, dar care concură la elucidarea aceleiași probleme, deci ale căror rezultate pot fi corelate și sintetizate.

De regulă, grupele sunt permanente, ele sunt constituite cel puțin pe durata unui an școlar. În ceea ce privește componența grupelor se pare că s-a optat în special pentru organizarea unor grupe eterogene, formate din elevi buni, slabi și mediocri. Eficiența grupelor ar crește dacă profesorul, la alcătuirea lor, ar avea în vedere în mai mare măsură, particularitățile individuale ale copiilor, aptitudinile, înclinațiile și interesele acestora.

Activitatea pe grupe presupune operarea subgrupării în cadrul colectivului clasei, în funcție de obiectivele didactice.

Avantaje majore:

activizează în mai mare măsură;

stimulează motivația învățării;

transformă elevul în subiect al educației;

permite valorificarea aptitudinilor și capacităților individuale;

formează și dezvoltă spiritul de cooperare și deschidere spre interacțiune.

Metoda învățării în grupe mici

Este ca o metodă în care sarcinile sunt executate de grupuri de elevi, grupuri care, câteodată sunt autoconstituite și se autodirijează, dar sunt și formate cu ajutorul profesorului. În grupurile astfel construite, indiferent dacă au fost autoconstruite sau construite de profesor, fiecare elev are sarcini bine stabilite, sarcini corelate între ele. Folosită și în cadrul orelor de informatică, metoda nu are menirea de a neglija însă munca individuală, ci doar privind-o pe aceasta ca o componentă a muncii în echipă. Eficacitatea unei asemenea organizări a activității didactice este recunoscută ca fiind utilă de profesori și o integrează în arsenalul metodic al predării disciplinei. Criteriile de formare a grupelor sunt în funcție de obiectivele urmărite (însușirea de noi cunoștințe, rezolvare de probleme etc.): grupuri omogene, formate din elevi cu același nivel de cunoștințe; grupuri eterogene, formate din elevi de toate categoriile (foarte buni, buni și slabi), dar în proporții apropiate; grupuri formate pe criterii afective (prietenie, vecini de bancă). Numărul elevilor dintr-un grup poate varia, dar cele mai potrivite grupuri sunt cele formate din 4-6 elevi. La lecțiile de aplicații practice de laborator, grupurile de lucru formate din 4 elevi care dispun de două calculatoare par a fi cele mai eficiente. Este bine ca la întocmirea grupurilor să se stabilească criterii clare de formare și elevii să fie lăsați să se grupeze singuri, respectând criteriile cerute. Pentru grupurile omogene, sarcinile pot diferi în funcție de scopul propus. Pentru grupurile eterogene sau create pe criterii afective, sarcinile vor fi aceleași la fiecare grup, dar profesorul va rezerva sarcini suplimentare elevilor mai buni din fiecare grup. Etapele pretinse de această metodă de învățare sunt: repartizarea materialului (problemelor) fiecărui grup; munca independentă a grupurilor sub supravegherea profesorului; discutarea în plen a rezultatelor obținute. Activitatea profesorului se concretizează în două etape. Prima este una proiectivă, în care se pregătește materialul de repartizat pe grupe, și materialul în plus pentru elevii buni, iar a doua, de îndrumare/supraveghere și de animare a activității grupelor de lucru. Ajutorul acordat grupelor de lucru trebuie să fie dat numai la cerere și în așa fel încât profesorul să se situeze pe poziția de colaborator și nu pe cea de autoritate care își impune părerile și soluția personale. Profesorul va interveni cu autoritate numai atunci când activitatea grupului se îndreaptă într-o direcție greșită. Când unul sau mai multe grupuri descoperă o soluție, propunerile lor vor fi discutate și analizate succesiv sau în paralel. Scopul acestei discuții este de a reliefa corectitudinea rezolvării, determinarea celei mai eficiente și mai elegante soluții și de a descoperi eventualele erori. Importanta dezbaterilor pentru dezvoltarea raționamentului este foarte marc, iar rolul profesorului este acela de a incita și coordona discuțiile în direcția obținerii concluziilor care se impun. Se impută, pe bună dreptate, acestei munci în grup o intensitate și o productivitate scăzute. Diversificarea sarcinilor grupurilor și împărțirea sarcinilor între membrii grupurilor atenuează această deficientă. Dacă prin activitatea în grup se intenționează dobândirea de noi cunoștințe prin lucrul cu manualul, documentația sau prin testarea unor produse soft, profesorul este obligat să organizeze dezbaterile finale care să stabilească dacă elevii și-au însușit corect noțiunile și și-au format deprinderi corecte. Este indicat ca grupurile de lucru să fie schimbate pentru a evita să muncească doar elevii cu potențial educativ, iar ceilalți elevi slabi se complac în postura în care se află și nu mai încearcă să scape de acest calificativ.

În cadrul acestei metode se poate integra Lecția de fixare și consolidare, de recapitulare și sistematizare, ce presupune necesitatea organizării unor activități pe grupe. Fixarea și consolidarea cunoștințelor nu se reduce la simpla repetare a acestora și nu au rol de a înlătura anumite lipsuri ale predării, ci contribuie la adâncirea și perfecționarea cunoștințelor elevilor prin evidențierea legăturilor existente între cunoștințele unui capitol sau a mai multor capitole sau a mai multor discipline înrudite. Lecțiile de fixare și consolidare pot fi organizate pe tot parcursul anului și pot avea următoarea structură organizatorică:

a) moment organizatoric (2-3 minute);

b) controlarea temei pentru acasă (daca este cazul – 5 minute);

c) recapitularea și sistematizarea materialului pe baza unui plan comunicat din timp sau elaborat împreuna cu elevii (30-35 minute);

d) concluziile și aprecierile profesorului în legătura cu desfășurarea lecției realizarea feed-back-ului (5 minute);

e) tema pentru acasă (sau, în cazul recapitulărilor finale, anunțarea planului lecției următoare – 2, 3 minute);

O astfel de lecție a fost proiectată pe ideea promovării, prin intermediul unui site, a unui salon de înfrumusețare, respectând doar câteva momente din structura organizatorică.

Invocând metoda “Schimbului de rol” în acest context, unul dintre elevi devine coordonatorul și propune echipe de lucru pentru proiect. Formează echipele după următoarele criterii:

Apropierea de domiciliu;

Hobby-uri;

Cunoscători noțiunilor teoretice despre proiectarea site-urilor.

Astfel se formează patru echipe de lucru a câte 6 elevi, el rămânând “Șef de șantier”.

După ce tema a fost anunțată, sarcinile sunt împărțite. Echipa formată din elevii cu potențial intelectual mai ridicat primește sarcina de proiectare a site-ului.

O altă echipă urmează să se ocupe colectarea datelor și fotografiilor ce vor apărea în pagina respectivă. Elevii se întâlnesc la finalul săptămânii pentru a se confrunta și a pune în ordine fiecare material strâns. Astfel i-a naștere pagina web dedicată salonului de înfrumusețare.

II.1.3. Activitatea individuală

Presupunem că, în funcție de particularitățile psiho-individuale, elevii să fie angajați în realizarea unor sarcini de învățare pe măsura acestora, adecvate din acest punct de vedere; prezintă marele avantaj de a crea posibilitatea ameliorării și dezvoltării nivelului de învățare al fiecărui copil în parte. Aplicată în învățământul tradițional acest tip de activitate tinde să ocupe locul pe care îl merită în procesul activității didactice, pe măsură ce îmbogățirea bazei materiale a studiului informaticii permite acest lucru. De asemenea, elaborarea unor mijloace ajutătoare permite desfășurarea de activități individuale.

Activitatea individuală a elevului la lecțiile de informatică vizează pe lângă însușirea independentă a unor cunoștințe și acomodarea acestuia cu metode de investigație larg utilizate în acest domeniu: consultarea site-urilor de specialitate, observația, crearea paginilor web, comparația cu aplicații ale colegilor săi, etc. Prin activitatea independentă se verifică și progresul realizat de elev.

Cele trei forme de desfășurare a activității didactice sunt complementare și se pot desfășura concomitent, în funcție de obiectivele și conținutul didactic. Dintre ele, lecția este considerată cea mai importantă, fiind cea mai eficientă formă de organizare a activității de predare-învățare-evaluare. Totuși profesorul va organiza activitățile didactice astfel încât să sporească șansele de reușită a atingerii obiectivelor operaționale propuse, adoptând o varietate de activități la specificul și potențialul elevilor dintr-o clasă.

Cunoștințele despre crearea paginilor web nu pot fi predate apelând la o singură metodă.

În cele ce urmează se vor prezenta metode specifice de abordări; a predării diferitelor domenii din informatică; metodele clasice de predare (prin expunere, descoperire dirijată etc.), iar pe baza experienței fiecărui cadru didactic aceste metode pot fi dezvoltate și combinate. Însă există câteva elemente care neapărat trebuie luate în considerare în momentul în care se alege o metodă sau o combinație a mai multora:

1 – domeniul propriu-zis al disciplinei; conținutul științific;

2 – categoria de vârstă;

3 – obiectivele generale și specifice;

4 – nivelul clasei;

5 – personalitatea clasei;

6 – personalitatea profesorului;

7 – convingerile profesorului.

Metodele care vor fi prezentate se vor analiza cu avantajele și dezavantajele lor și este recomandat să nu fie folosită totdeauna o anumită, deoarece ar apărea fenomenul de plictiseală și elevii nu vor mai fi atenți, iar rezultatul nu ar mai fi cel dorit.

Vom analiza metodele generale utilizate în predarea informaticii

1. Expunerea sistematică a cunoștințelor

2. Conversația

3. Problematizarea

4. Modelarea

5. Demonstrarea folosind materialul intuitiv

6. Exercițiul

7. Învățarea pe grupe mici

8. Munca cu manualul

9. Jocurile didactice

10. Instruirea programată

În tratarea acestor metode se vor urmări cu predilecție particularitățile specifice predării disciplinelor de informatică, particularitățile de, vârstă ale elevilor și, în special, aplicațiile practice de laborator și contribuția informaticii la realizarea obiectivelor didactice ale altor discipline din învățământul preuniversitar.

II.1.3.1. Problematizarea și învățarea prin descoperire

Predarea și învățarea prin problematizare și descoperire presupun utilizarea unor tehnici care să producă elevului conștientizarea „conflictului” dintre informația dobândită și o nouă informație, determinându-1 să acționeze în direcția lichidării acestuia prin descoperirea unor (noi) proprietăți ale fenomenului studiat. Pedagogic vorbind, conflictele se mai numesc și situații-problemă (problematizare), putând fi de cel puțin două tipuri:

Contradicții între posibilitățile elevului (nivelul intelectual și de pregătire) și cerințele, situațiile în care este pus de noua problemă. Aceste conflicte se datorează imposibilității elevului de a selecta dintre cunoștințele sale anterioare pe cele potrivite pe care le poate aplica în dezvoltarea sa intelectuală.

Incapacitatea elevului de a integra noțiunile selectate într-un sistem, în același timp cu conștientizarea faptului că sistemul este pe moment ineficient operațional (lucru care poate fi remediat doar prin completarea informației de bază).

Întrebările frontale sau individuale utilizate în etapa de pregătire a prezentare unei noțiuni, a prezentării unui domeniu nou, întrebări care se adresează capacității de reacționare a elevului, pot genera noi situații conflictuale de tipul menționat anterior. În astfel de situații, cadrul didactic trebuie să fie capabil să gestioneze el însuși apariția situațiilor-problemă. Ideal ar fi ca aceste situații, trebuie să apară de la sine în mintea elevului. Relativ la condițiile pedagogice ale acestor situații conflictuale generate de anumite probleme practice putem spune că problemele trebuie să aibă un sens precis și să fie enunțate într-un moment „optim" al lecției. Acestea trebuie să cuprindă cunoștințele însușite anterior de elev astfel încât să-i trezească interesul, să-i le solicite efort de gândire și creație.

Se poate afirma că rezolvarea unei probleme apărute poate fi înțeleasă ca un proces prin care elevul descoperă că o varietate de reguli învățate anterior se poate aplica pentru găsirea soluției unei noi situații conflictuale. Astfel în rezolvarea unei problemei apărute se pot parcurge următoarele etape:

Prezentarea problemei (verbal, scris, grafic etc.).

Definirea problemei de către elev în sensul distingerii caracteristicilor esențiale ale situației, însușirii enunțului, găsirii legăturii între date, informații etc.

Formularea de către elev a anumitor criterii, ipoteze care pot fi aplicate în vederea găsirii unei soluții.

Verificarea succesivă a unor asemenea ipoteze, eventual și a altora noi, și găsirea efectivă a unei soluții (sau a tuturor).

Expresiile întâlnite mai sus: situare conflictuală, problemă, rezolvare de problemă se referă la probleme și soluții noi, necunoscute încă de elev, și nu la ceva de tipul substituirii de valori numerice în expresii date, execuția unui program dat pentru niște valori de intrare etc. Utilizarea în predare a acestei metode este utilă în momentul în care se și găsește rezolvarea conflictului.

Descoperirea apare ca o întregire a problematizării. Se pot pune astfel în evidență trei modalități principale de învățare prin problematizare și descoperire:

Modalitatea inductivă

Modalitatea deductivă

Modalitatea prin analogie.

Conform acestor metode elevul trebuie încurajat să-și dezvolte propria cale de învățare, care să nu contrazică lucrurile în care deja „crede", prin folosirea unor mijloace tehnice și resurse informaționale personale, dar să folosească și logica și sistemele deductive. Se pot obține cunoștințe noi din cunoștințe, încurajând folosirea unei experiențelor anterioare nu numai dintr-un domeniu respectiv, ci și din domenii total diferite.

Problematizarea are astfel relaționează cu conversația, întrebările individuale sau frontale care se adresează gândirii, raționamentului străpungând sfera cunoștințelor asimilate și creând astfel situații conflictuale. Generarea situațiilor-problemă trebuie produsă astfel încât întrebările să apară în mintea elevului fără ca acestea să fie puse de către profesor, din dorința de explorare a informațiilor noi.

Ca disciplină cu caracter formativ, informatica își propune formarea unei gândiri algoritmice, sistematice și riguroase, care să promoveze creativitatea, să stimuleze imaginația și să combată rutina.

Procesele care izvorăsc din situații reale, care implică folosirea calculatorului în rezolvarea unor probleme ce aparțin ramificațiilor vieții, analiza acestor probleme, alegerea structurilor de date pe care se mulează informația oferită de mediul înconjurător, etapele algoritmilor și programarea determină folosirea metodei problematizării, iar aplicarea acestei metode necesită formarea unor deprinderi ce nu se obțin decât printr-un exercițiu îndelungat. Rezolvarea de probleme, în învățarea informaticii, poate fi privită ca un proces prin care elevul descoperă că o altă combinație de reguli învățate anterior conduc la rezolvarea unei noi situații problematice. Formularea de probleme de către elevii înșiși constituie forme ale creativității și presupune că elevii și-au format deprinderi intelectuale eficiente din punctul de vedere al generalizării și aplicabilității (orice soluție generează o nouă problemă). Problemele propuse pot fi inspirate din viața cotidiană, din cunoștințele dobândite prin studiul altor discipline, din generalizarea unor probleme de informatică rezolvate anterior, probleme de perspicacitate, jocuri etc. Problematizarea și descoperirea fac parte dintre metodele formativ-participative, care solicită gândirea creatoare a elevului, îi pun la încercare voința, îi dezvoltă imaginația, îi îmbogățește experiența, în lecțiile în care se aplică aceste metode profesorul alege problemele, le formulează, dirijează învățarea și controlează munca depusă de elev în toate etapele activității sale. Această metodă este caracteristică, de exemplu, unor lecții de aplicații practice de laborator, metoda învățării prin descoperire fiind frecvent aplicată în momentul în care este necesară folosirea programelor utilitare, a softurilor de aplicație etc. Utilitarele se abordează în funcție de problemele concrete care urmează a fi rezolvate. Obiectivul imediat este cunoașterea și exploatarea produsului și nu îmbunătățirea lui. Concentrarea atenției va fi dirijată spre rezolvarea problemei și nu asupra analizei facilităților și lipsurilor produsului software. Deosebit de importantă este experiența dobândită, cunoștințele și deprinderile formate în alte situații similare de învățare: lucrul cu meniuri, funcții comune mai multor utilitare, cunoașterea structurilor de date, dexteritatea în tehnoredactare etc. Cunoașterea facilităților produsului soft se face în momentul ivirii necesității exploatării acestuia și nu printr-o prezentare a lui ca o înșiruire mai mult sau mai puțin sistematică și completă de funcții sau facilități. Bineînțeles că este obligatorie o prezentare generală a utilitarului, în contextul altor produse similare, trebuie concepută o viziune de ansamblu din care să se desprindă caracteristicile dominante ale utilitarelor din clasa respectivă și să se prezinte particularitățile specifice produsului, cu îmbunătățiri fată de versiunile anterioare și perspective de dezvoltare pentru cele viitoare.

După ce problema a fost enunțată și sunt furnizate anumite indicații suplimentare, putem trece la alegerea strategiei concrete de rezolvare. Aceasta trebuie să fie selectată după un anumit plan, să permită un anumit tip de verificare și generalizare. De asemenea, trebuie avute în vedere metode sau metodologii prin care să se interzică anumite „ramuri" și să se permită explorarea de direcții colaterale. Una dintre strategiile generale poate fi următoarea:

Pot să rezolv problema (am cunoștințele necesare).

Definesc în mod (semi)formal.

Caut informațiile suplimentare astfel încât să am o definiție formală concretă (eventual, chiar într-un limbaj de programare concret).

Fac planul de implementare;

Îl execut (scriu „programele" și le „rulez");

Verific faptul că ceea ce am făcut este „corect";

Generalizez (la alte cazuri, la alte probleme).

Peste tot, cunoașterea măcar a unei părți din logica formală este indispensabilă.

II.1.3.2. Metoda conversației

Metoda se referă la dialogul dintre profesor și elevi. În cadrul acestei metode cadrul didactic trebuie să aibă rolul predominant de colaborator și îndrumător, dar tot odată poate și evalua activitatea elevilor. Este o metodă prin care se stimulează gândirea elevilor în vederea însușirii, fixării și sistematizării cunoștințelor și deprinderilor, în vederea dezvoltării spiritului de colaborare și de echipă, astfel elevii sunt implicați activ, întrebările putând fi puse în orice moment al lecției. Metoda conversației este frecvent utilizată în învățarea informaticii, ea implicând un dialog continuu între elev și profesor, respectându-se anumite reguli elementare de colaborare constructivă care să nu determine diminuarea demersului didactic, ci să-1 amplifice și să-1 consolideze Conversația didactică poate îmbrăca forme diferite, în funcție de anumite criterii, în funcție de numărul de persoane, ea poate fi:

Individuală: elev – profesor.

Colectivă sau frontală, întrebările sunt adresate întregii clase, iar răspunsurile „curg" de la diferiți elevi.

După obiectivele urmărite în diferite variante de lecții, conversația poate fi:

Introductivă – folosită la captarea atenției și reactualizării cunoștințelor asimilate, pentru a trezi interesul pentru lecția care urmează.

Expozitivă – poate fi utilizată în cadrul unei noi lecții, ea poate trezi interesul pentru fixarea noilor cunoștințe.

Recapitulativă – atunci când se urmărește recapitularea și generalizarea unor rezultate prezentate anterior.

Evaluativă – Este indicată, desigur, pe parcursul procesului de verificare și evaluare.

Dezvoltată – Este destinată prezentării unor noțiuni care nu este tocmai necunoscute elevilor.

Caracteristicile principale ale întrebărilor impun precizie și vizarea unui singur răspuns. De multe ori se pun întrebări vagi care încep cu Ce puteți spune despre… sau Ce știți despre…, care plasează elevul într-un dubiu total în legătură cu conținutul răspunsului. Nu este normal ca întrebarea să conțină răspunsul sau să ceară un răspuns prin da sau nu. O întrebare pusă trebuie să contribuie la dezvoltarea gândirii. Răspunsurile primite trebuie să fie corecte, complete, să oglindească o înțelegere efectivă a problemei abordate. Discuțiile purtate pe parcursul orelor au și rolul de a corecta greșelile din răspuns. Identificarea cauzei, eliminarea greșelii, cât și posibilitatea reapariției ei sunt foarte importante. Conversația are un rol primordial prin faptul că ajută la formarea limbajului informatic, la dezvoltarea raționamentului logic și a gândirii elevului. Dificultățile pe care elevul le întâmpină în formarea limbajului de specialitate pot lăsa urme în plan afectiv, punând amprentă negativă asupra dezvoltării lui intelectuale. Astfel, se dorește o analiză amănunțită a cauzelor care au favorizat apariția acestor dificultăți, iar scoaterea lor în evidență trebuie relevate prin examinări (scrise, orale, reprezentări schematice, utilizarea simbolurilor specifice). A fi la curent cu dificultățile de limbaj pe care le au elevii la anumite vârste școlare și la un anumit stadiu de însușire a disciplinei înseamnă în primul rând să nu se abuzeze de termeni de specialitate (înlocuindu-i cu termeni sinonimi din vocabularul curent sau explicându-le sensul, dacă un alt înțeles al termenului este accesibil). Dificultatea formării vocabularului de specialitate constă și în faptul că aceste cuvinte noi sunt introduse în același timp cu introducerea noțiunilor noi, ceea ce face ca îmbogățirea limbajului informatic să se facă simultan cu dezvoltarea și formarea gândirii informatice. Stăpânirea limbajului se reflectă în rezolvarea problemelor și înțelegerea textelor și documentațiilor de specialitate, însă lacunele apărute provoacă inhibiție, imposibilitatea comunicării sau chiar o comunicare și o înțelegere defectuoasă, făcându-1 pe elev timid, incoerent sau chiar ridicol în exprimare. Această metodă mai are și următoarele subdirecții:

Euristică. Nu există reguli precise, se bazează doar pe întrebare/răspuns, în funcție de evoluția concretă a dialogului.

Tip dezbatere. Se realizează un schimb de păreri în care este implicat un anumit colectiv. Ar fi bine să fie trase și niște concluzii care să nu aibă doar un rol istoric.

Catehetică. Aceasta impune efectuarea unor teste care implică memoria.

În concluzie, conversația se face prin întrebări care trebuie să satisfacă următoarele condiții:

Să vizeze un singur răspuns;

Să nu conțină răspunsul și să aibă un rol instructiv;

Să stimuleze gândirea și capacitatea de creativitate a elevilor (De ce ?, Din ce cauză ?, In ce caz ? etc.);

Să fie formulată prin enunțuri variate și „atrăgătoare".

Să se adreseze întregului colectiv vizat.

Să conțină întrebări ajutătoare atunci când răspunsul este eronat sau parțial.

Răspunsurile acceptate trebuie să fie nu numai corecte, ci și exprimate în termeni preciși: și să oglindească un anumit nivel de înțelegere. Răspunsurile eronate trebuie corectate imediat, prin discuții individuale.

Cadrul didactic trebuie să dirijeze conversația astfel încât ideile să fie bine conturate înainte de a trece la altele, în timp ce lecția își menține caracterul unitar, în ceea ce privește informatica, recomandăm și utilizarea unor instrumente ajutătoare, ca de exemplu introducerea/exprimarea noțiunilor printr-un limbaj „de programare" (scris/oral) care să implice utilizarea eficientă a simbolurilor (în afară de latura didactică propriu-zisă), ceea ce înseamnă separarea clară a sintaxei de semantică.

În proiectul didactic care urmează am împletit metodele prezentate mai sus.

Disciplina: „Calculatorul în Viața Cotidiană” – Informatică opțional

Data: 7 decembrie 2015

Clasa: a VII-a A

Profesor: Rădoi Iuliana

Unitatea de învățare: Elemente HTML

Tema: Imagini

Tipul lecției: – Formarea priceperilor și deprinderilor

Locul de desfășurare: – laboratorul de informatică

Durata lecției: 50 min

Nivelul inițial al clasei:

elevii și-au însușit toate noțiunile teoretice legate structura unei pagini;

elevii cunosc elemente de formatare a textului;

elevii cunosc tag-urile pentru crearea listelor, tabelelor;

Obiectiv cadru:

inserarea imaginilor într-un document html;

formatarea imaginilor;

Obiective de referință:

să creeze un document html care să conțină o listă cu imagini;

Obiective educaționale:

Obiective cognitive:

Să recunoască tag-urile într-un document html;

Să înțeleagă importanța scrierii corecte a documentului în HMTL;

Să aplice corect noțiunile învățate;

Obiective afective:

Să argumenteze corect alegerea unei variante;

Să aprecieze corect soluțiile oferite de ceilalți elevi;

Să se autoevalueze în raport cu obiectivele și cu clasa;

Obiective psihomotorii:

Să utilizeze corect noțiunile teoretice și practice însușite;

Obiective operaționale:

O1: Să specifice modalitatea de afișare a unei imagini;

O2: Să evalueze modul în care se pot combina diversele elemente html alinierilor, listelor cu imagini, albume;

Strategii didactice:

Principii didactice:

principiul participării și învățării active;

principiul asigurării progresului gradat al performanței;

principiul conexiunii inverse;

Metode de învățământ:

metode de comunicare orală: expunere, conversație;

metode de acțiune: exercițiul, învățare prin descoperire;

Procedee de instruire:

explicația în etapa de învățare;

învățarea prin descoperire, prin lucrul la calculator;

problematizarea prin crearea situațiilor problemă;

conversația de consolidare în etapa de fixare a cunoștințelor;

Forme de organizare: frontală și individuală;

Forme de dirijare a învățării: dirijată de profesor sau independentă;

Resurse materiale:

Calculatoare;

material bibliografic:

Lecție AEL

Daniela Oprescu, Cristina-Eugenia Dămăcuș – TIC – Manual pentru clasa a IX-a, Editura Niculescu, București, 2004

Metode de evaluare:

evaluare inițială: întrebări orale;

set de aplicații;

Desfășurarea lecției:

1. Moment organizatoric (2 min.):

Pregătirea lecției: – întocmirea proiectului didactic;

pregătirea setului de întrebări;

pregătirea setului de aplicații;

lansarea în execuție a aplicației AEL

Organizarea și pregătirea clasei: – verificarea prezenței ;

Captarea atenției clasei:

anunțarea subiectului pentru tema respectivă;

anunțarea obiectivelor urmărite;

anunțarea modului de desfășurare a activității;

2. Reactualizarea cunoștințelor (5 min.):

Care este structura unei pagini HTML?

Care sunt tag-urile folosite la crearea unei liste?

Care sunt atributele ce pot însoți tag-ul de crearea listei?

4. Comunicarea noilor cunoștințe ( 25 min.):

Pentru predarea noilor cunoștințe se lansează în execuție lecția de pe platforma AEL.

Din rularea primei pagini elevii descoperă tag-ul care se utilizează pentru a atașa unei pagini o imagine. Vom folosi tag-ul <IMG>. Forma generală a acestui element este: <IMG atribute>.

Atributele lui sunt:

src="adresa URL" – adresa url a fișierului care conține imaginea respectivă (poate fi de tipul: ".jpg", ".gif", ".bmp", etc.);

alt="text" – există posibilitatea ca imaginea să nu se poată încărca – în astfel de situații, atributul va afișa un text (alternativ) în locul imaginii, precizat la text;

height="număr pixeli" – înălțimea imaginii;

width="număr pixeli" – lățimea imaginii.

Observație! Acești ultimi doi parametri sunt ceruți atunci când vrem ca imaginea respectivă să aibă dimensiunile dorite. În cazul în care imaginea are alte dimensiuni, ea este deformată pentru a ajunge la cele cerute.

De regulă, pentru a obține poziționarea dorită pentru imagini (ca de altfel, pentru alte elemente), vom utiliza tabele. În exemplul alăturat avem o imagine și un text. Prin utilizarea tabelului, imaginea este aliniată la dreapta!

După tastarea codului în fereastra de aplicație HTML oferită de aplicație elevul obține vizualizarea acesteia în fereastra Browser oferită de aplicație.

Următorul moment al lecției testează abilitățile acumulate de elev pe parcursul după parcurgerea acestor momente și sunt propuse două exerciții, punându-se la dispoziție imaginile care vor trebui să apară.

Rezolvarea așteptată de la elevi este editarea codului HTML astfel:

Exercitiul 1. Codul HTML este următorul:

<OL>

<LI><IMG src="imagine1.jpg" height="35"> un catel

<LI><IMG src="imagine2.jpg" height="35"> o maimutica

<LI><IMG src="imagine3.jpg" height="35"> o pisicuta

</OL>

Exercitiul 2. Codul HTML este următorul:

<TR>

<I>Cateva animale haioase:</i>

<TR>

<TR>

<TD align="center">caine

<TD align="center">maimuta

<TD align="center">pisica

</TABLE>

Fixarea cunoștințelor asimilate în acest cadru al lecției de către elevi se consolidează mai mult prin într-un “accelerat” al ideilor ce se nasc din imaginația lor.

Dau astfel curs acestor gânduri și pun în construcție baza unui aplicații care, cred ei, că reprezintă de fapt dorința lor de viitor.

Una dintre eleve are ideea de a promova modelul unui salon pe care ar dori să-l „deschidă”.

CAPITOLUL III

“Educația este ceea ce supraviețuiește după ce tot ce a fost învățat a fost uitat.”

După B. F. Skinner

III.1. Relația dintre tic și formarea competențelor specifice disciplinelor informatice

Sistemul de educație trebuie să pregătească elevul pentru viața de dincolo de zidurile școlii, dezvoltându-i competențele cheie care îl poate ajuta în viața de zi cu zi.

Formarea competențelor digitale elevilor, vizează folosirea tehnologiei informației și a comunicațiilor în materia de Informatică Opțional (PMC – Prietenul Meu Calculatorul) ca cerință a lumii contemporane în contextul dezvoltării tehnologice.

Formarea competențelor trebuie adaptată noilor atitudini și strategiilor cognitive ale elevilor și sincronizată cu modul în care se produce și se livrează cunoașterea în secolul al XXI-lea. Dacă programa disciplinei PMC – informatică opțional la clasa a VIII-a are ca scop formarea și dezvoltarea competențelor digitale (care presupune utilizarea calculatorului, ergonomie și abilitate în utilizarea tastaturii, conștientizarea importanței utilizării tehnologiei informației și a implicațiilor acesteia în domeniul social, etic și uman, utilizarea unor instrumente informatice care permit creșterea productivității și calității muncii – procesoare de text, prezentări electronice, baze de date și Web browser, utilizarea serviciilor oferite de internet), abordarea didactică la disciplina informatică implică valorificarea și dezvoltarea acesteia prin activități specifice.

Disciplinele informatice nu pot fi predate de către profesor sau învățate de către elevi fără a implica în acest act calculatorul. Acesta este mijlocul utilizat cel mai frecvent pentru formarea competențelor specifice. Utilizarea abilităților digitale în cadrul opționalului la clasa a VIII-a a avut și va avea în continuare în vedere stimularea și dezvoltarea gândirii critice, înțelegerii realității și a contribuit în mod esențial la dezvoltarea competențelor generale pentru informatică, concretizate în:

identificarea conexiunilor dintre informatică și societate;

identificarea datelor care intervin într-o problemă și a relațiilor dintre acestea;

elaborarea algoritmilor de rezolvare a problemelor;

aplicarea algoritmilor fundamentali în prelucrarea datelor;

implementarea algoritmilor într-un limbaj de programare.

Sub forma ei avizată ISJ Argeș, programa de Informatică opțional – Prietenul meu Calculatorul, destinată clasei a VIII-a are în conținutul ei și dezvoltarea competențelor elevilor a lucrului cu pagini HTML, de la „nașterea” lor până la „maturitate”.

În continuare este prezentat conținutul disciplinei – Informatică opțional care se studiază la nivelul clasei a VIII-a, avizată de I.S.J. Argeș.

AVIZAT,

Inspector de specialitate

-FIȘA DE AVIZARE-

A PROIECTULUI DE PROGRAMA PENTRU OPȚIONAL

A. Avizul școlii:

Denumirea opționalului: Prietenul Meu Calculatorul

Tipul: Informatica opțional

Clasa: a VIII-a

Durata: 1 an

Numar ore pe săptămână: 1

Autori: Rădoi Ionica Iuliana

Abilitatea pentru a susține cursul:

Instituția de învățământ: Liceul Teoretic“ Iulia Zamfirescu” – Mioveni

B. Avizul Consiliului de Curriculum al Școlii (CCȘ)

CRITERII ȘI INDICATORI DE EVALUARE

AVIZUL CCȘ

Avizul conducerii școlii ………………………….

Argument

Transformările societății românești din ultimul deceniu au permis pătrunderea și în țara noastră pe scară largă a computerelor și a altor mijloace moderne de comunicare și informare. Se impune necesitatea unei pregătiri diversificate, încă de la vârste fragede a tinerilor în domeniul informaticii și a mijloacelor legate de aceasta.

Tehnologia informației are în vedere utilizarea aparaturii electronice și accesul la serviciile informaționale. Mijloacele tehnice ale tehnologiei informației sunt aparate concepute pentru a facilita obținerea, prelucrarea și transmiterea informațiilor. Calculatoarele ocupă un rol aparte, având capacitatea de a stoca și prelucra un volum mare de date. Internetul permite obținerea informațiilor din toată lumea și comunicarea cu persoane din diverse țări.

Toate companiile din zilele noastre doresc să angajeze oameni de calitate, foarte bine pregătiți. Li se cere astăzi angajaților să realizeze o gamă tot mai variată și complicată de operațiuni. În cazul schimbărilor rapide a ocupațiilor și standardelor lor, angajații trebuie să gândească repede, să aibă deprinderă de operare pe computer, să deseneze grafice, să înțeleagă și să utilizeze alte limbaje de comunicare, să țină evidențe, să rezolve probleme complexe.

Astfel, urmărim simularea unor demersuri interactive care să conducă la o mai mare eficiență a învățării școlare și la plasarea elevului în centrul actului educațional.

Contribuția calculatorului și a Internet-ului la educația și dezvoltarea în plan personal a elevilor se dorește a fi privită ca element de sine stătător, prin disciplina de sine stătătoare, Informatică, având totodată și o preocupare cu caracter interdisciplinar.

Principalul obiectiv este legat de formarea la elev a unor deprinderi legate de comunicarea informației, controlul și monitorizarea informației, modelarea evenimentelor, integrarea în societate. Dezvoltarea studiului acestei discipline se concretizează și în activitățile de învățare pe care le orientăm spre dezvoltarea la elevi a unor abilități, cum ar fi: luarea de decizii în alegerea datelor utile și a surselor date; adresarea unor întrebări care pot fi probate cu date și la care se pot da răspunsuri clare; utilizarea cunoștințele dobândite în scopul obținerii altor cunoștințe noi.

Programa de informatică – opțional are ca scop să asigure aprofundarea cunoștințelor, capacităților și aptitudinilor dobândite din anii anteriori, să stimuleze motivația elevilor pentru studiul informaticii, să facă pe elevi să înțeleagă rolul jucat de informatică în viața de zi cu zi. Elaborarea programei a avut în vedere respectarea a multor principii caracteristice procesului de proiectare:

Consolidarea capacităților și aptitudinilor dobândite în anii anteriori și extinderea orizontului de cunoștințe și înțelegeri legate de domeniul informaticii;

Selectarea conținutului astfel încât să ofere ocazii favorabile înțelegerii și interpretării rolului informaticii în lumea contemporană, rolurilor pe care ar trebui să le îndeplinească;

Adecvarea programei la specificul etapei educaționale în care se află elevii.

Obiective generale:

Utilizarea limbajului de programare C++;

Realizarea unei pagini Web folosind HTML

Crearea filmelor cu Windows Movie Maker

OBIECTIVE CADRU

1. Utilizarea surselor informaționale și a mijloacelor de procesare în scopul preluării, prelucrării, și prezentării informației

2. Realizarea de aplicații utilizând algoritmi specifici

3. Dezvoltarea competențelor de comunicare și cooperare în contexte interactive

4. Dezvoltarea competențelor de crearea a clipurilor video

OBIECTIVE DE REFERINȚĂ ȘI EXEMPLE DE ACTIVITĂȚI DE ÎNVĂȚARE

Utilizarea surselor informaționale și a mijloacelor de procesare în scopul preluării, prelucrării, și prezentării informației

Realizarea de aplicații utilizând algoritmi specifici

Dezvoltarea competențelor de comunicare și cooperare în contexte interactive

Dezvoltarea competențelor de creare clipuri video

Conținuturi

I. Limbajul de programare C++

Tipuri structurate de date: tablou, șir de caractere, fișier text

Operații cu tipurile structurate de date

Declararea unui vector

Algoritmi de prelucrare a vectorilor

Folosirea vectorilor și a algoritmilor în rezolvarea problemelor

Declararea unei matrici

Algoritmi de prelucrare a matricilor

Folosirea matricilor și a algoritmilor în rezolvarea problemelor

Șiruri de caractere-noțiuni introductive

Funcții și proceduri standard pentru șiruri de caractere

Algoritmi de prelucrare a șirurilor de caractere

Folosirea șirurilor și a algoritmilor în rezolvarea problemelor

Fișiere text noțiuni introductive

Citirea informațiilor din fișierul text și prelucrarea lor

Scrierea rezultatelor unei probleme în fișier text

II. Crearea de pagini Web folosind HTML

Limbajul HTML

Editarea unui document HTML

Operații de bază

Structura unui document HTML

Parametrii marcajului <BODY>…</BODY>

Formatarea textului într-o pagină Web

Tabele

Inserarea imaginilor

Liste

Ancore

Realizarea unui site personal

III. Crearea filmelor folosind Windows Movie Maker

Crearea, salvarea unui proiect

Inserarea imaginilor, sunetelor

Adăugarea efectelor unui film

Adăugarea tranzițiilor în film

Stabilirea timpului de redare a clipului

MODALITĂȚI DE EVALUARE

Principalele metode de evaluare din cadrul acestui curs opțional sunt:

Lucrările practice: elevii sunt evaluați în funcție de modul în care rezolvă la calculator problemele sau sarcinile de lucru primite. În cadrul orelor de programare la o astfel de evaluare se are în vedere separat logica programului, eventualele erori de neatenție, rezultatul oferit de program. Astfel elevii primesc câte o notă pentru fiecare din aspectele anterioare în catalog trecându-se media acestora.

Chestionarea orală: este folosită în special pentru a evalua modul de asimilare a cunoștințelor teoretice de către elevi. Este una dintre cele mai răspândite și se poate aplica individual sau pe grupe de elevi. Principalul avantaj al acestei metode îl constituie posibilitatea dialogului profesor-elev, în cadrul căruia profesorul își poate da seama nu doar „ce știe” elevul, ci și cum gândește el, cum se exprimă, cum face față unor situații problematice diferite de cele întâlnite pe parcursul instruirii. Cu prilejul examinării orale, profesorul îi poate cere elevului să-și motiveze răspunsul la o anumită întrebare și să-l argumenteze, după cum tot el îl poate ajuta cu întrebări suplimentare atunci când se află în impas.

Lucrările (scrise) de control: au o pondere mică în evaluare, dar sunt necesare pentru a evalua modul în care elevii pot rezolva o problemă de informatică în absența calculatorului și a asimilării cunoștințelor teoretice. Prin această metodă se asigură uniformitatea subiectelor (ca întindere și ca dificultate îndeosebi) pentru elevii supuși evaluării, ca și posibilitatea de a examina un număr mai mare de elevi în aceeași unitate de timp. Ea îi avantajează pe elevii emotivi și-i pune la adăpost pe profesorii tentați să evalueze preferențial prin metoda orală.

Evaluarea cu ajutorul calculatorului

Utilizat în evaluare, calculatorul le oferă, atât profesorilor cât și elevilor, o mare diversitate de modalități. Spre deosebire de metodele de evaluare tradiționale, evaluarea cu ajutorul calculatorului este debarasată de orice elemente de subiectivism, ca și de emoțiile care-i însoțesc pe cei mai mulți dintre elevi la verificările curente și la examene.

Ea economisește timpul și efortul evaluatorilor care, astfel, pot fi utilizate în alte domenii. Se schimbă, deci, însuși raportul profesor-elev, prin creșterea încrederii elevilor în obiectivitatea profesorilor. Mai mult, elevii înșiși se pot autoevalua pe parcursul muncii independente pe care o depun zilnic, beneficiind de feed-back-ul atât de necesar unei învățări eficiente și performante. Deși metoda de evaluare cu ajutorul calculatorului este folosită, încă prea puțin, în școala românească de toate gradele, începuturile sunt promițătoare iar numărul adepților utilizării ei în evaluarea curentă și la examene crește. Acest proces permite studiul pe bază de experiență (diferit de cel static) care, asociat cu utilizarea materialului imprimat pe calculator, îi oferă elevului un mod interactiv de construire și asimilare a noilor cunoștințe, concomitent cu posibilitatea de a verifica dacă ceea ce a învățat este corect sau nu.

Proiectul: este folosit, după cum aminteam anterior, în cazul elevilor care realizează programe vaste, cu aplicabilitate în diferite domenii sau realizarea unor documente Word performante.

Referatul: este o modalitate de etalare a cunoștintelor în domeniul editării de texte. Cu ajutorul referatelor se realizează în mod concret interdisciplinaritatea, elevii având posibilitatea să fie evaluați și la alte materii utilizând calculatorul electronic.

BIBLIOGRAFIA OPȚIONALULUI

Liliana Arici, Caiet de lucru pentru clasa a VI-a, Ed. Polirom, 2003

Emanuela Cerchez, Marinel Șerban, Informatica pentru gimnaziu, Ed. Polirom, 2002-10-02

Mariana Miloșescu, Tehnologia Informației, Ed. Teora, București, 1999

Grigore Albeanu, Sisteme de operare, Ed. Petrion, București, 1999

Emanuela Cerchez, Marinel Șerban, Sisteme de calcul, Ed. L&S Informat, București, 1998

Radu Mârșan, Sisteme de calcul, Ed. Didactică și pedagogică, R.A., București, 1997

Bebe Diamandi, Informatica în 27 de lecții, Ed. Petrion, București, 1999

Tudor Sorin, Turbo Pascal pentru cei mici, Ed L&S Informat, 1999

Bogdan Pătruț, Internet pentru începători, Ed.Teora, 2000

Emil Onea, Dan Crintea, Grafică și html

Site-uri de specialitate

III.2. Atractivitatea informaticii în rândul elevilor

După cum s-a arătat în partea metodelor de studiu a activităților de învățare, după parcurgerea modulului de HTML, elevii au dovedit măiestrie în a dovedi transdisciplinaritatea Informaticii.

Astfel au arătat că studiul paginilor web, îi ajută să călătorească dintr-un salon de înfrumusețare, la vizionarea unui film, la dorința de a simți miresma florilor prezentate într-una din aplicațiile lor, la a da viață acestora cu acul și cu ața pe minunatele costume tradiționale ce pot fi admirate în cadrul activităților desfășurate pe meleagurile românești cu ocazia datinilor și obiceiurilor strămoșești, sub mângâierea și armonia planetelor Sistemului Solar.

În continuare prezentăm câteva dintre aplicațiile elevilor.

Istoria filmelor

Aplicația este structurată pe meniuri dispuse pe orizontală, fiecare meniu are link către o altă pagină care descrie în idei principale, numele meniului. Pagina care va fi are ca tema industria filmelor. Prezintă detaliile istoriei cinematografice, un top al filmelor all-times, tehnologii utilizate in industria cinematografică, dar și detalii despre magnifica cinematografie românească.

Un alt copil, o altă concepție, o nouă prezentare a ceea ce reprezintă o „pată de culoare” ce contribuie la intensificarea farmecului lumii în care trăim – FLORILE. Acestea sunt considerate bijuterii ale TERREI, palmele ce mângâie durerea naturii, stropi subtili de curcubee îmbrățișați de soare (Revista „Codul lui Eugen”, nr.11, iulie 2009).

În mica incursiune în lumea florilor aflăm lucruri minunate: semnificația culorii, semnificația fiecărei flori, precum și ciclul vieții fiecărei.

Dar nu ne oprim aici. De la fantezia culorilor și mireasma îmbietoare trecem la împodobirea hainelor de sărbătoare, prezentând motivele florare care împodobesc portul, din diverse zone ale țării, care dă farmec Datinilor și obiceiurilor românești prezentate în altă pagină web.

Și cum o floare frumoasă, o datină străbună sunt mângâiate de Soare, ne este propus să facem „cunoștință” cu Sistemul Solar.

Și astfel se încheie scurta drumeție pe meleagurile paginilor web, rămânând în suflet cu setea de aprofundare.

Bibliografie:

Cristea, S. – Dicționar de pedagogie, Ed. Litera – Litera Internațional, București – Chișinău, 2000;

Ionescu, M., Radu, I. – Didactica modernă, ed. a II-a revizuită, Ed. Dacia, Cluj-Napoca, 2004;

Franț, I., A. – Ghid de practică pedagogică pentru studenții colegiilor universitare de institutori, Ed. Solness, Timișoara, 2002

Bogdan Pătruț, Internet pentru începători, Ed.Teora, 2000;

Emil Onea, Dan Crintea, Grafică și html

Tudor Sorin și Vlad Huțanu – Crearea și Programarea paginilor WEB, București, L&S Infomat, 2004;

Vlad Huțanu și Carmen Popescu – Manual de Informațică Intensiv pentru clasa a XII- a, București, L&S Infomat, 2007;

Traian Anghel – Programarea în PHP. Ghid practic, Iași, Polirom, 2005;

Julie C. Meloni – Învață singur PHP, MYSQL și Apache, București, Corint, 2005;

Larry Ulman – PHP și MYSQL pentru site-uri web dinamice, București, Teora, 2006;

Pater Sorin – Didactica Specialității, curs pentru studenți, 2010;

W. Jason Gilmore – PHP 5 and MySQL 5, Second Edition, Apress, 2006;

Rick Daniel – Totul despre HTML 4, Iași,Teora, 2001Traducerea de Liviu Crăciun, Alexandru Dona, Ioan Manea și sorin Bogdan)

C. Masalagiu, I. Asiminoaei – Metodica predării Informaticii, Matrixrom, 2001

Bibliografie Internet:

http://wikipedia.org – enciclopedia liberă;

http://www.php.net – pagina oficială a grupului de lucru pentru dezvoltarea limbajului PHP;

http://www.w3schools.com – set gratuit de tutoriale și documentații pentru programarea paginilor web.

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: LUCRARE METODICO-ȘTIINȚIFICĂ PENTRU OBȚINEREA GRADULUI DIDACTIC I Conducător științific, Lect.univ.dr. Viorel PĂUN Universitatea din Pitești,… [305233] (ID: 305233)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

LUCRARE METODICO-ȘTIINȚIFICĂ PENTRU OBȚINEREA GRADULUI DIDACTIC I Conducător științific, Lect.univ.dr. Viorel PĂUN Universitatea din Pitești,… [305233]

Copyright Notice

APLICAȚIE PENTRU MONITORIZAREA STĂRII CONSTRUCȚIILOR HIDROENERGETICE [308674]

Inaintedeaîncepecompletarea cererii [614105]

Studiu de caz privind aplicarea măsurilor agricole în interiorul sitului de importanță comunitară [306333]

Raport de cercetare [624963]

Bachelorarbeit (1) [609149]

INTRODUCERE…………………………………………………………………………….4 CAPITOLUL 1.ABORDĂRI TEORETICE PRIVIND MARKETINGUL DIRECT SI ERA INTERNETULUI… [623040]

Copyright Notice

Similar Posts