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
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
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
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
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
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
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
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
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 (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
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).
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
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 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
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
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
O lectie de anatomie Web. Disectia unui document HTMLSabin Buraga
A presentation -- prepared for InfoEducatie 2012, a national IT contest for high-school students -- regarding the main methods to access (and process) parts of a HTML document by using CSS, XPath, and JavaScript (jQuery).
A presentation regarding search engines, Web robots and related technologies prepared to be delivered during "Computer Science at the Castle" Summer School (Macea, Arad, Romania, 2016).
O prezentare referitoare la motoare de căutare, roboți Web și alte tehnologii înrudite pregătită pentru Școala de vară "Informatica la Castel" (Macea, Arad, România, 2016): http://informaticalacastel.ro/
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 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 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 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
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 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
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
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 (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
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).
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
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 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
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
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
O lectie de anatomie Web. Disectia unui document HTMLSabin Buraga
A presentation -- prepared for InfoEducatie 2012, a national IT contest for high-school students -- regarding the main methods to access (and process) parts of a HTML document by using CSS, XPath, and JavaScript (jQuery).
A presentation regarding search engines, Web robots and related technologies prepared to be delivered during "Computer Science at the Castle" Summer School (Macea, Arad, Romania, 2016).
O prezentare referitoare la motoare de căutare, roboți Web și alte tehnologii înrudite pregătită pentru Școala de vară "Informatica la Castel" (Macea, Arad, România, 2016): http://informaticalacastel.ro/
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 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 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 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
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 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
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
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
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
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
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
WADe 2017-2018 (5/12) Data Modeling in RDF (Resource Description Framework)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
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 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
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 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
Similar to CLIW 2017-2018 (10/12) Programare Web. API-uri JavaScript în contextul HTML5 (I) (20)
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 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 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
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
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
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 (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
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 (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
5. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
mediu în care sunt redate obiectele de tip Document
exemple tipice:
tab-ul unei instanțe de browser Web
elementul <iframe> în care se încarcă o altă resursă
7. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
include un istoric al sesiunii curente (session history)
memorând secvența instanțelor de tip Document
care au fost redate utilizatorului
documentul curent e considerat ca fiind document activ
10. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
posedă un proprietar (creator browsing context)
desemnat de o origine (origin)
originile pot fi partajate și sunt imutabile, în general
doar domeniul unei origini poate fi alterat
via proprietatea document.domain
12. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
anumite elemente – de exemplu, <iframe> –
pot instanția alte contexte:
contexte imbricate (nested browsing contexts)
astfel, un context imbricat are asociat un context părinte
pot exista diverse contexte copil „legate”
de un context părinte
13. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
anumite elemente – de exemplu, <iframe> –
pot instanția alte contexte:
contexte imbricate (nested browsing contexts)
un context imbricat poate fi setat să întârzie încărcarea
unei resurse (delaying load events mode)
15. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
context de navigare
poate avea asignat un nume (browsing context name)
denumiri speciale – valori ale atributului target
desemnând numele contextului de navigare:
_blank _self _parent _top
<a href="http://undeva.info/" target="_blank">…</a>
16. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
remarcă:
un document (instanță de tip Document)
nu trebuie obligatoriu să aibă atașat un context
caz frecvent:
instrumente de indexare a conținutului
(roboți ai motoarelor de căutare)
(re)vezi unul dintre
cursurile anterioare
18. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
uzual, unei instanțe de tip Document
îi corespunde un obiect Window (relație 1-la-1)
excepție:
reutilizarea unui obiect Window pentru prezentarea
altei instanțe de Document în cadrul aceluiași context
e.g., înlocuirea unui document vid (about:blank) cu altul
19. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
uzual, unei instanțe de tip Document
îi corespunde un obiect Window (relație 1-la-1)
excepție:
refolosirea unei instanțe de Document pentru a încărca
alte obiecte Window via metoda document.open()
25. Dr.SabinBuragawww.purl.org/net/busaco
politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
pentru fiecare pagină Web a aplicației
CACHE MANIFEST
# Aplicație Web minunată (versiunea 1.0.1)
# resurse (proprii / din alte domenii) ce pot fi plasate în cache
index.html
cache.html
html5.css
fig.jpg
img/logo.png
http://www.penguin.info/tux.css
# preia de pe rețea conținutul unor resurse, dacă e posibil
NETWORK:
news.html
# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html
27. Dr.SabinBuragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
ApplicationCache
actualmente, această tehnică e considerată învechită
“This feature is in the process of being removed from
the Web platform. (This is a long process that takes many years.)
Using any of the offline Web application features at this time
is highly discouraged. Use service workers instead.”
conform html.spec.whatwg.org/multipage/offline.html#offline
30. Dr.SabinBuragawww.purl.org/net/busaco
Specificarea contoarelor de timp
WindowTimers
observații (W3C, 2017):
“Timers can be nested; after 5 such nested timers, however,
the interval is forced to be at least four milliseconds.”
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, etc.,
are to be expected.”
31. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
interfața Navigator având sub-interfețele:
NavigatorID – identitatea browser-ului
NavigatorLanguage – preferințe lingvistice ale clientului
NavigatorOnline – starea online/offline a navigatorului
NavigatorContentUtils – manipularea conținuturilor
NavigatorCookies – informații privind cookie-urile
NavigatorPlugins – managementul plugin-urilor
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
34. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
remarcă:
“In certain cases, despite the best efforts of the entire
industry, Web browsers have bugs and limitations
that Web authors are forced to work around.” (W3C, 2017)
detectarea clientului trebuie întotdeauna
să ia în considerație versiunile actuale
se presupune că versiunile viitoare/necunoscute
vor fi compatibile cu cea curentă
35. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
registerProtocolHandler() registerContentHandler()
implicit, într-un URI se permit scheme precum:
bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp
36. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
tipuri Media-Type (MIME) uzuale:
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
43. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
www.w3.org/TR/html5/editing.html#drag-and-drop
html.spec.whatwg.org/multipage/dnd.html#dnd
developer.mozilla.org/Web/API/HTML_Drag_and_Drop_API
44. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
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
45. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
datele de transferat vor fi stocate
de un obiect DataTransfer
developer.mozilla.org/Web/API/DataTransfer
se permit diverse operații – precizate de effectsAllowed:
copiere (copy copyLink)
mutare (move linkMove),
realizarea unei legături (link) etc.
46. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
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
51. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
editing API
conținutul poate fi marcat ca fiind editabil
via atributul contenteditable
document.designMode="on"
întreg documentul poate fi editat la nivel local
www.w3.org/TR/html5/editing.html
52. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
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.
developer.mozilla.org/Web/API/Document/execCommand
53. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
scripting
suport pentru execuția de cod
în contextul unui document HTML:
procesarea elementelor <script>
navigarea via URL-uri folosind schema javascript:
managementul funcțiilor de tratare a evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG
54. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
scripting
interfața ErrorEvent pentru raportarea erorilor
interface ErrorEvent : Event {
readonly attribute DOMString message;
readonly attribute DOMString filename;
readonly attribute unsigned long lineno;
readonly attribute unsigned long colno;
readonly attribute any error;
};
61. Dr.SabinBuragawww.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 (ev) {
// socket-ul a fost deschis, transferul datelor poate începe…
};
sock.onclose = function (ev) {
console.log ("Socket-ul a fost închis; cod de stare: " + ev.code)
};
sock.onmessage = function (ev) {
console.log ("Am recepționat mesajul: " + ev.data);
};
sock.onerror = function (ev) {
console.error ("A survenit o eroare…");
};
// trimitem date
sock.send ("Salutări hibernale! :)");
// am închis conexiunea
sock.close (); maniera generală de
transfer al datelor
62. Dr.SabinBuragawww.purl.org/net/busaco
// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 33ms, dacă rețeaua oferă suficientă lățime de bandă
var sock =
new WebSocket ('ws://joc.undeva.org:19740/updates');
sock.onopen = function () {
setInterval (function() {
if (sock.bufferedAmount === 0)
sock.send (oferaDate ());
}, 33);
};
oferă numărul de octeți
ce n-au fost transmiși încă
63. Dr.SabinBuragawww.purl.org/net/busaco
// exemplu în contextul IoT (Internet of Things):
// implementarea unui comutator
sock.onmessage = function (ev) {
if (event.data == 'on') {
lamp.turnOn();
} else if (ev.data == 'off') {
lamp.turnOff();
}
};
exemple și resurse de interes:
www.websocket.org/aboutwebsocket.html
html5demos.com/web-socket
64. Dr.SabinBuragawww.purl.org/net/busaco
WebSocket API
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
github.com/facundofarias/awesome-websockets
65. Dr.SabinBuragawww.purl.org/net/busaco
WebSocket API
diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:
Arduino WebSocket (C++), Beast (C++),
Java API for WebSocket (JSR 356), libwebsockets (C),
Rachet (PHP), SignalR (.NET), Tyrus (Java), Web-socket-js,
clasa WebSocket (Dart), ZTWebSocket (Objective-C),…
github.com/facundofarias/awesome-websockets
71. Dr.SabinBuragawww.purl.org/net/busaco
EventSource API (Server-Send Events)
mecanism standardizat de transmitere prin HTTP
a unui flux continuu de date – în format text/event-stream –
de la server spre client (push events)
fără a se închide conexiunea
tratarea recepționării datelor provenite de la server
se realizează via evenimente DOM
73. Dr.SabinBuragawww.purl.org/net/busaco
interface EventSource : EventTarget {
readonly attribute USVString url;
readonly attribute boolean withCredentials;
// valori ale stării conexiunii
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
// evenimente de rețea ce pot fi tratate
attribute EventHandler onopen;
attribute EventHandler onmessage;
attribute EventHandler onerror;
void close();
};
specificația WebIDL a interfeței
74. Dr.SabinBuragawww.purl.org/net/busaco
// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) {
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://news.info/web/today");
// tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (ev) {
console.log ("Am primit date de la server: " + ev.data);
}
flux.onerror = function (ev) {
if (ev.eventPhase != EventSource.CLOSED)
console.error ("A survenit o eroare…");
else {
/* conexiunea a fost închisă */
}
}
};
un exemplu complet:
github.com/mdn/dom-examples/tree/master/server-sent-events
78. Dr.SabinBuragawww.purl.org/net/busaco
Web Messaging
mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
documentele HTML5 pot transmite date unul altuia,
chiar dacă aparțin unor domenii Internet diferite
mesajele pot conține obiecte
de tip File Blob, FileList, ArrayBuffer etc.
83. Dr.SabinBuragawww.purl.org/net/busaco
Broadcast Channel API
permite comunicații simple între contexte de navigare
(ferestre, tab-uri, <iframe>-uri) având aceeași origine
(i.e. pagini ale aceluiași sit Web)
expedierea datelor se face via metoda postMessage()
recepționarea datelor se realizează
tratând evenimentul onmessage
developer.mozilla.org/Web/API/Broadcast_Channel_API
87. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
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
93. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
un obiect WorkerGlobalScope are asociate, de asemenea:
un tip – type (classic sau module)
o adresă – url (inițial, null)
un nume – name (șir de caractere)
o stare a conexiunii HTTPS ("none", "deprecated", "modern")
o politică de securitate (CSP – Content Security Policy)
95. Dr.SabinBuragawww.purl.org/net/busaco
[Global=(Worker, DedicatedWorker), Exposed=DedicatedWorker]
interface DedicatedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable] readonly attribute DOMString name; // nume specific
void postMessage (any message, // plasează un mesaj
optional sequence<Transferable> transfer = [ ]);
void close (); // oprește execuția
// tratează apariția unui mesaj ce poate fi procesat
attribute EventHandler onmessage;
// tratează erorile survenite
attribute EventHandler onmessageerror;
};
“Dedicated web workers are instantiated by
the main process and they can communicate only with it.”
(Guillaume Cedric Marty, 2015)
96. Dr.SabinBuragawww.purl.org/net/busaco
<form>
<div>
<label for="number1">Primul număr: </label>
<input type="text" id="number1" value="0">
</div>
<div>
<label for="number2">Al doilea număr: </label>
<input type="text" id="number2" value="0">
</div>
</form>
<p class="result">Rezultatul înmulțirii: 0</p>
…
<!-- programul JS principal care preia valorile numerelor și
le trimite lucrătorului să le proceseze -->
<script src="main.js"></script>
exemplu complet – înmulțirea a două numere:
github.com/mdn/simple-web-worker
97. Dr.SabinBuragawww.purl.org/net/busaco
// Program principal care va recurge la un worker pentru procesarea datelor
var nr1 = document.querySelector('#number1'); // preluăm câmpurile din formular
var nr2 = document.querySelector('#number2');
var rezultat = document.querySelector('.result');
var lucrator = new Worker ("worker.js"); // instanțiem un „lucrător” dedicat
nr1.onchange = function () { // s-a modificat valoarea primului câmp
lucrator.postMessage ([nr1.value, nr2.value]); // se trimit date worker-ului
console.log ('Mesaj expediat lucrătorului');
};
nr2.onchange = function () { // s-a modificat valoarea câmpului al II-lea
lucrator.postMessage ([nr1.value, nr2.value]); // se trimit date
console.log ('Mesaj expediat lucrătorului');
};
lucrator.onmessage = function (ev) { // date primite de la worker
rezultat.textContent = ev.data; // ce vor fi plasate în documentul Web
console.log ('Mesaj primit de la lucrător');
};
98. Dr.SabinBuragawww.purl.org/net/busaco
// Codul-sursă al lucrătorului: worker.js
onmessage = function (ev) {
console.log ('Mesaj recepționat de la programul principal');
// datele de la programul principal au fost transmise ca tablou
var rezultat = 'Rezultatul înmulțirii: ' + (ev.data[0] * ev.data[1]);
console.log ('Se trimite un mesaj cu răspunsul programului principal');
postMessage (rezultat);
}
99. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
shared worker
are un nume ce desemnează cod JavaScript partajabil
poate fi utilizat de toate procesele având (rulând pe)
aceeași origine – tab-uri ale aceleași instanțe de
browser, elemente <iframe> sau alți lucrători partajați –,
comunicând cu acestea
100. Dr.SabinBuragawww.purl.org/net/busaco
[Global=(Worker, SharedWorker), Exposed=SharedWorker]
interface SharedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable] readonly attribute DOMString name; // nume specific
void close (); // oprește execuția
// tratează unei conexiuni la worker din partea unui client
attribute EventHandler onconnect;
};
un „lucrător” partajat (shared worker)
are asociate o origine și un URL și va recepționa mesaje
via evenimente connect pentru fiecare conexiune în parte
102. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
service worker
cod responsabil cu accesarea unor servicii externe
(disponibile prin Internet)
specificație W3C în regim de ciornă (2 noiembrie 2017)
www.w3.org/TR/service-workers/
resurse de interes:
jakearchibald.github.io/isserviceworkerready/resources.html
103. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
service worker
“Service workers essentially act as proxy servers that sit
between Web applications, and the browser and the network
(when available). They are intended to (amongst other
things) enable the creation of effective offline experiences,
intercepting network requests, and taking appropriate
action based on whether the network is available, and
updated assets reside on the server.”
developer.mozilla.org/Web/API/Service_Worker_API
104. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
service worker
reprezintă un „lucrător” – fișier JavaScript –
ce va răspunde la evenimente specifice unei origini
fiind asincron, opțiunile sincrone ale API-urilor
localStorage și XMLHttpRequest nu pot fi utilizate
comunicarea se poate realiza exclusiv prin HTTPS
107. Dr.SabinBuragawww.purl.org/net/busaco
if ('serviceWorker' in navigator) { // există suport disponibil în browser?
// la încărcarea resursei se înregistrează și codul JS de tip service worker
window.addEventListener ('load', function() {
navigator.serviceWorker.register ('/service-worker.js')
.then (function (reg) { // succes
console.log('ServiceWorker înregistrat cu succes: ',
reg.scope); // se indică și domeniul de vizibilitate (scope)
}, function (eroare) {
// a apărut o eroare… :(
console.log ('ServiceWorker – eroare survenită: ', eroare);
});
});
}
109. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
service worker
după înregistrare, se va instala codul „lucrătorului” –
tratându-se evenimentul install și, opțional, controlând
politica de stocare în cache a resurselor ce vor fi folosite
controlul memoriei cache se realizează via CacheStorage
developer.mozilla.org/en-US/docs/Web/API/CacheStorage
care poate include obiecte de tip Cache
developer.mozilla.org/en-US/docs/Web/API/Cache
110. Dr.SabinBuragawww.purl.org/net/busaco
var url-uriCache = [ // lista adreselor Web
'/', // ale resurselor statice
'/styles/stil.css', // care pot fi stocate în cache
'/scripts/main.js',
'/images/logo.png'
];
this.addEventListener ('install', function (ev) {
ev.waitUntil ( // se așteaptă până când resursele sunt plasate în cache
caches.open ('v1') // prima versiune a cache-ului creat
.then (function(cache) {
return cache.addAll (url-uriCache);
})
);
});
metode oferite de interfața Cache:
add() addAll() put() match() matchAll() keys() delete()
111. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
service worker
pentru fiecare eveniment fetch recepționat, „lucrătorul”
poate oferi conținutul solicitat (fie din cache,
fie de la distanță – e.g., invocând un serviciu Web)
evenimentul fetch este emis de fiecare dată
când se solicită o resursă aflată sub controlul „lucrătorului”
112. Dr.SabinBuragawww.purl.org/net/busaco
// se tratează evenimentul fetch
this.addEventListener ('fetch', function (ev) {
ev.respondWith (
caches.match (ev.request) // resursa solicitată există deja în cache?
.then (function (response) {
if (response) { // da (cache hit)
return response;
}
return fetch (ev.request); // se execută un fetch() real
}
)
);
});
exemplificări complete:
developer.mozilla.org/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers/
119. Dr.SabinBuragawww.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 ();
}
metodele setItem () și removeItem ()
se consideră ca fiind atomice
123. Dr.SabinBuragawww.purl.org/net/busaco
Web Storage
orice modificare a zonei de stocare
conduce la emiterea evenimentului storage
interface StorageEvent : Event {
readonly attribute DOMString? key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
124. Dr.SabinBuragawww.purl.org/net/busaco
<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
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);
134. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
de asemenea, o înregistrare (record) are o valoare
corespunzătoare unui tip de date ECMAScript
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 „.”)
135. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBObjectStore { // specifică maniera de stocare
readonly attribute DOMString name;
readonly attribute DOMString keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
readonly attribute boolean autoIncrement;
IDBRequest put (any value, optional any key); // operații privind cheile
IDBRequest add (any value, optional any key);
IDBRequest delete (any query);
IDBRequest clear ();
IDBRequest get (any query);
IDBRequest getKey (any query);
IDBRequest getAll (optional any query,
optional [EnforceRange] unsigned long count);
IDBRequest getAllKeys (optional any query,
optional [EnforceRange] unsigned long count);
IDBRequest count (optional any query);
136. Dr.SabinBuragawww.purl.org/net/busaco
// operații privind cursoarele
IDBRequest openCursor (optional any? query,
optional IDBCursorDirection direction = "next");
IDBRequest openKeyCursor (optional any? query,
optional IDBCursorDirection direction = "next");
// operații vizând indecșii
IDBIndex index (DOMString name);
IDBIndex createIndex (DOMString name,
(DOMString or sequence<DOMString>) keyPath,
optional IDBIndexParameters options);
void deleteIndex (DOMString indexName);
};
dictionary IDBIndexParameters { // folosit pentru precizarea opțiunilor
boolean unique = false;
boolean multiEntry = false;
};
137. Dr.SabinBuragawww.purl.org/net/busaco
[Exposed=(Window, Worker)]
interface IDBRequest : EventTarget { // modelează o cerere
readonly attribute any result; // rezultatul interogării emise
readonly attribute DOMException? error; // eventuala eroare survenită
readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source;
readonly attribute IDBTransaction? transaction;
// starea interogării: în așteptare ("pending") sau efectuată ("done")
readonly attribute IDBRequestReadyState readyState;
attribute EventHandler onsuccess; // funcții de tratare a evenim.
attribute EventHandler onerror;
};
alte detalii:
developer.mozilla.org/en-US/docs/Web/API/IDBRequest
138. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
accesul la înregistrări se poate realiza și via indecși
specificați de interfața IDBIndex
metode utile:
get() getKey() getAll() getAllKeys()
count()
openCursor() openKeyCursor()
developer.mozilla.org/en-US/docs/Web/API/IDBIndex
139. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
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
143. Dr.SabinBuragawww.purl.org/net/busaco
[Exposed=(Window, Worker)]
interface IDBCursor {
readonly attribute (IDBObjectStore or IDBIndex) source; // sursa datelor
readonly attribute IDBCursorDirection direction; // direcția de iterare
readonly attribute any key; // cheia
readonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilor
IDBRequest delete ();
void advance ([EnforceRange] unsigned long count);
void continue (optional any key);
void continuePrimaryKey (any key, any primaryKey);
};
developer.mozilla.org/en-US/docs/Web/API/IDBCursor
144. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
excepții specifice:
UnknownError ConstraintError DataError
TransactionInactiveError ReadOnlyError VersionError
excepții preluate de la DOM – nivelul 4:
NotFoundError InvalidStateError InvalidAccessError
AbortError TimeoutError QuotaExceededError
SyntaxError DataCloneError
145. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
pentru detalii și exemplificări, a se studia:
developer.mozilla.org/Web/API/IndexedDB_API/Using_IndexedDB
gist.github.com/BigstickCarpet/a0d6389a5d0e3a24814b
exemple specifice:
în contextul WebGL
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
vizând PWA (Progressive Web Applications)
developers.google.com/web/ilt/pwa/working-with-indexeddb
149. Dr.SabinBuragawww.purl.org/net/busaco
<script> new Worker('actualizator.js'); </script>
var server = new WebSocket('ws://whatwg.org/database'); // conexiunea cu
var db = openDatabase('demo', '1.0', 'Date demo', 10240); // baza de date
server.onmessage = function (eveniment) {
// datele sunt în format "comanda cheie valoare" (comanda e "+" sau "-")
var date = eveniment.data.split(' ');
switch (date[0]) {
// operația de inserare a unei valori pe baza cheii
case '+': db.transaction (function (t) {
t.executeSql ('INSERT INTO informatii (cheie, valoare) VALUES (?, ?)',
date[1], date[2]); });
// operația de ștergere
case '-': db.transaction (function (t) {
t.executeSql ('DELETE FROM informatii
WHERE cheie=? AND valoare=?', date[1], date[2]); });
}
};
un worker ce efectuează operații asupra
unei baze de date existente la nivel de client
152. Dr.SabinBuragawww.purl.org/net/busaco
File API
interfețe de interes:
File – consultarea informațiilor vizând un fișier
Blob – consultarea datelor binare imutabile
FileList – lista unor fișiere, eventual via <input type="file">
FileReader – citirea datelor dintr-un File sau Blob
API-ul se poate folosi în conjuncție cu
XMLHttpRequest, postMessage, drag & drop, WebWorker
153. Dr.SabinBuragawww.purl.org/net/busaco
interface FileReader : EventTarget {
// metode de citire asincronă
void readAsArrayBuffer (Blob blob);
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString label);
void readAsDataURL (Blob blob);
void abort ();
// coduri de stare
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
// rezultatul obținut: File sau Blob
readonly attribute (DOMString or ArrayBuffer)? result;
154. Dr.SabinBuragawww.purl.org/net/busaco
interface FileReader : EventTarget {
// metode de citire asincronă
void readAsArrayBuffer (Blob blob);
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString label);
void readAsDataURL (Blob blob);
void abort ();
// coduri de stare
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
// rezultatul obținut: File sau Blob
readonly attribute (DOMString or ArrayBuffer)? result;
evenimente ce pot fi tratate:
onloadstart onprogress onload onabort onerror onloadend