Categoría: Programación
2 Febrero 2006
HTML bien formado simplemente significa HTML conforme a las reglas de XML.
La industria se mueve hacia los documentos bien formados como una vía de incrementar la robustez de la www, mientras simplifica y acelera el procesamiento de los datos y documentos bien formados. Los documentos bien-formados tienen grandes ventajas para las herramientas y pueden beneficiar a sus autores asegurando que el marcado no es ambiguo. Las expectativas de la industria son que el futuro del HTML estándar serán aplicaciones XML.
El precio a pagar por estos beneficios es que se tendrá que usar una sintáxis menos indulgente.
Escribir HTML bien formado es simple. A continuación, algunas reglas básicas a seguir para crear o convertir HTML en documentos de calidad.
Todas las etiquetas deben cerrarse.
HTML permite que ciertos finales de etiquetas sean opcionales, como son <p>, <li>, <tr> y <td>. XML requiere que todas las etiquetas sean cerradas de forma explícita.
Algunas etiquetas deben ser cerradas colocando una barra dentro de la propia etiqueta. Los ejemplos más comúnes son <br>, <hr>, <input> o <img>.
La intercalación de etiquetas no está permitida.
XML no permite que etiquetas de inicio y fin se solapen, ya que hace incluir una estricta estructura jerárquica dentro del documento.
Las mayúsculas importan.
Use las mayúsculas/minúsculas de forma coherente para el inicio y fin de las etiquetas. Los ejemplos normalmente usan mayúsculas para los elementos HTML.
Ojo. Según XML y XHTML no se pueden usar mayúsculas, pero bueno, esto es HTML.
Es obligatorio entrecomillar los atributos.
Todos los atributos deben estar enmarcados por comillas, ya sean simples o dobles.
Utilice una sola raíz.
Los atajos que eliminan el elemento <HTML> como el elemento raíz del documento no están permitidos.
Pocas entidades incorporadas.
XML sólo define un mínimo conjunto de entidades de caracteres incorporados.
Aún así, las entidades de caracteres numéricós están soportados.
Utilice caracteres de escape para los comandos de script.
Los bloques de script en HTML pueden contener caracteres no interpretables, como < y &. Estos deben ser escapados en HTML bien-formado usando entidades de caracter, o enmarcándolos dentro de un bloque de script en una sección CDATA.
El siguiente bloque de script HTML contiene ambos caracteres no interpretables y un comentario en JScript. El bloque bien formado usa CDATA para encapsular el script.
No todos los scripts fallarán si no son "escapados" de esta manera. Sin embarque, es altamente recomendable que se tome esta manera de proceder como un hábito. Así se asegurará de que, no sólo el script trabajará trabajará si contiene los caracteres de escape o comentarios ahora, sino que continuarán funcionando si esos caracteres son añadidos en el futuro.
html | xml | reglas | well formed
servido por tresonce
sin comentarios
compártelo
12 Enero 2006
El siguiente artículo es para ti. Sí, sí, para ti. Tú, que no le has dado la importancia que tiene a la accesibilidad, seguro que ahora te interesará. Por qué?, pues es bien sencillo: Tu sitio web se verá beneficiado, estará más localizable para aquellos que intenten buscarlo en Google. Va en serio. Que cómo puedes hacerlo?, sigue leyendo y te lo explico:
Identifica el lenguage de tu documento
Si escribes en inglés, pero sobre todo si lo haces en otro idioma. De acuerdo con Google Zeitgeist, el 50% de los usuarios de Google buscan en lenguajes diferentes del inglés, y muchos de ellos especifican en sus preferencias de Google el buscar solo en páginas de lenguajes específicos. Los algoritmos de auto-detección de lenguaje de Google son mejores que la mayoría pero, por qué dificultarles el trabajo?
Construye títulos de página que tengan sentido
Google muestra el título de la página en sus resultados de búsqueda, y valora mejor las palabras cuando aparecen en el título. Es una cosa a tener en cuenta (y pararse a pensar en un buen título no va a matar a nadie).
Presenta el contenido principal al principio de la página
Google da más importancia al contenido que se encuentra en la parte superior de la página. Pero ojo, me refiero a tu código HTML, no a la parte superior visible de tu página. De hecho, mucha de la gente que sabe acerca de estas técnicas están en la industria de optimización de motores de búsqueda. Para ellos, los beneficios en cuanto a accesibilidad son secundarios.
Usa links reales
Google tiende a seguir enlaces para encontrar e indexar más contenidos, pero lo que no puede hacer es seguir enlaces "javascript:", porque su motor no interpreta código javascript al realizar este proceso.
Define acrónimos
Google indexa el título del acrónimo al mismo tiempo que indexa el acrónimo en si mismo, de manera que la gente pueda encontrar tu sitio tanto si busca por el acrónimo como por su significado.
Proporciona texto equivalente para las imágenes y mapas de imágenes
El robot de Google indexa los textos alternativos, los cuales son usados no sólo como palabras clave en las búsquedas normales, sino también en las búsquedas de imágenes. De la misma manera, indexa el texto alternativo de cada área dentro de un mapa de imagen. Los textos alternativos tienen más relevancia de la que piensas.
Utiliza los headers con coherencia
Google aprecia las páginas bien estructuradas, y valora más alto aquellas palabras clave que aparecen en headers reales (otra razón más para escribir títulos de posts con sentido).
accesibilidad | google | trucos
servido por tresonce
4 comentarios
compártelo
26 Diciembre 2005
En ocasiones visito sitios web en los que resulta totalmente imposible navegar, e incluso en algunos ni siquiera consigo entrar.
El caso es que algunos tienden a diseñar en exceso con javascript, sin darse cuenta de que eso puede imposibilitar el acceso a su sitio.
Según estudios de hace algún tiempo, aproximadamente un 11% de usuarios de la web no usan JavaScript, por una razón u otra, incluidos muchos usuarios cuyos navegadores simplemente, no soportan esta tecnología.
Si los ejemplos de este post no te convencen y decides seguir con estas prácticas, si no quieres hacerlo por los demás, entonces hazlo por ti mismo, ya que debes saber que Google no puede seguir los enlaces JavaScript, con lo que le será imposible indexar esas parcelas de tu web que están codificadas de esta manera.
Por último, para ti, usuario, si quieres activar el intérprete de JavaScript en tu navegador, sigue estas instrucciones:
Netscape 2: Opciones > Preferencias de seguridad > General > Desactivar JavaScript (debe estar deshabilitado)
Netscape 3: Opciones > Preferencias de la red > Lenguajes > Activar JavaScript
Netscape 4: Edición > Preferencias > Avanzado > Activar JavaScript
Explorer: Vista > Opciones > Seguridad > Ejecutar scripts ActiveX
Firefox: Herramientas > Preferencias > Características Web > Activar JavaScript
javascript | azote | diseño | web | accesibilidad
servido por tresonce
4 comentarios
compártelo
17 Octubre 2005
TresOnce no va sólo de usabilidad, también gusta de incluir recomendaciones acerca de accesibilidad y estándares. Y como ejemplo, a continuación una lista de pautas a seguir para conseguir que nuestras páginas web resulten accesibles, aspecto que muchas veces tendemos a dejar de lado en favor del diseño atractivo.
1. Imágenes y animaciones: Use texto alternativo (atributo alt) para describir la función de los elementos visuales.
2. Mapas de imagen. Use mapas de cliente y texto alternativo para las zonas activas.
3. Multimedia: facilite subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos no accesibles.
4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, no usar
5. Organización de las páginas: Use encabezados (H1, H2, H3, ...) , listas y estructura consistente. Use hojas de estilo en cascada (CSS) para maquetación y estilo, donde sea posible.
6. Gráficos de datos. Resuma o use el atributo longdesc.
7. Scripts, applets y plug-ins. Ofrezca alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan soporte.
8. Marcos (Frames). Etiquete con los atributos title o name.
9. Tablas. realícelas de manera que se puedan leer línea a línea. Incluya un resumen. Evite el uso de tablas para dar formato a las páginas.
10. Revise su trabajo. Valide el código HTML. Use herramientas de evaluación y navegadores sólo-texto para verificar la accesibilidad.
En mi opinión, y según mi experiencia como usuario de internet avanzado que me considero, compruebo a diario que la gran mayoría de los sitios web canarios pecan de deficiente y en ocasiones nula accesibilidad. En principio tenía pensado que el artículo mostrase ejemplos de websites canarios que cumpliesen dichas recomendaciones, pero no imaginan lo que me costó siquiera encontrar una web que tuviese imágenes con texto alternativo (sólo por eso, merece una mención la página del Festival Canarias Jazz & Más Heineken 2005).
La mayoría de páginas que usan marcos utilizan nombres tan "descriptivos" como Top o Central.
Raro será ver que alguien utilice las tablas para otra cosa que no sea maquetar la web, pocos usan hojas de estilo (los que las usan se limitan a un par de toques, pero nada de estructura), pero lo que es brutal es el uso (o más bien abuso) de animaciones flash sin ninguna alternativa para los que no puedan visualizarlas.
Lo dicho, y siento repetirme, pero en Canarias estamos aún en pañales con respecto a estos temas. :(
guía | accesibilidad | web
servido por tresonce
70 comentarios
compártelo
1 Octubre 2005
Me entero por la lista de cadius de que existen algunas extensiones de Firefox muy interesantes para el desarrollo de websites.
Entre las más interesantes, IE View, que permite visualizar la página construida tal y como lo haría Internet Explorer, Link Checker hace una comprobación de los enlaces de la web, para detectar links rotos o defectuosos, y Measure It, que dibuja una regla sobre la página para medir el tamaño y señalar la alineación de cualquiera de los objetos que haya en ella.
Como particularidad, una extensión principalmente dirigida a personas con deficiencias visuales es Zoomy, que permite cambiar el tamaño del texto de una página mediante botones en una barra de herramientas.
Resultan herramientas interesantes para probar, ya que están perfectamente integradas con el navegador, cosa novedosa.
firefox | web | extensión
servido por tresonce
1 comentario
compártelo
14 Septiembre 2005
Como ya aclaro en la portada de este site, no es mi intención decir qué se debe y que no se debe hacer en esto del diseño web, pero creo que la utilización de frames a la hora de hacer una página es una de las cosas más desaconsejables que puede haber.
Voy a explicar a continuación los numerosos inconvenientes que tiene el hacer uso abusivo de este recurso.
- Al llegar a una de las páginas contenidas en una estructura de marcos desde un buscador, por ejemplo, se pierde la referencia con el resto de los frames, con lo que el efecto que se perseguía queda en nada, pudiendo incluso anular la funcionalidad en solitario de eso marco.
- No todos los navegadores reaccionan correctamente ante una estructura de frames, ya que se trata de una extensión del HTML, y no forma parte del estándar. Aún así, a día de hoy, la mayor parte de navegadores web los visualizan correctamente, pero no sucede lo mismo cuando accedemos a través de dispositivos móviles como pda o teléfonos multimedia.
- Los botones de atrás/adelante del navegador no tragan bien algunas combinaciones de marcos y resultan en un comportamiento incorrecto, cargando lo que no deben donde no corresponde.
- Cuando añades a tus favoritos un website definido con frames, este enlace tendrá que ser con la portada, y no con un lugar específico del sitio, con lo que siempre tendrémos que pasar por ella.
- El problema del tamaño de pantalla se acentúa. Si diseñamos con frames estamos limitando el espacio restante para las páginas que normalmente van a contener la información, con el perjuicio que esto supone.
Ni que decir tiene que siempre puede haber alguna excepción, y que también puedo equivocarme, pero es que los frames me matan! ;)
frames | usabilidad
servido por tresonce
2 comentarios
compártelo
Tres Once pretende contener mis reflexiones, opiniones y puntos de vista acerca de la usabilidad web en Canarias, sobre todo en páginas web creadas en las islas.
Aunque el tema central sea ese, habrá días en los que me permitiré alguna licencia para tratar sobre cualquier otra cosa, como una de mis grandes aficiones, la fotografía, que pa' eso el blog es mío. ;)
