Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Murmullos de Halloween

31/10/2011
Wikipedia
En esta ocasión no explicaré cómo funciona este código JavaScript. Ni siquiera os contaré qué es lo que hace. Tendréis que hacer como Neo y comprender el código, aunque también puede ser que antes de lograrlo lo oigáis.

Lo siento, pero hoy estamos así de enigmáticos ;)

<style type="text/css">.musica {height:0;width:0;}</style>
<script type="text/javascript">
var sonidos = [
'https://sites.google.com/site/oloblogger/ficheros/Aullido1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Aullido2.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Bach1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Campanas1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Canto-Nina1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Fantasma1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Fantasma2.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Grito1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Grito2.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Monstruo1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Risa-Aullido1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Risa1.mp3',
'https://sites.google.com/site/oloblogger/ficheros/Risa2.mp3',
];

for(var i=0; i<sonidos.length; i++){
var reproductores = '<embed id="sonido'+i+'" class="musica" src="'+sonidos[i]+'" type="audio/mpeg" autoplay="false" enablejavascript="true"></embed>';
document.write(reproductores);
}

function muestraInformacion(elEvento) {
var evento = elEvento || window.event;
var coordenadaY = evento.clientY;
if (coordenadaY%150==0){reproducir();}
}

document.onmousemove = muestraInformacion;

function reproducir() {
var aleatorio = Math.random()*(sonidos.length);
aleatorio = Math.floor(aleatorio);
aleatorio = 'sonido'+aleatorio;
var reproduciendo = document.getElementById(aleatorio);
reproduciendo.Play();
}

Opcionalmente podéis añadirle esto:
</script>
<a href="javascript:reproducir();">HALLOWEEN</a>


Nuestro agradecimiento a Ciudad Blogger por facilitarnos los ficheros .mp3. El Potro los incluyó en otro sistema similar pero de funcionamiento automático.


Nuevo interfaz de Blogger. Cargar plantillas pre-diseñadas.

29/10/2011
Aunque están casi todas las herramientas a la vista, con la nueva interfaz a algunos nos cuesta encontrar ciertas cosas que antes localizábamos en segundos. Es normal, son los daños colaterales que tienen todos los cambios aunque sean para mejor.

Y no quiero decir que en este caso sea así, pues personalmente todavía no he tenido oportunidad de trabajar mucho con el nuevo escritorio. El motivo es que algo tiene mi plantilla (seguro que algún script chapucero), que provoca que al ir precisamente al apartado Plantilla, la interfaz se vuelva loca y se quede colgada con un símbolo de carga permanente.

Así que si un día veis un cambio urgente y radical en el aspecto de este sitio, ya sabéis que es porque Blogger hizo obligatorio el uso del nuevo escritorio y servidor no tuvo tiempo o ganas de ponerse a buscar cual es el origen de ese problema que acabo de comentar.


Pero a lo que vamos, que hoy es muy breve. Si queréis cargar una plantilla suministrada por un tercero, como por ejemplo las que podéis encontrar en Plantillas de Blogger, BTemplates, Plantillas para Blogger o las de Blog and Web, entre otros muchos, lo que hay que hacer en primer lugar es descargar el fichero con extensión .xml que nos proporcionarán.

Luego accedemos al escritorio y una vez allí, abrimos el desplegable de opciones del blog que queréis modificar. Pinchando en Plantilla vamos al sitio que nos interesa.


Ahí es justo dónde podemos encontrar, juntas en el mismo botón, las utilidades tanto para Crear una copia de seguridad, como para restablecerla. Esa segunda parte (Restablecer) es la que nos servirá precisamente para instalar cualquier plantilla pre-diseñada.


Hubiera sido más fácil que pusieran en el rótulo "Instalar nueva plantilla" o algo así, pero lo cierto es que es lo mismo restaurar una copia de seguridad que cargar una plantilla nueva. En ambos casos, lo único que hacemos es subir un fichero .xml con los datos de una plantilla y es indiferente que sea la misma que teníamos u otra distinta..

Una vez que nos sale la siguiente ventana emergente, ya sólo nos queda Seleccionar archivo localizando el anteriormente descargado en nuestro disco duro y por último, pinchar en el botón Subir para hacer literalmente lo que indica ese rótulo.


Fácil ¿verdad? Y bueno, ya hemos visto también de paso desde dónde poder hacer una copia de seguridad. Sí, una de esas de las que siempre se nos olvida hacer.


Cambiar el aspecto del puntero. Propiedad CURSOR.

