This is not a “one time post”… it’s going to be updated in the next days. Any contribution is defenetly welcome!

CSS

Define the media screen size to override classes when the page is shown on ipad, iphone, android or desktop

• ipad landscape: @media screen and (max-width: 1024px)

• ipad portrait: @media screen and (max-width: 880px)

• smartphone: @media screen and (max-width : 620px)

HTML

Interesting notes on apple site

Meta Keywords to set the viewport for smartphone

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no" />

Tell IE to use chrome to render

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

JS

<script src="js/libs/modernizr-1.7.min.js"></script>

For Png problem in IE

<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

Per realizzare la base css di questo sito ho utilizzato la libreria SPLEEN_SCSS, (fork it on github!) ed è stato il primo grosso lavoro in cui ho applicato el nuove linee guida HTML5.

Certo riuscire a rendere la compatibiltà sulle versioni 8 e 7 di Internet Explorer non è stato uno scherzo; notti insonni e preoccupazioni crescenti ma alla fine, tra  colpi di javascript e mille tricks recuperati in rete, il sito è diventato compatibile (anche se sempre si possono trovare piccoli bug che via via verranno risolti!)

Sono stati usati vari plugin JQuery e non è potuto mancare il mio fido JQuery tools che ormai mi accompagna nei progetti web!

Ho usato per la prima volta Mercurial; essendo un amante di GIT devo dire che ho trovato i due progetti veramente simili, quasi indentici, ma rimango dell’idea che GIT sia più intuitivo o semplicemente, lo preferisco!

Devo dire che django è effettivamente un gran bel pezzo di software e che l’applicazione per l’ecommerce Satchmo è impressionante. Mi è risultato un po’ ostico riuscire ad entrare nel filesystem per effettuare l’overide del codice e poter capire come personalizzare l’interfaccia, ma grazie al prezioso aiuto di @dvd, mio mentore e programmatore del sito in questione, siamo riusciti a fare tutto!

Ne aprofitto per ringraziare proprio @dvd e @matteoscurati con i queli abbiamo passato romantiche serate in chat e Book Republic per il post di riferimento con tanto di citazione!

Strumenti/tecnologie usate:

• Html5 / Css3 / Scss
• Django / satchmo
• Jquery
• Mercurial

Compatibilità Browsers:

• Firefox 3 / 4
• Internet Explorer 7 / 8 / 9
• Chrome 9 / 10
• Opera
• Safari
• Lynx (browser testuale)

Il lavoro nel mio protfolio per vedere gli screenshot del progetto.

The problem

I like to use the watch to an entire folder; this allow me to edit any scss file and the observer write the final css file with a compact output. his is the string:

sass -t compact --watch [the/scss/folder]:[the/css/folder]

At a certain point it’s happend that the watcher has stoped to “feel” the change written on my editor. The only way was to stop the service and start it again. I’ve finally understood that was a cache problem. Sass write an hidden .sass cache folder that cause the problem after a while I work at the same project.

The solution

Run the sass command without cache adding a -C parameter:

sass -C -t compact --watch [the/scss/folder]:[the/css/folder]

Yes, so easy! this is the right twitter in these cases http://twitter.com/#!/angrydeveloper

Read the tutorial @tutorialzine.com

As the say in their conclusion: “As the Flash / HTML5 debate heated up recently, people started looking for ways to achieve the same level of functionality that flash provides, without depending on an external plugin. This is possible for simple interactions, but we still have to make sure that the solution is cross-browser compatible, which is sometimes rather impossible (think of IE here).”

Che ancora, nel 2009, nell’era in cui il web 2.0 sta diventando vecchio, che ancora i webdesigners debbano trovarsi a fare i conti per Internet Explorer 6 (quando siamo ormai alla versione 8, quando esistono browser molto più veloci, affidabili), questo è lo trovo quantomeno assurdo. Stessimo poi parlando di software “costosi” potrei forse capire la questione “prezzo”, ma i browser si sa, sono gratuiti. Allora perchè le pubbliche amministrazioni, moltissimi clienti, e la stragande maggioranza del mondo continua ostinatamente ad utilizzare IE6? Perchè??!!

Ogni volta che pronuncio le magiche parole “me ne frego di IE6, se uno ce l’ha, si arrangia e vede male i siti” ecco che arriva un lavoro che richiede massima compatibilità con quel browser… la bestia!

SIX REVISION offre in questi giorni un ottimo articolo che descrive alcune vie per “hackare” i milioni di bug che la bestia ci propina da anni facendo lievitare enormente il numero delle ore spese per il codeing dei nostri siti.

Definitive Guide to Taming the IE6 Beast

Finalmente direi!

W3.org presenta un metodo molto semplice e a mio avviso molo ben fatto per al creazione di presentazioni  fatte a slide. Quante volte ci sono utili, e quanto potremmo riutilizzarle online senza dover mettere a scariocare gli odiosi ppt? Inoltre on girando con linguaggi interpretati da webserver, le slide si possono traquillamente mettere su un cd.

Occhio, come sempre, all’incompatibilità con gli standard di IE… vediamo cosa faranno con l’immiente uscita della nuova versione

slide show W3.org demo