iPhone Web App

Creare un sito progettato per iPhone non è così complesso come molti credono, basta creare un’interfaccia adeguata e stare dietro ad alcune linee guida. Diciamo che un buon Web Designer non troverà molte difficoltà.

Ma creare un’applicazione Web per iPhone invece può diventare un lavoro veramente duro. Ricreare i bottoni, le navigation e tutte quelle parti dell’interfaccia che hanno reso famoso iPhone, non è semplice, per niente.

Voi vi chiederete, ma non si devono mica creare per forza?, certo, è vero.. ma Apple ha speso anni di sviluppo e ricerca per creare un’interfaccia funzionante e veramente ottima, perchè allora doverne creare un’altra in tempi sicuramente stretti e sapere che il risultato non sarà comunque ottimo? (perchè si, per chi non lo sapesse, creare una UI che funziona non è così semplice e veloce..).

JQTouch

Per fortuna ci viene incontro JQTouch, un framework basato su JQuery che promette di ricreare tutta l’interfaccia di iPhone.

Include la possiblità di far creare l’icona sulla Springboard di iPhone e pure di avviare l’applicazione in modalità FullScreen.

Buon lavoro quindi!

Quanto e quando fa bene usare Javascript?

Nell’ultimo anno si è visto crescere l’utilizzo di Javascript in modo smisurato, un po’ grazie a framework come Mootools o JQuery che rendono la creazione di effetti e funzionalità veramente semplice e un po’ grazie alla moda venuta fuori chiamata Web2.0.

Ma creare siti interamente in Javascript o con molto uso di questa tecnologia non sempre porta ad ottimi risultati.

In ufficio, un mio collega, ha un portatile di un po di anni, non è vecchio ma neanche nuovissimo. All’interno ha un Pentium 4 a 3Ghz e 1.5 giga di ram, Windows XP e poc’altra robetta installata.
Da almeno 6 mesi, quando naviga, deve disabilitare (la maggior parte delle volte) il javascript nel suo browser. Perchè? Siti troppo pesanti.

Molti fanno un uso spropositato di JS e il computer ne risente molto, tanto da rallentare e a volte chiudere inaspettatamente i browsers.

Qui però nascono due tipi di problemi:

  1. Come abbiamo detto prima i siti sono troppo pensanti e il computer non riesce a processare tutti i dati in modo corretto e snello. La soluzione è cambiare sito o disabilitare momentaneamente il javascript. Quest’ultima soluzione però porta al secondo problema.
  2. Se si disabilita il javascript, nell’80% dei casi il sito smette di funzionare. Questo perchè molto spesso rendiamo il sistema troppo dipendente dal javascript.

La soluzione al primo problema è veramente semplice. Limitarsi.
Come succede per Flash, così dobbiamo fare per JS. Il suo utilizzo deve limitarsi allo stretto necessario. Troppe transizioni, opacità, controlli, fanno rallentare il computer ed a volte diventa davvero inutilizzabile.

Quindi, un uso smodato di JS è assolutamente sconsigliato. Può sembrare ovvio, ma spesso ci passiamo sopra pur di avere un’effetto carino sul sito.

La soluzione al secondo problema invece è sicuramente più complessa (in alcuni casi). Si tratta di costruire tutte le funzionalità senza l’uso di Javascript, quindi a volte anche codice in più, e in una fase successiva creare le funzioni JS necessarie e farle sovrascrivere alle tradizionali.

Come ho detto prima il lavoro sarà probabilmente doppio ma come risultato avremo la massima compatibilità, anche con chi disabilita Javascript per navigare.

[Aggiornamento]
Per la serie, l’esperienza insegna, mi sono ritrovaro a sviluppare in modo molto massiccio delle sezioni XHTML/Javascript ed i test hanno confermato che troppo Javascript non portano a niente, ma anche molto HTML all’interno della stessa pagina uccide il browser. Specialmente se si utilizza Firefox 2 o Internet Explorer.

Questo fa capire ancora una volta che non possiamo usare Javascript in modo inappropriato. 

Testi con gradienti in CSS

Stamani ho fatto un salto su un’articolo di Italian Web Design che parlava di testi con gradiente in css.

Questa tecnica fa uso di PNG, ma cosa succede con IE6 e IE5.5? Questo browser non supporta le PNG a 24bit trasparenti.

Mi sono ricordato però che io solitamente utilizzo un metodo per le png su IE che fa uso di un file .htc, e perchè non usare questa tecnica per rendere compatibile il tutto conIE 6 e 5.5?

Il risultato potete vederlo qui e adesso due parole su come realizzarlo.

I file necessari per la buona riuscita sono:

IEPNGfix
MooTools 1.11

A questo punto il gioco è quasi fatto. Una volta installato tutto nelle rispettive directory andiamo a creare un file Javascript dove inseriamo una funzione per far attivare il fix per IE:

function addPNGRule() {
if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule) {
document.styleSheets[0].addRule('.png', 'behavior: url(c/iepngfix.htc)');
}
}

Cosa fa questo funzione? Semplice, aggiunge una regola globale al CSS dove, in caso esista la classe .png gli applica un behavior, in questo caso il fix delle png. Ovviamente lo fa solo per IE.

Poi con mootools (io uso mootools, ma poi siete liberi di usare ciò che volete) avvio la funzione alla fine del caricamento della pagina:

// Initialization Function
function init() { addPNGRule(); }

// Set DOMReady Events
window.addEvent('domready', init);

Questo per quanto riguarda il fix PNG, il codice invece del gradient è molto simile a quello originale, tranne l’applicazione della classe .png al tag span:

<h1 class="gradient"><span class="png">This is a PNG test</span></h1>

Et voilà! Il tutto funziona con i seguenti browser:

Safari 2
Safari 3
IE 5.5
IE 6
IE 7
Firefox
Opera 9

XRAY – Un nuovo strumento per gli Sviluppatori Web

Avete sempre desiderato uno strumento che vi aiuti a sviluppare applicazioni web o semplici siti in web2.0-style? E magari cross browser e che sia disponibile per safari?

Date un’occhio a XRAY. Questo tool sviluppato in javascript-xhtml-css, è proprio quello che fa per voi.

Basta metterlo nella barra dei preferiti del vostro browser e quando avete aperto il vostro progetto, cliccateci, comparirà un comodissimo strumento in trasparenza nella finestra. Poi fate clic in qualunque elemento della pagina e XRAY mostrerà tutti i dati di cui avete bisogno.

Buon lavoro!