domingo, 30 de octubre de 2011

Oloblogger

Oloblogger


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

Posted: 29 Oct 2011 08:00 AM PDT

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.


viernes, 28 de octubre de 2011

Oloblogger

Oloblogger


Cambiar el aspecto del puntero. Propiedad CURSOR.

Posted: 27 Oct 2011 08:00 AM PDT

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.


jueves, 27 de octubre de 2011

Oloblogger

Oloblogger


Las vistas dinámicas de Blogger ahora personalizables

Posted: 26 Oct 2011 10:06 AM PDT

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.


miércoles, 26 de octubre de 2011

Oloblogger

Oloblogger


Blur Menu. Para practicar transiciones CSS3

Posted: 25 Oct 2011 08:00 AM PDT

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.














viernes, 21 de octubre de 2011

Oloblogger

Oloblogger


Sonido al pasar el puntero por encima de una imagen

Posted: 20 Oct 2011 12:18 PM PDT

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...


Correo Vaishnava