//HTML
<p>I wish I could 
   <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span>
the text here.</p>

// Javascript
$(function() {
  $('.dynamo').dynamo();
});

• data-lines: Reemplazos separados por comas, el texto inicial no está incluido.
• data-speed: Velocidad de la transición (default: 350ms)
• data-delay: Retardo entre ciclos (default: 3000ms)
• data-center: Centrar el texto en contenedor dynamo (default: false)

Artículos relacionados

• Sistema Solar en Javascript
• SpaceGallery, la galería al estilo TimeMachine de jQuery
• Simulando la gravedad con jQuery
• Efecto Bounce con Script.aculo.us
• Efecto menu MAC OS

Vale vale, pero ¿nos ponemos a ello?

// Cargamos el módulo HTTP
var http = require('http');

// Creamos un servidor HTTP que devolverá "Hola Mundo!" en cualquier petición
var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hola Mundo!\n");
});

// Escuchamos el puerto 8000
server.listen(8000);

// Mostramos un mensaje en la terminal
console.log("Server running at http://127.0.0.1:8000/");

node fichero.js

Módulo, módulos y más módulos

npm install package

package.json

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "stylus" : "0.27.0"
      , "coffee-script": "1.3.2"
      , "swig": "0.11.2"
  }
}

npm install -d

Artículos relacionados

• *JS, el hijo bastardo entre Javascript y C
• Comparativas de getElementsByClassName
• Delicious vs Digg
• Flock 2 mejora gracias a Firefox 3
• createElements() una función para ahorrarte mucho código

Una de las cosas que ya está estandarizada en HTML5 es la reproducción de elementos de audio. Es decir, podemos poder música en la web de una forma estándar.

Para poder poner música en las webs, HTML5 ha estandarizado el elemento AUDIO. Así que, lo que tendremos que hacer, para poner un archivo de música será insertar la siguiente etiqueta:

<audio src="cancion"></audio>

Por lo tanto, si nuestra canción es "micancion.mp3" el código a utilizar será:

<audio src="micancion.mp3"></audio>

Si escribimos solamente este código no llegaremos muy lejos ya que, por defecto, el elemento de audio no se muestra. Por lo tanto no podremos utilizar los botones de play, stop, pause,... Así, si queremos que el elemento de AUDIOcontrols.

<audio src="micancion.mp3" controls></audio>

Así ya tendremos el reproductor que nos permita poner la música en nuestra web con HTML5</a.>

Los formatos que podemos reproducir mediante el elemento AUDIO de HTML5

• MPEG-1 audio layer 3, que son los más que de sobra conocidos como MP3 y extensión .mp3.
• Advanced Audio Coding, mejoraban la calidad de sonido de los MP3 y es un formato promovido por Apple. Su extensión es .acc. Este formato funciona bajo pantentes
• Vorbis, o conocido como Ogg Vorbis. Es un formato libre de patentes. La extensión que utilizan es .ogg

Similar Posts:

• Embed: Música de fondo en tu página web
• Reproducir música por java
• Iniciar automáticamente un vídeo en HTML5
• Cargar un vídeo AVI, ASF o WMV en mi página web
• Utilizando la etiqueta ADDRESS

En más de una ocasión he tenido problemas de solapamiento a la hora de ejecutar scripts desde el crontab. Porque si decidimos usar un cron job para ejecutar scripts periódicamente con intervalos pequeños de tiempo, o también scripts con mucho tiempo de ejecución (a veces incluso mezclamos ambas cosas) es probable que corramos el riesgo de que los scripts se solapen y se cargue demasiado el servidor, o que incluso ‘se cuelgue’. Pienso además que nos pasa más a menudo a los programadores de PHP (sobretodo porque seguramente ese cron job no debería estar hecho en PHP, pero somos así de monolingüistas).

Una posible solución, y que es la que usaba hasta hace poco, es la de crear un fichero de control: Al iniciar la ejecución del script lo primero sería comprobar si ese fichero existe y comenzar solo si no está creado, si todo va bien lo siguiente sería crearlo para evitar el solapamiento y borrarlo justo al finalizar la ejecución.

Esta solución no me gustaba del todo porque si por cualquier razón el script no acababa de ejecutarse, el fichero de control no se borraba y entonces nunca más se volvía a ejecutar hasta que te dabas cuenta y borrabas el fichero de control manualmente. Por eso he pensado que lo mejor es comprobar directamente si el script está en ejecución antes de lanzar el siguiente sin usar fichero de control.

