Sopa de Pixels » XHTML y CSS

40 recursos para la creación de layouts en CSS

Oriol Boix — Mon, 28 Jul 2008 19:15:51 +0000

De la forma en la que nos tiene habituados, en noupe.com han hecho una nueva recopilación.

Esta vez la recopilación consiste en 40 recursos para diseño de layouts con css.
Entre ellos encontramos tutoriales, tips y “best practices” para el diseño y diagramación de sites en (X)HTML y CSS.

Imprescindible en los favoritos de cualquier diseñador / maquetador web.

Vía: noupe.com

Clearfix y su alternativa semántica

Oriol Boix — Fri, 27 Jun 2008 12:15:06 +0000

Muchos os habréis encontrado con el problema del colapso de los contenedores de elementos flotantes.

La propiedad float de CSS es muy útil y muy usada para posicionar elementos en la interfaz pero presenta un pequeño problema: Al estar situada dentro de otro elemento (por ejemplo un div), este elemento contenedor no envuelve al elemento flotante dentro de ella (colapsa).

Una forma común y de muy extendida utilización, entre otros por mi, es usar el método clearfix. Este método consiste en crear una clase “clearfix” en nuestro CSS y aplicarla a los elementos contenedores.

Por ejemplo, en un código html tal que…

Div flotante.

…el css sería:

.clearfix:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
#divflotante {
    float:left;
}

El problema de este método es que, si queremos ser puros y castos, estamos ensuciando nuestro html con una clase que no es semántica. No habla del contenido o tipología del elemento al que está aplicada.

Para ser semánticos, leo en CSSLab una metodología que por un lado es muy sencilla y, por otro, no ensucia la semántica de nuestro html ni del código de nuestro archivo de estilos:

Overflow para evitar el colapso en contenedores que envuelven elementos flotantes

No conocía la técnica y es realmente buena.

CSS para rotar una página HTML

Oriol Boix — Mon, 02 Jun 2008 14:55:37 +0000

Leo en Anieto2K sobre la propiedad propuesta por WebKit para hacer transformaciones directamente al html de una página con CSS.
Una de las curiosas utilidades de esta propiedad es la de rotar el html mismo.

¿Cómo?

Para muestra un botón (bueno, dos):

Flip / Flip 2 (probad valores como, por ejemplo, 45)

Otras funcionalidades interesantes de la propiedad:

Skew / Skew 2

NOTA: sólo funciona en navegadores con motor WebKit (Konqueror, safari …)

Vía: Anieto2K

Pforms – Crea formularios descargables en 2 minutos

Oriol Boix — Thu, 17 Apr 2008 15:54:11 +0000

Hace días que veo las distintas herramientas on-line de creación de formularios. Parece que es un campo en el que ha habido distintas iniciativas.
El problema para mi, como desarrollador, es que la mayoría de ellas dan demasiadas opciones y te lo ponen muy fácil, pero en la dirección equivocada. Sí, sí, en este internet tan repleto de opciones se me antoja que a veces te dan el trabajo tan masticado que pierdes el control sobre él.

Normalmente, es un tanto tedioso picar el código XHTML y CSS de nuestros formularios, lo que acostumbra a dar como resultado una falta de aprovechamiento de las capacidades de estilo que tienen los mismos.

Yendo al grano: hoy he probado Pform y ha resultado ser justo la herramienta que estaba buscando.

Pform te genera, de forma muy rápida (pero que muy rápida) y muy sencilla (pero que muy sencilla) un formulario estético y con un buen diseño centrado en el usuario y te ofrece en zip el código XHTML, CSS y JS totalmente válido y cross-browser para su descarga. No incluye ni PHP, ni estadísticas, ni te lo aloja en su servidor para que lo incluyas con un iframe, ni tienes que registrarte ni nada: creas tu formulario y te lo descargas.
El código generado está muy bien estructurado para su posterior modificación.
Y, por supuesto, totalmente gratuito.
Si tengo alguna crítica a Pform es que el archivo CSS generado es un poco largo ya que tiene en cuenta todas las posibilidades que pueden aparecer en tu formulario.

Podría analizar más profundamente sus características pero lo mejor será que lo probéis vosotros mismos, es tan rápido que da gusto

Por si preferís herramientas que os den el trabajo más “masticado” aquí os dejo un listado de lo que he encontrado, si eso ya las iré analizando más profundamente. Decir que la mayoría siguen el siguiente modelo: Te registras, creas formularios, los incluyes en tu web mediante un iframe o parecido, geastiona tus respuestas y analizan los datos recibidos (Register, create, publish, analize):

Enlace a Pform: http://www.phpform.org