El Comercio Digital

Webmaster Libre

Subtitulo del blog

Archivo de la categoría "CSS"

Editores de HTML, CSS, Javascript y PHP para Gnome (gtk)

Ayer, cuando os pedía consejo sobre editores de código para Gnome no me esperaba esa respuesta (gracias, de verdad). Ahora tengo un montón de ellos para escoger y creo que lo mejor es que los pongamos todos juntos en un artículo como referencia para futuros linuxeros desamparados. Cito por orden alfabético:

Algunos son completos IDEs, otros simples editores de código con resaltado de sintáxis y algunos son sólo para los más fuertes de ánimo.

Seguro que nos hemos dejado muchos en el tintero, una vez más quedan abiertos los comentarios, por si se os ocurre algún otro.

Una hoja de estilo para diagnosticar fallos en el marcado

De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo.
Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…), haciéndolas mucho más fáciles de localizar.

La hoja de estilo queda algo así (por supuesto, adáptala a tus necesidades)


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Sin duda, la Web Developer Toolbar ya nos sirve para esto pero, de esta manera, recibimos referencias visuales más concretas (sabremos de un vistazo qué está mal y por qué).

Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling

Frameworks para CSS

Con el furor de los frameworks para todos los lenguajes de programación era previsible que, tarde o temprano, alguien decidiera crear un framework para ensamblar hojas de estilo como churros (con todo mi respeto a los artesanos churreros). En principio suena bien, maquetar una página casi completa con facilidad mecánica empleando unas u otras clases e id predefinidos.

Blueprint, Tripoli, los grids de Yahoo… Todos ellos nos prometen sencillez y productividad, no obstante, el precio que suponen no vale el trato.

En primer lugar, cargar nuestros sitios con todo el código extra que contiene un framework completo (por muy modular que sea) es contraproducente. Pararnos a buscar por la hoja justo el trozo que vamos a usar es casi tanto trabajo o más que escribir los estilos nosotros mismos y, por muy comprimido que esté, es peso extra para nuestros sitios (con la consiguiente incomodidad para nuestros usuarios, costes extras en ancho de banda etc.).

Para empezar a ser realmente productivo con un framework es necesario aprender a utilizarlo, si ya sabemos escribir hojas de estilo será tiempo perdido en un conocimiento limitado.
Por supuesto, si no sabemos puede parecer muy buena idea empezar con gran parte del camino andado y dedicarnos sólo a lo bonito que queremos que sea el diseño y poco más. Por contra, tratar de eludir el aprendizaje puede suponernos serios quebraderos de cabeza.

Imagina que desaparece el framework, que no está demasiado bien documentado o que no tiene una comunidad fuerte alrededor. Todo tu esfuerzo para aprender a manejarlo habrá sido para nada y, tarde o temprano, tendras que afrontar el auténtico aprendizaje. Además, en caso de lenguajes complicados o con procesos de desarrollo largos y tediosos, es justificable el uso de frameworks e incluso recomendable. Escribir hojas de estilo es sencillo, comparado con los lenguajes de programación propiamente dichos es un juego de niños y, con un poco de práctica, escribiras tus estilos tan deprisa o más que apoyándote en frameworks.

Además, es imposible preveer todas las necesidades de maquetación y estilos que tendrá cada sitio. Si buscamos dotar a la web de un significado semántico tendremos que aprender a etiquetar las cosas correctamente y a emplear los elementos html de forma correcta. A apoyar nuestros estilos en ellos y no manchar todo el código con clases e id de nombre criptico y ningún significado (si aún no la habéis leído os recomiendo la traducción que hice del artículo: Div Mania).

No obstante, la idea que se trasluce de estos frameworks no es inútil en si misma. Disponer de un set de herramientas con el que aligerar ciertos trabajos rutinarios.
Me gusta entender al desarrollo web como una especie de artesanía de nueva generación. Los orfebres, artesanos de la plata, dentro de su proceso de aprendizaje y como conocimiento útil para el resto de su vida, aprenden y crean su juego de buriles. De esta manera, disponen de un set de herramientas tan completo y extensible como quieran. Sea cual sea la necesidad, buril más ancho, más estrecho, más o menos afilado, son capaces de crear uno y empezar a trabajar en seguida.
Por eso, lo que si me parece una idea genial, tanto para aprender como para aligerar trabajo es crearse una caja de herramientas con todos esos elementos que tú empleas tan a menudo. Sólo tu sabes tus manías, sólo tu conoces a fondo tu manera de escribir estilos. Al ser tu propio trabajo te resultará sencillo encontrar y emplear justo esa pieza de código que necesitas. Incluso, en lugar de crear archivos css enormes o decenas de ellos chiquititos, puede interesarte crear un wiki o algo por el estilo donde realizar consultas rápidas (puedes emplear alguna solución tipo TiddlyWiki que no necesita servidor web ni base de datos y es muy sencilla de utilizar).

Vosotros ¿qué opináis? ¿utilizáis frameworks para css? ¿tenéis un set de herramientas básico o empezáis de cero siempre?

Colección de bugs de los navegadores al mostrar páginas web

Sin duda, una de las partes más incómodas del desarrollo web es cuando toca ir abriendo las páginas en infinidad de navegadores de diversos sistemas operativos. Por mucho que nos esforcemos, hay bugs en todos ellos (algunos más, otros menos pero no hay navegador perfecto). Gérard Talbot ha recopilado un listado de estos bugs en los navegadores más conocidos: Mozilla, Internet Explorer 6, Opera 9 e Internet Explorer 7.

Browser Bugs

Seguro que le saco mucha utilidad, no va a solucionarme todos los problemas pero seguro que me ayuda a dar antes con ellos.

http://www.gtalbot.org/BrowserBugsSection/

LibrosWeb.es: Libros gratuitos, para desarrolladores web

Portada de la guia de inicación al CSS de LibrosWeb

A través del blog de Leandro D’Onofrio conozco Libros Web, un sitio en castellano donde nos ofrecen algunos libros traducidos a nuestra lengua para leer online o imprimir.

Por el momento tienen sólo tres libros: una guia de Symphony, Introducción a CSS e Introducción a XHTML pero, por lo que veo en su sitio, parece que pretenden ampliar esta colección con más libros traducidos para desarrolladores web.

LibrosWeb.es pretende publicar varios libros gratuitos sobre diseño web y aplicaciones relacionadas

Esperemos que se mantengan gratuitos o a bajo precio en un futuro (Yo pagaría algo por poder descargar los libros en PDF, ahí va una idea…)

LibrosWeb: http://www.librosweb.es/

Los estándares web y los negocios, casos prácticos

The Business Case for Web Standards

Seguro que alguna vez has escuchado ese argumento, que no por mucho que se repita es cierto, de que los estándares web no tienen cabida en el ámbito de los negocios. Se puede tratar de rebatir con argumentos pero, sin duda, lo que mejor convence a alguien son los ejemplos de uso.

The Business Case for Web Standards es un wiki en el que, a pesar de los spammers que ya han tomado la página principal, pretenden recopilar ejemplos reales de uso (o no uso) de estándares web en aplicaciones y sitios con caracter comercial. Sin duda, la lista de factores a favor es más que interesante, de entre todos destaco:

  • Facilitan el desarrollo distribuido: Al adoptar unas prácticas estandarizadas se elimina la necesidad de explicar el código
  • Control de calidad: Disponemos de una especificación contra la que validar nuestro código para garantizar cierta calidad
  • Distribución en múltiples canales: Como mantenemos separado el html de los estilos y el javascript podemos aplicar con facilidad diferentes estilos (para imprimir o para dispositivos móviles, por ejemplo)

Por el momento faltan argumentos en contra que tengan algo de fundamento.

The Business Case for Web Standards

Di adiós a los hacks en tu CSS para siempre

Sin duda, con la salida de Internet Explorer 7 muchos sentimos la necesidad de que todos nuestros usuarios actualicen para poder desplegar nuestro arsenal de estilos avanzados sin necesidad de comentarios condicionales, hacks y trucos varios.
Lamentablemente, la tasa de usuarios de Internet Explorer 6 e incluso inferiores se mantiene estable.

Dean Edwards, cansado de tener que ensuciar su código para hacerlo funcionar en navegadores que no soportan los estándares, creó hace ya un par de años una librería muy interesante en Javascript: IE7.

IE7 se encargará de servir a estos navegadores “no acordes a los estándares” una versión del estilo que puedan interpretar correctamente.
Gracias a IE7 podrás emplear selectores avanzados, PNG transparentes, posicionamiento fijo (sin parpadeos), arregla etiquetas rotas (como abbr) etc.

IE7: http://dean.edwards.name/IE7/

jscsscomp: Comprimiendo nuestros CSS y Javascript con PHP

No hace mucho hablábamos de la conveniencia de unir nuestros archivos CSS y Javascript de forma que minimizasemos las peticiones al servidor y, a su vez, de comprimir el resultado.

jscsscomp es un script PHP basado en JSMin y algunas ideas de Patrick Hunlock, que se encargará de las labores de compresión y optimización de nuestros archivos de forma dinámica, guardando los resultados en caché.

Recuerda, todavía es un script en desarrollo y puede dar fallos, usadlo bajo vuestra responsabilidad.

Pagina del proyecto jscsscomp (en Google Code)

Firefox como una completa herramienta para validar tus sitios web

Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.

Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.

Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:

Validar nuestro HTML y CSS

HTML Validator:
HTML Validator

HTML Validator te indicará si hay errores o advertencias de validación en tu código mediante un icono en la barra de estado.

Podrás acceder a los detalles de los errores mirando al código fuente de la página.

Esta extensión está basada en Tidy y OpenSP (SGML Parser).

Offline Page Validation:

Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.

CSS Validator

Valida tus hojas de estilo mediante el servicio del W3C

Comprobar la Accesibilidad

HERA
HERA Toolbar

La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.

TAW3 en un click

TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0

Colour Contrast Analyser

Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes

Fangs Screenreader Emulator

Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla

Firefox Accesibility Extension

Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto

Herramientas “todo en uno”

Webdeveloper Toolbar
Webdeveloper Toolbar: Menu de validacion

Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…

Total Validator

La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click

Checky
Checky

Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más

Sticky Footer: Una solución sencilla para tus pies de página

Seguro que alguna vez te has visto en problemas para mantener el pie de tus páginas en su sitio, abajo del todo. Ya vimos, en este mismo blog, una aproximación que nos permitía conseguir que los pies de página se mantuviesen en su sitio. No obstante, aquella solución nos obligaba a emplear atributos de estilo propietarios y no válidos.

Ryan Fait llega a otra solución que, en lugar de requerir etiquetas no válidas, requiere un div extra y poco más.

El CSS es algo tan simple como:


* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em; /* el margen inferior es el valor del pie en negativo */
}
.footer, .push {
	height: 4em; /* .push y .footer deben tener la misma altura*/
}

Pero lo mejor es que veáis el ejemplo y echéis un vistazo al código.

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)