Cómo crear una web para dispositivos móviles

[Jorgens_CCTW]

Pues eso, que se nos echa el tiempo encima y aún no tenemos lista nuestra web para que sea bien visible en los móviles y tablets de última generación. No podemos quedarnos atrás, de modo que mientras me pongo a investigar y aprender sobre el tema, dejo esta nueva sección abierta por si alguno de vosotros se atreve a adelantarnos algunas instrucciones.

Qué os parece? Un abrazo!!

[victor5atodogas]

Si me permites Jorgens, en cuanto al foro, hay un complemento que permite instalar una plantilla extra y el foro creo autodetecta el sistema desde el que entras, y de ser asi te lo carga con el diseño correspondiente adaptado para moviles (http://www.vbhispano.com/) Mobile Style en la parte inferior.

En cuanto a la web, la cuestion seria colocar un enlace para "cambiar la plantilla" y que de esa forma se cambiara la plantilla a una realizada con porcentajes que a fin de cuentas es la idea para lograr eso, asi que creo se podria empezar por ahi.

Un saludo.

[Jorgens_CCTW]

Si, para el foro lo he visto y lo voy a comprar en cuanto tenga un poco de pasta de sobra. El vbulletin tiene eso, que es de pago, je je je.

En cuanto a la web, no solo es lo que comentas, sino que las versiones para movil son más ligeras, para evitar el tiempo de carga, que puede cansar a la peña. Se eliminan cosas que sobran para dejarlo todo menos agobiante y de carga más rápida. Imagino que es cuestión de elaborar una hoja de estilos distinta, ocultando las capas que sobran con display nulo o algo así.

En cualquier caso, creo que las plantillas de movil se basan en java (especial para android etc). Tengo que leer más aún, je je je.

[codomodragon]

amm amigo jorgens esto se puede hacer con la tegnologia der portales wap, pero recuerda que esta tecnología ya esta casi obsoleta debido a que los nuevos exploradores de celular (bi android) son tan buenos como los de pc

[lantiga]

Hola chicos siento la ausencia pero estoy liadillo; a la pregunta de Jorge sobreb como adaptar nuestras web´s la respuesta es Jquery mobile un framework que no hará la vida más facil yo por mi parte me la descargue el otro día a aún no he podido meterle mano pero tiene toda la pinta de ser facil si conoceis la arquitectura de Jquery.


Haber si tengo tiempo os subo uno de mis tutos ;je,je

[Jorgens_CCTW]

Pues si, lo de jquery mobile lo tengo apuntado para leer, je je je. Si tienes algo será bienvenido. Genial. He visto algúna conferencia dondese hablaba de eso y parece bien sencillo.

Vamos aprendiendo. Hay algo que no se aún (bueno, no se casi nada, je je je) y es cómo se hace para que Google no tome páginas con contenido duplicado si es que se hacen páginas para versión movil además de las normales.... leere a ver si me entero.

Gracias!

[Bill Gates]

Buenos días:

He visitado una web tecnológica que dice poder adaptar una web a móviles mediante Html5.
Como soy nuevo, desconozco las diferentes versiones de Htmls pero ya que aquí tenemos magníficos cursos (los cuales me estoy empapando...) y si es acerta la opción, podríamos incluirlo dentro del curso Html.

Saludos.

[Yaneth]

hola chicos

hace tiempo traia esa curiosidad pero tuve que dejara por la paz. ya que me hice mas bolas de lo que aprendi

bien... navegando, me encontré esto....
http://www.ubik.com/
se
ve fácil, mas bien... muuuuuuuuy muuuy facil
solo que no encuentro bien los detalles, ya sea si hay que pagar algo...
o bien, si podemos utilizar nuestro mismo dominio (por lo que vi te da uno con extencion .ubik.com

alguien sabe mas al respecto?????

[lantiga]

@Yaneth ; buena aportación pero creo que nos deja poco margen de maniobra; has visto la intro de Jquey mobile?http://www.comocreartuweb.com/consul...ghlight=jquery

Por otro lado @Bill Gates quizás tenga razón; jorge tendría que empezar a hablarnos de HTML5 (a poder en ser en formato video) ;

@Jorge (Tete nos estamos quedando atrás )

[Yaneth]

hola lantiga..... yo de regreso despues de mis ausencias jejej
si te contara loq ue estuve haciendo.... te daria un ataque de risa jajajajajaj

bien..... no, no he leido esa introduccion, creo que deberia empezar por ahi
le daré una revisada, gracias

[lantiga]

Si te cuento yo ... Estoy haciendo cosas a cuatros manos (dos manos por cada ordenador que tengo; ) y me faltaria quizás dos más jejjejejjeje

[Yaneth]

te prestaba una, pero ufff con los pekes de vacaciones imaginate!!!
jajajaja

[rodojpm]

Feliz año nuevo para todos

Jorgens... Estuve investigando sobre eso, y no te imaginas lo facil que es, basicamente, es un sitio comun y corriente, con la unica diferencia de que se crea para reducido espacio, (unos 320px de ancho) sin embargo como este numero es cambiante, el ancho es en realidad de 100%, en cuando a la velocidad de carga se suele utilizar menos imagenes y reducida informacion.

Y en javascript lo unico que NO se utiliza es el hover (onMouseOver)... ya que simplemente no funciona

Se puede utilizar el shortcut icon, y para Apple se utiliza esto: <link rel="apple-touch-icon" href="LA IMAGEN"/>

Ademas hay un meta especial que se llama viewport

[TonyCrisAm]

Hola, disculpad la demora... en el título de este tema pone:"Cómo crear una web para dispositivos móviles" vale:
En cuanto a CREAR una web para móviles, es fácil, se puede hacer de varias maneras, yo se dos:

1. Utilizando un servicio o sitio web que esté especializado en la elaboración de webs para móviles, que por cierto cada vez son más, algunos gratuitos y otros de pago (ejemplos: Onbile, DotMobi... etc.).Gracias a estos sitios web y otros similares, es posible crear un sitio web para móviles sin tener ningún tipo de conocimientos de programación, además algunas son gratuitas. Yo tengo mi sitio web con webnode, y al crearlo con ellos, automáticamente adquieres una versión para móviles, aunque bajo mi punto de vista, es un poco simple... dejémoslo así.
2. La segunda opción es crear una web para móviles por nosotros mismos desde 0, y creo que es la más difícil o complicada. Para crear una web para móviles desde 0 deberíamos seguir algunas pautas, como por ejemplo: no introducir flash, hacer las páginas más ligeras, evitar ventanas emergentes... y muchas más). También cabe la posibilidad de utilizar wml, como he leído anteriormente en este tema del foro. Para esta opción, indudablemente es necesario tener algunos conocimientos de programación.

Si echais un vistazo por Google o Firefox, os aseguro que encontraréis un montón más de información que os ayudará a crear una web para dispositivos móviles fácilmente.

Ahora viene la segunda parte, y creo que es a lo que se refería Jorgens al crear este tema: ¿Como adaptar nuestro sitio web a dispositivos móviles? Vale, eso es otra cosa, aunque el fundamento sea el mismo: crear un sitio web para dispositivos móviles, lo que pasa que en este caso lo haremos partiendo desde un sitio web creado por nosotros mismos.
Es lógico y entra de cajón que si tenemos un sitio web creado por nosotros mismos, poseemos conocimientos de programación, hojas de estilo... etc, por lo os aseguro que si habéis sido capaces de crear un sitio web que se vea bien en todos los navegadores por vosotros mismos (por ejemplo siguiendo las pautas y lecciones de Jorgens... jeje.) vais a ser capaces de adaptar este a los dispositivos móviles fácilmente.

1. Una de las opciones que se nos presentan a la hora de adaptar nuestro sitio web a los dispositivos móviles, es usar CSS. Usar Css para adaptar nuestro sitio web a dispositivos móviles, es mucho más fácil de lo muchos creen, simplemente hay que indicar al navegador, que hoja de estilos CSS queremos que se muestre cuando nuestro sitio web sea visto y utilizado desde dispositivos móviles. Aprovechando ésto, y nuestros conocimientos de Css (que no tienen porque ser muy avanzados), crearemos una hoja de estilos a la que llamaremos: "moviles" y en la cual incluiremos mediante css una plantilla que muestre solo elementos básicos de la página (ejemplo: eliminamos cabecera, barras laterales, y pie de página...) y que se ajuste al ancho de la pantalla. Una vez echo esto, la subimos a nuestro directorio de Css. A continuación ponemos la nueva hoja de estilos css para móviles en funcionamiento, para ello, basta con incluir el código de carga entre head y /head:

<link href="moviles.css" rel="stylesheet" />

Vale, hasta ahí todo bien, ya que es un simple proceso de creación de una plantilla css y de carga de esta en nuestro sitio web, todo realizado como venimos haciendo habitualmente... ¿no?. Ahora viene la parte final, que es igual de sencilla o más, y consiste en indicar al navegador que esta plantilla Css debe ser utilizada cuando se acceda a nuestro sitio web por medio de dispositivos móviles... ¿y como lo hacemos? pues tan simple como añadir el atributo: 'media="handheld" ' a nuestro código de carga, con lo cual quedaría así finalmente:

<link href="moviles.css" rel="stylesheet" media="handheld" />


2. La segunda opción para adapatar nuestro sitio web a dispositivos móviles es mucho más sencilla que la anterior: visitamos algunos de los sitios web que he mencionado antes y que facilitan la creación de sitios web para móviles, por muy poco dinero o gratis, ya que muchos de ellos permiten crear un sitio web al cual tus usuarios serán redireccionados cuando entren en tu sitio web desde un dispositivo móvil. Creo que ofrecen la ventaja de que el contenido que añades a tu "nueva web para moviles" no cuenta como duplicado... tengo que mirarmelo mejor. Otros de estos sitios web, directamente adaptan tu contenido a los móviles, sin necesidad de crear un nuevo sitio web para móviles, por ejemplo: Mofuse o Mobify... entre otros.


3. La tercera y última opción que os propongo, es la de usar un plugin de javascript, por ejemplo jQuery Mobile, de lo cual no voy a escribir más debido a que aún estoy aprendiendo a utilizarlo...

Una buena idea que se me ocurre para adaptar nuestro sitio web a dispositivos móviles, sería crear un duplicado de cierta parte del contenido de nuestro sitio web, pero adaptado, lógicamente a los móviles y la navegación en éstos. A continuación añadiría la etiqueta no-index para que este contenido no fuera indexado nuevamente (y así librarme del duplicado) y a continuación crearía un código javascript para redireccionar directamente a este nuevo contenido cuando se acceda a mi sitio web desde dispositivos móviles... algo parecido a lo que hacen estos sitios web, ¿no creeis? jeje...


Bueno, pues por mi parte eso es todo, espero que os haya servido de ayuda y si he cometido algún error, me gustaría que me lo dierais a conocer. Ah!! se me olvidaba, aquí podéis leer algo más relacionado con todo esto de crear y adaptar sitios web a dispositivos móviles, aunque en la gran biblioteca hay mucha más información.

Un Saludo!!!

[lantiga]

@TonyCrisAm felicidades por el post, es un buen resumen de todo lo que se puede hacer.

Yo por mi parte os doy un par de apuntes:

1. Si os gusta Jquery mobile, sabed que aún esta en su fase fase alpha y que seguramente mejoren las prestaciones que dan para implementar nuestras webs a dispositivos de mano. Por otro lado al ser un framework, nosotros nos tenemos que adaptar al "entorno" para nuestros desarrollos, con la contrapartida de la limitación de este marco.

2. Por otro si lo que os gusta es tener una versatilidad más amplia os recomiendo usar un script para que nuestra web se vea de una determinada manera, si la petición de nuestra url se hace desde un navegador y que se vea de otra si la petición se hace desde un dispositivo de mano.

3. En cuanto al tema de las hojas de estilo para adaptar una web a dispositivos de mano, hace un tiempo publique en esta sección del foro (http://www.comocreartuweb.com/consul...ghlight=mobile) un experimento para saber como se veía en móviles y parece que se ve bastante bien.

4. Por ultimo simplemente os paso un link del W3C de los diferentes tipos de salidas o "media types"; solamente por si ahi alguien que no conoces las handheld: http://www.w3.org/TR/CSS2/media.html