|

Formularios CSS

ByLuis

Algo que parece de lo más sencillo a veces nos puede llevar más tiempo del que pensamos, el desarrollo de formularios, si queremos que sea bueno, puede ser muy variado, por eso os pasamos una recopilación de distintas implementaciones de formularios que hemos encontrado.
En ellos podrás encontrar desde el uso de fieldset y legend, maquetación sin el uso de tablas, división en grupos de datos, formularios dinámicos dependientes de selección de opciones previas y muchos otros más.
CSS-Based Forms: Modern Solutions
Vía / dzone

Lista de utilidades CSS

ByLuis

Una lista bastante interesante de aplicaciones que nos pueden ayudar a realizar nuestros estilos. Organizado en diferentes categorías, nos podemos encontrar aquellas centradas en el tipo de letra, formularios, layouts, navegación, optimizadores y otras varias que no se pueden reunir en una categoría completa.

Entre la lista destacaría las siguientes:

List of CSS Tools

Vía / dzone

Diseña tus CSS

ByLuis

Paso a resumir un artículo que nos podrá ayudar a la hora de diseñar nuestras CSS, porque como bien dicen, el poner todos los estilos en un solo fichero ya pasó a la historia.

Algo tan importante como la estructura de nuestro sitio es la organización de las CSS en ficheros, claro que no hay una solución perfecta ya que depende de cada situación.

Una posible solución es la que está basada páginas-modelo, es decir, que existe un diseño diferente para distintos modelos de páginas, por ejemplo un diseño para la página principal, otro para las subpáginas, otro para el portfolio, … Este modelo es útil cuando se trata de pocos tipos de diseño, aunque nos podemos encontrar con estilos comunes entre los distintos diseños, lo que complica la solución. Claro, que este problemilla se puede solucionar de distintas formas:

  • Usar un archivo css que agrupe los estilos comunes, aunque ayuda a tener estructurados los ficheros de estilos, si se trata de un sitio grande, puede que este archivo aumente demasiado.
  • Duplicar estilos en CSS independientes, tiene el problema de tener código redundante y tener que corregir cambios en distintos sitios en vez de en un único sitio.
  • Crear un fichero nuevo que puede ser usado por otros, no hay redundancia en este caso.
  • Crear un nuevo CSS que agrupe estos pequeños casos.

Otra solución es diferenciar los estilos por elementos de la página, con esto se quiere decir que si nuestra página se crea dinámicamente y hay un fichero para la cabecera, otro para el cuerpo, otro para la navegacion, puede haber perfectamente sus correspondientes estilos, por lo que solo se incluyen los estilos para cada parte que se use.

Parecido a lo anterior es clasificarlo por etiquetas, por ejemplo, si se usan tablas o formularios, unos estilos para estos elementos y solo incluirlas en las páginas que los contengan.

Otros consejos útiles es separar los estilos para print, handheld and screen y usar @import para incluir estilos en un fichero CSS principal.

A parte de la organización física de los ficheros, tampoco hay que olvidar lo que ya hemos comentado en otras ocasiones que las clases e identificaciones deben tener un significado por su funcionalidad y no por lo que muestran (ej: no usar una clase que sea “rojo”, sino una que sea “error”, el que sea rojo o verde no es significaquivo). Agrupa estilos por contexto y usa comentarios para una mejor localización.

Architecting CSS

Vía / Digg

|

Reglas para maquetar varios elementos con CSS

ByLuis

Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas:

CSS Tutorials – Understanding Multiple Element Formatting Rules

Vía / Pixel Groovy

|

Laboratorio: indicativo de idioma y target en los enlaces mediante CSS

ByLuis

En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.

La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.

Contaremos con dos imágenes: una para indicar un enlace externo (abrir.gif) y otra para indicar el país (inglés en este caso gb.png). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.

Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.

a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}

Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.

Ejemplo

|

Crea una guía de estilos

ByLuis

Un gran consejo que deberíamos llevar todos a cabo, es crearnos una guía con los estilos que tiene nuestra aplicación. No solo si trabajamos en nuestro propio diseño, porque siempre se nos acaban olvidando y podemos caer en el error de crearnos estilos repetidos, sino también para cuando trabajamos en proyectos grandes y o bien los estilos ya están creados pero no los conocemos, porque una cosa es leer un css y otra es adivinar que pinta tiene, o bien porque creamos alguno para que se sepa que existe.
cssguide.png
Uno de esos documentos que odiamos hacer, pero que siempre echamos de menos tener.
Creating a Style-Guide for your site
Vía / SitePoint

| |

Selecciona tu hoja de estilos mediante PHP

ByLuis

En 456 Berea Street nos muestran una forma muy interesante para poder mostrar tu página con diferentes hojas de estilo. Tiene el inconveniente de que solo admite dos estilos entre los que elegir.

Funciona aunque el javascript esté desactivado, pero no cuando estan desactivadas las cookies, pero no daría error, tan solo visitaríamos siempre la misma página.

El funcionamiento es sencillo, disponemos de dos directorios, cada cual con las hojas de estilo que nos interesa. Habrá un enlace a una página que cuando accedemos a ella nos cambiará de directorio, guardará el valor en una cookie y nos devolverá a la página a la página desde la que hemos hecho la llamada o a la raíz si no existía esa página. Y luego en cada página deberemos obtener el valor del directorio de las cookies y usarlo para recuperar la hoja de estilo correspondiente.

El script que se encarga de cambiar de directorio es el siguiente:

<?php
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";
setcookie("layout", $layout, time()+31536000, '/');
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";
header("Location: $ref");
?>

Y luego en cada página tendremos que incluir lo siguiente:

Para recuperar el directorio.

$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";

Para seleccionar el estilo correcto.

<style type="text/css" media="screen,projection">
@import '/css/<?php echo $layout; ?>.css';
</style>

Build your own PHP style sheet switcher

|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy