Category Archives: Articoli

Masonry: layout a griglia flessibili in JavaScript

Articolo - Masonry: crea layout a griglia flessibili con 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 per allineare gli elementi. Articolo - Masonry - Layout prima e dopo

La libreria Masonry fornisce altre funzionalità interessanti, come la possibilità di definire lo spazio libero da lasciare tra un elemento e l’altro, o tra due colonne di elementi affiancati; inoltre, è possibile chiedere a Masonry di spostare in automatico gli elementi a fronte di un ridimensionamento della finestra del browser, utilizzando opzionalmente un’animazione di transizione.

L’uso di questo layout è particolarmente indicato nella costruzione di siti Web che devono essere fruiti da dispositivi eterogenei, con schermi aventi dimensioni tutte differenti tra loro, o dove gli elementi mostrati (una galleria di immagini, ad esempio) non hanno tutti la stessa dimensione, per cui l’ottimizzazione dello spazio vuoto consente di ridurre lo scorrimento necessario nella pagina e di presentare i contenuti con un aspetto visualmente più ordinato.

La libreria Masonry supporta inoltre funzionalità avanzate, come la possibilità di definire elementi “fissi”, ossia che non potranno essere spostati durante la composizione del layout ottimale, con il resto degli elementi che si andranno a disporre di conseguenza attorno a quelli fissi.

Approfondisci

Per conoscere tutto ciò che la libreria Masonry può fare per voi, leggete questo articolo pubblicato sul portale HTML.it.

Crea grafici interattivi HTML5 con Chart.js

Articolo - Creare grafici 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 di ciascun grafico può essere personalizzato nel dettaglio attraverso le opzioni che la libreria mette a disposizione: si può intervenire sui colori, sulle trasparenze, sugli stili delle linee e dei riempimenti, sfruttando le potenzialità che la Canvas API di HTML5 mette a disposizione, per rappresentare al meglio le informazioni che volete mostrare all’utente, tenendo sempre conto che “anche l’occhio vuole la sua parte”. 😉

In questo articolo su HTML.it potete scoprire come integrare la libreria Chart.js nel vostro progetto e configurarlo a dovere in pochi semplici passi.

Come sempre, buona lettura! 😉

HTTP Live Streaming: contenuti multimediali sul Web

Articolo - HTTP Live Streaming

La diffusione e riproduzione di contenuti multimediali è senz’altro l’attività principale per la quale si sfrutta il Web al giorno d’oggi: è importante poter contare sull’esistenza di standard consolidati a cui professionisti e semplici amatori possono appoggiarsi per rendere fruibili a un pubblico estremamente vasto filmati, brani musicali, interviste, presentazioni live, insomma tracce video e audio, così come è determinante da parte dei “consumatori” poter riprodurre queste risorse ovunque, quindi non solo all’interno del classico browser, ma anche su dispositivi mobili come smartphone e tablet di qualsiasi fascia.

Esistono oggi diversi protocolli ampiamente diffusi che si prefiggono di soddisfare questa esigenza: ad esempio, si può ricorrere al generico UDP (User Datagram Protocol) o al più specifico RDP. Si tratta di protocolli che richiedono spesso una configurazione del firewall/proxy affinché sia possibile inviare e ricevere dati attraverso le porte dedicate, mentre in altri casi sono richiesti specifici plugin per poter elaborare il contenuto veicolato.

Per fornire una soluzione il più possibile aperta e indipendente da estensioni hardware e software cercando di riutilizzare le funzionalità già presenti nel protocollo standard per eccellenza del Web, ossia HTTP, Apple ha ideato HTTP Live Streaming (HLS).

In questo articolo pubblicato su HTML.it vediamo come funziona il protocollo HTTP Live Streaming in dettaglio, come (e dove) è possibile pubblicare risorse utilizzando HLS e anche come riprodurre i contenuti all’interno di browser e device tramite JavaScript.

Buona lettura! 😉

HTML5 e Famo.us: interfacce su qualsiasi schermo

Articolo - HTML5 e Famo.us

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 su qualsiasi schermo generalmente disponibile nei dispositivi conosciuti.

Come sempre, buona lettura! 😉

Creare interfacce utente di applicazioni Web con React

