Responsive debug tools per Web Designer

Ormai non credo ci sia dubbio, internet è sempre più mobile, in 12 mesi si sono viste passare le statistiche da un 5% a oltre 30% di accessi da smartphone e tablet. Il 2014 confermerà il trend facendo superare, in alcuni settori, oltre il 50%.

Il termine responsive è entrato, ormai stabilmente, nel vocabolario di web designer e web developer. È difficile immaginare un nuovo progetto senza prevederne un interfaccia adatta per mobile. Scuole di pensiero vogliono addirittura che in fase di progettazione si pensi prima alla User Interface vista da smartphone e tablet per poi passare ad una versione desktop. Pensiero non del tutto errato, visto che in un futuro non lontano la maggior parte della gente sfoglierà le pagine internet tra le proprie mani.

Esiste quindi un esigenza, da parte di chi fine deve mettere mano a codice. Ma non solo, anche in fase creativa è importante avere idee ben chiare su effetti, movimenti, proporzioni, variazione di margini, font… e tutte le altre modifiche che tramite o javascript o meglio ancora l’utilizzo di Media queries che ci aiutano a rendere un sito responsive.

Ci sono vari strumenti online che ci possono aiutare a renderci conto di come il nostro sito viene visualizzato da smartphone, e se il nostro sito risponde bene sotto l’aspetto responsive.

Alcune misure da tenere a mente

Non fosse stato chiaro ogni smartphone e device hanno la propria misura, e considerando la rotazione di 90° del device le misure si raddoppiano.

  • iPhone 3+4 verticale · width: 320px
  • iPhone 3+4 landscape · width: 480px
  • iPhone 5 verticale · width: 320px
  • iPhone 5 landscape · width: 568px
  • Android verticale · width: 240px
  • Android landscape · width: 320px
  • Android (Nexus 4) verticale · width: 384px
  • Android (Nexus 4) landscape · width: 600px
  • iPad verticale · width: 768px
  • iPad landscape · width: 1024px
  • Kindle verticale · width: 600px
  • Kindle landscape · width: 1024px

Ecco alcuni strumenti responsive che possono esserci d’aiuto

Per “debuggare” un sito responsive non è necessario arrivare ad installarsi xCode o particolari macchine virtuali, basta un Chrome, Firefox, Safari… e queste web application richiamabili dal browser.

Responsinator

Inserisci l’indirizzo del tuo sito e istantaneamente ti da un idea generale di come viene visto il tuo sito in diversi device.
Responsinator

Breakpoint

Con Breakpoint, puoi verificare tutti gli step richiamati dei Media queries.
Breakpoint

Screenfly

Forse la più completa web application di questa serie. Con anche la possibilità di nascondere scrollbar.
Screenfly

Dimension

Attualmente per testare la visibilità Responsive di un sito utilizzo soprattutto Dimension, che ha un applicazione dedicata su Chrome. La più intuitiva con opzione drag per il resize del frame.
dimension

ScreenQueries

ScreenQueries è ben curato, con uno stile che chiaramente richiama i prodotti Adobe. Si tratta di una web application ancora in Beta, ma già ben funzionate e carica di opzioni.
ScreenQueries

Responsive.is

Responsive.is creato da Typecast, limitato ma è semplice ed intuitivo.
responsiveis

Your Flickr on the Wall: Flickr gallery

Your Flickr on the Wall è una web application in grado di importare fotografie da Flickr. A rendere in valido progetto, oltre l’idea, c’è lo stile e la cura dei dettagli curati dal creatore, un italiano Marco Dell’Anna. Non mi viene pensare e difficile dire che Marco è uno dei migliori talenti web designer italiani. Il “muro” può importare immagini dello stream di Flickr o da account specifici, questo è il mio muro.

Plugin Mootools: The Wall

La tecnologia di Your Flickr on the Wall è retta da Mootools ma soprattutto da una ottimo plugin che non a caso chiamato The Wall, realizzato dallo stesso Marco Dell’Anna scaricabile liberamente dal sito wall.plasm.it/. Non mi resta che ringraziare Marco, immagino anche da parte vostra, per la condivisione del suo Plugin.

