Hojas de estilo CSS en pocket pc

Los
estilos son el mejor complemento de una página web, permiten opciones
de formato adicionales y ayudan a mantener tu diseño ordenado y de
alguna manera estandarizado.

En Internet es muy común ver sitio web en donde la versión para
pocket pc únicamente se limita a mostrar texto prácticamente sin ningún
formato. Esta practica en ningún momento es mala, porque reduce el
tiempo de carga, el problema radica en que destruye la identidad
gráfica del sitio web. Usar hojas de estilo CSS te permite mantener la
identidad de tu sitio sin aumentar considerablemente el tiempo de
carga, además la mayoría de los navegadores pueden desactivarlas
permitiendo que el usuario decida si desea usarlas.

El secreto para que tu sitio web funcione correctamente con hojas de
estilo es crear un documento html simple y bien organizado, que se
entienda aunque no exista estilo, y a partir de este documento básico
empezar a utilizar formato CSS. Este procedimiento nos proporciona una
gran ventaja, permite que el usuario vea el sitio web en la mayoría de
los navegadores. Si el navegador no es compatible el usuario vera la
versión básica del sitio sin ningún problema, y viceversa, si el
navegador es compatible vera una versión bien diseñada y agradable del
sitio.

Compatibilidad
En las pocket pc la mayoría de los navegadores son compatibles con
hojas de estilos, aunque al igual que en una PC normal, no todos
soportan el mismo número de características ni las aplican de igual
manera.

El formato de texto es el elemento con mayor compatibilidad en la
mayoría de navegadores. Por otro lado el posicionamiento y tamaño de
los elementos es lo que mayor problema ocasiona. Aquí unos cuantos
casos en los cuales puede el estilo puede verse afectado:

  • La opción position:absolute, muy utilizada para crear elementos
    “flotantes”, no es soportada por pocket internet explorer y otros
    navegadores basados en el.
  • Si utilizas porcentajes para definir el ancho de un elemento, cada
    navegador interpretara a su manera el ancho de la pantalla. Incluso en
    un mismo navegador puedes encontrarte con que diferentes
    configuraciones de ajuste que cambiaran esa interpretación.
  • background-repeat:no-repeat; Este comando se utiliza para evitar
    que el fondo de algún elemento se repita, sin embargo en pocket
    internet explorer (y sus “variaciones”), provocara que la imagen
    utilizada de fondo desaparezca. Aún estoy resolviendo este problema,
    como solución temporal permito que el fondo se repita, pero cambio el
    tamaño del objeto para evitar que las repeticiones sean visibles.

Ejemplo de uso de Hojas de Estilo CSS
Las imágenes que muestro a continuación son capturas de pantalla de
una misma página, en este caso es un segmento de mi página de inicio
para el navegador(Más adelante publicare como crear una).

En esta primera imagen se puede observar la página sin ninguna hoja
de estilo, solo utilice etiquetas HTML y el diseño esta basado en
tablas.

Para la segunda “versión” ya he aplicado una hoja de estilo simple,
que solo define el formato de texto, color de fondo y bordes y se ve así

y en la tercera y ultima, se puede observar la misma página con una
hoja de estilo completa. Define formato de texto, colores, bordes,
imágenes de fondo y el tamaño de los elementos.

Como se puede observar en cada una de las capturas de pantalla
anteriores, el tamaño de la página aumenta dependiendo el tipo de
contenido, siendo las imágenes las que más espacio ocupan. Cada uno de
nosotros decidira que tan necesario es el uso de imágenes dentro del
contenido.

Puedes descargar la página de ejemplo con los estilos CSS y las imágenes desde aquí(6kb)

Más adelante seguire con estos breves tutoriales de diseño web para
pocket pc. Si deseas sugerir un tema o resolver una duda no olvides
comentarlo.

Nota: Debido a que estoy rediseñando la plantilla del blog para que
funcione mejor en pocket pc, si visitas el blog desde tu pocket pc
puede no mostrarse correctamente, siento los incovenientes causados.
Estoy trabajando para que se funcione mejor