|
|
| Línea 103: |
Línea 103: |
| | </head> | | </head> |
| | <body> | | <body> |
| − | <!-- Page Start--> | + | |
| | + | <!-- Página--> |
| | <div data-role="page"> | | <div data-role="page"> |
| − | <!-- Page Header Start --> | + | |
| | + | <!-- Cabecera --> |
| | <div data-role="header"> | | <div data-role="header"> |
| − | <h1>Page Title</h1> | + | <h1>Título de la página</h1> |
| | </div> | | </div> |
| − | <!-- Page Header End -->
| + | |
| − | <!-- Page Body Start --> | + | <!-- Body --> |
| | <div data-role="content"> | | <div data-role="content"> |
| − | <p>Page content goes here.</p> | + | <p>El contenido de la página va aquí.</p> |
| | </div> | | </div> |
| − | <!-- Page Body End -->
| + | |
| − | <!-- Page Footer Start --> | + | <!-- Pie página --> |
| | <div data-role="footer"> | | <div data-role="footer"> |
| − | <h4> Page Footer</h4> | + | <h4> Contenido en el pie de la página</h4> |
| | </div> | | </div> |
| − | <!-- Page Footer End -->
| + | |
| | </div> | | </div> |
| − | <!-- Page End --> | + | <!-- Fin página --> |
| | + | |
| | </body> | | </body> |
| | </html> | | </html> |
Revisión de 05:00 29 may 2013
|
Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
|
|
PhoneGap
Tutorial para desarrollar aplicaciones móviles multiplataforma
¿Qué es jQuery Mobile
- Framework para crear intefaces de usuario basadas en HTML5
- -Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores.
-Write less, do more (jQuery)
-Diseño atractivo "out of the box": hacen diseñador al programador.
- Construido a partir de la librería jQuery y de jQueryUI
- Orientado especificamente para móviles
Diseño responsivo
- Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
- Grid fluido, especificando sus elementos mediante unidades relativas.
- Imágenes y media también en unidades relativas.
Diseño responsable
- Se utiliza el criterio "mobile first":
- Diseños sencillos
- Diseños más complejos mediante media queries y siempre con un min-width
- Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
- Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
- Uso de versiones minified y gzip
Ejemplo CSS Mobile First
- Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
- Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
- Aplicaciones Web accesibles via navegador
/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* You can also tweak any other styles in a breakpoint */
H1 { color: blue; font-size:1.2em }
}
Cómo empezar
- Visitar página jQueryMobile para su descarga.
- Leer el tutorial que incluye.
- Creamos una plantilla para empezar a trabajar, mejor utilizar un CDN:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
- Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web:
<!DOCTYPE HTML>
<html>
<head>
<title>Primera Web con jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Página-->
<div data-role="page">
<!-- Cabecera -->
<div data-role="header">
<h1>Título de la página</h1>
</div>
<!-- Body -->
<div data-role="content">
<p>El contenido de la página va aquí.</p>
</div>
<!-- Pie página -->
<div data-role="footer">
<h4> Contenido en el pie de la página</h4>
</div>
</div>
<!-- Fin página -->
</body>
</html>