Parlano di Your Flickr on the Wall anche:

Edge: HTML5 secondo Adobe!

Edge è la risposta di Adobe alla continua ed inevitabile ascesa di HTML5. Già alcuni  si chiedono se Flash ormai sia superato da HTML5. Probabilmente in Adobe da tempo si saranno posti dei quesiti su come comportarsi davanti a questa imminente rivoluzione, ed inevitabilmente si dovranno adattare alle richieste del mercato. Probabilmente Edge, un editor HTML5, è la mossa vincente.
Già esistono convertitori di file Flash SWF in HTML5, wallaby di Adobe, ma anche Google vuole contribuire con Swiffy un altro convertitore FLAH to HTML5.

Un editor HTML5

Ma ora con Edge avremo la possibilità di realizzare animazioni HTML5 con un editor simile a quello che già in molti conoscono di Flash, quindi con una timeline, keyframe, motiont, rotazioni….
Adobe mette a disposizione un Preview gratuita di Edge installabile su Windows e su Mac, per poter procedere al download di Edge serve un account Adobe, l’iscrizione è gratuita. La demo di Edge sarà gratuita utilizzabile gratuitamente fino alla fine del 2011. Non perdete tempo!

Ecco qualche esempio di Edge direttamente dal sito di Adobe:

Una prova veloce di Edge

L’ho installato ed ho provato ad aprire Edge per creare la mia prima animazione HTML5, naturalmente molto banale, e molto semplice. Curiosando nel codice mi accorgo della presenza di jQuery probabilmente per garantire il funzionamento delle animazioni anche su browser obsoleti.

La pagina ufficiale di Edge:
http://labs.adobe.com/technologies/edge/

Una riflessione…

Secondo voi un editor HTML5 è un bene o un male? Questo dubbio mi è venuto quando ho ricevuto un riscontro da @Luglio7 su twitter.
Nella storia i vari editor che hanno aiutato a compilare codice spesso hanno contribuito a rendere il codice più pesante e pieno di errori, a partire dal Front Page, ma anche Dreamweaver ci metteva del suo.
Cosa dire del fatto che ultimamente sul web, la navigazione si è fatta più piacevole ed usabile, merito anche della quasi scomparsa dei menu animati tipici di Flash. Con Edge, o con qualsiasi altro Editor HTML5, rischieremo di rivedere animazioni che ci faranno impazzire?

AVOS sostituisce Delicious

Ieri l’annuncio, Delicious cambia di proprietà! E non sparisce, come in precedenza si pronosticava, ma viene acquisita da due volti famosi del web. Due signori che hanno contribuito a cambiare il web. Chad Hurley e Steve Chen, che nell’email inviata a tutti gli utenti di Delicious, vengono descritti come i creatori della più grande piattaforma video al mondo, non si sono dimenticati di scrivere YouTube… diciamo che quelli di Yahoo l’hanno voluto “tralasciare”.

AVOS è il nuovo servizio di bookmarking

Il nuovo servizio si chiamerà AVOS e sostituirà definitivamente Delicious entro Luglio 2011, quindi entro questa data tutti gli utenti che desidereranno non perdere i propri dati ed i “preferiti” di Delicious dovranno fare il passaggio di account da AVOS staccandosi così dal proprio account Yahoo.

Cosa c’è di buono?

Non perderemo un importante servizio in piedi da anni, non ci sarà il temuto buco nella memoria storica di internet come spesso accade quando spariscono i dati di un sito. Nel periodo in cui Delicious era dato ormai per spacciato sono nati molti servizi come diigo e Pinboardin, Tomstardust ha approfondito l’argomento alternative a Delicious.

Cosa fare per passare AVOS?

Se siete intenzionati a procedere al passaggio di account da Delicious ad AVOS, basterà seguire il link “yes move my bookmarks” presente nell’email che riceverete (solo se siete utenti Delicious)

Immagine cover by Derrick Neill © Fotolia

Mediterranean Quilt, progetto fotografico collettivo

Mi scuso in anticipo per non avervene parlato prima, anche perchè il progetto di cui vi sto parlando ha una scadenza. Ma secondo me si tratta di un progetto davvero importante, che mi è stato presentato da Federico Mauro, presidente dell’Associazione Wrong Lab. Mediterranean Quilt è un progetto fotografico collettivo al quale partecipano gli abitanti dei paesi bagnati dal mar Mediterraneo quindi non solo Europeo. In un momento in cui la guerra colpisce proprio alcuni di questi paesi trovo che Mediterranean Quilt diffonda un messaggio di unione e solidarietà davvero importante.

Mediterranean Quilt è una grande opera d’arte collettiva, una rete fatta di fotografi dai 23 paesi mediterranei, che collaborano ognuno con il proprio quadrato da aggiungere alla coperta. Mediterranean Quilt comincia dalla creazione di una grande raccolta di quadrati, ogni fotografo può inviare il suo, che verrà cucito agli altri, diventando un oceanico archivio virtuale, mostre e pubblicazioni.

Come Partecipare al progetto fotografico

Per partecipare invia 4 foto del tuo paese:
– il mare
– la costa (sabbia, pietre, o roccia)
– la città (una texture della tua città vista dall’alto)
– la gente (una foto di una persona della tua nazione, anche un autoritratto)

Scarica il pacchetto con le foto come esempio e comunicati, che hanno non essere compilato, firmato, scansionato ed inviato insieme con le foto.

Le foto devono essere presentate, 20x20cm in formato jpeg a 300 dpi (meglio RAW). Foto presentate restano il lavoro dei legittimi proprietari, i cui nomi saranno citati in ogni mostra dei lavori “Mediterraneo Quilt”.

Vi rimando al sito ufficiale per maggiori dettagli: mediterraneanquilt.wrongstudio.com

Crea un applicazione con Ovi App wizard, Nokia ti invita a Milano!

Oggi siete a Milano verso le 18:30? E siete interessati al mondo delle applicazioni Ovi di Nokia? Se si allora potreste partecipare al un evento organizzato da Nokia e Liquida al Lotvs di Milano (una location molto fashion) in Viale Monte Grappa, 10. Per partecipare basta iscriversi al form.

Ovi app wizard

Ovi app wizard è il modo più semplice e veloce per trasformare il tuo blog in un’applicazione Ovi. In pochi minuti e in modo semplice e veloce potrai personalizzare la tua applicazione: scegliere i canali da visualizzare, i colori di testi e sfondo, aggiungere il tuo logo e molto altro.

Per partecipare iscriviti qui.

Una valida start page (pagina iniziale) per Firefox 4

Da qualche settimana il browser predefinito di sistema è tornato Firefox, o almeno è quanto è accaduto sui sistemi operativi che utilizzo, questo grazie anche ad un servizio che offre una valida (start page) pagina iniziale per Firefox. E a chi mi chiede un parere su Firefox io rispondo “Firefox è tornato grande!”. Non che fosse mai diventato piccolo ma era sceso al secondo posto delle mie preferenze bruciato dall’ipervelocità di Chrome nel momento in cui Firefox 3.5 arrancava.

Perchè ci tengo a tornare a Firefox?

  • Prima di tutto perchè ora il divario di velocità tra Firefox e Chrome si è ridotto notevolmente e lo si nota immediatamente. E’ migliorata notevolmente anche l’apertura e la chiusura del browser e la navigazione non era eccezionalmente fluida. Attualmente Firefox 4 paga ancora qualche frazione di secondo a Chrome ma è decisamente tollerabile.
  • Sono tornato a Firebug! Non non mi sono mai trovato troppo bene con il developer tool di Chrome, sarà perchè il primo amore è stato proprio Firebug e non sono mai riuscito a distaccarmi definitivamente.
  • Firefox è sinonimo di open source. Il giorno che noi tutti (o almeno i più furbi) ci siamo allontanati da Internet Explorer l’abbiamo fatto anche per staccarci dal predominio di un marchio che aveva troppo peso nella gestione del web
  • Anche se Chrome non è paragonabile a quell’obbrobrio di Internet Explorer (vi siete accorti che con IE9 non è disponibile ancora text-shadow???), rimane il fatto che dietro Chrome c’è sempre una mega società con i propri interessi commerciali, con l’intenzione di diffondere il più possibile il proprio browser.
  • Ora è possibile sincronizzare più Firefox installati su più sistemi operativi
  • Si può appiattire molto la toolbar del browser, e nascondere la barra nel footer, questo per garantire come Chrome un’ampia visione.

