Archivi tag: css

Usare font non standard nel sito web

Un appunto su come utilizzare i font non standard (a patto di essere in rogola con license e copyright) in un sito web tramite Css.
Tanto per cominciare, come al solito (!!), Internet Explorer lavora in un modo e tutti gli browser in un altro.  Avremo bisogno quindi di inserire nel css sia le righe per l’interpretazione di IE che quelle per l’interpretazione normale.

@font-face

Avremo bisogno del modulo @font-face: già presente nei css dalla versione 2.1 ma sempre poco utilizzato perchè all’epoca non era ben supportato.

La pagina sarà un normalissimo (x)html e il css, oltre alle solite dichiarazioni, dovrà contenere la dicitura @font-face con il percorso in cui andremo a mettere il font scaricato.
Dovremo scaricare due versioni dello stesso font: la versione .ttf (true type font) valida per qualsiasi browser (tranne IE) e la versione .eot (embedded open type) valida per Internet Explorer.

A questo punto basta aggiungere nel css una cosa tipo questa:

@font-face
{
    font-family: 'NomeDelFontTitle';
    src: url('/percorso/NomeDelFont.eot');
    src:  local('NomeDelFont Title'),
           local('NomeDelFont'),
           url('/percorso/NomeDelFont.ttf') format('truetype');
}

Con questa semplice procedura possiamo ottenere simpatici risultati come questo esempio.

Gestire l’inclusione di file con Ajax

Quando parlavo di come inserire una musica di sottofondo in un sito avevo accennato che era possibile farlo anche con Ajax. Ho girellato un po’ tra i vari siti ed ho visto come funziona. Posso riassumere qualcosa riguardo alle inclusioni di file in Ajax.

Non scrivo sullo stesso articolo “della musica” (link sopra) perchè tale tecnica è applicabile per qualsiasi scopo: fare un sito a colonne, un menu con tabulazione, un paginatore e chi più ne ha più ne metta.

Non avendo tempo di spiegare con accuratezza tutto il funzionamento e le varie righe di codice per ora mi limito a postare l’esempio.

Con calma poi amplio qui sotto …

Questo è l’esempio del funzionamento. Non appena caricato il (pesante) file mp3 e inzia a parlare un odioso bambino (senza offesa!! eheh) provate a cliccare sui link a sinistra. L’audio non si interrompe ma il contenuto cambia.

Nonostante il codice abbia un doctype in Xhtml 1.0 Strict (validato), una cosa la posso subito aggiungere: continuo ad affermare che la soluzione migliore per un player musicale sia quella del popup. Questo tipo di inclusione di file si porta con se due grosse carenze:

  • sui i motori di ricerca
  • sull’accessibilità

Fate le vostre prove e ve ne accorgerete!!

Spot overlay (div)

Se a qualcuno fosse sfuggito mostriamo la tecnica usata per sostituire le finestre di popup che potrebbero essere bloccate da alcune impostazione di sicurezza del browser.

Premetto che tale funzionalità resta sgratita al navigatore esattamente come i popup e sarebbe meglio quindi evitarla. Le soluzioni gradite infatti sono sempre quelle che chiedono all’utente di fare qualcosa e fanno sì che sia lui a decidere (cliccando su “vedi pubblicità” o simili).

Detto questo passiamo al codice base per implementare il tutto: si tratta semplicemente di un contenitore (spotoverlay) che racchiude due div (uno per il pulsante Chiudi e uno per il contenuto)

<div id="spotoverlay">
  <div class="chiudi">
    <a href="#" onclick="document.getElementById('spotoverlay').style.visibility='hidden'">CHIUDI</a>
  </div>
  <div>
    Qui dentro va messo il messaggio (codice (x)html) da evidenziare...
  </div>
</div>

Il pulsante (link o foto dentro il tag <a>) è un “chiudi” falso… in quanto non c’è niente da chiudere: c’è solo un div da nascondere… e lo facciamo con quel codice javascript

onclick=" *** *** style.visibility='hidden'"

Nel codice sotto associamo un stile (css) ai riquadri e il gioco è fatto

#spotoverlay {
    position: absolute;
    background-color: #dfdfdf;
    font-size: 12px;
    font-family: arial;
    top: 150px;
    left: 150px;
    width: 200px;
    height: 200px;
    border: solid 1px #000;
}
div.chiudi {
    text-align: right;
    border-bottom: solid 1px #000;
}
a.spot {
    color: #000;
    text-decoration: none;
}

E’ tutto…
Qui possiamo vedere un esempio: all’inizio la pagina si apre col messaggio in evidenza; questo scompare se si clicca su Chiudi.

