feed twitter facebook LinkedIn facebook

HTML5 » Poner música en tu web con HTML5

Mayo 16, 2012 por Víctor Cuervo . 262 visitas 1 Comentario Imprimir Imprimir

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

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

Desarrollo Móvil » Listas anidadas con jQuery Mobile

Mayo 14, 2012 por Víctor Cuervo . 253 visitas 1 Comentario Imprimir Imprimir

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?

Conversación » Conversaciones sobre Programación. Build 2012.02

Mayo 13, 2012 por Víctor Cuervo . 278 visitas 1 Comentario Imprimir Imprimir

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)

Además se están manteniendo varios documentos:

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.

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

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

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

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.

 

Desarrollo Móvil » Detectar la rotación del dispositivo con jQuery Mobile

Mayo 13, 2012 por Víctor Cuervo . 329 visitas 1 Comentario Imprimir Imprimir

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");

Desarrollo Móvil » Divisores de listas con jQuery Mobile

Mayo 11, 2012 por Víctor Cuervo . 248 visitas 4 Comentarios Imprimir Imprimir

En el ejemplo Listas de Elementos en jQuery Mobile veíamos como construir una lista de elementos para un dispositivo móvil utilizando 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:

Desarrollo Móvil » Listas de Elementos en jQuery Mobile

Mayo 10, 2012 por Víctor Cuervo . 254 visitas 2 Comentarios Imprimir Imprimir

jQuery Mobile nos ofrece una forma sencilla de adaptar nuestras listas a los dispositivos móviles. Y es que una lista de elementos para el diseño móvil se sigue maquetando con los elementos UL y LI.

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>
 

Conversación » ¿Con qué IDE empezarías a aprender Java?

Mayo 10, 2012 por Víctor Cuervo . 271 visitas 1 Comentario Imprimir Imprimir

Esta es la pregunta que formulábamos en el grupo de conversación de Java en Español. ¿Con qué IDE empezarías a aprender 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.

Desarrollo Móvil » Hola Mundo con jQuery Mobile

Mayo 9, 2012 por Víctor Cuervo . 313 visitas 4 Comentarios Imprimir Imprimir

jQuery Mobile es un framework que nos permite desarrollar aplicaciones móviles que se ejecuten en múltiples plataformas de una forma muy sencilla. jQuery Mobile está basado en el framework jQuery.

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:

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

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. ;-)

Conversación » Nuevo grupo de conversación sobre Bases de Datos

Mayo 7, 2012 por Víctor Cuervo . 253 visitas 1 Comentario Imprimir Imprimir

A petición de la gente que está en los Grupos de Conversación sobre Programación en Español creamos un nuevo grupo dedicado al tema de las bases de datos.
Así que si quieres hablar sobre Bases de Datos en Español de cosas como:

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

Java » Calcular el número feliz con Java

Mayo 5, 2012 por Víctor Cuervo . 363 visitas 1 Comentario Imprimir Imprimir

Ayer hablábamos en el grupo de Facebook sobre Java en Español (¿¿Qué todavía no estás apuntado???) sobre el cálculo de el número feliz con Java. Pero, ¿qué es un número feliz? Si seguimos la descripción de la wikipedia sobre el número feliz, este es aquel que, de forma iterativa, en la suma de sus dígitos acaba resultando un 1.

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

72 = 49
42 + 92 = 97
92 + 72 = 130
12 + 32 + 02 = 10
12 + 02 = 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:

22 = 4
42 = 16
12 + 62 = 37
32 + 72 = 58
52 + 82 = 89
82 + 92 = 145
12 + 42 + 52 = 42
42 + 22 = 20
22 + 02 = 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. :-D

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