Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Sabin Buraga: Dezvoltator Web?! (2019)

515 vues

Publié le

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).

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Sabin Buraga: Dezvoltator Web?! (2019)

  1. 1. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Dr. Sabin-Corneliu Buraga Facultatea de Informatică, UAIC – Iași, România profs.info.uaic.ro/~busaco/ …în 2019
  2. 2. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Dr. Sabin-Corneliu Buraga (1974—2021) membru al Facultății de Informatică din 1999 pasionat de tehnologii Web și open source/data din 1996 inițiator al cursului Tehnologii Web – 1999/2000 autor al primelor cărți românești dedicate tehnologiilor Web (2001) și Web-ului semantic (2004) doctorat în tehnologii Web – 2004 laureat al Academiei Române – 2005 (co-)autor al unor lucrări (științifice) de specialitate mentor al multor echipe studențești distins cu titulatura „Profesor Bologna” – 2017
  3. 3. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/  Ce este Web-ul?
  4. 4. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ World Wide Web spațiu informațional comun în care comunicăm prin interconectarea și partajarea unor elemente de interes denumite resurse inventat de Sir Tim Berners-Lee în 1989
  5. 5. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Sir Tim Berners-Lee – lauriat al premiului Turing cea mai importantă distincție în domeniul informaticii
  6. 6. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ World Wide Web scopuri principale: independența de dispozitiv independența de software scalabilitatea ubicuitatea
  7. 7. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ World Wide Web bazat pe principii & standarde deschise stipulate de Consorțiul Web universalitate + ubicuitate – Web for all & on everything interacțiuni complexe – Web for rich interaction acces la date & servicii – Web of data & services încredere – Web of trust www.w3.org
  8. 8. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ World Wide Web un serviciu Internet alături de poștă electronică, transfer de fișiere etc. WWW  Internet
  9. 9. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ client (realizează cereri)
  10. 10. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri)
  11. 11. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri) protocol (reguli de transfer de date)
  12. 12. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⚙️ server Web ⧉ client Web cerere răspuns Web-ul e bazat pe modelul client/server al Internet-ului
  13. 13. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ web primul client (browser) Web
  14. 14. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ webprimul server Web
  15. 15. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⧉ clientul Web (navigator – browser, player multimedia, aplicație nativă rulând pe un calculator „clasic” (desktop) sau pe o platformă mobilă, robot al unui motor de căutare,…) preia/trimite conținuturi – adică date – (de) la un server Web
  16. 16. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/  pentru a reprezenta aceste conținuturi, se adoptă diverse formate de date cel mai popular: limbajul de marcare a hipertextului HTML (HyperText Markup Language) www.w3.org/html/
  17. 17. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ conținut ≅ <marcajeHTML versiune="5.2" /> + { foi de stiluri: CSS } à la mode
  18. 18. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/  aceste conținuturi sunt stocate în documente (pagini) Web mai general, resurse Web
  19. 19. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ resursele vor fi identificate printr-o adresă Web URL (Uniform Resource Locator) exemplu: www.slideshare.com/busaco/presentations/ identificator unic
  20. 20. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ paginile Web includ referințe către alte resurse de interes via adrese (URL-uri)hipertext (hipermedia) document HTML adresă Web (URL) marcaje (adnotări)
  21. 21. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Anca Bogdan cunoaște pe knows deține owns are nume hasName album photo twitter.com/pinkfloyd tag urmărește follows owns același compozitor sameComposer Web  graf hipermedia explorat pe baza interacțiunii cu utilizatorul via URL-uri
  22. 22. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ la nivel de server Web, resursele (conținuturile) solicitate de client – via un URL – sunt fie stocate static (i.e. create manual), fie generate dinamic – pe baza unor programe implementând diverși algoritmi
  23. 23. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ transferul datelor între client și server e stabilit de un protocol de comunicație HTTP (HyperText Transfer Protocol)
  24. 24. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ codificarea datelor Unicode nume de domenii DNS protocoalele Internet TCP/IP adrese Web URI = URL + URN protocoale Web HTTP, HTTPS,… a b c … z ș б ө Ϟ ঢ় ល ꑸ ⠳ ⵙ ⋇ ⚉ 𝔜 .com .org .io .ro .uaic.ro .info.uaic.ro TCP / UDP IP, ICMP,… acces la mediu
  25. 25. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ codificarea datelor Unicode nume de domenii DNS protocoalele Internet TCP/IP adrese Web URI = URL + URN protocoale Web HTTP, HTTPS,… a b c … z ș б ө Ϟ ঢ় ល ꑸ ⠳ ⵙ ⋇ ⚉ 𝔜 .com .org .io .ro .uaic.ro .info.uaic.ro TCP / UDP IP, ICMP,… acces la mediu identificator uniform de resursă protocol HTTP „securizat” TCP = control al transmiterii datelor (Transmission Control Protocol) IP = protocol de interconectare a rețelelor (Internet Protocol) DNS = adresă IP↔domeniu simbolic – e.g., 85.122.23.1↔profs.info.uaic.ro
  26. 26. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Client interfață cu utilizatorul
  27. 27. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Client interfață cu utilizatorul
  28. 28. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web sit Web sistem găzduind o serie de pagini (resurse) Web înrudite ale unei organizații, companii sau persoane Client interfață cu utilizatorul
  29. 29. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ tinyurl.com/tehnologii-web situl disciplinei Tehnologii Web
  30. 30. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web aplicație Web colecție interconectată de pagini Web cu conținut generat dinamic, oferind o funcționalitate specifică Client interfață cu utilizatorul
  31. 31. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ webglstudio.org aplicație de editare 3D disponibilă în browser
  32. 32. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web interacțiune Web „dialogul” dintre utilizator(i) și aplicație are loc via o interfață Web Client interfață cu utilizatorul
  33. 33. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web interacțiune Web uzual, sit Web  aplicație Web Client interfață cu utilizatorul
  34. 34. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ exemple de aplicații Web: Adminer, AWS Cloud9, DB Fiddle, Devdocs.io, GitHub, IDEone, info.uaic.ro, JS Bin, Medium, Mockaroo, OpenStreetMap, Reddit, Quora, SlideShare, Vimeo, Wikipedia, WordPress, XSS Game …și multe, multe, multe altele aplicație Web găzduită la nivel de server(e) Web clienți (umani/programe) formulând & trimițând cereri
  35. 35. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Date stocate persistent Client interfață cu utilizatorul
  36. 36. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Date stocate persistent accesul la date poate fi realizat via (micro-)servicii Web software oferind o funcționalitate specifică în urma căreia se obțin date de interes – uzual, apelând la o interfață de programare a aplicațiilor API (Application Programming Interface) Client interfață cu utilizatorul
  37. 37. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ 💡 Care e arhitectura generică a unei aplicații Web?
  38. 38. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ via o interfață Web, utilizatorul interacționează cu clientul (frontend) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone – executate de diverse componente implementate la nivel de server (backend), pentru a obține date de interes client Web server Web conținut static conținut dinamic conținut static conținut dinamic date locale JavaScript server de aplic., framework HTTP transfer asincron ☁ date externe (serviciu Web) frontend backend
  39. 39. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Uzual, o aplicație Web implică trei strate (3-tier) client server de aplicații stocare (interface) (application) (persistence)
  40. 40. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Blat / Baza de date Jeleu / Funcționalitate Cremă / Rol specific Frișcă / Marcaje Fructe / Prezentare C. Henderson, Scalable Web Architectures, Web 2.0 Expo, 2007: iamcal.com/talks/
  41. 41. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ mitul 1: cea mai importantă este interfața
  42. 42. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Aplicație Web = Interfață + Program + Conținut (Date) standarde deschise structurarea conținutului: HTML (HyperText Markup Language) stiluri de prezentare a datelor: CSS (Cascading Style Sheets) transfer asincron: Ajax (Asynchronous JavaScript And XML) generare prin program: HTML5 <canvas> + JavaScript ilustrații 2D în format vectorial: SVG (Scalable Vector Graphics) conținut 3D (static/interactiv): WebGL + WebXR
  43. 43. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ mitul 2: cel mai important este programul
  44. 44. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Aplicație Web = Interfață + Program + Conținut (Date) server: C#, Go, Java, JavaScript, PHP, Python, Ruby, Rust, Scala client: JavaScript + API-uri HTML5 implementate de browser servere de aplicații Web, cadre de lucru (framework-uri), biblioteci de cod, componente,…
  45. 45. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ mitul 3: cele mai importante sunt datele
  46. 46. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Internet (Web) Aplicație Web = Interfață + Program + Conținut (Date) recurgerea la modele de date diverse relațional – interogare via SQL (Structured Query Language) bazat pe grafuri ori documente – o fațetă a „mișcării” NoSQL cheie-valoare – e.g., formatul JSON (JavaScript Object Notation) arborescent – XML (Extensible Markup Language) triple – RDF (Resource Description Framework)
  47. 47. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Aplicație Web = Interfață + Program + Conținut (Date) mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele fapt: sunt importante toate!
  48. 48. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ browser prezen- tare proce- sare abstrac- tizare date pagini <Web/> HTML, CSS,… server „gras” (fat) client „prostuț” (dumb) arhitectura aplicațiilor Web: abordarea MVC tradițională frontend backend
  49. 49. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ browser modern prezen- tare proce- sare abstrac- tizare date recurgere la API JSON, XML, CSV și altele server „slab” (thin) client Web modern (HTML5) aplicație JavaScript uneori, via un magazin de aplicații – app store arhitectura aplicațiilor Web: abordare client – JavaScript browser Web pe calculatoare convenționale, dispozitive mobile și altele
  50. 50. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ browser modern prezen- tare proce- sare abstrac- tizare date recurgere la API JSON, XML, CSV și altele server „slab” (thin) client Web modern (HTML5) aplicație JavaScript uneori, via un magazin de aplicații – app store arhitectura aplicațiilor Web: abordare client – JavaScript implementarea aplicației JavaScript poate recurge la biblioteci, framework-uri, componente specifice e.g., Angular, React, Vue
  51. 51. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ sistem de operare prezen- tare proce- sare abstrac- tizare date recurgere la API JSON XML CSV … server „slab” (thin) client nativ modern (smart device) aplicație nativă C#, Java, Obj-C, Swift,… (uzual, via app store) arhitectura aplicațiilor Web: aplicații native (desktop, mobile, smart TV,…) desktop și/sau mobile, smart TV, home appliance, dispozitiv ambiental
  52. 52. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ sistem de operare prezen- tare proce- sare abstrac- tizare date recurgere la API JSON XML CSV … server „slab” (thin) client nativ modern (smart device) aplicație nativă C#, Java, Obj-C, Swift,… (uzual, via app store) arhitectura aplicațiilor Web: aplicații native (desktop, mobile, smart TV,…) implementarea aplicației native poate recurge la biblioteci, framework-uri, componente specifice e.g., Apache Cordova, Flutter, Ionic, React Native, NW.js
  53. 53. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ browser prezen- tare proce- sare abstrac- tizare date API JSON et al. server „slab” (thin) client Web „prostuț”(dumb) arhitectura aplicațiilor Web: abordare bazată pe intermediari server de prezentare pagini HTML book reader chioșc informativ automobil
  54. 54. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⚙️ Câteva exemplificări de aplicații Web?
  55. 55. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ client(i) mandatar (proxy) zid de protecție (firewall) intermediar(i) (middleware) server(e) Web server(e) de aplicații cadre de lucru, biblioteci, alte componente server(e) de stocare persistentă – e.g., baze de date server(e) de conținut multimedia server(e) de management al conținutului (CMS) aplicații/sisteme tradiționale (legacy)
  56. 56. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ client(i) mandatar (proxy) zid de protecție (firewall) intermediar(i) (middleware) server(e) Web server(e) de aplicații cadre de lucru, biblioteci, alte componente server(e) de stocare persistentă – e.g., baze de date server(e) de conținut multimedia server(e) de management al conținutului (CMS) aplicații/sisteme tradiționale (legacy) eventual, recurgând la servicii în „nori” – cloud partajarea la cerere a resurselor de calcul și a datelor cu alte calculatoare/dispozitive via tehnologii Internet/Web
  57. 57. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Aplicație Web Procesare la nivel de server (backend) Stocare persistentă Coursera Django (Python), Node.js (JS), Play (Scala) MySQL, Apache Cassandra DuckDuckGo Node.js, Perl PostgreSQL Facebook Hack, PHP (HHVM), Tornado (Python), Java, JavaScript RocksDB, Presto, Cassandra, Beringei Google C++, Dart, Go, Java, Python BigTable, MariaDB Linkedin Grails (Java), JavaScript, Scala MySQL, Oracle DB, RocksDB, Hadoop Medium Node.js, Go Neo4j, Dynamo, Redis Stack Overflow.NET Framework (C#) MS SQL Server, Redis Wikipedia PHP (HHVM), Node MySQL/MariaDB stackshare.io/stacks
  58. 58. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Netflix scop: oferire de conținut video la cerere (streaming) + televiziune Web (Web TV) servicii disponibile pe dispozitive/platforme multiple studiu de caz
  59. 59. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ procesare backend Java, Python, Node.js (JavaScript) procesare frontend React, winjs (JavaScript) sisteme de stocare MySQL, Apache Cassandra, Apache Hadoop, Apache Hive, Oracle DB servicii în „nori” Amazon EC2 (procesare video) Amazon S3 (stocare) servicii SQL Amazon RDS (Relational DB Service) servicii NoSQL Amazon DynamoDB management de cod GitHub (implementat în Ruby + C) integrare continuă Jenkins (implementare Java) gestionare servere Apache Mesos (implementare C++) distribuire de conținut (content distribution network) Open Connect CDN (FreeBSD, Nginx), Akamai, Level 3, Limelight monitorizare Boundary, LogicMonitor, Vector,… highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html stackshare.io/netflix/netflix
  60. 60. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⧉ ☆ 💡 Aspecte importante vizând dezvoltarea de aplicații Web?
  61. 61. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⧉ aplicații Web  sisteme software complexe, în evoluție permanentă
  62. 62. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ evoluția manierei de dezvoltare a produselor digitale (software) Alan Cooper et al., 2014
  63. 63. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ mijloace multiple de interacțiune Web cu utilizatorul mobil laptop PC tabletă (smart) TV ecran urban plus, noii veniți: 🎮 game console ⌚ smart watch 👟 👕 smart clothing 🔌smart appliances 🏡 smart home 🚗 🚁 smart transportation
  64. 64. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ creșterea volumului de utilizatori, cu așteptări tot mai mari vizând software-ul conținut (hiper)textual 🔗  aplicații Web sociale 👥  interacțiune naturală 👏👂  comportare „inteligentă” 🧠
  65. 65. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ suportul variat privind dezvoltarea de aplicații (limbaje, API-uri, biblioteci de cod, instrumente,...) oferit de platforma hardware/software la nivel de server(e) și/sau de client(i)
  66. 66. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ neadaptarea la cerințele economice (de tip business) 🛠 dezvoltare vs. 📝 marketing vs. 👔 management
  67. 67. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ adaptare după Crumlish & Malone, 2009 scopuri psihologie comportament ⧉ 💡  facilități tehnologii algoritmi indexare structurare meta-date instrumente metodologii stimuli utilizatori interfață software conținut creatori interacțiune controale limbi naturale
  68. 68. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Etape în dezvoltarea unei aplicații Web Cerințe – requirements Analiză și proiectare – software design Implementare – build Testare – testing Exploatare – deployment Mentenanță – maintenance Evoluție – evolution
  69. 69. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011 aplicație Web (produs software) funcționalitate + informații oferite
  70. 70. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/  Vreau să dezvolt un proiect Web…
  71. 71. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ cod-sursă stocat (code repositories) instrumente de dezvoltare (IDE) mediu de execuție (runtime environment) dezvoltare rulare A.Iqbal,M.Haunsenblas,S.Decker(2012) ☁ procesul actual de dezvoltare și exploatare a aplicațiilor Web – Development As A Service de parcurs și Sabin Buraga, Cu codul în „nori” www.slideshare.net/busaco/cu-codul-n-nori ☁ ☁
  72. 72. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ cod-sursă stocat (code repositories) instrumente de dezvoltare (IDE) mediu de execuție (runtime environment) dezvoltare rulare ☁ ☁ ☁ BitBucket GitHub Web: Cloud9, IDEone desktop: Eclipse, Visual Studio (Code),… DigitalOcean, Google Cloud Platform, Heroku, IBM Cloud, Jelastic, OpenStack, Windows Azure,… instrumente utile la github.com/ripienaar/free-for-dev
  73. 73. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Parametrii unui proiect Web obiectiv principal durată cost abordare tehnologii procese rezultat resurse umane profilul echipei
  74. 74. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ✓ obiectiv principal crearea unui produs software utilizabil în cât mai scurt timp posibil
  75. 75. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⌚ durată aproximativ 2—6 luni
  76. 76. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ♨ cost de ordinul miilor de €
  77. 77. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ 🎯 abordare prototipizare a interfeței cu utilizatorul metode de proiectare/dezvoltare agile asamblare de componente software reutilizabile
  78. 78. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ♻️ tehnologii componente: servicii Web, API-uri publice, framework-uri, biblioteci, extensii etc. proiectare/programare „vizuală” multimedia …și altele
  79. 79. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ procese uzual, dezvoltarea aplicațiilor Web se realizează iterativ „nu te aștepta să-ți iasă din prima…” înțelege documen- tează-te proiec- tează imple- mentează evaluează
  80. 80. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ⎚ rezultat reutilizabilitate mare a codului, recurgerea la componente/limbaje/platforme standard aplicații implementate uzual conform standardelor designul perceptual (vizual, sonor, tactil,…) este – deseori – unicat
  81. 81. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ♚♞♟ resurse umane 3—9 indivizi „Prima versiune a aplicației demareaz-o doar cu 3 persoane.” gettingreal.37signals.com
  82. 82. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ ☆ profilul echipei specialiști în interacțiune – uzual: designeri Web + dezvoltatori (programatori) Web – la nivel client/server + arhitecți de baze de date/cunoștințe + specialiști în marketing și/sau relații cu publicul
  83. 83. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ 😵 👥 👾 👻 Care-i echipa de dezvoltare a unei aplicații Web de anvergură?
  84. 84. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ management site editor project manager
  85. 85. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  86. 86. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ dezvoltare (arhitectură) software system architect data (content) architect component architect security architect
  87. 87. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  88. 88. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  89. 89. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ interacțiunea cu utilizatorul creative lead/director  information architect  user researcher Web interface designer(s)  interaction designer graphic/multimedia artist(s)  usability engineer Sabin Buraga, Interacțiune om-calculator (curs master FII, UAIC) profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
  90. 90. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  91. 91. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ programare back-end programmers front-end programmers data/component integration programmers Rust Python Java JS WebAssembly C# ?
  92. 92. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  93. 93. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  94. 94. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ testare testing lead client-side tester(s) server-side tester(s) component tester(s) integration tester(s)
  95. 95. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/
  96. 96. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ operații tehnice Webmaster  hardware/network technicians  network administrator(s)  database administrator(s)  backup operator  uptime monitor  security monitor(s)
  97. 97. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ marketing content producer(s) copywriter(s) content editor(s) branding & advertising expert(s) direct e-marketer public relations personnel
  98. 98. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ echipa proiectului Web management Web Project Manager funcționalitate Software Developer(s)* Multimedia Designer(s) conținut (date) Domain Expert Business Expert *frontend sau backend sau full-stack (frontend & backend) a se studia și Spellbook of Modern Web Dev (iunie 2019) github.com/dexteryy/spellbook-of-modern-webdev
  99. 99. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Web Designer standarde Web la nivel de client: HTML5, CSS3,… cunoștințe vizând navigatoarele Web experiență în design vizual + design responsiv cunoștințe privind interacțiunea Web (mobilă) familiaritate cu JavaScript (+framework-uri/biblioteci) paradigme de interacțiune naturală (tactilă, bazată pe gesturi, realitate virtuală/îmbogățită – VR/AR)
  100. 100. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ cel puțin 1 limbaj obiectual – la nivel de server/client protocoale și standarde Internet + Web cunoștințe privind baze de date (inclusiv NoSQL și/sau XML) cunoștințe vizând servicii Web familiaritate cu alte paradigme de programare (e.g., funcțională, reactivă, distribuită) securitate & performanță a aplicațiilor Web Web Developer
  101. 101. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ asistent (ajutor) al webmaster-ului, designerului sau dezvoltatorului Web poate efectua operații tehnice: instalare, configurare, monitorizare, ajustare,… Web Technician
  102. 102. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ actualizează conținutul via o interfață WYSIWYG (What You See Is What You Get) – de pildă, recurgând la un sistem de gestiune a conținutului CMS (Content Management System): Drupal, Joomla, WordPress (enterprise) wiki: DocuWiki, MediaWiki, XWiki etc. Web Maintainer
  103. 103. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu – freelancer/solopreneur companie mică – e.g., agenție (web studio) în echipa de dezvoltare Web – organizație netehnică în echipa unei organizații din IT (e.g., Apache, GitHub)
  104. 104. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/  Câteva inițiative (mai) recente vizând tehnologiile Web?
  105. 105. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ 🛍 comerț electronic 🗺 turism 🎛 monitorizare 🔮 📈 prognoze (finanțe, transport,…) 📰 👥 💬 știri comunic. interpersonală 🎬 🎪 amuzament software platformă ⚡⚡ putere de calcul 🗄🗄 stocare 📡 rețea 👾 identitate  baze de date 🛠⚙️ execuție software ✉️ procesare cozi de mesaje 🔐 securitate infrastructură Web – ingredient cheie al tehnologiilor în „nori” cloud computing 📺 🏡💻  📱🎮 🚕🌃
  106. 106. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Interacțiuni complexe & naturale dintre utilizator(i) și aplicații direct în cadrul browser-ului Web
  107. 107. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ o parte dintre tehnologii implementate în cadrul navigatorului Web – platform.html5.org
  108. 108. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Grafică 2D/3D raster și/sau vectorială + animații HTML5 <canvas> www.html5canvastutorials.com SVG (Scalable Vector Graphics) developer.mozilla.org/docs/Web/SVG transformări 3D via foi de stiluri CSS (Cascading Style Sheets) profs.info.uaic.ro/~busaco/teach/labs/css/ WebGL webglfundamentals.org
  109. 109. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ WebGL de la interacțiuni 3D la artă generativă
  110. 110. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ realitate virtuală & îmbogățită în browser (mobil) și/sau folosind un dispozitiv dedicat WebVR – specificație în lucru: webvr.info exemple: A-Frame, PlayCanvas, Sketchfab, Vizor
  111. 111. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Web „inteligent” – semantic Web, Web of Data modelarea resurselor – date, informații, cunoștințe – disponibile pe Web pentru a fi „înțelese” de calculatoare constituirea de baze de cunoștințe (knowledge bases) standarde Web: RDF (Resource Description Framework) OWL (Web Ontology Language) Sabin Buraga, Dezvoltarea aplicațiilor Web (curs master FII, UAIC) profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
  112. 112. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ interogări asupra DBpedia (varianta procesabilă de către mașină a enciclopediei Wikipedia) diverse URL-uri desemnând concepte (things, not strings) Cine este Linus Torvalds? PersonWithOccupation ComputerPioneers FinnishComputerProgrammers FreeSoftwareProgrammers LinuxKernelHackers LivingPeople PeopleInInformationTechnology Golfer
  113. 113. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Web „inteligent” – semantic Web, Web of Data în conjuncție cu alte abordări: procesarea limbajului natural entități conversaționale (conversational user interfaces) thereisabotforthat.com  botpress.io apps as chats
  114. 114. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Web „inteligent” – semantic Web, Web of Data în conjuncție cu alte abordări: învățare automată (machine/deep learning) software capabil să învețe – clasifice, optimizeze,… – și/sau să realizeze predicții fără a fi explicit programat github.com/josephmisiti/awesome-machine-learning  deeplearninggallery.com
  115. 115. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ 😍 Bun… Și eu ce fac?
  116. 116. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Dezvoltarea aplicațiilor Web Internet Sisteme de operare Arhitecturi hardware Baze de date Programare (paradigme, limbaje, compilatoare) Algoritmică Inginerie software Interacțiune om-calculator Inteligență artificială Design perceptual Realitate mixtă Învățare automată Internet/Web of Things Securitate Big Data Game Computing E-business
  117. 117. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ fii curios și iscoditor  învață (citește + experimentează + cere ajutor + reutilizează)  creează și arată (design, cod-sursă, prototipuri, exemple demonstrative,…)  acumulează experiență, „aură”, statut social etc.reputație  concurează (…atât de multe oportunități)  ajută/instruiește pe ceilalți
  118. 118. Dr.Sabin-CorneliuBuraga–https://profs.info.uaic.ro/~busaco/ Mult succes! surse fotografice: awkwardfamilyphotos.com etimpu.com  vintag.es

×