Davide Di Blasi

HTML5 e Sviluppo Mobile su iPad – appunti sconnessi

Davide — Thu, 26 Apr 2012 15:04:42 +0000

Per cominciare a sviluppare una app nativa o una web app su Ipad, c’è da conoscere le dimensioni: 1024×768 per l’Ipad 2, a 132 pixel per pollice.

Altezza della barra di stato (quella nera) dell’ipad + barra di navigazione di safari = 78px (20+58) Version iOS precedente alla 5

Versione iOS 5.1, Safari aggiornato: 20px barra di stato + 76px della barra di navigazione + tab di Safari; totale 96px.

Altezza della barra della console di debug: 50px;

Svuotare la cache nell’ipad: Impostazioni > Safari > svuota cache.

Come far scomparire la barra di navigazione di Safari:-safaris-toolbar-address-bar-ipad

Usando il tag video su IPad e Iphone c’è da sapere che l’autoplay non funzionerà per scelta esplicità degli sviluppatori Apple – qui per saperne di piu http://roblaplaca.com/blog/2010/03/30/html5-video-on-the-ipad/ -

~~Per avere una migliore resa della grafica creare le immagini con il doppio dei pixel.~~

~~Es.: per un’immagine di dimensioni 50px x 50px creare un’immagine di 100px x 100px.~~

Le dimensioni reali in un ipad trasportando della grafica creata da pc a ipad sono per la versione landscape: dimensioni reali da pc * 1.04, per la versione portrait dimensioni reali pc * 1.28

Gli eventi touch sembrano non propagarsi più correttamente quando gli oggetti da cliccare o tappare occupano o si sovrappongono all’area del video, perché vengono assorbiti dai controlli (play, pausa…) di default del videoplayer. La soluzione sembra sia quella di disattivare i controlli di default e crearne dei nuovi custom.

A quanto pare la Apple non permette che l’audio di un video in html5 possa essere modificato via Javascript; sembra che vogliano che l’audio possa essere modificato solo dall’utente dai controlli del volume fisici sul device.

La Merenda Interattiva

Davide — Sun, 04 Mar 2012 15:33:32 +0000

In occasione del restyling di www.mulinobianco.it, mi sembrava interessante presentare dei lavori che ho realizzato più di un anno fa per Kettydo.
Si tratta di mini giochi istruttivi rivolti a un pubblico adulto (in particolare ai genitori dei piccoli divoratori di merendine), e quindi si inseriscono nel filone dell’edutainment, molto sentito negli ambienti del Mulino.

Eccoli in ordine di sviluppo:
Il gioco per calcolare le colorie della merenda:

Il gioco per scoprire la merenda preferita dal pargolo:

E infine il quizzone per capire, se la mamma ne sa, e quanto ne sa di merendine:

Minimizzati – ancora un altro minigioco da travestimento

Davide — Mon, 29 Aug 2011 21:35:43 +0000

Quante volte hai giocato, per scherzo con una tua foto, o meglio con quella di un tuo amico, con quei minigiochi che in due o tre passaggi ti trasformano, facendoti assomigliare a uno dei personaggi di Avatar, o a uno dei Beatles?

Adesso prova a Minimizzarti!

Ecco. L’ultimo gioco/app che ho creato per gli amici di Arguo è proprio qualcosa del genere; Scegli se uplodare una foto, scattarla da webcam oppure usare quella del tuo profilo Facebook, et voilà, il gioco è fatto:

L'immagine mi ritrae in versione pinguino... che facile bersaglio

Tecnicamente questo minigioco è stato interessante perché abbiamo dato la possibilità agli utenti di scegliere da quale fonte recuperare la foto da usare:

Facebook;
Webcam;
Upload vero e proprio;

così da non rendere “bloccante” il processo di invio della foto.

Una volta scelta la foto, dovrai selezionare dei capelli che incornicino il tuo viso e un bel corpicino minimizzato.
Se hai una facciona o una faccina, o se la foto è troppo scura/chiara abbiamo inserito un’interfaccia con dei comandi per risolvere questi problemi.

Quando sarai soddisfatto del risultato potrai condividere su Facebook o via mail la tua foto. Se invece vuoi stamparla e mandarla assieme alle cartoline delle vacanze estive, ai tuoi amici in Australia, -così sei sicuro che quando vi rivedrete si ricorderanno ancora di te-, scaricala e stampala.

Come utilizzare l’SDK Javascript di Facebook con Flash – part 2

Davide — Thu, 25 Aug 2011 18:04:53 +0000

Nel post precedente avevo inserito questo script:

 window.fbAsyncInit = function() {
/*inserire il proprio app id*/
FB.init({ appId: '1194********', status: true, cookie: true,
xfbml: true});

 FB.Event.subscribe('auth.sessionChange', sessionChangeHandler);
FB.Event.subscribe('auth.statusChange ', statusChangeHandler);

checkUserStatus();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/it_IT/all.js';
document.getElementById('fb-root').appendChild(e);
}());

Che permette di caricare e inizializzare l’SDK di Facebook. Da notare che questo è codice javascript e deve essere inserito nella pagina html, come consiglia Facebook direttamente dopo il tag , all’interno dei tag .

Questo particolare script permette il caricamento asincrono dell’sdk; quindi il caricamento dell’sdk non bloccherà il caricamento della pagina html.

Per completare il caricamento e il funzionamento dell’sdk di facebook rimane un ultimo “dettaglio” da inserire:

subito prima lo script.

Ecco tutto il codice da inserire in pagina:

Queste 3 righe di codice:


FB.Event.subscribe('auth.sessionChange', sessionChangeHandler);
FB.Event.subscribe('auth.statusChange ', statusChangeHandler);

checkUserStatus();

ci permettono di monitorare se l’utente è connesso a Facebook, se ha dato i permessi necessari all’applicazionee se la sua sessione è valida.
In particolare checkUserStatus(); è una funzione che richiama delle informazioni relative allo status dell’utente:

 FB.getLoginStatus(function(response) {
	  if (response.session) {

	  } else {

	  }
	});

il parametro

response

deve contenere questi dati:


{
    status: 'connected',
    authResponse: {
        access_token: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

Quello più importante è

access_token

che ci permetterà di interrogare Facebook per recuperare dati relativi all’utente.

Nel prossimo post sulla SDK di Facebook scriverò di come implementare query a Facebook sia con le api che con fql.

Come utilizzare l’SDK Javascript di Facebook con Flash – part 1

Davide — Mon, 27 Jun 2011 20:20:42 +0000

Ho avuto modo in diverse occasioni di mettere mano all’ SDK Javascript di facebook per alcuni progetti di integrazione con siti esterni a Facebook.

Mi è venuto in mente di creare un post per quelli che cercano informazioni sull’argomento e non ne trovano, ma anche per me, così da ricordarmelo velocemente le prossime volte.

Questa è la prima parte:

Per iniziare:

Scarica, se non ce l’hai già, l’sdk in javascript di Facebook: https://github.com/facebook/connect-js
Crea un’applicazione con i dettagli di dove verrà messa in produzione o testata: https://www.facebook.com/developers/
Crea un file javascript che verrà richiamato nel tuo html. Questo è il file che connetterà il tuo sito o applicazione a Facebook.
Copia questa funzione: (dalla documentazione ufficiale: http://developers.facebook.com/docs/reference/javascript/)
window.fbAsyncInit = function() { /*inserire il proprio app id*/ FB.init({appId: '1198***********', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', sessionChangeHandler); FB.Event.subscribe('auth.statusChange ', statusChangeHandler); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/it_IT/all.js'; document.getElementById('fb-root').appendChild(e); }());

Questo script serve a richiamare l’sdk javascript, caricarla sul tuo sito, inizializzare FB e ascoltare Facebook e lo status dell’utente a ogni sua variazione.

Tecnologia Emozionale

Davide — Wed, 08 Jun 2011 22:50:01 +0000

La tecnologia, o forse i contenuti di una tecnologia, quando parla di noi ci emoziona.
Ci sono due siti online che mi hanno dato questa sensazione:
Museum of Me di Intel, e The Wilderness Downtown di Google.
Uno è sviluppato in Flash, l’altro è un esperimento di HTML5.
Qualunque sia la tecnologia, entrambi centrano il punto di emozionare.

La cosa interessante, però, è questa dal mio punto di vista: entrambi i siti, nonostante l’utilizzo di nuove e vecchie tecnologie capaci di forti interazioni con l’utente, non richiedono nessuna interazione, se non il click sul pulsante “Connetti su Facebook” o “Inserisci la via in cui sei cresciuto”.
Insomma un broadcasting -in realtà sarebbe più giusto dire monocasting?- tagliata su misura dell’utente che la guarda.
Bello, ma possiamo fare di più.
Siamo davanti ai primi esperimenti di giochi e applicazioni che caleranno l’utente in mondi virtuali customizzati sulle informazioni della vita del giocatore?

La notte delle premiazioni: Mediastars

Davide — Tue, 31 May 2011 22:36:01 +0000

Con grande piacere ed orgoglio ho appena ritirato il premio Mediastars nella sezione Internet per lo Human Computer Interactive per l’app dei tascotti!

Con me hanno ritirato il premio Tamara per il Graphic Design, Stefano e Paolo per lo Structural Design (di una altro progetto – Le Sorpresine), e Andrea per l’art direction.

Cos’è Mediastars -riporto fedelmente quanto scritto sul sito mediastars.it-:

è un premio indipendente che si propone di mettere in luce il valore della professionalità di chi tecnicamente contribuisce con il proprio apporto alla riuscita di una comunicazione pubblicitaria.

Ecco il premio:

mediastars per lo human computer interactive

Come ogni premiazione che si rispetti ci sono i ringraziamenti:
presto fatto: grazie a tutta Kettydo!

Instagram API, tutte da esplorare

Davide — Thu, 26 May 2011 11:39:20 +0000

Una cosa che mi piace fare coll’iphone, oltre a fare atterrare aereoplanini, è scattare foto.

Il modo più veloce e divertente è sicuramente usare instagram, un social media basato sulle – provate a indovinare – fotografie.

Benissimo, mi sono divertito anch’io a scattare, e adesso vorrei mostrare le foto in questo sito.

Ieri sera mi è venuta l’idea, ho fatto qualche ricerca, ed ecco qua che instagram ha appena reso pubbliche le sue API.

Non sono riuscito a terminare niente di presentabile ieri sera, spero entro oggi di avere qualcosa da mostrare sul sito.

Edit.:
Come mi ero ripromesso, ho pubblicato – nella nuova sezione del sito “Foto di Strada” – un esperimento di uso delle nuove api di instagram: ho recuperato il mio profilo e le foto su instagram per visualizzarle qui.

Ogni volta che pubblico su instagram delle nuove foto, queste vengono postate anche nella nuova sezione.

Dategli un occhio, e fatemi sapere cosa ne pensate.

Una nuova corsa.

Davide — Mon, 23 May 2011 15:36:38 +0000

Questo treno è arrivato alla sua ultima fermata, si scende, grida il capotreno.

Non che io abbia tirato il freno di emergenza, ma il treno, appunto, ha finito il suo viaggio, ed è giusto che chi deve scendere scenda, per prendere un’altra coincidenza, che lo porterà chissa dove.

Io sono sceso, ho preso il mio zainetto (mi piace viaggiare leggero) e mi sono messo a camminare, verso un altro binario e un altro treno, ma sopratutto verso un’altra destinazione.

L’importante secondo me, adesso, è non fermare il viaggio.

Ultimamente il treno su cui viaggiavo aveva rallentato molto, il tempo sembrava troppo lungo, le persone annoiate dal paesaggio monotono che era là fuori e tutti se ne stavano zitti zitti seduti ai loro posti.

Questi viaggi sono collettivi, ci vuole coinvolgimento, energia e positività, concetti che, purtroppo, sono andati persi per strada.

C’è sempre tempo per correggersi, aggiustare la mira e ripartire alla grande, quindi in bocca al lupo a tutti quelli che su quel treno ci sono rimasti e ci rimarranno, sono convinto che faranno benissimo.
Perché sono Bravi.

Io, dal mio canto, mi aspetto faville. Sono raggiante.
C’ho tutte le sinapsi e i neuroni pronti a riconfigurarsi e creare percorsi tutti nuovi.

*photos edited from original by Ushlambad

Jane McGonigal o Creative suite 5.5?

Davide — Mon, 02 May 2011 16:40:09 +0000

O mamma, sono diviso, mannaggia!

Due eventi interessanti lo stesso giorno…

il primo è la presentazione della creative suite 5.5, che per uno che lavora con questo strumento/i tutto il giorno è interessante per capire gli sviluppi futuri per il web e per il mobile; come si sta muovendo Adobe per contrastare Apple dopo che Steve Jobs ha deciso di non integrare il Flash Player su iOS e quali soluzioni avanzate propone per sviluppare su Android con Flash Builder e la nuova architettura Spark.

L’altro evento, organizzato da Meet the Media Guru, avrà come argomento il Game Design, la Online Collaboration e il Gamification e l’ospite che ci aprirà il cervello a tutto questo è Jane McGonigal e oltretutto l’agenzia dove lavoro avrà la possibilità di intervistarla, quindi mi sembra una grande occasione da non perdere.

Quindi che fare? magari riesco ad andare ad entrambi, uno è alle 2 e l’altro è alle 7

P.S.: Quanto mi piace Milano quando fa così!

Edit:

Alla fine sono riuscito ad andare a entrambi gli eventi; come c’era da aspettarsi quello Adobe è stato molto formale, con una folta platea ma pochi “partecipanti”. La hanno fatta da padrone gli Adobe Guru, che hanno mostrato le novità della CS 5.5 in azione.
Purtroppo per loro avevano un modo di fare un pò “indisponente” (sarà perché sono gli “Adobe Guru”?).
Nonostante questo mi hanno dato degli spunti di approfondimento sul digital publishing con inDesign. Ma mi chedo: è più veloce ed efficace creare un’app per ogni pubblicazione, o utilizzare inDesign con qualche funzione interattiva? Su questo ci sarebbe da smanettare un pò per capire tempi e funzionalità.

Secondo in ordine temporale, ma non in ordine di gradimento è stato il Meet the Media Guru con Jane McGonigall, che da brava Satunitense ci ha tenuto con le orecchie aperte e gli occhi spalancati per tutta la durata del suo intervento, ingaggandoci tantissimo con il Wrestling dei Pollici e dandoci un bel pò di info e numeri sui giochi online:

Si giocano circa 3 Miliardi di ore alla settimana nel mondo
Il totale di anni giocati da tutti gli utenti a WoW è di 5,93 milioni di anni (la stessa quantità di tempo che è servita all’uomo per evolversi da primate ad homo sapiens)
Giocare produce stress positivo -eustress- che aumenta le emozioni positive, rafforza le relazioni tra i giocatori, fornisce Significato (in quanto partecipi a qualcosa di più grande di te), fornisce gratificazione quando porti a termine gli obiettivi.

Queste come tante altre info ci deve far riflettere – dice Jane -a come potere sfruttare questo enorme capitale di tempo e sforzi per veicolarli nella risoluzione di problemi. Sta al Game Designer di creare dei giochi che, senza togliere il pathos e il divertimento al gioco, possano sfruttare questa enorme energia per obiettivi più “alti” di una quest per raccogliere pezzi di armatura che il proprio personaggio di World of Warcraft indosserà.

Sicuramente Jane McGonigall scrive meglio di me, infatti ha pubblicato un libro che si chiama La Realtà in Gioco.

*photo edited from original by: andre5