Fluxul de cunostinte Grafica Target Sem 4 Sem

Fluxul de cunostinte Grafica Target Sem 4 Sem 5 Programare client-side, de interfete Web Programare server-side si configurarile aferente Tehnologii HTML, CSS, vizate (neproprietare!) Java. Script Prerechizite Target de actualizare in 2013 PSW PHP, My. SQL, Apache UIA Sem 6 Interoperabilitate client-server, server-serviciu AJAX, tehnologii XML, CURL Notiunile elementare din programare (variabila, for, if, while, functie) Stiluri Word, Utilizare browser Tot ce se face la grafica, Limbajul SQL Tot ce se face la grafica si PSW HTML 5 si API-uri aferente Frameworkuri PHP, configurari servere Migrare la frameworkul JQuery

Sugestii privind strategia de examinare • Doua probe practice (studentul sa isi demonstreze capacitatea atat cu, cat si fara constrangere de timp) – Proiect • Nota se da pe cunoasterea codului, nu pe complexitate/estetica • Privind complexitatea, trebuie sa se dea o lista de rechizite minimale si proiectul sa aiba un obiectiv/audienta tinta – Examen pe bilete • Cu documentatia oficiala la dispozitie (site oficial, help) dar nu si siteuri cu tutoriale complexe

Strategie comuna recomandata • Accentul trebuie pus pe: – Design patterns, nu explicarea izolata a sintaxei fiecarei comenzi – Bune practici (exemple de complexitate redusa+features uzuale explicate in detaliu) – Prezentare interactiva la nivel de linie de cod, discutate cu studentii, nu fisiere date studentilor sa le parcurga singuri • Proiectele pot fi realizate si cu tool-uri vizuale, dar la examen se verifica stapanirea codului

Structura seminarii Grafica Seminar 1: familiarizare cu stilul sintactic al HTML si modul de lucru • crearea unui document cap-coada, cu taguri pereche (subliniind rolul lor de delimitare/structurare) si nepereche (subliniind rolul lor de inserare); • familiarizare cu toolurile (browser, editor de texte, validator de cod) • verificarea stapanirii notiunii de cale (relativa/absoluta) Seminar 2: familiarizare cu notiunea de referinte (inclusiv linkuri) • sublinierea faptului ca obiectele externe nu sunt inserate in document, ca in Word (ci devin inaccesibile daca li se schimba calea ) • exercitii cu inserare de obiecte externe – sunet, video (investigati ce aduce HTML 5), linkuri de toate tipurile, frame (doar IFRAME, necesar la code injection la UIA) Seminar 3: familiarizarea cu formularele • sa se inteleaga ca aici e granita dintre seminariile de Grafica si cele de PSW • se creeaza formular cu toate tipurile de campuri (introduceti noutatile din HTML 5) • se discuta diferenta dintre GET si POST, pros and cons, rolul lui NAME si VALUE Seminar 4: familiarizarea cu elementele de structura si modul in care se produce arborele DOM • structura-schelet a paginii (head, body, doctype, ce se pune in fiecare) • tabele si liste, tabele in tabele, tabele ca layout vs. tabele ca structuri de date • prezentarea codului HTML ca structura de date arborescenta, ce urmeaza sa fie input pentru CSS si Java. Script; discutati dependenta arborelui DOM fata de validitatea codului, posibile probleme care pot sa apara cu cod invalid

Structura seminarii Grafica Seminar 5: separarea formatului de structura, introducerea stilurilor • demonstrati in paralel un exemplu cu paragrafe formatate cu HTML fata de unul cu CSS; explicati faptul ca HTML pierde functia de formatare • prezentati DIV si SPAN ca unitati de structura, nu de format, discutati diferenta intre ID si NAME • discutati selectorii CSS si relatia lor cu arborele DOM Seminar 6: familiarizare cu CSS • box modelul CSS • codurile hexazecimale pentru culori • demonstrati inlocuitrea tabelelor de layout cu DIVuri • prezentati design patternuri populare (cu coloane flexibile/rigide/cu floating/fara etc. ) Seminar 7: introduceti noutatile aduse de CSS 3 • transformati, animatii, resizing, accent pe design patterns Seminar 8: transformari DOM cu Java. Script • exercitii de inserare/stergere de noduri de diverse granularitati, cu efect vizual (rolul lui DIV si SPAN in stabilirea granularitatii structurii arborescente) • exercitii de modificare a atributelor HTML+CSS in mod dinamic

