incolonnare il testo

In questo caso la compatibilità non è supportata su IE, che continuerà a visualizzare il testo ignorando i selettori impiegati. Per gli altri browser è necessario utilizzare i suffissi proprietari -moz e -webkit

Le proprietà utilizzate sono:



column-width --> accetta sia px che em, e imposta la larghezza minima della colonna. Il testo verrà suddiviso in N colonne a seconda delle dimensioni che assume il browser

column-count--> metodo alternativo per stabilire il numero obbligatorio di colonne in cui suddividere il testo

column-gap--> è il margine fra una colonna e l'altra, espresso in em o px

column-rule--> divisore grafico, simile allo stile che è possibile dare a un bordo




questo lo stile applicato allo testo di cui sotto (ovviamente vedrete la divisione in colonna solo se c'è il supporto da parte del browser)


.incolonna1{
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;


-moz-column-gap:5em;
-webkit-column-gap:5em;
column-gap:5em;

-moz-column-rule:0.3em dotted #ccc;
-webkit-column-rule:0.3em dotted #ccc;
column-rule:0.3em dotted #ccc;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper nibh sed ipsum malesuada ac molestie ante fermentum. Suspendisse suscipit libero a elit euismod ullamcorper. Nam accumsan eros arcu, eu vulputate lacus. Mauris quis vulputate nisi. Nunc libero turpis, tincidunt nec consequat sit amet, mattis in nibh. Aliquam erat volutpat. Nulla sem quam, laoreet a fermentum imperdiet

Continua...

word wrap e text overflow

La proprietà word-wrap è supportata da tutti i principali browser e accetta i valori "normal" - ovvero il valore di default- e il valore "break-word".
Essa è indicata per mandare a capo il testo quando una parola troppo lunga può andare oltre la larghezza dell'elemento che la contiene.
Nell'esempio sottostante, il testo viene mandato a capo arbitrariamente senza nè andare oltre nè modificare la larghezza del contenitore.



CODICE:
< style >
div.tornaACapo{border:3px solid rgb(200,200,180);
width:300px;
word-wrap:break-word;
}
< / style >

LoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaierooo

Un'altra possibilità è data dalla proprità "text-overflow", usata per inserire i puntini di sospensione e spezzare il testo non appena esso raggiunge la larghezza massima data al div, al quale occorre settare la proprietà overflow su "hidden"



CODICE:
< style >
div.ellipsis{border:3px solid rgb(200,200,180);
width:300px;
overflow:hidden;
white-space:nowrap;
-ms-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
text-overflow:ellipsis;
}
< / style >

LoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaierooo

Continua...

Problemi con ie e line-height

Se IE7 e credo anche 6, vi taglia testo posizionato ad esempio in un link dentro a una lista, una possibile soluzione è quella di posizionare il link in modo relativo rispetto all'elemento lista

#pippo ul li a{ position:relative; }
Continua...

Rinominare estensione file via dos

mi è capitato su di un sito di parecchie pagine tutte html, di doverne cambiare in blocco l'estensione in .php

Ho trovato questa soluzione comoda via DOS:

si apre il pannello del cmd (start --> "esegui")

si naviga fino a raggiungere ogni singola cartella contenente file da rinominare

Ricordo per i niubbi come me alcuni comandi:

- Nome lettera seguita da ":" esempio D: cambia directory
- cd .. torna su di un livello
- cd nome directory entro nella directory

una volta dentro scrivere il comando: ren *.html *.php

per cambiare l'estensione.

Ed è fatta!

:-)
Continua...

Serializzare una form in JSON

Riporto link a un paio di siti che trattano sull'argomento. La serializzazione è molto utile soprattutto quando c'è l'esigenza di estrarre i dati da campi dinamici su form con fieldset clonabili, quindi non predeterminabili a priori.

L'accortezza, oltre a caricare il plugin ovviamente, è quella di valorizzare l'attributo name nei vari campi.

http://css-tricks.com/snippets/jquery/serialize-form-to-json/

http://code.google.com/p/form2js/
Continua...

Il video nel web con html5

L'argomento è di grande interesse, perchè con l'utilizzo di html5 e css3 si può fare a meno di flash per riprodurre video nelle pagine web.

E per i browser che non danno supporto, esempio ie6,7,8 si può sempre utilizzare il flash player... !






Come? Semplice, http://videojs.com/ è la soluzione.

In pratica, siccome non esiste una singola combinazione di container video e codecs che siano compatibili con tutti i browser che diano o meno supporto ad html5, per ottenere la massima compatibilità, si vanno a creare 3 varianti di video:

Un file WebM (codificato VP8 + Vorbis), leggibile da chrome 6+ e opera 10.6+
un file mp4, codifica H.264 e AAC per l'audio, per safari 3+ e chrome 5
Un file ogg con codifica Thoera e Vorbis per l'audio, per firefox 3.5+

il file mp4può essere usato da flashplayer 10 per i browser non compatibili, altrimenti, si può sempre creare un 4° file in formato flv da passare al flash player

Sono previste inoltre altre funzionalità, come il fullscreen e lo skinning del player.

Per maggiori info su formati video, codecs, supporto dei browser, rimando a questa interessantissima guida ( http://diveintohtml5.org/video.html ) , che mi ha chiarito alcuni dubbi quando dall'esempio fornito da videojs sono andato a convertire un mio video. Nell'articolo fra l'altro, si citano anche alcuni tool free per eseguire le conversioni, come
Miro video converter ( http://mirovideoconverter.com )

o l'estensione FIREFOGG per firefox ( http://firefogg.org/ )


Alcuni chiarimenti sui formati video e il supporto dei browser

- Come detto sopra la tecnica è quella di creare 3 tipologie di video + un eventuale flv se non si vuol passare al flash player un file mp4 con codifica H.264 e AAC per l'audio.

- Quando si parla di Container video, facendo riferimento al file video vero e proprio, si deve pensare ad esso come potrebbe essere un file zip, ovvero un contenitore di una o più tracce video, e di relative tracce audio. Le tracce audio sono relazionate a quelle video attraverso dei marcatori, che consentono la sincronia tra l'audio e il video appunto. La riproduzione del video è un flusso o stream della combinazione di tracce audio e video contenute nel file.

Facendo alcuni esempi:

un file .mp4 ha codifica video H.264 e audio AAC
un file .ogv ha codifica video Theora e audio Vorbis

etc...

I browser possono dare nativamente supporto a uno o più formati video, oppure, al flash player che fungerà da player video, garantendo una coperura praticamente globale.

A livello di codice, HTML5 da sostanzialmente due possibilità:

1 - se abbiamo un solo video da inserire possiamo falo direttamente nel tag < video > , es: < video src= " pippo.mp4 " > < /video >

2 - se ci sono più video, possimao inserire, nidifcati dentro a una coppia di tag < video > , dei tag < source >

esempio:

< video width="320" height="240" >
< source src="pippo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src="pippo.webm" type='video/webm; codecs="vp8, vorbis"' >
< source src="pippo.ogv" type='video/ogg; codecs="theora, vorbis"' >
< /video >

il tag video può avere degli attributi:

- width
- height
- controls //per abilitare i controlli
- preload //per caricare nel buffer la quantità necessaria a far partire il video
- autoplay
- poster // url di una immagine segnaposto

// da notare che se uno dei vari video linkati nei tag source avessero misure inferiori, essi non verrebbero forzati alle misure height e width cvomke avvien ad esempio con i tag img, bensì centrati rispetto a quelle misure

come si nota dal codice dei tag source, anch'essi hanno degli attributi oltre allìsrc, ovvero:

- type // informazioni sul container o formato del video es 'video/webm'
-codecs //sono il video e l'audio codecs, esempio "theora, vorbis"

E' importante specificare bene le combinazioni audio video e formato per ogni source, altrimenti il rischio che il video non funzioni c'è.

Di fornte a una serie di tag source, il browser si comporta scartando quelli che non riconosce come riproducibili, e riproduicendo d'altro canto il primo uitile. Ecco a maggior ragione l'importanza di specificare il type e il codec, altrimenti verrà eseguito il tentativo di riprodurli tutti a uno a uno fino a quello "giusto".

Per finire, ma non meno importante, dobbiamo essere certi di aver inserito sul server dove si trovano i file video, i MIME TYPE. Specificarlo infatto solo nei tag source non è sufficiente. Questa operazione serve per inserireil MIME appropriato nel content-type dell'header del DOM.

Nei server APACHE lo si può fare nell'httpd.conf o via .htaccess. In questo ultimo caso, il file va inserito nella directory dove si trovano i file video, e si deve usare la direttiva addType:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm





Continua...

Tools per aprire file odt

Riporto link a post con 2/3 indicazioni utili per aprire file odt

http://www.yourlifeupdated.it/2010/06/guida-aprire-file-odt-openoffice-con-word-e-microsoft-office.html
Continua...

Eliminare bordo nero su png a 24 bit con explorer

Una delle cose più fastidiose, lasciamo pure perdere il vetusto explorer 6 (pare che ci sia ancora un 10 % circa di persone che godono a usarlo...), con explorer 7 e 8, è quel maledetto bordo nero che viene visualizzato quando si fanno animazioni con png a 24 bit su canale alfa, trasparenti.

Girando un bel pò in rete, si evince che non è un formato propriamente supportato, si dovrebbe utilizzare png a 8 bit, ma sappiamo bene che ci può essere anche molta differenza sulla resa dei bordi dell'immagine.

Cosa fare allora?

Ho appena finito di provare una soluzione che mi permette di utilizzare il cycle plugin di jquery con immagini png a 24 bit che scorrono.



http://code.google.com/p/jquery-utils/source/browse/trunk/src/jquery.ddbelated.js?r=615

Questa invece una pagina di esempio che applica lo script appewna linkato:
http://kylehouston.com/testing/png/index.html

Vediamone il sorgente e cerchiamo di capire come funziona.

1 - carichiamo jquery e nella fattispecie il plugin cycle
2 - il div che contiene le immagini da animare viene settato con il selettore background:none e la direttiva !important

#slides div{background: none !important;}

3 - le immagini sono formattate a livello sempre di css come segue:

#slides img.slide-tg-hd{
background: transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}

4 - nella prova che ho fatto io, e perchè l'ho letto in rete su altri siti, ho nidificato le immagini dentro a una coppia di div ciascxuna, in modo che quello che si muove, pert explorer, è il div, e non direttasmente l'immagine che è in esso contenuta

5 - si scarica il plugin dd_belated sopra linkato

6 - in fondo al dom prima della chiusura del body si inserisce:

< !--[if lt IE 7 ] >
< script src="js/dd_belated.js">< /script >
< script > DD_belatedPNG.fix('img, .png'); < /script >
< ![endif]-- >



... e funziona! il bordo nero che si vede durante le transizioni è sparito!








Continua...

Skinning delle form con css

Ecco una guida su come ottenere buoni risultati con il solo uso dei css

http://www.onextrapixel.com/2009/08/25/how-to-use-pure-css-to-style-web-form-dynamically-plus-12-awesome-javascript-plugins/
Continua...

Un semplice sistema di navigazione a tab con jquery

Ci sono molti plugin in rete che consentono di fare molte cose riguardo alla navigazione a tab, ma sono a volte anche sovradimensionati rispetto all'obiettivo finale. Pensate ad esempio a un sito dove già si stanno usando plugin di vario tipo per fare menu a tendina, sliding effects di immagini, tooltips, etc... Seppur pensato con lo sforzo di ottimizzare le risorse, utilizzare sempre e comunque svariati kb di plugin per fare operazioni semplici, è deletereo!

In questo blog si descrive una soluzione molto semplice per navigare a tab!:

http://trevordavis.net/blog/jquery-tabbed-navigation/
Continua...