http://nivo.dev7studios.com/

E poi, non posso non condividere con voi pure questo esempio di utilizzo di CSS3 per realizzare il logo di Opera. (via italianwebdesign)

http://desandro.com/articles/opera-logo-css/

Buon lavoro!

Se avrò tempo scriverò un articolo riguardante le animazioni fatte con webkit. Dato invece il poco tempo, adesso, vi lascio un link di Web Designer Wall che mostra alcuni esempi realizzati con le nuove regole di CSS3.

Buona lettura e buona sperimentazione!

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!

Un esempio classico è un box con sfondo e al suo interno due elementi in float. Il box risulterà alto pochi pixel invece di racchiudere gli elementi al suo interno.

Per ovviare a questo problema una tecnica era quella di usare un <div>, o uno <span> o addirittura un <br /> con una classe che conteneva la regola:

clear: both;

Il risultato era ottimo, ma diciamoci la verità, il markup lo rovinava e ci trovavamo degli elementi in più che proprio ci stavano male.

Adesso (anche se in verità, da un bel po’) si può usare solo una classe CSS da assegnare al contenitore, che contenga queste regole:

.clear:after {
clear : both;
display : block;
content : “.”;
height : 0;
visibility : hidden;
}
.clear {display:inline-block;}
.clear {display:block;}
* html .clear {height: 1%;}

Ma che cosa fa?
Seplicemente indicano di aggiungere un carattere ‘.’ (il punto) alla fine dell’elemento, con altezza 0 pixel poi lo nasconde e cancella il float (clear: both).
Crea quindi via CSS quell’elemento in più che tanto dava noia prima al markup.
Le altre regole sono dei fix per i browser poco compatibili.

Di seguito un’esempio dell’html:

<div style=”background: #ccc” class=”clear”>
<div style=”float: left; padding: 5px”>
Sinistra
</div>
<div style=”float: right; padding: 5px”>
Destra
</div>
</div>

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

Un nuovo (per modo di dire) modo per costruire i nostri siti!

Link diretto all’XML.

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!

Il 29 Giugno di questo anno è uscito l’iPhone in America e come aveva preannunciato Steve Jobs, si possono creare applicazioni Web da utilizzare con suddetto telefono.

In un recente video nell’ADC, Apple, spiega come sviluppare tali applicazioni e si fa molto riferimento al fatto che i documenti html devono essere standard e validi, ma non solo.. anche ben costruiti.

Questo perchè?

Come tutti oramai sappiamo, iPhone è un prodotto che si avvalora della tecnologia multitouch e molte funzioni le si applicano mediante gesture con le dita, double tap (doppio tocco), single tap (singolo tocco) eccetera..
Per esempio eseguendo un double tab si va a fare uno zoom su una determinata area.

iPhone, calcola automaticamente quale zona deve essere zoomata e di quanto.. e per fare questo si basa sulle dimensioni degli elemeni nell’html.

Se quindi create dei box fatti con i piedi, con div incastrati inutilmente, un po’ come quei tanti siti che si vedono dove per creare un semplice box ci sono 5-6-7 div uno dentro l’altro che non servono a niente (e cmq i siti stessi sono validi al w3c..), e magari spostati inutilmente per creare effetti che si potrebbero avere con altre semplici tecniche.. ecco, iPhone in quel caso farà uno zoom errato..
Ecco perchè dobbiamo imparare ad usare gli standard, renderli validi ed imparare ad usarli correttamente!

Ecco perchè dobbiamo scrivere un markup semantico! Ecco cosa vuol dire e a cosa serve questo markup semantico!

Finalmente un prodotto che fa capire in modo perfetto in che modo dobbiamo lavorare..

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

Buona navigazione!