Tecniche più evolute, javascript e ora jquery, possono aggiungere effetti speciali a questa tecnica, come offuscare lo sfondo, entrare/uscire in dissolvenza, etc… magari in un prossimo post le vediamo…

Centrare verticalmente un elemento (div) ad altezza non conosciuta

Avevamo visto in precedenza come centrare un elemento con dimesioni fisse verticalmente e orizzontalmente e prima ancora avevamo centrato orizzontalmente un div nella pagina.

Vediamo stavolta come si può centrare verticalmente un elemento di cui non si conosce l’altezza. La cosa è realizzabile solo se l’elemento genitore (che conterrà il box da centrare) avrà un’altezza fissa; inoltre dovrà essere dichiarato come “tabellare“.

Vediamo il codice Css così chiariamo meglio:

#padre {
  height:300px;  /* elemento contenitore con altezza fissa */
  display:table; /* elemento contenitore visualizzato come tabella */
}
#figlio_centrato {
  display:table-cell;    /* elemento visualizzato come cella di tabella*/
  vertical-align:middle; /* centro verticalmente */
}

A questo punto basta applicare il codice Css qui sopra a una struttura (x)html normalissima. Ci bastano un paio di Div.

<div id="padre”>
  <div id="figlio_centrato">
    <p>Un po' di contenuto</p>
  </div>
</div>

Nota: vertical-align ha validità quando si applica a una cella di una tabella (col display: table-cell); questo potrebbe servire specialmente quando il contenuto del sito è dinamico (dati reperiti da un database)

Attenzione! Questo metodo (un classico!!) non funziona su IE6 e IE7.

Come fare ad adattare il tutto?

Si può usare a nostro vantaggio un errore di interpretazione dei Css “top” assegnandogli un valore negativo in percentuale, dato che questo non dovrebbe essere preso in considerazione dalle specifiche.

Vediamolo in dettaglio:

#padre {
  height:300px; /* vedi sopra */
  position:relative; /* voglio poter posizionare in modo assoluto ciò che starà al suo interno */
}
#sotto_padre{
  position:absolute; /* sotto elemento posizionato in modo assoluto in rapporto al div padre */
  top:50%; /* il bordo superiore sarà al 50% dell’altezza disponibile */
}
#figlio_centrato {
  position:relative; /* elemento da centrare in rapporto al div sotto_padre */
  top:-50%; /* bordo superiore va ad alzarsi del 50% dell’altezza*/
}

Vediamolo col nuovo codice (x)html…

<div id="padre">
  <div id="sotto_padre">
    <div id="figlio_centrato">
      <p>Un po' di contenuto</p>
    </div>
  </div>
</div>

Quindi adesso dovrebbe andare bene sui vari browser.

Con un po’ di fantasia e a seconda del tipo di struttura che stiamo creando possiamo definire l’altezza del div “padre” al 100% e ridefinire anche Body e Html al 100%. In questo modo otterremo un risultato a pagina piena.

Bye…

Oscurare la pagina di fondo e visualizzare un popup

Vogliamo ricreare il classico effetto di oscuramento della pagina web, che sembra passare in secondo piano come se diventasse uno sfondo per dare evidenza al popup, che altro non è che un div nascosto da richiamare (o rinascondere) quando opportuno.

Dovremo anche creare preventivamente un’immagine in formato PNG semitrasparente (la chiamerò “semitrasparente.png“) che servirà a coprire il tutto. Va bene anche di 1x1px che poi si ripeterà dove serve.

Vediamo un po’ di codice.

La struttura dell’(x)html dovrebbe essere una cosa del genere:

<div id="coprente">
  <div id="box_popup_che_deve_comparire">
      ... contenuto del box ...<br>
      Potremmo mettere un po' di pubblicità...<br><br>
  </div>
</div>

Continua la lettura di Oscurare la pagina di fondo e visualizzare un popup

Xhtml 1.1 implica siti con semantica e css corretti

XHTML 1.1 è una riformulazione dell’ XHTML Strict, quindi ha una sola DTD. Non accetta i tag e gli attributi più criticati della precedente versione.
Ne consegue una più accurata stesura del codice seguendo gli standard dettati dal W3C, le regole della semantica, la conseguente esclusione delll’uso di tag deprecati e stili al di fuori dal codice.

Concentriamoci sulla semantica

Riepiloghiamo i punti necessari per un codice HTML semantico:

  • l’uso dei tag per il loro scopo
  • attribuire classi e id a favore dei fogli di stile
  • separare contenitore e contenuto
  • limitare al minimo gli elementi con puro scopo di presentazione

Semantica e tabelle per l’impaginazione

