SmoothTabs es un sistema de navegación mediante pestañas basado en mootools y que permite realizar transiciones entre diferentes secciones con un efecto muy profesional.
Para usarlo tan solo tenemos que incluir el archivo en la cabecera de nuestro HTML:
HTML:
-
<script src=“Smoothtabs.js” type=“text/javascript”></script>
Definir una lista con las distintas secciones a modo de menú:
HTML:
-
<ul class=“smoothtabs-menu”>
-
<li id=“inicio-current”>Inicio
</li>
-
<li id=“portafolio”>Portafolio
</li>
-
<li id=“contacto”>Contacto
</li>
-
</ul>
Y luego en bloques que se ocultarán automáticamente introducimos el contenido para cada sección:
HTML:
-
<div id=“content” class=“smoothtabs”>
-
<div id=“inicio-data” class=“smoothtab-current”>
-
<p>Esta es la seccion inicial.
</p>
-
</div>
-
<div id=“portafolio-data” class=“smoothtab” style=“display:none”>
-
<p>Esta es la seccion de portafolio.
</p>
-
</div>
-
<div id=“contacto-data” class=“smoothtab” style=“display:none”>
-
<p>Esta es la seccion de contacto.
</p>
-
</div>
-
</div>
Luego tan solo tendrás que aplicarle los estilos visuales más apropiados para el proyecto.
He publicado una pequeña prueba a modo de ejemplo y en la página oficial dispones de un ejemplo usando el script HistoryManager, que permite usar las teclas de página anterior y siguiente para moverte por las pestañas visitadas.
Yo ya lo estoy incluyendo en mi próximo tema para el blog [que saldrá en breve].
SmoothTabs - Mootools based page transitions
Hoy 9 de Abril de 2008 se celebra el 3er CSS Naked Day, es decir, eliminar los archivos de estilos [CSS] de nuestras webs para ver simplemente el contenido, que se supone que es lo importante de una página.
Para participar elimina o comenta la llamada a tus archivos CSS en la cabecera de tu página. Opcionalmente puedes añadir el texto:
¿Que ha pasado con el diseño?
Para conocer más acerca de por que están deshabilitados los estilos de esta página, visita
Annual CSS Naked Day.
Ya tengo mi iPod “tuneado” gracias a uno de los protectores de la web Skinizi.
El hecho es que el sábado pasado estaba leyendo un blog en el que el autor comentaba que llevaba tiempo usando estos protectores en su reproductor y estaba muy contento. Así que volví a visitar la web y me encontré con algún diseño nuevo que antes no tenían… y hubo uno que me encantó!
El diseño que más me gustó fue Swirl de Pairo:
No lo dudé y el miércoles pasado me llegó a casa. Vienen en una especie de sobre/caja de cartón, una pegatina con las dos partes [frontal y trasera] junto con las instrucciones para pegarla, la factura y un protector para la pantalla que además aumenta el brillo de la LCD.
La instalación de la pegatina no tiene mucha complicación. Gracias al material con el que están fabricadas, que se asemeja mucho a la cinta americana, no te genera las típicas burbujas de aire y no tienes problema por despegarla un poco para volver a ajustarla.
Según el fabricante a la hora de quitarla no deja marcas ni residuos del pegamento.
El precio de los protectores es de 14,95€ más los gastos de envío y tienen medidas para todos los modelos de iPod.
Puedes ver el resultado en mi iPod Classic, ya os comentaré si verdaderamente aguanta el uso diario.
Con el 98% de trabajo completado, creo que es un buen momento para poner en fase de producción mi nuevo tema uve3.
Conservando mucho del estilo anterior, he querido montar un tema de una sola columna con un bloque de opciones extenso al pie de la página. Escrito completamente desde cero, ahora me tocará revisar los archivos CSS para hacer un poco de limpieza y optimización. He intentado no optimizar tema lo máximo posible, evitando el uso de imágenes innecesarias para que la carga de la página no se vea perjudicada.
Para montar el tema he usado:
Y le he activado a Wordpress los plugins:
En cuanto remate los flecos pendientes de este tema prometo ponerme con mi anterior tema, fenix, para estandarizarlo y publicarlo para su uso. [si, es algo que tengo pendiente desde hace unos meses]
Por supuesto decir que he pensado el tema para ofrecer al usuario una claridad y sencillez a la hora de navegar por la web y acceder a los contenidos, si veis que algo falla o se puede mejorar no dudeis en poner vuestras sugerencias en los comentarios de esta entrada.
Como curiosidad final os publico el comienzo de este tema, el boceto a mano hecho en cama un día de sonambulismo:
Gracias a RudeWorks, un blog muy bueno recién descubierto sobre publicidad, diseño e ilustración, conocí la web de Nastuh Visual Effects, una gente dedicada a la post-producción de videos modificándolos digitalmente.
En su web han tenido la brillante idea de montar un sistema con el cual puedas ver a la vez el video pre-producido, tal y como se grabó, y su resultado final. Los trabajos que hacen son impresionantes y de una calidad enorme.
Nastuh FX…
RickBuen tuto, pero creo que, visto tu desktop, tu lo que quiere...en Instalar Ubuntu 8.04 en el Eee Pc 900
/grunch0Enorabuena, estos manuales suelen estar solo en inglés.. xD...en Instalar Ubuntu 8.04 en el Eee Pc 900
hanok@Javier Martínez: gracias! espero que lo disfrutes mucho ;)...en Instalar Ubuntu 8.04 en el Eee Pc 900
Javier MartínezBuen Post! Si señor!
En cuanto tenga el mio lo pruebo!
...en Instalar Ubuntu 8.04 en el Eee Pc 900
gafemanei gracias por avisar hanok ! participare a ver si cae jeje...en ¿Quieres ganar un Eee PC?
