Area sviluppo Tesene

Google Maps  permette a tutti gli utenti di creare mappe personalizzate grazie a “Le Mie Mappe”. (more…)

AKA "Tutto quello che avreste sempre voluto sapere e non avete mai avuto il coraggio di chiedere".

Eccellente presentazione in PDF:

http://webtypography.net/talks/skillswap09/facing-up-to-fonts-notes.pdf

Da non perdere per chi vuole approfondire l'argomento.

Forse ti può interessare anche questo:

http://developer.tesene.it/186/fonts-per-il-web-e-prodotti-microsoft/

Riporto qui sotto il codice probabilmente più minimalista possibile per fare un menu orizzontale con i fogli di stile.

Funziona con praticamente tutti i browsers esistenti, e si basa su un elenco puntato non numerato.

(more…)

Anche per questo post devo ringraziare il collega che mi ha posto il problema.

Il problema di fondo è che normalmente se si prova a fare un menu orizzontale con i dropdown in CSS, e sotto c'è un filmato flash, va a finire che il menu rimane non visibile sotto al filmato.

Per risolvere questo problema molto fastidioso, c'è un solo metodo: aggiungere il parametro wmode ed impostare il suo valore a transparent nel codice di inclusione del filmato Flash.

<param name="wmode" value="transparent" />

Quindi il flash va messo dentro un div in modo che si possa definirne la posizione, ma questo è abbastanza ovvio, ed assegnargli uno z-index pari a zero. Ad esempio:

<div id="header">
<div id="flash">il filmato flash va qui</div>
</div> 

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

Quindi si definiscono gli elementi che vanno visualizzati sopra all'animazione Flash e gli si assegna z-index pari a 1.

Questo post è giusto per rispondere ad una delle domande più frequenti di chi inizia a fare siti Web: che font si possono usare per fare le pagine Web?

La domanda è collegata al fatto che i visitatori vedono i siti con i loro browser ed hanno a disposizione solo i fonts che ci sono sul loro computer. Per questo motivo, se anche un sito dovesse essere fatto con un costosissimo e bellissimo font, risulterebbe visibile solo a pochi utenti.

Sul Web solo pochi font sono presenti su tutti i computer. E comunque, dato che la maggior parte dei visitatori ha a disposizione PC con installato Windows e prodotti Microsoft, anche questi hanno un'importanza non del tutto trascurabile.

(more…)

Riapro il blog dopo un mese di pausa per segnalare il sito kuler.adobe.com

Questo sito è una risorsa utile per definire i colori da usare in un sito Web.

Oltre a esserci memorizzate un numero molto alto di palette pronte già taggate per una facile ricerca, è possibile selezionare una palette e modificarla con un'applicazione molto ben fatta. (E non poteva essere altrimenti essendo il sito fatto da Adobe). 

Le combinazioni di colori, sono valutate dagli utenti, sono ordinabili in base alla valutazione, alla popolarità, alla data di pubblicazione, si possono scaricare i feed RSS, ci sono delle API per gli sviluppatori, è integrabile nell'ambiente Adobe AIR e probabilmente anche altro che mi è sfuggito.

Insomma, un punto di riferimento per chi non si sente molto ispirato e deve scegliere una combinazione di colori. 

Dirk Jesse ha fatto un nuovo strumento per fare layout flessibili con qualsiasi numero di colonne con i fogli di stile. 

Il layout builder si trova all'indirizzo: http://builder.yaml.de/ 

In pratica, si costruisce con un wizard fatto in javascript che sfrutta il Drag and Drop, il layout che si desidera ottenere, quindi una volta fatto si clicca su "Get the code" e si ottengono 

• il file HTML col DocType desiderato;
• il foglio di stile
• il foglio di stile con gli hacks per IE fino alla versione 5.5

Un elemento particolarmente carino di questo strumento è la possibilità di definire con precisione le dimensioni minime e massime del layout e come questo si deve comportare quando si ridimensiona la finestra del browser, oltre all'ordine con cui devono essere scritte le colonne per essere lette dai non vedenti con screen reader.

Il codice che si ottiene poi è estremamente pulito e facilmente comprensibile per chiunque, in particolare se si vogliono fare layout su due colonne o layout su tre colonne.

Grandi aziende come Google hanno migliaia di programmatori per poter curare nei minimi dettagli le interfacce delle loro applicazioni Web, anche sfruttando degli hacks degli standard e dei browser, per ottenere alla fine un risultato che massimizzi l'usabilità per l'utente.

Nel caso specifico, vediamo un layout a tabella, in cui il contenuto di una colonna vada in overflow in modo controllato senza incasinarsi quando si ridimensiona il browser.

Questo è quello che succede nelle colonne subject di GMail.

Il trucco sta tutto nell'usare un table-layout fixed nella definizione del CSS per la tabella nel suo insieme, quindi specificare solo la larghezza delle colonne che non devono avere l'overflow nascosto e mettere l'overflow: hidden nel css relativo alle celle.

.grid { table-layout: fixed;}

.grid * td {   empty-cells: show;   overflow: hidden;   width: 100%;}

Grazie a opencomponentry per la segnalazione

Dopo un periodo di downtime OSWD è finalmente tornato online.

OSWD, il cui nome per intero è Open Source Web Design, è un sito che raccoglie template utilizzabili liberamente per la creazione di siti web; attualmente ci sono circa 1300 modelli disponibili, ricercabili in base a vari criteri. Può essere utile perché ad ogni templato sono associati dei commenti ed inoltre, essendo open source, è dedicata molta attenzione alla compatibilità cross-browser.

Più che per i templati in sé, che possono anche essere non particolarmente belli, può interessare anche per vedere quali sono le soluzioni che vanno di moda in questo settore e per vedere se c'è qualche novità nel blog associato. 

A List Apart ha pubblicato un interessante articolo con la spiegazione di come si fa ad ottenere un layout fluido su due colonne, in modo che questo sia visualizzato allo stesso modo su tutti i browsers fino a IE5, sebbene questo non sia più usato. In pratica, in questo modo si riesce a far vedere il sito allo stesso identico modo al 100% dei visitatori.

Il risultato finale è visibile qui. 

L'evoluzione rispetto a quanto pubblicato nel 2004 su altre fonti, consiste nella compatibilità con Internet Explorer 7.

Principalmente, il risultato è stato ottenuto con i seguenti accorgimenti:

• Specificare l'altezza e la larghezza del body come 100%
• Nascondere l'overflow negli elementi body e html
• Settare l'overflow ad auto per la colonna sinistra e destra, e nasconderlo per l'intestazione.
• Fissare le dimensioni dell'header
• Per la colonna sinistra, impostare le posizioni top, left e bottom come padding, quindi dargli una larghezza definita con unità di misura assoluta (es. 200px)
• Per la colonna destra, specificare le posizioni top, left, right, bottom tramite padding

come gentilmente segnalato da Ajaxian.

In definitiva, il layout fluido su due colonne viene visualizzato correttamente su IE5.0 IE5.5 IE6 IE7 Firefox 1.5 Firefox 2.0 Safari Opera