Cómo crear una web para dispositivos móviles

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!! :wink:

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.

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.

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

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

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!

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.

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?????

@Yaneth ; buena aportación pero creo que nos deja poco margen de maniobra; has visto la intro de Jquey mobile?http://www.comocreartuweb.com/consultas/showthread.php/53887-Tutori…

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[:D]) ;

@Jorge (Tete nos estamos quedando atrás )

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

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

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

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

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. 
   
3. 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!!!

@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/consultas/showthread.php/54508-¿Conte…) 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

hola un saludo a la comunidad!!
hasta donde yo e leído lo mas optimo para realizar las web adaptables es utilizando lo nuevo en html(5), los madiaqueries, y los css3.. la mayoría de las cosas se adaptan utilizando solo una o las instrucción de ajustar el ancho máximo de el contenedor y el ancho mínimo del mismo.. hasta hoy yo no e creado ningún ejemplo.. pero en la mayoría de los videotutoriales que e visto esto es lo primordial y claro saber a que resolución se van a utilizar los diseños. si es para un móvil, table, notebook, etc.. otra cosa que mencionan ahí es que los diseños para móvil son los primeros que se empiezan a diseñar porque comentan que es mas fácil después agregar contenido para las resoluciones mas grandes que quitar contenido para las resoluciones mas pequeñas.. !!!!ojo los primeros a diseñar no a programar!!.. hasta aquí creo que este apartado tendrá mucho de que hablar en un futuro y no sera muy lejano. espero pronto tener mi web adaptable para poder comentar qui------> desde---Sonora---México---un Saludo..

Quiero hacer una web para una Fundación de fines benéficos y quisiera que se pueda ver desde dispositivos móviles, dónde puedo encontrar tutoriales que tengan que ver con este tema?

Tienes que abrir un nuevo tema para tu pregunta. No puedes hacerlo en el tema de otro usuario. Saludos.

La solución a esto y lo logico conociendo la tematica de CCTW es aprender a usar Responsive Web Desing desde un principio.
ya que no seria logico que un foro o comunidad como esta que siempre esta con la maza encuanto alguien muestra un trabajo y se ve que es una plantilla, promover ahora el uso de aplicaciones, plantillas, plugging, etc. Vamos digo yo!!
Salvo que esto ya no sea lo que en su dia conoci y me atrapo de esta web.
Este es un ejemplo de lo que os hablo.
http://www.ecbloguer.com/marketingdigital/?p=2635
Estudiando un poco y dedicandoles horas como todo, nos ahorraremos plantillas, programas, etc.
Basicamente manejando conceptos como:
min-height
max-widht
min-widht
medidas en %
Float
y poco más en las hojas de estilo que le digamos que cargue para los distintos dispositivos moviles tendremos un excelente trabajo tanto personal como profesionalmente.
Es cierto que existen librerias de Jquery de las que podemos tirar para conseguir cosas en concreto como una navegación que se valla adaptando al tamaño hasta casi desaparecer, etc.
No tenemos que hacer webs libianas, podemos adaptar hasta el diseño más complejo. Todo como bien sabemos haciendo uso de herramientas como html5 y css3 que por ejemplo nos ayudan a evitar colgar muchas imagenes.
Y este es el futuro señores!!
Dentro de poco los Pc de sobremesa seran solo para los que no les queda otro remedio el resto disfrutaran de la vida navegando desde sus smartphone, tablets, iphone, etc.
Un saludo

Bajo mi punto de vista, la solución que habéis planteado es bastante buena y creo que resuelve algunas dudas. Todo esto del CSS3, de los mediaqueries y de jQuery está muy bien. Pero hay algunos de nosotros que somos algo más exigentes y no nos conformamos con algo que no funcione correctamente en IE o en navegadores sin javascript o con éste desactivado. Yo, por ejemplo, muchas veces he querido tirar del CSS3 pero me ha echado para atrás el comprobar que no me iba bien en varios IE...
Creo que esa es la única pega...
Un saludo!!!

Hola @TonyCrisAm, lo primero gracias por tu post!!
Estoy intentando adaptar la web para moviles creando una hoja de estilos especifica , como explicas, pero soy incapaz de que me funcione, el código que le he dado es este:
<link rel="stylesheet" href="moviles.css" type=text/css" media="handheld"/>
<link rel="stylesheet" href="estilos.css" type=text/css" media="screen"/>
Estoy desesperada!!! no sé que es lo que está mal, pero no me funciona!!!
Gracias anticipadas!!
Un Saludo!!!

Al fin les traigo una solución, mi idea es colocar de index una página que detecte si es un móvil o pc, de ahí hay que redireccionarlos a la página corespondiente[:D]
pueden descargar los códigos aquí noes spam solo es una ayuda:http://detectmobilebrowsers.com/

descargan la opción de su preferencia y tachaan!

@Webmast: si bien es una solución (que muchos utilizan), no es muy buena, puesto que implica desarrollar dos sitios distintos para el mismo contenido.

La solución definitiva es la que plantea Paxarin: Responsive Design. Puede ser algo compleja, pero todos los novatos aprenderán mucho sólo con intentar aprender a diseñar en respuesta a diferentes medidas (repsonsive design).

Yo recomiendo utilizar la solución de Webmast sólo si es necesario utilizar características que no están disponibles para los smartphones (los móviles anteriores no los cuento porque hay muy poca gente que los utiliza actualmente y, si aún los utilizan, es muy probable que no puedan acceder a internet a través de estos), como Flash, que no esta disponible para la mayoría de los dispositivos Android < 2.3.

yo compré una página web bastante económica. Lo mejor es que está hecha con wordpress y estaba incluido en el precio un curso para aprender a auto gestionar mi propia página, por lo que no dependo de nadie para hacer los cambios y reservas online que recibo. Creo que también lo hacen con otros cms como joomla y siempre páginas web que se adaptan a cualquier dispositivo, que era lo que buscaba

Copia el código de un plugin de Wordpress y lo utilizas reprogramándolo a tu web.

El secreto como se ha comentado antes es detectar el dispositivo que accede a la página web y mostrarle su versión.