Archivi tag: xhtml

Gestire l’inclusione di file con Ajax

Css e (x)Html, , , , , ,

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)

Css e (x)Html, , , , , , , , ,

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…

Cos’è un feed RSS e come si struttura

Css e (x)Html, , , , , ,

Vediamo come creare un file XML che possa essere letto da un interprete RSS.

Un file RSS (Really Simple Syndacation) è un file xml che segue delle precise regole di costruzione e viene utilizzato per condividere delle informazioni su internet.

Un file, affinchè sia valido, deve iniziare specificando quale versione del file rss stiamo usando:

<rss version="0.92">

Poi metteremo tutte le nostre informazioni dentro i tag Channel in questo modo:

<channel>
... ... contenuto rss ... ...
</channel>

Qui dentro andremo ad inserire le informazioni vere e proprie suddividendole in blocchi di tag che indicano ed identificano la provenienza di tali contenuti. Avremo:

  • <title>qui il titolo del documento rss</title>
  • <description>qui la descrizione del documento <![CDATA[scriverela qui]]></description>
  • <link>qui il sito di provenienza</link>
  • <language>qui la lingua</language>
  • <copyright>qui il copyright</copyright>
  • <managingEditor>qui il responsabile delle informazioni</managingEditor>

Ogni nuova notizia è un item ed avrà bisogno di essere inizializzata in questo modo:

<item>
... ... ...
</item>

Facciamo un esempio intero e concreto di quanto detto:

<rss version="2.0">
<channel>
<title>ricmanx - home</title>
<description>Un blog del cavolo</description>
<link>http://www.ricmanx.com/blog</link>
<language>it</language>
<copyright>ricmanx 2008</copyright>
<managingEditor>un_indirizzo_email@ricmanx.com</managingEditor>
<item>
  <title>News nr 3 dal sito</title>
  <description><![CDATA[descrizione qui ... anche tag html ...]]></description>
  <link>http://www.ricmanx.com/blog/qualcosa</link>
  <author>ricmanx</author>
  <category>xhtml e php</category>
  <pubDate>19/01/2009</pubDate>
</item>
<item>
  <title>News nr 2 dal sito</title>
  <description><![CDATA[descrizione qui ... anche tag html ...]]></description>
  <link>http://www.ricmanx.com/blog/qualcosa</link>
  <author>ricmanx</author>
  <category>xhtml e php</category>
  <pubDate>08/01/2009</pubDate>
</item>
</channel>
</rss>

Volendo il file rss può essere validato esattamente come si fa per il codice xhtml. Ad esempio da siti come questi:

http://validator.w3.org/feed/
http://feedvalidator.org/

Centrare verticalmente un elemento (div) ad altezza non conosciuta

Css e (x)Html, , , , , , , , , , , ,

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

Css e (x)Html, , , , , , , , , , , , , , , , ,

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 →

Inserire una musica di fondo nel sito

Css e (x)Html, , , , , , , , , , , , ,

Esiste più di una soluzione: puoi fare coi frame, con un popup, in flash e ultimamente si può anche con Ajax.

L’attributo bgsound è proprietario di IE e adesso è deprecato non si usa in xhtml e nei doctype Strict.

Quando si inserisce la musica di fondo nel sito bisogna sempre pensare che chi apre il sito:

  • può non gradire la musica
  • può avere le casse spente e/o non averne bisogno (inutile spreco di banda)
  • abbia già della musica in esecuzione (magari collegato allo stereo di casa)
  • mandarti a quel paese perchè lo stai forzando
  • inizi a pensare che il computer sia posseduto dal demonio

Vediamo un pochino più in dettaglio le soluzioni (scrivo più dettagliate quelle più legate alla nostra sezione del forum.

Continua la lettura di Inserire una musica di fondo nel sito →

Xhtml 1.1 implica siti con semantica e css corretti

Css e (x)Html, , , , , , , , , , , , , ,

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…

Css e stampa (come stampare una pagina web)

Css e (x)Html, , , , , , , ,

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

Css e (x)Html, , , , , , , , , , ,

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?

Css e (x)Html, , , , , , , , , ,

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? →