Tehnici Web

Intro

Claudia Chiriță . 2023/2024

Admin info

Ce?

• tehnologii pentru dezvoltarea de aplicații web client
• HTML + CSS + JavaScript
• DOM, AJAX, Node.js, Canvas & SVG

Cum?

• curs + laborator
• canal Teams
• office hours

https://cs.unibuc.ro/~cechirita/tw

Note?

 notă-curs = nlab + nexa

 nlab = notă-laborator  // <= 40 puncte 
 nexa = notă-examen-pe-calculator // <= 60 puncte	

 nlab = nlab1 + nlab2 
 nlab1 = notă-activitate-laborator // <= 10 puncte
 nlab2 = notă-proiect // <= 30 de puncte
 
 nlab >= 20 & nexa >= 30 // condiția de promovare
          

Proiect

• HTML + CSS + JavaScript
• 2 etape
• prima etapă: HTML + CSS
• cerințele detaliate pe site

Resurse online

https://developer.mozilla.org/
https://www.w3schools.com/
https://www.w3.org/standards

Întrebări?

http://wwwwwwwwwwww

Internet

interconnection of computer networks
network of networks

sistem global de rețele de calculatoare interconectate care folosește suita de protocoale TCP/IP

Protocol

specificație tehnică

mulțime de reguli și convenții care facilitează și controlează schimbul de date între dispozitive diferite

TCP/IP (Internet protocol suite)

stivă de protocoale cu 4 straturi:

• Link layer: MAC
• Internet layer: IP (v4, v6)
• Transport layer: TCP, UDP
• Application layer: DNS, FTP, SSH, TLS/SSL, HTTP

TCP/IP (Internet protocol suite)

principalele protocoale:

• Transmission Control Protocol (TCP)
• User Datagram Protocol (UDP)
• Internet Protocol (IP)
  un echipament conectat la Internet este identificat printr-o adresă IP
  (etichetă numerică)

Internet

interconnection of computer networks
network of networks

oferă servicii: www, email, telefonie, file sharing

World Wide Web

“ The Web is an abstract (imaginary) space of information.
On the Net, you find computers – on the Web, you find document, sounds, videos, ... information.
On the Net, the connections are cables between computers; on the Web, connections are hypertext links.”

World Wide Web

un sistem de documente hypertext interconectate, care poate fi accesat în Internet

World Wide Web

The World Wide Web Consortium (W3C)
international community that develops open standards to ensure the long-term growth of the Web

World Wide Web Foundation
advance the open web as a public good and a basic right

HYPERTEXT

text (afișat pe un dispozitiv electronic) care conține referințe (hyperlinks) la date ce pot fi accesate imediat

• hyper - folosit cu sensul de extensie, generalizare
  din gr. ὑπέρ (peste, mai departe)
• depășirea constrângerilor liniare ale textului scris

Sînt vechi, domnule!

prima pagină web

istoria web-ului

World Wide Web

tehnologii fundamentale

• HTML = Hypertext Markup Language
  limbaj pentru crearea documentelor web
• URI = Uniform Resource Identifier
  un identificator unic pentru fiecare resursă web
• HTTP = HyperText Transfer Protocol
  principalul mijloc pentru cererea și primirea de resurse hypermedia web

URI

șir de caractere care identifică o resursă
prin nume sau locație

• URN = Uniform Resource Name
  identificare prin nume
  urn:ietf:rfc: 7230 sau urn:isbn:9780241339053
• URL = Uniform Resource Locator
  identificare prin locație
  https://datatracker.ietf.org/doc/html/rfc7230

URL

protocol:// host:port /location?query#fragment

https://www.youtube.com:443/watch?v=npqD602G90o&t=72s

PARSE IT!

FILE URL

legătura la un fișier local

file:///home/Documents/fmi/wp/tw/c1/index.html#/23

HTTP

HTTPS = HTTP + secure (port 443)
criptare Transport Layer Security (TLS)

HTTP (port 80)

client-server protocol

• SERVER: program care rulează pe un calculator conectat la Internet și care furnizează resurse web


• CLIENT: browser; program care facilitează accesul la resurse web

client-server protocol

#1: stabilirea unei conexiuni HTTP

#2: HTTP request

#3: HTTP response

metode HTTP

• GET - solicită o resursă de pe server
• POST - transmite date către server și primește un răspuns
• HEAD - solicită informaţii despre o resursă
• PUT - actualizează/depune o resursă pe server
• DELETE - șterge o resursă pe server

coduri de stare

• 103 Early Hints
• 200 OK
• 301 Moved Permanently
• 400 Bad Request
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• 500 Internal Server Error
• 503 Service Unavailable

istoria HTTP

de la HTTP/0.9 la HTTP/3

The state of HTTP in 2022

limbaje markup

• Standardised Generalised Markup Language (SGML)
  Charles Goldfarb, Ed Mosher, Ray Lorie, 1970, IBM
• HyperText Markup Language (HTML)
  Tim Berners-Lee, 1989, CERN
• Extensible Markup Language (XML)
  W3C, 1996
• HTML4 (1997); XHTML(2000)
• HTML5 (2012)

HTML + CSS alignment

HTML | CSS | JS

CSS în fișier separat

cod JavaScript în fișier separat

HTML | CSS | JS

hyper bibliografie

HTTP caching
HTTP cookies

The Garden Of Forking Paths, Jorge Luis Borges
New Media from Borges to HTML, Lev Manovich

          
                          (\ /)   
                          ( . .)  
                          C(")(") 
              
                         întrebări?