Teaching - Tehnologii Web Client-Side
Informatii
-
- CURS
- Detalii despre curs si laborator se vor afisa pe pagina: http://www.cs.ubbcluj.ro/~sanda/.
- Pentru cursuri o puteti contacta pe Sanda pe mail la adresa sanda@cs.ubbcluj.ro.
- LABORATOR
- Detalii despre laborator se vor afisa pe pagina: http://www.cs.ubbcluj.ro/~diana.sotropa.
Laborator 1 - Introducere in Html / Html5
-
DOCTYPE-ul folosit pentru HTML 4.01 Transitional este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
DOCTYPE-ul folosit pentru HTML 5 este:
<!DOCTYPE html> -
HTML4 encoding:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
HTML5 encoding:
<meta charset="utf-8"> - Tema de laborator 1 (deadline: Laboratorul 2)
Să se scrie un site Web personal care conține minim 3 pagini. Acesta trebuie să vă reprezinte sau să prezinte un hobby. Fiecare pagină trebuie să respecte aceeași structură (header, meniu cu legături spre celelalte pagini, conținut principal, footer ).
La rezolvarea acestui laborator se vor folosi (absolut toate) următoarele tag-uri:
a, table (tr, th, td), div, span, ul, ol, li, h1 - h6, img, p, br
și (absolut toate) următoarele atribute:
href, target, name, colspan, rowspan, width, height, type, start, src, alt, title.
Realizati paginile in HTML 4.01 si apoi treceti la HTML 5. Observati diferentele.
Laborator 2 - Validarea documentelor Html + Formulare Html
- Tema de laborator 2
La rezolvarea acestui laborator se vor folosi (absolut toate) următoarele tag-uri:
form, input, select, option, textarea, fieldset, legend,
și (absolut toate) următoarele atribute:
checked, disabled, readonly, maxlength, size, value, multiple, selected, cols, rows, height, width.
Să se scrie o pagină web ce conţine acest formular sau un formular similar (de aceeasi complexitate).
Temele de laborator 1 si 2 se vor valida folosind validator.w3.org ca fiind un document HTML 4.01 Transitional valid (fără erori şi fără warning-uri) si respectiv HTML 5.
Laborator 3 - Introducere in Css
- Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Tema de laborator 3
Rezolvarea problemelor va fi testata in Internet Explorer, Firefox, Google Chrome si Opera.
Codul CSS se va valida folosind acest validator.
[Enunturi tema de laborator 3].
Laborator 4 - Css Advanced
- Scrieți o pagină Web care sa fie responsive folosind media queries. Lista temelor o gasiti aici. Design-ul care va este asociat voua va este transmis la laborator.
-
Max-width pentru:
Smartphone: 320px Tablet: 768px Netbook: 1024px
In CSS media query-urile vor fi de forma:@media (max-width:1024px){ /* aici se scriu reguli css*/ }Includeti in tag-ul head din fisierele html:<meta name="viewport" content="width=device-width, initial-scale=1.0">
pentru a transmite browser-ului cum sa scaleze pagina in functie de dispozitiv.
Laborator 5 - Bootstrap
Laborator 6 - JavaScript
Laborator 7 - jQuery
-
-
Enunţurile problemelor de la laboratorul de jQuery sunt aceleaşi ca la laboratorul de JavaScript. Nu se vor folosi alte biblioteci de funcţii, plugin-uri, etc în afara de jQuery (jquery.min.js). Se cere o rezolvare a problemelor de la laboratorul de JavaScript însă cât mai „jQuery oriented”.