Albert L.G. Blog!

A estas alturas aprendo cómo lanzar una Pop-Up

Y es más: no me da vergüenza reconocerlo. :P
El mundo del webmaster es un no parar de aprender y reaprender cosas... quizá por eso me guste. Incluso los hay que se enorgullecen cuando me enseñan algo que no sabía (eh Rodrigo?), y los que me piden que siga escribiendo más y escuchando menos música (eh Tito Tommy?).

En fín, a lo que íbamos: lanzar ventanas Pop-Up con JavaScript. Pues resulta que, independientemente de las discusiones acerca de usar o no una pop-up, hay un problema que las corrompe sistemáticamente, que las hace perversas, que agrede a usuarios avanzados y principiantes en su navegación, confunde a los buscadores, y genera ruido en el código. Este problema es que, existiendo varias formas de lanzar una Pop-Up con código Javascript, las más usadas son las incorrectas.

La forma correcta de lanzar una ventana Pop-Up con Javascript

El siguiente es el código a utilizar para lanzar una Pop-Up:
<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>
Lanzar correctamente

Simplemente cambiar en href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en píxeles).

Para más información: NSU.

Lista de comprobación de estándares web

He traducido la "checklist" original de A Web Standards Checklist, en MaxDesign.

Antes de empezar, aclaremos conceptos:

• ¿Qué son los estándares web?
  
  La expresión 'estándares web' puede significar cosas diferentes según para quién. Para algunos no es otra cosa que construir sitios web sin tablas, para otros se trata de hacerlo usando código válido. De cualquier manera, el concepto es mucho más amplio que esto. Los estándares web podrían ser definidos como:
  
  
  La adherencia a los estándares (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG, etc.) y la búsqueda de las mejores prácticas (código válido, código accesible, código semánticamente correcto, URLs amigables para el usuario, etc.).
  
  En otras palabras:
  
  
  Un sitio construido de acuerdo a los estándares de la web debe ser magro, limpio, basado en CSS, accesible, usable y amistoso con los motores de búsqueda.


• Acerca de la lista
  
  No se trata de una lista cerrada. Probablemente hay muchos puntos que podrían ser añadidos. Simplemente es un punto de partida. Entre sus usos prácticos, incluye:
  
  
  • Demostrar la amplitud de los estándares web.
  • Como una herramienta práctica para los desarrolladores durante la fase de la producción de sitios web.
  • Como una ayuda para los desarrolladores que están interesados en la migración hacia estándares web.
  
  La lista se divide en 6 categorías:
  
  
  • Calidad del código
  • Grado de separación entre el contenido y su presentación
  • Accesibilidad para usuarios
  • Accesibilidad para dispositivos
  • Usabilidad básica
  • Gestión del sitio

La lista de comprobaciones:

• Calidad del código
  
  1. ¿Usa el sitio un correcto Doctype?
  
  http://www.w3.org/QA/2002/04/valid-dtd-list.html
  
  2. ¿Usa el sitio un juego de caractéres (charset)?
  
  http://www.w3.org/International/O-charset.html
  
  3. ¿El sitio utiliza código (X)HTML válido?
  
  http://validator.w3.org/
  
  4. ¿El sitio utiliza código CSS válido?
  
  http://jigsaw.w3.org/css-validator/
  
  5. ¿Usa el sitio cortes (hacks) en el código CSS?
  
  6. ¿Usa el sitio 'clases' o 'ids' innecesarias?
  
  7. ¿Está el código bien estructurado?
  
  http://www.w3.org/2003/12/semantic-extractor.html
  
  8. ¿Contiene el sitio algún enlace roto?
  
  http://validator.w3.org/checklink
  
  9. ¿Cómo responde el sitio en términos de velocidad y peso de sus páginas?
  
  http://www.websiteoptimization.com/services/analyze/
  
  10. ¿Tiene el sitio errores de JavaScript?


• Grado de separación entre el contenido y su presentación
  
  1. ¿Utiliza el sitio CSS para todos los aspectos de la presentación (tipografía, colores, márgenes, bordes, etc.)?
  
  2. ¿Están todas las imágenes decorativas dentro del código CSS, o aparecen en el código (X)HTML?


