Barem proiect (HTML+CSS)

In lucru.

Punctaj total: 1.5 din nota finala.

Mod de punctare. Se va calcula intai punctajul pe elementele incluse in proiect. Se va aplica eventuala penalizare, sau eventualele bonusuri. Punctajul rezultat se va inmulti cu nota_prezentare/10, rezultand punctajul final.. Modalitatea de calculare a notei pe prezentare se va explica mai jos.

Obiectivele din barem se impart in urmatoarele categorii:

• eliminatorii - nu se prezinta proiectul, daca unul dintre obiectivele acestea lipseste. Vedeti si cerintele minimale de pe site-ul doamnei profesoare Carmen Chirita
• recomandate - elemente importante care trebuie sa apara in site
• la alegere - elemente care nu ar putea fi incluse in orice tema de site (de exemplu formulele in MathML). Atentie, obiectivele recomandate/optionale sunt punctate numai daca sunt indeplinite toate obiectivele eliminatorii).
• neutre - nu sunt obiective in sine ci un fel de punctaj suplimentar dat pe impresia pe care o lasa site-ul (aspect, cat de user friendly este etc.)

Chestiuni generale:

• (Eliminatoriu)fisier CSS extern
• site-ul sa contina intre 4 si 10 pagini - este suficient pentru a avea si un meniu derulant. Evitati sa scrieti prea mult text - conteaza cum si ce scrieti, nu cat scrieti. Conteaza sa folositi cat mai multe elemente de CSS si HTML, nu sa umpleti pagini de compuneri. In plus cu cat e mai mult text cu atat va fi mai greu de evaluat (verificarea faptului ca ati folosit in text tagurile semantice necesare)

HTML:

1. (recomandat) aprox 0.1p. Folosirea corecta a tuturor tagurilor de sectionare: section, article, aside, nav, h1-h6, header, footer, address.

   Linkuri utile:

   • https://www.w3.org/TR/html5/sections.html
2. (recomandat) 0.05p. Meta-uri relevante x4, title relevant (fiecare din ele se puncteaza cu 0.01). Descrierea, cuvintele cheie si titlul trebuie sa varieze de la o pagina la alta in functie de continutul acelei pagini
3. (recomandat) 0.075p minim 3 taguri text-level semantic folosite corect dintre: b,i,u,s,small,q,em, strong, del, ins.

   Linkuri utile:

   • https://www.w3.org/TR/html5/text-level-semantics.html
4. (recomandat) 0.025 favicon (din care 0.005 daca e desenat de voi)
5. (recomandat) 0.025 folosirea atributelor alt(pentru imagini) si title pentru detalii in plus despre diverse elemente (util pentru SEO) - macar 3-4 astfel de elemente (imagini, videoclipuri). Se vor folosi cuvinte cheie in cadrul continutului lui title.
6. 0.03 Macar o imagine trebuie sa apara la o cautare pe google images.
7. (recomandat) 0.015 denumiri relevante de fisiere (imagini, fisiere html, videoclipuri), continand si acestea cuvine cheie. Numele de domeniu corect ales.
8. (recomandat)0.05 cuvinte cheie - folosirea lor in taguri semantice, repetarea lor in continut etc.
9. 0.05 Site-ul trebuie sa apara printre primele 100 rezultate pe google pentru un set de cuvinte cheie comune (deci fara nume de brand).
10. (Eliminatoriu)0.05 validare HTML (sa nu existe nici erori nici warninguri)
11. (recomandat) 0.05 Folosirea tagurilor de grupare: ol, ul, li(punctat cu ol/ul), p, figure, figcaption(punctat impreuna cu figure), main. Optional: blockquoute

    Linkuri utile:

    • https://www.w3.org/TR/html5/grouping-content.html#grouping-content
12. (recomandat) 0.03-0.08 Adaugarea unui tabel complet cu caption, antet, concluzie si date obsinuite (tagurile: table, caption,thead, tbody, tfoot, tr, th, td, atributele rowspan si colspan).

CSS general