Para probarlo he usado un script que seguro se va a solapar:

<?php
while(1) {
    $zero = 0;
}

Para ejecutarlo desde el cron lo que he hecho es un pequeño shell script que también va a ser el encargado de evitar el solapamiento:

#!/bin/bash
PHP_EXECUTABLE="/usr/bin/php"
SCRIPT_DIRECTORY="/home/alberto"
SCRIPT_NAME="test.php"
if ps -fea | grep $SCRIPT_NAME | grep -v grep
then
    date
    echo "Overlaping message end"
else
    cd $SCRIPT_DIRECTORY
    $PHP_EXECUTABLE $SCRIPT_DIRECTORY"/"$SCRIPT_NAME > /dev/null 2>&1
fi

Como podéis ver lo que hago es comprobar con el comando ps si el script está en ejecución antes de lanzarlo de nuevo. Lo que hay que hacer luego simplemente es añadirlo al crontab, en mi caso dejando un pequeño log para poder comprobar si se solapa o no:

* * * * * /home/alberto/test.sh > /home/alberto/test.log

¿Qué os parece el método? ¿Qué habéis hecho vosotros si alguna vez os ha pasado?

LESS.js

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Compilación en el cliente

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Artículos relacionados

• Ampliando más las opciones del editor enriquecido de WordPress
• JWChat – Jabber Web Chat
• Amplia el editor enriquecido de WordPress 2.1
• Cliente Twitter para Android
• Solución temporal a los problemas con el WYSIWYG

¿Que ha pasado durante este tiempo?

Artículos relacionados

• Guía de buenas costumbres para la web móvil
• CSS:Consejos y buenas prácticas
• jQuery vs MooTools, ¿cual es mejor?
• Listado de Universos Netvibes
• Problemas con WordPress 2.0 y negrita

Ya vimos como hacer una lista simple de elementos y algunos atributos data para modificar esta lista con jQuery Mobile.

En este caso vamos a ver como podemos crear listas anidadas. Es decir una lista que, cuando seleccionemos una opción, nos muestre subopciones de dicha opción. Algo claro si pensamos en ciudades/regiones/países.

En nuestro caso vamos a utilizar ciudades y comunidades autónomas de España. Algo que quedaría de la siguiente forma:

Para crear listas anidadas con jQuery Mobile solo tenemos que seguir la implementación que haríamos directamente en HTML. Ya que será el formateador de jQuery Mobile quien se encargue de realizar la anidación de la lista.

Así el código quedaría de la siguiente forma:

 
<ul data-role="listview" data-inset="true" data-filter="true">
<li>
<h3>Castilla y León</h3>
<ul>
<li><a href="#">Avila</a></li>
<li><a href="#">Burgos</a></li>
<li><a href="#">León</a></li>
<li><a href="#">Palencia</a></li>
<li><a href="#">Salamanca</a></li>
<li><a href="#">Segovia</a></li>
<li><a href="#">Soria</a></li>
<li><a href="#">Valladolid</a></li>
<li><a href="#">Zamora</a></li>
</ul>
</li>
<li>
<h3>Extremadura</h3>
<ul>
<li><a href="#">Badajoz</a></li>
<li><a href="#">Caceres</a></li>
</ul>
</li>
</ul>
 

Un punto importante para el formato que utiliza jQuery Mobile es que el elemento de la lista superior lo maquetemos mediante un elemento H3.

Este simple código nos ayuda a tener listas anidadas con jQuery Mobile. Pero podemos añadir alguna cosa y es que al entrar en la lista anidada perdemos la referencia a la lista padre. Y es por ello que vamos a insertar un elemento back en la cabecera de la lista anidada.

Para esto nos vamos a apoyar en el API de jQuery Mobile y en concreto en el atributo $.mobile.page.prototype.options.addBackBtn. Y es que inicializando este atributo a true nos aparecerá el botón de back al entrar en la anidación de las listas.

Para configurarlo deberemos de hacerlo al arrancar el framework jQuery. Es en este momento cuando se lanza el evento mobileinit. Por lo cual nos vamos a suscribir a este evento mediante un método .bind() para realizar la inicialización.

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.addBackBtn = true;
});

