Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (3/12) (Re)găsirea resurselor Web. De la motoare de căutare şi...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la d...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (3/12) (Re)găsirea resurselor Web. De la motoare de căutare şi...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la d...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare.
Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/
Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).
Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
O prezentare reunind cele mai importante aspecte privind dezvoltarea Web și perspectivele actuale (ediția 2015). Pentru alte resurse de interes, a se consulta http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
A presentation regarding the most important aspects on Web development and current perspectives (2015). For other resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Diverse aspecte de interes privind ingineria dezvoltării aplicațiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...Sabin Buraga
Detalii privind căutarea resurselor Web. De la motoare de căutare și SEO la date structurate (microformate + scheme de date HTML5). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Informații referitoare la arhitectura generală a unui navigator Web, inclusiv exemple specifice fiecărui browser în parte. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de cazSabin Buraga
Interacțiune Web: noțiuni de bază precum interacțiune om-calculator (HCI), interfață cu utilizatorul (UI), experiența utilizatorului (UX) și altele. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de clientSabin Buraga
O privire generală privind performanța aplicațiilor Web la nivel de client (tehnici, strategii, exemple reale și altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 09/12: Servicii Web. Paradigma RESTSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual (layout, tipografie, cromatică etc.) și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O viziune de ansamblu asupra suitei de tehnologii HTML5, plus exemple referitoare la generarea de conținut multimedia via SVG sau via elementul canvas. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
An overview of HTML5.
O prezentare generală referitoare la suita de tehnologii HTML5, incluzând aspecte legate de grafică vectorială (SVG) și raster (via <canvas> și JavaScript), plus informații despre microdatele HTML5 pe baza modelelor schema.org.
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare.
Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/
Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).
Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
O prezentare reunind cele mai importante aspecte privind dezvoltarea Web și perspectivele actuale (ediția 2015). Pentru alte resurse de interes, a se consulta http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
A presentation regarding the most important aspects on Web development and current perspectives (2015). For other resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Diverse aspecte de interes privind ingineria dezvoltării aplicațiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...Sabin Buraga
Detalii privind căutarea resurselor Web. De la motoare de căutare și SEO la date structurate (microformate + scheme de date HTML5). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Informații referitoare la arhitectura generală a unui navigator Web, inclusiv exemple specifice fiecărui browser în parte. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de cazSabin Buraga
Interacțiune Web: noțiuni de bază precum interacțiune om-calculator (HCI), interfață cu utilizatorul (UI), experiența utilizatorului (UX) și altele. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de clientSabin Buraga
O privire generală privind performanța aplicațiilor Web la nivel de client (tehnici, strategii, exemple reale și altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 09/12: Servicii Web. Paradigma RESTSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual (layout, tipografie, cromatică etc.) și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O viziune de ansamblu asupra suitei de tehnologii HTML5, plus exemple referitoare la generarea de conținut multimedia via SVG sau via elementul canvas. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
An overview of HTML5.
O prezentare generală referitoare la suita de tehnologii HTML5, incluzând aspecte legate de grafică vectorială (SVG) și raster (via <canvas> și JavaScript), plus informații despre microdatele HTML5 pe baza modelelor schema.org.
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
STAW 12/12: (Re)găsirea resurselor Web. De la motoare de căutare şi SEO la da...Sabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...Sabin Buraga
A presentation (available in Romanian language) about RESTful Web service development, including several considerations regarding mash-ups & APIs.
For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
Diverse aspecte privind ingineria dezvoltării aplicaţiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (8/13) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
Despre programarea în limbajul JavaScript direct în browser-ul Web (DOM, Ajax, Comet, mash-up, CORS și multe altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
STAW 11/12: Performanţa aplicaţiilor Web la nivel de clientSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Web 2016 (02/13) Programare Web – Protocolul HTTP. Cookie-uri. Sesiuni WebSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Detalii privind căutarea resurselor Web. De la motoare de căutare și SEO la date structurate. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2016 (11/13) Servicii Web. Paradigma RESTSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web (20)
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
STAW 08/12: Programare Web. Suita de tehnologii HTML5Sabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prezentare referitoare la dezvoltarea aplicațiilor Web dedicată elevilor de liceu. Prelegerea a fost susținută în cadrul Școlii de vară SummerIS organizată la Universitatea Alexandru Ioan Cuza din Iași, Facultatea de Informatică (iulie 2019).
A presentation regarding Web application development delivered to high-school students, a part of the SummerIS summer school organized at the Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania (July 2019).
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...Sabin Buraga
The document discusses several key aspects of human-computer interaction and user interface design, including:
- There are multiple interaction styles or "idioms" used in user interfaces, such as command lines, menus, direct manipulation, and natural language interfaces. Each has its own vocabulary.
- Users and contexts of use are diverse, with a variety of devices, tasks, environments, abilities and characteristics among the user population. Understanding users is important.
- When designing interfaces, it is necessary to consider the heterogeneity of platforms and consistency across contexts of use. The diversity of users and tasks poses challenges for user interface design.
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual DesignSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowSabin Buraga
The document discusses various design patterns for human-computer interfaces. It describes layout patterns like center stage and card stack. It also discusses patterns for user actions and commands, including affordances and button groups. Throughout, it provides examples and considerations for applying each pattern, as well as references to additional resources. The document is a lecture on design patterns for human-computer interaction.
HCI 2018 (6/10) Design Patterns for Social (Web/mobile) InteractionsSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
2. Elbert Hubbard
Dr. Sabin Buragawww.purl.org/net/busaco
“To avoid criticism
do nothing, say nothing, be nothing.”
3. browser Web
funcționalități de bază
(application logic)
interpretor
JavaScript
acces la
platformă
Dr. Sabin Buragawww.purl.org/net/busaco
platformă (e.g., sistem de operare)
4. browser Web
funcționalități de bază
(application logic)
interpretor
JavaScript
acces la
platformă
rețea, grafică, fonturi,
widget-uri native,…
Dr. Sabin Buragawww.purl.org/net/busaco
platformă (e.g., sistem de operare)
8. Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)
MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
www.modern.ie
Dr. Sabin Buragawww.purl.org/net/busaco
1996 – primul navigator produs de Microsoft: MSIE
include dialectul JScript și propriul BOM
multe facilități, ulterior standardizate de W3C
Mozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)
9. Dr. Sabin Buragawww.purl.org/net/busaco
1996 – primul navigator trialware: Opera 2
focalizat pe utilizabilitate (e.g., tab-uri)
& accesibilitate (de exemplu, interacțiune prin gesturi)
permite selectarea modului de identificare a browser-ului
Opera/Versiune (OS; Criptare) [Limbă]
Opera/7.54 (Windows NT 5.1; U) [en]
http://dev.opera.com/
10. Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2)
Gecko/20060823 SeaMonkey/1.1a
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)
Gecko/20071127 Firefox/2.0.0.11
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
Dr. Sabin Buragawww.purl.org/net/busaco
1998 – apariția procesorului de redare Gecko
Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;
VersiuneAnterioară) Gecko/Versiune Produs/Versiune
12. Dr. Sabin Buragawww.purl.org/net/busaco
fundația Mozilla – versiunea open source a Netscape:
Phoenix (2002)Firebird (2003)Firefox (2004)
focalizare asupra respectării standardelor Web
interfață via XUL (Extensible User-interface Language)
extensibil via add-ons (extensii, teme vizuale etc.)
ciclu de dezvoltare de 6 săptămâni:
Nightly, Aurora, Beta, Release
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0
https://developer.mozilla.org/Mozilla/Firefox
13. Dr. Sabin Buragawww.purl.org/net/busaco
2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)
accent pus pe inovare (<canvas>, CSS,…) & performanță
Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă)
AppleWebKit/Versiune (KHTML, like Gecko) Safari/Versiune
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1
(KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
https://developer.apple.com/devcenter/safari/
14. Dr. Sabin Buragawww.purl.org/net/busaco
2005 – Opera Mini oferă primele facilități de redare
a datelor pe ecrane miniaturizate (small screen rendering)
procesare realizată la nivel de server via data centers
15. Dr. Sabin Buragawww.purl.org/net/busaco
2008 – Google Chrome folosind WebKit; din 2013: Blink
bazat pe proiectul open source Chromium
focalizare asupra performanței la nivel de client Web
interfață minimalistă + manager de tab-uri
include instrumente avansate pentru dezvoltatori
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13
(KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13
Mozilla/5.0 (Linux; Android 4.1.2; GT-I9300 Build/JZO54K) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/30.0.1599.82 Mobile Safari/537.36
https://developers.google.com/chrome/
www.chromium.org
19. bara de introducere a URI-urilor (address bar)
căutare pe Web
instrumente facilitând navigarea (back/forward button)
meniu de salvare a adreselor Web favorite (bookmarks)
acces la preferințe & alte componente – e.g., extensii
…
Dr. Sabin Buragawww.purl.org/net/busaco
user interface
21. diverse proprietăți & setări ale browser-ului specifice
unui utilizator pot fi stocate în cadrul unui profil
exemplu tipic: Firefox – http://mzl.la/NYhKHH
https://developer.mozilla.org/Profile_Manager
Dr. Sabin Buragawww.purl.org/net/busaco
user interface
22. “punte” între interfața cu utilizatorul și rendering engine
Dr. Sabin Buragawww.purl.org/net/busaco
browser engine
23. “punte” între interfața cu utilizatorul și rendering engine
nucleu (kernel)
plug-ins
extensions
add-ons
Dr. Sabin Buragawww.purl.org/net/busaco
browser engine
26. implică, uzual, procesarea arborelui DOM
asociat unei pagini Web
cu aplicarea proprietăților CSS aferente
în vederea redării într-o zonă de afișare
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
27. Dr. Sabin Buragawww.purl.org/net/busaco
o aplicație Web la nivel de client poate fi compusă din diverse
componente, încărcate dinamicmanagementul arborilor DOM
(Dimitri Glazkov, 2013)
28. include un interpretor (parser) HTML
conform tipului de document Web – DTD
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
29. include un interpretor (parser) HTML
conform tipului de document Web – DTD
moduri diferite de interpretare
standards mode – HTML5, CSS3, SVG,…
quirks mode – www.quirksmode.org
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
33. Dr. Sabin Buragawww.purl.org/net/busaco
a se revedea cursul
“Limbaje formale &
tehnici de compilare”
fazele importante ale procesării unui document HTML
în vederea obținerii arborelui DOM
35. în mod tradițional,
modelul de procesare este sincron, single-threaded
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
36. în mod tradițional,
modelul de procesare este sincron, single-threaded
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
(eventual, extern – încărcat de pe alt sit, dacă e posibil)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
37. în mod tradițional,
modelul de procesare este sincron, single-threaded
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
implicit, procesul de rendering e oprit
până ce codul JavaScript este executat complet
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
38. pentru HTML5, script-urile JavaScript
pot fi executate asincron (într-un thread separat)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
39. deoarece – în mod normal – stilurile CSS
nu modifică arborele DOM, procesarea poate avea loc
independent de încărcarea fișierelor CSS
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
40. arbore DOM
arbore de redare (render tree)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
41. conform David Baron, 2008
Dr. Sabin Buragawww.purl.org/net/busaco
relația dintre arborele DOM și
arborele de redare a conținutului (render tree)
42. alături de arborele de redare, se va genera și:
render object tree
responsabil cu aranjamentul (layout) & afișarea (paint)
specific conținutului efectiv redat
compus din obiecte de redare:
RenderBlock, RenderText, RenderInline etc.
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
43. alături de arborele de redare, se va genera și:
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
style tree
include valorile calculate ale proprietăților de stil
asociat arborelui obiectelor de redare (render object tree)
44. alături de arborele de redare, se va genera și:
render layer tree
folosit pentru elementele ce includ conținuturi externe
(<video>, WebGL via <canvas>) ori manipulate prin CSS
(transformări, scalări, decupări,…)
stabilește coordonatele în spațiu și ordinea (z-index)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
45. L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012
Dr. Sabin Buragawww.purl.org/net/busaco
relațiile între obiecte de redare (render objects)
și stratele asociate (render layers)
46. arbore de redare (render tree)
generare a aranjamentului vizual (layout)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
47. calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
48. calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului
se pot lua în considerație coordonatele ferestrei
navigatorului + proprietățile mediului de redare:
rezoluție, orientare (portrait vs. landscape),
suport pentru 3D etc.
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
50. calcularea aranjamentului (layout)
global layout (pentru întreg render tree) vs. incremental
sincron vs. asincron
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
51. calcularea aranjamentului (layout)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
calculul lățimii fiecărui bloc de conținut (width calculation)
decizii privind line breaking
plasarea blocurilor flotante – e.g., cele având float: right
determinarea lățimii fiecărei coloane de tabel
…
53. Dr. Sabin Buragawww.purl.org/net/busaco
Firefox: vizualizarea 3D a arborelui DOM via arborele de redare
(pe baza proiectului Tilt realizat de absolventul FII
Victor Porof – Google Summer of Code 2011)
56. afișarea propriu-zisă (painting)
poate fi realizată la nivel de software
sau pe baza procesorului grafic (accelerată hardware)
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
58. după afișarea propriu-zisă,
pot apărea schimbări de redare
la nivel local/global
re-layout și/sau re-paint
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
59. Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
exemplificări notabile:
Gecko (Firefox, SeaMonkey, Thunderbird)
Presto (Opera, Opera Mobile, Opera Mini, Nintendo)
Trident (Microsoft: IE, IE Mobile, Skype)
WebKit (Apple Safari, Google Chrome, Adobe AIR +
majoritatea platformelor mobile: Android, Blackberry, iOS)
Blink (Google Chrome – din 2013)
63. anumite browser-e pot rula mai multe instanțe
ale procesorului responsabil cu redarea conținutului
exemplu tipic: Google Chrome
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
67. procesul de rendering poate fi optimizat
(speculative parsing)
strategii diverse:
încărcare paralelă a resurselor, multi-procesare,
încărcarea directă a arborelui de redare
(pre-procesat la nivel de server),…
Dr. Sabin Buragawww.purl.org/net/busaco
rendering engine
69. responsabil cu transferurile de date de pe Internet
API independent de platformă
+
implementări specifice fiecărui sistem de operare
Dr. Sabin Buragawww.purl.org/net/busaco
networking
70. responsabil cu transferurile de date de pe Internet
API independent de platformă
+
implementări specifice fiecărui sistem de operare
exemplificare: Firefox utilizează modulul Necko
Dr. Sabin Buragawww.purl.org/net/busaco
networking
72. responsabil cu transferurile de date de pe Internet
protocolul HTTP
standardizat de RFC 2616
www.w3.org/Protocols/
Dr. Sabin Buragawww.purl.org/net/busaco
networking
73. responsabil cu transferurile de date de pe Internet
HTTPS – asigură comunicații “sigure” HTTP
via TLS (Transport Layer Security):
autentificare pe baza certificatelor digitale
+ criptare bidirecțională
RFC 2818 – https://tools.ietf.org/html/rfc2818
Dr. Sabin Buragawww.purl.org/net/busaco
networking
75. folosit pentru transferuri de date de pe Internet
protocolul SPDY – un experiment Google
Dr. Sabin Buragawww.purl.org/net/busaco
networking
număr nelimitat de cereri concurente folosind aceeași
conexiune (eventual, via un sistem de priorități)
compresarea anteturilor mesajelor
fluxuri de date în regim push (notificări primite de client)
76. folosit pentru transferuri de date de pe Internet
protocolul SPDY – un experiment Google
detalii la http://www.chromium.org/spdy
Dr. Sabin Buragawww.purl.org/net/busaco
networking
77. folosit pentru transferuri de date de pe Internet
protocolul HTTP/2.0 – în lucru la IETF
extinde ideile SPDY, focalizat asupra performanței
vezi prezentarea lui Mark Nottingham (octombrie 2012)
www.slideshare.net/mnot/what-http20-will-do-for-you
Dr. Sabin Buragawww.purl.org/net/busaco
networking
78. observații:
numărul conexiunilor HTTP paralele realizate
cu un server sau proxy este limitat (uzual: 2—6)
unele navigatoare pot aplica tehnici de optimizare
a încărcării resurselor
detalii într-un
curs viitor
Dr. Sabin Buragawww.purl.org/net/busaco
networking
80. responsabil cu afișarea componentelor de interfață
ferestre, bare de defilare a conținutului (scroll bars),
tipuri de câmpurilor formularelor Web:
(butoane de tip radio, textarea, liste de selecție,…)
Dr. Sabin Buragawww.purl.org/net/busaco
display (UI) backend
84. diferențele de performanță pot fi măsurate
via teste specifice (benchmarking)
exemplificări:
Benchmark.js, Internet Explorer Test Drive (Microsoft),
Kraken (Mozilla), Octane (Google), SunSpider (Apple)
diverse statistici la http://arewefastyet.com/
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript interpreter (engine)
85. responsabil cu procesarea documentelor XML via DOM
implementarea minimală vizează DOM nivelul 2
Dr. Sabin Buragawww.purl.org/net/busaco
XML parser
86. în unele cazuri, procesarea documentelor XML
poate implica validarea datelor via DTD,
dar nu folosind scheme XML
Dr. Sabin Buragawww.purl.org/net/busaco
XML parser
87. uzual, se poate oferi suport pentru:
spații de nume XML
XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat
XSLT 1.0 – actualmente nu există suport pentru XSLT 2.0
transferuri asincrone de date via XMLHttpRequest
etc.
Dr. Sabin Buragawww.purl.org/net/busaco
XML parser
88. unele navigatoare ofera facilități pentru alte limbaje XML
e.g., MathML sau SVG (Scalable Vector Graphics)
Dr. Sabin Buragawww.purl.org/net/busaco
XML parser
89. modul responsabil cu stocarea datelor
pe calculatorul client
Dr. Sabin Buragawww.purl.org/net/busaco
data persistence
98. un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)
Dr. Sabin Buragawww.purl.org/net/busaco
Remarcă
99. un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)
de asemenea, permite includerea de
plug-in-uri și extensii
Dr. Sabin Buragawww.purl.org/net/busaco
Remarcă
100. program extern responsabil cu procesarea & redarea
unor date ce nu pot fi prelucrate nativ
de către navigatorul Web
formatul de date este specificat via tipuri MIME
video/quicktime
application/x-shockwave-flash
Dr. Sabin Buragawww.purl.org/net/busaco
Plug-in
101. se bazează pe API-ul oferit de browser
NPAPI (Mozilla), ActiveX (Microsoft), PPAPI (Google)
https://developer.mozilla.org/Gecko_Plugin_API_Reference
https://developers.google.com/native-client/
uzual, se folosește un SDK disponibil pe platforma-țintă
(recurgându-se la limbajele C ori C++)
Dr. Sabin Buragawww.purl.org/net/busaco
Plug-in
102. poate rula în același proces cu navigatorul Web
Dr. Sabin Buragawww.purl.org/net/busaco
Plug-in
103. e.g., pentru Firefox se folosește IPDL – IPC (Inter-process
communication) Protocol Definition Language)
Dr. Sabin Buragawww.purl.org/net/busaco
plug-in
poate rula într-un proces separat (out of process plug-in),
modul de apelare fiind definit via un limbaj specific
105. extinde funcționalitățile navigatorului
poate afecta browser-ul în ansamblu
are acces, de obicei, la arborele DOM
(sau arborele de redare a conținutului)
Dr. Sabin Buragawww.purl.org/net/busaco
Extensie
107. resurse pentru dezvoltatori:
Chrome – http://developer.chrome.com/extensions/
Firefox – https://github.com/victorporof/Restartless-Template
MSIE – http://tinyurl.com/pnqepat
Safari – https://developer.apple.com/programs/safari/
Dr. Sabin Buragawww.purl.org/net/busaco
Extensie
108. eventual, pentru dezvoltare poate fi folosit un framework
exemple:
BabelExt
Crossrider
Dr. Sabin Buragawww.purl.org/net/busaco
Extensie
109. se poate distribui via un sit specific
(e.g., Chrome Web Store)
conform unui format standardizat
Packaged Web Apps (recomandare W3C, 2012)
http://www.w3.org/TR/widgets/
Dr. Sabin Buragawww.purl.org/net/busaco
Extensie
110. aplicație – de sine-stătătoare sau inclusă într-o pagină –
ce oferă o funcționalitate specifică
rulează la nivel de client (platformă oferită de
sistemul de operare și/sau navigator Web)
Dr. Sabin Buragawww.purl.org/net/busaco
Widget
111. implementare pe baza standardelor Web: HTML, CSS, JS
eventual, se poate recurge la un API
W3C Proposed Recommendation (2012)
www.w3.org/TR/widgets-apis/
Dr. Sabin Buragawww.purl.org/net/busaco
Widget
112. denumire generică a aplicațiilor asociate unui browser
(extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plug-in-uri etc.)
addons.mozilla.org
Dr. Sabin Buragawww.purl.org/net/busaco
Add-on
113. parte a unei aplicații Web
ce încapsulează o suită de funcții înrudite
e.g., calendar, cititor de fluxuri de știri,
buton de partajare a URL-ului în altă aplicație
Dr. Sabin Buragawww.purl.org/net/busaco
Web component
114. dezvoltare bazată pe o bibliotecă/framework JavaScript
soluții “tradiționale”:
Dojo Toolkit, jQuery UI, YUI,…
Dr. Sabin Buragawww.purl.org/net/busaco
Web component
115. cadrul general: Web Components
(W3C working draft, iunie 2013)
templates, decorators, custom elements,
shadow DOM, imports etc.
www.w3.org/TR/components-intro/
Dr. Sabin Buragawww.purl.org/net/busaco
Web component
116. implementări:
Polymer (Google) – www.polymer-project.org
X-Tag (Mozilla) – www.x-tags.org
Dr. Sabin Buragawww.purl.org/net/busaco
Web component
117. o aplicație Web instalabilă
care folosește API-urile oferite de browser
exemplu tipic: Chrome Apps
https://developers.google.com/chrome/web-store/docs/index
concept asemănător: pinned site (Internet Explorer)
http://msdn.microsoft.com/library/ie/gg491731%28v=vs.85%29.aspx
Dr. Sabin Buragawww.purl.org/net/busaco
Web app
118. alte exemple notabile:
aplicații Windows 8 dezvoltate în JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/br211369.aspx
aplicații mobile pentru Firefox OS
http://profs.info.uaic.ro/~busaco/teach/labs/firefoxos/
Dr. Sabin Buragawww.purl.org/net/busaco
Web app
aplicații Web mobile pentru Kindle Fire și alte dispozitive
https://developer.amazon.com/sdk/webapps.html
119. toleranța la defecte
securitatea
managementul memoriei
performanța
interacțiunea cu utilizatorul
Dr. Sabin Buragawww.purl.org/net/busaco
Aspecte de interes privind navigatorul Web:
121. unele procese care trebuie realizate de browser
pot fi executate la nivel de server – de pildă, în cloud
Dr. Sabin Buragawww.purl.org/net/busaco
Navigatoare Web hibride
122. Dr. Sabin Buragawww.purl.org/net/busaco
Amazon Silk (bazat pe WebKit și pe interpretorul V8)
dacă procesul de rendering nu poate fi efectuat la distanță,
se realizează o procesare la nivel local – pe dispozitivul Kindle
123. Jon Jenkins, “Amazon Silk”, O’Reilly Velocity EU, 2011
pentru detalii, a se vizita http://amazonsilk.wordpress.com/
Dr. Sabin Buragawww.purl.org/net/busaco
unele activități se pot fi realiza în cloud
(în cazul Amazon Silk, se recurge la EC2)
126. polyfills
uzual, implementate via JavaScript
Dr. Sabin Buragawww.purl.org/net/busaco
Dacă un browser Web nu are (încă) suport pentru
o anumită tehnologie, putem adopta soluții alternative
127. polyfills
exemplificare: HTML5 Cross Browser Polyfills
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Dr. Sabin Buragawww.purl.org/net/busaco
Dacă un browser Web nu are (încă) suport pentru
o anumită tehnologie, putem adopta soluții alternative
129. Există mai multe
interpretoare (parsers)
în cadrul unui
browser Web? De ce?
Care sunt mai ușor
de implementat:
extensiile sau
plug-in-urile?
Dr. Sabin Buragawww.purl.org/net/busaco
întrebări (pentru acasă)