@font-face, font embeded CSS

19
ottobre

il problema del supporto dei font su web è sempre stato tema di disussione, ora attraverso quello che sono le variabili CSS introdotte in sperimentazione con CSS3, è possibile integrare un font nella pagina web stessa, senza averlo necessariamente installato nel sistema.
Come funziona, in pratica con il comando variabile @font-face si determina la posizione del font custom nel sistema e sul server, ed il nome attribuito al font stesso, i browser che supportano questa carateristica penseranno a mettere in cace i caratteri potendoli utilizzare nelle nostre pagine, richiamando il nome settato nella variabile alla voce font{}; o font-family{};.
Vediamo un esempio:

@font-face {
font-family: ‘Sketch Block’;
src: url(‘/skin/fonts/Sketch_Block.eot’);
src: local(‘Sketch Block’),
local(‘Sketch Block’),
url(‘/skin/fonts/Sketch_Block.ttf’) format(‘truetype’);
}

body {
font-family: “Sketch Block”, “Arial”, “Helvetica”, sans-serif;
}

I font ovviamente hanno una resa differente di Aliasing su ogni Browser, nel caso si volgia utlizzare il bold din un font custom per i browser non IE è necessario dichirare la variabile con il font bold e il font-weight.
I miei test si sono svolti su Firefox e Safari con esito positivo, mentre si IE e Chrome l’opzione non è andato a buon fine, probabilmente l’opzione su IE è supportata solo se il font è presente anche in versione .eot (OpenType); ho nontato inoltre che neanche su iPhone è supportato.

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.

1234