Ancora c’è da lavorare, la concorrenza si è rafforzata e Chrome rimane il browser punto di riferimento, e ammetto che la mia scelta è molto condizionata dalla presenza di Firebug.

Cosa mi dispiace lasciare di Chrome?

Oltre la velocità? La start page, la pagina iniziale quando parte Chrome è ben fatta e ti porta immediatamente ai siti che più utilizzi. Su Firefox c’è la buca di ricerca di Google e poco altro.

Dopo un’attenta ricerca tra i plugin di Firefox mi sono accorto che non c’era davvero nulla di così appetibile e simile come la start page di Chrome. Ma forse ho trovato qualcosa anche di migliore.

Una Start Page per Firefox

Myfav.es è il servizio perfetto per chi come me richiede una pagina iniziale immediata e semplice, ma anche piacevole all’occhio. Myfav.es è personalizzabile dallo sfondo allo stile delle icone, fino al posizionamento ed agli effetti. Non è possibile caricare proprie immagini, ma nel caso si voglia aggiungere un link ad un sito non presente è possibile associarlo ad un icona presente nella galleria icone offerta da Myfav.es. Naturalmente questo servizio essendo offerto online è disponibile su tutti i browser del mondo, anche se non è ancora il massimo su browsers mobile, come Safari su iPhone.E’ anche possibile rendere pubblica la propria pagina iniziale. http://myfav.es/designmultimediaPer completare al meglio l’effetto Start page “simil” Chrome serve che ad ogni apertura di scheda venga caricata la pagina di Myfav.es, per fare questo attualmente è necessario installate un estensione su Firefox New Tab Homepage .

Applicazione iPhone di Liquida

La notte scorsa è stata rilasciata l’applicazione iPhone di Liquida. Un applicazione naturalmente legata all’informazione proveniente dalla blogosfera. L’applicazione risulta molto piacevole da sfogliare, è gratuita consente l’approfondimento dei contenuti direttamente sui blog fonte degli articoli.
Graficamente trovo che sia un passo avanti molto curata nei dettagli, ma sopratutto molto usabile.

Comunicato Stampa

Qui sotto riposto un estratto dal comunicato stampa:

Liquida News offre ogni giorno un punto di vista privilegiato sui temi più caldi del web. Con la nuova app, disponibile sull’App Store a partire da oggi, è possibile seguire le notizie del giorno, approfondire i temi per categorie e interrogare il potente motore di ricerca per scoprire le ultime news sugli argomenti di interesse nelle sezioni: Attualità, Intrattenimento, Sport, Tecnologia, Cultura, Economia e Ambiente.

La sezione dedicata ai Video consente di scoprire in modo semplice e divertente i contenuti multimediali più segnalati in Rete, i video virali e quelli più linkati dai blog. Con un semplice tap si può inoltre accedere ai Trend del momento: la classifica dei Personaggi, dei Brand e i Temi più discussi.

Download

Attualmente l’applicazione è disponibile solo per iPhone ed è scaricabile direttamente da App Store.

Centocinquantesimo! Viva l’Italia!

Oggi è una giornata di festa per l’Italia intera. Italia un simbolo per cui molti in passato hanno perso la vita ed oggi troppo spesso si limita ad essere preso in considerazioni solo in eventi sportivi, e la politica da tempo ci rende sempre più distaccati da questo simbolo tricolore che pieno di storia, arte, cultura, design, invenzioni ed eccellenza, da far invidia al mondo intero. Spero anche che l’Italia in futuro riesca a non camapare solo del suo passato, ma ad imporsi anche nei nuovi mercati come tecnologia ed internet, e perchè no anche nel mondo del web design. Viva l’Italia!
Con questo post partecipo al foto(meme)  dedicato al 150°, come già ha fatto Julius.

Nonostante sia un personaggio antecedente all’Unità d’Italia Leonardo è indubbiamente il mio mito. Probabilmente l’inventore del “multitasking”, un italiano dalle mille idee e simbolo di eccellenza che tutti ci invidiano.

La fotografia l’ho scattata personalmente l’autunno scorso a Milano al quale ho aggiunto un effetto HDR e desaturata.

P.S.
Vi segnalo un simpatico stiker adesivo creato per celebrare il 150°, che potrebbe interessare i possessori di Mac ed iPad.

Treccani: il portale dell’enciclopedia italiana

Ieri sera ho ricevuto un comunicato stampa da Liquida network nel quale viene annunciata l’uscita della nuova versione online di Treccani.it, la nota enciclopedia italiana, la cui realizzazione tecnica è stata gestita da Banzai Consulting e da Liquida. Ammetto, nonostante conoscessi da tempo della collaborazione tra Treccani e Banzai, che sono rimasto piacevolmente colpito dall’impatto grafico del nuovo portale, che riesce nel compito di far intuire all’utente la qualità e la quantità contenuti che può incontrare su questo servizio, ma senza alcuna sensazione di pesantezza.

Treccani.it si rinnova:

Ammetto anche di non aver mai sfogliato attentamente in passato il portale di Treccani, in occasione di questo redesign mi sono potuto accorgere della sua notevole mole di contenuti. Nel potale di Treccani non possono mancare vocabolario ed enciclopedia, ma trovo di grande interesse le sezioni speciali come scuola, magazine

Complimenti a tutti i colleghi del piano di sotto che partecipano al progetto.

Dead Island: trailer forward & rewind

Ogni tanto mi diverto a farmi qualche partita a Live 4 dead un videogioco abbastanza splatter che gira su PC, dove lo scopo è unicamente sopravvivere a orde di zombie che faranno di tutto per farti fuori. Devo dire che ultimamente il genere zombie ha superato di gran lunga il genere vampiri, direi anche per fortuna non se ne poteva più Twilight e compagnia bella. Leggi tutto

Piccsy: inviti per l’iscrizione alla Beta

Qualche mese fa ho scoperto Piccsy.com una social gallery dove gli iscritti possono caricare immagini, le quali se verranno ritenute valide e piacevoli verranno pubblicate sulla homepage di Piccsy.com. Ammetto di passarci tutti i giorni qualche minuto, non ho mai ritenuto che sia una perdita di tempo ma al contrario una pausa creativa. Ed ogni volta che mi imbatto in giro nel web in qualche bella immagine la propongo molto volentieri alla community di Piccsy. Per partecipare bisogna essere registrati, ma trattandosi di una versione ancora in beta la registrazione avviene col “conta goccie”, oppure potete ottenere un invito da chi è già iscritto (come me).

Il mio canale su Piccsy

Ogni iscritto possiede un proprio canale, il mio è http://desmm.piccsy.com, è il luogo dove troverete le mie immagini preferite inviate dagli altri partecipanti su Piccsy, ma anche quelle che ho postato io. Molto di queste immagini finiscono sul mio Tumblr o viceversa.
L’unico problema di Piccsy probabilmente dovuto dalla sua giovane età, ha spesso problemi di server.

Richiedi l’invito per partecipare su Piccsy

Per chi lo richiedesse, essendo iscritto da qualche mese, ho a disposizione un numero limitato di inviti, se anche voi vorreste partecipare a questa bella iniziativa, vi chiedo di lasciarmi tra i commenti un paio di url immagine delle foto che vorreste inserire su Piccsy, un esame che ho dovuto passare anch’io per valutare il mio “gusto grafico e fotografico”.