{"id":2582,"date":"2026-03-08T22:13:58","date_gmt":"2026-03-08T20:13:58","guid":{"rendered":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/?page_id=2582"},"modified":"2026-03-08T22:30:03","modified_gmt":"2026-03-08T20:30:03","slug":"programare-web-laborator-css","status":"publish","type":"page","link":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/programare-web\/programare-web-laborator-css\/","title":{"rendered":"Programare Web: Laborator CSS"},"content":{"rendered":"<h2>Lectura obligatorie<\/h2>\n<p>Lectura obligatorie: <a href=\"http:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noopener\">http:\/\/www.w3schools.com\/css\/default.asp<\/a>, sec\u021biunile: CSS Tutorial, CSS Advanced, CSS Responsive. \u00cen s\u0103pt\u0103m\u00e2na 4 de \u0219coal\u0103 este posibil\u0103 sus\u021binerea unui test \u00een cadrul orelor de laborator, care poate con\u021bine \u00eentreb\u0103ri din tutorialele de la link-ul anterior.<\/p>\n<h2>Cerin\u021b\u0103 de implementare<\/h2>\n<p>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\u00e2n\u0103 \u00een prezent \u00een cadrul proiectului, precum \u0219i cele care vor fi realizate pentru prezenta tem\u0103. Se vor respecta obligatoriu urm\u0103toarele cerin\u021be:<\/p>\n<ul>\n<li>Un stil CSS va prezenta documentele folosind un meniu orizontal prezent \u00een cadrul acestora.<\/li>\n<li>Un stil CSS va prezenta documentele folosind acela\u0219i meniu (definit la cerin\u021ba anterioar\u0103) \u00eentr-o variant\u0103 vertical\u0103.<\/li>\n<li>Un stil CSS va prezenta documentele \u00eentr-un mod responsive, astfel \u00eenc\u00e2t acestea s\u0103 poat\u0103 fi utilizate \u0219i pe ecrane de dimensiuni diferite.<\/li>\n<li>Se va crea un nou document HTML \u00een cadrul proiectului\/aplica\u021biei \u00een care se vor folosi sprite-uri CSS. Cel pu\u021bin un stil CSS va utiliza sprite-uri CSS pentru a prezenta o iconi\u021b\u0103 vizual\u0103 suplimentar\u0103 \u00een dreptul fiec\u0103rei intr\u0103ri din meniul aplica\u021biei\/proiectului.<\/li>\n<li>Se va crea un nou document HTML \u00een cadrul proiectului\/aplica\u021biei \u00een care va avea sens prezen\u021ba unor widgeturi \/ componente stilizate similar (de exemplu carduri, panouri de informa\u021bii, elemente de tip dashboard etc.).<\/li>\n<li>Cel pu\u021bin un stil CSS va permite prezentarea unui tabel cu multe coloane \u00eentr-un mod responsive, astfel \u00eenc\u00e2t acesta s\u0103 poat\u0103 fi utilizat \u0219i pe ecrane mai mici.<\/li>\n<li>Cel pu\u021bin un stil CSS va implementa o anima\u021bie CSS. Celelalte stiluri nu vor implementa comportamente de anima\u021bie, \u00eens\u0103 aplica\u021bia va trebui s\u0103 r\u0103m\u00e2n\u0103 complet func\u021bional\u0103 din perspectiva utilizatorilor \u0219i \u00een cazul folosirii acestor stiluri f\u0103r\u0103 anima\u021bie sau chiar f\u0103r\u0103 aplicarea vreunui stil CSS.<\/li>\n<\/ul>\n<p>\u00cen cadrul implement\u0103rii stilurilor CSS se vor avea \u00een vedere \u0219i urm\u0103toarele cerin\u021be suplimentare:<\/p>\n<ul>\n<li>Studen\u021bii trebuie s\u0103 \u00ee\u0219i \u00eensu\u0219easc\u0103 \u0219i s\u0103 utilizeze corect cele mai importante propriet\u0103\u021bi CSS \u0219i valorile asociate acestora.<\/li>\n<li>\u00cen stilurile CSS se vor utiliza mai multe tipuri de selectori, precum selectori de tip, selectori de clas\u0103, selectori de id, selectori descenden\u021bi, precum \u0219i pseudo-clase (de exemplu <code>:hover<\/code>, <code>:focus<\/code>) sau pseudo-elemente (de exemplu <code>::before<\/code>, <code>::after<\/code>).<\/li>\n<li>Cel pu\u021bin una dintre paginile aplica\u021biei va utiliza CSS Flexbox pentru aranjarea elementelor \u00een pagin\u0103 (de exemplu pentru organizarea meniului, a layout-ului principal sau a widgeturilor).<\/li>\n<li>Cel pu\u021bin unul dintre stilurile CSS va defini \u0219i utiliza variabile CSS (CSS Custom Properties) pentru elemente precum culori, dimensiuni sau spa\u021bieri, astfel \u00eenc\u00e2t stilurile s\u0103 poat\u0103 fi mai u\u0219or reutilizate \u0219i modificate.<\/li>\n<li>Stilul CSS responsive va utiliza minimum dou\u0103 media queries pentru adaptarea interfe\u021bei la diferite dimensiuni de ecran (de exemplu pentru telefoane mobile \u0219i pentru tablete).<\/li>\n<li>Se va crea \u00een cadrul proiectului un document HTML care con\u021bine un formular, iar stilurile CSS vor stiliza elementele formularului (de exemplu c\u00e2mpuri de input, textarea, butoane \u0219i st\u0103ri de focus ale acestora).<\/li>\n<\/ul>\n<p>\u00cen cadrul orelor de laborator pot fi enun\u021bate \u0219i cerin\u021be suplimentare fa\u021b\u0103 de cele enumerate mai sus. Pentru fiecare \u00eentrebare adresat\u0103 de cadrul didactic referitoare la codul surs\u0103 al rezolv\u0103rii la care studentul nu \u0219tie s\u0103 r\u0103spund\u0103, se vor sc\u0103dea 2 puncte din nota laboratorului.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lectura obligatorie Lectura obligatorie: http:\/\/www.w3schools.com\/css\/default.asp, sec\u021biunile: CSS Tutorial, CSS Advanced, CSS Responsive. \u00cen s\u0103pt\u0103m\u00e2na 4 de \u0219coal\u0103 este posibil\u0103 sus\u021binerea unui test \u00een cadrul orelor de laborator, care poate con\u021bine \u00eentreb\u0103ri din tutorialele de la link-ul anterior. Cerin\u021b\u0103 de implementare&hellip; <a href=\"https:\/\/www.cs.ubbcluj.ro\/~bufny\/programare-web\/programare-web-laborator-css\/\" class=\"more-link\">Continue Reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":267,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2582"}],"collection":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/comments?post=2582"}],"version-history":[{"count":7,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2582\/revisions"}],"predecessor-version":[{"id":2595,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2582\/revisions\/2595"}],"up":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/267"}],"wp:attachment":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/media?parent=2582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}