Inizia con HTML5 / CSS3: suggerimenti, vetrine ed esempi di codifica

HTML5 sta guadagnando più popolarità e sta iniziando a evolvere l’intera interfaccia web. Persino alcuni sviluppatori web hanno affermato che gli elementi HTM5 e gli effetti visivi sono paragonabili a Flash. Il nuovo stile di scripting è di facile comprensione e le funzionalità per migliorare l’interfaccia Web sono illimitate. Quindi quanto è interessante questo HTML5 comunque?


Questo articolo ha lo scopo di fornire ai lettori uno spaccato di ciò che dovresti sapere sull’HTML5 e, soprattutto, alcuni suggerimenti & trucchi per la creazione di pagine HTML5 leggere, attraenti e interattive.

1. Base in HTML5

HTML5

Prima di iniziare ulteriormente questo argomento in HTML5, sarà bene controllare prima il browser corrente. Poiché molti browser sono ancora in modalità di sviluppo (miglioramento per adattarsi a HTML5), alcune funzionalità menzionate qui potrebbero non essere supportabili.

Ecco alcuni suggerimenti rapidi per controllare il tuo compatibilità del browser.

Per comprendere ulteriormente la limitazione di un determinato browser, è possibile fare riferimento a Qui.

2. Effetti di testo: aggiunta dell’effetto ombra e di testo avanzato in HTML5

Effetti di testo in HTML5

Effetto ombra di base sul testo

Questo è il codice di una stringa più semplice che trasforma il tuo titolo ordinario in un testo accattivante. Non sottovalutare mai l’effetto ombra. Per creare questo effetto dall’aspetto simile è necessario che il web designer esegua più passaggi della modifica delle immagini in Photoshop. E ora tutto ciò che serve è solo una riga di codice. La distanza dell’ombra, il colore può essere modificato in base al contenuto del tuo cuore.

Esempio di codifica

#shadow h1 {
text-shadow: 0px 1px 1px rgba (0,0,0, .2);
}

Testo sull’effetto antincendio avanzato

Il prossimo consiglio è di mostrarti come la codifica HTML5 può essere modificata in un testo ancora più bello. Se sperimenti abbastanza o trovi altri esempi, le possibilità di personalizzare gli effetti sono infinite. Nota: questo esempio non è stato creato da alcun software di modifica delle immagini. Solo codici semplici in HTML5.

Esempio di codifica

#fire h1 {
text-align: center;
margine: 200px auto;
famiglia di font: "Lega-gotico", Corriere;
dimensione carattere: 200px; trasformazione del testo: maiuscolo;
colore: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Altro grande esempio: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Angolo arrotondato in HTML5

Angolo arrotondato in HTML5

Lo stile del layout della pagina Web in HTML5 non è mai stato così facile dall’introduzione del CSS. E ora puoi persino avere gli angoli arrotondati degli elementi del layout! Immagina questo; non è più necessario tagliare l’immagine di sfondo, non più frammenti di immagine disordinati. Questo porterà molti applausi ai web designer là fuori.

Esempio di codifica

div {
bordo: 2px solido # 434343;
imbottitura: 10px;
sfondo: # e3e3e3;
-raggio-bordo-moz: 10px;
-webkit-border-radius: 10px;
larghezza: 500px;
}

Nota: Moz significa Mozilla e webkit è per Safari e Chrome.

Altro grande esempio: http://fjd1.com/roundcorner.html

4. Grafica vettoriale scalabile (SVG) in HTML5

Tutorial, guida ed esempi HTML 5

La grafica vettoriale scalabile o comunemente nota come (SVG) è una grafica vettoriale a 2 dimensioni definita in file di testo XML. In altre parole, poiché il loro DNA si basa su file di testo XML, possono essere creati o modificabili sulla piattaforma web. Ciò significa anche che può essere facilmente ridimensionato e i motori di ricerca sono in grado di leggere e comprendere l’immagine.

Codice di esempio

Altri grandi esempi:

5. Incorporamento del filmato in HTML5

Video in HTML5

