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 (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
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
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
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
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
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 (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
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
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
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
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 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
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 (13/13) Perspective Web la nivel de client. Limbajul ES6Sabin Buraga
Cele mai importante aspecte referitoare la noua versiune a limbajului JavaScript (ES6 sau ECMAScript 2015), inclusiv diverse exemplificări. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (7/13) Limbajul de programare JavaScriptSabin Buraga
Aspecte esențiale referitoare la limbajul de programare JavaScript (de la sintaxa de bază la obiecte & date JSON). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
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 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
WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An ...Sabin Buraga
A lecture delivered for "Web Application Development" discipline (MSc studies at Faculty of Computer Science, 'Alexandru Ioan Cuza' University of Iasi, Romania): https://profs.info.uaic.ro/~busaco/teach/courses/wade/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
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
CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansambluSabin Buraga
O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://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
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
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
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 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
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
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţialeSabin 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
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
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
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
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 (13/13) Perspective Web la nivel de client. Limbajul ES6Sabin Buraga
Cele mai importante aspecte referitoare la noua versiune a limbajului JavaScript (ES6 sau ECMAScript 2015), inclusiv diverse exemplificări. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (7/13) Limbajul de programare JavaScriptSabin Buraga
Aspecte esențiale referitoare la limbajul de programare JavaScript (de la sintaxa de bază la obiecte & date JSON). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
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 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
WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An ...Sabin Buraga
A lecture delivered for "Web Application Development" discipline (MSc studies at Faculty of Computer Science, 'Alexandru Ioan Cuza' University of Iasi, Romania): https://profs.info.uaic.ro/~busaco/teach/courses/wade/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
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
CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansambluSabin Buraga
O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://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
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
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
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 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
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
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţialeSabin 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
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
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
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
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 2016 (09/13) Procesarea datelor XML & HTML. Simple API for XML. Procesări...Sabin 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
CLIW 2017-2018 (12/12) Performanţa aplicaţiilor Web la nivel de clientSabin 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
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
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
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
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
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.
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
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 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 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
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
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
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
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. C.S. Lewis
Dr. Sabin Buragawww.purl.org/net/busaco
“You are never too old to set another goal
or to dream a new dream.”
3. suplimentar față de obiectul Document,
browser-ul Web pune la dispoziție Window
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
4. obiectul Window oferă acces la mediul de redare
proprietăți importante:
window self top parent opener frames
document location navigator
history undoManager
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
5. obiectul Window oferă acces la mediul de redare
proprietăți importante:
applicationCache
onNumeEveniment
(stabilirea de funcții pentru tratarea evenimentelor)
exemple: onplay ondrag onprogress etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
6. obiectul Window oferă acces la mediul de redare
metode folositoare:
open() close() stop()
focus() blur()
alert() confirm() prompt()
print()
showModalDialog()
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
8. # preia conținutul de pe rețea, dacă e posibil
NETWORK:
stiri.html
# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html
politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
Dr. Sabin Buragawww.purl.org/net/busaco
CACHE MANIFEST
# versiunea 1.0.1
# resurse (proprii / din alte domenii) ce pot fi plasate în cache
index.html
cache.html
html5.css
figura.jpg
img/sigla.png
http://www.undeva.info/stiluri.css
9. ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status
Dr. Sabin Buragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
11. ApplicationCache
pentru exemple și alte aspecte de interes, a se consulta:
http://diveintohtml5.info/offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://appcachefacts.info/
Dr. Sabin Buragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
13. WindowTimers
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, etc.
are to be expected.” (W3C, 2013)
Dr. Sabin Buragawww.purl.org/net/busaco
Specificarea contoarelor de timp
14. Navigator
subinterfețele NavigatorID și NavigatorAbilities
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
Dr. Sabin Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
15. interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product;
readonly attribute DOMString userAgent;
};
Dr. Sabin Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
datele furnizate pot fi folosite la identificarea utilizatorului
browser-ul ar trebui să ofere cât mai puține informații
16. protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
implicit, într-un URI se permit schemele:
bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp
Dr. Sabin Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
17. protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
tipuri MIME uzuale suportate de browser:
Dr. Sabin Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
application/x-www-form-urlencoded application/xhtml+xml application/xml
image/gif image/jpeg image/png image/svg+xml
text/cache-manifest text/css text/html text/plain text/xml
18. stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
http://www.w3.org/TR/html5/editing.html#dnd
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
19. un element HTML poate fi sursă pentru drag & drop
dacă are atașat atributul draggable="true" și are definită
o funcție de tratare a evenimentului dragstart
ce stochează datele ce vor fi transferate către destinație
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
20. datele de transferat vor fi stocate
de un obiect DataTransfer
se permit diverse operații:
copiere (copy copyLink)
mutare (move linkMove),
realizarea unei legături (link) etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
21. destinatarul operațiunii drag & drop va avea definit
atributul dropzone a cărui valoare specifică tipul MIME
al datelor ce vor fi acceptate
e.g., string:text/plain pentru a accepta orice șir de caractere
sau file:image/jpeg pentru un fișier JPEG
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
22. evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
23. pentru exemple și alte detalii, a se vizita:
https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop
http://www.html5rocks.com/tutorials/dnd/basics/
http://dev.opera.com/articles/view/drag-and-drop/
http://html5demos.com/drag
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
25. editing API
conținutul poate fi marcat ca fiind editabil
via atributul contenteditable
document.designMode="on"
întreg documentul poate fi editat la nivel local
Dr. Sabin Buragawww.purl.org/net/busaco
Alte API-uri de bază:
26. editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode:
execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Alte API-uri de bază:
28. definește un API abstract pentru transmiterea de date
pe baza protocolului de transfer WebSocket – RFC 6455
succesor al abordării Comet (Reverse Ajax)
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
29. specificație în stadiul W3C Candidate Recommendation
(20 septembrie 2012)
www.w3.org/TR/websockets/
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
30. }
attribute EventHandler onopen;
// funcții de tratare
attribute EventHandler onmessage;
// a evenimentelor
attribute EventHandler onerror;
// privitoare la comunicarea
attribute EventHandler onclose;
// prin rețea
readonly attribute DOMString protocol;
void send (in (DOMString or Blob or ArrayBuffer) data); // trimite date
void close (optional unsigned short code, optional DOMString reason);
// închide conexiunea
Dr. Sabin Buragawww.purl.org/net/busaco
[Constructor(DOMString url,
optional (DOMString or DOMString[ ]) protocols)]
interface WebSocket : EventTarget {
readonly attribute DOMString url;
const unsigned short CONNECTING = 0; // constante: starea conexiunii
const unsigned short OPEN
= 1;
const unsigned short CLOSING
= 2;
const unsigned short CLOSED
= 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
31. transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
32. maniera generală de
transfer al datelor
Dr. Sabin Buragawww.purl.org/net/busaco
// creăm un socket Web
var sock = new WebSocket ("ws://www.undeva.info/");
// asociem funcțiile de tratare a evenimentelor
sock.onopen = function (evt) {
/* socket-ul a fost deschis, transferul poate începe… */ };
sock.onclose = function (evt) {
console.log ("Socket-ul a fost închis; cod de stare: " + evt.code)
};
sock.onmessage = function (evt) {
console.log ("Am recepționat mesajul: " + evt.data);
};
sock.onerror = function (evt) {
console.log ("A survenit o eroare…");
};
// trimitem date
sock.send ("Salutări flaușate!");
// am închis conexiunea
sock.close ();
33. Dr. Sabin Buragawww.purl.org/net/busaco
// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 50ms, dacă rețeaua oferă suficientă lățime de bandă
var socket =
new WebSocket ('ws://joc.undeva.org:1974/updates');
socket.onopen = function () {
setInterval (function() {
oferă numărul de octeți
if (socket.bufferedAmount == 0)
ce n-au fost transmiși încă
socket.send (oferaDate ());
}, 50);
};
34. diverse instrumente de programare
la nivel de server:
apache-websocket (modul Apache), proiectul APE,
framework-ul Autobahn (Web, aplicații mobile, IoT),
HornetMQ, Kaazing, Jetty, Juggernaut, MigratoryData,
PHPWebsocket, socket.io (bazat pe Node.js),
websockify etc.
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
35. diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:
Arduino WebSocket (C++), clasa WebSocket (Dart),
Java API for WebSocket (JSR 356), libwebsockets (C),
ScalaWebSockets (framework-ul Play), Web-socket-js,
WebSocket Sharp (.NET), ZTWebSocket (Objective-C),…
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
36. navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse protocoale bazate pe TCP
(pub/sub, VNC, XMPP,…)
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
39. pentru diverse exemple și resurse de interes, a se studia:
https://developer.mozilla.org/docs/WebSockets
http://www.websocket.org/aboutwebsocket.html
http://html5demos.com/web-socket
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
40. mecanism standardizat de transmitere
a unui flux continuu de date de la server spre client
(push events)
tratarea recepționării datelor provenite de la server
se realizează via evenimente DOM
Dr. Sabin Buragawww.purl.org/net/busaco
EventSource API (Server-Send Events)
41. specificație în stadiu de ciornă (15 noiembrie 2013)
http://dev.w3.org/html5/eventsource/
Dr. Sabin Buragawww.purl.org/net/busaco
EventSource API (Server-Send Events)
42. // tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (evt) {
console.log ("Am primit date de la server: " + evt.data);
}
flux.onerror = function (evt) {
if (evt.eventPhase != EventSource.CLOSED)
console.log ("A survenit o eroare…");
}
};
Dr. Sabin Buragawww.purl.org/net/busaco
// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) { // eventual, Modernizr.eventsource
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://stiri.info/web/today");
43. oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
44. specificație a Consorțiului Web
statut Candidate Recommendation (mai 2012)
http://www.w3.org/TR/webmessaging/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
45. mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
46. datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
47. interfața MessageChannel specifică
un canal de transmitere de mesaje
constituit din 2 porturi (sursă și destinație)
vezi și interfața MessagePort
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
49. Dr. Sabin Buragawww.purl.org/net/busaco
pentru detalii, a se parcurge și
http://dev.opera.com/articles/view/window-postmessage-messagechannel/
http://msdn.microsoft.com/en-us/library/ie/hh781494%28v=vs.85%29.aspx
50. conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
nu interacționează direct cu utilizatorul
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
51. conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
mediul de execuție a unui worker e complet separat,
codul fiind rulat concurent/paralel, în mod asincron
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
52. se oferă un API pentru instanțierea și manipularea
programelor JavaScript de tip worker
specificație W3C Candidate Recommendation (mai 2012)
http://www.w3.org/TR/workers/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
53. un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
54. // funcția de tratare a erorilor
attribute Function? onerror;
// tratează lipsa conectivității la rețea
attribute Function? onoffline;
// tratează disponibilitatea conectivității la rețea
attribute Function? ononline;
};
WorkerGlobalScope implements WorkerUtils;
Dr. Sabin Buragawww.purl.org/net/busaco
interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location;
void close ();
55. dedicated worker
“legat” de creatorul lui
interacțiunea cu el se face via porturi de mesaje
– vezi interfața MessagePort
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
56. [Constructor(in DOMString scriptURL)]
interface Worker : AbstractWorker {
// termină execuția programului (worker-ului)
void terminate ();
// plasează un mesaj
void postMessage (any message,
optional sequence<Transferable> transfer);
// tratează apariția unui mesaj ce poate fi procesat
attribute Function? onmessage;
};
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
57. shared worker
posedă un nume prin care poate fi referit
de alte script-uri având aceeași origine
vezi interfața DedicatedWorkerGlobalScope
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
58. un worker are acces la API-uri specifice
desemnate prin interfața WorkerUtils
de exemplu, se poate interacționa cu navigatorul Web
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
59. Dr. Sabin Buragawww.purl.org/net/busaco
// worker.js – determină numere prime
var numar = 1;
search: while (true) {
numar += 1;
for (var i = 2; i <= Math.sqrt (numar); i++)
if (numar % i == 0)
continue search;
// a fost determinat un număr prim
postMessage (numar); // transmitem valoarea lui printr-un mesaj
}
<p>Cel mai mare număr prim calculat: <div id="rezultat"></div></p>
<script>
var worker = new Worker('worker.js'); // instanțiem lucrătorul JavaScript
worker.onmessage = function (event) { // tratăm mesajul recepționat
// plasăm datele (rezultatul) în cadrul elementului HTML cu id='rezultat'
document.getElementById ('rezultat').textContent = event.data;
};
</script>
60. restricții:
nu se poate modifica arborele DOM al paginii
și nu se pot altera variabilele globale
pot fi efectuate transferuri asincrone via XMLHttpRequest
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
61. oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
62. recomandare a Consorțiului Web (iulie 2013)
www.w3.org/TR/webstorage/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
63. interfața Storage oferă acces la o listă de perechi (itemi)
de forma cheie—valoare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
64. Dr. Sabin Buragawww.purl.org/net/busaco
interface Storage {
// mărimea spațiului de stocare
readonly attribute unsigned long length;
// cheie pentru acces la date
DOMString? key (unsigned long index);
// consultarea unui item
getter DOMString getItem (DOMString key);
// asignarea de valori pentru un item
setter creator void setItem (DOMString key, DOMString value);
// eliminarea unui item
deleter void removeItem (DOMString key);
// ștergerea spațiului de stocare
void clear ();
}
65. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
66. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
stocare nepersistentă
(suport pentru sesiuni)
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
67. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
alternativă la cookie-uri
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
68. document.querySelector ('#editor').addEventListener ('keyup',
function (eveniment) { // la fiecare eliberare a tastei…
// stocăm conținutul și data editării
localStorage.setItem ('valoare', this.value);
localStorage.setItem ('data', (new Date ()).getTime ());
}, false);
Dr. Sabin Buragawww.purl.org/net/busaco
<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
69. față de cookie-uri, datele stocate în localStorage
nu au un timp de viață stabilit a-priori
(pot fi șterse explicit de utilizator sau prin program)
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
70. datele memorate în localStorage
sunt disponibile numai la nivel local – în browser
(serverul Web nu le poate accesa direct decât
via un program ce le transferă explicit prin HTTP)
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
71. suport de stocare de date la nivel obiectual
via un API asincron
W3C Candidate Recommendation (iulie 2013)
http://www.w3.org/TR/IndexedDB/
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
72. obiectele de stocare compun baze de date
identificate prin nume
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
fiecare bază de date are asociată o versiune (număr >= 0)
74. Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
datele sunt indexate, în sensul că fiecare înregistrare
posedă o cheie unică de tip Array (JavaScript),
DOMString (WebIDL), Date (JavaScript) sau float (WebIDL)
75. de asemenea, o înregistrare are o valoare
de un anumit tip simplu sau structurat – e.g., Object
valoarea propriu-zisă e obținută prin evaluarea
așa-numitei căi asociate cheii (key path)
(uzual, un șir de caractere ori șiruri delimitate de „.”)
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
76. };
Dr. Sabin Buragawww.purl.org/net/busaco
interface IDBObjectStore {
readonly attribute DOMString
name;
readonly attribute DOMString
keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
readonly attribute boolean
autoIncremenent;
IDBRequest put (any value, optional any key); // operații privind cheile
IDBRequest add (any value, optional any key);
IDBRequest delete (any key);
IDBRequest get (any key);
IDBRequest clear ();
IDBRequest openCursor (optional any? range,
optional DOMString direction);
IDBIndex createIndex (DOMString name, any keyPath,
optional IDBIndexParameters optionalParameters);
IDBIndex index (DOMString name);
void deleteIndex (DOMString indexName);
IDBRequest count (optional any key);
77. accesul la înregistrări se poate realiza și via indecși
meta-datele asociate indecșilor sunt oferite de
interfețele IDBIndex și IDBIndexSync
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
78. operațiile asupra datelor din baza de date
se realizează prin intermediul tranzacțiilor
fiecare tranzacție are asociată o conexiune
o tranzacție poate fi deschisă (inițiată) în modurile:
readonly, readwrite, versionchange
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
79. attribute Function? onabort;
attribute Function? oncomplete;
attribute Function? onerror;
};
// tratarea evenimentelor
Dr. Sabin Buragawww.purl.org/net/busaco
interface IDBTransaction : EventTarget {
readonly attribute DOMString mode; // modul de efectuare
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();
var tran = db.transaction (); // crearea unei tranzacții
var adr = tran.objectStore ('Adrese');
var loc = adr.add ( { nume: 'Copou', numar: '11' } );
var locatie = adr.get (1);
// locatie.nume === 'Copou'
80. iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt:
next, nextunique, prev, prevunique
a se vedea interfețele IDBCursor și IDBCursorSync
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
81. IDBRequest update (any value);
void advance (unsigned long count);
void continue (optional any key);
IDBRequest delete ();
};
// sursa datelor
// direcția de iterare
// cheia
// cheia primară
Dr. Sabin Buragawww.purl.org/net/busaco
interface IDBCursor {
readonly attribute Object source;
readonly attribute DOMString direction;
readonly attribute any key;
readonly attribute any primaryKey;
// actualizarea valorilor
82. pentru detalii și exemplificări, a se parcurge:
http://docs.webplatform.org/wiki/apis/indexedDB
https://developer.mozilla.org/docs/IndexedDB
http://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb/
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
83. suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (septembrie 2013)
http://www.w3.org/TR/FileAPI/
Dr. Sabin Buragawww.purl.org/net/busaco
File API
85. Dr. Sabin Buragawww.purl.org/net/busaco
interface FileReader : EventTarget {
void readAsArrayBuffer (Blob blob); // metode de citire asincronă
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString encoding);
void readAsDataURL (Blob blob);
void abort ();
const unsigned short EMPTY = 0;
// coduri de stare
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
readonly attribute any result;
// rezultatul obținut: File sau Blob
readonly attribute DOMError error;
attribute [TreatNonCallableAsNull] Function? onloadstart;
attribute [TreatNonCallableAsNull] Function? onprogress;
attribute [TreatNonCallableAsNull] Function? onload;
tratarea
attribute [TreatNonCallableAsNull] Function? onabort;
evenimentelor
attribute [TreatNonCallableAsNull] Function? onerror;
attribute [TreatNonCallableAsNull] Function? onloadend;
};
86. detalii tehnice și exemplificări:
developer.mozilla.org/Using_files_from_web_applications
http://docs.webplatform.org/wiki/apis/file
html5demos.com/file-api
https://github.com/coremob/camera
Dr. Sabin Buragawww.purl.org/net/busaco
File API
87. Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
cookie-uri clasice
Dr. Sabin Buragawww.purl.org/net/busaco
Privire de ansamblu
asupra stocării la nivel de client
88. alertarea utilizatorului în afara contextului paginii Web
asupra apariției unui eveniment
specificație în lucru (septembrie 2013)
http://www.w3.org/TR/notifications/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Notifications
89. Dr. Sabin Buragawww.purl.org/net/busaco
Web Notifications
// o notificare afișată 20 de secunde
new Notification ("Ha, ha! Ai primit o notă la CLIW!", {
iconUrl: "nota10.png",
onshow: function() { setTimeout (notification.close (), 20000); }
}
);
exemple + amănunte:
https://developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
http://www.html5rocks.com/tutorials/notifications/quick/
http://caniuse.com/#feat=notifications
90. determinarea stării curente de vizibilitate a unei pagini
recomandare a Consorțiului Web (octombrie 2013)
http://www.w3.org/TR/page-visibility/
Dr. Sabin Buragawww.purl.org/net/busaco
Page Visibility
92. determinarea locației geografice a dispozitivului
W3C Recommendation (octombrie 2013)
http://www.w3.org/TR/geolocation-API/
Dr. Sabin Buragawww.purl.org/net/busaco
Geolocation API
93. Dr. Sabin Buragawww.purl.org/net/busaco
navigator.geolocation.getCurrentPosition (
proceseazaDate, // funcție prelucrând datele privind poziția geografică
trateazaErori, // nu s-a putut determina localizarea
{ // diverși parametri de control
enableHighAccuracy: true,
timeout: 10000,
// așteaptă max 10000 milisec. pentru a primi date
maximumAge: 8000 // preia din cache date privind poziția
}
// dacă nu-s mai vechi de 8000 de milisecunde
);
function proceseazaDate (localizare) {
alert ('latitudine: ' + localizare.coords.latitude +
'longitudine: ' + localizare.coords.longitude);
}
a se folosi watchPosition() pentru a prelua localizarea în mod continuu
94. de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo
Dr. Sabin Buragawww.purl.org/net/busaco
Geolocation API
95. tratarea evenimentelor
privind modificarea orientării și mișcarea dispozitivului
W3C Working Draft (decembrie 2011)
http://www.w3.org/TR/orientation-event/
Dr. Sabin Buragawww.purl.org/net/busaco
DeviceOrientation Event Specification
97. nu există suport complet oferit de nici un navigator
exemple practice (dependente de browser):
Dr. Sabin Buragawww.purl.org/net/busaco
DeviceOrientation Event Specification
developer.mozilla.org/docs/Web/Guide/Events/Orientation_and_motion_data_explained
http://www.html5rocks.com/en/tutorials/device/orientation/
http://people.opera.com/richt/release/demos/orientation/marinecompass/
98. comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
specificație în lucru la Consorțiul Web (septembrie 2013)
http://www.w3.org/TR/webrtc/
99. API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio)
furnizate de un senzor local – tipic, un Webcam
http://www.w3.org/TR/mediacapture-streams/
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
100. // accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utililizatorului
navigator.getUserMedia (
{ video: true, // pot fi impuse diverse constrângeri
audio: true }, // în acest caz, dorim și video și audio
prelucreazaFlux, trateazaErori
);
var video = document.getElementById ('monitor');
function prelucreazaFlux (flux) {
video.src = URL.createObjectURL (flux); // ‘alimentăm’ cu flux video
video.onerror = function () { flux.stop (); }; // eroare, deci oprim fluxul
flux.onended = function () { /* transmisia s-a terminat */ };
…
}
Dr. Sabin Buragawww.purl.org/net/busaco
<video id="monitor" autoplay="autoplay"></video>
102. API de interes:
RTCPeerConnection
permite ca doi utilizatori să comunice direct via browser
comunicațiile sunt coordonate pe baza unui canal
(e.g., instanțiat de un program via XMLHttpRequest)
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
103. API de interes:
RTCPeerConnection
oferă suport și pentru controlul sesiunii de transfer al
datelor, plus trimiterea de mesaje speciale (signaling)
transmiterea efectivă poate adopta
un anumit protocol bidirecțional – HTTP, SIP, XMPP,…
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
105. API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,
de date arbitrare, nu doar audio și/sau video
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
107. tutoriale & exemple demonstrative:
http://www.html5rocks.com/tutorials/webrtc/basics/
www.creativebloq.com/javascript/get-started-webrtc-1132857
http://mozilla.github.io/webrtc-landing/
http://webrtcdemo.com/
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
108. procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)
http://www.w3.org/TR/webaudio/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Audio API
109. pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
https://github.com/WebAudio/demo-list
Dr. Sabin Buragawww.purl.org/net/busaco
Web Audio API
110. Battery Status API – www.w3.org/TR/battery-status/
Network Information API – www.w3.org/TR/netinfo-api/
Push API – www.w3.org/TR/push-api/
Vibration API – www.w3.org/TR/vibration/
Ambient Light Events – www.w3.org/TR/ambient-light/
Progress Events – www.w3.org/TR/progress-events/
Proximity Events – www.w3.org/TR/proximity/
vezi și http://www.w3.org/2009/dap/
Dr. Sabin Buragawww.purl.org/net/busaco
Alte API-uri de interes (unele, neimplementate):
113. semantic markup
noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
includerea diverselor tipuri de conținut precum SVG
microdate – vezi inițiativa schema.org
conținut editabil
atribute specifice aplicațiilor: data-
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
114. prezentarea conținutului via foi de stiluri CSS
facilități CSS: animații, tranziții, transformări, coloane,…
www.w3.org/standards/techs/css#w3c_all
interogări privind mediile de redare (media queries)
suport pentru designul Web responsiv
utilizarea fonturilor externe – Web fonts
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
115. grafica 2D și/sau 3D
<canvas> în contextul 2D raster
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
116. multimedia
<audio> (MP3, OGG)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
117. acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
HTML5 în contextul TV + industriei auto
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
118. offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
119. connectivity & real-time
mesaje vehiculate între documente
transfer asincron via XMLHttpRequest – nivelul 2
WebSocket
evenimente recepționate de la server (server-side events)
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
120. asigurarea performanței
Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în URI
controlul disponibilității conexiunii la rețea
etc.
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5