La mancata forza innovativa a non spinge più le vendite.

Proprio quella nokia che una decina di anni fa innovava con cellulari minuscoli con cover intercambiabili e telefoni senza antenna oggi si ritrova a puzzare di vecchio. Principalmente nel mondo degli smartphone. E se pensiamo che con l’aumentare dell’informatizzazione diminuiranno i telefoni “solo per telefonare” Nokia è davvero alla frutta. In un mercato dove Apple fa tendenza, Android domina e Window Phone 7 non stupisce, penso che Nokia abbia investito nella direzione sbagliata siglando un accordo con microsoft. Proprio quell’androide dominante sta iniziando la cavalcata nel mondo dei tablet perché sia google che tutti i grandi players dell’elettronica non vogliono stare a guardare Apple diventare lo standard de facto con il suo iPad.

Lo stesso CEO di Nvidia i quali chip sono nella maggior parte dei tablet Android imputa la scarsa partenza in termine di vendite al costo elevato dei devices ma lui stesso ha dichiarato che entro 30 mesi la distribuzione di tablet Android supererà l’egemonia di iPad.

Ovviamente sono tutte supposizioni, per adesso i tablet Android sono come dei “cani touchscreen che si mordono la coda” visto che per essere appetibili servono principalmente un prezzo concorrenziale e un buon numero di applicazioni adatte ai dispositivi, ma non avendo nessuno dei due difficilmente avranno delle buone vendite e quindi gli sviluppatori non saranno propensi a sviluppare per questa piattaforma.

Credo però che le cose inizieranno a cambiare con il rilascio di Kal’El il primo SoC (system on a chip) quad core, ovvero Nvidia Tegra 3 che dovrebbe essere rilasciata per fine anno. Con l’avvento di questo chip, l’ottimo Tegra 2 diventerà più accessibile e vedremo tablet low cost ma altamente performanti (in quanto Tegra 2 offre già prestazioni molto elevate) invadere il mercato rendendo Honeycomb (Android per tablet) molto appetibile per gli sviluppatori. A quel punto il cane smetterebbe di mordersi la coda.

Perché ho citato Nokia e Nvidia nello stesso post? Perché Nvidia, storica casa produttrice di schede grafiche ha saputo seguire e leggere il mercato buttandosi con successo nel settore mobile, innovando mentre Nokia si sta lentamente trasformando nel dinosauro della tecnologia.

Entrambe le tecniche implicano il fatto che in queste due categorie di browser (vecchi e moderni) il vostro sito sia visualizzato in maniera differente, è quindi comprensibile che queste tecniche non sono utilizzabili in tutte le circostanze.

Ultimamente abbiamo realizzato il sito della tipografia di un caro amico, ho quindi voluto usare il Progressive enhancement nei form del preventivo del sito dato che a mio avviso questo progetto era il candidato perfetto.

Scegliere il “candidato perfetto” è stato abbastanza semplice. Dipende principalmente da due fattori: il tipo di cliente e il tipo di audience.
In questo caso andavo sul sicuro dato che in questa tipografia utilizzano sistemi mac e quindi i browser utilizzabili sarebbero stati sicuramente nel gruppo dei “browser moderni” (Safari, Firefox, Chrome). Anche l’audience è ideale: un sito di una tipografia è principalmente utilizzato da agenzie pubblicitarie e designer: questi ultimi solitamente hanno una conoscenza informatica tale da utilizzare un browser moderno o abbastanza aggiornato.

Ma torniamo al discorso della flessibilità. Nel form che aveva progettato Cristina, i campi da compilare avevano uno stile ben preciso: il problema era che avevano diverse misure e tipologie. Dai menu a tendina (select) alle textarea animate che cambiano dimensione passando per diverse misure di campi semplici (input di testo).

Se utilizzassi i background per ottenere l’effetto del layout originale, dovrei utilizzare diverse immagini per simulare le misure oppure un markup molto complesso assieme a “pezzetti” dei campi.
Con i CSS3 potrei usare bordi arrotondati, gradienti e ombre non avendo problemi di sorta.

Il Markup

Avendo un doppio bordo ho bisogno di markup addizionale, non mi bastano i semplici input. Il codice html di base resta comunque semplice:

<div class=”inputcontainer”>
<div>
<input type=”text” name=”azienda”/>
</div>
</div>

Probabilmente questo markup basterebbe anche per usare una soluzione basata su immagini di background, ma tramite CSS3, mantenendo tutto “parametrico”, posso cambiare proprietà di un elemento (es. colori, dimensioni) senza aprire un editor di immagini. Come dicevo prima: flessibilità.

Il CSS

La fase successiva è ottenere un rendering decente nel peggiore dei browser… Lynx! Scherzo, ie6 (Internet Explorer 6)!

