aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Si alguna vez has intentado generar un mail en formato HTML sabrás los problemas con los que nos encontramos al visualizar dicho correo en los diferentes cliente disponibles, ya sean Offline u Online.

Para estos casos, es bueno tener una lista como esta con los estilos disponibles para cada unos de los clientes de correo, que pese a no cubrir todos los disponibles (imagino que debe de haber millones, entre offline y online) nos consigue dar una idea realmente clara de que estilos podemos usar y cuales no.

Si trabajamos con ello a diario, podremos descargarlo en formato PDF o en un formato Excel.

Hace un año y unos meses, Douglas Crockford proponía la creación de un nuevo tag HTML que nos permita facilitar la creación de Mashups. La propuesta sobre el tag <module /> intenta separar los componentes que forman un mashup dentro de nuestra página del resto de elementos.

<module id="NAME" src="URL" style="STYLE" />

El tag estaría compuesto de 3 atributtos que nos permitirán definir nuestro módulo. El atributo id, informaría el nombre del módulo, único en cada página. src la ruta en la que se encuentre el mashup y style haría que nuestro módulo se integre perfectamente en nuestra página.

Al igual en el arbol DOM, tendríamos 2 métodos que nos permitirían trabajar con el módulo, receive() y send(), ambos pasando estructuras json como parámetro al módulo. Estos métodos tendrían sus respectivas funciones desde la parte del módulo que harán posible la interacción con nuestra página.

Como Douglas dice, esta propuesta ofrece un intento de ser el principio de un consenso sobre un nuevo modelo de seguridad para los navegadores. El desarrollo de aplicaciones web han hecho aumentar la demanda de tecnología significativamente y los navegadores, necesitan ponerse al día rápidamente.

Lamentablemente no he encontrado más información al respecto, por lo que metemo que se ha quedado en una simple propuesta al aire, pero la idea es realmente interesante.

Los chicos de Coding Horror, han escrito «Don’t Click Here: The art of Hyperlinkng«, un artículo muy interesante que Hector (Armonth) ha traducido al castellano para que no se nos escape ningún punto y podamos enlazar correctamente, o sin molestar en exceso a nuestro usuarios.

El artículo se compone de una serie de puntos que podemos usar a modo de guia: 

1. Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos.
2. El primer enlace es el más importante.
3. No abuses de los enlaces.
4. No alternes radicalmente el comportamiento de los enlaces.
5. No titules tu enlace como “Click aquí”.
6. No enlaces cosas que el usuario puede querer seleccionar y copiar.
7. No incluyas iconos en cada enlace.
8. No hagas el contenido dependiente de los enlaces para funcionar.
9. No ocultes tus enlaces.
10. No mezcles anuncios y enlaces. 
11. No ofusques tus URLs.

Para los más amantes del código unos consejos más 😀

1. Usa un texto descriptivo para tu enlace.
2. Indica el idioma del destino con hreflang=""
3. Usa rel="" siempre que puedas
4. Informa el atributo type="" para indicar el tipo de documento que vas a visitar.
5. Usa charset="" para que se pueda saber el charset del página destino.

Y recuerda,

NUNCA OLVIDAREMOS LA ACCESIBILIDAD. LOS ENLACES ENLAZAN

CORRECTO

 <script type="text/javascript">
    var el = document.getElementById("t"); 
    el.addEventListener("click", FUNCIONALIDAD, false);
</script>
 <a href="http:/...." id="t">Enlace correcto</a>

NO CORRECTO

<a href="#">Enlace NO Correct</a>

Muchas veces cuando nos ponemos manos a la obra para desarrollar una aplicación, no entran las ganas de ponernos a picar código y no nos paramos a pensar en la estructura que deberían tener nuestros HTML’s. Una buena solución a esto es tener una chuleta a mano que nos permite hacernos una idea rápida de lo que debemos hacer.

Actualmente tenemos tres formas de detectar o condicionar nuestra aplicación dependiendo del navegador con el que nos visita el usuario, el CSS, que mediante hacks podemos hacer que se apliquen unos estilos para unos navegadores u otros para los restantes, mediante javascript intentando acceder a elementos del DOM disponibles solo para algunos navegadores, condicionando la ejecución del script o directamente desde el servidor, mostrando una página para cada navegador.

Pero desde la aparición de nuevas versiones de HTML HTML 2.0, podemos condicionar esta problemática desde el propio HTML.

<img
   /src\x00="ie.gif"
 /''src\x00="firefox1_5.gif"
 /''src="firefox2_0.gif"
 /""src="gecko_others.gif"
   "s\x00rc="safari2.gif"
   "src="safari3.gif"
  ""src="konqueror.gif"
    src\x00="w3m.gif"
    src\x0c="opera.gif"
    src="others.gif"
    src="lynx.gif"
/>

De esta forma podemos detectar Firefox 2.0, Firefox 1.5, otros motores Gecko, Safari2, Safari3, Opera, IE, W3m, Lynx,…

[Demo]

Debido a que no hay un estandard respetado por todos los navegadores, no se puede decir que haya una forma correcta para detectar el navegador de usuario, es más todas lo son y todas nos ayudan a detectar el navegador en cada una de las capas que componen una página web.