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

Los no iniciados a la usabilidad se habrán preguntado como funciona esto de la Usabilidad, que pautas o reglas sigue, en que se basan para saber si es una web Usable o no. Esta fase cada vez se usa más en los grandes proyectos Web orientados mayormente a los usuarios.

La usabilidad mide qué tan intuitiva y fácil de usar es una página web para el usuario común. Mide los siguientes 3 aspectos más relevantes:

Y para ello principalmente sigue unos principios básicos de usabilidad:

Principios de la usabilidad

• Visibilidad del estado del sistema
• Concordancia entre el sistema y el mundo real
• Control y libertad del usuario
• Consistencia y estándares
• Prevención de errores
• Reconocimiento antes que llamadas
• Flexibilidad y eficiencia de uso
• Diseño estético y minimalista
• Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores
• Ayuda y documentación

Pero luego hay que realizar unos Test de Usabilidad de nuestra Web. Para ello cuando se crean los proyectos y se considera el apartado de la Usabilidad Web, se usa un checklist o unas pautas para evaluar la Usabilidad del sitio con los usuarios. También siguiendo unas directrices para evaluar la usabilidad de un sitio web, separadas en diversas categorías; Navegabilidad y Arquitectura de la Información, Formularios y entradas de datos, Confianza y Credibilidad.

Herramientas para la Usabilidad Web

Test de Usabilidad (plantilla)

Os dejamos con una plantilla de un Test de Usabilidad en formato excel, desarrollado por UserFocus y la traducción de mano de InterGraphics Designs. Con estas pautas podemos empezar a evaluar nuestros sitios Webs con un grupo de usuarios:

Descargar Test de Usabilidad

DejaClick y ClickHeat

También podemos usar de forma complementaria una extensión de Firefox conocida como DejaClick para realizar test de uso de nuestra web. Permite grabar las actividades de los usuarios de un sitio Web y generar informes de esas actividades.

Y una segunda herramienta llamada ClickHeat, con ella obtenemos un “mapa de calor” de las zonas donde hacen clic los usuarios de un sitio Web.

MORAE

Por último les hablaré de una aplicación llamada MORAE: es un paquete de software compuesto por 4 herramientas, destinadas a analizar y compartir la experiencia de uso de una web, estas herramientas son: Morae Manager, Morae Observer, Morae Recorder y Morae Player. Es una herramienta muy recomendable para quienes se encargar de realizar test de usabilidad Web con usuarios.

Bueno, espero que todas estas herramientas relacionadas con la usabilidad web nos sirvan de ayuda para nuestros proyectos Web.

CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías facilitarán también la integración de plantillas o maquetas a los desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y modificar nuestros hábitos de codificación para mantener la Web Accesible.

Poco a poco nos tenemos que familiarizar con estas nuevas tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando en contacto.

Así que hoy vamos a experimentar un poco con estas nuevas tecnologías. Al final de este artículo aprenderemos cómo:

• Uso de Graceful Degradation, las técnicas y tecnologías para mantener las cosas en su lugar en los navegadores.
• Utilizar técnicas de mejoras y las tecnologías para estar al día con las últimas tendencias.
• HTML5 junto a un aumento de la tecnología: microformatos.
• Tener una visión clara de algunas de las más emocionantes nuevas características que CSS3 y HTML5 traerá.

La Mejora Progresiva y el Graceful Degradation

El Graceful Degradation es un término que se usa para definir lo siguiente; Cuando utilizamos las tecnologías mas recientes luego debemos conseguir fijar todo para los distintos navegadores que no la soportan. Esto lo hacemos a diario, creamos un código para Firefox y luego otro alternativo para arreglar los problemas en Internet Explorer y otros navegadores. Como hacemos la mayoría de nosotros (al menos yo), creamos primero el marcado y luego creamos la hoja CSS.

Cuando hablamos de mejora progresiva se refiere a la costumbre de construir primero para los navegadores “menos capaces”, (navegadores antiguos) y, a continuación, para aplicar las últimas tecnologías en los navegadores más potentes o recientes.

Diseño

Os muestro un diseño básico estructura para entender y visualizar claramente la organización del ejemplo de una Web con HTML5, este es la plantilla que conseguiremos maquetar al final del ejemplo:

El marcado

Os escribo el marcado básico inicial que usaremos antes de empezar:

Resumiendo…

3 diferentes comentarios condicionales para IE. En primer lugar incluye un código de Shiv html5 directamente desde Google Code para todas las versiones de IE. La segunda incluye el archivo IE8.js para una mejor compatibilidad de IE7 e inferiores, así como un archivo que ie.css spara solucionar los bugs de Internet Explorer. Y una tercera únicamente para bugs de IE6. Una tercera es simplemente un archivo CSS para arreglar bugs IE6.

Esta es una base muy sólida y de inicio para cualquier proyecto con HTML5 que podríamos hacer en el futuro. Con esto, podemos empezar a asignar etiquetas a las diferentes secciones de nuestro diseño. En la imágen vemos como quedaría la estructura Web de nuestro código:

Ejemplo práctico HTML5

Ahora vemos como quedaría el código HTML5 de nuestro ejemplo:

Smashing HTML5! HTML5 in the year 2022 2009



	








This be the title






Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.



		



			...
		



			...
		









blogroll

HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia




social

delicious
digg
facebook
last.fm
rss
twitter

Activando el HTML5

Como hemos dicho antes la mayoría de los navegadores no entienden de HTML5 actualmente. Y desde que están desarrollo se ha discutido por los estilos por defecto que contendran las nuevas etiquetas. Por lo tanto estas etiquetas que no existen paa el navegador vendrán sin estilos, por lo tanto les aplicaremos los estilos para elementos de bloque:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

Ahora podremos usar estas nuevas etiquetas como si fuesen <div>

Bueno después de una breve explicación os dejamos ver el ejemplo una vez finalizado, para que podáis estudiarlo por completo y ver como funcionan conjuntamente estas 2 nuevas tecnologías (CSS3 HTML5):

Ver Ejemplo: Maqueta HTML5

Fuente: SmashingMagazine (artículo completo)

Supongo que habéis notado que en la mayoría de los navegadores el suavizado de texto no se percibe tal y como lo hace el Internet Explorer 7 e Internet Explorer 8. Pero si véis el texto siguiente bajo el sistema operativo MAC notaréis que el suavizado de texto o smooth text se visualiza en Firefox de forma sorprendente, y como comprobaremos “no es una imagen”:

Círculo de Maquetadores: Comunidad de Maquetadores Web

A que cada muy bonito ¿eh?. Bueno esto se consigue haciendo referencia exacta del PostScript del tipo de fuente que querramos usar, en este caso es la Helvetica (HelveticaNeue Light). Con esta regla en los navegadores como Firefox y Safari se reconocera dicha fuente, y otros navegadores basados en Gecko como Camino. También se debe aplicar el grosor de la fuente para conseguir el smooth. Así que la siguiente declaración en la hoja de estilos te dará este magnifíco resultado:

font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
Calibri, Verdana, sans-serif;
font-weight:300;

En resumen, si desea utilizar un font face, tiene que usar font-family la propiedad font-weight, llamando al PostScript y a los nombres de las fuentes compatibles que siempre hemos usado. Ahora ya podemos hacer nuestras Webs con unas fuentes atractivas. Supongo qeu esto generará muchas opiniones. Pero realmente uno no se esperaba que se pudiera conseguir el suavizado de texto mediante CSS, y conseguir que la maqueta Web sea algo más parecida al diseño original.

Desde que nació Google no ha parado de crecer como empresa y como todos sabemos es el buscador más usado en todo el mundo. Y en España es uno de los países donde más se usa este buscador con un promedio cerca del 98%.

Salir 1º en Google es la base del éxito Google, ha crecido tanto gracias a que su buscador ha sabido encontrar resultados más relevantes que el resto de buscadores, el sistema de asignación de importancia a los resultados de una búsqueda según los criterios creados por google (entre ellos el pagerank) le ha permitido que cuando un usuario busca un termino complejo dar mejores resultados que otros buscadores y logicamente los usuarios hemos ido cambiando nuestros hábitos de búsqueda hasta el punto que en España la mayor parte de búsquedas de información se hacen a través de google. Lo cual ha hecho que los creadores de páginas web ya no sólo nos centremos en hacer una Web funcional y acorde con las necesidades del cliente y los usuarios sino que también tenemos que hacer una web “amiga de google” es decir que Google la indexe bien y la considere buena para salir en sus primeros resultados de búsqueda.

Para conseguir estos resultados aparecieron los SEO, una especie de consultor de marketing online que se preocupa principalmente de que la Web aparezca en primeras posiciones al buscar determinadas palabras, a veces sacrificando la usabilidad del sitio o incurriendo en prácticas cuestionables. Google ha reaccionado imponiendo penalizaciones a las prácticas más duras que intentan manipular los resultados de su buscador (compra de enlaces, enseñar una web distinta a google que a los usuarios, etc…). Pero los buenos profesionales SEO consiguen que ante consultas concretas tu Web pueda salir en las primeras posiciones o en primera posición.

Bueno después de esta introdución les dejo con un interesante “mini documental” de 46 minutos orientado al posicionamiento web en Google del canal Odisea, donde Google explica su punto de vista:

Fuente: InterDigital

Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Descargar Guía de Referencia CSS3

Hubo un tiempo en que las meta-tags fueron un popular método para otorgar relevancia a las webs, pero murieron víctimas de los webmasters sin escrúpulos.

Las etiquetas meta solían ser parte del algoritmo para organizar los resultados de una búsqueda, pero debido a la facilidad con que el autor del sitio podía manipularlas, son pocos los buscadores que actualmente hacen uso de ellas para posicionamiento. Sin duda, la más importante y la más utilizada en su momento fue la etiqueta meta Keyword.

Seguir leyendo »

El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.

En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.

Nicholas C. Zakas ha desarrollado 3 principales puntos para optimizar la carga de JavaScript para nuesra Web:

• Creamos dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
• Introducimos el primer Javascript el final de la página, justo antes de cerrar la etiqueta <body>.
• Justo después creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.

HTML

loadScript

loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.

function loadScript(url, callback){

 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

Con esta optimización mejoramos la carga de las Webs con Javascript. Ya no solo sirve para una carga más rapida de la página ,sino para realizar algunas funciones en el cuerpo de la página una vez cargada dicha página.

Fuente: anieto2k