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.
This document provides an overview of the BEM (Block Element Modifier) methodology for organizing CSS code. It discusses the concepts of blocks, elements, and modifiers. It also covers advantages like namespacing and shared UI language. Finally, it discusses tools and frameworks for BEM including BEMHTML, CSSO, Emmet, and inuit.css.
Slide pendukung untuk mata kuliah Pemrograman Web 1 di Jurusan Teknik Informatika Universitas Pasundan Bandung.
Digunakan juga sebagai pendukung untuk video di channel youtube "WebProgrammingUNPAS"
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
O prezentare despre designul Web responsiv + tehnologiile aferente. Pentru alte resurse de interes, a se vizita http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
A presentation regarding responsive Web design and various existing technologies. For additional resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...Sabin Buraga
This document discusses data visualization, information architecture, and related topics. It provides examples of visualization projects and outlines the key steps in working with data - acquiring, parsing, filtering, mining, representing, refining, and interacting with data. It also discusses principles of information architecture like creating sitemaps, conducting competitive analysis, and assessing projects for mobile contexts. The document emphasizes thinking through a problem before implementing technical solutions and provides resources for further learning.
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).
This document provides an overview of the BEM (Block Element Modifier) methodology for organizing CSS code. It discusses the concepts of blocks, elements, and modifiers. It also covers advantages like namespacing and shared UI language. Finally, it discusses tools and frameworks for BEM including BEMHTML, CSSO, Emmet, and inuit.css.
Slide pendukung untuk mata kuliah Pemrograman Web 1 di Jurusan Teknik Informatika Universitas Pasundan Bandung.
Digunakan juga sebagai pendukung untuk video di channel youtube "WebProgrammingUNPAS"
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
O prezentare despre designul Web responsiv + tehnologiile aferente. Pentru alte resurse de interes, a se vizita http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
A presentation regarding responsive Web design and various existing technologies. For additional resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...Sabin Buraga
This document discusses data visualization, information architecture, and related topics. It provides examples of visualization projects and outlines the key steps in working with data - acquiring, parsing, filtering, mining, representing, refining, and interacting with data. It also discusses principles of information architecture like creating sitemaps, conducting competitive analysis, and assessing projects for mobile contexts. The document emphasizes thinking through a problem before implementing technical solutions and provides resources for further learning.
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 (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 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
STAW 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
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
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...Sabin Buraga
A presentation (available in Romanian language) about RESTful Web service development, including several considerations regarding mash-ups & APIs.
For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
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
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
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
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 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 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 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
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
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
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
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 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
STAW 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
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
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...Sabin Buraga
A presentation (available in Romanian language) about RESTful Web service development, including several considerations regarding mash-ups & APIs.
For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
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
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
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
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 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 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 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
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
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
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 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 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 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 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
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 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
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
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 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
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.
3. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
un vocabular (set de elemente + atribute)
folosit pentru marcarea paginilor Web
+
o suită de API-uri facilitând procesarea documentelor
4. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
un vocabular (set de elemente + atribute)
folosit pentru marcarea paginilor Web
+
o suită de API-uri facilitând procesarea documentelor
6. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
recurge la tehnologii înrudite referitoare la
prezentare via foi de stiluri în cascadă: CSS – nivelul 3
model conceptual: DOM (Document Object Model)
procesare la nivel de navigator Web: JavaScript
…și altele
7. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
în curs de standardizare la Consortiul Web
statut candidate recommendation (decembrie 2012)
http://www.w3.org/TR/html5/
13. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
lista elementelor (marcajelor) poate fi consultată la
http://dev.w3.org/html5/markup/spec.html
a se vizita si HTML5 Doctor
http://html5doctor.com/
14. Dr. Sabin Buragawww.purl.org/net/busaco
Antetul documentului poate include meta-date
diverse construcții privind maniera de
prezentare/comportamentul conținutului
sau relația documentului curent cu alte resurse Web
15. Dr. Sabin Buragawww.purl.org/net/busaco
Antetul documentului poate include meta-date
diverse construcții privind maniera de
prezentare/comportamentul conținutului
sau relația documentului curent cu alte resurse Web
title, base, link, meta, style, script, noscript
17. <article>
un articol disponibil pe un blog
<header>
<h1>Titlul articolului</h1>
<p><time pubdate datetime="2013-01-07T07:33"></time></p>
Dr. Sabin Buragawww.purl.org/net/busaco
</header>
<p>Conținutul propriu-zis al articolului…</p>
<aside>Alte resurse de interes</aside>
<section>
<h1>Comentarii</h1>
<article>
<!-- comentariile sunt considerate aici note de subsol -->
<footer>
<p>Autor: Tuxy Pinguinescu</p>
<p><time pubdate
datetime="2013-01-10T01:07-03:03"></time></p>
</footer>
<p>Un comentariu</p>
</article>
</section>
</article>
18. specificarea unor figuri
<figure>
Dr. Sabin Buragawww.purl.org/net/busaco
<img src="imagine.png" alt="Descriere alternativă" />
<figcaption>O explicație…</figcaption>
</figure>
<figure>
<!-- conținutul nu trebuie neapărat să fie o imagine -->
<video src="http://ferma.info/video/pinguini.mov"></video>
<figcaption>
Relatare despre <cite>pinguinii FII</cite>.
</figcaption>
</figure>
gruparea conținutului
19. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
“scufundarea” altor tipuri de conținuturi
într-un document HTML
conținut grafic – raster și/sau vectorial
conținut sonor
conținut video
20. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
svg
conținut grafic vectorial
specificat prin SVG (Scalable Vector Graphics)
un limbaj descriptiv bazat pe XML
http://www.w3.org/Graphics/SVG/
21. studiu de caz: grafică vectorială SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm">
<title>Conținut grafic SVG</title>
Dr. Sabin Buragawww.purl.org/net/busaco
<defs>
<linearGradient id="unGradient"> <!-- definim un degrade liniar -->
<stop offset="20%" stop-color="#3FF" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
<rect id="patrat" width="15px" height="15px" fill="navy" />
<path id="cale" d="M15 50 C10 0 90 0 90 40" /> <!-- o cale de redare -->
</defs>
<!-- o formă rectangulară umplută cu degrade-ul de mai sus -->
<rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" />
<!-- folosim instanțe ale pătratului definit -->
<use x="40" y="40" xlink:href="#patrat" />
<use x="100" y="80" xlink:href="#patrat" />
<use x="160" y="80" xlink:href="#patrat" />
<use x="220" y="80" xlink:href="#patrat" />
<!-- un text redat conform căii specificate -->
<text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text>
</svg> C. Bulancea & S. Buraga, 2004
22. studiu de caz: grafică vectorială SVG
Dr. Sabin Buragawww.purl.org/net/busaco
27. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
math
expresii matematice exprimate via limbajul MathML
un limbaj declarativ bazat pe XML
http://www.w3.org/Math/
28. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
math
specificația curentă: MathML 3.0 (2010)
suport nativ în Firefox și Chrome
o listă a instrumentelor software la
http://www.w3.org/Math/Software/
30. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
alături de elementele img, iframe, embed și object,
sunt permise audio, video, source
ce pot fi utilizate la includerea de conținut multimedia
31. <video id="film" src="/media/tux.ogg" controls autoplay>
Nu există suport pentru elementul video… :-(
Dr. Sabin Buragawww.purl.org/net/busaco
</video>
…
<script type="text/javascript">
// preluăm conținutul video
var video = document.getElementById('film');
</script>
<p>
<input type="button" value="Oprește"
onclick="video.pause ();" />
<input type="button" value="Rulează"
onclick="video.play ();" />
</p>
36. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date
<video src="…">
<track kind="subtitles" src="..." srclang="en" label="English" />
<track kind="captions" src="..." srclang="en"
label="English for the Hard of Hearing" />
<track kind="subtitles" src="..." srclang="ro" label="Românește" />
</video>
38. Dr. Sabin Buragawww.purl.org/net/busaco
Embedded content
canvas
suport pentru grafica raster (bitmap)
generată dinamic via JavaScript
funcționalitățile privind redarea graficii sunt oferite de
interfața de programare HTMLCanvasElement
39. Dr. Sabin Buragawww.purl.org/net/busaco
Interfața HTMLCanvasElement
specificație W3C: candidate recommendation
(decembrie 2012)
context de redare:
conținut grafic 2D transparent de tip raster
www.w3.org/TR/2dcontext/
40. <!DOCTYPE html>
<html> generarea
<head> unei corole de minuni
<title>Corola de minuni</title>
Dr. Sabin Buragawww.purl.org/net/busaco
</head>
<script type="text/javascript" src="discuri.js"></script>
<body onclick="javascript:deseneazaDiscuri()">
<h1>Un click…</h1>
<canvas id="canvas"
height="500"
width="375">
</canvas>
</body>
</html>
41. function deseneazaDiscuri() {
// preluăm contextul de redare 2D
Dr. Sabin Buragawww.purl.org/net/busaco
var context =
document.getElementById ('canvas').getContext ('2d');
// stabilim parametrii corpului de literă
context.font = "20pt sans-serif";
context.fillText ("o minune", 5, 30);
// translăm...
context.translate (75, 75);
programul JavaScript
(discuri.js) generând conținutul
42. for (var i = 1; i < 5; i++) { // vom genera 'inele' de discuri
// salvăm contextul de redare
context.save ();
// stabilim via CSS3 culoarea de umplere a discului curent
Dr. Sabin Buragawww.purl.org/net/busaco
// și ajustăm aleatoriu transparența (alpha)
context.fillStyle = 'rgba(33,' + (51 * i) + ',' + (255 - 51 * i) + ','
+ Math.random() + ')';
for (var j = 0; j < i * 6; j++) { // desenăm discuri
context.rotate (Math.PI * 2 / (i * 6));
context.beginPath ();
context.arc (0, i * 12.5, 5, 0, Math.PI * 2, true);
context.fill ();
}
// restaurăm contextul de redare
context.restore ();
} programul JavaScript
} (discuri.js) generând conținutul
53. Dr. Sabin Buragawww.purl.org/net/busaco
Microdata HTML 5
posibilitatea de a specifica perechi de proprietăți
(nume, valoare) “scufundate” în HTML
menite a fi “înțelese” de software
(e.g., motoarele de căutare)
54. Dr. Sabin Buragawww.purl.org/net/busaco
Microdata HTML 5
grupurile de perechi de proprietăți nume—valoare
sunt denumite items
creare via atributul itemscope
specificarea unei proprietăți prin atributul itemprop
referire cu ajutorul atributului itemref
55. Dr. Sabin Buragawww.purl.org/net/busaco
Microdata HTML 5
grupurile de perechi de proprietăți nume—valoare
sunt denumite items
asocierea unui tip de date se face cu atributul itemtype
pentru identificarea unui item se folosește itemid
56. Dr. Sabin Buragawww.purl.org/net/busaco
schema.org
colecție de vocabulare (scheme de date)
– e.g., Book, Event, LocalBusiness, Movie, Offer, Person,
Place, Recipe, Review, TVSeries,… – recunoscute și
indexate de roboții principalelor motoare de căutare
Bing, Google, Yahoo!, Yandex
58. <body itemscope itemtype="http://schema.org/WebPage">
<header>
<h1 itemprop="name">
<a href="index.html" title="…">Dezvoltarea aplicațiilor Web
la nivel de client</a>
Dr. Sabin Buragawww.purl.org/net/busaco
</h1>
<p class="slogan" itemprop="description">prezentările aferente cursului</p>
</header>
<article>
<!-- conținut propriu-zis -->
</article> specificarea faptului că Sabin Buraga
<footer> este o persoană
<h6>
<span itemscope itemtype="http://schema.org/Person">
<a href="http://www.purl.org/net/busaco" title="…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin Buraga</span>
</a>
</span>
</h6>
</footer> recurgerea la elemente structurale și
</body> scheme de microdate HTML5
59. Dr. Sabin Buragawww.purl.org/net/busaco
extragerea/verificarea de date structurate
via Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets
63. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
semantic markup
noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
expresii matematice – MathML
microdate
conținut editabil
64. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
prezentarea conținutului via foi de stiluri CSS
facilități aduse de CSS3: tranziții, transformări, coloane,…
media queries
utilizarea fonturilor externe – Web fonts
66. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
multimedia
<audio> (MP3, OGG)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC
67. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
device access
drag & drop
orientation
geolocation
acces la camera Web
notificări
acces la fișierele gazdei – File API
HTML5 în contextul TV & industriei auto
68. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching
69. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
connectivity & real-time
mesaje vehiculate între documente
transferuri asincrone via XMLHttpRequest – nivelul 2
WebSocket
evenimente recepționate de la server (server-side events)
70. Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
asigurarea performanței
Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în URI