Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,690 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 2. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Ce este Web-ul?
  3. 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. 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. 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. 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. 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. 8. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri)
  9. 9. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri)
  10. 10. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ client (realizează cereri) server (oferă răspunsuri) protocol (reguli de transfer de date)
  11. 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. 12. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ web primul client Web
  13. 13. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ webprimul server Web
  14. 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. 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. 16. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ conținut ≅ <marcajeHTML versiune="5.1" /> + { foi de stiluri: CSS } à la mode
  17. 17. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  aceste conținuturi sunt stocate în documente (pagini) Web mai general, resurse Web
  18. 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. 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. 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. 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. 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. 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. 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. 25. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Client interfață cu utilizatorul
  26. 26. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Internet (Web) Server sit/aplicație Web Client interfață cu utilizatorul
  27. 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. 28. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ situl disciplinei Tehnologii Web tinyurl.com/tehnologii-web
  29. 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. 30. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ aplicație de editare 3D disponibilă în browser webglstudio.org
  31. 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. 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. 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. 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. 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. 36. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 💡 Care e arhitectura generică a unei aplicații Web?
  37. 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. 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. 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. 40. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 1: cea mai importantă este interfața
  41. 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. 42. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 2: cel mai important este programul
  43. 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. 44. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ mitul 3: cele mai importante sunt datele
  45. 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. 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. 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. 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. 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. 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. 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. 52. Dr.Sabin-CorneliuBuraga–http://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ă www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/ frontend backend
  53. 53. Dr.Sabin-CorneliuBuraga–http://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 „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. 54. Dr.Sabin-CorneliuBuraga–http://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 „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. 55. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser prezen- tare proce- sare 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. 56. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 💡 Câteva exemplificări de aplicații Web?
  57. 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. 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. 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. 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. 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. 62. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ browser control proce- sare 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. 63. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⧉ ☆ 💡 Aspecte importante vizând dezvoltarea de aplicații Web?
  64. 64. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⧉ aplicații Web  sisteme software complexe, în evoluție permanentă
  65. 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. 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. 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. 68. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ neadaptarea la cerințele economice (de tip business) 🛠 dezvoltare vs. 📝 marketing vs. 👔 management
  69. 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. 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. 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. 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. 73. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Vreau să dezvolt un proiect Web…
  74. 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. 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. 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. 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. 78. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ⌚ durată aproximativ 2—6 luni
  79. 79. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ ♨ cost de ordinul miilor de €
  80. 80. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 🎯 abordare prototipizare a interfeței cu utilizatorul metode agile asamblare de componente reutilizabile
  81. 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. 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. 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. 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. 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. 86. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 😵 👥 👾 👻 Care-i echipa de dezvoltare a unei aplicații Web de anvergură?
  87. 87. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ management site editor project manager
  88. 88. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ dezvoltare (arhitectură) system architect data (content) architect component architect security architect
  89. 89. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  90. 90. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  91. 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
  92. 92. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  93. 93. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ programare server-side programmers client-side programmers data/component integration programmers
  94. 94. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  95. 95. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  96. 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)
  97. 97. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  98. 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. 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. 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. 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. 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. 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. 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. 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. 106. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/  Câteva inițiative (mai) recente vizând tehnologiile Web?
  107. 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. 108. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Interacțiuni complexe & naturale dintre utilizator(i) și aplicațiile Web
  109. 109. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ o parte dintre tehnologii implementate în cadrul navigatorului Web – platform.html5.org
  110. 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
  111. 111. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/
  112. 112. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ WebGL de la interacțiuni 3D la artă generativă
  113. 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. 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. 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. 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. 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. 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. 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. 120. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ 😍 Bun… Și eu ce fac?
  121. 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. 122. Dr.Sabin-CorneliuBuraga–http://profs.info.uaic.ro/~busaco/ Mult succes! imagini de epocă furnizate de vintag.es

×