Ecco un’altra parte interessante per mostrare le capacità di HTML5. Molti dei video online vengono generalmente presentati all’utente web sotto forma di Flash. Fino a poco tempo fa, l’incorporamento dei video in HTML5 stava lentamente guadagnando slancio (YouTube è un buon esempio) e Flash sta lentamente perdendo la sua attrattiva. Perchè è così? Utenti mobili. Se vuoi che il tuo video sia in grado di essere riprodotto su telefoni iPhone e Android, HTML5 è il modo per andare avanti.

Per incorporare il video, devi sapere che al momento ci sono 3 formati supportati da diversi browser; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Codice di esempio

Altro grande esempio: https://www.html5rocks.com/en/tutorials/video/basics/

6. Presentazione della diapositiva in HTML5

Tutorial, guida ed esempi HTML 5

Powerpoint è stato associato al nome sinonimo della presentazione delle diapositive. Ma perché limitarsi a una presentazione offline in cui è possibile creare diapositive destinate al pubblico Web? HTML5 è venuto in soccorso nel creare diapositive di presentazione molto potenti, complete di menu di transizione e navigazione. La parte migliore è che puoi persino applicare la trasformazione 3D alla tua presentazione.

Codice di esempio

pre {
transizione: all-in di all-in 1;
}

pre: hover {
colore di sfondo: # F2F5FE;
bordo-colore: nero;
}

div {
trasforma: rotate3d (1,1,0, 45deg);
}

Altri grandi esempi:

7. Contenuto modificabile in HTML5

Tutorial, guida ed esempi HTML 5

Il testo statico è così vecchio stile nell’era in cui flessibilità e dinamica dominano il mondo. In HTML5, è possibile definire un’area di testo che può essere modificata dall’utente Web senza editor di testo.

Codice di esempio

Questo contenuto è modificabile!

Altro grande esempio: http://html5demos.com/contenteditable

8. Web tela interattiva in HTML5

Tutorial, guida ed esempi HTML 5

Oltre a SVG in HTML5, canvas è la cosa migliore che sia mai successa al web. Canvas consente il rendering di 2 forme dimensionali che portano l’interattività a un livello completo senza l’aiuto di Flash.

Tuttavia, vale la pena menzionare qui la semplice codifica in HTML5 che crea un’interazione di animazione straordinaria.

Altro grande esempio: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Trascina selezione in HTML5

Tutorial, guida ed esempi HTML 5

Il trascinamento della selezione (a volte noto come DnD) è un’altra funzionalità interessante disponibile per HTML5. Un ottimo esempio potrebbe essere l’implementazione di Google nel loro Gmail. Se stai utilizzando uno dei browser compatibili con HTML5, puoi semplicemente trascinare un file dal tuo computer e rilasciarlo nella finestra di composizione del messaggio. Verrà aggiunto automaticamente come allegato. Quant’è fico?

Codice di esempio (DnD nativo)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, falso);

Altro grande esempio: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Grafico dei dati CSS puro in HTML5

Tutorial, guida ed esempi HTML 5

Prima di HTML5, è anche impossibile creare un grafico presentabile semplicemente usando la codifica in HTML. Inoltre, modificare il valore dei dati e riflettere sul grafico non è un compito semplice. Ancora una volta, HTML5 in soccorso. Insieme ai CSS, puoi creare un grafico assolutamente meraviglioso che fa vergognare Microsoft Excel. I codici sono semplici e tutto ciò che devi fare è passare il tempo a personalizzare il colore e l’effetto perfetti per il tuo grafico.

Altro grande esempio: http://cssglobe.com/pure-css-data-chart/

Non ne ho mai abbastanza di HTML 5?

Anche noi! Ecco di più sull’argomento, vai a dare un’occhiata.

* 30 esempi fantastici di siti Web HTML 5
* Introduzione a HTML 5
* È necessario leggere tutorial HTML 5 nel 2012
* Impara HTML 5: 10 Lezioni da leggere

Inoltre, controlla  questo corso intensivo HTML 5 di Robin Nixon. Robin Nixon è l’autore di Learning PHP, MySQL e JavaScript; il corso copre praticamente tutto ciò che un principiante deve sapere in HTML5, tra cui codifica HTML di base, tela HTML5 per disegno, geolocalizzazione, archiviazione locale, nonché audio e video HTML5.

L’articolo originale è stato pubblicato per la prima volta Blog WHSR; ora è gestito e aggiornato dallo staff di BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map