Diferencia entre revisiones de «Usuario:Juanda/jqueryMobile/Introducción»
De WikiEducator
(→Tipos de desarrollo web) |
|||
| (Una revisión intermedia por el mismo usuario no mostrado) | |||
| Línea 22: | Línea 22: | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | === 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. | |
| − | * | + | |
| − | + | ||
| − | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | === 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, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo] |
| − | * | + | *Uso de versiones minified y gzip |
| − | : | + | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | ===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 | *Aplicaciones Web accesibles via navegador | ||
| + | <source lang="css"> | ||
| + | /* 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 } | ||
| + | } | ||
| + | </source> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| + | |||
=== Tipo de aplicaciones Web con PhoneGap=== | === Tipo de aplicaciones Web con PhoneGap=== | ||
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/> | *PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/> | ||
Última revisión de 08:37 28 feb 2013
