CSSLab » videocast

Videocast 4: formulario

Jorge Epuñan — Thu, 08 Apr 2010 15:09:23 +0000

Tenía hace unos meses preparado un nuevo videocast para ayudar a quienes están aprendiendo a maquetar en HTML+CSS a realizarlo con campos de formularios. Lejos es lo más complicado que me ha tocado perfeccionar, pero se trata principalmente de practicar y de realizar la mayor cantidad de variaciones posibles para lograr un buen manejo de las etiquetas y conocer cómo se comportan en los diferentes browsers. A modo de ejemplo, la siguiente imagen grafica un mismo archivo HTML con diferentes tipos de con diferentes estilos en diferentes browsers:

En esta ocasión el layout es bastante simple, uno típico que encontrarás en cualquier sistema de comentarios para blogs. Pero es un buen puntapié para que veas de qué se trata esto. Además, contiene las etiquetas fundamentales y más utilizadas para capturar datos de usuarios.

Espero sea de ayuda y que se entienda, como siempre lo muestro en 2 formatos: streaming para web y uno en alta calidad para que lo bajes y estudies offline. Además, puedes descargar el material utilizado para este videocast.

Videocast 3: creando un plugin para jQuery

Jorge Epuñan — Wed, 28 Jan 2009 19:30:05 +0000

Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible extensible, vale decir, que su mantención o posterior actualización implique poca o nula modificación.

Luego del trabajo salí a trotar y ¡ZAZ! La solución viene a mi cabeza. De vuelta la puse en práctica y decidí grabarla en un videocast, pero además de esa sencilla solución creí pertinente mostrar cómo a partir de una simple funcionalidad (o compleja, dependiendo de lo que hagan) pueden transformarla en un plugin configurable a partir de opciones, para jQuery.

Cuando creé mi primer plugin tuve bastante dificultad al no encontrar una documentación detallada, y espero con este aporte visual poner al alcance de quienes necesiten material didáctico para sus proyectos web. Hago el llamado también a que puedan compartir sus desarrollos libremente; sólo así podremos mejorar la calidad de los sitios web que vemos día a día. Como lo he hecho en otras ocasiones, pongo a disposición este mismo sitio para hacer un review y difundirlos.

Dado los problemas que tuve con ediciones anteriores, esta vez aumenté bastante la calidad y por lo tanto el peso de los archivos de video. Pongo a disposición una versión streaming (.flv, 101mb) y una para que puedan descargar y ver de la tranquilidad de donde mejor quieran (.mov, 47mb comprimido).

Sebastián, espero haber solucionado tu problema, y feliz cumpleaños.

Videocast 2: menú con listas

Jorge Epuñan — Fri, 28 Dec 2007 18:26:12 +0000

Fijándome en las estadísticas de CSSLab, me dí cuenta de que un gran número de visitas a este sitio desde buscadores viene desde la consulta css menú horizontal. Este tema es algo que se ha tocado hace bastante tiempo. Pero nunca está de mas reforzarlo, y ofrecer mejor material a quienes necesitan de este recurso. Además es bueno de que los usuarios hagan esta búsqueda, hace pensar de que tienen interés de aprender la manera correcta de crear menúes. Bueno, estoy para ayudar, así que hice un videocast bastante básico y rápido de cómo lograr menúes con listas, verticales u horizontales. Como he aprendido del videocast anterior, esta vez subí 3 versiones para deleite del consumidor. Espero sea de bastante ayuda a quienes necesitan de este método.

Como siempre, el material con el que hice el ejemplo está disponible.

Videocast 1: layout compuesto (actualizado)

Jorge Epuñan — Wed, 03 Oct 2007 21:04:18 +0000

En un proyecto en que estoy involucrado actualmente, me tocó participar en la arquitectura y construir el sitio completamente, desde cero. Lo bueno es que lo estoy haciendo solo, por lo que propongo y aplico mis propios métodos, y lo mantengo bastante ordenado (con un código limpio y ordenado), tanto el HTML como las hojas de estilo. A medida en que lo voy desarrollando, aplico algunos métodos bastante simples pero efectivos para determinados problemas que van surgiendo, los que compartiré en este sitio en su momento.

Por ahora, me interesa mostrar a través de este primer videocast (a grandes rasgos) cómo construí el layout, ya que felizmente quedó firmemente estructurado en todos los browsers en los que hago las pruebas. La receta: flotando cajas, un buen css reseter y mucha imaginativa a medida en que se va escribiendo código. Hasta ahora no he utilizado una sola gota de comentario condicional.

Espero sea una buena ayuda a más de alguien, por último para que vean diferentes técnicas de diagramación.

Un detalle: trabajé mucho con los pesos de los videos v/s calidad de compresión y decidí cortarlo en 2 videos al final, ya que el videocast dura 47 minutos en total y quedó bastante pesado. Siento si esto limita a más de alguno, pero en realidad necesitaba abarcar todo el proceso. Creo que quedó bien completo.

Videocast parte 1: arquitectura y header
22 minutos, 59 mb.
Videocast parte 2: contenido
26 minutos, 79 mb.

Además, el material utilizado (html, css, imagenes…) está disponible para descargar.

Actualización

A pedido popular, subí el video completo (en .mov) para que puedan bajarlo en su trabajo y verlo en casa más tranquilamente. El peso subió bastante, pero fue para guardar la calidad. Van 2 versiones: una normal y otra para su iPod Video (el que pueden ir viendo en el metro camino a casa).

Provecho!