Structura seminarii Grafica Seminar 9: noutati HTML 5 in ce priveste relatia Java. Script-DOM Seminar 10: evenimente si functii anonime in Java. Script • declansati transformarile de la seminarul 8 cu diverse evenimente, inclusiv cu event bubbling • introduceti functiile anonime, discutati avantajele Seminar 11: frameworkuri Javascript • accent pe Jquery pt. sincronizare cu UIA, inclusiv posibilitatile de animare; folositi doar facilitati care nu implica schimburi de date cu serverul Seminar 12: facilitati HTML 5 pt grafica si client data manipulation • programare pe canvas si cu SVG, relatia Java. Script cu acestea • facilitati de storage local si custom data attributes

Structura seminarii Grafica Seminar 13: validarea formularelor • prezentati validarea Java. Script ca masura de uzabilitate (cea de securitate tre sa fie pe server) • prezentati comparativ exemple de validare cu functii vs. validare cu regex • imbinati validarea cu ce s-a facut la sem. 8, pentru a insera mesaje de eroare convenabil in pagina, pentru a extinde dinamic un formular pe masura ce e completat si alte design patternuri Seminar 14: prezentati librarii si patternuri JS populare, de inalta reutilizabilitate; idei: • crearea unui meniu de context • desenare de charturi • rich text editor

Structura seminarii UIA Seminar 1: transferuri asincrone client-server prin XHR • investigati ce aduce nou XHR 2, in ce masura e suportat de browsere, daca e influentat de HTML 5! Seminar 2: transferuri asincrone client-server prin IFRAME • atat push cat si pull, cu exemplu de code injection in frame invizibil Seminar 3: transferuri asincrone cu frameworkuri AJAX • convertiti exemplele Prototype in Jquery Seminar 4: design patternuri si elemente uzuale • updater, autocompleter, slider, draggables and droppables (traduceti in Jquery) Seminar 5: design patternuri si elemente uzuale • clonare de pozitie si format, inplace content editor (traduceti in Jquery) Seminar 6: design patternuri si elemente uzuale • investigati ce noutati aduce Jquery (care sa implice si transferuri de date, spre deosebire de cele de la grafica) • investigati patternul reverse Ajax

Structura seminarii UIA Seminar 8: creare de documente XML si vocabulare DTD/XML Schema – design time • cu validare in Oxygen; aici exemplele pot folosi si editorvizual, limbajele fiind greoaie si dificil de manipulat la nivel de sintaxa Seminar 9: Interogari Xpath – in Oxygen • limbajul Xpath, relatia sa cu arborele DOM Seminar 10: Transformari XML design time • XSLT – in Oxygen, cu producere a diferite tipuri de cod (nu doar XML, ci si HTML sau altele) Seminar 11: procesare XML runtime end-to-end • cu DOM: tot pipelineul de la baza de date la inserare de cod HTML, folosind DOM atat in PHP cat si in Java. Script • cu datele transferate atat ca JSON cat si ca XML Seminar 11: procesare XML runtime end-to-end • cu alte metode (XSLT/Xpath, eventual SAX): acelasi exemplu ca la seminarul precedent, dar folosind alte tooluri XML decat DOM, atat in PHP cat si in Java. Script Seminar 12: • crearea unui serviciu REST in PHP si interogarea lui cu CURL

Sugestii pt. PSW • Introducerea unui seminar de configurare de servere – • • Preferabil sa se instaleze toate componentele separate, in locul unui pachet ca XAMPP Alegerea unui framework MVC popular (conform e-jobs) si crearea unui site cap-coada (probabil 3 seminarii) Introducerea de access control policies, precum RBAC (unele frameworkuri au integrat si partea de RBAC)