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
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).
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)Sabin Buraga
A practical presentation regarding the most useful concepts of CSS (Cascading Style Sheets) specifications in the Web design context. These slides were prepared for delivery at the "Computer Science at the Castle" Summer School (Macea, Arad, Romania, 2016). Various resources are available at http://profs.info.uaic.ro/~busaco/teach/labs/css/
O prezentare practică vizând cele mai utile concepte ale specificațiilor CSS (Cascading Style Sheets) în contextul designului Web. Aceste informații au fost expuse în cadrul Școlii de vară "Informatica la Castel" (Macea, Arad, România, 2016). Diverse resurse de interes sunt oferite la http://profs.info.uaic.ro/~busaco/teach/labs/css/
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).
Foi de stiluri CSS – concepte esențiale (...și puțin mai mult)Sabin Buraga
A practical presentation regarding the most useful concepts of CSS (Cascading Style Sheets) specifications in the Web design context. These slides were prepared for delivery at the "Computer Science at the Castle" Summer School (Macea, Arad, Romania, 2016). Various resources are available at http://profs.info.uaic.ro/~busaco/teach/labs/css/
O prezentare practică vizând cele mai utile concepte ale specificațiilor CSS (Cascading Style Sheets) în contextul designului Web. Aceste informații au fost expuse în cadrul Școlii de vară "Informatica la Castel" (Macea, Arad, România, 2016). Diverse resurse de interes sunt oferite la http://profs.info.uaic.ro/~busaco/teach/labs/css/
Robotul, trebuie să reprezinte un fel de copie umană care înţelege limbajul uman, are gândire proprie, execută cu promptitudine dispoziţiile date de oameni, are toate simţurile omului şi în plus o mare viteză de mişcare.
Pada slide kali ini yang akan kita bahas adalah mengenai bagaimana cara memberi style pada background dari sebuah elemen. Setiap elemen bisa kita beri background, namun contoh di slide ini hanya pada body saja.
Selain warna, kita juga dapat menambahkan gambar pada background dan pengatur pengulangan dari gambar serta posisinya. Setelah menyaksikan video ini, silahkan berkreasi dengan background pada halaman web kalian.. :)
slide bantuan untuk video youtube:
https://youtu.be/zm-HPYS_ELU
Pseudo class adalah kelas khusus yang dapat kita beri style css pada keadaan tertentu.. ada banyak jenis pseudo class / selector, tetapi yang akan dibahas pada video ini hanya yang berhubungan dengan link dan urutan elemen saja..
contoh pseudo-class yang berhubungan dengan link :
:link
:hover
:active
:visited
slide bantuan untuk video youtube:
https://youtu.be/G0gYWdIHOug
O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare.
Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/
Robotul, trebuie să reprezinte un fel de copie umană care înţelege limbajul uman, are gândire proprie, execută cu promptitudine dispoziţiile date de oameni, are toate simţurile omului şi în plus o mare viteză de mişcare.
Pada slide kali ini yang akan kita bahas adalah mengenai bagaimana cara memberi style pada background dari sebuah elemen. Setiap elemen bisa kita beri background, namun contoh di slide ini hanya pada body saja.
Selain warna, kita juga dapat menambahkan gambar pada background dan pengatur pengulangan dari gambar serta posisinya. Setelah menyaksikan video ini, silahkan berkreasi dengan background pada halaman web kalian.. :)
slide bantuan untuk video youtube:
https://youtu.be/zm-HPYS_ELU
Pseudo class adalah kelas khusus yang dapat kita beri style css pada keadaan tertentu.. ada banyak jenis pseudo class / selector, tetapi yang akan dibahas pada video ini hanya yang berhubungan dengan link dan urutan elemen saja..
contoh pseudo-class yang berhubungan dengan link :
:link
:hover
:active
:visited
slide bantuan untuk video youtube:
https://youtu.be/G0gYWdIHOug
O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare.
Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/
A lecture – prepared to be delivered during "Computer Science at the Castle" Summer School (Macea, Arad, Romania, 2016): www.informaticalacastel.ro – regarding the most important aspects on Web development and current perspectives (2016 updated edition).
For other resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/
O prelegere reunind cele mai importante aspecte privind dezvoltarea Web și perspectivele actuale (ediția actualizată pentru 2016).
Pentru alte resurse de interes, a se consulta http://profs.info.uaic.ro/~busaco/teach/
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.
Most important aspects regarding the internal architecture of a Web browser. A presentation prepared to be delivered within InfoEducatie 2012, a national IT contest for high-school students.
A presentation explaining to (high-school) students what Web development is, including career information.
O prezentare pentru elevi și studenți oferind informații despre ceea ce înseamnă dezvoltarea de apllicații Web.
(ex-student) Life as... (FII Graduation 2016)Sabin Buraga
An invited lecture delivered to the future graduates of the Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania (21 May 2016): a a kind of 3-in-1 show consisting of several boredom-injected academic advices + superficial entertainment, and resembling an electronic game.
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualizati...Sabin Buraga
Prezentare realizată de Alecsandru Grigoriu (Grapefruit). Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
L. Alboaie, S. Buraga: "Servicii Web. Concepte de bază și implementări" (2006)Sabin Buraga
Varianta electronică a volumului "Servicii Web. Concepte de bază și implementări" (320 pagini, ISBN 973-681-522-6, Editura Polirom, 2006) realizat de Lenuța Alboaie și Sabin Buraga. Cartea e adresată programatorului Web (viitor sau actual) și inițiază cititorul într-un mod sistematic în tehnologiile și metodologiile de dezvoltare a serviciilor Web. Implementările sunt detaliate în cele mai utilizate limbaje, via instrumente și platforme care oferă suport pentru crearea și invocarea de servicii Web conform paradigmei SOAP.
Pentru detalii, a se vizita http://profs.info.uaic.ro/~busaco/books/ws/
Ce înseamnă a fi dezvoltator Web (varianta 2014)Sabin Buraga
Considerații privind diverse posibilități de carieră în domeniul tehnologiilor Web, de dorit după absolvirea studiilor oferite de Facultatea de Informatică, UAIC Iași.
Pentru alte detalii, a se vizita http://www.info.uaic.ro/~busaco/teach/
CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la d...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
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
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).
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
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Considerații privind designul Web: interacțiune, utilizabilitate & metodologii de proiectare. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Sabin Buraga – Dezvoltator Web (...în 2017)Sabin Buraga
O prezentare pentru elevii de liceu – participanți la SummerIS <www.summeris.ro> – referitoare la cele mai importante aspecte privind cariera de dezvoltator de aplicații Web.
A presentation for high-school students regarding the most important aspects about a professional carrier focused on Web application development.
CLIW 2014—2015 (1/12): 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). 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 (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
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
O prezentare referitoare la date deschise ("open data") în contextul Web-ului semantic (numit și "Web of data") realizată pentru evenimentul Open Source Iași (2014): http://opensourceiasi.wordpress.com/
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 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 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 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 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 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
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
11. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
learnability
cât de ușor se învață utilizarea sistemului?
efficiency
care-i modul optim de utilizare a interfeței?
memorability
cât de ușor e să ne reamintim interacțiunea cu aplicația?
errors
cum pot fi prevenite/corectate erorile utilizatorului?
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?
19. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
“Design, v.: What you regret not doing later on.”
/usr/games/fortune
“I’ve been amazed at how often those outside
the discipline of design assume that what designers
do is decoration. Good design is problem solving.”
Jeff Veen
20. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Tradițional, interacțiunea cu utilizatorul
recurge la elemente de interfață
suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare (input fields), legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.
28. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
utilizând specificații de prezentare a conținutului (Web template),
datele persistente (e.g., preluate dintr-o bază de date)
sunt folosite de un procesor – template engine –
pentru a genera documente HTML ori alte formate
51. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare a ecranului, rezoluție, densitate de pixeli,…)
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
diverse „delicatese” oferite și de https://responsivedesign.is/
54. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />
@media screen and (max-width: 768px) and (orientation: portrait) {
/* stiluri pentru tablete*/
}
/* redarea pe 2 coloane pentru rezoluții mari */
@media (min-width: 1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; font-size: 1.5em; }
}
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10) { /* ecran lat */ }
pentru alte detalii, a se studia
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
59. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
multimedia responsive
client – recurgerea la biblioteci JavaScript precum
HiSRC – https://github.com/teleject/hisrc
Foresight.js – www.cdnconnect.com/docs/foresightjs
soluții de optimizare la nivel de server – exemple:
http://adaptive-images.com/
http://www.resrc.it/
https://developers.google.com/speed/pagespeed/module
60. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
fonturi Web responsive
fonturile externe nu trebuie încărcate în contextul dispozitivelor
având rezoluții reduse ale ecranului
soluții:
încărcarea asincronă a fonturilor (Web font loading)
considerarea graficii vectoriale – SVG (Scalable Vector Graphics)
detalii la http://webtypography.net/talks/rdo13/
66. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design patterns
șablon de proiectare = „rețetă” ce poate fi pusă în aplicare
într-un context pentru rezolvarea unei probleme date
o „carte de bucate” cu rețete vizând proiectarea interacțiunii:
http://profs.info.uaic.ro/~evalica/patterns/