| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Los estilos son sencillos: todo estará contenido en una capa que tendrá posicionamiento relativo, para poder introducir los elementos en ella con posicionamiento absoluto y así tomen como referencia esta capa y no la página.

La lista estará contenida en otra capa con posicionamiento absoluto y top y left igual a cero. Dentro de cada elemento de la lista habrá un enlace, el cual ejecutará un script para cambiar a la descripción correspondiente, cuando se posicione el ratón sobre él. El selector hover mostrará los bordes del enlace menos el del lador derecho, para dar sensación de que se une con la caja de la descripción. En este caso me he encontrado con un problema con el IE (para variar) y es que no reconoce el color transparent para el borde, por lo que he tenido que sustituirlo por el padding para evitar que el enlace en el hover ocupe más debido al borde. Lo podría haber solucionado con color blanco, pero si existe una imagen de fondo (por ejemplo un degradado), se vería el borde blanco.

Las descripciones están contenidas en una capa, tienen el borde y el color de fondo igual que el enlace cuando está seleccionado y está todas situadas mediante posicionamiento absoluto en la esquina superior izquierda, y movidas a la derecha mediante el margen la misma longitud que tiene de ancho la lista. Para conseguir que el elemento de la lista y su descripción formen un mismo elemento (parezcan unidos), situamos la descripción a la misma altura que el elemento de la lista y con un z-index inferior, por lo que el elemento (que recordamos que no tiene borde derecho) tapará una parte del borde de la descripción, lo que hará que se unan los dos elementos y formen un único trazo.

Las capas para crear este efecto son las siguientes:

<div class="contenedor">
<div class="lateral">
<ul class="lateral">
<li><a id="pestana0" href="http://sentidoweb.com" onmouseover="mostrarPestana(0)">Sentido Web</a></li>
...
</ul>
</div>
<div id="ventana0" class="contenido"><img src="sentidoweb.png" alt="Sentido Web" /></div>
...
</div>

Y los estilos los siguientes:

div.contenedor {
position: relative;
}
div.lateral {
position: absolute;
z-index: 300;
top: 0px;
left: 0px;
}
div.contenido {
background: #008585;
position: absolute;
top: 0px;
left: 0px;
display: none;
margin: 0px 0px 0px 110px;
border: 2px solid #033E5B;
width: 200px;
height: 136px;
z-index: 100;
padding: 3px;
}
ul.lateral {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 110px;
}
ul.lateral li {
width: 100%;
margin: 0px;
}
ul.lateral li a {
display: block;
text-decoration: none;
color: #008585;
padding: 2px;
width: 100%;
z-index: -200;
margin: 0px;
font-family: Arial;
}
ul.lateral li a:hover {
color: #FFFFFF;
border: 2px solid #033E5B;
border-right: none;
padding: 0px;
background: #008585;
}
ul.lateral li a.lateral-seleccionado {
color: #FFFFFF;
border: 2px solid #033E5B;
border-right: none;
padding: 0px;
background: #008585;
}
div.contenido p {
color: #FFFFFF;
}
div.contenido li {
color: #FFFFFF;
}

El script que cambia las descripciones es de lo más sencillo: tenemos una variable que contiene el índice del elemento seleccionado, y cuando se quiere cambiar una descripción, la descripción anterior se oculta y se muestra la actual, a su vez el enlace anterior se deja como es por defecto y al actual se le pone un estilo que sea igual que cuando es hover.

var pestana = 0;
function mostrarPestana(pos) {
document.getElementById("ventana"+pestana).style.display = "none";
document.getElementById("pestana"+pestana).className = "";
pestana = pos;
document.getElementById("pestana"+pestana).className = "lateral-seleccionado";
document.getElementById("ventana"+pestana).style.display = "block";
}

Similar Posts

|

Vídeos sin el elemento embed

ByLuis

Incluir vídeos, del tipo que sean, en nuestras páginas web suele traernos dificultades, sobre todo si queremos que sean vistas en cualquier navegador y si queremos seguir los estándares. Si os encontráis con este problema nada mejor que echarle un ojo a este artículo, en el cual se indica como incluir mediante el uso de la etiqueta object vídeos de distintos formatos, ya que embed no es estándar.
Entre los distintos tipos de vídeos que incluye están los que usa el Flash Player, como YouTube o Google Video, películas en formato Windows Media y QuickTime.
Ya no tienes excusa para seguir los estándares.
Bye, Bye <embed>

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

Obtener información de páginas remotas con PHP

ByLuis

En ciertos momentos nos puede ser útil obtener información de páginas remotas, por ejemplo si tenemos un listado de páginas favoritas, pues obtener las palabras clave que tengan en el metatag, para poder clasificarlas con tags propias.

El proceso es sencillo mediante PHP, el problema es que algunos servidores, creo que pasa con DreamHost, no permiten el abrir ficheros de forma remota.

Primero debemos leer el fichero:

$url = "http://www.pagina.com/";
$fp = fopen( $url, 'r' );
$cont = "";
while( !feof( $fp ) ) {
$buffer = trim( fgets( $fp, 4096 ) );
$content .= $buffer;
}

Después podemos mirar cual es el título de la página:

$start = '<title>';
$end = '<\/title>';
preg_match( "/$start(.*)$end/s", $content, $match );
$title = $match[1];

Y por último obtener las metatags, usando para ello la función de PHP get_meta_tags, lo cual nos facilita el trabajo:

$metatagarray = get_meta_tags( $url );
$keywords = $metatagarray[ "keywords" ];
$description = $metatagarray[ "description" ];

Puedes verlo con una explicación más extensa en el artículo original.

Get Remote Web Page Information Using PHP

|

WebSockets en HTML5

ByLuis

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

Laboratorio: índice lateral con jQuery

ByLuis

Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.

Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.

indice_lateral.png

El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.

		  $(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});

Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).

Ejemplo