[JS] Cambiare CSS in un attimo

Oggi vediamo come cambiare il foglio di stile di una pagina con qualche riga di JavaScript. Una fuzione del genere può essere utile in tutti i casi in cui dobbiamo avere più versioni grafiche dello stesso sito, come ad esempio uno stile a più contrasto oppure uno stile dove cambiamo il colore dominante.

La pagina contenente più stili dovrà avere tutti i css dichiarati, ovviamente dando priorità al foglio di stile predefinito che il browser dovrà applicare al caricamento della pagina. Per far ciò basta impostare in modo specifico l'attributo rel del tag link usato per caricare i CSS.

Questo sarà il CSS predefinito:

<link rel="stylesheet" href="html/style.css" type="text/css" title="Stile Chiaro">

Mentre questo sarà il CSS alternativo:

<link rel="alternate stylesheet" href="html/style_dark.css" type="text/css" title="Stile Scuro">

A questo punto già con Firefox siamo in grado di cambiare lo stile della pagina tramite Visualizza �?? Stile pagina. Vediamo adesso come farlo da JavaScript.

Per accedere ai figli di stile basta un po' di conoscenza di DOM, infatti basta leggere e scrivere la proprietà styleSheets dell'oggetto document.

css = document.styleSheets;

Il contenuto della variabile css sarà un array con gli oggetti dei fogli di stile. L'elemento numero 0 sarà il primo CSS dichiarato, mentre l'elemento 1 sarà il secondo CSS. Agendo sulle proprietà enable e disabled dell'oggetto contenuto dell'array, sarà possibile attivare e disabilitare ogni stile permettendo di cambiare tra uno stile e l'altro.

Esempio

Una funzione applicativa potrebbe essere la seguente:

function styleChange(){

        var ss = document.styleSheets;



        if(ss[1].disabled){

                ss[1].disabled = false;

                ss[0].disabled = true;

        }

        else if(ss[0].disabled)

        {

                ss[1].disabled = true;

                ss[0].disabled = false;

        }

}

Usare la proprietà CSS3 text-shadow

Con il supporto sempre crescente dei browser alla specifica CSS3 possiamo iniziare a sfruttarne alcune caratteristiche gustose. Una di queste è l'ombra del testo.

La proprietà text-shadow agisce solo sul testo (come del resto suggerisce il nome) e permette di avere il controllo sulle seguenti proprietà dell'ombra:

  • Asse X dello scostamento del testo (anche negativo)
  • Asse Y dello scostamento dal testo (anche negativo)
  • Diffusione dell'ombra
  • Colore

La sintassi è la seguente:

text-shadow: scostamento-x scostamento-y diffusione colore;


Il tutto si traduce in un pratico esempio: un testo nero in grassetto con una ombra in basso a destra di colore grigio. Il testo a sinistra è frutto della proprietà CSS interpretata dal proprio browser mentre il testo a destra è l'immagine di riferimento.

text-shadow: 2px 2px 2px #aaa;

Testo con ombra



Questa proprietà CSS3 è supportata da tutti i browser aventi il motore Webkit di versione abbastanza recente (quindi Safari 2 e 3 e Chrome), Firefox 3.5, e Opera 9.5. Se usate uno sei suddetti browser dovreste aver notato qualche chicca al template del blog, i link della barra laterale destra, i link della barra di navigazione e i titoli dei post.

Seguono adesso molti esempi della proprietà text-shadow per gli usi più disparati.

Continua a leggere »

Small tips: Rimuovere l'ultima revisione da Bazaar

Post imageSe usate il servizio di controllo di versione Bazaar per i vostri progetti vi sarà prima o poi capitato di voler rimuovere una revisione appena caricata sul server. Come fare?

Rimuovere la revisione locale digitando Y quando chiesto:

bzr uncommit

Applicare i cambiamenti sul server sovrascrivendo le revisioni successive:

bzr push --overwrite

Prima o poi una guida intera su Bazaar!

N.B.: Se si lavora in più persone allo stesso ramo di sviluppo occorre segnalare la rimozione della revisione. Infatti anche gli altri dovranno passare il parametro --overwrite a pull o merge. Grazie Andrea!

Scrivere bene codice PHP (e non solo)

Dovete sapere che scrivere codice corretto non basta, bisogna anche scriverlo bene! Vi è mai capitato di scrivere del codice e di rileggerlo dopo qualche mese? Con molta probabilità perderete un po' di tempo per capirlo e seguire il flusso del programma.

Commenti

Per ricordarsi la funzione di alcuni pezzi di codice sono necessari i commenti prima ogni blocco "critico" del nostro codice. Ma anche quest'ultimi vanno fatti bene!

// stampo la data corrente

echo date('r', time());

Ma non così:

echo date('r', time()); // stampo la data corrente

Il commento va quindi prima della istruzione o del blocco descritto. Immaginate una riga piuttosto lunga, nella peggiore delle ipotesi il commento sarò completamente nascosto e dovrete scorre in orizzontale il codice.

Continua a leggere »

[PHP] Stampare il contenuto di una variabile

Quante volte ci è capitato di voler sapere il contenuto di una variabile sopratutto quando è un array o una classe? Il PHP ci mette a disposizione una comoda funzione utile in queste situazioni di debugging, print_r.

bool print_r ( mixed $expression [, bool $return ] )


Normalmente per usare print_r basta solo il primo parametro di qualsiasi tipo. Essa stamperà quindi la struttura di quest'ultimo in un formato facilmente leggibile.

Vediamo un esempio con un array:

$var = array('elem1', 'elem2', 'elem3');

print_r($var);


Stamperà questo:

<pre>

Array

(

    [0] => elem1

    [1] => elem2

    [2] => elem3

)

</pre>


Se invece vogliamo catturare l'output basterà aggiungere il parametro $return ed impostarlo a TRUE.

$return = print_r($var, true);


Nel caso diamo in pasto a print_r un oggetto verranno estratti i membri statici della classe oggetto.

[PHP] Captcha testuale semplice semplice

I captcha sono quelle immagini con all'interno numeri e lettere, spesso deformate che dovete riscrivere in una casella di testo. Questi sistemi servono per bloccare lo spam e in generale chiunque usi sistemi automatici per registrare falsi utenti o inviare commenti. Il funzionamento è semplice ma efficace, mentre il nostro cervello riesce facilmente (non sempre...) a capire delle lettere anche se molto deformate, per un computer è praticamente impossibile. L'unico problema di questi captcha grafici è che talvolta tagliano completamente fuori le persone con problemi visivi e che usano lettori in grado di leggere le pagine web. Ovviamente una immagine non può essere letta da un pc!

Una variazione al tema dei captcha grafici è quello di porre una facile domanda all'utente come ad esempio chiedere di eseguire una somma.

L'implementazione che ho scelto per l'estrema facilità è quella di usare le sessioni con PHP per portarmi dietro i risultati alle somme proposte.

Innanzitutto avviamo una nuova sessione. Se questa è già presente avremo a portata di mano i dati della sessione in corso

session_start();

Continua a leggere »

CC BY-NC-SA 3.0 2004-2012 Daniele Napolitano — Per informazioni sulla licenza leggere le Note legali