La progettazione di siti table-less non nasce da una moda. Con l’HTML 4.0, i div, i fogli di stile… è stata introdotta l’alternativa all’impaginazione dei siti web con le tabelle. Tra l’altro l’uso dei div è molto più adeguato e flessibile  rispetto all’uso delle tabelle che, a prescindere dai CSS, non hanno nessun motivo semantico. Esse infatti si devono usare esclusivamente per intabellare dati tabellari, ovvero quei dati dove esiste una relazione tra riga e colonna (come nei fogli di calcolo).

Semantica e utenti meno abili

Un sito ben scritto e progettato, con codice semantico (ed accessibile, su cui scriverò qualcosa più avanti) aiuta la navigazione anche da parte di utenti meno abili, che si trovano ad usare browser ad hoc, reader per non vedenti, o browser solo testo…
Scrivendo ma il nostro codice metteremmo in crisi molti di questi visualizzatori di siti, non consentendo la navigazione a molte persone che avrebbero voluto fruirne.

Semantica e motori di ricerca

Un sito progettato con codice semantico, e quindi con Div e CSS, risulta molto più leggero in termini di codice XHTML rispetto a un analogo con le tabelle: questo risulta gradito ai motori di ricerca. Usare codice semantico e in particolare i titoli h1, h2, h3 con pertinenza al contenuto, oltre che paragrafi e liste aiuta gli spider dei motori nell’indicizzazione.

Semantica e CSS

Nel markup andranno evitati l’uso di immagini senza contenuto visuale effettivo, gli attributi presentazionali HTML ed elementi per servire la grafica: tutto ciò che è presentazione andrà delegato al CSS. I fogli di stile, che consentono di separare contenuto e struttura dalla presentazione, sono strettamente legati al codice semantico.

Bye…

Diamo uno Scroll alle tabelle lunghe

Un classico… Abbiamo una quantità elevata di righe in una tabella e quindi, per una lettura comprensibile,  vorremmo fissare header e footer e fare lo scrolling dei contenuti con una barra verticale. Rendiamo quindi le righe scorrevoli. Eviteremo pure il paginone lunghissimo che fa’ “girare gli occhi”…

Non solo ma una tabella realizzata come segue permetterà a coloro che usano screen reader o altri “lettori di schermo”, di poter fruire della pagina alle stesse condizioni di un utente normodotato.

Vediamo come fare…

Continua la lettura di Diamo uno Scroll alle tabelle lunghe

Css e stampa (come stampare una pagina web)

Quando visitiamo un sito con dei contenuti interessanti, vogliamo leggere, con calma ed offline, quello che ci interessa. Spesso succede che, stampando una pagina, il contenuto viene tagliato sul lato destro. Ciò è dovuto al fatto che si portano in stampa contenuti “inutili” e la dimensione delle pagine web viene mantenuta “fissa”. Se abbiamo una pagina web con menu di navigazione sulla sinistra ed andiamo a stampare tale pagina, avremo in bella mostra il menu ma parte del contenuto, sicuramente, sarà stato eliminato dal processo di stampa. Come mai? Non è stato realizzato, parallelamente al foglio di stile per la presentazione della pagina a video, un CSS adatto per la stampa. In questo articolo vedremo come realizzarne uno, con tutto il suo codice, partendo da una pagina già vista nelle lezioni precedenti, ma che rende bene l’idea di quello che vogliamo ottenere.

Continua la lettura di Css e stampa (come stampare una pagina web)

Trasparenza coi css

Vediamo come possiamo applicare degli effetti di trasparenza ad elementi della pagina web. Possiamo rendere trasparenti foto, contenitori, testi etc…

Possiamo farlo senza javascript, tramite i normali css.

Per avere piena compatibilità coi vari browser si impostano tre attributi:

filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;

Internet Explorer si appoggia a Filter, che accetta intervalli tra 0 e 100.

I browser con motore di rendering basato su Gecko (come Firefox o Netscape) usano: -moz-opacity:0.3; e opacity:0.3; accettano valori numerici decimali, compresi tra 0 e 1.

Un esempio concreto di utilizzo: Continua la lettura di Trasparenza coi css

Come si centra un div orizzontalmente?

Vediamo il corretto procedimento per centrare orizzontalmente (la parte verticale non ci interessa) un oggetto float. Dobbiamo seguire pochi passi:

  • definire la larghezza del conenitore (va bene anche in percentuale)
  • inserire nel div da centrare questo css: “margin: 0 auto;” (o comunque fare in modo che i margini dx e sin siano automatici)
  • inserire nel box che contiene quello da centrare il css “text-align: center;” in quanto il povero IE non è in grado neanche di riconoscere i margini automatici

Continua la lettura di Come si centra un div orizzontalmente?