Y ya tenemos el ejemplo de las listas anidadas con jQuery Mobile montado. Eso sí, una de las cosas que veremos es que se pierden las cabeceras header y footer de la lista inicial. ¿Alguien sabe como resolverlo?Similar Posts:

• Divisores de listas con jQuery Mobile
• Listas de Elementos en jQuery Mobile
• Hola Mundo con jQuery Mobile
• Crear eventos con JavaScript
• Número de elementos de una lista con jQuery

En el capítulo anterior, vimos lo fácil que es crear un modelo con Django, en este capítulo veremos que podemos hacer con los modelos. Si llegaste a este capítulo y no leiste los anteriores, quizas lo encuentres un poco dificil de entender, así que dale un vistazo a los capítulos anteriores.

Los modelos nos van a permitir manipular los datos: registrarlos, editarlos, actualizarlos, consultarlos, eliminarlos y realizar procesos con ellos. Toda está manipulación se reflejará luego en las vistas y posteriormente en las plantillas para mostrar los resultados en el navegador, esta manipulación se le conoce generalmente como: Consultas.

El Shell

El Shell es el interprete interactivo de Python, que nos permitirá probar los modelos, hacer consultas, analizar resultados, antes de elaborar las vistas. Es muy útil si queremos ahorrar tiempo al momento de responder a los requerimientos que los usuarios de la aplicación puedan necesitar.

Para poder acceder a la shell, abrimos una terminal o ventana de comandos, y nos ubicamos en la carpeta de proyecto (en donde se encuentre el archivo manage.py) y digitamos:

python manage.py shell

Debemos visualizar el siguiente resultado:

Shell

Lo importante es reconocer los elementos: el prompt se representa por >>> y el resultado de nuestras instrucciones se visualizarán en nuevas líneas (sin ningún símbolo previo a ellas)

Las consultas

Las consultas en base a los modelos de Django son la base de todo el desarrollo en este framework estas consultas nos pueden permitir saber, por ejemplo, la lista de usuarios, los correos electronicos de los que hacen comentarios, el primero comentario de un artículo, los artículos del mes de mayo, y la lista de posiblidades es larga.

Las consultas están descritas muy claramente en la documentación oficial, para poder hacer esto más simple aquí también usaremos esta pequeña chuleta o cheat sheet como también es conocido.

Django Queryset CheatSheet

La referencia de todos estos métodos se encuentran también en la documentación oficial.

Ejemplos

Ahora pasamos a lo divertido, seguimos trabajando con nuestro proyecto de ejemplo, para poder realizar algunos ejemplos tenemos que modificar y corregir el models.py y dejarlo así: (ya no existe el modelo Bebida, ya no es necesario, también se debe eliminar cualquier rastro del modelo Bebida de admin.py)

models.py

Una vez que tenemos listo el models.py , reiniciamos el modelo (si no recuerdas como reiniciar revisa el capítulo: El modelo de datos)

python manage.py reset principal

Una vez con los modelos listos, es hora de probar el interprete interactivo (shell). No olvidar que la siguiente instrucción se debe lanzar desde el directorio donde se encuentra el archivo manage.py

python manage.py shell

Una vez dentro del shell, empezamos a importar los modelos, para ello digitamos

from principal.models import Receta, Comentario

Esta instrucción importa todo el modelo al shell. Aquí es donde podemos consultar el contenido de los modelos y otras consultas, la sintaxis es del tipo:

Nombre_de_modelo.objects.metodo()

Donde podemos reemplazar Nombre_de_modelo y método por las diversas opciones que están en el cheatsheet (chuleta)

all()

En la imagen vemos como resultado una lista vacia [], entonces vamos a agregar elementos, para ello también necesitamos al modelo usuario que ya lo tiene Django, una vez que lo importamos sacamos al usuario cuya llave primaria (pk) sea 1.

User.objects.get(pk=1)

Ahora si introducimos datos a los modelos: (la r es solo una variable cualquiera)

create()

Y comprobamos que se ha registrado:

Receta.objects.all()

Agregamos un comentario a la receta anterior: (la c es solo una variable cualquiera)

create() en Comentario

Agregamos una receta mas: (Se puede escribir todo en una sola línea, yo lo hago para que se vea bien en la imagen)

