Optional Html5 Si Css3

PROGRAMĂ ŞCOLARĂ PENTRU DISCIPLINA OPŢIONALĂ

“REALIZAREA DE PAGINI WEB FOLOSIND NOUA SUITĂ DE

TEHNOLOGII HTML5 ȘI CSS3”

[Programă pentru centrul de excelentă TIC]

Filiera teoretică și vocaţională, toate profilurile şi specializările, toate clasele

Aprobată:

2015

Structura programeiPrograma şcolară are următoarea structură:

Notă de prezentare

Competenţele generale ale studiului istoriei în gimnaziu;

Valori şi atitudini care contribuie la studiul istoriei în gimnaziu;

Competenţele specifice şi conţinuturile asociate acestora;

Sugestiile metodologice.

NOTĂ DE PREZENTARE

Disciplina opţională „Realizarea de pagini web folosind noua suită de tehnologii HTML5

și CSS3” îşi propune implicarea tinerei generaţii în studiul, cercetarea și realizarea de site-uri ce

includ animații tranzitii, si structure definite cu div-uri pe paginile Web la nivel de client,

folosind doar un editor de text gratuit (ex: Notepad++). În elaborarea acestei programe se

porneşte de la premisa că elevii cu competente de utilizare a internetului si a editoarelor de

text.Cursul propune situaţii şi experienţe de învăţare care contribuie la consolidarea inventarului

de cunoştinţe, abilităţi şi atitudini necesare realizării paginilor web moderne.

Această disciplină opţională poate privilegia activitatea didactică la nivel interdisciplinar

(în special aria curriculară Tehnologii, Arte) şi poate contribui substanţial, la nivel

transdisciplinar, la dezvoltarea competenţelor cheie formulate în Recomandarea Parlamentului

European şi a Consiliului Uniunii Europene privind competenţele cheiedin perspectiva învăţării

pe parcursul întregii vieţi (2006/962/EC). În mod concret, se vizează dezvoltarea următoarelor

competenţe generale:

Formarea şi dezvoltarea de capacităţii și deprinderi pentru realizarea de animații

template-uri, tranzitii, aranjări in pagină, formatari, si inserarea de audio si video

utilizând limbajul HTML5 si CSS3

Elaborarea algoritmilor de rezolvare a problemelor;

Implementarea algoritmilor folosind un editor de text simplu și un browser.

VALORI SI ATITUDINI

Exprimarea unui mod de gândire creativ, în structurarea si rezolvarea problemelor.

Constientizarea impactului social, economic si moral al informaticii.

Formarea obisnuințelor de a recurge la concepte și metode informatice de tip algoritmic

specifice în abordarea unei varietăți de probleme.

Manifestarea unor atitudini favorabile față de știință și de cunoastere în general.

Manifestarea inițiativei și disponibilității de a aborda sarcini variate.

COMPETENȚE SPECIFICE ȘI CONȚINUTURI

1. Formarea şi dezvoltareade capacităţii și deprinderi pentru desenare și animații utilizând limbajul HTML5

Competențe specifice Conținuturi

1.1 Analizarea unei probleme în

scopulidentificării operațiilor necesare pentru

rezolvare.

Aranjarea obiectelor în pagină, mediu de lucru,

preformanță.

1.2Identificarea atributelor pentru formatarea

textului

Operații pentru prelucrarea textului.

1.2Identificarea atributelor pentru formatarea

imaginilor

Operații pentru prelucrarea imaginilor.

1.3 Utilizarea funcțiilor specifice pentru

transformarea unui obiect

Operații de translare, rotire, scalare, îndoire,

perspectivă.

1.4 Utilizarea funcțiilor specifice pentru

animarea unui obiect

Apel, tranziții animații.

2. Elaborarea algoritmilor de rezolvare a problemelor


2.1 Identificarea tehnicilor de animare adecvate

rezolvării unei probleme și aplicarea creativă a

acestora

Tehnici de animare.

Funcții și atribute specifice.

2.2. Elaborarea strategiei de rezolvare a unei

probleme

Stabilirea structurii site-ului.

Stabilirea tehnicilor de aranjare in pagină.

Alegerea funcțiilor și parametrilor necesari .

3.Elaborarea unor produse utilizabile care să dezvolte spiritul inventiv şi creativitatea


3.1 Utilizarea operaţiilor de bază necesare

realizării unei animații

Interfața editorului și a browserului. Vizualizare cod

în browser

3.2 Folosirea elementelor de bază pentru

inserarea în pagină a elementelor: video, audio

text, imagini, gradienți, fundaluri

Funcții atribute și parametri pentru video, audio text,

imagini, gradienți, fundaluri

3.3 Modificarea obiectelor: realizarea de

transformări, tranziții și animații

Funcții atribute și parametri necesari pentru

transformări, tranziții și animații

3.4 Transformarea unui obiect Transformare - Rotire, scalare,translare, perspectivă

3.5 Operarea cu tranziții Durata, tranziției, întârzierea și tipul tranziției

3.6 Operarea cu animații Proprietățile animațiilor

Utilizarea cadrelor animate

SUGESTII METODOLOGICE

Predarea-învăţarea acestui curs va fi orientată perezolvarea unor sarcini de lucru,

utilizându-se preponderent metoda învăţării şi a formării deprinderilor. Se vor rezolva o gamă

cât mai variată de aplicaţii practice şi punându-se accent pe realizarea cu exactitate şi la timp a

cerinţelor sarcinilor de lucru . Realizarea proiectelor în cadrul activităţilor practice va urmări

dezvoltarea abilităţilor de lucru în echipă.

Metodele didactice vor fi interactive, recomandând cu precădere aplicaţiile practice

individuale, metoda descoperirii, a demonstraţiei, conversaţia euristică.

Se vor folosi ultimele versiuni de browswe și de editor de text.

Este necesară formularea unor cerinţe care să poată fi realizate în grupuri de elevi pe baza

unor discuţii preliminare şi analiza problemei.

Aplicațiile prezentate și cerute elevilor trebuie să aibă tangență cu profilul clasei.

Se vor accesa de pe internet resurse suplimentare.

La finalul cursului elevii vor prezenta un proiect care va fi dezbătut în clasă si se va

finaliza cu evaluare.

Colegiul Național ”Ștefan cel Mare” Anul şcolar:2013-2014

Disciplina: HTML5 - Animații Clasa aX-a

Profesor: Cracană Ioan

1 ore/sapt

Planificare calendaristică anualăTotal 34 ore

Unitatea de învăţareCompetenţe

specifice

Conţinuturi Semestru/Nr. de ore

Obs.

Atribute pentru randare 2D în canvas

- desenare

1.11.22.23.1

Elemente de bazăDesenare de linii, arce, dreptunghiuri, elipse

S1/4

Gradienți liniariGradienți radiali S1/2Curba cuadraticCurba bezier S1/2

Recapitulare S1/1Evaluare S1/1

Prelucrarea imaginilor și a textului

1.13.13.2

Metode de prelucrare a imaginilor;Funcții pentru text, atribute S1/3

Transformări1.12.23.3

RotațiiTranslațiiScalăriCompunerea obiectelor

S1/3

Recapitulare și evaluare sumativă S1/2CSS3 Transformări 3.4 Transformare - Rotire,

scalare,translare, perspectivă S2/5Tranziții și animații 3.4

3.5Durata, tranziției, întârzierea și tipul tranziției

S2/6

3.6Transformări în 3DAnimații: proprietățiAplicarea animațiilor în diferite moduri

Proiectarea aplicaţiilor toate Realizarea de proiecte S2/6

Unitatea de învățare(U1): Atribute pentru randare 2D în canvas - Desenare

Nr. ore alocate: 10

ConţinuturiComp. spec.

Activități de învățare Resurse EvaluareNr. de

oreObs

Atribute pentru randare 2D în canvas: Gradienți;

Linii curbe, arce prelucrarea imaginilor și

a textelor;Gradienți liniari;Gradienți radiali;Curba cuadratic

Curba bezier

1.11.22.23.1

Se prezintă elementele specifice unei pânze de desenare

Suport de cursBibliografie online din cursCăutarea de noi informații pe internet

1