Articolo - ReactIn questo articolo pubblicato su HTML.it (prima parte) illustro come creare le interfacce utente delle vostre applicazioni Web con React.

React è la libreria creata da Facebook e Instagram (acquistata dalla società di Mark Zuckerberg) e impiegata anche nella costruzione dei due popolari social network, per la creazione di interfacce utente estremamente dinamiche per le applicazioni Web.

La peculiarità di questa libreria risiede nel suo operare per componenti, scomponendo idealmente e praticamente gli elementi che costituiscono l’interfaccia nelle loro parti, fino ad arrivare a quelle più piccole, realizzando per ciascuna un componente autonomo, che definisce il proprio stato e racchiude la logica di funzionamento, procedendo successivamente alla loro aggregazione finale per ottenere l’interfaccia complessiva del sito.

Oltre a semplificare notevolmente il processo di sviluppo dell’applicazione, questo approccio facilita anche la cooperazione tra i diversi collaboratori del team di sviluppo, che possono dedicarsi alla codifica autonoma delle singole parti, incapsulando la logica e gestendo le dipendenze tra i componenti esponendo proprietà.

La possibilità di usare la sintassi JSX facilita infine la scrittura di markup all’interno del codice JavaScript, rendendo ancora più fluida e leggibile la definizione dei tag HTML che raffigurano i componenti, o la dichiarazione di componenti “figli” con l’inizializzazione delle loro proprietà.

Sperando di avervi incuriosito, non mi resta che augurarvi buona lettura! 😉

Gestire il touch nelle pagine Web con Touchy.js

FotoIn 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 alle differenze tra i browser più diffusi.

In questo articolo pubblicato su HTML.it vedremo come è possibile utilizzare Touchy.js per aggiungere il supporto “touch” alle pagine HTML e renderle più adatte ai dispositivi naturalmente abilitati a questo tipo di interazione come tablet e smartphone, ma anche sui desktop, senza però appesantire inutilmente la pagina, senza introdurre voluminose dipendenze e lavorando in modo uniforme e compatibile nella maggior parte dei browser.

Buona lettura!

Grafica 3D all’interno delle pagine Web

FotoIl 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!

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 con le dita, penne): la specifica Pointer Events, supportata dal browser Internet Explorer (versione 10 e successive) e ancora in fase di definizione.

In questo articolo pubblicato su HTML.it vedremo come sfruttare l’API per creare interfacce “touch enabled” ricche, intuitive e divertenti, semplificandone drasticamente lo sviluppo e, quindi, il codice da scrivere.

Riprodurre suoni e musica su qualsiasi dispositivo con JavaScript

SoundManager2Grazie al diffondersi di dispositivi come smartphone e tablet sempre più orientati al multimediale, per determinate tipologie di siti Web, applicazioni e giochi (a maggior ragione) si presenta l’esigenza di poter riprodurre musica ed effetti sonori all’interno del browser.

Il supporto all’audio generico nei browser è sempre stato parziale ed eterogeneo. L’avvento di HTML5 ha migliorato lo scenario, grazie alle potenzialità del nuovo standard, che tuttavia non è supportato da tutti i browser, rendendo quindi difficile se non impossibile per gli sviluppatori individuare una soluzione univoca che permetta di riprodurre il suono indipendentemente dal browser, dal dispositivo e dalla piattaforma.

La libreria SoundManager2 ci viene in aiuto fornendoci un API gratuita in linguaggio Javascript che consente di gestire il playback di musica e suoni in modo uniforme e indipendente, in ambiente desktop e mobile.

In questo articolo illustro le caratteristiche principali della libreria e come utilizzarla nel vostro progetto, dai primi passi alle operazioni più avanzate.

Buona lettura!

Come creare giochi HTML5 per il Web e Windows Store

Articolo - Creare giochi per il Web e Windows 8HTML5 è 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.

In questo mio articolo pubblicato su HTML.it, vediamo assieme come creare in pochi semplici passi un gioco usando Construct 2 e come esportarlo in HTML5 o in Visual Studio per la successiva pubblicazione su Windows Store.

Buona lettura!

Copyright © 2017. Powered by WordPress & Romangie Theme.