 |  |  |  |
Click para ver los videos.
REFERENCIAS:sandfantasy.com
Wallpapers (by ggarfield 1) |
Mi hermanito de la luna |
Siempre se dijo que esta es la era de las comunicaciones y la información. Es cierto ¿qué duda cabe? pero también es falso o por lo menos, mi definición personal para esas palabras es otra. Comunicarse implica escuchar y vivimos tiempos donde la gente habla más de lo que escucha. Informar bueno ... informar es decir la verdad y en todo caso, aclarar correctamente cuando sólo damos una opinión personal.
La paradoja de este mundo moderno es que la información sobra y la información falta. Y falta, porque los medios, pequeños y grandes hablan de lo que no saben y en ese hablar por hablar cometen el peor de los pecados, lastimar a otros.
Tal vez, por eso esta entrada de Palomas de Papel y esta otra de Gem@ Blog y tantas otras que muestran solidaridad y respeto por Maite, la mamá de Julen, un niño feliz, de 3 años con autismo.
La paradoja de este mundo moderno es que la información sobra y la información falta. Y falta, porque los medios, pequeños y grandes hablan de lo que no saben y en ese hablar por hablar cometen el peor de los pecados, lastimar a otros.
Tal vez, por eso esta entrada de Palomas de Papel y esta otra de Gem@ Blog y tantas otras que muestran solidaridad y respeto por Maite, la mamá de Julen, un niño feliz, de 3 años con autismo.
Y entonces, frente a ciertas barbaridades, Maite dice: "Es muy injusto que no solo nos encontremos y luchemos con las dificultades propias del síndrome sino también con el añadido de la ignorancia de los demás que desconociendo lo que es el autismo nos cierran puertas y nos ponen trabas." 
Y entonces, frente a la ignorancia, deberíamos detenernos por un minuto y ponernos a pensar en una frase tan sencilla como esa de Iguales pero diferentes porque en realidad, justamente, lo que nos iguala, son las diferencias.
Y entonces, frente a la ignorancia, deberíamos detenernos por un minuto y ponernos a pensar en una frase tan sencilla como esa de Iguales pero diferentes porque en realidad, justamente, lo que nos iguala, son las diferencias.
FlowPlayer: Reproductor de videos |
Una vez más me he puesto a tratar que funcione FlowPlayer en Blogger. Ya son varios los fracasos pero esta vez, algo logra verse ... era hora.
FlowPlayer es un reproductor de archivos multimedia, uno de los mejores y soporta muchos formatos, FLV, SWF, MP3, MP4, H.264, etc. No sólo es de los mejores por la cantidad de funciones que tiene sino también de los más flexibles en cuanto a sus posibilidades gráficas. A decir verdad, las opciones son tanta que es imposible enumerarlas pero la documentación disponible es muy completa y debemos remitirnos a ella para los detalles.
Pero (siempre hay un pero) también es de los más complicados de utilizar, o por lo menos de configurar, justamente por eso, porque tiene "demasiadas" posibilidades.
La característica principal y que lo hace distinto de otros es que para funcionar usa JavaScript por lo tanto, como mínimo, necesitamos dos archivos: flowplayer-3.1.0.js y flowplayer-3.0.5.swf. Pero, si, eventualmente, queremos personalizarlo más, requerimos un tercer archivo: flowplayer.controls-3.0.3.swf. El problema no es ese sino que todos ellos, deben estar en la misma carpeta del mismo servidor y eso no es tan fácil. Una alternativa posible es Fileden.
Todo el "paquete" y algunos demos, los descargamos en formato ZIP y, una vez que alojamos ambos archivos en un servidor propio, debemos agregar el script en la plantilla, justo antes de </head>:
FlowPlayer es un reproductor de archivos multimedia, uno de los mejores y soporta muchos formatos, FLV, SWF, MP3, MP4, H.264, etc. No sólo es de los mejores por la cantidad de funciones que tiene sino también de los más flexibles en cuanto a sus posibilidades gráficas. A decir verdad, las opciones son tanta que es imposible enumerarlas pero la documentación disponible es muy completa y debemos remitirnos a ella para los detalles.
Pero (siempre hay un pero) también es de los más complicados de utilizar, o por lo menos de configurar, justamente por eso, porque tiene "demasiadas" posibilidades.
La característica principal y que lo hace distinto de otros es que para funcionar usa JavaScript por lo tanto, como mínimo, necesitamos dos archivos: flowplayer-3.1.0.js y flowplayer-3.0.5.swf. Pero, si, eventualmente, queremos personalizarlo más, requerimos un tercer archivo: flowplayer.controls-3.0.3.swf. El problema no es ese sino que todos ellos, deben estar en la misma carpeta del mismo servidor y eso no es tan fácil. Una alternativa posible es Fileden.
Todo el "paquete" y algunos demos, los descargamos en formato ZIP y, una vez que alojamos ambos archivos en un servidor propio, debemos agregar el script en la plantilla, justo antes de </head>:
<script src="URL_flowplayer-3.1.0.min.js"></script>Ese es el único que debemos agregar a la plantilla pero, si es algo que vamos a utilizar seguido, también sería bueno definir la URL del reproductor como una variable ya que la vamos a estar "llamando" seguido así que, debajo de lo anterior, ponemos esto:
<script>reproFLOWPLAYER="URL_flowplayer-3.0.5.swf";</script>El tercer archivo no lo tenemos que cargar, es de uso interno y de allí la necesidad de que todos estén en el mismo lugar.
Para usar el reproductor tenemos diferentes alternativas y para cualquiera de ellas, debemos colocar el código correspondiente donde quisiéramos que se muestre. Por ejemplo, podemos hacerlo colocando un enlace:
Para usar el reproductor tenemos diferentes alternativas y para cualquiera de ellas, debemos colocar el código correspondiente donde quisiéramos que se muestre. Por ejemplo, podemos hacerlo colocando un enlace:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script>flowplayer("nombreUnico", reproFLOWPLAYER);</script>
donde:
href contiene la URL del video a reproducir
style lo usamos para establecer las dimensiones del reproductor y el resto de las propiedades son optativas.
href contiene la URL del video a reproducir
style lo usamos para establecer las dimensiones del reproductor y el resto de las propiedades son optativas.
Los desarrolladores recomiendan usar este modo ya que, si el video está en un enlace, un visitante que tenga JavaScript desactivado, podrá acceder a este de alguna otra forma. Sin embargo, no es el único método, también podríamos usar un DIV como contenedor:
<div style="margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </div> <script>flowplayer("nombreUnico", reproFLOWPLAYER, "URL_video"); </script>
El código es similar, salvo que la URL del video a reproducir se coloca como tercer parámetro del script.
Por último, también podemos insertarlo como lo haríamos con cualquier otro reproductor, utilizando la etiqueta OBJECT (más información):
Por último, también podemos insertarlo como lo haríamos con cualquier otro reproductor, utilizando la etiqueta OBJECT (más información):
<object width="300" height="200" data="URL_flowplayer-3.0.5.swf" type="application/x-shockwave-flash"> <param name="movie" value="URL_flowplayer-3.0.5.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip":"URL_video"}' /> </object>
Hasta aquí, lo "normal", si queremos personalizar las cosas, todo lo debemos hacer con JavaScript y allí está la dificultad para usarlo en Blogger. Algunas cosas las podemos colocar directamente, agregado un parámetro más. Por ejemplo:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip:{autoPlay:false,autoBuffering:true}});</script>
con autoPlay false el video no comenzará a reproducirse de forma automática (por defecto es true)
con autoBuffering true el video se irá cargando aunque no se reproduzca (por defecto es false)
Hay muchos más parámetros que podemos usar y todos se colocan del mismo modo, separados por una coma (ver detalles):
con autoBuffering true el video se irá cargando aunque no se reproduzca (por defecto es false)
Hay muchos más parámetros que podemos usar y todos se colocan del mismo modo, separados por una coma (ver detalles):
clip:{param1, param1, ..., paramN}Este no es un reproductor sencillo, se me ocurre que no está pensado para usar una vez cada tanto, la personalización es tan extrema que requiere tiempo para entenderla pero luego, si lo conseguimos, todo se hace más "sencillo".
Visualmente, podemos cambiarlo casi por completo, establecer colores, gradientes, botones, etc. Para eso hay una serie de instrucciones que podemos agregar de manera individual en cada reproductor o bien, establecer una serie de parámetros generales.
Por ejemplo, si agregamos lo siguiente en el head de nuestra plantilla (o en un archivo externo), estaremos definiendo una serie de parámetros generales y ya no será necesario cargarlos individualmente:
Visualmente, podemos cambiarlo casi por completo, establecer colores, gradientes, botones, etc. Para eso hay una serie de instrucciones que podemos agregar de manera individual en cada reproductor o bien, establecer una serie de parámetros generales.
Por ejemplo, si agregamos lo siguiente en el head de nuestra plantilla (o en un archivo externo), estaremos definiendo una serie de parámetros generales y ya no será necesario cargarlos individualmente:
<script type='text/javascript'>
//<![CDATA[
var conf = {
defaults: {
autoPlay: false,
autoBuffering: true
},
skins: { // creamos un skin
skinDEMO: { // le damos un nombre
// definimos colores
sliderGradient: 'none',
timeColor: '#5555555',
backgroundGradient: [0.6,0.3,0,0,0],
sliderColor: '#000000',
buttonOverColor: '#666666',
bufferGradient: 'high',
bufferColor: '#666666',
buttonColor: '#000000',
progressGradient: 'medium',
progressColor: '#999999',
durationColor: '#999999',
backgroundColor: '#000000',
borderRadius: '15px',
opacity:1.0,
// definimos qué botones serán visibles
play:true,
volume:true,
mute:true,
time:true,
stop:false,
playlist:false,
fullscreen:true,
scrubber: true,
// le damos una altura a la barra inferior
height: 30,
// y haremos que se oculte al reproducirlo
autoHide: 'always'
},
skinDEMO2: { // otra
............
},
skinDEMO3: { // y todas las que se nos ocurra
............
}
}
}
//]]>
</script>Allí, usamos defaults para inicializar esos parámetros generales y skins para "crear" diferentes modelos de reproductores.
Los aplicamos de este modo:
Los aplicamos de este modo:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip: conf.defaults, plugins: {controls: conf.skins.nombre}});</script>
con el parámetro clip: conf.defaults le decimos que use los datos genéricos
con el parámetro plugins: {controls: conf.skins.nombre} le decimos que ese reproductor tenga cierto aspecto
con el parámetro plugins: {controls: conf.skins.nombre} le decimos que ese reproductor tenga cierto aspecto
Thanks ... Your welcome |
Thanks for the feedback so far! De nada, usted se lo merece debería contestar uno a ciertos agradecmientos pero ... es Blogger Buzz el que (emocionado hasta las lágrimas) agradece las sugerencias enviadas a su maravilloso Product Ideas for Blogger ... 2,509 people have submitted 1,757 ideas and cast 63,478 votes.
Y quieren más pero ... ¿escuchan? Esta es la lista de algunas cosas sugeridas y que ellos consideran merecedoras de ser publicadas ... porque ya existen o son irrelevante.
Y quieren más pero ... ¿escuchan? Esta es la lista de algunas cosas sugeridas y que ellos consideran merecedoras de ser publicadas ... porque ya existen o son irrelevante.
- Importar blogs desde Wordpress: nos dicen que usemos Wordpress2Blogger.
- Feeds para etiquetas: ya existe y existieron siempre
- Feeds para comentarios: lo mismo
- ShareThis como widget: es un servicio externo, así que no tiene sentido
- Editar etiquetas de varios posts al mismo tiempo: siempre pudo hacerse
- Elegir Blog of Note por votaciones: no sé a quien demonios le interesa eso de los Blog of Note, casi es un chiste
Ahí se acabó la noticia. Faltaría agregar que ese foro cierra el 14 de mayo.
Supongo que estas otras no las publicaron porque algo de vergüenza, aún tienen:
Supongo que estas otras no las publicaron porque algo de vergüenza, aún tienen:
- Aumentar un 50% el salario de los desarrolladores de Blogger.
- Colocar estátuas de tan insignes personajes en todas las esquinas.
- Cantar alabanzas cada vez que ingresamos a Blogger.
- Repetir 10 veces al día "Blogger is the best" "Blogger is the best" "Blogger is the best"
- Babear asombrados ante cada uno de sus anuncios.
- No protestar más y decirles a todo que si.
- Hablar en inglés.
Por cierto:
- ¿De alojar archivos? Ni una palabra.
- ¿De empezar a colocar algunas de las opciones del editor que hace meses y meses que está en Blogger Draft? Ni una palabra.
- ¿De permitir la creación de páginas individuales? Ni una palabra.
- ¿De administrar los comentarios? Ni una palabra.
- ¿De administrar las imágenes? Ni una palabra.
- ¿De mejorar la estructura de las plantillas? Ni una palabra.
- ¿De agregar plantillas nuevas y jubilar las que ya existen? Ni una palabra.
- ¿De crear un sistema de ayuda completa? Ni una palabra.
Demasiadas ningunas palabras para mi gusto.
"No soy un fotógrafo, sólo creo imágenes" |
Efecto hover sobre las imágenes |
Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.
La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
<div class="imgteaser">
<a href="javascript:void(0);">
<img src="URL_imagen" />
<span class="more">» Leer Más</span>
<span class="desc">
<strong>EL TITULO</strong>
....... el texto a mostrar .......
</span>
</a>
</div>
La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:
<style type="text/css">
.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
overflow: hidden;
position: relative;
width:600px; /* establecemos el ancho total (imagen + marco) */
}
.imgteaser a {text-decoration: none;}
.imgteaser a:hover {cursor: pointer;}
.imgteaser a img { /* la imagen en si misma */
background-color: #456; /* el color del marco */
border: none;
margin: 0;
padding: 10px; /* le ponemos un marco alrededor */
width: 580px; /* forzamos el tamaño de la imagen */
}
.imgteaser a .more { /* es el área traslúcida de LEER MAS */
background-color: #123; /* color de fondo */
/* las propiedades del texto */
color: #FFF;
font-size: 14px;
padding: 5px 10px;
/* transparencia */
filter:alpha(opacity=65); /* IE genérico */
opacity:.65; /* Firefox */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
/* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
right: 10px;
}
.imgteaser a .desc {display: none;}
.imgteaser a:hover .more {visibility: hidden;}
.imgteaser a:hover .desc { /* es el texto del caption en si mismo */
background-color:#345; /* color de fondo */
display: block;
margin: 0;
width: 580px; /* ocupará el mismo ancho de la imagen */
/* las propiedades del texto */
color: #FFF;
font-size: 12px;
padding: 10px;
/* transparencia */
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
/* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
left: 10px;
}
.imgteaser a:hover .desc strong { /* el texto LEER MAS */
display: block;
font-size: 14px;
line-height: 2em;
}
</style>
REFERENCIAS:The Art of Hand Coding
