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

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

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

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

Ahora vamos a ir un paso más allá y vamos a ver como añadir elementos divisores en las listas. Es decir, items que nos permitan separar elementos para su organización. Puede ser una agrupación alfabética, geográfica, horaria,...

En nuestro caso vamos crear una lista de películas cuyos divisores sean alfabéticos.

C
++ Casablanca
++ Charada
D
++ Dos hombres y un destino
++

Lo primero que hacemos es cargar el framework jQuery Mobile

 
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>

Y como vimos en el ejemplo Listas de Elementos en jQuery Mobile utilizamos un elemento UL con un atributo data-role="listview".

 
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Casablanca</a></li>
<li><a href="#">Charada</a></li>
<li><a href="#">Dos Hombres y Un Destino</a></li>
<li><a href="#">Espartaco</a></li>
<li><a href="#">El Golpe</a></li>
<li><a href="#">La Guerra de las Galaxias</a></li>
<li><a href="#">Granujas a todo ritmo</a></li>
</ul>
 

Además hemos añadido los atributos data-inset="true" y data-filter="true" para que la lista salga enmarcada y para tener un filtro en la lista, respectivamente.

Ahora meteremos los divisores de listas. Los divisores de listas serán otros elementos LI. Si bien estos elementos para ser diferenciados del resto de elementos de la lista tendrán un atributo data-role="list-divider". Quedándonos nuestro código jQuery Mobile de la siguiente forma:

 
<ul data-role="listview" data-inset="true" data-filter="true">
<li data-role="list-divider">C</li>
<li><a href="#">Casablanca</a></li>
<li><a href="#">Charada</a></li>
<li data-role="list-divider">D</li>
<li><a href="#">Dos Hombres y Un Destino</a></li>
<li data-role="list-divider">E</li>
<li><a href="#">Espartaco</a></li>
<li data-role="list-divider">G</li>
<li><a href="#">El Golpe</a></li>
<li><a href="#">La Guerra de las Galaxias</a></li>
<li><a href="#">Granujas a todo ritmo</a></li>
</ul>
 

El nombre del item que utiliza el atributo data-role="list-divider" será el nombre que se utilice como elemento divisor.

El efecto conseguido con jQuery Mobile para crear divisores de lista será algo parecido a:

Similar Posts:

• Listas de Elementos en jQuery Mobile
• Listas anidadas con jQuery Mobile
• Hola Mundo con jQuery Mobile
• Listar una lista en Java
• Imágenes como hitos de listas con CSS

Es decir, que podríamos tener una lista tal y como esta:

 
<ul>
<li>Avila</li>
<li>Burgos</li>
<li>León</li>
<li>Palencia</li>
<li>Salamanca</li>
<li>Segovia</li>
<li>Soria</li>
<li>Valladolid</li>
<li>Zamora</li>
</ul>
 

Si bien jQuery Mobile nos proporciona una serie de características para maquetarla. La primera es la que le da la apariencia. Esta la conseguimos con un atributo data-role. En este caso con data-role="listview".

Este atributo lo añadimos al elemento UL.

 
<ul data-role="listview">
  ...
</ul>
 

Y conseguiremos el siguiente efecto de maquetación.

Lo que podemos apreciar en la imagen es que la lista no se diferencia de forma correcta del contenido de la página. Si queremos que la lista se diferencia del resto del contenido podemos añadirla un recuadro. Esto nos lo posibilita el atributo data-inset="true".

 
<ul data-role="listview" data-inset="true">
  ...
</ul>
 

Por último podemos añadirle un filtro a nuestra lista. Y es que esto lo conseguimos de una forma sencilla con el atributo data-filter="true". No solo añadiremos un filtro, si no que el filtro realiza el filtrado del contenido de la lista.

 
<ul data-role="listview" data-inset="strong" data-filter="true">
  ...
</ul>
 

EL código final de nuestra lista de elementos en jQuery Mobile quedaría de la siguiente forma:

 
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Avila</li>
<li>Burgos</li>
<li>León</li>
<li>Palencia</li>
<li>Salamanca</li>
<li>Segovia</li>
<li>Soria</li>
<li>Valladolid</li>
<li>Zamora</li>
</ul>
 

Similar Posts:

• Listas anidadas con jQuery Mobile
• Divisores de listas con jQuery Mobile
• Bucle for-each en Java
• Hola Mundo con jQuery Mobile
• Inicializar un array en Java

• Utilizarías un IDE más o menos completo como puede ser Eclipse o NetBeans
• Realizarías un aprendizaje más espartano con el JDK y un editor de texto o con un IDE más sencillo como jCreator o BlueJ
• ¿Conoces algún IDE orientado directamente al aprendizaje?

Puedes contestar la encuesta en el grupo de conversación de Java en Español.

