Ce tehnologii și metode sunt utilizate pentru a atinge interactivitatea pe site-urile web?

• HTML: Marcaj semantic al structurii conținutului.
• CSS: Formatare și stilizare a elementelor, inclusiv pseudo-clase (:hover, :active, :focus) și tranziții/ animații pentru schimbări line.
• JavaScript: Limbajul principal pentru adăugarea de dinamism și interactivitate.
  • Lucru cu DOM (Document Object Model) pentru modificarea structurii, conținutului și stilurilor paginii.
  • Gestionarea evenimentelor (clicuri, introducere de la tastatură, hover etc.).
  • AJAX (JavaScript și XML asincrone) sau Fetch API pentru solicitări asincrone către server fără reîncărcarea paginii.
• Framework-uri și biblioteci JavaScript:
  • React: Abordare bazată pe componente, DOM virtual pentru actualizări eficiente ale interfeței.
  • Vue.js: Framework progresiv, reactivitate a datelor.
  • Angular: Framework complet pentru aplicații mari.
  • jQuery (învechit, dar încă utilizat): Ușurează lucrul cu DOM, gestionarea evenimentelor și AJAX.
• Evenimente trimise de server (SSE) și WebSockets: Pentru comunicare bidirecțională în timp real între client și server.
• Preprocesatoare CSS (Sass, Less): Îmbunătățesc capacitățile CSS, permițând utilizarea variabilelor, mixin-urilor, imbricării și funcțiilor pentru crearea unor stiluri mai ușor de întreținut și mai complexe, care pot influența interactivitatea.
• SVG (Grafice vectoriale scalabile): Pentru crearea de grafice vectoriale interactive.
• Canvas API: Pentru desenarea graficii și animațiilor cu JavaScript.

// Exemplu de manipulare a evenimentului de clic pe un buton în JavaScript
document.getElementById('myButton').addEventListener('click', function() {
  alert('Buton apăsat!');
});

/* Exemplu de utilizare a pseudo-clasei :hover */
button:hover {
  background-color: lightblue; /* Schimbare de culoare la hover */
}

Metode principale:

• Manipularea DOM.
• Gestionarea intrării utilizatorului (evenimente de mouse, tastatură, atingere).
• Solicitări asincrone către server pentru actualizarea dinamică a conținutului (AJAX/Fetch).
• Crearea de animații și tranziții.
• Utilizarea componentelor UI gata făcute (buton, formulare, slider, ferestre modale) din biblioteci sau framework-uri.
• Validarea intrării utilizatorului pe partea client.
• Încărcarea dinamică a conținutului.