http://blog.DoZarte.com


Archivio della Categoria 'Tutorial'

Come copiare testo in Wordpress

Martedì 15 Gennaio 2008

Dalla versione 2.1 di Wordpress sono stati aggiunti alcuni pulsanti che rendono più facile il passaggio di testo formattato da Word al nostro sito.
Per far apparire i pulsanti dell’editor avanzato basta cliccare sull’icona che sembra una piccola scacchiera colorata:

scrivere-1, Come copiare testo in Wordpress

Cliccando sull’icone- qui cerchiata in rosso - apparirà una nuova riga con dei nuovi pulsanti.
Quelli che a noi interessano maggiormente sono due: “incolla come testo puro” e “incolla da Word”.

scrivere-2, Come copiare testo in Wordpress

Il primo (quello con la lettera ‘T’) permette di incollare sul nostro editor un qualsiasi testo tralasciando però qualsiasi tipo di formattazione avesse questo in origine; il secondo (quella con la ‘W’) permette di mantenere un certo livello di formattazione, escludendo - per esempio - le informazioni su tipo e dimensione dei caratteri.

scrivere-3, Come copiare testo in Wordpress

Al cliccare su uno dei due pulsanti apparirà una finestra, dove potremo incollare il testo che poi verrà inserito nell’editor proprio quando cliccheremo su ‘inserisci’.

Come evidenziare i commenti dell’autore

Lunedì 14 Gennaio 2008

A volte i blogger rispondono ai navigatori che commentano i loro post, commentando di seguito i loro stessi articoli.
Spesso questi blogger hanno la necessità voglia di far risaltare i loro commenti su quelli dei normali visitatori, ma forse non sanno come fare.
…almeno, questo era un mio cruccio!

Io l’ho fatto in un modo semplicissimo…

(more…)

Disegnare grafici con Google charts

Mercoledì 2 Gennaio 2008

un grafico a torta tridimensionale

Dopo aver appena visto come creare grafici con Flash e diagrammi con Javascript, eccomi qui a ricordarmi di non aver mai parlato dell’ottimo - anche se forse un po’ più astruso - Google charts (charts=grafici).

Se avete la necessità di inserire un semplice grafico nella vostra pagina internet, ma anche se volete creare dei grafici di gran impatto visivo, magari anche collegati a database dinamici, Google charts può sicuramente esservi utile.

Il grafico a torta tridimensionale che vedete in apertura è creato con una semplicissima riga di codice HTML:

http://chart.apis.google.com/chart?cht=p3&
chd=s:Z923&
chs=400x180&
chl=Google|Charts|Disegna|Grafici&
chco=1B75DF,ff0000

…che per comodità di lettura ho mandato a capo ad ogni variabile inserita.

Come si usa?

I tipi di grafici che si possono creare sono i seguenti:

  • grafici lineari (a linee spezzate)
  • grafici a barre
  • grafici a torta
  • diagrammi di Eulero-Venn (insiemi)
  • diagrammi a dispersione (scatterplot)

(more…)

Come creare un fading incrociato di immagini in pagine html

Venerdì 21 Dicembre 2007

Un effetto come la dissolvenza incrociata tra immagini che in Flash risulta semplicissimo da creare, diventa un po’ meno ovvio quando si voglia riprodurlo in una pagina html.
Per fortuna c’è sempre qualcuno che ci pensa prima di noi!

Image Cross Fader Redux è una combinazione Javascript+CSS che fa proprio questo, ed implementarla in una pagina web è semplicissimo:

  1. richiamiamo i file .js e .css nei tag HEAD, come al solito;
  2. racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
  3. modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.

link: http://slayeroffice.com/code/imageCrossFade/xfade2.html

Posizionare elementi tramite CSS

Venerdì 14 Dicembre 2007

Position:absolute fa in modo che il nostro blocco si posizioni nella pagina “come se fluttuasse” (infatti non lascia traccia - o spazio - della sua posizione effettiva nella pagina/codice html); si possono usare le proprietà left, right, top, e bottom per il posizionamento nella pagina.

Position:relative posiziona il blocco in relazione alla posizione originale sulla pagina html, cioè viene spostato, usando sempre le stesse proprietà left, right, top, e bottom.
Questo però lascia traccia (uno spazio vuoto) della posizione originale.

Tramite float un box e il suo contenuto vengono spostati di lato, e lo spazio che prima occupavano viene riempito dal contenuto successivo.
Questo parametro può servire nella costruzione di layout a colonne multiple affiancate.

La proprietà clear indica il comportamento degli elementi seguenti, e può assumere valori left, right, both e none.