Questa è la regola finale del div più esterno
.inputcontainer{
width: 150px;
background: #ededed;
background: -webkit-gradient(linear,
left bottom, left top, from(rgb(235,235,235)), color-stop(0.6, rgb(240,240,240)), to(rgb(250, 250, 250)));
background: -moz-linear-gradient(
center bottom, rgb(235,235,235) 0%, rgb(240,240,240) 60%, rgb(250, 250, 250) 100%);
zoom : 1;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f7f7′, endColorstr=’#f2f2f2′);
padding: 2px;
font-size: 12px;
float: left;
margin-right: 10px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
}

Le parti che interessano a noi sono:
background: #ededed; lo sfondo di fallback, nel caso le regole non fossero supportate
zoom : 1;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f7f7′, endColorstr=’#f2f2f2′);
Con queste due proprietà facciamo in modo che su ie6/7 appaia un bel gradiente.

Ancora più internamente ecco la regola per il div figlio di .inputcontainer
.inputcontainer div{
border: 1px solid #fff;
height: 22px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
-webkit-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
-moz-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
}
Tutte le proprietà oltre le prime 2 verranno ignorate da internet explorer (hanno tutte il prefisso del browser vendor).

E questa infine la regola dell’input vero e proprio:
.inputcontainer input{
font-size: 12px;
color: rgb(80, 80, 80);
z-index: 80;
background: transparent;
width: 115px;
margin-left: 4px;
height: 22px;
_height : 18px
}
Da notare lo sfondo trasparente e la proprietà con l’underscore (_height) per correggere unicamente la visualizzazione di Internet Explorer 6.

Alla fine di questa prima fase ecco come appare l’input su internet explorer 6:

Abbastanza decente a mio avviso.
Da qui in avanti inizia la fase di enhancement: ho già incollato le proprietà chiave anche per quanto riguarda i browser moderni:

background: -webkit-gradient(linear,
left bottom, left top, from(rgb(235,235,235)), color-stop(0.6, rgb(240,240,240)), to(rgb(250, 250, 250)));
background: -moz-linear-gradient(
center bottom, rgb(235,235,235) 0%, rgb(240,240,240) 60%, rgb(250, 250, 250) 100%);

Per le sfumature del div .inputcontainer, la regola deve purtroppo essere ridefinita sia per Firefox che per i browser webkit (Safari, Chrome, etc).

-webkit-border-radius : 5px;
-moz-border-radius : 5px;

Quella sopra è per i bordi arrotondati.

-webkit-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
-moz-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
Qui vorrei soffermarmi un po’ di più. È questa la regola che ha reso il campo di testo incredibilmente somigliante a quello del layout grafico. Con questa regola definisco delle ombre sia per i browser Mozilla che per quelli webkit.
Spezzo di seguito il valore della proprietà:
0px spostamento ombra da sinistra, può avere un valore negativo (e si sposta verso sinistra)
1px spostamento ombra dall’alto, anche questo può avere un valore negativo
1px questo valore indica quanto l’ombra si “espande” sfumando delicatamente al colore di background
#ddd questo è il colore dell’ombra (è la versione abbreviata del colore, sarebbe in realtà #dddddd)
inset questo valore se presente indica che l’ombra deve essere verso l’interno

A questo punto la parte ancora più interessante: un altro valore di ombra separato da virgola. Sì, in pratica si possono definire ombre multiple per ogni elemento in css3!

Ed ecco quindi gli input definitivi renderizzati da un browser webkit:

Quasi identici non trovate?

Il form completo lo trovate sul sito della tipografia Form Preventivo – Tipografia Geny Siracusa

Partendo da questa base la personalizzazione per i vari tipi di input è stata minima. Ogni nuova dimensione, nuova caratteristica (come ad esempio un minilabel in alcuni input) o i tasti dei menu a tendina funzionavano senza hack in tutti i browser, solo con un aspetto leggermente diverso.
L’audience poi mi ha permesso di puntare molto sulla versione per browser moderni e sarà una cosa a cui si dovrebbe fare molta attenzione quando si sceglie di utilizzare una di queste tecniche. Dopotutto internet explorer ha ancora una fetta di mercato troppo ampia, ma sapendo che su Vista e Seven (WIndows 7) molti utenti aggiorneranno il loro browser a Internet Explorer 9 che supporta una buona parte delle specifiche dei css3 possiamo sviluppare tranquillamente con uno sguardo rivolto al futuro.

L’ottimizzazione deve portare i seguenti vantaggi:

-Migliorare la velocità di caricamento
-Rendere più leggibile e più mantenibile il codice
-Alleggerire il javascript migliorando le performance

Questo post sarà anche il sommario della serie ed elencherà i vari episodi.

