Category Archives: Programmazione

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

ITDevCon 2014: slide, esempi e foto-reportage

Articolo - ITDevCon 2014 - Slide, esempi e foto-reportageSì è conclusa l’edizione 2014 di ITDevCon – European Delphi Conference, che quest’anno si è tenuta in una nuova location, spostandosi da Verona a Milano.

Uno degli argomenti principali di ITDevCon 2014 non poteva essere che il rilascio recente di Delphi XE7, una release importante che ha segnato ancora di più la maturità del prodotto per quanto riguarda lo sviluppo di applicazioni mobile sulle piattaforme iOS e Android, caratteristiche che sono state ampiamente trattate in diversi speech della conferenza, per passare poi a tematiche di taglio più architetturale (Design Pattern, Dependency Injection, Meta-Programming, …). Discretamente ampia anche quest’anno la partecipazione di ospiti provenienti dall’estero, non solo tra gli speaker ma anche tra i partecipanti, per un evento dalla forma ben collaudata, ormai una garanzia. 😉

In merito al mio speech sulla tecnologia App Tethering, potete liberamente scaricare le slide e gli esempi che ho provveduto a pubblicare.

Se volete invece vedere alcune fotografie dell’evento (scattate da me, senza pretese), le trovate all’interno di questo album fotografico su Flickr.

Ancora una volta, è doveroso ringraziare tutti i ragazzi e ragazze dello staff di bitTime Software per la riuscita di ITDevCon 2014 e gli sponsor che lo hanno reso possibile.

Arrivederci al prossimo anno!

10 modi di divertirsi con App Tethering: il mio speech a ITDevCon 2014

Post - ITDevCon2014 - Non perdere il mio speech su App TetheringIl 23 e 24 ottobre 2014 torna ITDevCon – European Delphi Conference, la conferenza europea dedicata agli sviluppatori Delphi.

Quest’anno il luogo dell’evento si sposterà dalla città di Verona (a cui mi ero ormai affezionato) a quella di Milano, presso SIAM – Società D’Incoraggiamento Arti e Mestieri.

Tra gli argomenti che verranno trattati non potranno ovviamente mancare le novità presenti nell’ultima release di Delphi: XE7. Si parlerà quindi di sviluppo sulle piattaforme supportate al giorno d’oggi dal linguaggio Delphi – Windows, MacOSX, Android e iOS – e delle tecnologie a disposizione per la creazione di applicazioni desktop tradizionali e multimediali, servizi REST e BaaS (esterni ma anche in-house), applicazioni Multi-Device (stesso progetto e sorgente per desktop e mobile), nonché delle metodologie di programmazione, di librerie e componenti di terze parti e altro ancora.

Sul sito ufficiale dell’evento potete consultare la lista degli speaker, tra cui sarò presente anche io con questo speech:

Post - ITDevCon2014 - Speech su AppTethering10 modi di divertirsi con App Tethering: l’obiettivo del talk è quello di mostrare, in modo giocoso e disteso, alcuni possibili utilizzi di App Tethering per connettere o estendere le applicazioni desktop e mobile, lasciando ai partecipanti il compito di contestualizzare gli esempi su casi d’uso reali, per le esigenze business di tutti i giorni, della propria azienda o dei clienti. Nella trattazione dei progetti di esempio si darà spazio all’esame dei componenti utilizzati per ottenere le funzionalità esibite e al codice sorgente scritto, fornendo una panoramica delle potenzialità generali del framework App Tethering partendo da un punto di vista il più possibile pratico. Una parte del talk sarà dedicata a domande e risposte per approfondimenti su quanto visto o, ancora meglio, per far emergere altri spunti per utilizzi ancora più utili e particolari di App Tethering.

Consultate l’agenda completa delle sessioni previste nelle due giornate della conferenza.

Iscrivetevi al più presto: non potete assolutamente mancare! 🙂

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

Appmethod: sviluppa app Android con C++ gratis!

Articolo - Appmethod C++ Android gratis

«Big news!» Da oggi è possibile programmare applicazioni mobile Android con un IDE visuale, una libreria di componenti e controlli grafici e un compilatore C++ FREE!

Andiamo per gradi. Appmethod è un ambiente RAD per lo sviluppo di applicazioni native desktop per Windows e MacOS, e per dispositivi mobile per Android e iOS.

Partendo dalla stessa base di codice, è possibile compilare applicazioni native e veloci per qualsiasi piattaforma di destinazione supportata: un approccio realmente cross-platform.

Il tool appoggia su solide fondamenta, ossia i linguaggi di programmazione (C++ e Delphi) e la innovativa libreria grafica (FireMonkey) che sono già vanto del “fratello maggiore” RAD Studio XE6, per il quale è appena stata rilasciato l’Update 1.

La disponibilità di un tool C++ per Android gratuito di questo livello credo sia un’ottima notizia per tutti gli hobbisti, ma anche per gli sviluppatori professionisti che vogliono toccare con mano le potenzialità dell’ambiente senza impegno, come si suol dire, e per tutte le piattaforme (nei primi 30 giorni di prova).

A mio avviso, questa iniziativa del Free Forever Plan potrebbe essere un’occasione estremamente interessante anche nell’ambito della formazione scolastica, a qualsiasi livello, laddove il C++ è adottato praticamente ovunque, rendendo più stimolante lo studio del linguaggio e offrendo spunti agli studenti per creare applicazioni da installare sui propri dispositivi e, perché no, anche metterle in commercio, visto che la licenza gratuita per Android non pone alcun limite in proposito, ed è royalty free.

Per ulteriori informazioni sul prodotto, invito a fare riferimento al sito ufficiale di Appmethod, a iscriversi al webinar online di lancio previsto il prossimo 25 giugno e, ovviamente, a scaricarlo subito! 😉

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!

Copyright © 2019. Powered by WordPress & Romangie Theme.