Header Ads

3, 2, 1... JQUERY MOBILE ;-)!

lunes, abril 30, 2012 3
¡Hola a tod@s (Hello World!)!
En este artículo vamos a examinar un proyecto HTML + JQUERY para crear web sobre la plataforma jQuery Mobile para la navegación por internet de dispositivos móviles.
¡Comenzamos!
Primeramente vamos a definir qué es jQuery para luego introducirnos levemente sobre la plataforma jQuery Mobile para obtener una idea de la misma.
¿Qué es un jQuery?
jQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, es decir, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX (asíncrono javascript y xml) a páginas web.

jQuery es software libre y de código abierto. Es compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.
Ahora vamos a definir qué es jQuery Mobile en rasgos generales y vamos a implementar un ejemplo sencillo.
¿Qué es un jQuery Mobile?
jQuery Mobile es una plataforma JavaScript implementada sobre jQuery que genera aplicaciones web para dispositivos móviles. 

<!DOCTYPE HTML>
<html>
    <head>
        <!-- jQuery -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>        
        <!-- jQuery Mobile -->        
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
        <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" 
 type="text/css" />
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>loquemesaledelospeones</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true" 
    data-filter-placeholder="Filtrar...">
                    <li><a href="javascript:alert('Aperturas');">Aperturas</a></li>
                    <li><a href="javascript:alert('Medio Juego');">Medio Juego</a></li>
                    <li><a href="javascript:alert('Finales');">Finales</a></li>
                </ul>
                <div>
                    <a href="javascript:alert('Botón');" data-role="button" 
     data-icon="star" data-theme="a">Botón</a>
                </div>
            </div>
            <div data-role="footer" data-theme="d">
                <h4>J.J. Sánchez - 2012</h4>
            </div>
        </div>
    </body>
</html>
Dejamos a los posibles desarrolladores y/o lectores el estudio de esta plataforma dejando el enlace de la documentación de jQuery Mobile.
El ejemplo expuesto de jQuery Mobile (gracias a JSFiddle de Google.com):

Good Playground!! d;-)!
Tags:

3 comentarios:

  1. Anónimo30 de enero de 2013, 15:11

    Hola, me gustaria saber cómo poder hacer un botón de "examinar" para acceder a la camara o a la libreta de fotos del teléfono y poder subirlas al servidor.

    gracias!
    Lo he conseguido hacer para varios dispositivos, menos para iphone.

    ResponderEliminar
  2. José Joaquín Sánchez26 de febrero de 2013, 13:24

    ¿Has probado un input de type="file"?
    http://www.w3schools.com/jsref/dom_obj_fileupload.asp

    ResponderEliminar
  3. Inmovillasjavea2 de enero de 2014, 19:00

    es un poco complicado, por mas que lo intento en mi web no consigo

    ResponderEliminar

Suscribirse a: Enviar comentarios ( Atom )
Con la tecnología de Blogger.