Lectura obligatorie
Lectura obligatorie: http://www.w3schools.com/css/default.asp, secțiunile: CSS Tutorial, CSS Advanced, CSS Responsive. În săptămâna 4 de școală este posibilă susținerea unui test în cadrul orelor de laborator, care poate conține întrebări din tutorialele de la link-ul anterior.
Cerință de implementare
Pentru structura de documente HTML dezvoltate la laboratorul anterior (HTML) se vor crea minimum 3 stiluri CSS diferite, care vor putea prezenta documentele HTML create până în prezent în cadrul proiectului, precum și cele care vor fi realizate pentru prezenta temă. Se vor respecta obligatoriu următoarele cerințe:
- Un stil CSS va prezenta documentele folosind un meniu orizontal prezent în cadrul acestora.
- Un stil CSS va prezenta documentele folosind același meniu (definit la cerința anterioară) într-o variantă verticală.
- Un stil CSS va prezenta documentele într-un mod responsive, astfel încât acestea să poată fi utilizate și pe ecrane de dimensiuni diferite.
- Se va crea un nou document HTML în cadrul proiectului/aplicației în care se vor folosi sprite-uri CSS. Cel puțin un stil CSS va utiliza sprite-uri CSS pentru a prezenta o iconiță vizuală suplimentară în dreptul fiecărei intrări din meniul aplicației/proiectului.
- Se va crea un nou document HTML în cadrul proiectului/aplicației în care va avea sens prezența unor widgeturi / componente stilizate similar (de exemplu carduri, panouri de informații, elemente de tip dashboard etc.).
- Cel puțin un stil CSS va permite prezentarea unui tabel cu multe coloane într-un mod responsive, astfel încât acesta să poată fi utilizat și pe ecrane mai mici.
- Cel puțin un stil CSS va implementa o animație CSS. Celelalte stiluri nu vor implementa comportamente de animație, însă aplicația va trebui să rămână complet funcțională din perspectiva utilizatorilor și în cazul folosirii acestor stiluri fără animație sau chiar fără aplicarea vreunui stil CSS.
În cadrul implementării stilurilor CSS se vor avea în vedere și următoarele cerințe suplimentare:
- Studenții trebuie să își însușească și să utilizeze corect cele mai importante proprietăți CSS și valorile asociate acestora.
- În stilurile CSS se vor utiliza mai multe tipuri de selectori, precum selectori de tip, selectori de clasă, selectori de id, selectori descendenți, precum și pseudo-clase (de exemplu
:hover,:focus) sau pseudo-elemente (de exemplu::before,::after). - Cel puțin una dintre paginile aplicației va utiliza CSS Flexbox pentru aranjarea elementelor în pagină (de exemplu pentru organizarea meniului, a layout-ului principal sau a widgeturilor).
- Cel puțin unul dintre stilurile CSS va defini și utiliza variabile CSS (CSS Custom Properties) pentru elemente precum culori, dimensiuni sau spațieri, astfel încât stilurile să poată fi mai ușor reutilizate și modificate.
- Stilul CSS responsive va utiliza minimum două media queries pentru adaptarea interfeței la diferite dimensiuni de ecran (de exemplu pentru telefoane mobile și pentru tablete).
- Se va crea în cadrul proiectului un document HTML care conține un formular, iar stilurile CSS vor stiliza elementele formularului (de exemplu câmpuri de input, textarea, butoane și stări de focus ale acestora).
În cadrul orelor de laborator pot fi enunțate și cerințe suplimentare față de cele enumerate mai sus. Pentru fiecare întrebare adresată de cadrul didactic referitoare la codul sursă al rezolvării la care studentul nu știe să răspundă, se vor scădea 2 puncte din nota laboratorului.