Ce înseamnă să fii dezvoltator Web

4,585 views

Published on

A presentation explaining to (high-school) students what Web development is, including career information.

O prezentare pentru elevi și studenți oferind informații despre ceea ce înseamnă dezvoltarea de apllicații Web.

Published in: Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,585
On SlideShare
0
From Embeds
0
Number of Embeds
647
Actions
Shares
0
Downloads
112
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Ce înseamnă să fii dezvoltator Web

  1. 1. Ce înseamnă să fii dezvoltator Web Dr. Sabin Buragawww.purl.org/net/busaco Dr. Sabin Buraga Facultatea de Informatică, UAIC Iași www.purl.org/net/busaco
  2. 2. Ce este Web-ul?Dr. Sabin Buragawww.purl.org/net/busaco
  3. 3. world wide web Dr. Sabin Buragawww.purl.org/net/busaco Web WWW“pânză de păianjen mondială”
  4. 4. world wide web Dr. Sabin Buragawww.purl.org/net/busacoServiciu Internet WWW  Internet
  5. 5. world wide web Dr. Sabin Buragawww.purl.org/net/busaco cerere client Web server (browser) Web răspunsbazat pe modelul client/server al Internet-ului
  6. 6. …și pe hipertext Dr. Sabin Buragawww.purl.org/net/busaco
  7. 7. world wide web Dr. Sabin Buragawww.purl.org/net/busacoFuncționează conform reglementărilor Consorțiului Web MIT, ERCIM, Keio University Adobe, HP, IBM, Oracle, Microsoft,… www.w3.org
  8. 8. world wide web Dr. Sabin Buragawww.purl.org/net/busaco Scopuri principale:independența de dispozitiv independența de software scalabilitatea multimedia
  9. 9. world wide web Dr. Sabin Buragawww.purl.org/net/busaco Scopuri principale: independența de dispozitiv independența de software scalabilitatea multimediacaracter deschisopen standards
  10. 10. Care-s ingredientele Web-ului?Dr. Sabin Buragawww.purl.org/net/busaco
  11. 11. arhitectura Web-ului Dr. Sabin Buragawww.purl.org/net/busacoResursele sunt identificate prin adresa lor identificator uniform de resurse URI – Uniform Resource Identifierhttp://slideshare.net/busaco/presentations
  12. 12. arhitectura Web-ului Dr. Sabin Buragawww.purl.org/net/busacoAccesul la conținutul – reprezentarea – resurselor Web se realizează printr-un protocol HTTP – HyperText Transfer Protocol
  13. 13. arhitectura Web-ului Dr. Sabin Buragawww.purl.org/net/busaco adrese Web protocoale Web URI = URL + URN HTTP, HTTPS, SPDYcodificarea nume de protocoalele datelor domenii Internet Unicode DNS TCP/IP
  14. 14. Dr. Sabin Buragawww.purl.org/net/busaco pagini Webresursele – documentele – includ <marcaje />
  15. 15. Dr. Sabin Buragawww.purl.org/net/busacomarcajele conțin la rândul lor URI-urihipertext
  16. 16. Ce tipuri de aplicații Web există?Dr. Sabin Buragawww.purl.org/net/busaco
  17. 17. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busaco Sit Web sistem găzduind o serie de pagini (resurse) Web înruditeale unei organizații, companii sau persoane
  18. 18. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busaco Aplicație Webcolecție interconectată de pagini Web cu conținut generat dinamic oferă o funcționalitate specifică
  19. 19. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busaco Interacțiune Webinteracțiunea dintre sit/aplicație și utilizatori are loc via o interfață Web
  20. 20. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busaco Interacțiune Webinteracțiunea dintre sit/aplicație și utilizatori are loc via o interfață Web uzual, sit Web = aplicație Web
  21. 21. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busaco Diverse exemplificări: Amazon, Coursera, Dropbox, Expedia, Flickr, info.uaic.ro, PHPMyAdmin, Reddit, Quora,SlideShare, Twitter, Vimeo, webmin, WordPress …și multe, multe altele
  22. 22. tipuri de aplicații web Dr. Sabin Buragawww.purl.org/net/busacoCentrate pe documenteInteractiveTranzacționaleColaborative evoluția în timpOrientate spre portaluri a complexitățiiDe tip ubicuuWeb socialWeb semantic
  23. 23. Dr. Sabin Buragawww.purl.org/net/busacoCentrate pe documente – document centric conținut/pagini static(e): situri de companii, personale
  24. 24. Dr. Sabin Buragawww.purl.org/net/busaco
  25. 25. Dr. Sabin Buragawww.purl.org/net/busaco Interactive expoziții virtuale situri de știrisisteme de facilitare a călătoriilor (e-travel) chioșcuri informative …
  26. 26. Dr. Sabin Buragawww.purl.org/net/busaco
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco Tranzacționale online bankingsoluții B2B (business-to-business)fluxuri de activități (workflow-uri)
  28. 28. Dr. Sabin Buragawww.purl.org/net/busaco
  29. 29. Dr. Sabin Buragawww.purl.org/net/busaco Colaborative tele-conferințe Web aplicații Web de tip wiki servicii e-learningaplicații Web peer-to-peer
  30. 30. Dr. Sabin Buragawww.purl.org/net/busaco
  31. 31. Dr. Sabin Buragawww.purl.org/net/busaco Orientate spre portaluri localizare unitară a informațiilortehnice, de afaceri, guvernamentale,… specie: Web-ul cetățenesc
  32. 32. Dr. Sabin Buragawww.purl.org/net/busaco
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco De tip ubicuuservicii mobile bazate pe locația utilizatorului, disponibile pe mai multe plaforme: desktop, dispozitive mobile, tabletă,… Web-ul mobil
  34. 34. Dr. Sabin Buragawww.purl.org/net/busaco
  35. 35. Dr. Sabin Buragawww.purl.org/net/busaco Web socialmediatizare (syndication) spații de lucru virtuale filtrare colaborativă divertisment socialsocial (game) computing
  36. 36. Dr. Sabin Buragawww.purl.org/net/busaco
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco Web semantic (Web of Data) modelarea cunoștințelorpentru a fi “înțelese” de calculatoare dateinformațiicunoștințe
  38. 38. Dr. Sabin Buragawww.purl.org/net/busaco
  39. 39. Care-i arhitectura aplicațiilor Web? Dr. Sabin Buragawww.purl.org/net/busaco
  40. 40. arhitectura unei aplicații webDr. Sabin Buragawww.purl.org/net/busaco
  41. 41. Dr. Sabin Buragawww.purl.org/net/busacoAplicație Web = Interfață + Program + Date
  42. 42. Dr. Sabin Buragawww.purl.org/net/busacomitul 1: cea mai importantă este interfața
  43. 43. Dr. Sabin Buragawww.purl.org/net/busacoAplicație Web = Interfață + Program + Date mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele HTML, CSS, Ajax, Flash, SVG, WebGL, widget-uri,…
  44. 44. Dr. Sabin Buragawww.purl.org/net/busacomitul 2: cel mai important este programul
  45. 45. Dr. Sabin Buragawww.purl.org/net/busacoAplicație Web = Interfață + Program + Date mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele server: C#, Java, JS, PHP, Ruby,…; client: JavaScript
  46. 46. Dr. Sabin Buragawww.purl.org/net/busacomitul 3: cele mai importante sunt datele
  47. 47. Dr. Sabin Buragawww.purl.org/net/busacoAplicație Web = Interfață + Program + Date mitul 1: cea mai importantă este interfața mitul 2: cel mai important este programul mitul 3: cele mai importante sunt datele JSON, XML, relaționale (SQL), grafuri (NoSQL),…
  48. 48. Dr. Sabin Buragawww.purl.org/net/busacoAplicație Web = Interfață + Program + 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!
  49. 49. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busacoUzual, implică trei strate (3-tier application) Internet (Web) Client Server de aplicații Stocare (interface) (application) (persistence)
  50. 50. Fruit / Presentation Dr. Sabin Buragawww.purl.org/net/busaco Cream / Markup Custard / Page Logic Jelly / Business Logic Sponge / DatabaseC. Henderson, “Scalable Web Architectures”, 2007
  51. 51. Fruit / Presentation Dr. Sabin Buragawww.purl.org/net/busaco Cream / Markup Custard / Page Logic Jelly / Business Logic Sponge / DatabaseC. Henderson, “Scalable Web Architectures”, 2007
  52. 52. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busacoMajoritatea aplicațiilor Web sunt dezvoltate pe baza MVC (Model-View-Controller)
  53. 53. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busaco View Model(prezentare+interacțiune) (structura datelor) Controller (procesare)
  54. 54. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busaco View Modella nivel de client(i) Web stocare persistentă Controller aplicație (server și/sau client)
  55. 55. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busaco  HTML, CSS, SVG, WebGL,… SQL, NoSQL, XML, RDF,… View Model la nivel client(i) Web stocare persistentă  servere de aplicații, framework-uri Controller aplicație (server și/sau client)
  56. 56. arhitectura unei aplicații web Dr. Sabin Buragawww.purl.org/net/busacoStilul arhitectural MVC poate fi încurajat/impus de diverse framework-uri Web exemplificări: ASP.NET MVC (limbaje .NET precum C#) Backbone (JavaScript), CakePHP (PHP) Play (Java, Scala) Rails (Ruby) …
  57. 57. studiu de caz: Flickr Dr. Sabin Buragawww.purl.org/net/busaco
  58. 58. studiu de caz: flickr Dr. Sabin Buragawww.purl.org/net/busaco Partajare on-line a conținutului grafic (fotografii) Aplicație reprezentativă a Web-ului socialAgregare de comunități – imaginea ca obiect social Suport pentru adnotari via termeni de conținut (tagging) + comentarii
  59. 59. studiu de caz: flickr Dr. Sabin Buragawww.purl.org/net/busaco Interacțiune facilă cu utilizatorul UX (User Experience)Interacțiune cu alte aplicații via API-uri deschise Unicode internationalization (i18n) & localization (l10n)
  60. 60. studiu de caz: flickr Dr. Sabin Buragawww.purl.org/net/busaco Internet (Web) Servere deServere Web stocare foto Servere de baze de date
  61. 61. studiu de caz: flickr – tehnologii Dr. Sabin Buragawww.purl.org/net/busaco PHP (procesare – application logic, acces la API,șabloane de afișare via Smarty, modul de e-mail) Perl (validarea datelor) Java (managementul nodurilor de stocare) MySQL (stocare în format InnoDB) ImageMagick (prelucrare de imagini) Ajax (interacțiune asincronă) Linux (platformă de rulare)
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco
  63. 63. studiu de caz: flickr Dr. Sabin Buragawww.purl.org/net/busaco Interfețe de programare (API-uri) oferite de Flickr www.flickr.com/services/api/
  64. 64. studiu de caz: flickr Dr. Sabin Buragawww.purl.org/net/busacoDatele privitoare la fotografiile stocate de Flickrpot fi reutilizate și în alte contexte – via API-uri  aplicații Web hibride (mashup-uri) www.programmableweb.com
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco
  66. 66. Cum dezvoltăm o aplicație Web? Dr. Sabin Buragawww.purl.org/net/busaco
  67. 67. dezvoltarea aplicațiilor Web Dr. Sabin Buragawww.purl.org/net/busaco Cerințe (requirements)Analiză & proiectare (software design) Implementare (build) Testare (testing) Exploatare (deployment) Mentenanță (maintenance) Evoluție (evolution)
  68. 68. Soluții “în nori” de editare a codului-sursă Dr. Sabin Buragawww.purl.org/net/busaco design Web & programare la nivel de client Mozilla Thimble, JS Bin, jsFiddle programare Web folosind servere de aplicații CodeRun, PhpFiddle experimentarea interogărilor SQL asupra datelor SQL Fiddletestarea de API-uri Google invocate asincron via Ajax Google Code Playground programare generală (C, C#, Java, Python, Ruby,…) Compilr
  69. 69. Dr. Sabin Buragawww.purl.org/net/busaco
  70. 70. Development as a Service A. Iqbal, M. Haunsenblas, S. Decker (2012) Dr. Sabin Buragawww.purl.org/net/busaco
  71. 71. Google App Engine, Heroku, Jelastic, Windows Azure Dr. Sabin Buragawww.purl.org/net/busaco BitBucket, GitHub, Web: Cloud9 IDE, eXo Cloud,… SourceForge desktop: Eclipse, <oXygen/>, Visual Studio
  72. 72. aplicații Web: componente tipice Dr. Sabin Buragawww.purl.org/net/busaco client(i) firewall proxy middleware server(e) Web server(e) de aplicații framework-uri, biblioteci, alte componenteserver(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 tradiționale
  73. 73. Dr. Sabin Buragawww.purl.org/net/busacoArhitecturi Web stratificate (N-tier Web applications)
  74. 74. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco obiectiv principal durată cost abordare tehnologii procese rezultat resurse umane profilul echipei
  75. 75. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco obiectiv principal crearea unui produs software utilizabil în cât mai scurt timp posibil
  76. 76. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco durata aproximativ 2—6 luni
  77. 77. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco cost de ordinul miilor de Euro
  78. 78. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco abordare metode agile asamblare de componenteprototipizare – inclusiv wireframes, mock-ups
  79. 79. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco tehnologii componente (servicii Web, API-uri publice,framework-uri, biblioteci, plugin-uri, extensii etc.) proiectare/programare “vizuală” multimedia …și altele
  80. 80. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco programare (server + client) creare/adaptare documen- de conținut tare testare arhitectura infocerințe + navigare mentenanță public beta lansare http://sixrevisions.com/web-development/agile/
  81. 81. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco rezultat reutilizabilitate mare a codului, recurgerea la componente/limbaje/platforme standardaplicații implementate uzual conform standardelordesignul vizual este, de cele mai multe ori, unicat
  82. 82. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco resurse umane uzual, 3—9 indivizistrategii: in-house, outsourcing (offshore), near-shore
  83. 83. parametrii unui proiect web Dr. Sabin Buragawww.purl.org/net/busaco profilul echipeispecialiști în interacțiune – e.g., designeri Web + dezvoltatori (programatori) Web + arhitecți de baze de date +specialiști în marketing și/sau relații cu publicul
  84. 84. Dr. Sabin Buragawww.purl.org/net/busacoCare-i echipa de dezvoltare a unei aplicații Web de anvergură?
  85. 85. personal Dr. Sabin Buragawww.purl.org/net/busacoManagement site editorproject manager
  86. 86. personal Dr. Sabin Buragawww.purl.org/net/busacoDezvoltare (arhitectură) system architect creative lead Web interface designer(s) graphic artist(s) HCI engineer data (content) architect component architect security architect
  87. 87. personal Dr. Sabin Buragawww.purl.org/net/busaco Programare server-side programmers client-side programmersdata/component integration programmers
  88. 88. Dr. Sabin Buragawww.purl.org/net/busaco
  89. 89. personal Dr. Sabin Buragawww.purl.org/net/busaco Testare testing lead client-side tester(s) server-side tester(s) component tester(s)application integration tester(s)
  90. 90. personalDr. Sabin Buragawww.purl.org/net/busaco
  91. 91. personal Dr. Sabin Buragawww.purl.org/net/busacoOperații tehnice asupra serverului Web Webmaster hardware & network technicians network administrator(s) database administrator(s) backup operator uptime monitor security monitor(s)
  92. 92. personal Dr. Sabin Buragawww.purl.org/net/busaco Marketingcontent producer(s) & copywriter(s) content editor(s) branding & advertising expert(s) direct e-marketer public relations personnel
  93. 93. personal Dr. Sabin Buragawww.purl.org/net/busacoWeb Designer: mainly a front-end developer graphics applications, (X)HTML, CSS, cross-browser compatibility, experiență în design vizual + responsive design, cunoștințe privind interacțiunea Web, JavaScript (+biblioteci, precum jQuery), familiar cu paradigme de interacțiune naturală (gestures, touch, augmented reality),…
  94. 94. personal Dr. Sabin Buragawww.purl.org/net/busacoWeb Developer: mainly a back-end developer cel puțin 1 limbaj obiectual, server-side scripting, protocoale & standarde Internet/Web, cunoștințe de baze de date (inclusiv XML și/sau NoSQL), familiaritate cu sisteme CMS/wiki, cunoștințe privind servicii Web (în special REST), familiar cu alte paradigme de programare(e.g., funcțională, distribuită), cunoștințe referitoare la securitate & performanță Web,…
  95. 95. personalDr. Sabin Buragawww.purl.org/net/busaco
  96. 96. personal Dr. Sabin Buragawww.purl.org/net/busaco Web Technician asistent (ajutor) al webmaster-ului, designerului sau dezvoltatorului Web poate efectua operații tehnice(e.g., instalare, configurare, monitorizare,…)
  97. 97. personal Dr. Sabin Buragawww.purl.org/net/busacoWeb Maintainer: maintains information actualizează conținutul disponibil pe Web via o interfață WYSIWYG, uzual
  98. 98. Dr. Sabin Buragawww.purl.org/net/busaco echipa proiectului Webmanagement funcționalitate conținut (date) Web Project Software Domain Manager Engineer(s) Expert Multimedia Business Designer(s) Expert
  99. 99. Dr. Sabin Buragawww.purl.org/net/busaco
  100. 100. Ce înseamnă să fii dezvoltator Web Dr. Sabin Buragawww.purl.org/net/busaco Mult succes!

×