Desenarea formelor:Se prezintă funcțiile și atributele pentru desenarea liniilor (beginPath(), closePath(),lineWidth, strokeStyle stroke(),lineCapse precizează modalităţile de creare a a unui arc și în caz particular a unui cerc: arc(x, y, radius, startAngle, endAngle, counterClockwise), și umplerea (fillStyle, fill())

Observaresistematică şinotareDialog cu elevii

3

Se definesc gradienții și se prezintă funcțiile: createLinearGradient(), addColorStop, createRadialGradient()Se pune problema gradienților definiți pe orizontală

Observaresistematică şinotareDialog cu eleviiRezolvareafişelor de lucru

2

Se explică tipurile de curbe.Se precizează cum poate fi modificată o curbăSe exemplifică modul de desenare a unei curbe 2

Recapitulare 1Test de evaluare Fișe de lucru Probă

practică 1

Unitatea de învățare(U2):Prelucrarea imaginilor și a textului

Nr. ore alocate: 3


Activități de învățare Resurse EvaluareNr. de ore

Obs

Metode de prelucrare a imaginilor;

Funcții pentru text, atribute

2.23.1

ImaginiSe poartă discuții dirijate privind modul de manipulare a unei imaginiSe prezintă metodele drawImage(img, dx,dy), drawImage(image, dx, dy, dw, dh), drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh), se explică parametrii din metode și se dau exemple.



1

TextSe prezintă atributele fonturilorSe exemplifică modul de umplere a unui fontSe prezintă funcțiile font, fillText(), strokeText()Se utilizează culori și gradienți pentru umplerea textuluiSe dă un exemplu referitor la umplerea unui text cu o textură sau o imagine

1

Recapitulare 1

Unitatea de învățare(U3): Atribute pentru randare 2D în canvas - Transformări

Nr. ore alocate: 5



Obs

Transformări: rotații, translații,

scalări,

compunerea obiectelor

2.2

3.1

Rotații, translații, scalăriSe poartă discuții dirijate legate de transformări în general

Se explică convertirea din grade în radiani

Se prezintă funcțiile rotate(), translate() și scale cu explicații referitoare la originea după care se rotește un obiect, la modul de translare si de scalare.Se discută despre remaparea poziției și despre restabilirea punctului de origine.

Suport de cursBibliografie online din cursCăutarea de noi

informații pe

internet


2

Compunerea obiectelor

Se explică metoda globalCompositeOperation() care are ca valori posibile: source-over, source-in, source-out, source-atop,destination-over, destination-in, destination-atop, lighter, copy, xor.

1

Recapitulare sumativă 1

Test de evaluare din U2 și U3 Fișă de lucru 1

Unitatea de învățare(U4):CSS3 - Transformări

Nr. ore alocate: 6



Obs

CSS3Transformare - Rotire,

scalare,translare, perspectivă

2.23.1

Se discută despre cele trei planuri și modificarea funcțiilor în raport cu OX, OY, OZRotireSe poartă discuții dirijate privind modul de rotire a unui obiect. De exemplu rotire după centrul obiectului sau după un colț a-l său.Se prezintă funcția transform: rotate() Se dau exemple.



1

ScalareSe prezintă funcția transform: scale()Se explică efectul valorilor pozitive și negative din funcție

2

β

ÎnclinareSe prezintă funcția transform: skew()Se explică după ce axe se poate face transformareaSe discută despre valoarea unghiului pozitiv sau negativPerspectivăSe discută despre perspectivă (un obiect vazut de aproape sau de departe)Se demonstrează cum se utilizează în comun transform: perspective() cu transform:rotate() pentru a obține efectul dorit

1

Recapitulare 1

Evaluare sumativă 1

Unitatea de învățare(U5):CSS3 - Tranziții și animații

Conţinuturi Comp. Activități de învățare Resurse Evaluare Nr. de Obs

spec. ore

Durata, tranziției, întârzierea și

tipul tranziției

Proprietățile animațiilor

Utilizarea cadrelor animate

3.4

3.5

3.6

TranzițiiSe stabilește durata unei tranziții cu atributul Transition-duration: valSe întârzie o tranziție cu atributul transition-delay()Se setează tipul tranziției cu transition-timing-function: cu următoarele valori: linear,ease, ease-in, ease-out, steps, cubic-bezier.Se discută despre ordinea proprietăților unei tranziții și despre scrierea prescurtată Suport de curs

Bibliografie online din cursCăutarea de noi

informații pe

internet


2

AnimațiiSe prezintă animațiile cu două stări, apoi modul în care putem adăuga stări intermediareSe demonstrează cum mai multe obiecte pot avea aceeași animație, sau un obiect, mai multe animațiiSe discută despre pornirea și oprirea unei animațiiSe realizează animații după teme alese de către eleviSe stimulează latura creativă prin prezentarea de pe internet a unor proiecte de animații deosebite gen http://www.creativebloq.com/css3/animation-with-css3-712437 sau www.soldive.com

2

Recapitulare sumativă 1

Test de evaluare sumativ Fișă de lucru 1

Documents

Optional Html5 Si Css3