Tehnici Web

Nu esti logat.

Barem proiect (HTML+CSS)

Punctaj total: 1.5 din nota finala.

Punctajul pe elementele incluse in proiect 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:

Chestiuni generale:

HTML:

  1. (Obligatoriu) aprox 0.1p. Folosirea corecta a tuturor tagurilor de sectionare: section, article, aside, nav, h1-h6, header, footer, address. (fiecare din ele se puncteaza cu 0.01)

    Linkuri utile:

  2. (Obligatoriu) 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. (Obligatoriu) 0.075p minim 3 taguri text-level semantic folosite corect dintre: b,i,u,s,small,q,em, strong, del, ins.

    Linkuri utile:

  4. (Obligatoriu) 0.025 favicon (din care 0.005 daca e desenat de voi)
  5. (Obligatoriu) 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. (Obligatoriu) 0.015 denumiri relevante de fisiere (imagini, fisiere html, videoclipuri), continand si acestea cuvine cheie. Numele de domeniu corect ales.
  8. (Obligatoriu)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. (Obligatoriu) 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:

  12. (Obligatoriu) 0.05 Adaugarea unui tabel complet cu caption, antet, concluzie si date obsinuite (tagurile: table, caption,thead, tbody, tfoot, tr, th, td).

CSS general

  1. (Eliminatoriu) 0.1 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 Aspect frumos, ordonat, stil bine ales in raport cu tema (culori, font etc.).
  3. (obligatoriu) 0.005 Resetearea spatierilor default ale elementelor.
  4. (Eliminatoriu) 0.05 CSS valid
  5. (Optional) 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 obligatorii

  1. 0.01 meta pentru design responsive
  2. 0.05 Minim 2 media-queries
  3. 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 (tot obligatorii):

  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, obligatoriu in format html(+0.02p). Documentatia trebuie sa cuprinda urmatoarele informatii (pentru detalii vezi pagina despre realizarea proiectului):
    • (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

Desfasurarea prezentarii si cum se calculeaza nota pe prezentare

Pentru ca prezentarea sa se poata desfasura repede, inainte de a incepe prezentarea, studentul trebuie sa deschida toate fisierele HTML si CSS in notepad++ (sau alt editor cu colorarea sintaxei). De asemenea trebuie sa aiba in browser fiecare fisier html si css trecut prin validator (le veti avea in mai multe taburi, ca sa putem trece repede peste ele). Doar erorile se depuncteaza, nu si warningurile.

Prezentarea unui proiect trebuie sa dureze intre 5 si 10 minute. De aceea va exista o limita de timp pentru fiecare parte din prezentare (de exemplu, daca studentului ii ia mai mult de 20 de secunde sa se gandeasca pentru a raspunde la o intrebare, va primi 0 pe intrebare si se va trece la urmatoarea.

Nota pe prezentare se va calcula in felul descris in lista de mai jos. Atentie, daca studentul a explicat foarte in detaliu ce a facut e posibil sa fie mai putine intrebari decat scrise in barem.. Intrebarile sunt pur si simplu pentru a evita cazul in care studentul sare peste anumite detalii din cod.

  1. 1p Descrierea tematicii proiectului si a prezentarii continutului paginilor
  2. 2p Explicarea layout-ului si a meniului. Aratand in paralel fisierul HTML, partea din CSS si afisarea din browser, sau folosind inspect element, se vor arata si explica toate containerele folosite pentru a realiza asezarea in pagina
  3. 1p Cinci intrebari referitoare la layout. In cazul in care studentul a explicat foarte in detaliu ce a facut e posibil sa fie mai putine intrebari.
  4. 1p Cinci intrebari din HTML-ul proiectului referitoare la tagurile si atributele folosite (care este rolul lor)
  5. 1p Explicarea elementelor de layout responsive aplicate in site
  6. 1p Cinci intrebari referitoare la responsiveness din ceea ce a aplicat studentul in proiect (de exemplu va intreb ce inseamna em, sau procentajul din ce dimensiune se calculeaza etc - in cazul in care ati folosit em sau procentaje in proiect).
  7. 1p Explicarea tehnicilor de SEO folosite, aratand clar care sunt cuvintele cheie si cat de mult au fost folosite, in special in tagurile de text-level-semantics, in titluri, in meta-uri etc.
  8. 1p Explicarea CSS-ului folosit (ceea ce nu intra in categoria de responsiveness sau de layout). De exemplu: alte stilizari in pagina, descrierea eventualelor tranzitii si animatii
  9. 1p Intre 5-10 intrebari din CSS la modul general (ce fac diverse proprietati, sau ce inseamna anumiti selectori)

Alte cerinte optionale (de HTML si CSS)

Atentie, lista aceasta e "dinamica", pe masura ce imi vin idei mai adaug, iar voi puteti face ce doriti de aici pentru acumularea punctajului pe proiect.

  1. 0.01 Folosirea unui iframe
  2. 0.01 * nota_complexitate (notata de la 1 la 5). Adaugarea unei formule matematice in MathML
  3. 0.01 * nota_complexitate (notata de la 1 la 5). Adaugarea unui element SVG, folosind tagurile SVG. Nota pentru complexitate va fi mai mare daca aveti mai multe elemente SVG, animatii SVG, animatii CSS aplicate pe elemente SVG. Mai multe elemente SVG (cu cod diferit) se vor puncta separat.
  4. 0.005 Folosirea de linkuri catre bookmark-uri (#) in pagina curenta
  5. 0.005 Folosirea de linkuri catre bookmark-uri (#) din alta pagina
  6. 0.005 Folosirea de linkuri catre topul paginii cu ajutorul atributului href="#"
  7. 0.01 Adaugarea de videoclipuri si fisiere de sunet, prin intermediul elementelor audio si video - atentie sa nu porneasca automat, sa aiba controale si sa fie pornite de utilizator, daca vrea, la apasarea butonului "play"
  8. 0.01 * nota_complexitate (notata de la 1 la 5), tabele responsive (poate fi conform exemplului din laborator, sau folosind o metoda proprie)
  9. 0.01 folosirea listelor de definitii
  10. 0.01 folosirea codurilor html pentru caractere speciale &cod;
  11. 0.01 * nota_complexitate (de la 1 la 5) definirea unui stil special pentru printare (@media print{})
  12. 0.05 folosirea unui font custom
  13. 0.05 bonus pentru desenarea unui font daca se foloseste un font custom
  14. 0.02 un layout cu coloane de text
  15. 0.05 *nota_complexitate (de la 1 la 5) structurare layout sub forma de grid (stil bootstrap)
  16. 0.03 folosirea proprietatii transform cu toate tipurile de transformari posibile (in animatii, tranzitii, si chiar si elemente statice)
  17. 0.02 folosirea unui tip de display gen list-item, table, table-row sau table-cell (dar sa aiba sens in layout, adica sa se vada clar schimbarea fata de modul default de display al unui element)
  18. 0.05 galerie de imagini facuta strict in CSS, dar numai daca luati cerintele de la mine ca sa fiu sigura ca nu e o galerie luata de pe net (punctajul acesta se adauga ca un bonus la punctajul animatiei necesare pentru galerie).
  19. 0.02 Introducerea de butoane catre facebook, twitter etc
  20. 0.02 Adaugarea site-ului pe net si inregistrarea pe google
  21. 0.02 Fisierul robots.txt
  22. 0.01 Sitemap
  23. 0.02 countere