Publicaremos el resultado y las respuestas más adelante.Similar Posts:

• Grupos de Conversación sobre Programación en Facebook
• Conversaciones sobre Programación. Build 2012.02
• Nuevo grupo de conversación sobre Bases de Datos
• Conversaciones sobre Programación. Build 2012.01
• @java en Twitter

Vamos a ir construyendo una serie de ejemplos para explicar cómo funciona jQuery Mobile y, como no, el primero de ellos tenía que ser el Hola Mundo con jQuery Mobile.

Lo primero que tenemos que hacer es descargarnos el framework jQuery Mobile. Para ello deberemos de descargar 2 archivos:

• El framework Javascript. Que es el fichero jquery.mobile-1.1.0.js
• El tema de jQuery Mobile. Que es el fichero jquery.mobile-1.1.0.css

O bien su versión reducida para un entorno de producción:

• jquery.mobile-1.1.0.min.js (24KB)
• jquery.mobile-1.1.0.css (7KB)

Además vamos a necesitar el framework jQuery, con el que puedes empezar mediante el Hola Mundo con jQuery o leyéndote todos los artículos de jQuery. Es importante que sepas que se necesitan las versiones jQuery 1.6.4 o jQuery 1.7.1 para utilizarlo junto a jQuery Mobile.

jQuery Mobile nos permite construir página web, las cuales van a ser páginas HTML5. Ya que jQuery Mobile aprovecha los atributos data-* de HTML5 para poder construir las aplicaciones de una forma estandar. Así, que al final lo que tenemos es una página web. Y lo más importante, jQuery Mobile, insertará el código necesario de una forma no intrusiva.

Lo primero que tenemos que hacer a la hora de definir nuestra página web es, como te puedes imaginar, instanciar las librerías que nos hemos descargado.

 
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>

Una vez instanciadas las librerías vamos a ver como se estructura la página web para que pueda ser visualizada en un móvil. Es decir, vamos a ver qué atributos data-* tenemos que utilizar.

El primero será data-role="page". Este atributo habrá que darselo a la estructura que nos defina lo que es la página. Es decir, vamos a crear un bloque DIV con dicho atributo. Dicho bloque representará la página.

 
<div data-role="page">
<!-- Pagina de jQuery Mobile -->
</div>
 

Lo siguiente será poner el contenido. Es decir, nuestro Hola Mundo con jQuery Mobile. Para ello tenemos otro atributo. Es este caso es data-role="content". Este atributo se lo damos a otro elemento de bloque, es decir, a otro DIV.

 
<div data-role="page">
<div data-role="content">
 
Mi primera p&aacute;gina web con jQuery Mobile.
</div>
</div>
 

Aunque con esto podríamos tener "acabado" nuestro Hola Mundo con jQuery Mobile vamos a echar un vistazo a otros dos atributos. Estos serán los que nos van a servir para definir una cabecera y un pie de página. En este caso serán los atributos data-role="header" y data-role="footer" respectivamente. Y como te puedes imagina van a otros elementos de bloque.

Así que utilizando estos dos nuevos elementos, nuestro código final nos quedaría de la siguiente forma:

 
<div data-role="page">
<div data-role="header">
<h1>Hola Mundo en jQuery Mobile</h1>
</div>
<div data-role="content">
 
Mi primera p&aacute;gina web con jQuery Mobile.
</div>
<div data-role="footer">
 
&copy;2012 - Linea de Codigo
</div>
</div>
 

Ya tenemos nuestro Hola Mundo con jQuery Mobile. Solo nos queda probarlo en alguna de las platafomas que soporta el framework jQuery Mobile:

• iOS5 – iPhone e iPad
• Android 2.2 y 2.3
• Tabletas Android 3.x (Honeycomb)
• Android 4.x (ICS)
• Chrome para Android (beta)
• BB Playbook 1-2
• BB7
• Nook Color/Tablet
• Kindle Fire
• Kindle 3

O simplemente, abriendolo en el navegador. Similar Posts:

• Divisores de listas con jQuery Mobile
• Listas de Elementos en jQuery Mobile
• Listas anidadas con jQuery Mobile
• Peticiones AJAX con jQuery
• Repaginar con jQuery y AJAX

• Utilización de gestores de bases de datos MySQL, DB2, PostgreSQL, Oracle,...
• Uso de lenguajes de programación para utilizar las bases de datos
• Manejo y mantenimiento de las bases de datos.
• Optimización de Queries.
• Bases de datos en Memoria
• Bases de Datos Distribuidas
• BigData
• Uso de sistemas de persistencia como Hibernate.
• ...

Si buscas algo de eso. Solo tienes que unirte a https://www.facebook.com/groups/basesdedatos.es/Similar Posts:

