homepage

iPhone, Safari Mobile sviluppo web

13
ottobre

Analizziamo il discorso web su mobile, l’esperienza di navigazione su iphone è notevole, questi zoom in e out sui vari content della pagina, su qualsiasi tipo di sito web in attesa dell’implementazione di flash.
Perciò abbiamo visibilità per tutti i contenuti che siano HTML based; ma per essere ancora più conformi a una navigazione Mobile possiamo saltare questi passaggi di zooming ottenendo una  visione ottimale per la risoluzione 320×480, in questo modo otteniamo compatibilità con dispositivi BleckBerry (non ho possibilità di fare test purtroppo).
Beh il sistema per ottenere famigliarità dei contenuti con la visione mobile nasce alla base di tutto nei META TAG, documentato nelle varie sezioni dell’Apple Developer Center – WebApps nel capitolo “configure viewport” troviamo come inserire dei meta tag inerenti al “viewport”.
Vediamo cosa dobbiamo inserire:

<meta name = “viewport” content = “width = device-width”>
settando per device-width la larghezza desiderata per il conteunto

<meta name = “viewport” content = “initial-scale = 1.0″>
rapprto di visione in scala 1 a 1

<meta name = “viewport” content = “initial-scale = 2.3, user-scalable = no”>
scala settata a piacimento con possibilità di zoommare o no

La configurazione della viewport è essenziale, dopo basta costruire una struttura html css che rispetti la risoluzione del dipositivo, navigando gizstyle.com con iphone è possibile vederne la versione mobile.

jQuery background-image changer

2
ottobre

Nuovo sito, nuova feature studiata apposta, con jQuery e le API che intervengono sui CSS sono riuscito a costruire un semplice “background changer”, in modo da cambiare la fotografia di fondo al <body>.
Guardiamo il codice ovviamente includiamo nell’head il jquery.js:

HTML
<div class=”bg 1″>1</div>
<div class=”bg 2″>2</div>

CSS
body {
background: #fff url(skin/bg0.jpg) center top no-repeat fixed;
}
.bg {
position:realtive; float:left;
height: 19px; width: 19px;
text-align:center; line-height: 19px;
margin: 0px 1px 1px 0px;
background: #000; color: #fff;
cursor:pointer;
}

JAVASCRIPT
$(document).ready(function(){
$(“.bg.1″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg1.jpg)’);
});
$(“.bg.2″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg2.jpg)’);
});
});

Ora non mi resta che implementare i coockie (o con jquery.coockie.js plugin o direttamente con php) per conservare la scelta del background, se qualcuno ha idee per aggiunte, correzioni e o revisioni ecc, liberissimo di condividerle.

TypeChart, Font sul Web e CSS

5
settembre


Typechart espone una galleria di font molto interessante, specifica sul comportamento dei Font sui Browser web, mettendo a paragone la visione tra MacOS e Windows i vari font “di sistema” che noi programmatori web possiamo sfruttare nei CSS; la galleria dei font è suddivisa in categorie di grandezza del font e di presenza default nei vari sistemi, in windows in macos e avendo office installato.
In più per completare l’opera, se sono interessato a una determinata resa di un font, mi basta cliccare sul tasto CSS per ottenere il codice già compilato da inserire nel mio foglio di stile.

1234