Página 1 de 212»
Moderador del foro: ZorG 
Foro uCoz » Servicios Adicionales » Cuestiones generales » sitio PDA
sitio PDA
leohbep
Mensajes: 88
Reputación: 3
Mensaje Nº 1 | 5:45 PM
hola.. quiero agregar la función PDA a mi sitio, pero lo saco, ya que al agregarlo, mi página por defecto se pone como PDA, osea... al poner www.bepfanclub.com.ar sin el "/pda" me aparece ya de esa forma, cambiando todo mi sitio, alguien sabe como hace para que no pase esto?

muchas gracias.
Leoh cool


www.BEPfanclub.com
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 1:19 PM
leohbep, pasá al Panel de Control: Inicio » Configuraciones » Configuraciones generales » Activar las plantillas para la versión PDA del sitio (ha de estar activada esta opción)
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 5:50 PM
SIGUIENDO EL TEMA DE PDA

La última actualización del sistema uCoz ha traído una nueva función a todos los usuarios – versión PDA del sitio web. ¿Qué es? Aquí te voy a contar esta cosa.

Así pues, hay muchísimos usuarios utilizando los teléfonos móviles u otros aparatos portátiles. El sitio PDA se requiere para estar más cerca a su propietario. De día en día se va creciendo el número de personas que utilizan teléfonos inteligentes y PDAs. Para eso ellos requieren los recursos de Internet del formato correspondiente, la gente se apropia del espacio informativo móvil y lo utiliza muy activamente. Y esta cosa se irá acelerando más y más. Pues bien, para que los usuarios visiten sus páginas web con más frecuencia y haya más visitantes a sus sitios, hay que crear todas las condiciones. Una de éstas es la versión PDA del sitio web.

Es verdad que a veces es imposible acceder a un sitio web desde un móvil. Por eso cuando se habla de esto, todo el mundo empieza a recordar sitios WAP. ¿Por qué? Porque muchos de los móviles viejos no admiten XHTML y se limitan de WAP. Pero de momento estos móviles son pocos ya y no hay sentido de crear una versión aparte para este tipo de teléfonos.

Por eso la variante PDA es más óptima entre otras.


¿Qué es lo que lo que diferencia una versión común de la PDA?
Compacidad. En PDA no debe haber nada de excesivo, sólo lo más esencial e importante de la página. Por consecuencia, el peso de tal página será mucho menos.

¿Cómo activar la versión PDA del sitio?
Se hace esta vaina muy simple: en el Panel de Control: Inicio » Configuraciones » Configuraciones generales » Activar las plantillas para la versión PDA del sitio.

¿Cómo puedo acceder a esta versión simplificada del sitio?
Al entrar en el sitio de tu móvil, accedes a la versión PDA automáticamente. Pero si quieres entrar desde una PC, en la barra de direcciones del navegador se debe escribir la dirección: http://tu_sitio.dominio/pda

¿Es posible modificar el diseño de la versión PDA?
Sí, por supuesto. Si tu sitio es único tanto acerca del contenido, como por su diseño, tendrás que sustituir las plantillas estándar por tuyas.

Para poder cambiar el diseño, como siempre pasa al Panel de Control: Inicio » Diseño » Gestión de diseño (plantillas). Allá se eligen y se activan Plantillas para la versión PDA del sitio y se trabaja con éstas como con las plantillas comunes. (¡No olvides activar la versión PDA en las configuraciones!).

ATENCIÓN: ¡¡¡cuídate y durante la edición de las plantillas presta máxima atención a lo qué plantilla estás editando – PDA o común!!!

He activado la versión PDA, pero se me escribe que el módulo no está activado. ¿Qué pasa?
Desactiva PDA y actívala de nuevo una vez más.

He accedido a la versión PDA de mi computadora y ahora no puedo desactivar la versión. ¿Qué debo hacer?
Hay que pasar por el enlace: http://tu_sitio/index/53 – esto activa la la versión completa de tu sitio.
En la parte inferior de cada página del sitio en la plantilla estándar de PDA hay un enlace: versión completa del sitio – ella tiene la dirección http://tu_sitio/index/53. ¡La puedes utilizar!

Yo paso al Panel de Control: Inicio » Diseño » Gestión de diseño (plantillas) » Plantillas para la versión PDA del sitio, pero allá no hay nada. No tengo idea cómo hacer esta plantilla.
Abre cualquiera plantilla PDA y haz clic sobre restaurar la plantilla estándar.
Se restaurará la plantilla estándar.

ATENCIÓN: ¡¡¡cuídate y durante la edición de las plantillas presta máxima atención a lo qué plantilla estás editando – PDA o común!!!

¿Qué módulos se puede utilizar en PDA?
Puedes utilizar todos los módulos que hay. ¡La funcionalidad de la versión completa se guarda también para PDA!

¿Se puede aplicar la sustitución rápida de los sectores de la plantilla para la versión PDA?
¡Por supuesto! En esta misma sección de tu Panel de Control, como también para la versión completa del sitio, hay un formulario de sustitución rápida de los sectores de la plantilla. Marca el punto plantillas PDA


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
sorin
Mensajes: 442
Reputación: 6
Mensaje Nº 4 | 2:04 AM
Pues yo al activar esta función en mi PC se muestra la versión PDA sin tener que poner al final del dominio pda

De momento esta función no me interesa mucho pero quería saber como funciona esta función y hacer algunas pruebas

Saludos.
Sorin.


GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 2:33 PM
Usabilidad para PDAs

Una guía para el correcto diseño de sitios webs accesibles desde PDAs. (Personal Digital Assitants)

1. Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.

2. Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.

3. Evitar el uso de tablas.
En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 pixels de ancho.

4. No utilizar marcos (frames).
Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.

5. Publicar contenidos concisos.
Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.

6. Organizar la información cuidadosamente.
Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.

