html para moviles

[jagp1119]

Hola estoy desarrollando una aplicacion para moviles por medio de html5, pero tengo un problema, si la simulo en web todo sale bien, pero si la simulo en un dispositivo movil se desordena todo, no salen los botones ni las opciones, que podria estar mal, para trabajar en moviles se deben hacer otras cosas?.

[RokuMetal]

Hola jagp1119, para proyectos de desarrollo de apps móviles debes ajustar tu hoja de estilos (CSS) a la resolución de la pantalla de un dispositivo móvil, recuerda, una app móvil es muy diferente a una página web mostrada en pantalla de una computadora.

Yo prefiero usar jQuery Mobile, éste nos provee una estructura ya hecha y ajustada en cuanto a CSS y funciones de jQuery para la interacción con el usuario, aunque puedes editarlo a tu gusto. Te dejo el enlace a continuación:

[URL="http://jquerymobile.com/"]http://jquerymobile.com/[/URL]



:)

[jagp1119]

Pero he escuchado que Jquery no es muy bueno en lo que tiene que ver con rendimiento, que es algo lento en los dispositivos moviles, es cierto?.

[HackID1]

Iniciado por jagp1119

Hola estoy desarrollando una aplicacion para moviles por medio de html5, pero tengo un problema, si la simulo en web todo sale bien, pero si la simulo en un dispositivo movil se desordena todo, no salen los botones ni las opciones, que podria estar mal, para trabajar en moviles se deben hacer otras cosas?.

Creo que para PC y para móvil ambos deben tener un diseño CSS distinto, para que se acople a la pantalla de cada dispositivo .

Y una pregunta a @ROKUMETAL
En ese link si entramos, que fichero debo descargar para la plantilla correcta de CSS para móviles.

Me interesa saberlo, y luego de descargarla, es una plantilla normal como el resto de CSS ??.
O como se debe trabajar con ella, es para crear mi página web tanto para PC como móvil.

Saludos!

[RokuMetal]

Iniciado por HackID1

Creo que para PC y para móvil ambos deben tener un diseño CSS distinto, para que se acople a la pantalla de cada dispositivo .

Y una pregunta a @ROKUMETAL
En ese link si entramos, que fichero debo descargar para la plantilla correcta de CSS para móviles.

Me interesa saberlo, y luego de descargarla, es una plantilla normal como el resto de CSS ??.
O como se debe trabajar con ella, es para crear mi página web tanto para PC como móvil.

Saludos!

Bueno, en la sección de descargas hay dos tipos de archivos JS y CSS: una versión mínima (minified) que nos sirve cuando ya terminamos el proyecto y la versión descomprimida (uncompressed) que pesa más que la versión mínima y nos sirve cuando estamos en pleno desarrollo. En realidad se puede usar cualquiera sin ningún problema, pero esa es la diferencia.

Es una plantilla normal como el resto de CSS, pero trabaja a la par con el código HTML que éste implementa (pocas palabras, utiliza sus propias clases y esos tipos de cosas). Ejemplo:

Código:

<div class="ui-grid-a">
  <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
  <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>	   
</div>

Solo necesitarías referenciar el archivo CSS de jQuery Mobile y la clase "ui-grid-a" tomará los atributos declarados del archivo CSS.

Pero si quieres optimizar tu página web en móvil te recomiendo que uses "Diseño responsivo", éste hace uso de media queries (ésta si la puedes implementar en tu archivo CSS con las clases que tu has creado).

Te dejo este enlace para que aprendas un poco más: [URL="http://xitrus.es/blog/2/Responsive_Design"]http://xitrus.es/blog/2/Responsive_Design[/URL]

:)

[HackID1]

Muchisimas gracias por responder. Espero cuando solucione unos problemas que tengo en mis ficheros.html y .php poder hacer uso de esto.

Acabo de mirar el enlace de @media, la verdad esta muy bien, eso quiere decir que puedo hacer mi estilo CSS todo con divs (las distintas capas) y luego poner

Código CSS:

@media screen and (max-width: 600px){
           div{
           width:100%;
           height:auto;
           margin-left:10px;
           }
}
 

Y a partir de los 600px se reduciria la página web, todos mis DIV para todos los dispositivos que no alcancen los 600px de ancho???.

No lo he implementando pero quisiera saber un poco más.

Si me puedes decir unas medidas estándar que sirvan para todas lo agradecería para mi proyecto. de instituto

Gracias!!!

Esto es seguro que sirve para todos los navegadores como lo pone ahí. ?

[RokuMetal]

Iniciado por HackID1

Muchisimas gracias por responder. Espero cuando solucione unos problemas que tengo en mis ficheros.html y .php poder hacer uso de esto.

Acabo de mirar el enlace de @media, la verdad esta muy bien, eso quiere decir que puedo hacer mi estilo CSS todo con divs (las distintas capas) y luego poner

Código CSS:

@media screen and (max-width: 600px){
           div{
           width:100%;
           height:auto;
           margin-left:10px;
           }
}
 

Y a partir de los 600px se reduciria la página web, todos mis DIV para todos los dispositivos que no alcancen los 600px de ancho???.

No lo he implementando pero quisiera saber un poco más.

Si me puedes decir unas medidas estándar que sirvan para todas lo agradecería para mi proyecto. de instituto

Gracias!!!

Esto es seguro que sirve para todos los navegadores como lo pone ahí. ?

Bueno, en ese pedazo de código tu pones que "cuando la página web sea menor a 600px tu div tomará los valores que has asignado dentro del media querie", al principio es algo confuso pero es cosa de entender bien el trabajo de "max-width, min-width".

Y sobre medidas estándar para los smartphones se suele utilizar "max-width:480px", acá te dejo un enlace con varias medias queries:

[URL="http://www.paulund.co.uk/boilerplate-css-media-queries"]http://www.paulund.co.uk/boilerplate-css-media-queries[/URL]

Nota: No te olvides de poner siempre éste código:

Código:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del dispositivo.

[HackID1]

Ok he entendido bien tu respuesta :)

Me parece raro que nunca me hayan hablado sobre ese código @media en las clases de CSS y CSS3. Saludos y hay tiene algunos datos más el usuario que creo la pregunta.

[RokuMetal]

Iniciado por HackID1

Ok he entendido bien tu respuesta :)

Me parece raro que nunca me hayan hablado sobre ese código @media en las clases de CSS y CSS3. Saludos y hay tiene algunos datos más el usuario que creo la pregunta.

Si, con la salida de los dispositivos móviles, CSS quiso ser parte de ello :)

Saludos!