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..).

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!

Buona Lettura!

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. 

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

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!

Per tutti i fortunati possessori di un’iPhone, andate su http://wishlists.dimix.it/ e divertitevi a gestire i vostri desideri! :)

Per costruirla ho utilizzato i MooTools ed è basata sui Cookie. I dati quindi vengono memorizzati nei cookie per poi riformare gli array necessari per la visualizzazione e la gestione dei dati stessi.

Buon divertimento!

Tanti bei siti e applicazioni web, i migliori diciamo, in circolazione..

Buona navigazione!

Ulteriori informazioni:

Perchè usare XHTML e i CSS, marckup semantico, XHTML avanzato e web 2.0, Javascript per potenziare il layout

20 alunni per classe
Prezzo: 200 €
Durata: 7 ore
Rivolto a: web designer e developer

Per iscriversi andare sul sito di Let’s Course

Utilizzando questa nuova tecnica, avremo per ogni nostra sezione all’interno del sito flash, un url unico, proprio come per un sito html. Inoltre continueranno a funzionare i tasti del browser per tornare indietro per le sezioni.

Detto questo, possiamo ben capire che i motori di ricerca saranno molto più felici.

Devo ancora metterci mano per bene e vedere come far digerire il tutto a Google, ma penso che da qui possa nascere una piccola rivoluzione.