27/10/2011
La propiedad CSS CURSOR es la que controla el aspecto del puntero. Por defecto, el valor de esta propiedad es auto lo que hace que el puntero cambie según el contexto y el tipo de elemento sobre el que se sitúa.

Las formas que estamos más acostumbrados a ver son una flecha (default), una línea vertical para el texto marcable (text) y una mano para los enlaces (hand), pero hay muchos más valores para esta propiedad.

La forma de declarar el estilo del puntero es la misma que la de cualquier otra propiedad CSS, por lo que se puede hacer o en la parte de estilo o bien directamente en la parte HTML.

El primero de estos ejemplos sería para la hoja de estilo y afectaría a todos los elementos que tengan la etiqueta de párrafo (p). El siguiente muestra cómo incluirlo directamente en el HTML y afectaría sólo al párrafo al que se le ha añadido la etiqueta style:

p {cursor: help;}

<p style='cursor:help;'>Texto del párrafo</p>

De igual manera que hemos hecho con el tag para párrafos, podemos cambiar el cursor sólo en una parte del blog, siempre que este esté bajo determinada clase o id:

.post {cursor: help;}
...
<div class="post">Al pasar por encima de este texto, el puntero se verá como un signo de interrogación.</div>

Al pasar por encima de este texto, el puntero se verá como un signo de interrogación.


Estos son los estilos disponibles, aunque muchos sólo son visibles en determinadas circunstancias. Pasando el puntero por encima de los nombres de los valores de esta tabla sombreados en gris, podréis visualizar el aspecto de cada uno.


ValorUtilidad y apariencia
defaultCursor por defecto que suele ser una flecha.
autoEl navegador elige el puntero en función del contexto
[URL]Permite usar un cursor personalizado. La sintaxis es cursor: url(URL_IMAGEN); Si se indican varias direcciones separadas por comas, se usará la que sea funcional, empezando por la izquierda. Conveniente añadir un auto como última opción.
pointerElemento activo seleccionable, como por ejemplo un enlace. Normalmente una mano.
moveIndica que el elemento se puede mover. Una cruz con flechas en las cuatro puntas.
textTexto seleccionable. Normalemente una barra vertical con pequeñas barras en los extremos con forma de I.
waitUn reloj de arena que indica que el usuario debe esperar porque alguna aplicación está a medias o el programa está ocupado.
helpIndica que hay ayuda disponible para el elemento. Usualmente es un signo de interrogación.
handPrácticamente igual que pointer, también se visualiza con una mano.
no-dropSe usa para indicar que un objeto arrastrado no se puede soltar en el lugar dónde este icono aparece. Una señal de prohibición.
not-allowedLa acción solicitada no se puede realizar. También se suele usar un círculo con una barra diagonal atravesándolo.
crosshairUn signo más o una cruz para resaltar un elemento.
vertical-textTexto vertical seleccionable. Una barra horizontal.
aliasIndica un marcador, enlace o alias a otro elemento y tiene el aspecto de una flecha con otra pequeña flecha curva sobre ella.


Para completar la lista, estos otros valores menos usuales:

ValorUtilidad y apariencia
inheritEl elemento hereda el valor de esta propiedad que tuviera el elemento padre.
all-scrollCruz con flechas en todas las puntas que se usa para indicar que el contenido puede moverse en cualquier dirección.
col-resizeSímbolo de redimensión horizontal de una columna. Barra vertical doble con dos flechas en sentidos opuestos.
row-resizeSímbolo de redimensión vertical de una fila. Barra horizontal doble con dos flechas en sentidos opuestos.
n-resizeDiversos valores que se usan para indicar cuando una caja puede ser redimensionada y en qué dirección. Los valores usan el sistema de puntos cardinales en inglés (N, E, S, W) así como los correspondientes intermedios (NE, SE, NW, SW).
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
progressAlguna aplicación sigue cargando pero no afecta a la interacción con la página. Una flecha con un pequeño reloj de arena junto a ellas.
cellPara marcar celdas que pueden ser seleccionadas. Representado por una cruz con los brazos anchos.
copyIndica que el contenido seleccionado puede ser copiado. Una flecha con un signo más dentro.
count-downUsado para indicar una operación de cuenta atrás de un programa.
count-upUsado para indicar una operación de cuenta adelante de un programa.
count-up-downUsado para indicar que un programa está haciendo operaciones de cuenta atrás y adelante en sucesión.
grabUsado para indicar que el contenido es arrastrable. A menudo una mano abierta.
grabbingUsado para indicar que el contenido está siendo arrastrado. A menudo es una mano cerrada.
spinningUsado para indicar que hay un proceso en curso del programa. Algo diferente del valor “wait” — wait debería indicar que el usuario no podrá interactuar con el programa mientras el cursor esté en ese estado mientras spinning indica que el usuario todavía puede seguir interactuando con el programa.


Las vistas dinámicas de Blogger ahora personalizables

26/10/2011
Desde hace casi siete meses se puede acceder a las distintas vistas dinámicas de un blog Blogger de manera indirecta y desde hace aproximadamente un mes, se habilitó la posibilidad de usarlas como plantillas en lugar de las habituales (clásicas, de diseño y nuevo diseñador).

La novedad publicada hace unas horas en Blogger Buzz (versión en inglés) es que desde ya, se pueden personalizar algunos elementos de este nuevo formato.

Para ello hay que acceder al Escritorio, seleccionar Plantilla, elegir (o estar usando ya) una de las siete vistas posibles y entrar en Personalizar. Con esto podremos utilizar el nuevo diseñador de la misma manera que en las plantillas normales.


De momento no hay mucha cosa, pero es lógico teniendo en cuenta que el formato es bastante cerrado. No obstante podemos cambiar el fondo, las fuentes y los colores. Y quizás lo más importante, agregar una imagen de cabecera que identifique del todo nuestro espacio.


En la noticia también se informa de que está previsto habilitar la inclusión de gadgets, así que aunque eso supondría tener que dejar de jugar con los códigos, lo mismo un día me decido a cambiar a una de estas plantillas. Las ventajas de rapidez, navegabilidad y adaptabilidad a los distintos tipos de terminales. parecen importantes razones para hacerlo. Unos 500.000 blogs ya las utilizan.


Blur Menu. Para practicar transiciones CSS3

25/10/2011
En Tympanus hay varios tutoriales interesantes, pero el que hoy ha llamado mi atención ha sido uno sobre una serie de menús con efecto blur (que más o menos es lo mismo que decir borroso o desenfocado), en los que las transiciones CSS3 tienen un especial protagonismo... sin olvidar las transformaciones.

En esta página tenéis una serie de ejemplos y esta otra, el código para conseguir cada uno de esos menús.

Y como con este tipo de cosas es mejor una imagen que mil palabras, a continuación tres de los allí ofrecidos y el código correspondiente. Hay que tener en cuenta que ambas propiedades funcionan correctamente en Chrome y Safari, que en Firefox no se aprecian las transiciones y que en Explorer no funciona ninguna a menos que tengas la versión 9.














Sonido al pasar el puntero por encima de una imagen

20/10/2011
Este sistema hecho con JavaScript está desarrollado -a petición de un lector del blog- para añadir un efecto de sonido a una imagen, pero también se puede utilizar para reproducir música a demanda con un reproductor "invisible".

Lo primero de todo es conseguir un alojamiento para audio que admita el hotlink, o lo que es lo mismo, que nos permita tirar directamente del alojamiento para reproducir online y no sólo en modo descarga.

Servidor ha hecho las pruebas con Kiwi6 y parece que funciona bastante bien, con la ventaja de que ni siquiera es necesario registrarse. El que haya leído nuestro anterior post, podrá comprobar que últimamente nos ha dado por la Actinidia Deliciosa, pero es que somos así de dulces :)

El bloque principal lo he redactado de forma que se pueda poner como simple gadget (tipo HTML/JavaScript) en la barra lateral, ya que como os he anticipado, no habrá nada visible para el usuario. Veréis que no tiene mucha ciencia y que, secuencialmente, sólo se trata de lo siguiente:
  • un estilo para que el reproductor tenga tamaño cero y no se vea
  • una variable (sonido) para incluir en ella la dirección del sonido a reproducir
  • otra variable (audio) que contiene las instrucciones necesarias para embeber un reproductor estándar y unos parámetros para que no se reproduzca si no pulsamos antes en algún sitio (autoplay) y para que sea controlable desde JavaScript (enablejavascript)
  • la "impresión" en la página del reproductor para que quede cargado desde el principio
  • una función para comenzar a reproducir el sonido (reproducirmusica)

<style type="text/css">
#musica {height:0;width:0;}
</style>
<script type="text/javascript">
var sonido = 'http://k003.kiwi6.com/hotlink/5b6r3mpa5k/coche.mp3';

var audio ='<embed id="musica" src="'+sonido+'" autoplay="false" type="audio/mpeg" enablejavascript="true"></embed>';
document.write(audio);

function reproducirmusica() {
var tocando = document.getElementById('musica');
tocando.Play();
}
</script>

Con esto instalado ya podemos activar ese sonido dónde queramos, siendo opción de vuestras necesidades si se hace al pasar el puntero por encima del elemento o si preferís que sea necesario hacer click.

En el primer caso, este sería el tipo de enlace que habría que montar englobando la imagen o lo que sea. Aquí hemos puesto sólo la palabra PLAY, pero justo después podréis ver el ejemplo que hemos hecho con una imagen cambiando esa palabra por el correspondiente <img src="...:

<a href='javascript:void(0);' onmouseover="javascript:reproducirmusica();">PLAY</a>



En esta imagen basta con pasar el puntero para oir el efecto



Para que sea necesario hacer click para la reproducción, el código iría de esta otra manera:

<a href='javascript:reproducirmusica();'>PLAY</a>

En esta imagen tienes que hacer click para oir el efecto

Al cargar la página con este script, puede que os salga un aviso de que se está intentando ejecutar un plugin y que tenéis que dar vuestro permiso, pero sólo se trata del reproductor por defecto del navegador, así que podéis aceptar su uso sin problemas.

Y no he sido muy afortunado con la elección del sonido del ejemplo, porque cuando parece que ha terminado, todavía queda un poco de pista a muy bajo volumen. Así que si le dais muy seguido y os parece que no funciona, no es por eso, es porque todavía está reproduciendo el final del anterior fichero. Vamos, que el coche no ha terminado de pasar...


Crea un timeline de tu blog con Timekiwi

18/10/2011
Cuando accedí a este servicio leí muy rápido su nombre y en un principio pensé que su apellido era Wiki. Pero no; es Kiwi. Exactamente, Timekiwi.

Timeline vertical de Singenio en Tumblr (Ver)
Lo de la fruta no sé que origen tiene -quizás sus creadores sean neozelandeses- pero lo de Time ya da una pista de lo que hace: crear un timeline a partir de un blog.

De un blog y también de microblogs, ya que actualmente soporta Twitter, Tumblr, Posterous, Wordpress y ya es visible en el menú de opciones que pronto se podrán incluir cuentas de Instagram.

Hay una versión gratuita para uso personal que es con la que he construido los ejemplos de esta entrada y otra para empresas a partir de 10$ al mes.

En la opción probada se puede escoger entre un formato vertical y otro horizontal. En ambos casos desde la barra de utilidades en la parte inferior, se puede cambiar de estilo, así como acceder directamente al mes en curso.

No le veo ninguna utilidad especialmente productiva, pero hay que reconocer que es una manera original de ver nuestro sitio y de pasar un ratito jugueteando con el invento.

Y no, no admite Blogger, pero imagino que es cuestión de tiempo. Es de suponer que el sistema se nutra del feed de esas plataformas y a poco que admitan escribir directamente la dirección de una fuente, solucionado el tema para todos los casos.

Timeline horizontal de @oloman (Ver)
Un servicio que conocimos leyendo Checkapps.


Lightbox de Blogger. Otra vez operativo y ahora opcional.

13/10/2011
Pues eso... Que ya vuelve a funcionar para todos -quieras o no quieras- el sistema de ventanas modales para imágenes en las entradas que -como el Guadalquivir- apareció un día y desapareció otro.

Nota: Tal y como nos advierte Arruillo, no es el Guadalquivir el que aparece y desaparece, es el Guadiana. Perdón por el lapsus.

Aunque no recuerdo ningún comunicado oficial sobre la retirada de este sistema que muestra las imágenes de una manera destacada, supongo que la causa fue la lluvia de críticas recibidas al respecto por parte de muchos usuarios.

Para solucionar todo el problema que supone que te pongan por narices algo que no quieres, no te gusta o no necesitas y que incluso puede interferir con otro sistema para lo mismo que pudieras tener, ahora sí que han usado un poco el sentido común y desde el Escritorio se puede desactivar.

El selector se puede encontrar en el panel de control "clásico", dentro de Configuración ► Formato en forma de desplegable como este que nos permite decidir qué queremos hacer con el dichoso Lightbox. Por defecto el sistema viene activado, así que si es eso lo que queréis, no tenéis que hacer nada.



If Yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigating to the image.
Si ya usas el nuevo escritorio, esta opción la tienes en Configuración ► Entradas y Comentarios

Open images in Lightbox ?

