take two.

Corso gratuito · Utenti iscritti · Lezione 6 / 10

Bootstrap, jQuery e area editoriale

Costruire un’interfaccia leggibile, con ricerca progressiva e controlli sul salvataggio.

35 minuti, pratica inclusaTutti i corsi

Redazione: Take Two · Pubblicato

Anteprima della lezione

Una gerarchia semplice

La homepage usa titolo, introduzione, ricerca e una griglia di articoli. Nell’editor, etichette e margini separano titolo, testo, stato e pulsante. Il riferimento include Bootstrap 5.3.8 e jQuery 4.0.0 verificati nelle fonti ufficiali alla data del corso. Bootstrap 5 non richiede jQuery: qui jQuery serve a migliorare la ricerca, mentre le classi Bootstrap governano il layout. Non aggiungere componenti solo perché sono disponibili.

Progressivo significa avere un’alternativa

Il form ricerca funziona come GET /?q=... anche senza JavaScript. Con JavaScript, jQuery richiede /search e aggiorna i risultati. Il server mantiene il filtro sulle bozze. Durante una nuova richiesta annulliamo quella precedente e scriviamo lo stato in un’area aria-live. Se la chiamata fallisce, il messaggio indica come tornare alla ricerca standard. Il link “Next” continua a usare una pagina leggibile senza script.

Cosa controllare nella pratica

  • Modifica obsoleta: 409.
  • Ricerca GET disponibile senza script.
  • Titoli e corpo inseriti come testo.

Continua con la lezione completa

Iscriviti gratis per accedere alla spiegazione completa, agli esempi, all’esercizio e alla soluzione commentata. Questa anteprima resta aperta a tutti.

Iscriviti / accedi gratis →

Materiali del laboratorio · Versione 1

Il progetto di riferimento

Scarica il blog completo, con istruzioni in italiano e inglese, schema SQL, contratti per gli agenti, fixture inventate e test. L’interfaccia del blog di esempio è in inglese. Il codice è un laboratorio locale: recupero password, verifica email e MFA sono evoluzioni da affrontare prima di aprirlo a una community pubblica.

Scarica il progetto blog (ZIP) →

Download gratuito. Le lezioni complete richiedono un account Take Two gratuito. L’accesso a Codex dipende dal tuo piano.

Fonti e approfondimenti