Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web 2020 01/12: World Wide Web – aspecte arhitecturale

136 Aufrufe

Veröffentlicht am

Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web 2020 01/12: World Wide Web – aspecte arhitecturale

  1. 1. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Tehnologii Web concepte primare și viziune Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
  2. 2. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ „De la un anumit punct încolo, nu mai există cale de întoarcere. Acela este punctul ce trebuie atins.” Franz Kafka
  3. 3. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Ce este Web-ul?
  4. 4. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Serviciu Internet WWW  Internet
  5. 5. Dr.SabinBuraga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
  6. 6. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Sir Tim Berners-Lee – lauriat al premiului Turing cea mai importantă distincție în domeniul informaticii
  7. 7. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Idee (Sir Tim Berners-Lee la CERN – 1989) integrarea unor sisteme informaționale disparate într-un mod unitar, fără diferențe între sursele de date
  8. 8. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Idee (Sir Tim Berners-Lee la CERN – 1989) integrarea unor sisteme informaționale disparate într-un mod unitar, fără diferențe între sursele de date
  9. 9. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Idee (Sir Tim Berners-Lee la CERN – 1989) integrarea unor sisteme informaționale disparate într-un mod unitar, fără diferențe între sursele de date
  10. 10. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Idee (Sir Tim Berners-Lee la CERN – 1989) integrarea unor sisteme informaționale disparate într-un mod unitar, fără diferențe între sursele de date anything can link to anything
  11. 11. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Bazat pe modelul client/server server Web client Web (browser) cerere răspuns
  12. 12. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ …și pe hipertext (hipermedia)
  13. 13. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Scopuri (intenții) principale: independența de dispozitiv independența de software scalabilitatea ubicuitatea
  14. 14. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ world wide web Bazat pe principii și 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/Consortium/mission
  15. 15. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ arhitectura Web-ului Resursele sunt identificate prin adresa lor identificator uniform de resurse URI – Uniform Resource Identifier https://slideshare.net/busaco/presentations
  16. 16. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ arhitectura Web-ului Accesul la conținutul – reprezentarea – resurselor Web se realizează printr-un protocol HTTP – HyperText Transfer Protocol
  17. 17. Dr.SabinBuraga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
  18. 18. Dr.SabinBuraga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 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.20↔profs.info.uaic.ro identificator uniform de resursă protocol HTTP „securizat”
  19. 19. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ resursele – documentele – includ <marcaje /> pagini Web
  20. 20. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Anca Bogdan album photo twitter.com/pinkfloyd marcajele conțin la rândul lor URI-urihipertext (hipermedia)
  21. 21. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Relațiile dintre o resursă Web, adresa ei (URI) și reprezentarea structurată a resursei informații meteo despre Iași <section id="meteo"> <div class="weather"> <p lang="ro">Iași</p> <span>city</span> <p lang="en">Temp. <span id="today"> is <strong>…</strong> &deg;C</span> </p> </div> </section> reprezentare adresabilitate via URI resursă Web identifică reprezintă formatul HTML5 (utilizatori umani, uzual) http://world.info/europe/romania/iasi/weather?today
  22. 22. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Relațiile dintre o resursă Web, adresa ei (URI) și reprezentarea structurată a resursei informații meteo despre Iași <weather> <point lat="..." long="…"> <name lang="ro"> Iași </name> <type>city</type> … </point> <temperature when="…"> <value>…</value> </temperature> </weather> reprezentare adresabilitate via URI resursă Web identifică reprezintă formatul XML (procesat de software) http://world.info/europe/romania/iasi/weather?today
  23. 23. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Relațiile dintre o resursă Web, adresa ei (URI) și reprezentarea structurată a resursei informații meteo despre Iași { "point" : { "geo" : { "lat" : "…", "long" : "…" }, "name" : "Iași", "type" : "city" }, "temperature" : { "when" : "…", "value" : "…" } } reprezentare adresabilitate via URI resursă Web identifică reprezintă formatul JSON (procesat de software) http://world.info/europe/romania/iasi/weather?today
  24. 24. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Relațiile dintre o resursă Web, adresa ei (URI) și reprezentarea structurată a resursei informații meteo despre Iași adresabilitate via URI resursă Web identifică reprezintă http://world.info/europe/romania/iasi/weather?today { "point" : { "geo" : { "lat" :…, "long" :… } } reprezentarea – într-un format deschis (e.g., HTML, XML, JSON, RDF,…) – include date propriu-zise + meta-date <section id="meteo"> <div class="weather"> <p lang="ro">Iași</p> <span>(city)</span> <p lang="en">Temp. <span class="today"> is <strong>…</strong> &deg;C</span> </p> </div> </section> reprezentare { … "temperature" : { "when" : "…", "value" : "…" } … } reprezentare
  25. 25. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Ce înseamnă hipertextul?
  26. 26. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: definire „Material scris sau grafic interconectat într-o manieră complexă care în mod convențional nu poate fi reprezentat pe hârtie.” Ted Nelson, 1965
  27. 27. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: definire Text non-liniar
  28. 28. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: definire Text non-liniar versus
  29. 29. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: definire O formă de document electronic
  30. 30. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: definire O formă de document electronic formate deschise de reprezentare a conținutului: DocBook HTML (HyperText Markup Language) ODF (Open Document Format) PDF (Portable Document Format) …
  31. 31. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: istoric Vannevar Bush – As We May Think, 1945 MEMEX (MEMory EXtended)
  32. 32. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ “Consider a future device for individual use, which is a sort of mechanized private file and library. […] It affords an immediate step, however, to associative indexing, the basic idea of which is a provision whereby any item may be caused at will to select immediately and automatically another. […] The process of tying two items together is the important thing.”
  33. 33. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: istoric Douglas Engelbart Augment (1968) mouse, interfețe grafice, procesare a textului, poștă electronică, script-uri, ferestre pe ecran etc. The Mother of All Demos (1968) www.youtube.com/watch?v=yJDv-zdhzMY
  34. 34. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: istoric Ted Nelson Xanadu – prototip, 1991 propune termenul „hipertext”
  35. 35. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: istoric Hipermedia = hipertext + multimedia Multimedia =  medii
  36. 36. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: istoric Hipermedia = hipertext + multimedia Multimedia =  medii medii de comunicare: continue (audio, video) și/sau discrete (text)
  37. 37. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: ingrediente Hipertextul ca (di)graf noduri = concepte legături = relații
  38. 38. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: ingrediente Noduri interconectate prin legături nod sursă = referință (ancoră) nod destinație = referent (ancoră)
  39. 39. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: legături referențiale (non-ierarhice) organizaționale (ierarhice, structurale)
  40. 40. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: legături statice (indicate de autorul unui document) versus dinamice – generate de un program
  41. 41. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ hipertext: documente Conținut tipuri de medii: text, imagine, audio, video,… Organizare noduri + legături structurale Prezentare textuală, grafică, multimedia, 3D, mixtă – (ne)interactivă
  42. 42. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ (în loc de) pauză digitalsynopsis.com/design/web-designer-developer-jokes-humour-funny/
  43. 43. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Cum identificăm (adresăm) resursele Web?
  44. 44. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI Fiecare resursă Web este desemnată de identificatori uniformi de resurse Uniform Resource Identifier RFC 2396, 3986 www.rfc-editor.org/rfc/rfc3986.txt
  45. 45. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI: definiții Resursă „lucru” care posedă o identitate
  46. 46. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI: definiții Resursă „lucru” care posedă o identitate însemnare, CV, fotografie, prezentare, melodie, program, persoană, bază de date, concept arbitrar etc.
  47. 47. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI: definiții Identificator obiect care poate juca rolul unei resurse
  48. 48. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI: definiții Identificator obiect care poate juca rolul unei resurse secvență (șir) de caractere având o sintaxă precisă
  49. 49. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI: definiții Uniformitate resurse eterogene pot fi desemnate pe baza acelorași convenții sintactice, fiind interpretate semantic în mod uniform
  50. 50. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI = URL + URN Uniform Resource Locator identifică resursele prin intermediul mecanismului de accesare: adresă de rețea, domeniu simbolic RFC 2717, 2718
  51. 51. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI = URL + URN Uniform Resource Locator http://profs.info.uaic.ro/~busaco/teach/ mailto:tux@pinguin.info ftp://ftp.funet.fi/pub/README.txt data:image/png;base64,iVBORw0KGgoAA…YII= tel:+40232201090 geo:47.16667,27.60000
  52. 52. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI = URL + URN Uniform Resource Name identifică resursele prin nume, în mod persistent, chiar dacă resursa este una abstractă RFC 2141
  53. 53. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI = URL + URN urn:mimetypes urn:ISBN:973-681-988-4 urn:ietf:rfc:7700 urn:mozilla:install-manifest
  54. 54. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI = URL + URN urn:mimetypes urn:ISBN:973-681-988-4 urn:ietf:rfc:7700 urn:mozilla:install-manifest tipuri de date MIME (Media Types) carte identificată unic prin ISBN specificație (standard) componentă software
  55. 55. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ schema://authority/path?query http://www.pinguin.info/prog/cauta?id=Tux
  56. 56. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ schema://authority/path?query http://www.pinguin.info/prog/cauta?id=Tux schema reprezintă o schemă de adresare standardizată (recunoscută de client – e.g., navigatorul Web) about data file ftp geo http https im imap ipp ldap mailto nfs sip sms stun tel turn tv urn ws xmpp etc. www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
  57. 57. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ schema://authority/path?query http://www.pinguin.info/prog/cauta?id=Tux authority poate include informații de autentificare a utilizatorului (nume:parola – specificate „în clar”!) + date privind domeniul/adresa Internet, eventual portul de acces
  58. 58. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ schema://authority/path?query http://www.pinguin.info/prog/cauta?id=Tux path referă o cale (virtuală) de directoare spre un nume de resursă – interpretabil ca nume de fișier, eventual având o extensie
  59. 59. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ schema://authority/path?query http://www.pinguin.info/prog/cauta?id=Tux query specifică date de intrare uzual, perechi cheie=valoare delimitate de „&”
  60. 60. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI Caractere rezervate ; / ? : @ & = + $ , se codifică în baza 16, precedate de % URL encoding
  61. 61. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI Caractere rezervate ; / ? : @ & = + $ , se codifică în baza 16, precedate de % exemple: spațiul va deveni %20 https://emojipedia.org/emoji/%F0%9F%96%A4/ de ce?
  62. 62. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI URL-uri absolute http://www.info.uaic.ro/~busaco/cv.html apar obligatoriu componentele schema și authority
  63. 63. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI URL-uri relative ../../web.css se indică doar construcții referitoare la componenta path și, eventual, query
  64. 64. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI „Fragmente” dintr-un conținut pot fi referite prin URIref (referințe, fragment identifiers) URI#URIref
  65. 65. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI „Fragmente” dintr-un conținut pot fi referite prin URIref (referințe, fragment identifiers) URI#URIref web-biblio.html#web https://drive.google.com/#my-drive
  66. 66. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI URI-urile trebuie considerate opace nu trebuie „ghicit” tipul conținutului inspectând URI-ul asociat resursei avansat
  67. 67. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI URI-urile trebuie considerate opace nu trebuie „ghicit” tipul conținutului inspectând URI-ul asociat resursei tipul unei resurse nu este dat de extensie – e.g., .html –, ci de tipul MIME transmis de server avansat
  68. 68. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ URI URI-urile trebuie considerate opace nu trebuie „ghicit” tipul conținutului inspectând URI-ul asociat resursei starea/conținutul resursei poate evolua în timp, dar URI-ul asociat ei nu “Cool URIs don’t change” – www.w3.org/Provider/Style/URI.html avansat
  69. 69. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ IRI Internationalized Resource Identifier permite folosirea caracterelor Unicode în URI a se vedea și IDN (Internationalized Domain Name) exemplificări: http://thefreedictionary.com/rosé http://www.köpabåt.eu/motorbat/ http://www.以食為天.tw/
  70. 70. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Ce categorii de aplicații Web putem dezvolta?
  71. 71. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Sit Web sistem pe care rulează un server Web găzduind o serie de pagini (resurse) înrudite ale unei organizații, companii sau persoane
  72. 72. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Aplicație Web colecție interconectată de pagini Web cu conținut generat dinamic, menită a oferi utilizatorilor o funcționalitate specifică de studiat S. Buraga, „Dezvoltator Web?!” (2019) www.slideshare.net/busaco/sabin-buraga-dezvoltator-web-2019
  73. 73. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Aplicație Web interacțiunea dintre aplicație și utilizatori are loc via o interfață Web
  74. 74. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Aplicație Web interacțiunea dintre aplicație și utilizatori are loc via o interfață Web uzual, sit Web ≡ aplicație Web
  75. 75. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Aplicație Web exemplificări: Cloud9, Coursera, Devdocs.io, Dropbox, GitHub, info.uaic.ro, Instagram, JSBin, Medium, OpenStreetMap, Pocket, Reddit, Quora, SlideShare, TED.com, Tumblr, Vimeo, Wikipedia, WordPress …și multe, multe, multe altele
  76. 76. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Centrate pe documente Interactive Tranzacționale Colaborative Orientate spre portaluri Web social Web semantic De tip ubicuu evoluția complexității categorii de aplicații web
  77. 77. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Centrate pe documente – document centric conținut/pagini static(e): situri de organizații, companii, referitoare la persoane
  78. 78. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  79. 79. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Interactive expoziții virtuale situri de știri sisteme de facilitare a călătoriilor (e-travel) chioșcuri informative participare la evenimente online …
  80. 80. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  81. 81. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Tranzacționale online banking soluții B2B (business-to-business) aplicații B2C (business-to-consumer) sisteme C2C (consumer-to-consumer) fluxuri de activități (Web workflow-uri)
  82. 82. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  83. 83. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Colaborative tele-conferințe Web aplicații Web de tip wiki servicii e-learning aplicații Web peer-to-peer
  84. 84. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  85. 85. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Orientate spre portaluri localizare unitară a informațiilor tehnice, de afaceri, guvernamentale,… specie: Web-ul cetățenesc
  86. 86. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  87. 87. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Web social platforma în care utilizatorul își controlează propriile date așa-numitul Web 2.0, conform Tim O’Reilly, 2005
  88. 88. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Web social mediatizare (syndication) filtrare colaborativă pe baza adnotărilor efectuate de utilizatori – (hash)tagging spații de lucru virtuale divertisment social social (game) computing
  89. 89. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Obiect de interes Asocieri mentale multiple (concepte) t t t t tagging tagging-ul reprezintă o modalitate particulară de adnotare a resurselor electronice – digital content annotation
  90. 90. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ tag = (meta)dată simplă – termen arbitrar ales – asociată extern unui obiect (unei resurse) cu scopul de a identifica, sorta, agrega etc. acea resursă Obiect de interes Asocieri mentale multiple (concepte) t t t t tagging
  91. 91. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
  92. 92. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Web semantic (Web of Data – Web-ul datelor interconectate) modelarea cunoștințelor pentru a fi „înțelese” de calculatoare dateinformațiicunoștințe avansat
  93. 93. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ interogări asupra DBpedia (varianta procesabilă de către mașină a enciclopediei Wikipedia) PersonWithOccupation ComputerPioneers FinnishComputerProgrammers FreeSoftwareProgrammers LinuxKernelHackers LivingPeople PeopleInInformationTechnology Golfer diverse URL-uri desemnând concepte (things, not strings) Cine este Linus Torvalds? avansat
  94. 94. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ De tip ubicuu aplicații/servicii mobile bazate pe locația utilizatorului, disponibile pe mai multe plaforme: desktop, dispozitiv mobil, tabletă, consolă de jocuri, aparat casnic,… Web-ul mobil cloud computing InternetWeb of Things – WoT avansat
  95. 95. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ avansat Web of Things Architecture (în lucru la W3C, 13 feb. 2020) w3c.github.io/wot-architecture/
  96. 96. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Care este arhitectura unei aplicații Web?
  97. 97. Dr.SabinBuraga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 (front-end) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone – ce vor fi executate pe diverse componente implementate la nivel de server (back-end), pentru a obține date ☁ date externe (serviciu Web) front-end back-end
  98. 98. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Aplicație Web = Interfață + Program + Conținut (Date)
  99. 99. Dr.SabinBuraga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 standarde deschise: HTML, CSS, Ajax, SVG, WebGL,…
  100. 100. Dr.SabinBuraga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 server: C#, Java, JavaScript, PHP, Python, Ruby, Scala,… client: JavaScript, WebAssembly (WASM)
  101. 101. Dr.SabinBuraga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 relaționale (SQL), grafuri (NoSQL), JSON, XML, RDF etc.
  102. 102. Dr.SabinBuraga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!
  103. 103. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ Internet (Web) ⚙ ⚙ Client interfață cu utilizatorul Server sit/aplicație Web Date stocate persistent Aplicație Web = Interfață + Program + Conținut (Date) ⚙
  104. 104. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ rezumat ☸terminologie, modelul client/server, hipertext, URI, sit vs. aplicație, tipuri de aplicații Web
  105. 105. Dr.SabinBuragaprofs.info.uaic.ro/~busaco/ episodul viitor: programare Web de la HTTP la cookie-uri și sesiuni Web httpstatusdogs.com @girlie_mac

×