2009-12-04 25 views
14

Ha todo,¿Por dónde empezar con el desarrollo web de teléfonos inteligentes?

Así que me han encargado desarrollar un sitio web de teléfono inteligente para nuestro portal de propiedades y lo primero que hice fue ver qué lecciones tenían que contar otros en línea, pero he descubierto muy poco.

No estoy construyendo una aplicación, estoy construyendo un sitio web y estoy buscando hacer y no hacer con respecto a html, css, enfoques de anchuras/alturas, javascript (es jquery va a jugar bien en todas las plataformas?) y cualquier cosa que se relacione con este tipo de plataforma.

Mirando a los demás me gusta http://mobile.whistlerblackcomb.com/ mucho.

Saludos, Denis

+0

¿Con qué teléfonos necesita ser compatible? –

+0

Eso no es una especificación para mí. Tenemos un sitio wap y eso no se reemplaza, sino que queremos algo entre nuestro sitio en vivo para wap y la web que iphones, driods, palm pres, etc. pueden obtener ya que la carga del sitio principal es alta y la funcionalidad wap es baja. –

Respuesta

15

ACTUALIZACIÓN:

Si bien la mayor parte del texto a continuación sigue siendo válida, ahora diría que jQuery Mobile hace un gran trabajo de proporcionar un conjunto bien diseñado y útil de componentes de interfaz de usuario, y al mismo tiempo aliviar una gran cantidad de los problemas de detección y detección de dispositivos que he usado para WURFL en el pasado. Todavía está en beta, pero parece estar funcionando bastante bien. Recomiendo echarle un vistazo.


Las dos cuestiones más importantes a tener en cuenta al empezar son:

1) diseño dispositivo de detección

2) interfaz de usuario móvil

Para el problema número 1, os recomiendo mirar el conjunto de datos del dispositivo WURFL:

http://wurfl.sourceforge.net/

Al usar esto, puede recuperar (algunas) capacidades de dispositivos que están accediendo a su sitio, utilizando su cadena de agente de usuario. Probar aplicaciones web móviles es como probar el navegador desde el infierno: hay tantas combinaciones diferentes de dispositivos y navegadores que es una tarea difícil. Si usted puede centrarse en el desarrollo de una o dos versiones para móviles bastante capaces, por ejemplo:

1) mínimo de 300 px de anchura con reclamado el apoyo de "web" y una pantalla táctil 2) El mismo que el anterior, pero sin una pantalla táctil

puede crear un sitio muy útil que funcione para la mayoría de los "teléfonos inteligentes" o "teléfonos de aplicación" como David Pogue los ha nombrado con mayor precisión. Para la prueba real, que puede probar:

1) Hacer una lista de todos tus amigos y qué tipo de teléfonos que tienen 2) Ir a una tienda de teléfonos y el uso de esos teléfonos para probar su sitio

y, sin importar lo que hagas, tendrás que ser ágil cuando recibas los comentarios inevitables de los usuarios sobre contenido roto/lento en sus dispositivos.

En cuanto al diseño de la interfaz de usuario, hay un par de problemas. El más simple es un bonito aspecto CSS. Aquí, solo mira algunos sitios móviles que te gustan y roba su CSS. Una vez que hayas hecho esto, básicamente estás haciendo un viejo desarrollo web normal, solo en una pantalla pequeña. ul se convertirá en buenas tablas de iPhone-y, etc.

El mayor problema es la usabilidad de la web móvil. En muchos sentidos, estamos en una situación de 90-web con el desarrollo web móvil. Lo que quiero decir es que trabajamos sin patrones de diseño bien establecidos. Esto hace que el desarrollo web móvil sea realmente divertido, pero también significa que debes estar preparado para ajustar tu UI fea/rota a medida que evolucionan las mejores ideas. Un ejemplo actual son las migraciones de navegación globales que se ven en muchos sitios móviles. Un sorprendente número de personas están tratando de imitar el comportamiento de las aplicaciones nativas de iPhone al proporcionar una herramienta de navegación persistente (botón de retroceso) dentro de la aplicación móvil. Aunque esto es bastante bonito, tiene algunos problemas:

1) Es redundante, dado que el navegador viene con un botón de retroceso con el que los usuarios están muy familiarizados. La razón por la que estos navs globales existen en aplicaciones nativas es porque no vienen con una herramienta de navegación gratuita.

2) La web es genial. Puede ingresar, salir y volver a ingresar "aplicaciones" en cualquier punto de su estructura. Al asumir que un usuario toma una ruta lineal a través de su aplicación, está disminuyendo su capacidad de web, lo que hace que sea mucho más crudo en relación con el resto de la web.

3) Se rompe. O puede encontrarse en una situación en la que el navegador de la aplicación y el navegador apuntan en direcciones opuestas (presionando el botón Atrás en su aplicación avanza a través del historial de la aplicación), o falsifica un botón Atrás con javascript, que se rompe si no lo hacen Empiece desde el principio de una aplicación (enlace por correo electrónico, marcador) o configure sesiones, lo que puede ser un gran problema solo para reproducir lo que obtiene del navegador de forma gratuita.Las sesiones también son vulnerables al quebrantamiento (enlaces por correo electrónico, marcadores), y realmente no está ganando mucho.

Creo que mis puntos principales aquí son:

1) No se olvide que está en la web. La web es genial, los navegadores son geniales, haz uso de eso.

2) No tenga miedo de jugar. No hay muchos patrones bien establecidos aquí, por lo que puede que tenga que probar algunos de los suyos.

+0

Bien puesto, +1 de mí –

+1

Además, si está planeando usar mysql como su base de datos, Tera-WURFL (http://www.tera-wurfl.com/) da un impulso de rendimiento muy bueno en comparación con vainilla xml wurfl . –

0

con los teléfonos inteligentes modernos hay realmente ninguna diferencia entre el desarrollo de una página web convencional y una página web específica.

Pero podría probar los emuladores que ofrecen los principales jugadores como Apple, RIM, Motorola y Nokia para ver cómo se ven.

0

Te sugiero echar un vistazo a algunos otros sitios móviles. Publiqué algunos a continuación.

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0

Dado que los navegadores móviles modernos funcionan bastante parecido a los navegadores de escritorio, el viejo dicho de "JS y Minify CSS, optimizar imágenes "debe ser su principal preocupación, ya que el ancho de banda es más valioso en dispositivos móviles.

Además, tenga en cuenta lo siguiente:

  • Piense si necesita todas sus imágenes, y si son demasiado grandes para pantallas pequeñas. Considere eliminar o reducir el tamaño de imágenes grandes.
  • Compruebe su JavaScript - ¿Funcionará su sitio sin él? Puede ser beneficioso para desactivar partes de ella, ya que puede reducir fácilmente la velocidad de los navegadores móviles
  • A menudo se puede obtener simplemente mediante la inclusión de estilos especializados CSS a medida para dispositivos de pantalla pequeña en su sitio principal

Usted podría también encontrará esto útil: Why your mobile site probably sucks

0

Los sitios móviles a menudo se usan en teléfonos normales, y a menudo van a m.example.com en lugar de www.example.com. Estos sitios tienen poca/ninguna compatibilidad javascript o css. Cuando pregunte acerca de los sitios para dispositivos móviles, tenga en cuenta que existen dos tipos de sitios para dispositivos móviles.

Se supone que los teléfonos inteligentes modernos manejan los navegadores igual que un navegador completo, pero no lo son. De hecho, el iPhone vive en un mundo de fantasía e informará un ancho de ventana de más de 900 píxeles.

Hay trucos que puede hacer para un teléfono inteligente. Una pantalla táctil no tiene uso para: pseudoclase de flotación. Esto puede ser un problema para los menús que requieren estacionario.Puedes diseñar alrededor de esto. ¿Cómo? usted pregunta ...

Apple mira una nueva metaetiqueta (haga una búsqueda en google en ella) y otros navegadores de teléfonos inteligentes miran esto también. Con esto, puede obligar al teléfono inteligente a informar el tamaño de la pantalla real en píxeles, y no su tamaño de fantasía preprogramado.

Ahora que usted ha hecho esto, puede utilizar las declaraciones CSS condicionales,

@media only all and (max-width:600px){

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS 
} 

He utilizado este para bloquear <div> s que obstruida por una pantalla de dispositivo móvil: Panel de luz, por ejemplo. También utilicé esto para modificar el ancho de las imágenes, para que se ajusten mejor en el dispositivo. ¿Por qué elegí 600 px? Sentí que muchos de los "netbooks" más nuevos deberían incluirse aquí también.

Espero que esto ayude.

--Dave

0

Si usted está buscando para hacer el desarrollo específicamente para un iPhone o iTouch usar thise sentencia condicional.

[if SafMob] @import url(iphone.css); 

Aquí hay un artículo sobre la construcción de sitios para dispositivos móviles. http://www.alistapart.com/articles/pocket/

0

Meagan Fisher's talk en Designing Effective Mobile Interfaces proporciona una buena visión general. Ella recomienda el libro "Mobile Web Design" de Cameron Moll. En cuanto a la tecnología, comenzaría familiarizándome con XHTML Mobile Profile si aún no lo está.

En lo que respecta al diseño, piense bien. Toma un libro con una buena tipografía y mira si puedes duplicar el diseño de la página con CSS. "Elementos de estilo tipográfico aplicado a la Web" es un buen punto de partida para eso. Los sitios web de teléfonos se trata de desplazarse, no de navegación compleja. El ritmo y el espaciado son importantes. Mantenga las imágenes pequeñas y su texto de alto contraste, y terminará con algo que se carga rápido y se ve bien.

0

También existe este threeparter, "Diseño de Web Móvil" por Cameron Moll:

State of the Mobile Web
Methods to the Madness
Tips & Techniques

La serie es de 2005, pero muchos de los datos sigue siendo relevante. La última parte "Sugerencias & Técnicas" también enumera una gran cantidad de otros recursos en el desarrollo web móvil.

Cuestiones relacionadas