create() podría ir en una sola línea

Sigamos jugando, ahora mostraremos las recetas cuyos ingredientes no empiecen con la letra A: (notar que luego de ingredientes hay dos guiones bajos)

exclude y startswith

Ahora las recetas, que mencionen en su preparación la palabra ‘tetera’:

filter y contains

Y si queremos ordenar alfabéticamente por titulo de receta:

order_by()

Ahora lo invertimos:

order_by y reverse

Mostramos los comentarios de cada receta:

filter()

Ahora me gustaría actualizar el titulo ‘Huevo Frito’ a la de ‘Huevito Frito’:

update()

Sigo agregando comentarios a la primera receta y deseo saber cuantos comentarios hay hasta el momento en ambas recetas:

count()

Agrego un comentario a la segunda receta (un comentario troll) y luego lo elimino:

delete()

Ahora deseo saber el nombre de usuario y correo electrónico del usuario que agregó la receta con el título exacto de ‘Agua hervida’:

Todo está orientado a objetos

Como verán hacer consultas en Django es simple, sin embargo siempre es bueno tener la documentación a la mano, ya que recordar tantos métodos puede ser tedioso al principio.

Las consultas son el paso previo a trabajar con las vistas y las plantillas, nos permitirán entregar a los usuarios del proyecto, la información que requieran. El próximo capítulo será: Las vistas.

Práctica tus propias consultas, juega con los modelos, diviértete, que el momento de aplicarlas serán en el próximo capítulo.

Sergio Infante Montero para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

.Net

• What JavaScript taught me about C# – Understanding ‘Access to modified closure’
  Sean Blakemore
• Cargar información de reflection sin cargar el assembly
  Eduard Tomás
• Hebras, lambdas… y bugs
  Juan María Hernández
• Creating an FTP Server in C#
  Rick Bassham

• Output caching in ASP.NET Web API
  Filip W.
• How to Include Views in ASP.NET MVC & WebMatrix Razor
  Chris Love
• WebAPI Parameter binding under the hood
  Mike Stall
• Another early look at jQuery UI Grid in ASP.NET MVC – Data Types, Dataview, Pager, Sorting and Filtering
  Tomasz Pęczek
• Download Files in ASP.NET MVC 3 using Controller Action
  Mahesh Sabnis
• Passing multiple POST parameters to Web API Controller Methods
  Rick Strahl
• Knockout 2.1 Is Out
  Ryan Niemeyer
• El scroll infinito
  Pedro Hurtado
• A XAML Guy digs into ASP.NET MVC4 (Part 2 of ?)
  Michael Crump
• In memory client, host and integration testing of your Web API service
  Kiran Challa
• There’s a Tool for That: 13 Essential Tools for the Ninja Web Developer
  Joshua Holt
• Implementing WebSockets in WCF 4.5
  Peter Vogel
• ASP.NET Web API paso a paso
  Sebastián Henzenn
• ASP.NET MVC Authentication - Customizing Authentication and Authorization The Right Way
  Jon Galloway
• Extending ASP.NET MVC Account Registration with Workflow (WF4)
  Ron Jacobs
• API Improvements made in SignalR 0.5
  David Fowler

Azure / Cloud

• Microsoft Renames Azure Services
  Martin Brinkmann

Conceptos

• GUID guide, part three
  Eric Lippert

Data access

• OrmHate
  Martin Fowler
• EF5 Sample Provider Published
  Pawel Kadluczka

Html/Css/Javascript

• Cross-Browser Debugging CSS
  Nicole Sullivan
• Prototypes in JavaScript
  Leigh Kaszick
• Working with files in JavaScript, Part 1
  Nicholas C. Zakas
• HTML5 Audio — The State of Play
  Mark Boas
• Native HTML5 push notifications with ASP.NET Web API and Knockout.js
  Filip W.
• 14 Reasons Why Nobody Used Your jQuery Plugin
  Jonathan Cutrell

Visual Studio/Complementos/Herramientas

• dotPeek 1.0 is Released
  Jura Gorohovsky (vía @hhariri)
• Etiquetando,haciendo crecer nuestro árbol del repositorio de código y Branching, haciendo crecer nuestro árbol del repositorio de código
  Juan Quijano
• Visual Studio 11 User Interface Updates Coming in RC
  Monty Hammontree  