1. (Eliminatoriu) 0.05-0.15 Menu derulant (cu modificari substantiale fata de exemplul din laborator, si nu doar cateva elemente de stilizare, gen culoare de text, background, border etc)
2. 0.05 - 0.1 Aspect frumos, ordonat, stil bine ales in raport cu tema (culori, font etc.).
3. (recomandat) 0.01 Resetearea spatierilor default ale elementelor.
4. (Eliminatoriu) 0.05 CSS valid
5. (recomandat) max 0.1 Tranzitie/animatie/transformare(rotatie/translatie/scalare) - se va puncta in functie de complexitate. Tranzitia poate fi, de exemplu, inclusa in meniul derulant. Mai multe astfel de elemente se vor puncta separat (se aduna puncte pentru fiecare, daca, bineinteles, sunt diferite intre ele)

Responsive

(Eliminatoriu) In cazul in care site-ul nu e responsive, nu se va accepta prezentarea lui. Nu se accepta dimensiuni in pixeli decat pentru fontul de baza (html), pentru min-width, si pentru height

Toate elementele din lista de mai jos sunt foarte importante (recomandate)

1. 0.01 meta pentru design responsive
2. 0.05 Minim 2 media-queries (0.025 pe fiecare)
3. 0.01-0.05 Folosire rem, em, procentaje, vh, vw - dupa necesitati (fiecare unitate de masura distincta folosita se puncteaza cu 0.01)
4. 0.02 Adaptarea scrisului la dimensiuni mici de ecran (sa se poata citi usor)
5. 0.05 Aspect general, cu afisare corecta la redimensionare
6. 0.05 Adaptarea meniului la dimensiuni medii si mici de ecran - sa aiba o alta afisare decat pentru ecran mare (se va puncta intre 0.01 si 0.05 in functie de complexitate)
7. 0.03 Testarea cu succes pe 3 dimeniuni de ecran - pe dispozitive diferite - prin interfata de debug oferita de chrome
8. 0.02 Testarea cu succes pe tableta si mobil

Altele (recomandate):

1. 0.01 structurarea proiectului in foldere (imaginile intr-un folder de imagini, stilurile intr-un folder de stiluri, videoclipurile intr-un folder de videoclipuri, scripturile intr-un folder de scripturi etc.). CSS-ul sa fie impartit in mai multe fisiere( CSS general, CSS pentru paginile speciale, CSS pentru diverse media cum ar fi cel pentru printare). Toate fisierele sa aiba nume sugestive (de exemplu stil_general.css, home.css, stil_general_media_700_1000.css)
2. 0.05p Sa se afiseze pagina corect in IE, Chrome, Firefox, Opera.
3. 0.03p Aspect unitar al site-ului (toate paginile sa aiba o stilizare cat de cat comuna, sa repete elemente de stil precum sigla, culori, asezare in pagina).
4. 0.02p Cod ordonat si eficient (eficienta se refera la evitarea folosirii de containere in plus (HTML), folosirea selectorilor de asa natura incat sa nu definim de mai multe ori aceleasi proprietati cand le putem grupa intr-un singur selector, sa nu se repete codul css in mod inutil (exemplu: fisiere css diferite pentru paginile din site, repetarea css-ului in media-query).
5. Total 0.05p (detaliat in lista) Documentatie completa, recomandat in format html(+0.02p). Documentatia trebuie sa cuprinda urmatoarele informatii (pentru detalii vezi pagina despre realizarea proiectului):
   • (0.01p)bibliografie (singurul lucru obligatoriu)
   • (0.003)descrierea temei site-ului (cam ce va cuprinde)
   • (0.002)clasa de vizitatori vizata
   • (0.003)structura site-ului (legaturile intre pagini; graful site-ului)
   • (0.002)Categoriile principale si subcategoriile site-ului
   • (0.02= 5*0.004)analiza site-urilor concurente (minim 5) care va cuprinde pentru fiecare site:
     1. ce vi se pare bun si ce vi se pare gresit in cadrul site-ului (referitor la design, accesibilitate, daca e responsive sau nu)
     2. ce cuvinte cheie caracterizeaza site-ul respectiv si cum au fost puse in evidenta in cadrul acelui site
     3. varianta de html folosita, cum e structura paginii (daca s-au folosit sectiuni sau nu, daca meniul e facut cu nav, cum au realizat anumite asezari in pagina prin CSS)
   • (0.02)Cuvintele cheie principale (ale intregului site) si secundare(specifice fiecarei pagini). Cuvintele cheie secundare se vor specifica separat pentru fiecare pagina.

Pentru proiecte speciale se pot oferi si bonusuri.

Daca depasiti punctajul alocat de 1.5, restul de puncte se pot muta in acel 1p pentru activitate (din nota de laborator) sau in alte categorii de punctaj