Regresar a la página www.ComoCrearTuWeb.com
Página 1 de 2 12 ÚltimoÚltimo
Resultados 1 al 15 de 24

Tema: Cómo crear una web para dispositivos móviles

  1. #1
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,183
    Poder de Reputación
    10

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

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    15
    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.
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

  3. #3
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,183
    Poder de Reputación
    10
    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.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,252
    Poder de Reputación
    14
    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
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de lantiga
    Fecha de Ingreso
    23 feb, 11
    Mensajes
    897
    Poder de Reputación
    10
    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
    Suscribete a Los videotutoriales de Lantiga y podre hacer vídeos más largos y con mejor calidad.

  6. #6
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,183
    Poder de Reputación
    10
    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!

  7. #7
    Recien Llegado! Habitante
    Fecha de Ingreso
    07 dic, 11
    Mensajes
    16
    Poder de Reputación
    5

    Web adaptada a móviles

    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.

  8. #8
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    64
    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?????
    ______________________________________

    reparacion de rines


    _____________________________________

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de lantiga
    Fecha de Ingreso
    23 feb, 11
    Mensajes
    897
    Poder de Reputación
    10
    @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 )
    Suscribete a Los videotutoriales de Lantiga y podre hacer vídeos más largos y con mejor calidad.

  10. #10
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    64
    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
    ______________________________________

    reparacion de rines


    _____________________________________

  11. #11
    Esto empieza a ser un vicio... Habitante Avatar de lantiga
    Fecha de Ingreso
    23 feb, 11
    Mensajes
    897
    Poder de Reputación
    10
    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
    Suscribete a Los videotutoriales de Lantiga y podre hacer vídeos más largos y con mejor calidad.

  12. #12
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    64
    te prestaba una, pero ufff con los pekes de vacaciones imaginate!!!
    jajajaja
    ______________________________________

    reparacion de rines


    _____________________________________

  13. #13
    Me va gustando esto... Habitante
    Fecha de Ingreso
    08 ago, 09
    Ubicación
    Stgo, RD
    Mensajes
    258
    Poder de Reputación
    9
    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

  14. #14
    Me va gustando esto... Habitante Avatar de TonyCrisAm
    Fecha de Ingreso
    04 mar, 11
    Mensajes
    60
    Poder de Reputación
    6
    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!!!
    Última edición por TonyCrisAm; 27/02/2012 a las 22:57

  15. #15
    Esto empieza a ser un vicio... Habitante Avatar de lantiga
    Fecha de Ingreso
    23 feb, 11
    Mensajes
    897
    Poder de Reputación
    10
    @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
    Suscribete a Los videotutoriales de Lantiga y podre hacer vídeos más largos y con mejor calidad.

Temas Similares

  1. Crear una web para móviles
    Por Fjota en el foro Foro General
    Respuestas: 7
    Último Mensaje: 15/11/2011, 11:58
  2. Pagina en Flash para moviles
    Por sangin en el foro Adobe Flash
    Respuestas: 0
    Último Mensaje: 26/08/2011, 17:02
  3. PONER UN CHAT PARA MOVILES EN MI WEB
    Por PERIKING en el foro Scripts
    Respuestas: 4
    Último Mensaje: 15/07/2009, 04:17
  4. web en .mobi y para moviles
    Por herriam en el foro Foro General
    Respuestas: 0
    Último Mensaje: 10/12/2007, 13:35

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •