youtube-vista-adaptable

Desde que Youtube implementó la novedad de “change view” (cambiar vista), permite a los usuarios cambiar entre el modo de vista normal y panorámica y así ampliar/reducir el área del vídeo. A pesar de esta novedad, la accesibilidad no se pierde, lo que es un gran punto a favor. En esta entrada aprenderemos a crear una vista adaptable como la de Youtube, mediante el uso de CSS & JQuery. En el ejemplo anterior, al expandirse el contenido la barra lateral baja, esto puede realizarse de forma sencilla, definiendo la estructura y utilizando un poco de JQuery.

Código HTML

Esta es la parte más importante. Para simular la estructura de Youtube, definiremos 5 secciones: encabezado, contenido, comentarios, barra lateral y la parte inferior de la página:

<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
<div id="comments"></div>
</div>
<div id="footer"></div>

Inicialmente el ancho del contenido será de 600 píxeles, pero cuando se expanda este tamaño pasará a 960 píxeles. Para lograr esto vamos a ubicar un enlace para realizar la acción de cambiar la vista en algún lugar de la página (también se puede realizar mediante CSS Sprites):

<a id="wideView" href="#">Enlace para cambiar la anchura del contenido</a>

Código CSS

La clave está en que la barra lateral flote a la derecha, y el contenido, header y demás, flote a la izquierda. Así, cuando el contenido se expanda, la barra lateral quedará desplazada hacia abajo.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}

#header { width:900px; margin:0px auto;}

#main {width:960px; margin:0px auto; overflow:hidden;}

#content { width:540px; float:left;}

#comments { width:540px; float:left;}

#sidebar { width:280px; margin-left:20px; float:right;}

#footer { width:900px; margin:0px auto;}

/* Differentes vistas */

#content.wide { width:900px;}

#toolbox.wide { width:960px;}

#content.compact, #comments.compact { width:690px;}

#sidebar.compact { width:130px;}

Código JQuery

Añadiremos una función JQuery para cambiar la clase CSS “wide”. Esta clase determinará la forma de ver el contenido en modo panorámico. Cabe destacar que es necesario vincular en nuestro documento la librería JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
$(document).ready(function() {

$("#wideView").click(function() {

$("#content").toggleClass("wide");

});

});

Estandarización

XHTML 1.0 transitional válido.

CSS 2.1 inválido (por propiedades CSS3).

Ejemplo de su funcionamiento

¿Os ha gustado?