FORMAS DE OPTIMIZAR SITIOS WEB PARA MOVILES
Enviado por titi_castle • 22 de Agosto de 2014 • 2.498 Palabras (10 Páginas) • 165 Visitas
FORMAS DE OPTIMIZAR SITIOS WEB PARA MOVILES
Teléfonos de gama media y Smartphone
Al pensar en los tipos de teléfonos móviles que se pueden configurar para que el sitio les proporcione servicio, te recomendamos que consultes las funciones de los navegadores web de los teléfonos móviles, sobre todo en lo relacionado a las funciones de los navegadores de escritorio modernos. Dividimos los teléfonos móviles en dos categorías:
Teléfonos de gama media: teléfonos con navegadores web que no pueden procesar las páginas web habituales que puede procesar un navegador web de escritorio. Esto incluye navegadores para cHTML (iMode), WML, WAP y similares.
Smartphone: teléfonos con navegadores web que procesan, por lo menos hasta cierto punto, las páginas normales que procesan los navegadores web de escritorio. Esta categoría incluye los navegadores para móviles recientes que pueden procesar código HTML5, y abarca una gran variedad de dispositivos, como los teléfonos basados en Android y los iPhone. (Google, 2013)
1.- Siempre declarar el DocType (y asegurarse que sea el correcto)
Este es un punto al que muchos, incluyéndome, en algunas ocasiones le hemos dado poca importancia, pero sin duda que la tiene. El declarar el DocType o tipo de documento es clave para permitir que los navegadores interpreten de forma correcta el código que tenemos en cada página, ya sea HTML o XHTML. Si bien al no declarar, existe la posibilidad de que en nuestro navegador se vea de forma correcta, esto no asegura que el código se interprete bien para cada usuario y será complejo al momento de validar.
La gran mayoría de los editores Web (como Adobe Dreamweaver), agregan el DocType de forma automática, por lo que no hay que preocuparse. Sin embargo, nosotros lo podemos añadir de forma manual, siempre al inicio del documento, es decir, antes de la etiqueta <html>. Los 4 más recomendados de utilizar (siempre que no estemos trabajando con HTML 5), son:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
La diferencia de utilizar una de las 4 formas anteriores depende primero de si estamos utilizando HTML o XHTML para codificar (las 2 primeras para HTML y las 2 últimas para XHTML) y de si estamos utilizando la versión Strict o la Transitional del lenguaje. La diferencia de lo último depende si queremos permitir el uso de etiquetas que estén descontinuadas de versiones anteriores del lenguaje (Strict no permite, Transitional si). Más allá de eso, cualquiera de las 4 es correcta.
2.- Nunca estilizar dentro de las etiquetas
Esto corresponde a una buena práctica, y si bien es un comportamiento adoptado y adaptado por la gran mayoría de diseñadores Web, siempre hay por ahí algún caso que cae en el error, por lo que es bueno recordarlo.
Con la popularización de CSS, y la descontinuación de etiquetas de estilo (como font face) en HTML, se buscaba hacer una separación completa y absoluta entre el estilo de los documentos Web y su estructura, por lo que al aplicar un estilo dentro de una etiqueta en particular caemos en lo que tanto se ha intentado evitar. Para muestra, un botón (aunque no es un botón realmente, sino que más un ejemplo):
Esto es incorrecto:
<p style:="color: black; font-family:Arial;">Texto de ejemplo</p>
Esto es correcto:
En una hoja de estilo externa, declarar:
p{ color:black; font-family:Arial; }
O bien, en la misma hoja de estilo externa, declarar:
.estilo1{ color:black; font-family:Arial; }
Y luego, en nuestro HTML:
<p class="estilo1">Texto de ejemplo</p>
De esta forma, separamos completamente la estructura del estilo, realizándolo de forma correcta y ahorrándonos bastante tiempo al momento de hacer modificaciones.
3.- CSS al comienzo, JavaScript al final
Este es un error en el que personalmente he caído bastante, con las librerías en JavaScript, pero vamos por parte:
Lo recomendable para las hojas de estilo externas en CSS es siempre cargarlas al inicio del documento, entre las etiquetas <head> y </head>. Esto nos asegura tanto una carga más rápida de la página propiamente tal, como asegurar que siempre los estilos se carguen junto al documento y no luego de que se ha cargado el contenido, ya que si el usuario detiene la carga de la página, o su conexión se cae, se desplegará el contenido sin ningún estilo aplicado, entregando una experiencia visual bastante mala.
Lo correcto es:
<head> <title>Mi sitio Web</title> <link rel="stylesheet" type="text/css" href="estilos.css" media="screen"> </head>
Por otro lado, las librerías en JavaScript es todo lo contrario. Lo recomendable en este caso es incluirlas al final del documento, para que las cargas las realice cuando el contenido ya se depliegue en pantalla. ¿Por qué?, porque normalmente un documento Web no se seguirá cargando mientras una parte de el no se termine de cargar (enredado ¿no?). Considerando que las librerías en JavaScript pueden llegar a tener un tamaño mayor al mismo documento, es muy probable que la carga se tome algunos instantes para poder seguir, por lo que a no ser que sea estrictamente necesario (por ej. si una librería determina como se despliega el sitio en si), lo más conveniente es cargarlas al final, y de esta forma presentarle el contenido al usuario lo más rápido posible para que este pueda empezar a navegar, sin necesitar que se cargue todo el documento.
Un ejemplo sería así:
</div> <script type="text/javascript" src="libreria.js">
...