Tehnici Web

Nu esti logat.

Barem proiect (HTML+CSS)

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:

Baremul este extensibil, in sensul ca daca in urma discutiilor cu studentii decidem ca anumite elemente pe care oricum le-ar fi implemntat ar trebui punctate si ele, se pot adauga elemente noi in barem (insa doar in categoria celor "la alegere"). Baremul insa nu se va schimba in privinta elementelor deja existente.

Facand doar elemente eliminatorii si recomandate nu se ajunge la punctajul indicat pentru proiect. Studentul va trebui sa completeze cu cateva obiective dintre cele "la alegere".

Important!Pentru fiecare obiectiv exista un punctaj minim si unul maxim. Punctajul minim se obtine daca obiectivul a fost indeplinit in mod minimal, sau studentul are greseli foarte mari. Punctajul creste spre cel maxim in functie de corectitudinea si complexitatea elementului introdus in proiect, care indeplineste acel obiectiv. De exemplu, penru obiectivul tabel, daca exista un tabel mic fara heading, caption sau footer, fara folosirea atributelor colspan sau rowspan, format doar din tr si td, se va lua punctajul minim. Daca tabelul este mare si foloseste toate tagurile si atributele specifice si, in plus, nu exista greseli, punctajul va fi maxim.

Bonus

Html

Html Head

Html Body

  1. Linkuri utile:

    .

  2. Linkuri utile:

    .

  3. Taguri text-level semantic (fiecare 0.02, se puncteaza pana la maxim 5 taguri distincte). Nu se acorda punctaj pe taguri care nu au fost folosite corect (din punct de vedere semantic).

    Linkuri utile:

    Atentie!, nu se puncteaza aici: a, span, br. (intra in alte categorii de punctaj).

    .

  4. Linkuri utile:

    .

    • cu URI Scheme diferit. De exemplu link de tip mail, sau care deschide o fereastra de skype etc.
    • de tip download
    • care se deschide intr-un iframe
    • cu atributele rel, hreflang setate corespunzator
    .

  5. Observatie: se puncteaza toate utilizarile distincte (daca intr-adevar difera suficient ca functionalitate).

  6. Observatie: se puncteaza toate utilizarile distincte (daca intr-adevar difera suficient ca functionalitate).

Documentatie

    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)
    .

  1. Observatie: se puncteaza toate utilizarile distincte (daca intr-adevar difera suficient ca functionalitate).

SEO

Css

Css_responsive

  1. Observatie: se puncteaza toate utilizarile distincte (daca intr-adevar difera suficient ca functionalitate).

Elemente Vizuale

    • Butoane formatate (nu e obligatoriu sa fi tagul button; pot fi elemente care reactioneaza la click/hover si au o forma/background/stilizare pe ansamblu, deosebita). Exemplu: butoane care se clatina cand venim cu cursorul pe ele, butoane care clipesc, butoane stilizate astfel incat sa arate ca o sageata, fara a folosi imagini etc.
    • Gradient aplicat pe text, doar prin CSS
    • Schimbarea stilizarii default a textului selectat.
    • Stilizarea sectiunii active (referite prin id) la care s-a ajuns printr-un link catre ea (cu href="#id"). Indicatie: selectorul :target.
    • diverse alte efecte care merg incadrate aici
    Punctajul se da in functie de complexitate. Nu toate ideile din lista ajung la punctajul maxim (unele fiind foarte simple). Punctajul este cumulativ: fiecare efect distinct se puncteaza separat..

  1. Observatie: se puncteaza toate utilizarile distincte (daca intr-adevar difera suficient ca functionalitate).

Js

General

    • Pagina principala (de home) sa fie numita index.html
    • 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)
    • Imaginile sa aiba si variante cu rezolutii mai mici (eventual folosite in locul redimensionarii lor pe ecrane mici)
    .

Framework Css

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)