HTML

HTML5 The Basics (1 di 4)

La successiva iterazione dell'HTML è stata accolta con entusiasmo da parte di alcuni, avversione verso gli altri e confusione / paura da parte di tutti gli altri. Lo ami o lo odi, l'HTML 5 presto definirà come costruisci i tuoi siti web. Questo è il primo articolo di una serie in quattro parti che introdurrà HTML5 e le sue funzionalità di base, oltre a spiegare le principali differenze da HTML4.01 e XHTML 1.0 in modo da poter iniziare a preparare te stesso ei tuoi siti per la transizione. Durante la prossima settimana ci concentreremo su tre aree principali:

1. Nuovi elementi
2. Cambiamenti semantici
3. Farlo funzionare oggi

Questo articolo introdurrà brevemente ciascuno di questi argomenti per prepararti agli articoli più approfonditi.

API

Prima di approfondire gli argomenti sopra elencati, voglio dedicare un minuto alla funzione estremamente importante che non tratteremo nel suo articolo dedicato: le nuove API. HTML5 include diverse nuove API integrate con alcuni dei nuovi elementi HTML5 (che esamineremo in seguito). Ecco la lista completa direttamente da W3.org:

  • API di disegno 2D che può essere utilizzata con il nuovo elemento canvas.
  • API per la riproduzione di video e audio che può essere utilizzata con i nuovi elementi video e audio.
  • Un'API che abilita le applicazioni Web offline.
  • Un'API che consente a un'applicazione Web di registrarsi per determinati protocolli o tipi di supporto.
  • Modifica dell'API in combinazione con un nuovo attributo contenteditable globale.
  • Trascina e rilascia API in combinazione con un attributo trascinabile.
  • API che espone la cronologia e consente di aggiungervi pagine per evitare di rompere il pulsante Indietro.
  • Messaggistica tra documenti.

    • Come puoi vedere, lo scopo principale di queste API è facilitare la creazione di applicazioni web. Notare che la terza API abilita le app Web offline. Questa è un'ottima notizia sia per gli utenti che per i programmatori in quanto consente l'utilizzo di applicazioni ricche e basate su Internet in un ambiente offline. Puoi aspettarti di vedere molte delle tue applicazioni preferite che seguono Gmail introducendo l'accesso offline.

    Nuovi elementi in HTML5

    HTML5 introduce alcuni nuovi elementi. L'articolo due di questa serie vedrà alcuni di questi in dettaglio, ma per ora ecco l'elenco completo con brevi descrizioni (fonte: w3schools):


  •  Definisce il contenuto esterno

  •  Definisce alcuni contenuti a parte l'articolo in cui è inserito
  • Definisce il suono, come la musica o altri flussi audio
  • Definisce grafica, come grafici o altre immagini
  • Definisce un pulsante di comando, come un pulsante radio, una casella di controllo o un pulsante
  • Definisce un elenco di dati selezionabili. Il datagrid viene visualizzato come un elenco ad albero
  • Definisce un elenco di dati selezionabili. Utilizzare questo elemento insieme all'elemento di input per creare un elenco a discesa per il valore dell'input
  • Definisce un contenitore per il modello di dati. Questo elemento deve avere elementi figlio per definire un modello: elementi

  •  Definisce i dettagli di un elemento, che l'utente può vedere e clicca per nascondere
  • Definisce una finestra di dialogo, ad esempio una conversazione
  • Definisce il contenuto incorporato, come un plug-in
  • Definisce una fonte per gli eventi inviati da un server

  •  Utilizzato per raggruppare alcuni elementi

  •  Definisce il piè di pagina di una sezione o di un documento. In genere contiene il nome dell'autore, la data in cui il documento è stato scritto e / o le informazioni di contatto

  •  Definisce l'intestazione di una sezione o di un documento
  • Definisce il testo contrassegnato. Usa il tag se vuoi evidenziare parti del tuo testo
  • Definisce una misura. Utilizzato solo per misurazioni con un valore minimo e massimo noto

  •  Definisce una sezione di collegamenti di navigazione
  • Definisce un nestingpoint in un datatemplate per elementi figlio. Utilizzato insieme agli elementi e
  • Definisce diversi tipi di output, ad esempio l'output scritto da uno script
  • Definisce il work-in-progress. Utilizzare l'elemento di avanzamento per visualizzare l'avanzamento di una funzione che richiede tempo in JavaScript
  • Definisce le regole per l'aggiornamento di un datatemplate. Utilizzato insieme agli elementi e

  • Definisce le sezioni in un documento. Come capitoli, intestazioni, piè di pagina o altre sezioni del documento
  • Definisce le risorse multimediali per elementi multimediali, come e
  • Definisce un orario o una data, o entrambi
  • Definisce il video, ad esempio un filmato o altri flussi video

    • Sebbene non avremo il tempo di esaminare ciascuno di questi in dettaglio, esamineremo alcuni di quelli importanti come e.

    Cambiamenti semantici

    Questa è la parte che dovrebbe cambiare radicalmente il modo in cui strutturi i tuoi siti. Inclusi nella lista qui sopra ci sono sei nuovi elementi strutturali che contribuiranno a rendere coerente la struttura di base dei siti in tutto il web. Questi sei elementi sono:

    1.

    2.

    3.

    4.

    5.

    6.

    Pensa a questi come la sostituzione di molti dei DIV che attualmente utilizzi per strutturare il tuo sito. Quindi, invece?

    ,? avrai semplicemente?

    .? Avviso ho incluso? Div di classe? invece di? div id.? Questo perché questi elementi sono ripetibili su una pagina nello stesso modo in cui sono le classi. Lo esamineremo più avanti questa settimana nell'articolo tre.

    Ottenere lavoro HTML5 oggi

    Non essere troppo eccitato da questo titolo. Come ogni buon sviluppatore web sa, tutti i principali browser Web differiscono ancora (alcuni sono peggiori di altri, sai di chi sto parlando) sul supporto per HTML4.01 e XHTML 1.0. Ora immagina cosa significhi per un cambiamento grande e nuovo come HTML5. Sebbene i mega-sviluppatori come Google stiano spingendo oltre l'accettazione di HTML5, non saranno supportati su tutta la linea per un po 'di tempo. Tuttavia, ciò non significa che non dovresti iniziare a prepararti per il grande passaggio oggi, e certamente non significa che non ci siano trucchi intelligenti là fuori per permetterti di iniziare a giocare con HTML5 subito. Nell'articolo quattro, daremo un'occhiata a come è possibile iniziare il tuo viaggio HTML5 più presto che dopo.

    Conclusione

    Questo articolo ha brevemente introdotto i nuovi elementi e le API incluse in HTML5.Abbiamo parlato di come dovresti essere entusiasta delle modifiche che HTML5 apporterà alle app web di domani. Abbiamo anche avuto un assaggio dei cambiamenti semantici a venire e della nuova struttura che le nostre pagine web dovrebbero prendere in futuro. Infine, abbiamo imparato che anche se HTML5 non è ancora pronto per le masse, possiamo ancora ottenere le nostre dita sviluppatore sporche su di esso e iniziare a sperimentare oggi. Torna spesso qui nella prossima settimana per uno sguardo approfondito su ciascuno di questi argomenti!