Otros

• The Floppy Disk means Save, and 14 other old people Icons that don't make sense anymore
  Scott Hanselman
Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Segunda entrega del resumen en los grupos de conversación de Facebook sobre lenguajes de programación en español. La verdad es que no dejo de estar sorprendido de la cantidad y calidad de las conversaciones en los grupos. Y muy agradecido de toda la gente que está participando en ellos.

Esta semana hemos lanzado uno nuevo, el grupo de conversación sobre Bases de Datos. Y así, de la nada, ya hay 100 miembros conversando. Una pasada.

Pero echemos un vistazo a las últimas conversaciones de los grupos sobre programación en español...

HTML5 en Español
https://www.facebook.com/groups/html5.es/
106 miembros (+31)

• Documento de trabajo HTML Polyglot, o lo que quiere hacer la W3C para que los documentos sean multi-idioma.
• Un artículo que habla de las 7 tecnologías que sostienen Facebook, de los chicos de Genbeta.
• Pregunta sobre cómo poner el Favicon en una página web.
• ¿Alguién conoce un hosting con soporte de Phyton con Django?
• Dudas sobre cómo subir un fichero con un input file y el lenguaje Perl.

Java en Español
https://www.facebook.com/groups/java.es/
156 miembros (+66)

Lo más importante es que hemos lanzando una encuesta sobre qué IDE utilizarías para empezar a aprender el lenguaje de Java. No dejes de contestar y añadir tus comentarios.

• Cómo resolver el método de ordenación de Arrays con el método burbuja
• Páginas con tutoriales para empezar con Java (y 2)
• Se pedía ayuda sobre cómo resolver el algoritmo del Número Feliz.... y ya está resuelto y publicado.
• Se ha comentado y resuelto como construir un programa para calcular la serie de Taylor.
• Ayuda para encontrar información y ejemplo de la anotación @Intercepts.
• Pablo Ruiz está publicando artículos muy interesantes con los ejercicios de la Certificación Java en su blog.
• ¿Sirven los tutoriales de Eclipse para Netbeans?
• Primeros pasos de JSF, Primera pantalla con JSF y Manejando ManageBean en JSF por Julio Pari.
• Ing Guillermo Gonzalez propone ir publicando algoritmos básicos e irles resolviendo para ayudar a la gente que empieza. (y 2)
• ¿Quieres material de certificación Java?... Ya se ha publicado algunos ejemplos.
• Un poco de ayuda en un código con el manejo de Scanner.
• Ayuda con Java Server Faces.
• ¿Qué arquitectura seguir para construir una aplicación web?
• Pastebin una buena aplicación para compartir código fuente.
• Algoritmos y cia, un buen blog para compartir algoritmos básicos.
• Ayuda para declarar un array dónde puedas  insertar cualquier tipo de objeto.
• Crear ventanas personalizadas con Substances
• Aunque no te lo creas, se busca un emulador de MSDOS.
• Cómo separar a un número en dígitos.
• Capas de persistencia de datos que no sean el típico manejo de sentencias de un modelo E/R.

Javascript en Español
https://www.facebook.com/groups/javascript.es/
84 miembros (+18)

• Una chuleta sobre Javascript, bastante interesante.

jQuery en Español
https://www.facebook.com/groups/jquery.es/
99 miembros (+17)

• El Hola Mundo con jQuery Mobile

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
89 miembros (+26)

• Un vídeo sobre la gente de Linux.
• El framework CodeIgniter.
• Ayuda a Raúl para montar el código que consulta una base de datos y muestra un listado de libros. (y 2)
• ¿Cómo configurar el PHP en Aptana?
• Programación Orientada a Aspectos en PHP
• Problemas con el localhost y Drupal.
• Algunas novedades de lo que encontramos en PHP 5.4.0

Bases de Datos en Español
https://www.facebook.com/groups/basesdedatos.es/
100 miembros

Una gran acogida del grupo sobre bases de datos en español con una cifra de 100 usuarios desde el inicio.

• ¿Cual es la mejor forma de extraer datos de una base de datos?
• Algunas tablas para practicar con Oracle por Pablo Ruiz
• Ayuda para manejar links e imágenes en una base de datos.
• Dónde encontrar Microsft SQL Server.
• Como empezar en el mundo de los modelos y las bases de datos.

 Similar Posts:

• Nuevo grupo de conversación sobre Bases de Datos
• Conversaciones sobre Programación. Build 2012.01
• Grupos de Conversación sobre Programación en Facebook
• JSSQL: Un motor de base de datos en javascript
• Java Intro Programming Bootcamp – 3rd session

Tampoco ha sido esta una semana especialmente interesante en @chechar…

Los de autobombo

RT @UOCsevilla En el blog -> el 16/05 3a sesión de #debateSIC sobre prospectiva tecnológica con @chechar y Jesús Pérez de @vodafone_es http://territori.blogs.uoc.edu/es/2012/05/sic-prospectiva-tecnologica/

Pues sí, el Miércoles estaré en Sevilla intentando adivinar un poco el futuro… Y el contenido de mi presentación aún puede cambiar:

lo que pienso contar la semana que viene en Sevilla en #debateSIC. se admiten propuestas de mejora ;-) http://j.mp/IGZOzy

Los de diseño y desarrollo web

RT @kazuhito Check out this presentation : For a Future-Friendly Web (Mobilism 2012) http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-mobilism-2012

presentación: Polyfills For The Pragmatist http://j.mp/IMfLj5

Apañao, el artículo de Wired sobre A/B testing http://j.mp/IYHSkR

Test Everything: Notes on the A/B Revolution http://j.mp/JeGaYI

RT @lucascepeda Principles of User Interface Design http://bit.ly/J0mfNY #UX #UI

Mozilla Shrinks Memory Use in Firefox (de momento sólo en las nightly) http://j.mp/IFEzsU

impresionante índice de las tecnologías que mueven la plataforma web: http://platform.html5.org/

Y uno de visualización de la información

impresionante selección de herramientas #infoviz de datavisualization.ch http://j.mp/J9JyV2

La semana que viene, más y mejor (esperemos).

Share/Bookmark

Una de las capacidades de los dispositivos móviles, ya sean smartphones o tablets, es que podemos girar el dispositivo y visualizar el contenido en dos posiciones.

Las dos posiciones son conocidas como landscape (apaisado u horizontal) y portrait (retrato o vertical).

Cuando estamos contruyendo nuestra aplicación para dispositivos móviles es interesante el conocer cuándo el usuario ha decidido rotar el dispositivo. Ya que puede ser que necesitemos reajustar algo en la visualización de nuestra página.

Es por ello que jQuery Mobile nos proporciona un mecanismo para detectar la rotación del dispositivo. Este mecanismo es un evento, el evento orientationchange. Entonces lo que tenemos que hacer es escuchar al evento orientationchange y asignar una función para cuando se produzca dicho evento. Esto lo conseguimos mediante el método .bind().

$(window).bind("orientationchange", function(event){...});

Dentro de la información del evento nos viene la orientación en la que el usuario ha puesto al dispositivo. En concreto viene en event.orientation. Los valores de event.orientation son "landscape" y "portrait".

Así, lo que haremos será, si viene el valor de event.orientation, asignaremos ese valor al contenido de una capa que hemos añadido en el contenido de la página

$(window).bind("orientationchange", function(event){
  if (event.orientation)
    $("#contenido").html("Me han reorientado a " + event.orientation);
});

La capa sería:

 
<div data-role="content">
  Ejemplo que controla la rotaci&oacute;n del dispositivo movil.
  <span id="contenido">Inicio de la Aplicación</span>
</div>
 

Para la gestión del evento deberemos de esperar a que se haya cargado todo el contenido de la página. Es por ello que pondremos el código de gestión del evento para detectar la rotación del dispositivo dentro del evento .ready() de jQuery.

$(document).ready(function(){
  $(window).bind("orientationchange", function(event){
    if (event.orientation)
      $("#contenido").html("Me han reorientado a " + event.orientation);
  });
});

Por último deberemos de hacer es lanzar, por nosotros mismos, el evento orientationchange para que se calcule la orientación inicial del dispositivo. Pera esto nos apoyamos en el método .trigger().

$(window).trigger("orientationchange");

Similar Posts:

• Evitar que se ejecute un evento con jQuery
• Modificar el contenido de una capa con jQuery
• Cargar contenido con el scroll usando jQuery
• Cambios en un combo con jQuery
• Listas anidadas con jQuery Mobile