• Conversaciones sobre Programación. Build 2012.02
• Conversaciones sobre Programación. Build 2012.01
• Grupos de Conversación sobre Programación en Facebook
• 10 años de XML
• TheServerSide Java Symposium-Europe

Es decir, para el caso del número 7, que es un número feliz, la secuencia sería la siguiente:

7² = 49
4² + 9² = 97
9² + 7² = 130
1² + 3² + 0² = 10
1² + 0² = 1

Así que nos ponemos manos a la obra para resolver este planteamiento de el número feliz con Java.

Lo primero que vemos es que hay que extraer los dígitos del número. Esto ya lo explicábamos en el artículo Dígitos de un número con Java. Así que es bueno que lo leas en detalle. Si bien, lo que hacemos es utilizar divisiones y el módulo del 10 (división y resto) para ir extrayendo los números del dígito.

public static int[] digitosNumero(int iNumero){
 
  // Creamos un array del tamaño del número de dígitos del número
  String x = Integer.toString(iNumero);
  int[] iNumeros = new int[x.length()];
 
  // Método que devuelve los dígitos de un número
  int iDigito = 0;
  while (iNumero>0){
    iNumeros[iDigito] = iNumero%10;
    iNumero = iNumero/10;
    iDigito++;
  }
 
  return iNumeros;
 
}

Al final hemos construido un método que dado un entero nos devuelve un array con los dígitos de dicho número.

Lo siguiente será, por cada dígito del número hacer la suma de los cuadrados de los dígitos. Para calcular los cuadrados utilizamos el método .pow() de la clase Math.

Recuerda que la clase Math es estática y no hace falta instanciarla.

El código de esta suma de dígitos al cuadrado sería:

int[] iNumeros = digitosNumero(iNumero);
iSuma = 0;
for (int x=0;x<iNumeros.length;x++)
  iSuma += Math.pow(iNumeros[x],2);

Ahora hay que validar si la suma es un uno o si no saldremos del bucle. En el caso de que no sea un uno volvemos a llamar a la función digitosNumero para que nos vuelva a "trocear" el nuevo número.

while (iSuma!=1){
  iSuma = 0;		
 
  for (int x=0;x<iNumeros.length;x++)
    iSuma += Math.pow(iNumeros[x],2);				
 
  iNumeros = digitosNumero(iSuma);
}

Con esto ya tendríamos nuestro código que calcule si un número es un número feliz con Java terminado. Pero hay una cosa que se puede mejorar, y es que si el número no es feliz se mete en una secuencia infinita de calculos, ya que nunca encontrará el 1. Si bien, podemos cortar este bucle si se repite un número en la secuencia, ya que volverá a la misma secuencia.

Veamos el caso del número 2:

2² = 4
4² = 16
1² + 6² = 37
3² + 7² = 58
5² + 8² = 89
8² + 9² = 145
1² + 4² + 5² = 42
4² + 2² = 20
2² + 0² = 4

Al llegar al número 4 que ya estaba en la serie, todo se volverá a repetir de forma infinita. Es por ello que en este punto habría que cortar el cálculo.

Para implementar esto lo que hemos hecho es añadir un conjunto, es decir, un Set al programa, al cual vamos metiendo los números, siempre y cuando el número sumado no esté. Ya que si esta significará que la secuencia se vuelve a repetir y hay que salir del bucle.

Instanciamos el Set mediante una clase HashSet.

Set<Integer> iCalculados = new HashSet<Integer>();

Y en mitad del bucle hacemos la comprobación o inserción en el conjunto. Para ello utilizamos los métodos .contains y .add

if (iCalculados.contains(new Integer(iSuma)))
  bRepetido = true;
else
  iCalculados.add(new Integer(iSuma));

Vemos que aparece una variable bRepetido y es que esta será el flag que utilicemos para salirnos del bucle. Así que finalmente nuestro bucle de cálculo quedará de la siguiente forma:

while ((iSuma!=1) && !(bRepetido)){
  iSuma = 0;
  for (int x=0;x<iNumeros.length;x++)
    iSuma += Math.pow(iNumeros[x],2);
  iNumeros = digitosNumero(iSuma);
 
  // Controlamos si ha salido un número repetido. Para no entrar en el bucle.
  if (iCalculados.contains(new Integer(iSuma)))
    bRepetido = true;
  else
    iCalculados.add(new Integer(iSuma));
 }

Ya solo nos quedará imprimir si el número es un número feliz o no. Esto nos lo cuenta la variable bRepetido.

if (bRepetido)
  System.out.println(iNumero + " NO es un número feliz");
else
  System.out.println(iNumero + " SI es un número feliz");

Similar Posts:

• Dígitos de un número
• Validador de RUT en Java
• Validar un CIF en Javascript
• Último dígito de un número con Java
• Mayor de dos números