Tag: html5

Masonry: layout a griglia flessibili in JavaScript

In lingua inglese, il termine Masonry significa “muratura”, ed è lo stile da cui prende spunto l’omonima libreria JavaScript Masonry, che permette di implementare un layout a griglia nel proprio sito Web in cui gli elementi vengono disposti in automatico per ottimizzare lo spazio occupato in verticale all’interno della pagina, allineandoli in modo del tutto simile al processo di costruzione di un muro di mattoni, da cui il nome della libreria. Come funziona Masonry E’ possibile pensare al layout come un “float ruotato” dove gli elementi sono affiancati lungo il senso verticale della pagina, quindi dal basso verso l’alto (o viceversa), piuttosto che in senso orizzontale, come avviene normalmente quando si utilizza la proprietà float dei fogli di stile CSS

Leggi l'articolo completo

Crea grafici interattivi HTML5 con Chart.js

Hai bisogno di disegnare grafici interattivi di impatto oppure diagrammi all’interno di siti Web o applicazioni mobile? Con la libreria Chart.js disegni direttamente nel client (quindi nel browser) ben 6 tipologie di grafici differenti con cui puoi rappresentare dati per trasformarli in informazioni, senza ricorrere a soluzioni che richiedano l’intercessione del server per la generazione dinamica di immagini da scaricare, e soprattutto consentendo all’utente di interagire con il grafico (tramite mouse o con il tocco) per ottenere dettagli sulle grandezze raffigurate. Da dove vengono presi i dati da visualizzare nei grafici? Potete sfruttare la tecnologia AJAX scaricandoli in formato JSON tramite JavaScript da un server REST oppure inserirli direttamente nella pagina nella fase di generazione lato server della stessa. L’aspetto

Leggi l'articolo completo

HTML5 e Famo.us: interfacce su qualsiasi schermo

Il linguaggio HTML5, combinato con CSS3 e JavaScript, costituisce sempre più la via preferenziale per lo sviluppo di applicazioni cross platform e soprattutto cross device, e questa tendenza è spinta ancora di più dall’ampia disponibilità di librerie e framework in circolazione che sfruttano lo standard costruendovi sopra modelli a oggetti per la costruzione di interfacce utente dinamiche e complesse, utilizzando paradigmi talvolta completamente diversi tra loro, ma tutti interessanti per il modo particolare di “concepire” l’architettura delle applicazioni e gestirne l’aspetto e il funzionamento. In questo articolo pubblicato su HTML.it mostro come utilizzare una di queste librerie dal nome molto curioso: Famo.us. Si tratta di uno strumento rivolto alla costruzione di interfacce utente, con particolare cura nel supporto alla visualizzazione

Leggi l'articolo completo

Gestire il touch nelle pagine Web con Touchy.js

In un precedente articolo avevo già affrontato l’argomento dell’uso del touch all’interno delle pagine Web, analizzando quelle che sono le tecnologie emergenti a cui sta lavorando il W3C per il supporto diretto a questo tipo di interazione nei browser moderni (ad esempio, l’API Pointer Events). L’adozione di standard che sono ancora in via di definizione, l’estrema variabilità del loro supporto da parte dei browser e una certa complessità di gestione può rendere arduo introdurre il supporto touch all’interno del proprio sito, anche per interazioni molto basilari. Esistono librerie JavaScript che si fanno carico di interpretare l’input dell’utente fornendo una interfaccia di programmazione semplificata che agevola quindi l’introduzione di funzionalità basate sul tocco, sopperendo in molti casi anche alle lacune e

Leggi l'articolo completo

Grafica 3D all’interno delle pagine Web

Il supporto a WebGL integrato nei browser moderni ci consente di aggiungere alle pagine Web sfondi, superfici, texture, luci, ombre, effetti e animazioni che vengono riprodotti sfruttando l’accelerazione hardware e la potenza della GPU della scheda grafica. In questo articolo pubblicato su HTML.it vedremo come è possibile creare – con pochissime righe di codice – una semplice classe che definisca un’ambientazione tridimensionale all’interno di una pagina Web, utilizzando gli oggetti della libreria Away3D e il linguaggio TypeScript. Come sempre, buona lettura!

Leggi l'articolo completo

Creare un sito touch: la nuova frontiera del Web

Esiste un elemento che ha cambiato radicalmente le nostre abitudini nell’uso dei dispositivi moderni quali smartphone, tablet e non solo: il “tocco” (touch). L’avvento dello standard HTML5 ha portato una quantità infinite di nuove possibilità alle pagine Web: il supporto integrato alle risorse multimediali, un uso più spinto della semantica attraverso tag specifici, controlli di input specializzati per arricchire i nostri moduli e validare i dati, la possibilità di archiviare informazioni in uno storage locale, il disegno 2D con il Canvas, la geolocalizzazione e altro ancora. Microsoft è una delle aziende che sta facendo da vòlano a questa tecnologia, collaborando tutt’ora con il W3C nella definizione di una API standard per la gestione dell’input proveniente da dispositivi eterogenei (mouse, tocco

Leggi l'articolo completo

Come creare giochi HTML5 per il Web e Windows Store

HTML5 è una rivoluzione che non riguarda solo il Web e il browser, ma anche altre piattaforme desktop e mobile, e fornisce un supporto eccezionale alle applicazioni multimediali, in particolare a una categoria di queste: i videogiochi. Al giorno d’oggi, la creazione di un gioco con HTML5, CSS3 e JavaScript è diventato relativamente semplice, anche grazie alla pletora di librerie, framework e tool che si possono utilizzare per sfruttare un “engine” in grado di farsi carico delle problematiche tipiche dello sviluppo del gioco, concentrandosi solamente sui dettagli. Oltre alle risorse menzionate, principalmente rivolte agli sviluppatori, esistono addirittura ambienti di sviluppo completi che consentono di creare un gioco completo e non banale in pochi minuti: uno di questi è Construct 2.

Leggi l'articolo completo