XHTML/CSS

Quando si crea un template per Drupal bisogna stare attenti a non sovrascrivere classi ed identificatori usati dal core e dai moduli, altrimenti si rischia di ottenere effetti indesiderati.

Ad esempio ho imparato a mie spese che non bisogna mai assegnare...

Devo aver caricato per sbaglio una vecchia versione del template del sito, ed ora non tutto funziona come dovrebbe. Sia la gallery che il selettore del tema grafico non funzionano a dovere. Nei prossimi giorni dovrò quindi ri-sistemare il sito. Probabilmente nei prossimi giorni www.finex.org sarà offline anche a causa del trasferimento su un nuovo server. Spero che la fase di transizione possa essere rapida.

Nello scorso articolo ho indicato un metodo per caricare un foglio di stile aggiuntivo in una pagina web utilizzando jQuery. Questa tecnica ha un difetto: nel momento in cui si ricarica la pagina, il foglio di stile non viene applicato nuovamente, e si rende quindi necessario ricaricarlo manualmente.

Possiamo però utilizzare dei cookie per memorizzare il nome del foglio di stile aggiuntivo e, durante il caricamento della pagina, ne verifichiamo l'esistenza ed il contenuto.

La libreria jQuery è molto versatile. Tra le numerose funzionalità, si trova anche la possibilità di caricare un foglio di stile programmando ad esempio un pulsante o un link.

Basta abusare ancora una volta della funzione $ per aggiungere il riferimento al nuovo file CSS:

Come dicevo qualche ora fa, nell'annuncio della nuova versione del sito, ho avuto qualche problema nel far funzionare tutto correttamente anche con Internet Explorer.

Oltre ai soliti noiosi problemi legati al mancato supporto del formato grafico PNG, al non riconoscimento di alcuni (molti) selettori CSS, e all'interpretazione errata del "box model", Internet Explorer fa un po' quel che gli pare anche con i JavaScript.

E' trascorso più di un mese da quando ho scelto di usare Drupal al posto di Wordpress ed ora ho finalmente realizzato un nuovo stile per FiNeX.org.

Le ultime grafiche erano un po' troppo banali e grezze: il caldo e la poca disponibilità di tempo non mi hanno per nulla aiutato.

Ora sono soddisfatto. Tra l'altro sono riuscito a creare un foglio di stile che funzioni su molti browser. Ho testato con successo il sito con i seguenti software:

In giro per il web ci sono numerosi documenti che spiegano come impostare il rollover delle immagini nelle pagine web. Si trovano metodi a volte anche molto complessi per gestire una cosa che in realtà è veramente banale. Questi sono i due metodi che preferisco.

Metodo con javascript

Si utilizzano gli eventi onmouse* dell'oggetto img per cambiare il parametro src dell'oggetto stesso:


onmouseover="this.src='img_over.jpg';"
onmousedown="this.src='img_down.jpg';"

Questo articolo l'ho scritto in inglese, me ne sono accorto quando ero arrivato circa a metà... non chiedetemi il perchè, perdonatemi i probabili errori di grammatica, ma non avevo voglia di riscrivere in italiano tutto quanto.

• DOM Introduction
• DOM basic manipulation

DOM Introduction

A first look to the DOM model

DOM means Document Object Model. It's a model of how XML and HTML are represented in a tree structure.
DOM is a platform neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

L'ispirazione sullo Zen Garden è stata trovata ed ho pure trovato qualcuno che mi da una mano per il sito Zamasband. Ora la grafica procede a gonfie vele (quasi). Devo scegliere che trama inserire come "sfondo" e come rendere il menu laterale di navigazione, probabilmente ci si potrebbero mettere dei bordi o qualcosa di simile.