UnderMedia S.A. :: Blog

Zen Coding es una herramienta creada por Sergey Chikuyonok, que nos permite acelerar al codificación de HTML/CSS al usar abreviaturas de código basadas en selectores CSS.

Por ejemplo:

div#content>ul.navigation>li>a

Nos genererá:

<div id="content">
<ul>
<li><a href=""></a></li>
</ul>
</div>

Ademas tiene otras interesantes funciones como la repetición por ejemplo:

ul>li*3

Nos generará:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Soporta snippets lo cual nos permite configurar nuestros própios códigos.

• Demo
• Tutorial
• Descarga, tiene varios plugins para diferentes programas incluyendo Dreamweaver

Luego de maquetar, es un lio recordar que se debía tambien definir como se veria lo que esta en las etiquetas pre, h4, h5, h6, blockquote, etc.

Para facilitar esto, podemos usar una página con contenido de prueba, que incluya la mayoría de etiquetas de uso común de tal forma que podamos encontrar algo que no definimos.

Continuar leyendo »

Foto a foto, veamos como se arma esta historia.

Vía microsiervos

Los microformatos nos permiten dar significado estandarizado a elementos de una página web, de tal forma que puedan ser legibles para el ser humano e indexada, guardada, referenciada, reusada o combinada por las máquinas

De esta manera tenemos microformatos para tarjetas de identificación, eventos, referencia, etc.

Podemos encontrar mas información y herramientas en microformats

Ahora cada vez que diseñamos formularios, menús, tablas de precios, paginas 404, bordes, etc. podemos ver ejemplos de estos en galerías de elementos web específicos.

Se trata de:

• Elements of Design
• Pattern tap
• [Design Solutions]
• [ACTUALIZADO]styledmenus, galería de menus

Con ejemplos de elementos web organizados en categorías, muy útiles a la hora de extraer ideas en nuestros proyectos

CSS sprite es una técnica que nos permiten incrementar la velocidad de carga de nuestros sites al reducir el numero de peticiones HTTP al servidor, pues agrupa varias imágenes en una sola mientras que con CSS (Colocando al “CSS sprite” como background y usando background-position) muestra individualmente cada una

Ccsssprites, nos permite cargar las imagenes individuales y nos genera una agrupada, además de indicarnos los estilos css que debemos usar para mostrar cada imagen

Algunas veces es un dolor de cabeza, ver como nuestros diseños hechos con CSS no funcionan correctamente en Internet Explorer.

Via tuFuncion.com en su articulo El hack definitivo para tus CSS presentan una interesante solución a este problema.

Se trata de usar etiquetas que solo Internet Explorer interpreta, de esta forma podemos corregir aquellas “imperfecciones” que se presentan en este navegador.

Para entenderlo mejor veamos el ejemplo que nos da tuFuncion.com

Por poner un caso práctico, queremos usar un margen izquierdo que tiene 5px en Firefox y en Opera y 6px para IE6 y 7px para IE7:

margin-left: 5px; /* Todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */

En resumen