7. Optimizar los gráficos.

  • En dimensión: las pantallas de dispositivos Palm OS tienen un tamaño de 150x150, y los Windows CE/Pocket PC de unos 240x320.
  • En tamaño: escogiendo el número de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).

    8. Incluir texto alternativo en todas las imágenes.
    Con el tag alt ofrecemos información a los usuarios que han deshabilitado la carga de imágenes en su navegador.

    9. Añadir el tag handheldfriendly al comienzo de todas las páginas.
    AvantGo sabrá que la página está optimizada para PDAs.

    Quote
    <meta name="HandheldFriendly" content="true"> .

    10. Utilizar convenientemente el caching de las páginas.
    Para aumentar la velocidad de carga de las páginas. No guardar en caché las páginas que se actualizan todos los días (página de noticias), y guardar en cache las páginas que se actualizan raramente (página de créditos).


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 6 | 5:14 PM
    Diseñando sitios amigables para el iPhone

    El iPhone se está convirtiendo en el gadget del momento, ganando cada día más terreno en navegadores móviles. ¿Estás listo para diseñar un sitio amigable para el iPhone?


    El iPhone ha sido una gran innovación, no solo por todas las características como teléfono y semi-PDA que es, sino por que finalmente tenemos un navegador móvil (una versión reducida de Safari) con el cual la navegación es mucho más cómoda y la mayoría de sitios existentes se pueden consultar desde este sin mayores impedimentos.

    Para saber cuan amigable es un sitio para el iPhone, podemos definir cinco niveles de compatibilidad:

    Incompatible
    Sitios que no funcionan en el iPhone porque usan Flash, SVG o alguna otra tecnología que MobileSafari no soporta. Estos sitios no pueden ser vistos desde el iPhone, o resultan muy tediosos de leer porque tiene columnas muy anchas.

    Compatible
    La mayoría de sitios que están hechos “como debe ser” serán compatibles con el iPhone, si no presenta alguno de los problemas mencionados anteriormente. El hecho de que sea compatible con el iPhone se refiere a que por lo menos sea usable, pero aún así se necesite hacer zoom en ciertas áreas para leer la letra pequeña.

    Amigable
    Usando algunas técnicas un sitio puede mejorar la forma en que este se despliega en el iPhone, entre ellas encontramos:
    • Establecer el ancho máximo de la página (usando un viewport).
    • No usar columnas más anchas que 320 píxeles para una vista en vertical, o 480px para una vista en horizontal.
    • Acomodar las columnas en bloques de tamaño apropiado.
    • Mejorar algunos estilos y tamaños de letra para el iPhone.
    • Usar enlaces apropiados que el iPhone soporta.

    Optimizado
    Sitios que detectan el iPhone según las cabeceras HTTP, enviando un CSS diferente o incluso una página diferente solo para el iPhone. El iPhone soporta CSS3 y unas gráficas especiales de Safari 2 y 3, llamadas Canvas, de las cuales se puede tomar provecho.

    Webapp
    El mayor nivel en el que se puede lograr que un sitio sea amigable para el iPhone, es con una Webapp. Una Webapp imita la funcionalidad y apariencia de las aplicaciones nativas del iPhone, limitan el tamaño de la página a 320×480px (o 480×320px), hace uso de Canvas, y muchas funciones AJAX.

    Con una webapp estaremos dedicando una parte del sitio para que sea exclusivamente para el iPhone. Según estas definiciones y el tipo de sitio web que tengamos, podemos decidir hasta qué punto queremos llegar. Obviamente hacer una Webapp requiere mucho más tiempo y esfuerzo que hacer un sitio amigable con el iPhone.

    Recursos para hacer un sitio Amigable u Optimizado
    Existen diferentes técnicas con las cuales podemos mejorar la experiencia del usuario del iPhone en nuestro sitio, la primera de ellas es definir el tamaño del Viewport de la página. El Viewport se refiere al área donde será mostrado el documento (en el caso del iPhone, la pantalla de 320×480px).

    El Viewport que típicamente usaremos para el iPhone será:

    Quote
    />

    El siguiente paso será detectar si el agente se trata de un iPhone y modificar la página o el CSS que vamos ha generar. Lo podemos conseguir desde las cabeceras HTTP, como este ejemplo en PHP:

    Quote
    if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
    /* iPhone user */
    }

    También podemos usar una expresión CSS3 para que el iPhone use otra hoja de estilos:

    Quote
    href="iPhone.css" type="text/css" rel="stylesheet" />

    Al enviar un CSS especial para el iPhone, debemos pensar en que el estilo de nuestra página sea bastante sencillo y legible, evitar saturar de elementos, y hacer los enlaces lo suficientemente grandes para que el usuario no tenga problemas para seguirlos. Siempre hay que tener en cuenta las dimensiones y el área real de contenido que disponemos en Safari.

    Nuestro siguiente paso será aprender a usar algunos enlaces especiales que el iPhone reconoce, los eventos javascript que podemos usar, los tipos de letra disponibles, y probablemente los tipos de archivos que MobileSafari puede manejar.

    iUI, Framework para desarrollar una Webapp
    Si nuestro interés es el desarrollar una Webapp, la mejor herramienta que podemos utilizar es iUI un framework gratuito que nos permite imitar la interface y la funcionalidad de las aplicaciones nativas del iPhone.

    La gran ventaja de iUI es que este se encarga de dar los estilos a la página, manejar las peticiones AJAX y eventos que sucedan mientras el usuario navegue; lo único que debemos hacer es generar el código HTML necesario para que iUI reconozca las diferentes partes de nuestra Webapp.

    Básicamente tenemos que generar ciertas estructuras con DIVs y ULs, junto a ciertos nombres de clases que darán los estilos necesarios y permitirán al iUI decidir qué acción tomar.

    Existen 2 ejemplos que demuestran las capacidades de iUI, un mockup de Digg y un reproductor de música que nos muestran como cargar páginas adicionales por medio de peticiones AJAX, crear la navegación a la partir de una lista y la barra de herramientas, usar diálogos y formularios.

    Desarrollar y diseñar sitios para el iPhone no es complicado si sabemos lo básico, con un poco de tiempo y esfuerzo podemos hacer que un sitio se vea bien en el iPhone; o incluso desarrollar una Webapp que aproveche todas las características del iPhone.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 7 | 4:03 PM
    10 puntos sobre usabilidad en PDAs

    Una guía para el correcto diseño de sitios webs accesibles desde PDAs (Personal Digital Assitants).

    1. Ser consciente de las limitaciones de los PDAs.
    Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.

    2. Definir cuidadosamente la estructura del site.
    Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.

    3. Evitar el uso de tablas.
    En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 píxeles de ancho.

    4. No utilizar marcos (frames).
    Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.

    5. Publicar contenidos concisos.
    Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.

    6. Organizar la información cuidadosamente.
    Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.

    7. Optimizar los gráficos.
    - En dimensión: las pantallas de dispositivos Palm OS tienen un tamaño de 150x150, y los Windows CE/Pocket PC de unos 240x320.
    - En tamaño: escogiendo el número de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).

    8. Incluir texto alternativo en todas las imágenes.
    Con el tag alt ofrecemos información a los usuarios que han deshabilitado la carga de imágenes en su navegador.

    9. Añadir el tag handheldfriendly al comienzo de todas las páginas.
    AvantGo sabrá que la página está optimizada para PDAs.

    Quote
    <meta name="HandheldFriendly" content="true">.

    10. Utilizar convenientemente el caching de las páginas.
    Para aumentar la velocidad de carga de las páginas. No guardar en caché las páginas que se actualizan todos los días (página de noticias), y guardar en caché las páginas que se actualizan raramente (página de créditos).


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 8 | 1:12 PM
    Dispositivos móviles

    Los dispositivos móviles como teléfonos celulares y asistentes personales digitales (PDAs) se están conectando a la Web. El problema reside en encontrar aplicaciones atractivas para los usuarios de estos aparatos.

    La llegada de la Web a dispositivos portátiles es un fenómeno muy interesante de analizar, puesto que involucra cuestiones económicas y técnicas. Entre otras cosas, existe una duda sobre la convergencia de tecnologías: ¿deben los celulares crecer hasta tener las capacidades de un PDA? o ¿deben los PDAs crecer hasta tener las capacidades de un celular?

    Esto es muy importante, porque es muy lógico pensar que tarde o temprano habrá una cierta convergencia, aunque también puede esperarse que cada uno encuentre su nicho.

    Esta pregunta sería mucho más fácil de responder si supiéramos para qué queremos acceder a Internet desde un dispositivo móvil.

    Aplicaciones del acceso inalámbrico
    Uno de los primeros ejemplos históricos del acceso inalámbrico a un sistema computacional lo constituyen los tricorders de la serie Star Trek.

    La gracia de los tricorders es la interacción con el medio. Un tricorder es un arreglo de sensores que (presumiblemente) sube y baja información.

    La industria está fuertemente preocupada de encontrar killer-applicacions y hasta ahora tiene poco éxito.

    Aplicaciones hasta ahora:
    • Compras en contexto
    • Mapas y navegación
    • Búsqueda, acceso tradicional a Internet
    • Comunicaciones, Chat de texto
    • Aplicaciones corporativas

    Aplicaciones corporativas:
    • Ventas en terreno
    • CRM
    • Time tracking
    • Inventario
    • Fichas médicas

    El problema parece ser que se necesita algo más que acceso a "información" para estar dispuesto a pagar.

    Las particularidades de los dispositivos móviles
    Los dispositivos inalámbricos presentan particularidades:
    • Dificultades en la comunicación con el humano: pantallas muy chicas, dispositivos de entrada lentos o cansadores.
    • Dificultades tecnológicas: fuente de energía limitada y menor velocidad de procesamiento.
    • Dificultades en la conección de red: tiempos de latencia muy prolongados, y ancho de banda altamente variable, por infinidad de factores como el cambio de celda, condiciones de tráfico, competencia con la señal de voz, etc.

    Respecto a la usabilidad, el problema mayor es que los usuarios de estos sistemas en teoría están además haciendo otras cosas, por lo que la aplicación no es el foco de su atención como en un PC de escritorio.

    Otro punto respecto al mercado es que un celular, por ejemplo, es más barato que un computador y por lo tanto el público es más amplio (esto es una forma elegante de decir que en promedio tiene menos dinero); por lo tanto serán muy sensibles al precio que deban pagar por el uso de sus aplicaciones.
    Debido a estas particularidades, se estimó que una serie de protocolos debían ser creados. Esto para maximizar la eficiencia de los pocos recursos disponibles.

    Sistemas competitivos son AvantGo, my.palm (ex palm.NET) y WAP.

    El WAP FORUM
    http://www.wapforum.com/

    Al comienzo partió muy bien: todos los actores (AOL, Intel, Nokia, Ericsson, Sun, Microsoft, etc...) se pusieron de acuerdo para formar el WAPFORUM, que sería una corporación que se encargaría de desarrollar varios estándares que tenían que ver con la incorporación a internet de los dispositivos inalámbricos.
    Estos protocolos incluían transporte, transferencias, transacciones, seguridad y aplicaciones; esta diversidad ha sido el gran talón de aquiles. Ellos inventaron un conjunto de protocolos para hacer cosas que HTML, HTTP, TCP, TLS ya hacían. Existe una gran controversia acerca de si era realmente necesario hacer tal cantidad de cosas "desde cero" y eso ha alejado a muchos desarrolladores, porque atenta contra la modularidad y la reutilización de código.

    http://slashdot.org/articles/01/06/14/0046213.shtml

    En esta misma línea, otra pregunta a plantearse es si los supuestos (instalados hace dos años) de bajo ancho de banda, conexión intermitente, operación con una sola mano, pantallas pequeñas (y lentas), procesadores lentos y que usan poca energía son válidos si las redes inalámbricas van aumentando su capacidad. Los defensores de Wap señalan que si bien el costo de la conexión cae, nunca llega a cero, y que además con el tiempo los usuarios demandan más y más ancho de banda y eventualmente querrán muchas aplicaciones multimedia.

    (Este es el inverso del problema que ocurre respecto a los PCs de escritorio: en el caso de los PCs el único aliciente para hacer upgrades últimamente son los juegos, porque cualquier PC barato sirve para procesamiento de texto. En el caso de los dispositivos WAP el problema es que puede pasar bastante tiempo antes de que el ancho de banda permita transmision relativamente economica de video, por ejemplo).

    Componentes de WAP

    WAP funciona con unos gateway o proxies que conectan internet con los servicios móviles. Se espera que los gateway sean operados por los proveedores de las redes de telefonía inalámbrica.

    Los gateways son la pieza fundamental, puesto que además de conectar dos mundos (la Web tradicional y la Web inalámbrica), ellos realizarán procesos de codificación de datos (por ejemplo, reducción de resolución en imágenes, convertir formatos de sonido, etc.)

    Adaptadores WDP: para la capa de transporte y funcionar sobre distintos dispositivos ej.: celulares con mensajes cortos de 160 caracteres.
    WTLS: para seguridad
    WTP: algo parecido a TCP, pero sin tanta complicación con los números de secuencia ni el routing (se estima que el celular habla directamente con el gateway). En particular no es necesario mantener un stack TCP así que se necesita menos memoria.
    WSP: para sesiones. Esto es importante en un entorno stateless desde el punto de vista del servidor; la implementación es un HTTP con soporte para conexiones intermitentes. En el caso del Web las sesiones son normalmente emuladas con algun tipo de persistencia de datos a nivel de la aplicación.
    WML: para describir documentos
    WMLc: documentos compilados en bytecode (compresión de XML puede ser posible sin perder capacidades de streaming si se conoce la DTD)
    WMLScript: para crear aplicaciones. Un ejemplo de WMLScript para validar un formulario WAP: http://www.wmlscript.com/library/M-Commerce/cc_validate.asp.

    WAP 2.0
    La versión más reciente de la especificación es WAP 2.0. En esta versión, se incorpora soporte para protocolos ya existentes, que era la gran crítica. Se incorporó TCP y HTTP como parte de la especificación.

    Además se agregaron nuevos protocolos de transporte (adaptadores para las redes existentes).

    Se separan los protocolos en los del WAP Stack (Bajo nivel) y los de WAP applications (alto nivel).

    Por otra parte, el mismo W3C ha introducido algunos protocolos relacionados con atender las necesidades de dispositivos móviles: CC/PP (protocolo para especificar las capacidades de un useragent), CSS con un selector para medio dispositivo móvil y la misma modularidad de XHTML.

    WAP 2.0 también reutiliza los protocolos más antiguos, respondiendo a las críticas de que no es necesario crear todo de nuevo.

    WML
    Para servir WML, primero hay que hacer algunos cambios al servidor, en el caso de un servidor Apache:

    Quote
    AddType text/vnd.wap.wml wml
    AddType image/vnd.wap.wbmp wbmp
    AddType text/vnd.wap.wmlscript wmls
    AddType application/vnd.wap.wmlc wmlc
    AddType application/vnd.wap.wmlscriptc wmlsc

    Lo anterior es para que el servidor envíe el encabezado apropiado Content-type en respuesta a un requerimiento del cliente o del gateway.

    Quote
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1_1.xml">
    <wml>
    <card id="portada" title="Bienvenido">
    <p>Hola <i>Mundo</i>. Esta es una prueba <br/> de WAP.</p>
    <p>Avanza a la <a href="index.wml#segunda">segunda página</a></p>
    </card>
    <card id="segunda" title="Segunda Página">
    <p>Esta es la segunda pagina <br/>
    <img alt="foto" src="foto.wmp"/></p>
    </card>
    </wml>

    Otro ejemplo

    Quote
    <?xml version="1.0"?>
    <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
    <wml>
    <card id="first">
    <onevent type="onenterforward">
    <refresh>
    <setvar name="num" value=""/>
    </refresh>
    </onevent>
    <p>
    <do type="accept" label="Check">
    <go href="validator.wmls#validate()"/>
    </do>
    Enter a whole number between 25 and 50
    <input type="text" name="num" format="*N"/>
    </p>
    </card>
    <card id="invalid">
    <p>
    <do type="accept" label="Start">
    <go href="#first">
    <setvar name="num" value=""/>
    </go>
    </do>
    $(num) is not between 25 and 50
    </p>
    </card>
    <card id="valid">
    <p>
    <do type="accept" label="Start">
    <go href="#first">
    <setvar name="num" value=""/>
    </go>
    </do>

    $(num) is between 25 and 50
    </p>

    </card>
    </wml>

    Y el archivo con el WMLScript:

    Quote
    extern function validate()
    var validNum = WMLBrowser.getVar("num");
    var validNumAsInt = Lang.parseInt(validNum);
    var max = 50;
    var min = 25;
    if (validNumAsInt) {
    if ((validNumAsInt < min) || (validNumAsInt > max)) {
    WMLBrowser.go("validate.wml#invalid");
    {}
    else WMLBrowser.go("validate.wml#valid");{}}
    else
    Dialogs.alert("The number " + validNum + "is not a whole number");
    WMLBrowser.setVar("num", "");
    WMLBrowser.go("validate.wml#first");
    {}
    }

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 9 | 1:41 PM
    Cómo crear un portal WAP

    Introducción
    La creación de un portal WAP es mucho más sencilla que la de un portal web tradicional. Esta sencillez es consecuencia de las propias limitaciones que imponen los teléfonos móviles con tecnología WAP. La pequeña pantalla de estos terminales apenas dejan libertad para el diseño, que se reduce a mostrar información textual. En la Red existen pequeñas utilidades que facilitan la creación de páginas WML y emuladores para comprobarlas.

    Las páginas web que muestran los teléfonos WAP están escritas en un lenguaje llamado WML. Se trata de una versión adaptada del popular lenguaje HTML para la tecnología móvil. Las páginas diseñadas para WAP utilizan la extensión wml en los nombres de los archivos (por ejemplo, index.wml), en lugar de las conocidas extensiones htm o html, propias de las páginas HTML.

    El lenguaje WML

    Si pensamos en la pequeña pantalla de los teléfonos móviles y en la reducida velocidad de conexión (9,6 Kbps, frente a los 56 Kbps de un módem), deduciremos que el lenguaje WML no puede ser muy complejo. En efecto, éste se limita a mostrar menús por pantalla que llevan a pequeños fragmentos de texto y a enlaces a otras páginas WML.

    También es posible mostrar imágenes, aunque no es recomendable utilizarlas debido a su mayor tiempo de descarga. Estas imágenes son mapas de bits guardadas en archivos con extensión wbmp. Un mapa de bits o bitmap es una secuencia de ceros y unos que dibujan toda la imagen: un 1 muestra un punto negro y un 0, un punto blanco. Los formatos JPEG y GIF son inviables en un teléfono móvil porque requieren ejecutar algoritmos de descompresión para mostrarlos.

    Pero es en esta sencillez donde reside la dificultad para crear las páginas. Debemos hacernos a la idea de que los navegadores incorporados en los teléfonos WAP son muy tontos y requieren que las páginas estén perfectamente construidas. Si falta una coma, la página probablemente no llegue ni a mostrarse. Para rizar más el rizo, las distintas implementaciones de los navegadores en los teléfonos pueden ocasionar que una página WML produzca errores en algunos (por ejemplo, se vea en un Motorola pero no en un Nokia). También existen emuladores de WML que funcionan en entornos Windows o Linux, aunque suelen ser mucho más permisivos en la sintaxis de las páginas que los teléfonos WAP.

    Editores de páginas WML
    Cualquier editor de texto (incluido el Notepad de Windows) nos servirá para escribir una página en lenguaje WML. Pero si queremos trabajar má¡s cómodamente con el código WML, es recomendable utilizar editores que resalten en colores las etiquetas (comandos) del lenguaje. En Linux, tanto Emacs como Vim permiten resaltar la sintaxis del lenguaje.

    Para Windows se puede utilizar WAPtor, que dispone de una vista previa para mostrar el resultado final de la página.

    Emuladores de páginas WAP


    WinWAP mostrando una página WML

    Debido al alto precio de las conexiones desde un teléfono WAP, no siempre es posible realizar las pruebas desde un terminal real. Por esta razón, resultan de gran utilidad los emuladores de WAP diseñados para nuestro sistema operativo. Para ver las páginas WML desde nuestro ordenador será necesario recurrir a estos emuladores, ya que los navegadores habituales no las muestran.

    Para Windows encontramos una gran variedad de emuladores. De las pruebas que han realizado en el Departamento de Tecnología, WinWAP ha sido, por su parecido a Explorer y Netscape, el que más nos ha agradado.

    Apenas existen para Linux buenos emuladores que muestren contenidos WAP. Waplet, de código libre, es uno de los pocos disponibles para este sistema operativo.

    Estos programas pueden utilizarse para navegar por páginas WAP sin disponer de un teléfono con esta tecnología. Sin embargo, debemos tener en cuenta que las reproducciones de las páginas no siempre son fieles y, en ocasiones, pueden verse correctamente desde un emulador pero mostrar errores desde un teléfono móvil.

    Los servidores WAP
    Cualquier servidor web puede adaptarse para mostrar páginas WML. Tan sólo es necesario configurar el servidor para que asocie las extensiones wml y wmls a los correspondientes tipos MIME, de manera equivalente a como están configuradas las extensiones htm y html. Si definimos que el archivo índice se llame index.wml, entonces será suficiente con marcar www.nombre-de-mi-portal.com para llegar a la página principal, que previamente la habremos nombrado como index.wml. Esta página habitualmente tendrá un menú para llegar a otras páginas WML dentro del mismo web.

    Algunos servidores están configurados para detectar el origen del visitante. Si se utiliza un navegador WAP, se mostrará la correspondiente página WML. En cambio, si se accede a estos sitios web desde un navegador estándar (como Explorer o Netscape), aparecerá una página HTML. Entre ellos podemos citar a Google.

    ¿Se puede ver una página web HTML desde un WAP? En principio no se puede, ya que sólo se muestran las páginas específicamente preparadas para WAP. Sin embargo, existen conversores que transforman estas páginas a formato WML. Por ejemplo, el navegador UP Phone, que está implementado en los teléfonos Motorola Timeport, incluye un conversor automático. Si nuestro navegador no dispone de conversor, también es posible utilizar conversores online, como el de Google (desde la página WAP de Google.com se pueden ver páginas HTML).


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 10 | 12:04 PM
    10 tips para desarrolladores web en Iphone

    Crear una aplicación web para el popular dispositivo iPhone es bastante similar a realizar un sitio web normal, pero con algunos detalles más a tener en cuenta, considerando el cambio de plataforma.

    En el siguiente artículo les daremos varios consejos tales como “cosas que no pueden faltar”, guías de usabilidad, trampas de testeo/debuggeo y problemas de desempeño que son necesarios a la hora de poner manos a la obra.

    Aplicaciones web vs. Aplicaciones nativas
    Debes tener en mente que una aplicación web funciona en el navegador, mientras que una aplicación nativa se encuentra instalada en el iPhone. Así que si deseas hacer algo así como un súper juego, de alta calidad, respuesta rápida y performance increíble, probablemente deberías optar por aprender algo de Objective-C y realizar una aplicación nativa. Sin embargo, si no posees una Mac y/o estás intentando realizar algo mucho más sencillo, como una versión para móvil de tu sitio web o blog, crear una aplicación web seguramente sea la forma más rápida y razonable de lograrlo.

    ¿Todavía no estás seguro? Aquí hay una lista de populares sitios web que son aplicaciones web para el iPhone:
    iphone.facebook.com
    m.digg.com
    hotels.com/iphone
    iphone.fmylife.com
    iphone.coldwellbanker.com
    Y la lista continua…

    Si quieres dar el máximo, puedes considerar la idea de realizar tanto una aplicación nativa (esperemos que gratuita) y una aplicación web, como lo han hecho la mayoría de los sitios listados anteriormente.

    1: Viewport, Viewport, Viewport
    Esto puede que sea la cosa más simple e importante para una aplicación web para el iPhone. Se trata de una sola línea de código que debemos incluir en nuestros tags head con los otros meta tags:

    Quote
    <meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

    Esto le dice al navegador que es necesario escalar tu página de tal forma que quepa bien en el iPhone. Esto es lo que cada campo significa:
    width=device-width
    Esto hace que la página quepa en el ancho del dispositivo. El display del iPhone es de 320×480 pixeles en modo retrato y 480×320 en modo paisaje, esto es por lo que a veces se ven sitios que usan un ancho de 320 en lugar de un ancho del mismo tamaño que del del dispositivo.
    initial-scale=1.0
    Esta es la escala de la primera carga de la página.
    maximum-scale=1.0
    Este es el escalamiento máximo permitido.
    user-scalable=0
    Esto determina si el usuario tiene permitido hacer zoom in y out por medio del presionamiento/doble-tapping. También se puede utilizar user-scalable=no y user-scalable=yes en lugar de 0 y 1.

    Ten en mente que viewport NO ES UNA VENTANA. Tómalo como si fuera una lupa sobre una página. Puedes moverla por todos lados y realizar zoom in/out. Este es el motivo por el cual ciertas propiedades como posicionamiento fijo no funcionan en el iPhone. En Professional iPhone and iPod touch Programming, Richard Wagner explica lo que es un viewport:

    Un viewport es un área rectangular de un espacio de la pantalla en el que se muestra una aplicación. Las aplicaciones Windows y Mac tradicionales están contenidas dentro de sus propias ventanas. Las aplicaciones web se muestran dentro de una ventana del navegador. Un usuario puede manipular lo que se ve dentro de un viewport redimensionando la ventana, haciendo scroll a través de su contenido y en muchos casos, cambiando el nivel del zoom.
    Especificar el viewport es una obligación y se trata del primer paso para lograr una aplicación web amigable al iPhone.

    2: “Esconder” la barra de direcciones
    La barra de direcciones ocupa una parte considerable de la ya bastante pequeña pantalla con la que tenemos que trabajar. Por eso seguramente desearás esconderla y así podrás mostrar tanta información en la pantalla como te sea posible. Mira el ejemplo que sigue:

    Ahora, ocultemos la barra añadiendo esta simple línea de código javascript:

    Quote
    window.scrollTo(0, 1);

    La siguiente imagen muestra que había mucha más información que se podría mostrar:

    Noten que esto sólo esconde temporalmente la barra de direcciones. Esconderla permanentemente se puede, pero no es la mejor idea.

    3: Prueba en iPhone y en navegadores
    Más allá de que tu meta final sea crear una aplicación web para el iPhone probarla en navegadores normales puede resultar beneficioso.

    Dado que se trata de una aplicación web, la puedes probar como a una de ellas. Esto quiere decir que podrás utilizar muchas herramientas útiles como YSlow, Firebug, y Web Developer.

    NOTA: Puede que obtengas errores de ciertas piezas del código que son legítimas. Por lo que no te conviene depender mucho de estas herramienta, úsalas sólo como una guía.

    Debes tener presente que Firefox puede que muestre las cosas de forma distinta de la que lo hará Safari y, a la vez, Safari también es distinto a Mobile Safari. Más que seguro notarás que las web apps que desarrollas en Dashcode no se mostrarán bien en Firefox. Es por esto que necesitas realizar la prueba en un iPhone. Si de hecho desarrollas en Dashcode, este posee herramientas de prueba/debuggeo propias.

    4: Imitar una aplicación nativa es posible
    Desde una perspectiva de usabilidad, hacer que tu aplicación web luzca como una nativa es beneficioso porque los usuarios ya saben cómo utilizar una aplicación iPhone. Además, utilizar los botones, fuentes, listas, etc. es también útil. Apple puso mucho tiempo y dinero para lograr un buen diseño, así que usemos de base su buen criterio y nos ahorraremos la necesidad de atravesar todo el proceso de diseño de forma innecesaria.

    La siguiente foto muestra el menú “Groups” de la propiedad “Contacts”. ¿Puedes adivinar si se trata de la aplicación nativa o su imitación?

    Si no deseas imitar una aplicación iPhone nativa, por lo menos sigue los siguientes consejos básicos:
    • Se consistente (por ejemplo, botones de navegación en cada página)
    • Crea botones que sean lo suficientemente grandes para poder apretarlos (por ejemplo, para los dedos gordos)
    • Haz que las cosas sean intuitivas (Por ejemplo, las cajas desplegables/contraíbles deben tener alguna pista como un +/- a su lado)

    5: Utiliza Frameworks, librerías y herramientas para ahorrar tiempo
    Si decides imitar una aplicación nativa, existen varias cosas que te pueden ahorrar una gran cantidad de tiempo:
    Dashcode
    Si tienes una Mac, esta puede que sea la mejor manera de lograr algo rápido. Dashcode posee una librería de partes (marcos, botones, etc.), una librería de snippets, una guía de pasos sobre el flujo de trabajo y mucho más.
    iUI
    Este bonito framework te permite crear web apps con simple HTML! Y también posee un lindo efecto deslizante. El desempeño es bastante rápido y el mismo framework es un archivo de tamaño bastante pequeño.
    iWebkit
    Como con iUI, puedes crear tu aplicación con HTML sencillo. Sin embargo, este framework posee muchas propiedades únicas. También tiene una guía de usuario que explica claramente cómo utilizar estas propiedades. Este framework funciona bien con otro código javascript, por lo que se puede personalizar la aplicación web de la forma en que cada uno desee.

    Por supuesto, estos son sólo algunas de las herramientas que pueden servirte, existen muchas más.

    6: Utiliza listas cuando te sea posible
    Las listas son una forma buena y rápida de mostrar información. “Contacts” y “Mail” muestran la información en forma de listas. Estas permiten una fácil navegación, nos dan la posibilidad de mostrar una gran cantidad de ítems en una pantalla pequeña y son fáciles de tocar en comparación con las imágenes. Además también se cargan de forma bastante rápida ya que se trata sólo de texto. Son el método de navegación ideal, dependiendo claro está del tipo de tu aplicación web.

    Si utilizas una lista, agrupar los elementos por orden alfabético, relevancia o utilidad es siempre algo bueno.

    7: Minimiza la navegación horizontal
    De ser posible, minimiza la cantidad de pantallas por las que tus usuarios deben navegar hasta acceder a la información que desean. Tener menos páginas por las que navegar implica menos redireccionamiento, y por ende, menos cargas innecesarias por tener que ir adelante y atrás.

    8: Haz que tu aplicación sea pequeña y rápida
    Recuerda que el desempeño es algo crítico en el mundo móvil, dado que un usuario puede estar en la red EDGE o poseer una conexión lenta. Es necesario dar la menor cantidad de datos a descargar que sea posible. Las reglas de desempeño de cualquier sitio normal se aplican también aquí. Las puedes chequear mediante Page Speed y YSlow.

    9: Ten un icono de Home
    Asegúrate de tener un bonito icono que la gente pueda ver cuando añadan tu aplicación web a su escritorio. Realiza un archivo PNG de 57×57 y añade el siguiente código a tu home page, en el head:

    Quote
    <link href="path/to/your/icon.png" rel="apple-touch-icon" />

    Tener un icono es una buena forma de reconocer rápidamente tu aplicación web, y también de hacer que ésta se vea profesional.

    10: Los “simuladores” iPhone no son perfectos
    Notarás que los simuladores iPhone, incluso el oficial “Aspen Simulator”, pueden a veces mostrar resultados diferentes que el propio iPhone. Es necesario tener esto en cuenta dado que mucha gente desarrolla y prueba las aplicaciones principalmente en estos “simuladores” sólo para descubrir cerca del final del desarrollo que en el iPhone la aplicación posee muchos bugs o directamente ni funciona. Así que tengan cuidado al utilizar un simulador, dado que no son un reemplazo del verdadero iPhone.



    Conclusión
    Seguramente existan muchos consejos que aquí no se hayan nombrado, así que no tengan miedo de exponer sus trucos y pasos a seguir a la hora de lograr el desarrollo de una buena aplicación.

    Es necesario que colaboremos entre todos para lograr una web cada día mejor.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 11 | 12:59 PM
    Diseñando para Móviles
    (diseño para múltiples tamaños de pantalla)

    En este artículo os enseñaremos y aprenderéis como conseguir un Diseño Web 100% Móvil, se explicará paso a paso las distintas estrategias para lograr el objetivo de; diseñar una Web totalmente válida para la gran mayoría de dispositivos móviles, usando las técnicas y tecnologías que podrás ir viendo a continuación.

    Imaginemos que tenemos que encagarnos de crear un diseño de un sitio web para móviles. Es probable que, a menos que estemos diseñando para un solo dispositivo, rápidamente nos vamos a encontrar con un problema común que experimentan todos los diseñadores que trabajan con dispositivos móviles, averiguar cuales son realmente las proporciones de pantalla de un dispositivo móvil.

    Por ejemplo:
    • El iPhone es de 320 píxeles de ancho por 480 píxeles de alto.
    • Muchos dispositivos de Nokia N-Series son 240 píxeles de ancho por 320 píxeles de alto.
    • Los dispositivos más nuevos a menudo apoyan un modo apaisado donde la anchura y la altura se invierte de forma espontánea.
    • Los dispositivos de Nokia más populares disponen de pantallas que van de 176 por 208 píxeles hasta 352 por 416 píxeles.
    • Las resoluciones de pantalla Blackberry variar desde 160 x 160 píxeles hasta a 324 x 352 píxeles.

    Este artículo se destina a ayudar a desarrollar el diseño de estrategias eficaces para orientarlo a una amplia gama de dispositivos móviles y tamaños de pantalla. Con este fin, comenzamos con un esquema de dos cuestiones clave que se encontrará en el diseño para las pequeñas pantallas: la diversidad en la pantalla y el tamaño del píxel.

    Esperar y gestión de la diversidad
    En este punto, probablemente te estarás preguntando “… ¿es realmente necesario para el diseño de todos estos tamaños diferentes de pantalla?”, o “… es lo que realmente necesitamos para crear un diseño para cada dispositivo?”. Dependiendo de los requerimientos de negocio del proyecto, puede ser totalmente factible diseñar sólo para un tamaño de pantalla o dispositivo. Sin embargo, si los requisitos determinan que debe ser utilizado por la mayoría de los dispositivos, vamos a tener que encontrar la manera de hacer frente a esta diversidad.

    Las cosas pueden no ser tan malas como parecen. Al diseñar para la web móvil, podemos suponer que las páginas se desplazan hacia arriba y hacia abajo como lo hacen los navegadores. Esto, de alguna forma elimina la necesidad de preocuparse por la altura de la pantalla, lo que nos permite centrar nuestros esfuerzos principalmente en tratar con la diversidad en anchos de pantalla del dispositivo. Afortunadamente DeviceAtlas Explorer nos proporciona un medio rápido para comprobar que el ancho de la pantalla en “se rompe” a través de los miles de dispositivos móviles conocidos.

    Los gráficos anteriores indican, que la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles con muchos de los valores restantes, 120, 130, 160, 208 y 220 píxeles, no demasiado divergentes de estos tres valores centrales. Esto nos deja con unos cuantos dispositivos, tanto en los extremos altos y bajos, con una anchura de 96, 101, 320 y 320 + píxeles. Mientras que los dispositivos con un ancho de pantalla de menos de 128 píxeles pueden parecer un pequeño porcentaje de la totalidad, cuando se combina (96, 120, 101 y 84 píxeles) que suman hasta 469 dispositivos!. Más de la mitad del número de dispositivos de 240 píxeles o alrededor del 10% de todos los dispositivos conocidos.

    También debemos señalar que en este momento, menos del 5% de los dispositivos tienen resoluciones superiores a 320 píxeles de ancho. Esperamos que esto cambie en los próximos años, ahora estamos viendo las resoluciones de pantalla más pequeña (128, 176, etc), y dando paso a las más grandes (240 +), como se ilustra en el gráfico siguiente:

    Teniendo en cuenta que el tamaño de pantalla es importante, también hay un parámetro adicional a considerar: la dimensión física de la pantalla.

    El problema de los Píxeles
    Durante años, los diseñadores han realizado principalmente plantillas Web para monitores comunes. El tamaño de pantalla medio es de 1024 x 768 pixels, y aunque el tamaño físico de las pantallas varían, las dimensiones totales normalmente son como resultado una densidad de píxeles de alrededor de 85 ppp (píxeles por pulgada). Últimamente, sin embargo, el panorama ha empezado a mostrar el cambio, sobre todo con los nuevos dispositivos portátiles:

    Netbooks, como el Asus Eee PC 900 tienen un rango de 9 pulgadas en diagonal con una resolución en torno a 1024 x 600 píxeles dándoles la densidad de píxeles de alrededor de 133 ppp.
    • El iPhone de Apple tiene una resolución de pantalla de 320 x 480 píxeles que al combinarse con sus 3.6″ de diagonal de pantalla los resultados nos llevan a, una densidad de píxeles de 160 ppp.
    • El E60 de Nokia tiene una resolución de pantalla de 416 x 352 píxeles y un minúsculo 2,2″ de diagonal de pantalla dándole una densidad de píxeles de más de 240 ppp!

    Cuando se combina con la necesidad de apoyar muchos dispositivos, esta gran variación en la densidad de píxeles introduce un nuevo problema, el impacto del tamaño de píxels en el diseño.

    La siguiente ilustración simula la misma imagen de 100 x 100 píxeles en dispositivos con la densidad de píxeles de 72, 144 y 240 píxeles por pulgada. Observemos cómo el tipo y los detalles finos se pierden como se representa en las imágenes más pequeñas.

    Esto significa que debemos de dar solución a una amplia gama de píxeles. Sin embargo, es importante tener en cuenta que no todos los píxeles son creados iguales, y cuando sea posible:
    • Determinar la gama completa de densidades de píxeles, necesitará ser soportada.
    • Revisa tus diseños para estos dispositivos, para garantizar su visualización en todos ellos.
    • Diseñar y definir los elementos de la maquetación en unidades relativas, como el em y en porcentajes.

    Con un desarrollo y estrategia teniendo en cuenta los tamaños de pantalla, conseguiremos construir sitios Web escalables para una amplia gama de dispositivos móviles.

    A continuación definiremos las diferentes estrategias para conseguir una Web para múltiples pantallas. No solo para dispositivos móviles sino también para pantallas de escritorio:

    Estrategias de diseño de sitios Web para móviles

    Estrategia 1: Definición de grupos de dispositivos
    Como hemos comentado antes, puede haber miles de modelos de dispositivos, la diversidad no es tan mala como parece a simple vista. De hecho, es completamente posible agrupar muchos dispositivos con un ancho de pantalla similar y acabar con cinco grupos con diferentes anchos de pantalla:
    tiny: 84px, 96px, 101px, 128px, 130px, 132px
    pequeña: 160px, 176px
    medio: 208px, 220px, 240px
    grande: 320px, 360px, 480px +
    escritorio: 800px +

    Estas agrupaciones son, por supuesto, totalmente arbitrarias y los requisitos de un proyecto pueden dictar un conjunto totalmente diferente. Por ejemplo, 320 píxeles para el iPhone y, poco más de 240 píxeles para navegadores móviles más recientes y 128 píxeles para dispositivos más antiguos. Al final, la definición de las agrupaciones de dispositivos realmente se reduce a los objetivos y la necesidad del proyecto. Con este fin, es una buena idea visitar DeviceAtlas de forma regular con el fin de ver las estadísticas y volver a evaluar la relevancia de sus agrupaciones.

    También debemos tener en cuentas las capacidades de cada dispositivo no todos soportan CSS avanzado, manipulación del DOM y JavaScript. Antes de hacer las agrupaciones comentadas anteriormente, debemos asegurarnos que los dispositivos móviles son compatibles con las tecnologías que ofrecerá el proyecto Web.

    Estrategia 2: Crear un diseño de referencia por defecto
    Después de haber definido los grupos de dispositivos, ahora debemos seleccionar el dispositivo de referencia. Este es el dispositivo que se usara como base durante el proceso de diseño y en última instancia, dará lugar a la creación de un diseño de referencia. Dependiendo de las necesidades de negocio que desee, se diseñará una versión de referencia para un ancho medio de pantalal de (240px). Esto mantiene el diseño suficientemente simple para adaptarse a pantallas más pequeñas, permitiendo al mismo tiempo la libertad de crear un diseño que se adaptará a los dispositivos con pantallas más grandes. También alguna vez crearemos 2 diseños de referencia, pero solo cuando sea necesario. Todo esto nos permite lo siguiente:

    • Progresivamente mejorar el diseño de los dispositivos más avanzados (por ejemplo: para aprovechar el GPS o el apoyo a CSS3).
    • Adaptarse a los múltiples dispositivos de contacto (móviles, PDA, etc).
    • Ajustar el diseño para compensar las actuales limitaciones graves en los dispositivos más restringidos.

    Estrategia 3: Definir las normas para el contenido y la adaptación de diseño
    Una vez que hayamos completado un diseño de referencia, también debemos proporcionar una dirección específica para la adaptación de este diseño a otros tamaños de pantalla. Similares a los contenidos de un documento de diseño visual. Estas normas y directrices deben ayudar al equipo de maquetación Web a adaptar el diseño sacando partido al código XHTML y CSS. Por ejemplo:

    • El logotipo del sitio debe estar adaptado para cada agrupación de dispositivos para garantizar la visualización de dicha imagen.
    • Las cabeceras deberían estirarse al 100% del ancho de la pantalla utilizando una imagen de fondo repetitiva siempre que sea posible.
    • Las imágenes de contenido no deben ser mayor de 200 píxeles de ancho para el grupo por defecto, (o el 80% de la anchura de la pantalla del dispositivo).
    • Las imágenes de contenido debe ser automáticamente optimizadas para escalar, independientemente del ancho de pantalla.
    • Siempre que sea posible, las listas de iconos o gráficos decorativos deben de ser eliminados, y así conseguir el mayor espacio disponible para el contenido.
    • Una hoja de estilo dinámica se utilizará con el fin de establecer los valores para cada dispositivo.

    Aunque no es una recomendación formal, resume las estrategias comunes para adaptar y mejorar el diseño, manteniendo los tamaños de archivos al mínimo. Siempre debemos tomar decisiones de diseño pensando en la mayoría de usuarios, y en lo objetivos del proyecto.

    Estrategia 4: Opta por los estándares web y un diseño flexible
    Con las normas del diseño de referencia y la adaptación en su lugar, la estrategia final se basa en la flexibilidad de marcado a través de la reutilización de un código genérico, basados en estándares XHTML y CSS. En la práctica significa, la creción de un código XHTML y CSS genérico, que podemos usar mayormente en cualquiera de los futuros proyectos para dispositivos móviles, esto nos aportará beneficio, tiempo y productividad en los siguientes proyectos. Dado el gran número de dispositivos móviles, este beneficio no puede ser subestimado, ya que garantiza que su contenido será accesible a un gran número de usuarios, sin complicar el trabajo a los desarrolladores. A continuación, se presenta una serie de indicaciones para aumentar progresivamente el diseño de las agrupaciones dispositivo diferentes, a través del uso de navegador y/o el dispositivo específico. CSS, gráficos y marcado HTML.

    A medida que vamos leyendo aprendemos que realmente para conseguir un diseño accesible para cualquier dispositivo móvil es, crear diseños líquidos partiendo de un diseño de referencia y maximizar el uso de CSS y XHTML. Todo esto incluye tomar como referencia las siguientes indicaciones:
    • No especificar un ancho de documento específico, permitiendo así que el diseño pueda expandirse y contraerse, y así pueda llenar la pantalla del navegador del dispositivo.
    • Aprovechar los elementos de bloque que también se expanden y se contraen de forma nativa.
    • Usar la hoja de estilos para dsitribuir los elementos de contenido de forma accesible para el usuario.
    • Especificar el tamaño de los elementos de diseño utilizando los porcentajes de modo que, naturalmente se expandan y se contraigan adaptándose al ancho de página.

    Poniendo todo junto
    Para minimizar al máximo el tiempo de carga de la página, debemos simplificar y agrupar el código a una sola línea. Tambien tenemos que cumplir con los estándares XHTML y CSS. Por ejemplo el marcado y diseño de la web de la BBC para móviles es bastante simple y con un contenido básico:

    Como podemos comprobar es un diseño totalmente fluido y escalable, que ocupa todo el ancho de la pantalla, independientemente del dispositivo que se use. El resto de los estilos y contenidos son especialmente adaptados en la siguiente imagen, que satisfacen el producto o familia de dispositivos más usados actualmente:

    • El logotipo cambia de tamaño o es sustituido para adaptarse a la anchura de la pantalla del dispositivo.
    • La cabecera y otros elementos utilizan una textura como fondo y un color, en dispositivos más antiguos dicha textura no se muestra, perso si se muestra el color de fondo.
    • La BBC, parerce que a optado por adaptar el contenido a diferentes grupos de dispositivos, como podemos comprobar en la imagen las diferencias que hay entre el iPhone y el resto de dispositivos. También podemos ver que en el iPhone se muestran más contenidos y gráficos aprovechando al máximo su gran pantalla.
    • Las imágenes son escalables y se adaptan a cualquiera de los dispositivos.

    • En los dispositivos más grandes, los iconos asociados a cada elemento de la lista se pueden ver. Mientras que en los dispositivos más pequeños se elimina para garantizar una longitud de línea cómoda, para la visualización correcta del contenido.

    El sitio Web de la BBC, es un ejemplo ideal, ya que muestra de forma simple que se puede combinar un marcado y estilos para llevar a acabo la visualización correcta de un amplio grupo de dispositivos móviles. Su diseño, adaptación, redacción y funcionalidad esta totalmente orientado a los múltiples dispositivos que usan los usuarios. Con una rápida carga del sitio, una buena optimización y equilibrio entre diseño y accesibilidad.

    User Agent Switcher
    Por último quiero incluir un práctico complemento para firefox, su nombre es User Agent Switcher, nos permite visualizar una Web en diferentes dispositivos. La extensión User Agent Switcher añade un menú y un botón de la barra de herramientas para cambiar el agente de usuario del navegador. Está diseñado para Firefox, Flock, Songbird y Thunderbird, y se ejecutarán en cualquier plataforma que soporte estos navegadores, incluyendo Windows, Mac OS X y Linux. Creo que es la herramienta más apropiada para testear nuestra maquetas en cualquier dispositivo. Tambien os añado un fichero xml para integrarlo en la herramienta, con el que nos añadira los agentes de usuario de los distintos dispositivos móviles más populares y usados actualmente:

    Descargar pack de agentes de usuario

    Concluyendo, espero que todo lo que hemos comentado os sirva de gran ayuda para vuestros proyectos para dispositivos móviles, ya que son el futuro de la Web.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 12 | 2:14 PM
    Navegadores para dispositivos móviles

    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.

    • Desarrollador: Opera
    • Gratuito: No (24$)
    • Última versión: 9.7 beta
    • Motor: Presto
    • Plataformas soportadas: Symbian UIQ, Symbian S60, Windows Mobile.
    • Web: opera.com/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

    • Desarrollador: Opera
    • Gratuito: Si
    • Última versión: 4.2
    • Motor: Presto
    • Plataformas soportadas: Java MIDP 2.0.
    • Web: opera.com/miniSimulador de 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

    • Desarrollador: Nokia
    • Gratuito: Licencia Symbian
    • Última versión: S60
    • Motor: WebKit
    • Plataformas soportadas: Symbian S60.
    • Web: nokia.com/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

    • Desarrollador: Obigo AB
    • Gratuito: No
    • Última versión: Q7
    • Motor: Propio
    • Plataformas soportadas: Symbian S60, Windows Mobile, BREW
    • Web: obigo.com

    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

    • Desarrollador: Access Co
    • Gratuito: No
    • Última versión: 3.5
    • Motor: Propio
    • Plataformas soportadas: Symbian S60, S80, UIQ, Palm OS, PSP, PlayStation3, Windows Mobile entre muchas otras.
    • Web: access-company.com

    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 fue 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 tecnologías 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

    • Desarrollador: Apple
    • Gratuito: Si
    • Última versión: 4
    • Motor: WebKit
    • Plataformas soportadas: iPhone OS, iTouch
    • Web: apple.com

    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

    • Desarrollador: Microsoft
    • Gratuito: Necesita licencia Windows
    • Última versión: 6
    • Motor: Trident
    • Plataformas soportadas: Windows CE, Mobile.
    • Web: microsoft.com/spain

    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

    • Desarrollador: Mozilla
    • Gratuito: Si
    • Última versión: 1.01a1
    • Motor: Gecko
    • Plataformas soportadas: Symbian OS, Windows Mobile, Nokia Maemo.
    • Web: mozilla.org/projects/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

    • Desarrollador: Teashark
    • Gratuito: Si
    • Última versión: 1.01a1
    • Motor: Webkit
    • Plataformas soportadas:
    Java ME.
    • Web: teashark.com


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 13 | 3:43 PM
    60 Buenas prácticas Web Móvil

    Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

    La Web móvil se presenta como un auténtico reto tanto para usuarios como para desarrolladores ya que, por un lado, el usuario encuentra problemas al intentar acceder a los sitios Web desde los dispositivos móviles, y por otro, los proveedores de contenido encuentran dificultades para crear sitios Web que funcionen adecuadamente en todos los tipos de dispositivos y configuraciones. Con la Web Móvil se intenta llegar a más usuarios y que ellos puedan acceder desde cualquier dispositivo móvil a la Web.

    Este documento especifica las Mejores Prácticas para el contenido Web de dispositivos móviles. El objetivo principal es mejorar la experiencia del usuario de la Web cuando se accede desde estos dispositivos.

    Las recomendaciones se refieren a la entrega de contenido y no a los procesos por los cuales se crea, ni a los dispositivos o agentes de usuario al que se entrega.

    Principalmente a los desarrolladores y operadores de sitios Web. Con este documento se intenta familiarizados con la creación de sitios Web, y tener una familiaridad con las tecnologías que intervienen, tales como servidores Web y HTTP.

    Buenas prácticas Web Móvil

    Consistencia temática: Mantener una temática coherente para los distintos dispositivos móviles.
    Capacidades: Explotar las capacidades del dispositivo para proporcionar una mejor experiencia al usuario.
    Deficiencias: Toma las medidas oportunas para evitar implementaciones deficientes.
    Pruebas: Llevar a cabo las pruebas sobre los dispositivos, así como los emuladores.
    URLs: Usar URLs cortas.
    Barra de Navegación: Ofrecer como mínimo un menú navegación en la parte superior de la página.
    Equilibrio en los enlaces: Tener en cuenta el equilibrio entre tener demasiados enlaces en una página y pedir al usuario a seguir demasiados enlaces para llegar a lo que están buscando
    Navegación: Proporcionar mecanismos de navegación coherentes.
    Claves de Acceso (Acces Keys): Asignar claves de acceso a los enlaces en los menús de navegación y a los enlaces que son visitados frecuentemente.
    Identificar los enlaces: Identificar claramente el objetivo de cada vínculo.
    Mapa de imágenes: No usar mapa de imágenes a menos que sepas que el dispositivo lo soporta eficazmente.
    Pop-Ups o Ventanas emergentes: No utilices Pop-Ups sin informar al usuario.
    Auto Refresh: No utilizar auto refresh (auto refrescar página) en la página a menos que se le haya informado al usuario.
    Redireccionamiento: No utilices marcar para redirigir las páginas automáticamente. Configura el servidor para que el mismo lo haga de forma automática.
    Recursos externos: Mantén el número de recursos externos al mínimo.
    Contenido conveniente: Asegúrese de que el contenido es conveniente para su utilización en un contexto móvil.
    Claridad: Utiliza un lenguaje claro y sencillo.
    Limitación del contenido: Limite el contenido a lo que el usuario ha solicitado.
    Tamaño de páginas usable: Mantener el peso de página limitado para que no ralentice la navegación del usuario.
    Tamaño de páginas limitado: Asegurarse de que el tamaño global de la página es adecuado para las limitaciones de memoria del dispositivo.
    Desplazamiento o Scroll: Límite el desplazamiento de la página en una dirección, en el caso de que el desplazamiento secundario se pueda evitar.
    Imágenes para el espaciado: Nunca utilicemos imágenes para el espaciado.
    Tamaño de imágenes: No utilizar imágenes con una alta resolución y peso elevados. Para una mayor prestación y carga del dispositivo.
    Uso del color e imágenes: Asegurarse que la información que proporcionamos con colores e imágenes también esta disponible sin el uso de estas.
    Contraste de color: Mantener un contraste claro entre el color de fondo y el color del contenido.
    Imágenes de fondo: Cuando utilices imágenes de fondo asegúrate de que el contenido sigue siendo legible en el dispositivo.
    Título de página: Ofrecer un breve pero descriptivo título de la página.
    No Frames: No utilizar frames (marcos) en ninguna página.
    Estructura: Usar las características del lenguaje para crear una estructura lógica en el documento.
    Tablas: Antes de usar las tablas asegúrate de que el dispositivo las soporte eficazmente.
    Tablas anidadas: No utilizar tablas anidadas.
    Tablas para diseño: No utilices las tablas para diseñar la página.
    Tablas alternativas: Siempre que sea posible, utiliza una alternativa a la presentación de datos o presentación tabular.
    Texto alternativo: Proporcionar un texto alternativo para todo elemento no textual.
    Objects o Scripts: No utilizar objetos incrustados o script, ya que actualmente la mayoría de los dispositivos no los soportan.
    Especificación en el tamaño de las imágenes: Especifica el tamaño de las imágenes a descargar para aquellas que tengan un peso alto.
    Redimensionamiento de imágenes: Cambiar el tamaño de las imágenes en servidor para aquellas que tengan un peso demasiado alto.
    Marcado Válido: Crea documentos que validen satisfactoriamente.
    Medidas: No utilizar medidas en píxeles ni unidades absolutas..
    Uso de CSS: Utiliza una hoja de estilos para controlar la presentación y disposición de la página, a menos que el dispositivo no lo soporte.
    Soporte CSS: Organiza los documentos de modo que si es necesario puedan ser leídos sin hojas de estilo.
    Tamaño de la hoja de estilos CSS: Mantener y minimizar el tamaño de la hoja de estilos.
    Minimizar: Utilizar un marcado conciso y eficiente.
    Soporte de formatos: Enviar contenido en un formato que se sepa que es soportado por el dispositivo.
    Formato preferido: Siempre que sea posible, enviar el contenido en un formato preferido.
    Codificación de caracteres: Asegúrese de que la codificación de caracteres del documento es soportado por el dispositivo.
    Uso de la codificación: Indicar la codificación de caracteres que se utilice.
    Mensajes de Error: Proporcionar información útil en los mensajes de error.
    Cookies: No se basan en cookies disponibles.
    Caché: Proporcionar la información en caché de las respuestas HTTP.
    Fuentes: No contar con la herencia en estilo de fuente.
    Minimizar acciones del teclado: Mantener el número de pulsaciones o acciones del teclado del dispositivo al mínimo, para una mayor rapidez del usuario.
    Inputs o entradas de texto libre: Evitar la entrada de texto libre, siempre que sea posible.
    Valores por defecto: Ofrecer pre-seleccionado los valores por defecto cuando sea posible.
    Inputs: Especifique un modo de entrada de texto por defecto, el lenguaje y/o formato de entrada, si el dispositivo se sabe lo soporte.
    Orden de tabulación: Crear un orden lógico a través de los enlaces, controles de formulario y objetos.
    Control de Labels: Etiqueta todos los controles de forma adecuada y explícitamente asociados con las etiquetas..
    Posición de controles: Posicionar las etiquetas de modo que se establecen correctamente en relación a la forma que se refieren a los controles.

    Por último os proporciono el validador de las Buenas Prácticas en Web Móvil.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 14 | 5:08 PM
    Recursos para desarrollar web móvil

    A pesar de que el iPhone/iPod Touch cuente con un navegador completo como [url=http://es.wikipedia.org/wiki/Safari_(web_browser)]Safari[/url], desarrollar web para móviles sigue siendo un paradigma bastante distinto a la web “normal”. Afortunadamente WAP 1.0 ya quedó atrás y con éste WML (el lenguaje de marcado específico para WAP 1.0) por lo que actualmente podemos utilizar XHTML-MP, un derivado del XHTML Basic desarrollado por la W3C bastante similar al X/HTML de toda la vida.

    Hay una compañía que posee una vasta experiencia de trabajo: AyerViernes, que nos quiere ofrecer algunos interesantes recursos para comenzar a desarrollar web móviles. Les presento algunos de ellos:

  • Usability & Design Resources
    Una librería de recursos del equipo de Nokia con especial énfasis en aspectos de usabilidad; buen punto de inicio para tener en cuenta las limitaciones en el desarrollo para móviles. Especialmente destacado el paper con consideraciones sobre las variables culturales y usabilidad

  • Mobile Web Best Practices 1.0
    Un completo informe de la W3C que abarca múltiples ámbitos del desarrollo, pero enfocado principalmente en otorgar una óptima experiencia de usuario, desde la creación de contenidos al diseño y la implementación

  • Challenges of Interface Design for Mobile Devices
    Del equipo detrás de Yahoo! User Interface (un favorito personal). Como el anterior, aborda distintos temas aunque de una manera mucho más resumida, e incluye enlaces a otros recursos

  • mobiForge
    Un completo centro de información y comunidad de desarrollo de web móvil, un gran concentrador de información valiosa, como

  • XHTML Mobile Profile / XHTML MP Tutorial
    Una referencia más técnica sobre el lenguaje, con información detallada sobre XHTML-MP

  • Smart.fm: How to move from web to mobile
    Un punto de partida para pensar una estrategia móvil. Consideraciones generales a partir de la experiencia de este reconocido grupo de consultores en un caso particular.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 15 | 6:27 PM
    Diseño web para iPhone

    Las estadísticas no mienten, más de un millón de dispositivos vendidos el primer fin de semana, Apple produciendo a su máxima capacidad (40 millones de iPhones al año) para satisfacer la falta de inventario, listas de espera de 2 meses en algunos casos para conseguir el teléfono del cuál todo mundo esta hablando y la pregunta está en el aire ¿Los diseñadores/desarrolladores estamos listos? o mejor aún, ¿debemos estarlo? qué no eran ya suficientes temas de moda para manejar con nuestros clientes: Web 2.0, AJAX, SEO, RIAs, etc.

    Vamos por partes, al hablar del desarrollo de aplicaciones para el iPhone podríamos partir de dos vertientes, la primera que implica desarrollar Aplicaciones Nativas para el teléfono, programar nuestras aplicaciones con un lenguaje de programación tipo C y obtener el mejor desempeño de las mismas. Este esquema esta orientado principalmente a gente con buenos conocimientos de programación y que estén pensando distribuir sus aplicaciones en la plataforma de Apple llamada “App Store”.

    El otro tipo de aplicaciones del cual estaríamos hablando son las aplicaciones Web para el iPhone, y para desarrollar/diseñar en este esquema lo que se requiere son conocimientos fundamentales en el diseño/desarrollo web, tales como HTML, CSS, Javascript, etc. En este nicho entran las Aplicaciones Web diseñadas específicamente para el iPhone y también los Sitios Web para el mismo y que en este caso son el tema central de este artículo.

    Del diseño web tradicional al diseño web para iPhone
    Al decir Diseño Web “Tradicional” nos referimos a sitios hechos a la medida para alguna empresa, proyecto o institución, la gran mayoría de ellos están hechos con HTML y otros tantos con Flash; ambas situaciones pueden dar origen a una estrategia alternativa para nuestro proyecto, en la primera situación aunque tengamos un sitio HTML que posiblemente sea visible en el iPhone, este no aprovechará varias características que se han hecho presentes y que seguramente marcaran la pauta a seguir para futuras versiones de los navegadores móviles y en el segundo escenario donde hablamos de un sitio Flash es ya sabido por todos, que aún no existe una versión de Flash Player para iPhone, tanto Apple como Adobe se han pronunciado al respecto y al parecer tendremos que seguir esperando para tener una versión móvil de nuestro plug-in favorito para desarrollar sitios web y aplicaciones RIA, pero mientras esto sucede tendremos que optar por otro esquema.

    En este otro esquema no hay ningún secreto para los diseñadores/desarrolladores web que están acostumbrados a manejar estándares web en sus sitios, de hecho si tenemos nuestro sitio web planeado de esta manera, bastará con una pequeña actualización en el CSS para que el iPhone y/o cualquier otro dispositivo móvil puedan interpretarlo de manera adecuada, entiéndase por esto último la posibilidad de ver el sitio web en la versión móvil de Safari y para los más entusiastas que tienen la inquietud de crear un sitio web especialmente diseñado para el dispositivo tenemos algunos tips bastante interesantes.

    Pruebas de Compatibilidad con Webkit
    El navegador del iPhone esta basado en el mismo motor web que Safari llamado WebKit, salvo con algunas adaptaciones para el dispositivo y por ello es una de las herramientas clave para probar nuestra creaciones; otro factor importante es el hecho de que actualmente ya se encuentra disponible para Windows lo cual da libertad a los desarrolladores/diseñadores de utilizar la plataforma de su preferencia. A pesar de esto es muy recomendable conseguir un iPhone para tener una percepción real de como se va a ver y a comportar el contenido en la pantalla.

    De lo anterior, uno de los temas más discutidos en foros es el viewport; que en pocas palabras es la manera en la cual los diseñadores del iPhone decidieron que una página web de tamaño real debería ser vista en la pantalla del dispositivo a un tamaño relativo al mismo. Cuando vemos una página en el navegador a través del viewport, se interpreta una sección de 980 pixeles y se plasma en la pantalla de 320 pixeles del iPhone, lo anterior fue pensado para lograr la mayor compatibilidad con los sitios web actuales.

    Conforme utilizamos el zoom al pellizcar la pantalla o dar un “tap” sobre la misma, todo el contenido se re escalara para brindarnos una mejor vista con mas detalles de las imágenes y las tipografias. Para controlar este comportamiento se implementó una etiqueta meta que lleva la siguiente sintaxis:

    Quote
    <meta name="viewport" content="width=880" />

    Esta etiqueta es interpretada por el navegador para cambiar el tamaño original del viewport de los 980 pixeles originales a una medida de 880 pixeles, otra medida muy utilizada por sites con relación de aspecto 4:3, sin duda este es uno de los primeros recursos de usabilidad que tendremos que controlar al estar diseñando para una pantalla de 320 pixeles.

    Otro factor a considerar es la tipografía, que incrementa su tamaño para darle al usuario mayor legibilidad en relación al zoom utilizado en el viewport, es recomendable si estamos utilizando elementos de posición y tamaño absoluto como los AP elements de Dreamweaver, desactivar esta funcionalidad con la directiva: -webkit-text-size-adjust: none; dentro del CSS para evitar problemas de desbordamiento (overflow) del contenido o bien controlarlo mediante propiedades de visibilidad y scroll para evitar resultados inesperados.

    El tamaño sí importa
    Antes de seguir adaptando nuestro sitio también es recomendable considerar las dimensiones físicas del aparato para el cual estamos diseñando, el saber que en un centímetro vamos tener 64 pixeles es un dato a tener en cuenta ya que no hay cursor que nos refleje la selección en pantalla y en lugar de ello tendremos que estar utilizando los dedos que en promedio usaran entre 60 y 90 pixeles del área visible. Lo cual nos hace pensar en una estrategia para crear un sistema de navegación adecuado al tamaño de nuestras manos.

    Y al hablar de sistemas de navegación para el iPhone al parecer están de moda los acordeones, debido a la flexibilidad de los mismos. Una regla de tamaño al respecto sería que el alto de cada elemento de navegación fuera de alto tal que permitiera cómodamente seleccionar una sección del sitio web, aún en movimiento!

    Para aplicar estas reglas Apple recomienda en sus guías de desarrollo web utilizar una petición de tamaño específica al ligar el CSS al documento, podría ser de la siguiente manera:

    Quote
    <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

    Al buscar un navegador web la página, pasaran por alto este archivo CSS por tener un máximo de 480px.

    Herramientas de desarrollo web para iPhone
    Si bien es cierto que en repetidas ocasiones hemos recomendado para diseño/desarrollo móvil alguna de las herramientas de la Suite de Adobe CS3 en combinación con Device Central y ese ambiente de trabajo sigue siendo vigente ya que solo bastará con generar un documento nuevo para displays de 320x480, en esta ocasión vamos a hablar de otra herramienta llamada Aptana.

    Aptana es un ambiente de desarrollo que esta basado en Eclipse, al igual que Flex Builder. Nos permite trabajar con tecnologías como HTML, CSS, DOM, JavaScript, Adobe AIR, PHP y lo más importante es que existe un plug in para el desarrollo orientado a iPhone. Dicho plug in aún esta en fase beta, pero es lo suficientemente estable para producir con él.

    Algunas de sus características más importantes son:
    • Multiplataforma y de Código Abierto
    • Integración con FTP
    • Soporte parat Javascript, HTML y CSS
    • Previsualización de proyectos iPhone en modo vertical y horizontal
    • Plantillas para crear aplicaciones de iPhone
    • Fácil importación de librerías AJAX
    • Servidor local para correr aplicaciones directamente en el iPhone

    Por todo lo anterior se vuelve una herramienta indispensable al momento de estar creando contenido para el dispositivo.

    Consideraciones Finales
    A grandes rasgos hemos hablado en general del panorama para crear contenido para el iPhone. Queda de ustedes el poner manos a la obra para tener esos sitios web optimizados para el dispositivo que sin lugar a dudas esta dando mucho de que hablar y que esta creando un parte aguas en cuestión de interfaces móviles debido a lo avanzado de sus tecnologías. Es un fenómeno que no podemos ignorar, desde un punto de vista global las estadísticas son contundentes, en toda Latinoamérica no somos ajenos a esta situación y este dispositivo a pesar de ubicarse en un nicho algo elitista, está creando conciencia de que hay otras maneras de acceder a la red, de mantener sincronizada nuestra información en la nube de Internet y de consumir contenidos aún en movimiento. Estoy en espera de sus comentarios e inquietudes acerca del tema.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Servicios Adicionales » Cuestiones generales » sitio PDA
    Página 1 de 212»
    Búscar: