Framework para hacer aplicaciones para Mobiles/Celulares

Les voy a dejar una serie de frameworks para hacer aplicaciones.
No he analizado todos, ni puedo recomendar ninguno, ustedes podrían comentarnos para saber cual es mejor o peor y así dar ideas para que nuestros desarrollos sean más rápidos y fáciles.


Un buen “Cargando/Loading” para nuestras páginas

Yo soy uno que vive buscando cosas que sirvan para “algo” sin necesidad de meter mucha mano, así que buscando un loading para mi web me encontré con este plugin que es maravilloso, por lo menos para mí.

Les dejo 2 Links, 1 links con el js original y otro con la implementación de mi parte.

Original, Aquí viene toda la explicación de como usarlo.

Implementación, Para verla simplemente ejecuten Run 2 veces, 1 para que se cree el script 2 para ver el cargando cuando nos salimos de la página al querer recargarla.


Problemas con el Checkbox en “Bootstrap from Twitter”

A muchos les ha pasado que quieren usar el estilo Checkbox que vienen con Bootstrap y resulta que cuando lo ponen en un formulario pues “tachán” el formulario se ejecuta, claramente porqué es un button.

Aquí una sencillísima solución que liberará tus problemas.

Por ejemplo, un formulario con un check:

<form action="">
   <button data-toggle="button" class="btn btn-warning">Single Toggle</button><br>
   <input type="submit" value="Enviar Check">
</form>

Si ejecutamos esto veremos que el button “Single Toggle” será un checkbox estilo Bootstrap pero al hacer click para cambiarlo el formulario se ejecuta “TREMENDO PROBLEMA”. Ejemplo aquí: http://jsfiddle.net/juanmboehme/Dd2Mr/

Pues mirar que sencillo:

El Javascript:
$(document).ready(function($) {
    function BtnUpdate(btn, input) {
        btn.toggleClass('active', input.prop('checked'));
        btn.toggleClass('disabled');
    }

    $(document).live('change', '.btn-toggle input', function(e) {
        var input = $(e.target);
        var btn = input.parents('.btn-toggle');
        BtnUpdate(btn, input);     
    });     
}); 
El CSS:
.btn-toggle input {
    display: none;
} 
EL Formulario:
<form action="">
    <label class="btn btn-toggle btn-warning" for="check1">Single Toggle
    <input type="checkbox" id="check1">
    </label><br>
    <input type="submit" value="Enviar Check">
</form>

Que vemos:

  1. Que al cargar la página todo btn-toggle input estará oculto, es decir, todo lo que sea input dentro de un toggle no se verá.
  2. Que al cargar o cambiar de estado un btn-toggle se ejecutará un script que cambiará su css-class.

Se podría, para mejorar el Script, poner lo siguiente:

$(document).ready(function($) {
    function BtnUpdate(btn, input) {
        btn.toggleClass('active', input.prop('checked'));
        btn.toggleClass('disabled', input.prop('disabled'));
    }

    $(document).live('change', '.btn-toggle input', function(e) {
        var input = $(e.target);
        var btn = input.parents('.btn-toggle');
        BtnUpdate(btn, input);     
    });     
});

Aquí ponemos el check deshabilitado para que no se envíe. Su estado pasará de Check True a Check False igual que el anterior pero en este caso se deshabilita el input tambien. Ejemplo aquí: http://jsfiddle.net/juanmboehme/JDdGS/

Si puedes mejorar el Scrip siempre será bienvenido.


¿Cómo obtener datos de un request post desde JqueryMobile?



Seguro que a más de uno le ha pasado el problema de enviar datos tipo POST a una página esperando que retorne la data ya ejecutada después del post. A mí me pasó y no encontraba una solución posible y sencilla, así que me leí casi la documentación completa de JqueryMobile y encontrarme con algo como esto (Resumo un poco): http://jquerymobile.com/demos/1.1.0/docs/pages/page-dynamic.html Internally, when the user clicks on one of these links, the application intercepts the internal$.mobile.changePage() call that is invoked by the frameworks’ default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal changePage() code handle things. The application was able to insert itself into the changePage() flow by binding to the pagebeforechange event at the document level:

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changePage() calls where the caller is
 // asking us to load a page by URL.
 if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
 // want to handle URLs that request the data for a specific
 // category.
 var u = $.mobile.path.parseUrl( data.toPage ),
 re = /^#category-item/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
 // Call our internal method that builds the content for the category
 // on the fly based on our in-memory category data structure.
 showCategory( u, data.options );
// Make sure to tell changePage() we've handled this call so it doesn't
 // have to do anything.
 e.preventDefault();
 }
 }
});

Pues vayamos a lo que nos concierne y nos ayudará, gracias a eso claro.

Este será el código javascript:

// Listen for any attempts to call changePage(). 
$(document).bind("pagebeforechange", function(e, data) { 
	// We only want to handle changePage() calls where the caller is asking to load a page by URL. 
	if (typeof data.toPage === "string") { 
		// We only want to handle #partypoint url. 
		var u = $.mobile.path.parseUrl(data.toPage); 
		var partypoint = /^#partypoint/; 
		if (u.hash.search(partypoint) !== -1) { 
			// Display PAGE for the selected URL. 
			showPage(u, data.options); 
			e.preventDefault(); 
		} 
	} 
}); 

// Generate markup for the page, and then make that page the current active page. 
function showPage(urlObj, options) { 
	// Get the url parameter 
	var qrUrl = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));   
	// The div(role-page) we use to display section is already in the DOM. 
	// The id of the page we are going to write the content into is specified in the hash before the '?'. 
	var pageSelector = urlObj.hash.replace(/\?.*$/, ""); 
	if (qrUrl) { 
		// Get the page we are going to write content into. 
		var $page = $(pageSelector); 
		// Get the header for the page. 
		var $header = $page.children(":jqmData(role=header)"); 
		var markup = ''; 
		//Select the data send to the post page (if you have it)
		var Datasend=$("#formulario").serialize(); 
		$.ajax({ 
			url : qrUrl, 
			data : Datasend, 
			type : 'POST', 
			dataType : 'json', 
			success : function (data) { 
// Find the h1 element in the header and inject the hostname from the url. 
				$header.find("h1").html(data.Title); 
				// Get the content area element for the page. 
				var $content = $page.children(":jqmData(role=content)"); 
				markup = data.Data; 
				// Inject the data markup into the content element. 
				$content.html(markup); 
				// Make sure(if you want) the url displayed in the the browser's location field includes parameters 
				options.dataUrl = urlObj.href; 
				// Now call changePage() and tell it to switch to the page we just modified. 
				$.mobile.changePage($page, options); 
			}, 
			error : function (jqXHR, textStatus, errorThrown) { 
				/*Make your error message*/ 
			} 
		}); //Close Ajax 
	} // Close qrUrl 
}//Close Function

Creamos la pantalla principal(index.html, por ejemplo):

Vamos a poner, como principal, un formulario, más abajo se explica, además tendremos que poner la sección donde se cargará el resultado:

<div data-role="page" class=".ui-page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Party Point</h1>
    </div>

    <div data-role="content" class="wrapper">
        <div class="ui-corner-top ui-header ui-bar-b">
            <h1 class="ui-title" role="heading" aria-level="1">Login</h1>
        </div>
        <div class="ui-corner-bottom ui-content ui-body-c">
            <fieldset class="container_12">
                    <form action="#partypoint?url=inc%2Flogin.php" method="post" id="formulario" name="formulario">
                        <input type="hidden" id="Accion" name="Accion" value="Login">
                        <div data-role="fieldcontain">
                            <label for="Username">Usuario:</label>
                            <input type="text" name="Username" id="Username" value=""  data-mini="true" />
                        </div>
                        <div data-role="fieldcontain">
                            <label for="ClaveUser">Clave:</label>
                            <input type="password" name="ClaveUser" id="ClaveUser" value=""  data-mini="true" />
                        </div>
                        <div class="ui-block-a">
                            <button type="submit" data-theme="b" data-mini="true" class="ui-btn-hidden" aria-disabled="false">Enviar</button>
                        </div>
                        <div class="ui-block-b">
                            <a href="#partypoint?url=inc%2Fregistrar.inc" data-role="button" data-rel="dialog" data-transition="pop" data-theme="b"  data-mini="true">Registrarse</a>
                        </div>
                    </form>
            </fieldset>
        </div>
    </div>
</div>

Aquí vemos que el formulario enviará el dato a esta url:

#partypoint?url=inc%2Flogin.php
Tenemos varios datos que tomar en cuenta:
  1. #partypoint -> El Id de la sección donde irá la data que enviamos por ajax
  2. url= -> Indica lo que vamos a cargar
  3. inc%2FLogin.php -> Este es el archivo a cargar (inc/Login.php), se pone %2F para que lo interprete el script de arriba.
Vamos a poner la sección donde se cargará el resultado:
<div data-role="page" id="partypoint">
    <div data-role="header" data-theme="b" data-position="fixed">
        <a href="#home" data-icon="home" data-iconpos="notext" data-theme="f">Home</a>
        <h1>Home</h1>
        <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="a" data-position="fixed" data-id="footer">
        <a href="#about" data-icon="info">About</a>
    </div>
</div>

Aquí vemos lo siguiente:

  1. id=”partypoint” -> El Id de la sección a editar a través del ajax.
  2. <h1>= -> Donde cargaremos el Título del ajax obtenido
  3. data-role=”content”-> Aquí cargaremos el contenido obtenido.

Veamos lo que hace ahora la ejecución del formulario, presionamos Submit(Enviar):

  1. El Script verificará si la data enviada tiene a #partypoint en su URL.
    •  #partypoint?url=inc%2Flogin.php
  2. Como lo contiene pues pasará por la función showPage().
  3. La función buscará el url.
    • inc%2Flogin.php
  4. Buscamos el ID de la sección (data-role=”page”  id=”¿?”)
    • pageSelector=partypoint
  5. Convertimos a objeto el pageSelector y obtenemos el objeto header
    • var $page = $(pageSelector);
    • var $header = $page.children(“:jqmData(role=header)”);
  6. Serializamos la data del formulario
    • var Datasend=$(“#formulario”).serialize();
  7. Envíamos la data y recibimos el json
  8. Modificamos el título
    • $header.find(“h1”).html(data.Title);
  9. Buscamos la sección content y agregamos la data recibida
    • var $content = $page.children(“:jqmData(role=content)”);
    • $content.html(markup);
  10. Hacemos el cambio de página, como si hicieramos click pero lo hacemos por javascript:
    • $.mobile.changePage($page, options);

Yo recomendaría agregar esta línea de código justo después del cambio de página:

$page.page(“destroy”).page();

Esto destruirá todo el diseño de la sección y lo volverá a crear. Esto lo hacemos porqué a veces si le das para atrás y ejecutas nuevamente una llamada ajax para rellenar la data pues esa “page” ya estará creada y no se recargará y la data que venga dentro no estará formateada visualmente, si destruyes la página y la vuelves a crear todo el diseño se recreará.

Se puede usar también $page.trigger(‘create’) ; Pero he visto que a veces no me funciona, o quizás lo esté haciendo mal, pero mejor ir a la lo seguro y que funciona perfectamente.

Aquí está el ejemplo, pero no está la página de Login.php, por si acaso:

http://jsfiddle.net/juanmboehme/bcvrc/


Crear una versión móvil de tu website solo usando Media Queries (CSS)

Lo primero de todo es conocer un poco el uso de Media Queries en general, aquí hay una buena información que debería ser leída por todos los que son Desarrolladores ó Diseñadores WEB.

Para que nos funcione simplemente usaremos la etiqueta(tag) Link y la propiedad media con el Query en cuestión.

1- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”screen480.css” media=”screen and (min-width: 480px)” />

El Ejemplo 1 será útil para cualquier pantalla que tenga la resolución de un tamaño mayor a 480px.

2- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen and (min-width: 480px) and (max-width: 768px)“/>

El Ejemplo 2 aplicará como el Ejemplo 1 pero en este caso se restringue a resoluciones no mayores de 768px.

3- Ejemplo:
<link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” />

En este 3er ejemplo no estamos usando un tamaño definido de pantalla sino más bien un tipo de dispositivo, en este caso tenemos el handheld, pero existen varios tipos entre ellos tenemos:

  • all Used for all media type devices
  • aural Used for speech and sound synthesizers
  • braille Used for braille tactile feedback devices
  • embossed Used for paged braille printers
  • handheld Used for small or handheld devices
  • print Used for printers
  • projection Used for projected presentations, like slides
  • screen Used for computer screens
  • tty Used for media using a fixed-pitch character grid, like teletypes and terminals
  • tv Used for television-type devices

Existe un problema con algunos dispositivos, sobre todo con Iphone.
Cuando creas tu css para utilizar en el iphone, en este caso 320px(viewport)-480px(landscape) verás que realmente el tamaño de la pantalla es 980px, aunque hayas definido el css anterior no lo tomaría en cuenta por 2 razones:

  • La pantalla por defecto en el Safari es 980px
  • Si está en viewport la pantalla es 320px y nosotros hemos definido “mayor de 480px

Tenemos que hacer 2 cosas:

  • Introducir este meta en nuestra página:
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
  • Modificar o crear un nuevo CSS indicando el tamaño que sea para un width menor de 481px.

El meta tag hará que el dispositivo tome el tamaño más grande con referencia a la pantalla(screen), con lo que veremos que al estar en landscape veremos el tamaño a 480px y cuando estemos en viewport estará en 320px.


The Avengers: I have an army….we have a HULK

No lo puedo negar, prefiero DC sobre Marvel, pero de igual manera soy fan total de Hulk mas que de los otros super heroes de Marvel, lo cual no quita que tambien a menos medidas me gusten los otros.

El trailer para el Super Bowl 2012 de The Avengers, y me encanta el cierre del trailer: I have an army….we have a HULK


Nueva app de Twitter para Iphone

Twitter ha actualizado su app para iphone, y esta vez, se muestra mucho mas elegante que antes, incluyendo un primer screen mas dinamico y atractivo, aqui unas imáges


Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.