• Accesibilidad para usuarios
  
  1. ¿Se utilizan los atributos "alt" para todas las imágenes descriptivas?
  
  2. ¿El sitio utiliza unidades relativas en lugar de absolutas para el tamaño del texto?
  
  3. ¿Se rompen algunos aspectos de la disposición si se aumenta el tamaño de fuente?
  
  4. ¿El sitio utiliza menús de salto visibles?
  
  5. ¿Usa el sitio formularios accesibles?
  
  6. ¿Usa el sitio tablas accesibles?
  
  7. ¿Hay suficientes brillos / contrastes de color?
  
  8. ¿Está usado el color sólo para la información crítica?
  
  9. ¿Existe un retraso en la respuesta de los menús desplegables 'dropdown' (para los usuarios con habilidades motoras reducidas)?
  
  10. ¿Son todos los enlaces descriptivos (para usuarios invidentes)?


• Accesibilidad para dispositivos
  
  1. ¿Funciona el sitio aceptablemente en los navegadores modernos y los más viejos?
  
  2. ¿El contenido es accesible con el CSS desactivado o no soportado?
  
  3. ¿El contenido es accesible con las imágenes desactivadas o no soportadas?
  
  4. ¿El sitio funciona en navegadores de texto tales como Lynx?
  
  5. ¿El sitio funciona bien cuando está imprimido?
  
  6. ¿El sitio funciona bien en los dispositivos de mano?
  
  7. ¿El sitio incluye metadatos detallados?
  
  8. ¿El sitio funciona bien en un rango de los tamaños de la ventana del navegador?


• Usabilidad básica
  
  1. ¿Existe una jerarquía visual clara?
  
  2. ¿Son los niveles del encabezamiento fáciles de distinguir?
  
  3. ¿El sitio dispone de una navegación fácil entender?
  
  4. ¿El sitio utiliza una navegación consistente?
  
  5. ¿Los enlaces están subrayados?
  
  6. ¿Utiliza el sitio un lenguaje consistente y apropiado?
  
  7. ¿Dispones de un mapa del sitio y una página de contacto? ¿Son fáciles de encontrar?
  
  8. Para los sitios grandes, ¿hay una herramienta de búsqueda?
  
  9. ¿Hay un enlace a la página principal o de entrada en cada página del sitio?
  
  10. ¿Los enlaces visitados se definen claramente con un color único?


• Gestión del sitio
  
  1. ¿El sitio tiene una página de error 404 significativa y de ayuda que funcione a cualquier profundidad en el sitio?
  
  2. ¿El sitio utiliza URLs amigables?
  
  3. ¿Tus URLs funcionan sin "www"?
  
  4. ¿Dispone el sitio de un favicon?

MOZiE, el imprescindible

Esta herramienta nos va a solucionar mucho las cosas a los maquetadores:
MOZiE.

Básicamente, MOZiE es una aplicación gratuita para entornos Windows que nos permite comparar la renderización de una página web en Mozilla e Internet Explorer simultáneamente. Aunque nos ofrece otras funcionalidades, no menos útiles, como por ejemplo la emulación de resoluciones de pantalla.

Testeo de estándares y accesibilidad

Joe Clark nos proporciona una lista de enlaces para el testeo de estándares y accesibilidad.

Lo he encontrado leyendo webstandards.org.

Lorem ipsum...

Todos conocíamos el recurso lipsum.com (o no).

Ahora he encontrado una versión "mejorada", con más opciones: lorem-ipsum.info.
Quizá la más destacable (de las nuevas opciones que nos ofrece este recurso), sea la posibilidad de cambiar el charset.

CSS: Modelo de caja 3D

Hoy he encontrado este diagrama...

Muy clarificador, ¿no creéis?. ¡Ay! Si te hubiese conocido antes...

Lo he encontrado leyendo hicksdesign.co.uk.

[!] 02-05-04:
Por cierto, Jon Hicks lo ha actualizado (ha añadido líneas para delimitar mejor las zonas y ha cambiado la imagen de fondo para hacerla más obvia). Y podeis encontrar una versión interactiva del modelo.

Otros recursos CSS:

• W3C Box Model
• TheNoodleIncident Box Lessons
• Tantek Box Model Hack
• CSS-Discuss Box Model Hack
• BrainJar CSS Positioning
• WPDFD Issue 54
• Listamatic: IE Box Model and Doctypes Modes
• QuirksMode Box Model Tweaking
• Jessey CSS Box Model
• CopySense Box Border Test

Y lo que vendrá:

• CSS3 Module: The Box Model