E’ infatti il colosso di Mountain View ad aver mosso l’orizzonte dando forti segni di approvazione verso questo standard partendo da integrazione in chrome del tag video, l’acquisizione dell’azienda produttrice del codec WebM con il conseguente rilascio dei sorgenti per implementarlo nel tag video di html5, un sito ricco di demo html5( http://www.html5rocks.com/ ) , la corsa all’implementazione di diversi tag/api per google chrome.
Insomma il segnale di google è stato forte, una predilezione particolare verso html5 rispetto ad xhtml2.

Ma cosa è html5 e come può realmente migliorare il futuro del web?
Si potrebbe pensare che html5 sia unicamente un nuovo standard per il markup del codice, un’evoluzione di html4. Ma html5 è molto di più: lo scopo principale è quello di trasformare un linguaggio di markup per creare siti internet in un linguaggio per la creazione di applicazioni che girano nel browser, questo tramite l’adozione di diversi standard, api e l’integrazione di molti nuovi tag, più semantici, evoluti per rispecchiare le attuali esigenze del web.

Gli standard sono ad esempio implementazioni di codec audio/video senza l’utilizzo di plugin (tramite il tag video e audio), i webfont, le nuove api sono principalmente un’evoluzione di javascript per supportare le applicazioni offline che funzionano anche in mancanza di connessione (come il defunto google gears) e la cache per il salvataggio in locale di file per il funzionamento dell’applicazione, ma anche un set di strumenti che permettono l’utilizzo di socket client/server (permettendo al client di restare “in ascolto” verso il server in attesa di aggiornamenti), i nuovi tag sono meno generici e renderanno la scrittura del markup meno dipendente da classi e id ( tra i nuovi tag ad esempio <header> e <footer>) e quindi meno frustrante.

Ma iniziare a sviluppare in html5 vuol dire anche iniziare ad utilizzare i nuovi selettori e le nuove proprietà introdotte dal CSS3. Sempre con l’ottica di alleggerire le pagine html, utilizzando meno immagini sono state introdotte proprietà per definire bordi di un box arrotondati, trasparenze, gradienti, ombre, sfondi multipli e tantissime altre.

Questo set di nuovi strumenti potranno rendere lo sviluppo, ma soprattutto la user experience molto migliore, dipenderà dai browser vendor di inserire al più presto tutti i nuovi standard.

Prossimamente tratterò il progressive enhancement, una tecnica di sviluppo che permette di supportare i vecchi browser, privilegiando i nuovi.

Ah se cercavate la risposta a “HTML5 è il futuro del web?”, io penso di si, ma come ho detto all’inizio il web è volubile!

Introduzione

Il web ha condiviso con me tantissimi strumenti. Le persone hanno condiviso con me tanti segreti, trucchi. Volevo inaugurare questa rubrica con un plugin jQuery che spero possiate includere nei vostri prossimi progetti.

Che cos’è

È un plugin jQuery che vi permette di visualizzare e navigare a tutto schermo, un insieme di immagini passate tramite selettore (es.: .gallery img).

Storia

Dopo aver con successo usato Piclens della Coolris con Nexgengallery, ho avuto la necessità di utilizzare un plugin proprietario per la gestione delle gallerie in WordPress. Piclens si interfaccia molto bene con i feed di immagini (specialmente quelli Flickr), ma non mi andava di smanettare per convertire le immagini in feed, ho così cercato un plugin javascript. A questo punto ho trovato Galleria, un plugin in jQuery davvero ben fatto, che purtroppo però non era adatto al mio caso.

Galleria non viene lanciato molto bene da un evento e soprattutto, chiudendo la finestra a tutto schermo, veniva compromette il codice html.

Mi sono quindi armato di texteditor, una tazza di latte e miele visto il mal di gola e ho iniziato a scrivere un plugin tutto mio.

Demo

Per adesso è disponibile una sola demo

Demo1 – immagini sparse – miniature create dagli originali

Requisiti

L’unico requisito è la fantastica libreria jQuery! Scaricatela da qui

Come si usa

Inserire nell’head lo script con il css


<script type="text/javascript" src="js/jquery.js" />
<script type="text/javascript" src="js/jquery.gallerizr.packed.js" />
<link rel="stylesheet" type="text/css" href="js/gallerizr.css" media="all" >


poi basta inserire (in riferimento al demo1) nel tag script

$(function(){
$('.allrandom').click(function(){
$('.randomclass img').gallerizr();
return false;
});
$('.onlylist').click(function(){
$('.randomclass li img').gallerizr();
return false;
});
});

in questo caso si attiva al click, ma potete farlo attivare anche al caricamento della pagina.

Ho passato come selettore css .randomclass img, ma se avessi anche le miniature ridimensionate basterebbe passare il selettore con i link che contengono le miniature ma i link devono puntare all’immagine ad alta risoluzione.

Un esempio integrato con successo lo trovate qui:

Galleria Istituto Nazionale del Dramma Antico

Passiamo ai Downloads!

Versione packed

Codici sorgenti