Area sviluppo Tesene

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.

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

La caratteristica principale delle applicazioni fatte con tecnologia Ajax nel senso generico del termine è l'interfaccia in Javascript che risponde alle esigenze dell'utente senza dover caricare ogni volta la pagina dal server.

Di fondamentale importanza è quindi la velocità di risposta della pagina alle interazioni dell'utente ed uno di questi aspetti è la velocità nella manipolazione dei CSS.

Per questo motivo, gli sviluppatori dei MooTools hanno fatto una pagina che confronta i principali strumenti che vengono comunemente usati per fare siti web dinamici, ed in particolare quanto velocemente funzionano i selettori dei CCS 3 e la loro compatibilità con lo standard.

Gli ambienti testati sono prototype 1.5.1, jquery 1.1.2, mootools 1.2, ext 1.1, css query 2.02 e dojo query.   

(more…)

Attualmente gli angoli arrotondati sono una cosa che va molto di moda, ma che possono essere parecchio difficile da riportare all'interno della grafica di un sito Web. Di seguito riportiamo un esempio con cui è banale non solo ottenere gli angoli arrotondati ma anche altri tipi di effetti con JQuery e la tecnologia del javascript non intrusivo (unobtrusive javascript). (more…)

Una delle caratteristiche che si vedono sempre più spesso nelle pagine web sono gli angoli arrotondati nelle finestre, negli elementi interni della pagina, nei pulsanti ecc.

Vediamo brevemente come si possono inserire nelle pagine web.

(more…)