Guías CSS. Para ser un mejor Frontend Developer en CSS

Leyendo a la gente de Arkency encontré en uno de sus artículos este enlace bien interesante y que debo compartir por el bien de la comunidad. Se trata de las Guías CSS. Un conjunto de opiniones, sugerencias, buenas prácticas y más, a la hora de escribir hojas de estilo en cascada. Leer más “Guías CSS. Para ser un mejor Frontend Developer en CSS”

Técnica del Reloj en CSS

Los desarrolladores web, en su mayoría lo que trabajan del lado del cliente (Frontend), debemos lidiar con las útiles Hojas de Estilo en Cascada o CSS. Recordemos que hay muchas propiedades que se pueden aplicar aun selector HTML o a una etiqueta, y que estas propiedades tiene algunas ligeras variaciones para algunos casos muy particulares como cuando se quiere estilizar un borde, un margen, padding o similares. Me refiero a esas propiedades que cuentan con valores en ciertas posiciones: arriba, derecha, abajo izquierda. Leer más “Técnica del Reloj en CSS”

Nueva Oleada de Editores de Código: Google Web Designer, TweakStyle y Macaw

Justo hace unos días me entero por medio de una persona que me siguió en Twitter sobre un editor de código enfocado a los diseñadores web. Luego, me entero sobre otras herramientas, que si bien no son editores de código como tal, si tienen esa esencia impregnada en ellos: Macaw y Google Web Designer. Vamos a compartirlas un poco en este espacio. Leer más “Nueva Oleada de Editores de Código: Google Web Designer, TweakStyle y Macaw”

Tablas con Estilo de Zebra con CSS3 (A Fondo)

Es normal ver en algunos sitios como las filas de algunas tablas tienen un color diferente a la otra. Esto se hace para facilitar la lectura de la información que está tabulada, además que visualmente es agradable a la vista del visitante o usuario. Ahora, como desarrolladores o diseñadores, es necesario que sepamos como se logra ese efecto. Y eso es lo que pretendo explicarles con este post.

Para lograr tal efecto necesitaremos hacer uso de la pseudo selector que viene con la versión tres de las hojas estilo en cascada (CSS3), :nth-child. Leer más “Tablas con Estilo de Zebra con CSS3 (A Fondo)”

DataTables es un Espectacular Plugin para Tablas HTML basado en jQuery

Se podría decir que no hay elemento más rígido (en HTML) que una tabla. Mal usadas anteriormente para dar estructura a los sitios web, y bien usadas pasa tabular datos. Las tablas en HTML no es que sean los elementos más, digamos, cómodos para trabajar. Es más, muchos desarrolladores prefieren armar “tablas” usando DIVs o LIs, aunque es raro. Ahora, pues bien les quiero presentar un plugin que es bien bueno para darle un sabor muy especial a las tablas en HTML. Se llama DataTables. Leer más “DataTables es un Espectacular Plugin para Tablas HTML basado en jQuery”

Trucos CSS – Las Formas de CSS

¿Qué sería de la web hoy en día sin las hojas de estilo? Seguro habría otra forma de lograr todas las bondades que conseguimos con CSS, pero no tan bien como con ésta. Las hojas de estilo son, simplemente, geniales. Moldear un sitio web a tu antojo, hacer efectos llamativos son algunas de las muchísimas cosas que puedes hacer a un sitio web, o aplicación web, usando CSS. Leer más “Trucos CSS – Las Formas de CSS”

Viewport Resizer es una Herramienta para Diseño Web Responsivo

Recientemente, o más bien ya hace mucho, existe una tendencia en Internet con respecto al desarrollo y diseño de sitios y aplicaciones web. Situación que se agudizó con la masificación de dispositivos como smartphones y tablets. No es lo mismo ver un sitio web o una aplicación web en tu ordenador de escritorio o portátil que en una tableta. No, no lo es. En esta última la organización del contenido y la visibilidad de los textos tienden hacer bien horribles… A menos que el diseñador haya implementado Responsive Web Design a su proyecto. Leer más “Viewport Resizer es una Herramienta para Diseño Web Responsivo”

iPod en HTML5, CSS3 y jQuery

El pasado 5 de Octubre del año 2012 fue el primer aniversario del fallecimiento de Steve Jobs. Sin duda, fue un gran personaje en la historia de la tecnología con sus ideas visionarias y revolucionarias: el iPod y el iPhone. En homenaje a Jobs, uno de los miembros de Inventika Solutions, recreó un iPod que podemos probar en nuestro navegador.

Usando las tecnologías para el desarrollo web más actuales (HTML5, CSS3 y JS) el autor creó una iPod algo funcional y con vistosidad. Es más, creó algo muy bueno. En el artículo, el creador menciona que usó herramientas como Colorzilla (la cual yo también uso para degradados) y CSS3 Generator (que también uso) junto con algunos plugins jQuery como lo son Shyni Knob Control y jQuery Knob. Leer más “iPod en HTML5, CSS3 y jQuery”

Grandes creaciones con CSS3 3D. Tabla Períodica en tu navegador

Visiten este enlace para que vean una tabla periódica de los elementos en su navegador que no usa ni Java ni WebGL ni complementos. Solo usa CSS 3D.

 

El creador de esta genialidad también hizo algo que llamó Panorama. No les tengo muchos detalles por ahora, sin embargo, leeré más a fondo y si entiendo bien, les escribo al respecto, sino, confórmense con saber que alguien hizo semejante código.

Menú vertical desplegable con HTML5 y CSS3

Una de las muchas cosas que me gusta poner en este espacio es pequeños tutoriales de como hacer algo para ayudarnos en las tareas de programación. Cómo instalar o configurar algo. Cómo hacer esto o lo otro. Presentar herramientas útiles o que he usado en mis trabajos. Este artículo es uno más de esos.

Si bien hay varias herramientas que permiten elaborar menues de forma rápida y con pocos clics, no siempre podemos tener esas herramientas a disposición. Debido a que uso Ubuntu no puedo instalar ese tipo de programas –o no me he puesto a buscarlos para Ubuntu– y cuando no se tiene la herramienta automatizadora, pues, hay que hacerlo a lo old school. A mano. Leer más “Menú vertical desplegable con HTML5 y CSS3”