Sabin Buraga – Dezvoltator Web (...în 2017)

1. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Dr. Sabin-Corneliu Buraga Facultatea de Informatică, UAIC – Iași, România profs.info.uaic.ro/~busaco/ …în 2017

2. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Ce este Web-ul?

3. Dr.Sabin-CorneliuBuraga–http://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 decembrie 1989 detalii istorice în Sabin Buraga, 25 de ani de Web (2014) www.slideshare.net/busaco/25-de-ani-de-web

4. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Sir Tim Berners-Lee – lauriat al premiului Turing cea mai importantă distincție în domeniul informaticii

5. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ World Wide Web scopuri principale: independența de dispozitiv independența de software scalabilitatea ubicuitatea

6. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ World Wide Web bazat pe principii & standarde deschise stipulate de Consorțiul Web Web for all & on everything Web for rich interaction Web of data & services Web of trust www.w3.org

7. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ World Wide Web un serviciu Internet alături de poștă electronică, transfer de fișiere etc. WWW  Internet

8. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri)

9. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri)

10. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri) protocol (reguli de transfer de date)

11. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ server Web client Web cerere răspuns Web-ul e bazat pe modelul client/server al Internet-ului

12. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ web primul client Web

13. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ webprimul server Web

14. Dr.Sabin-CorneliuBuraga–http://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

15. Dr.Sabin-CorneliuBuraga–http://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/

16. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ conținut ≅ <marcajeHTML versiune="5.1" /> + { foi de stiluri: CSS } à la mode

17. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  aceste conținuturi sunt stocate în documente (pagini) Web mai general, resurse Web

18. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ resursele vor fi identificate printr-o adresă Web URL (Uniform Resource Locator) exemplu: http://www.slideshare.com/busaco/presentations/ identificator unic

19. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ paginile Web – uzual, documente HTML – includ referințe către alte resurse de interes via adrese (URL-uri)hipertext (hipermedia)

20. Dr.Sabin-CorneliuBuraga–http://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

21. Dr.Sabin-CorneliuBuraga–http://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

22. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ transferul datelor între client și server e stabilit de un protocol de comunicație HTTP (HyperText Transfer Protocol)

23. Dr.Sabin-CorneliuBuraga–http://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

24. Dr.Sabin-CorneliuBuraga–http://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↔thor.info.uaic.ro

25. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Client interfață cu utilizatorul

26. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Client interfață cu utilizatorul

27. Dr.Sabin-CorneliuBuraga–http://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

28. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ situl disciplinei Tehnologii Web tinyurl.com/tehnologii-web

29. Dr.Sabin-CorneliuBuraga–http://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

30. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ aplicație de editare 3D disponibilă în browser webglstudio.org

31. Dr.Sabin-CorneliuBuraga–http://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

32. Dr.Sabin-CorneliuBuraga–http://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

33. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ exemple de aplicații Web: Cloud9, Coursera, Devdocs.io, Dropbox, GitHub, info.uaic.ro, Instagram, JSBin, Medium, OpenStreetMap, PHPMyAdmin, Reddit, Quora, SlideShare, TED.com, Tumblr, Vimeo, Wikipedia, WordPress …și multe, multe, multe altele

34. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Date stocate persistent Client interfață cu utilizatorul

35. Dr.Sabin-CorneliuBuraga–http://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

36. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 💡 Care e arhitectura generică a unei aplicații Web?

37. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 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 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 ☁date externe (serviciu Web) frontend backend

38. Dr.Sabin-CorneliuBuraga–http://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)

39. Dr.Sabin-CorneliuBuraga–http://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/

40. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 1: cea mai importantă este interfața

41. Dr.Sabin-CorneliuBuraga–http://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) ilustrații 2D în format vectorial: SVG (Scalable Vector Graphics) conținut 3D: WebGL

42. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 2: cel mai important este programul

43. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Aplicație Web = Interfață + Program + Conținut (Date) server: C#, Go, Java, JavaScript, PHP, Python, Ruby, Scala etc. client: JavaScript + API-uri HTML5 implementate de browser servere de aplicații Web, cadre de lucru (framework-uri), biblioteci de cod, componente,…

44. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 3: cele mai importante sunt datele

45. Dr.Sabin-CorneliuBuraga–http://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 – o fațetă a „mișcării” NoSQL cheie-valoare – e.g., formatul JSON (JavaScript Object Notation) arborescent – XML (Extensible Markup Language)

46. Dr.Sabin-CorneliuBuraga–http://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!

47. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ View (prezentare + interacțiune) Model (structura datelor) demarcarea responsabilităților (separation of concerns) modelul de structurare a datelor este separat de maniera de procesare (controlul aplicației) și de modul de prezentare a acestora (interfața Web) Controller aplicație (server și/sau client)

48. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ View (prezentare + interacțiune) Model (structura datelor)  HTML, CSS, SVG, MathML, WebGL,…  SQL, JSON, XML (XQuery), RDF (SPARQL) 💡 servere de aplicații, framework-uri etc. arhitectura generică a unei aplicații Web va consta dintr-un set de resurse referitoare la model, view și controller – MVC Controller aplicație (server și/sau client)

49. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ uzual, mediul de dezvoltare – la nivel de server/client – (i.e. framework-ul Web) impune o anumită structură a fișierelor aplicației ce va fi implementată

50. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ├───app │ ├───Config │ ├───Console │ ├───Controller │ ├───Lib │ ├───Locale │ ├───Model │ │ ├───Behavior │ │ └───Datasource │ ├───Plugin │ ├───Test │ ├───tmp │ ├───Vendor │ ├───View │ │ ├───Elements │ │ ├───Errors │ │ ├───Helper │ │ ├───Layouts │ │ ├───Pages │ │ └───Scaffolds │ └───webroot │ ├───css │ ├───files │ ├───img │ └───js ├───lib ├───plugins └───vendors structura de directoare în cazul unei aplicații Web folosind CakePHP cakephp.org altele: CodeIgniter, FuelPHP, Laravel, Symfony, Yii, Zend Framework

51. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ / │ app.js │ package.json ├───bin ├───data ├───node_modules │ ├───body-parser │ ├───cookie-parser │ ├───debug │ ├───express │ │ ├───lib │ ├───jade │ ├───morgan ├───public │ ├───images │ ├───javascripts │ └───stylesheets │ style.css ├───routes │ index.js │ users.js └───views error.jade index.jade layout.jade eșafodajul unei aplicații Web bazate pe Express – expressjs.com specificarea interfeței (view-ul) via machete de vizualizare descrise cu JADE: jade-lang.com/ rute vizând deservirea cererilor pe baza URL-urilor solicitate de client module Node.js adiționale conținut static destinat clientului (foi de stiluri CSS, biblioteci JS procesate de browser, imagini,…) diverse configurări ale aplicației specificarea modelelor de date

52. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser prezentare procesare abstrac- tizare date pagini <Web/> HTML, CSS,… server „gras” (fat) client „prostuț” (dumb) arhitectura aplicațiilor Web: abordarea MVC tradițională www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/ frontend backend

53. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser modern prezentare procesare abstrac- tizare date recurgere la API JSON, XML, CSV și altele server „slab” (thin) client „puternic” (HTML5) aplicație JavaScript uneori, via un magazin de aplicații – app store arhitectura aplicațiilor Web: abordarea JavaScript www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/

54. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ sistem de operare prezentare procesare abstrac- tizare date recurgere la API JSON XML CSV … server „slab” (thin) client „isteț” (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,…) www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/

55. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser prezentare procesare abstrac- tizare date API JSON et al. server „slab” (thin) client Web arhitectura aplicațiilor Web: abordarea hibridă – e.g., book reader, chioșc informativ server de prezentare pagini HTML www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/

56. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 💡 Câteva exemplificări de aplicații Web?

57. Dr.Sabin-CorneliuBuraga–http://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)

58. Dr.Sabin-CorneliuBuraga–http://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 pe baza tehnologiilor Internet

59. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Aplicație Web Procesare la nivel de server (backend) Stocare persistentă eBay Java, Node.js (JavaScript) Oracle DB Facebook Hack, PHP (HHVM), Python, C++, Java, Erlang, D, Haskell, XHP (extensie PHP/Hack) MySQL, Apache HBase, Apache Cassandra Google C, C++, Go, Java, Python BigTable, MariaDB Linkedin Java, JavaScript, Scala Voldemort Pinterest Django (Python), Erlang MySQL, Redis Twitter C++, Java, Scala, Rails (Ruby) MySQL, Cassandra, Hadoop, Vertica Wikipedia PHP, Hack MySQLMariaDB WordPress PHP / Node.js – Calypso MySQL YouTube C, C++, Python, Java, Go BigTable, MariaDB en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week3

60. Dr.Sabin-CorneliuBuraga–http://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

61. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ procesare backend Java, Python, Node.js (JavaScript) procesare frontend React (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 servicii NoSQL Amazon DynamoDB management de cod GitHub (implementat în Ruby) 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 Apache Chukwa (scris în Java) highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html

62. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser control procesare client „puternic” și/sau „isteț” alternativă: arhitecturi fără server (serverless) aplicația Web depinde semnificativ de componente externe, disponibile în „nori” – (micro-)servicii BaaS Mike Roberts (2016) – martinfowler.com/articles/serverless.html func- ționa- litate1 ☁ func- ționa- litate2 ☁ ☁ auten- tificare ☁ BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service ☁ FaaS căutare procesare comenzi BaaS comenzi produse acces la API

63. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⧉ ☆ 💡 Aspecte importante vizând dezvoltarea de aplicații Web?

64. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⧉ aplicații Web  sisteme software complexe, în evoluție permanentă

65. Dr.Sabin-CorneliuBuraga–http://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

66. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ creșterea masei de utilizatori, având așteptări tot mai mari din partea software-ului de la conținut (hiper)textual 🔗 la aplicații Web sociale 👥 + interacțiune naturală 👏👂

67. Dr.Sabin-CorneliuBuraga–http://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)

68. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ neadaptarea la cerințele economice (de tip business) 🛠 dezvoltare vs. 📝 marketing vs. 👔 management

69. Dr.Sabin-CorneliuBuraga–http://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

70. Dr.Sabin-CorneliuBuraga–http://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

71. Dr.Sabin-CorneliuBuraga–http://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

72. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ programare (server + client) creare/adaptare de conținut testare documen- tare arhitectura info + navigarecerințe public beta lansare mentenanță www.webpagefx.com/blog/web-design/agile/ actualmente, sunt preferate metodologii agile de dezvoltare a sistemelor Web www.infoq.com/process-practices/

73. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Vreau să dezvolt un proiect Web…

74. Dr.Sabin-CorneliuBuraga–http://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” (2015) www.slideshare.net/busaco/cu-codul-n-nori

75. Dr.Sabin-CorneliuBuraga–http://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) ☁ ☁ ☁ DigitalOcean, Google Cloud Platform, Heroku, Jelastic, OpenStack, Windows Azure,… BitBucket GitHub Web: Cloud9, Koding, Ideone etc. desktop: Eclipse, Visual Studio Code,… instrumente utile la https://github.com/ripienaar/free-for-dev

76. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Parametrii unui proiect Web obiectiv principal durată cost abordare tehnologii procese rezultat resurse umane profilul echipei

77. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ✓ obiectiv principal crearea unui produs software utilizabil în cât mai scurt timp posibil

78. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⌚ durată aproximativ 2—6 luni

79. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ♨ cost de ordinul miilor de €

80. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 🎯 abordare prototipizare a interfeței cu utilizatorul metode agile asamblare de componente reutilizabile

81. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ♻️ tehnologii componente: servicii Web, API-uri publice, framework-uri, biblioteci, extensii etc. proiectare/programare „vizuală” multimedia …și altele

82. Dr.Sabin-CorneliuBuraga–http://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ă

83. Dr.Sabin-CorneliuBuraga–http://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

84. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ♚♞♟ resurse umane 3—9 indivizi „Prima versiune a aplicației demareaz-o doar cu 3 persoane.” gettingreal.37signals.com

85. Dr.Sabin-CorneliuBuraga–http://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 + specialiști în marketing și/sau relații cu publicul

86. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 😵 👥 👾 👻 Care-i echipa de dezvoltare a unei aplicații Web de anvergură?

87. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ management site editor project manager

88. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ dezvoltare (arhitectură) system architect data (content) architect component architect security architect

89. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/

91. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ interacțiune cu utilizatorul creative lead Web interface designer(s) graphic artist(s) HCI engineer Sabin Buraga, Interacțiune om-calculator (curs master FII, UAIC) profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

93. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ programare server-side programmers client-side programmers data/component integration programmers

96. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ testare testing lead client-side tester(s) server-side tester(s) component tester(s) integration tester(s)

98. Dr.Sabin-CorneliuBuraga–http://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)

99. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ marketing content producer(s) copywriter(s) content editor(s) branding & advertising expert(s) direct e-marketer public relations personnel

100. Dr.Sabin-CorneliuBuraga–http://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 (iulie 2017) github.com/dexteryy/spellbook-of-modern-webdev

101. Dr.Sabin-CorneliuBuraga–http://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)

102. Dr.Sabin-CorneliuBuraga–http://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ă, distribuită) securitate & performanță Web Web Developer

103. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ asistent (ajutor) al webmaster-ului, designerului sau dezvoltatorului Web poate efectua operații tehnice: instalare, configurare, monitorizare,… Web Technician

104. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Web Maintainer actualizează conținutul via o interfață WYSIWYG (de exemplu, recurgând la un sistem de management al conținutului – CMS sau wiki)

105. Dr.Sabin-CorneliuBuraga–http://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)

106. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Câteva inițiative (mai) recente vizând tehnologiile Web?

107. Dr.Sabin-CorneliuBuraga–http://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 📺 🏡💻 🖨 📱🎮 🚕🚁🌃

108. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Interacțiuni complexe & naturale dintre utilizator(i) și aplicațiile Web

109. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ o parte dintre tehnologii implementate în cadrul navigatorului Web – platform.html5.org

110. Dr.Sabin-CorneliuBuraga–http://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

112. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ WebGL de la interacțiuni 3D la artă generativă

113. Dr.Sabin-CorneliuBuraga–http://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

114. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Web ubicuu la nivel fizic – physical Web context: IoT (Internet of Things) far (beacon) = dispozitiv fizic capabil să expună un URL scanner/browser = entitate ce scanează, recunoaște, procesează și prezintă un set de URL-uri proxy = un serviciu Web (în „nori”) opțional cu rol de protejare a utilizatorului + îmbunătățire a performanței google.github.io/physical-web/  www.slideshare.net/yiibu/presentations

115. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Web ubicuu la nivel fizic – physical Web ☁beacon ☗ difuzare URL client Web analiză + optimizare proxy aplicație/serviciu Web procesare resursă extragere meta-date ① ② ③ ④ diverse direcții de interes: automatizarea spațiilor de locuit (home automation), industria auto (smart car), orașe „inteligente” (smart city), reclame contextuale (smart advertising) 🖼

116. Dr.Sabin-CorneliuBuraga–http://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 standarde Web: RDF (Resource Description Framework) OWL (Web Ontology Language) pentru detalii, de considerat: Sabin Buraga, Why 5-Star Data? (2016) www.slideshare.net/busaco/why-5star-data Sabin Buraga, Dezvoltarea aplicațiilor Web (curs master FII, UAIC) profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html

117. Dr.Sabin-CorneliuBuraga–http://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

118. Dr.Sabin-CorneliuBuraga–http://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

119. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Web „inteligent” – semantic Web, Web of Data în conjuncție cu alte abordări: învățare automată (machine learning) software capabil să învețe și/sau să realizeze predicții fără a fi explicit programat github.com/josephmisiti/awesome-machine-learning  deeplearninggallery.com

120. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 😍 Bun… Și eu ce fac?

121. Dr.Sabin-CorneliuBuraga–http://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

122. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Mult succes! imagini de epocă furnizate de vintag.es