Parece que la cosa hoy va de cosas curiosas y es que también he encontrado una nueva matrícula Geek:

1. Fue la matrícula blogger
2. Otra matrícula de lo más curiosa
3. Y por último…

Fuente | Doble-Doble

La imágen que véis arriba corresponde a un esquema de un Slider. Está hecho con una combinación de CSS, HTML Markup y jQuery JavaScript. Tenéis todos los códigos en la web css-tricks, está hecho por Chris Coyier. Podéis ver una demostración en este site.

He visto (como seguramente vosotros también) muchos Sliders para webs, pero me ha gustado especialemtne la función de pararlo o de reproducción automática que tiene éste, porque muchas veces me pasa qeu quiero leer cierto artículo sin tener que entrar pinchando en él y se hace imposible en ciertas webs. Por dar ideas, por ejemplo se podría utilizar para mostrar los últimos post de tu weblog.

Si ya has diseñado alguna vez una página web, seguro que habrás pensado de cabeza el número de contenedores (DIV) que tienes que poner y cómo ponerlos para conseguir cierta estructura de página. Esto suele llevar un rato, y si lo haces rápido y corriendo sin pensar, no suele salirte a la primera (en diseños algo complejos); yo siempre acabo por dibujarmelo en un papel poniendo el nombre de cada uno y después lo paso al código…

Pues Drawter es una de esas aplicaciones maravillosas que hay por la red, para ayudar a la gente a no perder el tiempo. (Aplicaciones en las que seguro que si conoces al autor, de darías un beso en la frente, después de las gracias!) Con Drawter podrás “dibujar a mano” tantos conetendores como necesites, unos dentro de otros, flotantes por encima de otros, al lado… y cuando tengas más o menos un boceto Drawter te genera el código HTML y el código del archivo de la hoja de estilos CSS para conseguir dicha estructura.

Es genialmente sencillo! Muy recomendable apra gente que está empezando! Hay si yo hubiera tenido esto antes de ciertos diseños… El sistema es muy técnico a lavez, dejandonos elegir entre muchas opciones (para lagente avanzada) como en que versión de HTML trabjamos, así como la versión del XHTML, el idioma de la página, etc… ¡una maravilla!

Enlace | Drawter

En mi netvibes, tengo muchas páginas de este tipo, pero os comento aquí tres de ellas que son las que más me gustan y leo diariamente.

1. Woork

   

   Woork es un blog de Antonio Lupetti, un ingeniero y desarrollador de Italia. él nos trae tutoriales muy cortitos y fáciles al alcance de cualquiera que sepa un poquito de esto de webs. Trata de diversos temas de desarrollo web tales como PHP, Cold Fusion, JavaScript y CSS. Su forma de explicar los hermosos tutoriales, es muy buena, y para explicarlos utiliza una forma muy personal con imágenes que ilustran los conceptos de los que habla con detalles que Antonio pone a cada uno de sus tutos. Echa un vistazo a su impresionante tutorial sobre un “enfoque de arriba hacia abajo para simplificar el código CSS” en el que explica su preferencia por la creación de hojas de estilo y formato.

2. Tutorial Blog

   

   Tutoriales sobre los blogs. Nos proporciona tutoriales para tenerlo a mano, recursos, y diversas listas de desarrollo web y diseño de temas como el código de snipplets para diseñadores web. También explica tutoriales sobre Photoshop utilizando capas en Photoshop para la gestión de diseños web, y tutoriales de Flash. Tutorial Blog tiene una sección en la que los usuarios envían sus propias tutorías que permiten a los lectores ver y compartir trucos e ideas.

3. Web Designed Wall

   

   Web Designer Wall, dejo una de las mejores páginas de sus estilo para el final. Es como un pequeño mundo de arte y diseño web. Podremos encontrar ideas de diseño web y de retoque fotográfico, tutoriales impresionantes (quizás algunos hecho para expertos, más bien) decenas de tutoriales y explicaciones sobre CSS (como por ejemplo el efecto de gradiente que puse en los títulos de SoyGik) Técnicas para la superposición de imágenes en texto normal XHTML, y técnicas de jQuery para los diseñadores. Para los que se están iniciando en jQuerty exponen diez técnicas para obtener resultado muy chulos con jQuery. Una maravilla de página para tener de referencia.

Hace algunos meses que instalé aquí en SoyGik un pequeño plugin para crear el efecto de LightBox en las imágenes que miki y yo queramos.

Para quien no sepa de que estoy hablando, el llamado LightBox, es un efecto visual que queda muy bonito e incluso a mi me parece bastante útil. Se puede utilizar para varios objetos dentro de una web, pero poniendo un ejemplo con una imágen, el efecto consiste en una vez el usuario haya producido algún evento (generalmente, el simple clic encima del objeto que suele estar en miniatura, una imágen en miniatura, por ejemplo) el objeto se pone a tamaño normal por encima de toda la web, oscureciendo el fondo (generalmente en colores oscuros como el negro) y dejando la imágen en sus colores normales. Es una técnica que está muy bien para centrar la atención sobre ese objeto. (Si quieres ver como funciona, en éste post se utiliza el LightBox que tenemos en SoyGik)

Una vez explicada la técnica del LightBox, si quieres tenerlo en tu propia web, has de saber, que hay decenas y decenas de formas de conseguirlo. Con Jquery, mootools, javascript, css, etc… Y el resultado se puede aplicar a imágenes, textos planos, vídeos, textos enriquecidos, flash..etc. Así que la página de la que os hablo está muy bien, pues nos ayudará a elegir el sistema de Lightbox que necesitamos para nuestra web, con una completísima lista ordenada según las opciones que he dicho arriba. Es una tabla de comparaciones.

Por cierto, si no sabes por cual decidirte, te recomiendo multibox, uno de los más completos y bonitos.

Enlace | LightBox Clones Matrix

He subido a Youtube un pequeño vídeo que resume un poco el par de horas que estuve con los códigos del footer de SoyGik en el que ahora aparecen los últimos twitts de Miki y míos. La verdad es que estuvo más entretenido los cambios del header pero no me acordé de ponerlo a grabar. (La próxima vez será) Este vídeo fue inspirado en el que subí hace unos días de un diseñador gráfico (aunque no tiene nada que ver con las 40h de diseño gráfico, a apenas, unas 15h; no me quiero comparar ni mucho menos, pero la idea me gustó mucho) Bueno os dejo con el vídeo:

Espero que os guste, o por lo menos, sea curioso ver el típico “cómo se hizo”.