| |

DOMSlides

ByLuis

domslides.gif Supongo que S5, el sistema para realizar presentaciones basado en estándares desarrollado por Eric Meyer, es ya un viejo conocido.

He de confesar que no lo he utilizado nunca. Y seguramente jamás llegue a hacerlo: me parece que es como matar moscas a cañonazos (Si no te gusta Powerpoint, puedes realizar presentaciones con OpenOffice o hacer un bonito PDF).

Pues bien, hace unas semanas que estamos trabajando con otro sistema, basado también en XHTML, CSS y javascript, que nos permite generar la presentación a partir de un solo documento:

DOMSlides de Christian Heilmann, ligero y grácil cual felino. Y sino, compruébalo navegando por la demo.

Similar Posts

|

Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

ByLuis

There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz.  One of the widgets I love is Twitter’s “Follow” button.  Let me sho …

Post original

|

‘Bocadillos’ en tu web

ByLuis

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
bubble.png

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librería prototype, la css e incluir la siguiente línea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentaría hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

Vía / Fresqui

Uso correcto de los selectores en jQuery

ByLuis

Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:

$('.boton')

Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:

  • Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
  • Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
  • Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
  • Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)

Avoid Bare Class Selectors In jQuery

Tutorial de DOM

ByLuis

Algo que considero necesario a la hora de programar en Javascript es conocer el DOM. Aunque hay gente que prefiere la creación de objetos mediante innerHTML, incluso hay estudios sobre cual es más eficiente, siempre viene bien saber utilizar el DOM para poder manejar elementos HTML.
Si no controlas el uso del DOM, aquí os dejo un tutorial bastante claro que os ayudará a meteros de lleno. De todas formas, tambien recomendaros una página XULPlanet, la cual es una de mis favoritas para buscar documentación sobre los objetos HTML.
W3C DOM
Vía / dzone

| |

Laboratorio: desplegar mapa del sitio mediante Ajax

ByLuis

Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librería jQuery).

Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).

Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librería jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.

También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código debería haber la siguiente función:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}

El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:

  • Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para así no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
  • La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
  • hide() oculta un elemento HTML.
  • show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
  • mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
  • attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
  • attr(código) añade el atributos y valores a un elemento.
  • slideDown despliega una capa hacia abajo.
  • slideUp repliega una capa hacia arriba.

Código fuente

|

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});