HTML5 New Elements (2 di 4)

Un paio di giorni fa abbiamo pubblicato un'introduzione a HTML5 e abbiamo brevemente trattato alcuni dei contenuti che tratterremo in questa serie. Il post di oggi, che è il secondo della serie di quattro, darà un'occhiata a come utilizzare sei dei nuovi elementi in HTML5: canvas, article, audio, video, meter e mark.

Tieni presente che HTML5 non è esattamente pronto per l'uso diffuso, quindi non cambiare ancora niente sul tuo sito. Sappi che HTML5 arriverà presto, quindi questi concetti potrebbero rivelarsi utili nel prossimo futuro.

L'elemento Canvas

L'elemento è un nuovo contenitore per la grafica. Si noti che la tela è semplicemente quella, un'area in cui è possibile posizionare la grafica. L'elemento dovrebbe contenere solo due attributi: larghezza e altezza. Ecco un esempio:

Il disegno reale per questo esempio è fatto in JavaScript. La chiave per implementare la grafica nel tuo script è fare riferimento a un contesto attraverso il metodo getContext. Per ora l'unico contesto che puoi chiamare è? 2d ?. Pensa al contesto 2d come il tuo piano di disegno reale (definito dalla dimensione dell'area di disegno HTML) che inizia alle coordinate 0,0 (l'estrema sinistra dello schermo). Per disegnare un oggetto, per prima cosa decidi a quali coordinate inizierà l'articolo. Ad esempio, se vuoi disegnare qualcosa con dieci pixel in alto a sinistra e dieci pixel in alto, le tue coordinate sono (10,10).

Esistono diversi modi per utilizzare il contesto 2d per creare grafica. È supportato tutto, dai semplici rettangoli alle curve e alle sfumature. Per i nostri scopi, lo terremo semplice solo per iniziare. Ecco il JavaScript, che implementa i principi descritti sopra:

function draw () {var canvas = document.getElementById ("graphicsCanvas"); if (canvas.getContext) {var context = canvas.getContext ("2d"); context.fillStyle = "rgb (50,50,50)"; context.fillRect (20, 20, 150, 150); context.strokeRect (20, 20, 300, 300); }}

Se stai utilizzando un browser supportato (Safari, Firefox o Opera) dovresti vedere il seguente risultato quando unisci HTML e JavaScript che abbiamo appena visto.

Ancora una volta, prima di fare qualsiasi disegno ricordati di implementare il contesto 2d o non vedrai nessuna grafica! Nel caso ti stia chiedendo cosa diavolo questo? FillRect? si parla di spazzatura, ecco una rapida spiegazione della sintassi per alcuni dei metodi di disegno.

Disegnare rettangoli

Prima di tutto, dovresti sapere che quando vedi quattro numeri nel formato (0,0,0,0), questo rappresenta (distanza da sinistra, distanza dalla cima, larghezza, altezza). Ora esaminiamo alcuni esempi di sintassi specifici:
fillStyle =? rgb (50, 50, 50); Determina il colore del riempimento
fillRect (20, 20, 150, 150); Crea un semplice rettangolo pieno
strokeRect (20, 20, 150, 150); Crea un rettangolo accarezzato
clearRect (20, 20, 150, 150); Crea un'area trasparente (un buco)

Forme di disegno

beginPath (); Inizia un percorso
closePath (); Chiude un percorso
moveTo (20, 20,); Solleva il pennino e inizia in una nuova posizione
riempire (); Riempie la forma disegnata
ictus (20, 20); Segna la forma disegnata

Molto di piu!

Per ulteriori informazioni su come disegnare con JavaScript e su come utilizzare l'elemento canvas, consulta il tutorial di Mozilla.
Inoltre, ecco un pratico Cheat Sheet Canvas di Jacob Seidelin.

L'elemento dell'articolo

L'elemento dell'articolo è semplicemente un modo per fare riferimento a un post sul blog, a un articolo di notizie, ecc. All'interno della tua pagina. Ecco la sintassi:

<p> Titolo articolo Qui articolo </p>

Come puoi immaginare, questo renderà super facile il targeting e lo stile degli articoli nel tuo CSS senza definire una classe.

Gli elementi audio e video

Come l'elemento dell'articolo, questi sono semplicemente contenitori che contengono contenuti. Di nuovo puoi vedere immediatamente il vantaggio quando inizi a modellare questi con i CSS senza bisogno di alcuna classe personalizzata. Ecco la sintassi semplice per ciascuno (qualsiasi testo tra parentesi compare solo nei browser non supportati):

Browser non supportato!> Browser non supportato!

Attributi audio

Entrambi gli elementi audio e video contengono attributi importanti che dovresti sapere. Per prima cosa guardiamo quelli per l'elemento audio (fonte: w3shcools).

<strong>autoplay (vero o falso)</strong> Se è vero, l'audio inizierà a suonare non appena sarà pronto <strong>controlli (vero o falso)</strong> Se è vero, all'utente vengono mostrati alcuni controlli, come un pulsante di riproduzione. <strong>inizio (valore numerico)</strong> Definisce la posizione in cui il flusso audio deve iniziare nel lettore. Come impostazione predefinita, l'audio inizia a suonare all'inizio. <strong>fine (valore numerico)</strong> Definisce dove nel flusso audio il giocatore dovrebbe smettere di giocare. Come impostazione predefinita, l'audio viene riprodotto fino alla fine. <strong>altezza (pixel)</strong> Imposta l'altezza del video player <strong>larghezza (pixel)</strong> Imposta la larghezza del video player <strong>loopend (valore numerico)</strong> Definisce dove nel flusso audio il circuito dovrebbe fermarsi, prima di saltare all'inizio del ciclo. L'impostazione predefinita è i valori dell'attributo finale. <strong>loopstart (valore numerico)</strong> Definisce dove deve essere avviato il loop nel flusso audio. L'impostazione predefinita è i valori dell'attributo di avvio <strong>contatore (valore numerico)</strong> Definisce quante volte deve essere riprodotta la clip audio. Il valore predefinito è 1. <strong>poster (url)</strong> L'URL di un'immagine da mostrare prima che il video sia pronto <strong>src (url)</strong> L'URL dell'audio da riprodurre

Attributi video

L'elemento video contiene tutti gli stessi attributi dell'elemento audio e altri 3 (fonte: w3shcools).

<strong>altezza (pixel)</strong> Imposta l'altezza del video player <strong>larghezza (pixel)</strong> Imposta la larghezza del video player <strong>poster (url)</strong> L'URL di un'immagine da mostrare prima che il video sia pronto

L'elemento metro

L'elemento contatore può essere utilizzato per contenere misure di qualsiasi tipo (percentuale, punteggio, contatore giorno, ecc.). Questa volta, prima di guardare un esempio, passiamo direttamente agli attributi (di nuovo, direttamente da w3shcools).

<strong>alto (numero)</strong> Definisce a che punto il valore della misurazione è considerato un valore elevato <strong>basso (numero)</strong> Definisce a che punto il valore della misurazione è considerato un valore basso <strong>max (numero)</strong> Definisce il valore massimo. Il valore predefinito è 1 <strong>min (numero)</strong> Definisce il valore minimo. Il valore predefinito è 0 <strong>ottimale (numero)</strong> Definisce quale valore di misurazione è il valore migliore. Se questo valore è superiore al valore dell'attributo "alto", significa che il valore più alto è il migliore. Se questo valore è inferiore al valore dell'attributo "basso", significa che il valore più basso è il migliore. <strong>valore (numero)</strong> Definisce il valore della misurazione

I due attributi particolarmente importanti in questo set sono max e min. L'elemento metro può solo essere utilizzato quando la misurazione ha un valore massimo e minimo noto. Ciò non significa necessariamente che devi definire un massimo e un minimo (potresti usare il valore predefinito), solo che devi essere consapevole di ciò che sono. Ecco un esempio:

<p>Hai trovato 25 su 50 o 50% delle parole nascoste!</p>

Si noti che per il primo elemento del contatore era necessaria la specifica del minimo e del massimo poiché l'intervallo era compreso tra 0 e 50. Tuttavia, il secondo misuratore utilizzava l'intervallo predefinito da 1 a 100 perché le percentuali di solito rientrano in questo intervallo.

L'elemento Mark

L'ultimo elemento che daremo un'occhiata è. Semplice nel concetto, l'elemento del segno può essere usato per evidenziare una sezione specifica del testo per renderlo più evidente al lettore. Ecco un esempio:

<p>Un buon evidenziatore è difficile da trovare.</p>

Ora possiamo usare il tag mark per indirizzare facilmente la sezione che vogliamo evidenziare nel nostro CSS:

mark {background-color: yellow; font-weight: bold; }

Il risultato è un testo piacevole e evidenziato che puoi individuare in un istante.

Conclusione

In sintesi, abbiamo coperto sei elementi completamente nuovi da HTML5. Per prima cosa abbiamo guardato il tela elemento, che è un contenitore per un'ampia varietà di elementi grafici che è possibile creare utilizzando un numero di funzioni JavaScript. Poi abbiamo imparato a conoscere il articolo elemento, che rappresenta un nuovo modo di fare riferimento a contenuti esterni. Successivamente abbiamo delineato come utilizzare il Audio e video tag con i loro vari attributi e come taggare correttamente i valori che rientrano in un intervallo specificato usando il metro elemento. Alla fine, abbiamo scoperto come evidenziare una parte specifica del testo usando il marchio elemento.

Spero che tu abbia imparato tanto a leggere questo come l'ho scritto io! Usa i commenti qui sotto per porre eventuali domande o condividere le tue conoscenze HTML5. Il prossimo articolo di questa serie è forse il più importante perché vedremo alcuni nuovi elementi che rappresentano alcuni seri cambiamenti semantici nella struttura dei file HTML. Quindi torna presto a vedere come sarà il tuo codice HTML per gli anni a venire!