Por último, recordar que esta marca no es global, sino propia de cada blog. Así pues, si administráis más de uno habrá que entrar en todos para individualizar vuestra preferencia.

Hasta el próximo asalto.


Arreglando el gadget buscador que no carga.

11/10/2011
Hace un tiempo se me "estropeó" el buscador interno del blog y me pasé una buena cantidad de días buscando información y probando cosas para intentar arreglarlo. Lo cierto es que casi me rendí pensando que era problema del propio Google y confiando en que era una de esas cosas que el tiempo soluciona, así que simplemente cambié el gadget por un buscador personalizado que sólo buscara en el blog y santas pascuas y alegrías.

Pasado un tiempo y en un sitio que no recuerdo cual fue, casualmente encontré la solución por un comentario relacionado con otra cosa. Hoy he tenido el mismo problema en otro blog y como por ser una cosa puntual, de solución rápida y código muy breve, no hice lo que acostumbro (escribirlo aquí), otra vez he tenido que perder un tiempo en averiguar cual era el problema.

Así que para que no me pase otra vez y por si a alguno de vosotros os ocurre lo mismo, esta vez si que me apunto el problema y la solución.
El problema no es que no se encuentre nada en el blog, pues eso cuando ocurre es cuestión normalmente de que la bitácora es joven y todavía San Google no ha tenido a bien visitarnos. Lo que se ve en el caso que comento es un aviso de "Cargando..." en lugar del cajetín para introducir los términos a buscar. Algo así:


El motivo de este fallo es que o bien la plantilla que hemos instalado carece de un elemento fundamental, o bien nos lo hemos cargado accidentalmente haciendo alguna modificación. Ese elemento es esta línea, que no me preguntéis para qué sirve porque sólo tengo una leve idea. Baste decir que inserta ciertos elementos que Blogger cree conveniente y que además, para variar, van modificando a su antojo. Si no la tenéis, acabáis de encontrar la solución y es insertarla de nuevo justo después del <head>:

<b:include data='blog' name='all-head-content'/>

Una vez repuesta esa línea, nuestro buscador también se repondrá... del susto.


Generador de iconos de carga (loader) con CSS3

01/10/2011
Hay muchos elementos distintivos del CSS3 como las sombras (box-shadow, text-shadow), cajas redondeadas (border-radius), gradientes (gradient), transformaciones (transform) y transiciones (transition). Unas nos permiten poder simplificar mucho el código y evitar el uso de más imágenes de las necesarias y otras nos ayudan a acercarnos a efectos que antes estaban reservados para otros lenguajes de programación distintos de HTML, como Flash y JavaScript.

Pero hay uno con el que un diseñador avezado, hace cosas que poco tiempo atrás parecían imposibles de conseguir sólo con hojas de estilo. Son las animaciones, que se consiguen con la propiedad ANIMATION.

En el enlace anterior podéis ver las especificaciones de la propiedad, que es una extensión de TRANSITION, pero si estáis como yo, todavía en una fase muy inicial de aprendizaje de este estándar, seguramente también os suene a chino... o a lemerig, para los afortunados que sepan chino.

Afortunadamente, cada vez salen más artículos sobre cómo hacer cosas puntuales e incluso sitios con generadores que nos facilitan la tarea.


En esta ocasión el que hemos descubierto nos facilita el código necesario para crear una pequeña animación que simula iconos típicos de Ajax que se muestran mientras algo se está cargando. Es CSSload y en ella encontramos hasta 8 modelos distintos que podemos configurar en cuanto a tamaño, colores y velocidad. Nosotros ajustamos esas opciones y la páginas nos facilita el código CSS y el HTML necesario para que se vea.

El ejemplo está ahí mismo en forma de círculo rojo dando vueltas por el perfil de una circunferencia naranja. Aunque parezca un GIF animado, no lo es. Sólo se trata de CSS. La prueba la tendréis si intentáis descargar la imagen. Simplemente no hay imagen, son líneas, bordes de cajas redondas que posteriormente se han animado.

Si no lo ves es porque tu navegador está algo desactualizado (Firefox, Chrome, Safari) o porque usas Internet Explorer, aunque parece que la versión 9 ya empieza a leer algunas de estas cosas.

La forma más fácil de ver qué propiedades soporta tu actual navegador es accediendo a la página de haz.io, que te mostrará en forma de check list, una gran variedad de las nuevas tecnologías que vienen ya están aquí, referentes a HTML, CSS y Javascript.

Este último es otro ejemplo sacado de CSSload.




Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba