Según esta página, parece ser que los noruegos también están hartos de IE6. Por ello, nos ofrecen una nueva propuesta no intrusiva que ha arrancado con fuerza.

Se trata incluir un mensaje en la cabecera de la página, de manera similar a la imagen superior. Para ello, podemos utilizar el siguiente código, que al ser un comentario condicional que solo IE entiende, se puede incluir en todas las páginas sin usar detección de navegadores:

   1. 

Desde Maestros del web están encantados con esta iniciativa y nos ofrecen también los estilos que ellos han utilizado.

   1. #usuarios-ie {font-family: Verdana, Arial, sans-serif; background: #FFFFDE;color:#000; border-bottom: 2px solid #7F0C00;}
   2. #usuarios-ie p {font-size: 1.3em; margin: 0; padding: 5px 0; line-height: 1.5em;}
   3. #usuarios-ie a {text-decoration: underline; font-weight: bold; color: #D64411;}

¿Que os parece?

Existen diferentes técnicas de análisis de usabilidad de una web. El test heurístico es una técnica que nos puede resultar muy interesante por su eficacia, su relativa rapidez de utilización y su facilidad de uso.

Los heuristics son una serie de factores de usabilidad que deben ser considerados a la hora de realizar un análisis de una web.

Seguir leyendo »

La sencillez, características avanzadas y un fuerte apoyo, son los argumentos más comunes para los desarrolladores que prefieren jQuery contra otros frameworks de JavaScript. Definiendo jQuery podemos decir, que consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

De hecho, jQuery es uno de los frameworks de JavaScript más populares, con potentes herramientas que pueden mejorar significativamente la interacción del usuario con las aplicaciones Web. jQuery tiene una ventaja adicional, ya que permite a los desarrolladores seleccionar elementos en una página usando CSS como sintaxis.

Características de jQuery

• Selección de elementos DOM.
• Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
• Eventos.
• Manipulación de la hoja de estilos CSS.
• Efectos y animaciones.
• AJAX.
• Soporta extensiones.
• Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
• Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+.

Para ayudarte a mejorar tus habilidades, en este artículo podras acceder a 50 nuevas técnicas útiles de jQuery y tutoriales que se han creado recientemente y que podría hacer que el desarrollo de tu sitio web sea una experiencia más fácil y más interesante que la anterior.

Ver 50 técnicas útiles con jQuery

Fuente: SmashingMagazine

El HTML semántico aporta grandes beneficios en nuestra Web, en cuanto a usabilidad, accesibilidad, posicionamiento en buscadores y también a la hora de modificar el código.

¿Qué es exactamente el HTML Semántico?

La semántica es el estudio del significado, cómo es creado y cómo se aplica a los signos. El cual nos permite dar un significado al contenido que escribimos.

Algunas etiquetas HTML serán contenido, como imágenes, películas Flash, metadata, etc. Pero la mayoría de las etiquetas o tags tendrán como finalidad brindar estructura al contenido. Las etiquetas HTML sirven para organizar y dar significado al contenido, usandolo de manera coherente y significativa.

Ejemplos de uso del Marcado Semántico:

• Las etiquetas <p> y </p> sólo deberían ser usados para indicar un párrafo (característica de la estructura). Nunca debería ser usado para agregar espacio, hay muchos que utilizan las eqtiquetas </p> para generar espacios.
• Las etiquetas <b> y </b> (para la negrita o bold) y <i> e </i> (para la cursiva o itálica) no deberían usarse nunca, porque son propios del formateo de texto, y no de la estructura del contenido. No estamos dando significado alguno a ese texto, simplemente lo estamos modificando su formato. En cambio <strong> y </strong> (gruesa) y <em> y </em> (de énfasis, en inglés) son apropiadas. Obtendremos el mismo resultado pero le darán significado a la estructura del contenido.

Separa siempre los estilos del contenido:

En el HTML no se deben aplicar los estilos, ya que para eso existen las hojas de estilos CSS, que se encargan de este trabajo. De esta manera nuestro código estará “más limpio”

¿Por qué el HTML Semántico es mejor?

• Facilidad: Conseguiremos un código más limpio. Mucho más fácil de leer y modificar. Además favorece la colaboración entre desarrolladores, a la hora de que una desarrollador tenga que implementar dicha plantilla le será mucho más fácil de trabajar y la carga será menor, ya que el peso de las páginas es menor.
• Accesibilidad: Aplicando la semántica a nuestro código HTML, facilitara de manera muy importante en conseguir que nuestra página Web sea accesible, y más facil de adaptarla a dichas prioridades.
• SEO: Los robots y spiders como Googlebot entienden mejor el HTML Semántico, por lo que nuestros sitios serán mejor indexados, lo que se reflejará en nuestro posicionamiento y en el aumento de tráfico.
• Rediseño: Cuando el contenido está separado del estilo (usando CSS, por ejemplo), la estructura es mejor comprendida por user agents, incluyendo lectores de feeds RSS, móviles, spiderbots, etc. Con el auge del open-source y los usuarios que crean aplicaciones, widgets, etc. que obtienen contenido de nuestra página, la información será mejor comprendida, lo que también implica un beneficio para nosotros.

Esto es solo una pequeña introdución a la semántica HTML. Siempre surgen dudas de cual es el marcado correcto, ya que nos podemos encontrar con diferentes formas de darle el significado correcto al contenido de la página. Por ejemplo la títpica pregunta que nos hacemos: “¿Esto son dos párrafos o una lista de dos elementos?”. Más adelante se subirán nuevos artículos con ejemplos de uso concretos para diferentes etiquetas o tags.

Os dejo un enlace para comprender el significado de las etiquetas HTML y el uso correcto de ellas para marcar el contenido de nuestra Web: Técnicas de uso HTML.

Como ya hemos hablado hay varias recomendaciones para mejorar la optimización en Google y otros búscadores. Si creamos URLs más sencillas serán mas atractivas. Los usuarios que visitan tu sitio pueden sentirse intimidados por URLs muy largas y raras con pocas palabras reconocibles.

Las URL de este tipo pueden ser confusas. Además, los usuarios pueden creer que una parte de la URL no es necesaria, sobre todo si la URL muestra muchos parámetros irreconocibles. Podrían dejar fuera una parte, rompiendo así el enlace.

Si la URL contiene palabras relevantes, se proporciona a los usuarios y a los motores de búsqueda información adicional sobre la página.

Las palabras resaltadas podrían informar al usuario o al motor de búsqueda sobre la página
incluso antes de hacer clic en el enlace.

También tenemos que tener en cuenta que la URL de documento se muestra como parte de un resultado de búsqueda en Google, después del título del documento y del fragmento. Al igual que el título y el fragmento, las palabras en la URL del resultado de búsqueda aparecerán en negrita si coinciden con la consulta del usuario.

Si queréis saber más sobre las malas prácticas de las estructuras URL dinámicas podéis ver los requisitos de Google.

Prácticas recomendadas sobre estructuras URL

• Utiliza palabras en las URL. URL con palabras relevantes para el contenido y la estructura del sitio ayudan a que los usuarios que visitan tu sitio naveguen por él, y las recordarán mejor.
  • Evitar:
    • URL largas con parámetros y números de identificación de sesión
      innecesarios.
    • Nombres genéricos como “pagina1.html”.
    • el uso excesivo de palabras clave como “fútbol-cromos-futbol-cromo-fútbolcromos.htm”.
• Crea una estructura de directorios simple. Utiliza una estructura de directorios que organice el contenido y facilite a los usuarios que visitan tu sitio el saber dónde están dentro de éste. Trata de usar la estructura de directorio para indicar el tipo de contenido que se encuentra en esa URL.
  • Evitar:
    • Anidar subdirectorios como “…/ dir1/dir2/dir3/pagina.html”
    • Nombres de directorios sin relación alguna con el contenido.
• Proporciona una versión de la URL para llegar a un documento. Para Evitar que los usuarios enlacen a una versión de la URL y otros enlacen a otra versión diferente (esto podría dividir la reputación del contenido entre ambas URL), céntrate en usar y referenciar una URL en la estructura y en los enlaces internos de tus páginas.
  • Evitar:
    • Que las páginas de subdominios y desde el directorio raíz (por ejemplo, “dominio.com/pagina.htm” y “sub.dominio.com/pagina.htm”) accedan al mismo contenido.
    • Mezclar versiones de las URL con www. y sin www. en la estructura de enlaces internos.
    • Utilizar mayúsculas innecesarias en las URL (muchos usuarios esperan URL en minúsculas y las recuerdan mejor).

Según Matt Cutts, si hay más de cinco palabras, el algoritmo de Google distribuye el peso en cada una de ellas y no termina de darles credibilidad. Os dejo una lista de puntos básicos que debemos tener en cuenta a la hora de crear URLs en nuestra Web:

• Describe el contenido en la URL
• Mantener una URL corta
• De forma estática y clara (no dinámica)
• Las descripciones son mejores que los números
• Usar palabras clave para atraer tráfico
• Los subdominios no son necesarios
• Tener pocas carpetas en la estructura de la URL
• Los guiones medios (-) es la mejor forma de separar palabras
• Mantener una estructura URL igual para todas las páginas de nuestra Web
• Es preferible no utilizar mayúsculas en las URL
• No añadas datos extraños ni caracteres especiales

Bueno, todas estas recomendaciones sobre la estructura URL no van a mejorar en un 100% la optimización en buscadores de nuestra Web. Pero si en gran medida, tanto para los motores de búsqueda, como para la navegación de los usuarios que visitan de nuestra página o acceden a ella desde los resultados de búsqueda.

Hace poco comentaba en el artículo “Youtube y el adiós a Explorer 6″ de como webs de peso como Youtube o Digg dejaban de dar soporte a internet explorer 6.

Pues bien, parece que Microsoft hace oídos sordos y seguirá dando soporte a este navegador hasta abril de 2014, fecha fin del soporte a Windows XP.

“Abandonar el soporte de Internet Explorer 6 no es una opción” afirman desde la compañia.

La mayoría de los analistas sugieren que esta decisión responde a una jugada inteligente de la compañía, teniendo en cuenta que IE 6 se encuentra en Windows XP, y que muchos usuarios han mostrado su negativa a emigrar hacia otro sistema operativo.

Parece que vamos a “disfrutar” cinco años más con este navegador.

Enlace al blog de desarrollo de explorer: http://blogs.msdn.com/ie/archive/2009/08/10/engineering-pov-ie6.aspx

Matt Cutts es ingeniero de Google desde el año 2000. Actualmente encabeza el equipo Webspam de Google, que se encarga de la calidad de los resultados del buscador. Este equipo ha puesto mucho hincapié en la comuniación con usuarios y Webmasters durante el 2009 y hace tiempo que cuelgan en su canal de Youtube vídeos en los que responden a las preguntas de la gente sobre optimización de las web y SEO en general.

Desde el blog de Google Webmasters en castellano nos avisan de que empiezan a incluir subtítulos en castellano para estos vídeos cortos, ágiles y sobretodo muy informativos. Estos dos primeros vídeos tratan sobre la sobreoptimización y si los tiempos de carga de la página afectan al posicionamiento.

Lo mejor es ver lo vídeos y suscribirse a su canal de Youtube, ya que los videos aclaran muchos de los mitos que traen consigo los experimentos de SEO:

¿El tiempo de carga del sitio tiene importancia en el ranking de Google?

¿Es la sobreoptimización mala para un sitio web?

El acceso a la red desde dispositivos móviles está aumentando de una forma espectacular, un 30 por ciento en España, lo que supone un total de más de 4,7 millones de internautas móviles.

Los factores que están ayudando a este crecimiento, son los avances tecnológicos en los dispositivos móviles, un mayor ancho de banda y el descenso de las tarifas para navegar.

Por ese motivo, en este artículo vamos a realizar un repaso de los navegadores que más se llevan.

Opera Mobile.

Una de las características de este navegador, es que puede formatear automáticamente cualquier página web, ajustando el tamaño de las imágenes, texto, tablas y demás a la resolución del dispositivo móvil sobre el cual se este utilizando, esta tecnología es llamada Small Screen Rendering.

Podemos decir que Opera Mobile es uno de los navegadores web para móviles más completos, atractivos y avanzados disponibles actualmente. Desde su web podemos descargar una demo de 30 días.

Principales tecnologías soportadas:

• HTML 4.01, XHTML 1.0/1.1, HTML5(parcial) XML, XSLT, XPath
• CSS 2.1 y CSS3 (parcial)
• DOM Level 2 y 3 (parcial)
• JavaScript 1.2-1.5 / ECMAScript
• AJAX
• SVG 1.1 Full y Tiny 1.2
• Flash Lite 3.1

Opera Mini

El navegador para dispositivos móviles más utilizado, con un porcentaje de uso del 25% , superando a la versión de Safari para iPhone. Funciona en cualquier dispositivo que pueda ejecutar Java, lo que lo hace instalable en casi cualquier sistema. A diferencia de la versión Mobile, las páginas consultadas se optimizan previamente en los servidores de Opera, para posteriormente visualizarla correctamente en nuestro dispositivo.

S60 Browser

Es el navegador por defecto en los sistemas basados en Symbian s60. Este navegador web es capaz de ejecutar aplicaciones web desarrollados especificamente para Safari y iPhone, ya que utiliza frameworks WebCore y JavascriptCore desarrollados por Apple.

Otra característica destacada es que permite mostrar una vista en miniatura de la página web en su totalidad llamada minimaps que permite a los usuarios magnificar las áreas que quieren leer

Características principales:

• HTML 4.01, XHTML 1.1, XML
• CSS 2.1
• JavaScripT 1.5
• AJAX
• Flash

Obigo

Obigo es una compañía sueca perteneciente a Teleca cuya oferta software para teléfonos gira alrededor del navegador.

Obigo empezó a desarrollar software para teléfonos móviles desde los comienzos de Internet móvil, antes incluso de que se aprobara la primera versión del estándar WAP, lo que la convierte en unos veteranos de la Industria, con más de 300 millones de teléfonos móviles en el mundo que incluyen alguna de sus aplicaciones. Fué el segundo navegador móvil en superar el Acid2 test.

Características principales:

• HTML 4.01, XHTML 1.1, XML 1.1
• DOM1, DOM2
• CSS 2.1
• RSS 2.0 / ATOM 1.0

Netfront

Es un microbrowser para dispositivos embebidos, en principio se creó específicamente para renderizar HTML en dispositivos portátiles de bajo consumo de energía, en sus primeras versiones fué diseñado para dispositivos con pocos recursos. La mayoría de los móviles Sony Ericsson con sistema propietario lo incorporan, así como la consola Playstation 3 y PSP.

Principales tecnologias soportadas:

• HTML 4.01, XHTML 1.1
• CSS1, CSS2 y CSS3 (parcial)
• JavaScript 1.2-1.5 / ECMAScript
• Ajax
• RSS
• Visor documentos
• SMIL 2.1
• SVG 1.2 + microDOM

Safari Mobile

La versión móvil de este navegador solo está disponible para los iPhone e iTouch. Muy rápido, muestra las páginas tal cual, no redimensiona. Hasta hace poco era el navegador móvil más utilizado, siendo ahora superado por Opera.

Principales tecnologías soportadas:

• HTML 4.01, XHTML 1.0/1.1, HTML5(parcial), XML, XSLT, XPath
• CSS2 y CSS3 (parcial)
• JavaScript 1.2-1.5 / ECMAScript
• DOM Level 2 y 3
• SVG 1.1
• Ajax
• RSS

Internet Explorer Mobile

También llamado Pocket Internet Explorer, solo está disponible para plataformas windows CE / Mobile. En su última versión tiene un mejor renderizado de las páginas, múltiples niveles de zoom, soporte touchscreen, Flash Lite 3.1, entre otras mejoras.

Principales tecnologías soportadas:

• HTML 4.01, XHTML 1.0/1.1, XML, XSLT, XPath
• CSS 2.1
• DOM Level 2 y 3 (parcial)
• JavaScript 1.2-1.5 / ECMAScript
• AJAX
• SVG 1.1 Full y Tiny 1.2
• Flash Lite 3.1

Fennec

Así se conoce a la nueva versión de Firefox para móviles. El nombre del navegador viene del zorro Fennec, un pequeño zorro del desierto. Destaca su sencillo uso y su sistema de actualizaciones similar a la de su hermano mayor Firefox.

Principales tecnologías soportadas:

• HTML 4.01, XHTML 1.0/1.1, HTML5(parcial), XML
• CSS2 y CSS3 (parcial)
• JavaScript 1.2-1.5 / ECMAScript
• SVG

Teashark