El Comercio Digital

Webmaster Libre

Subtitulo del blog

Archivo de la categoría "(x)HTML"

DevBoi, referencias de HTML, CSS y Javascript en tu Firefox

Siempre viene bien tener a mano una referencia donde consultar nuestras dudas, para todos los que ya habéis convertido al Firefox en la navaja suiza del desarrollo web os traigo hoy DevBoi.

DevBoi es un plugin que instalará una completa referencia de HTML, CSS, el DOM y Javascript en el sidebar de vuestro navegador.

DevBoi

Además de las referencias incluídas en la instalación estándard podréis ampliar su soporte a otros lenguajes como PHP o Ruby on Rails

DevBoi: http://martincohen.info/products/devboi/

Vía Web Resources Depot

Las cosas de palacio van despacio, HTML 5 para 2022

No hace demasiado veía por ahí una oferta de trabajo (por cierto, busco trabajo por si alguien me quiere contratar) en la que pedían un desarrollador de front-end que fuera un fiera y que ya estuviera interesándose en CSS3 y HTML5.

La nueva especificación parecía haber despertado un nuevo interés por nuestro querido lenguaje de marcado y la gente empezaba ya a frotarse las manos con las novedades y ventajas de su quinta versión.

Ahora, viendo que hasta 2022 nada de nada, supongo que los de la oferta de arriba querrán a ese desarrollador super moderno para que vaya educando a sus hijos para que, dentro de ni más ni menos que 14 años sean los que lo disfruten.

¿No es deprimente? Algunos habremos muerto para entonces (vale, exagero un poco), si de verdad los plazos son tan largos a mi me va a coger con la friolera de 43 años y no quiero ni pensar las edades de los que sois algo mayores que yo (sin ánimo de deprimiros ¿eh?)

Y yo entiendo que un nuevo estándar no nace de la nada y que, si el HTML 4.01 está implementado desigualmente en los diversos navegadores meterles novedades puede ser labor de años pero ¿tantos?

Vale, se supone que mucho antes (entre 2009 y 2012) ya habrá una especificación lo suficientemente madura como para empezar a trabajar con ella, incluso vemos a los desarrolladores de navegadores empezar a jugar con algunas partes de lo que está por venir. Aún así, dejando las cosas en el limbo tantos años ¿no corremos el riesgo de que proliferen las interpretaciones propietarias del estándar?

Con cosas así uno entiende que aparezcan fundaciones y organismos paralelos ¿verdad?

Vía Wisdump

¿Se han convertido las listas en las nuevas tablas?

En nuestra ardua y ya larga lucha contra la maquetación con tablas, hemos sido muchos los que hemos descubierto las bondades del marcado semántico. Aún así todavía parece que no terminamos de comprender lo que realmente significa y cometemos errores de fondo.

Durante mucho tiempo se ha venido hablando de la versatilidad de las listas (ordenadas, desordenadas o de definición) para diversos menesteres como la creación de barras de menú e incluso hemos visto arriesgadas propuestas de estructuración de páginas mediante listas.

El problema es obvio, ¿una página web puede ser entendida en su totalidad como una lista? ¿Es realmente una lista, por ejemplo, el menú lateral (sidebar) de un blog?

En nuestro intento por renunciar a las tablas mientras mantenemos una estructura limpia sin elementos innecesarios hemos “pervertido” otro elemento para adaptarlo a nuestra conveniencia. Incluso hacemos experimentos y “evangelizamos” sobre las bondades de las listas sin pararnos a pensar lo que realmente significan.

El tema promete volverse controvertido, a fin de cuentas son muchos los “gurús” que nos sorprenden diariamente con aproximaciones realmente creativas basadas en listas, a pesar de que afrontan situaciones en las que otros elementos serían más adecuados.

Al final, la conclusión es la de siempre, debemos emplear el elemento más semántico a nuestra disposición o, en algunos casos, elementos neutros como los divs y spans que, a pesar de estar algo estigmatizados por su abuso, son elementos útiles para finalidades ajenas a la transmisión del contenido (véase, por ejemplo, para crear estructuras visuales).

Sin duda, el tema da para mucho, no sólo para leer si no para pensar y debatir; por eso os dejo unos cuantos artículos en inglés (lo siento, si hay interés podríamos traducir alguno) para profundizar un poco más en el tema y os invito a que aportéis vuestra opinión en los comentarios.

Un caso práctico de texto oculto para usuarios con necesidades especiales

Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.

David Walsh
comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):


<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>

Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.

Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…

Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.

Validación de XHTML y CSS en un solo paso

Las herramientas de validación del W3C son el pan nuestro de cada día. Supongo que a estas alturas estaremos medianamente concienciados de la necesidad de generar un código válido y acorde a los estándares.

Si hay algo “molesto” en estas herramientas es el hecho de tener que validar por un lado la hoja de estilos y por otro el HTML. No es que sea una tortura pero sería ideal poder validar nuestros sitios web de una sola sentada.

En estándares y accesibilidad, Gabriel Porras se hace eco de una herramienta que nos propone precisamente esto. Con el XHTML-CSS Validator podremos validar nuestros sitios de una sola pasada, eso si, sitios que se encuentren disponibles desde la red ya que la única forma de indicarle los documentos a validar es mediante una URL.

XHTML-CSS Validator

Una pena que tengan que venir terceros a mejorar las herramientas del Consorcio, una suerte por otro lado que haya terceros interesados en facilitarnos la vida.

Así que ya sabéis, como dicen los autores de este interesante validador “Se válido (valida) o muere aprendiendo” (Be valid or die learning)

XHTML-CSS Validator: http://xhtml-css.com/

pForm, generando formularios HTML en dos segundos

Se me ocurren un montón de situaciones en las que podemos agradecer tener a mano un generador de formularios como este.
Con pForm podrás tener un formulario en HTML (relativamente bueno) con un bonito estilo. Para ello sólo tendrás que seleccionar un esquema de color, escoger los campos y escribir las etiquetas que los acompañarán.

pForm

El resultado podréis descargarlo para integrarlo en vuestros sitios comodamente y gratis.

pForm: http://www.phpform.org/

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

La importancia de los estándares web para los proyectos y empresas modestos

Hoy, en el trabajo, surgió el ancestral debate “¿y por qué tanto lío para evitar maquetar con tablas?”. Por supuesto, un vistazo al código fuente de aplicaciones web como las de Google o el mismo Flickr, buque insignia de la web 2.0 no hizo más que sumar argumentos en mi contra ya que, como supondréis, me posiciono en favor de un marcado limpio. Como siempre, se sacó una conclusión errónea: “Eso de los estándares al final es para 4 frikis”.

No obstante, toda esta lata que damos los “estandaristas” tiene razón de ser y, en el caso de proyectos modestos o de empresas con recursos limitados (o sea, todas salvo las mega corporaciones), los estándares pueden suponer ventajas insospechadas para muchos:

  1. Las páginas pesan menos. Al minimizar el marcado en favor de las hojas de estilo y del uso correcto de selectores y etiquetas, creamos páginas más ligeras y que, por tanto, nos supondrán menos gastos de ancho de banda en nuestros servidores además claro de cargar más rápido y de forma más satisfactoria para nuestros usuarios
  2. El mantenimiento es más sencillo. Al emplear estructuras más sencillas y sin marcados innecesarios el mantenimiento es mucho más cómodo y simple. Además, el uso de un marcado completamente estandarizado facilita el traspaso de poderes entre desarrolladores.
  3. Nos ahorramos versiones extra como las páginas de impresión, la versión móvil o la versión accesible. Una página HTML bien desarrollada debería poder verse en cualquier navegador con un mínimo de calidad. En el peor de los escenarios, donde el usuario tenga deshabilitada la hoja de estilo, el HTML debería ser capaz por si sólo de transmitir el mensaje de nuestro sitio.
  4. Nos evitamos sustos futuros. Al utilizar un lenguaje bien regulado podemos descansar tranquilos sabiendo que nuestras páginas están a prueba de nuevas versiones de navegadores o nuevos dispositivos desde los que acceder a la red. No quiero decir con esto que nuestros sitios no vayan a necesitar algún retoque para verse al 100% en todos los navegadores pero, al menos, sólo serán retoques mínimos y generalmente en el ámbito del aspecto del sitio

A todo esto, además, podemos sumarle el gusto de hacer bien las cosas ¿Acaso eso no es suficiente?

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/

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)