Diferencia entre revisiones de «Usuario:Juanda/phonegap/jquerymobile»

De WikiEducator
Saltar a: navegación, buscar
(Cómo empezar)
(Cómo empezar)
Línea 93: Línea 93:
  
 
*Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web:
 
*Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web:
<source lang="html">
+
<source lang="html4">
 
<!DOCTYPE HTML>
 
<!DOCTYPE HTML>
 
   <html>
 
   <html>

Revisión de 04:55 29 may 2013

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg




¿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:

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<!DOCTYPE HTML>
  <html>
    <head>
      <title>jQuery Mobile Demo</title>
      <link href="jquery.mobile-1.0rc2.min.css" rel="stylesheet" type="text/css"/>
      <script src="jquery-1.6.4.min.js"></script>
      <script src="jquery.mobile-1.0rc2.min.js"></script>
    </head>
  <body>
    <!-- Page Start-->
    <div data-role="page">
      <!-- Page Header Start -->
      <div data-role="header">
        <h1>Page Title</h1>
      </div>
      <!-- Page Header End -->
      <!-- Page Body Start -->
      <div data-role="content">
        <p>Page content goes here.</p>
      </div>
      <!-- Page Body End -->
      <!-- Page Footer Start -->
      <div data-role="footer">
        <h4> Page Footer</h4>
      </div>
      <!-- Page Footer End -->
    </div>
    <!-- Page End -->
  </body>
</html>