lunes, 30 de diciembre de 2013

Unir campo DATE y TIME en un único campo TIMESTAMP con MySQL

Hace unos días me encontré la necesidad de unir un campo DATE y TIME para hacer un UPDATE sobre un campo TIMESTAMP de otra tabla.

La solución es muy sencilla. Simplemente tenemos que usar la función TIMESTAMP de la siguiente forma:

UPDATE tabla2, tabla1
SET tabla2.campo=TIMESTAMP(tabla1.campofecha, tabla1.campohora)
WHERE tabla2.id=tabla1.id

Espero que os sirva de ayuda.

miércoles, 4 de diciembre de 2013

Mapas vectoriales con el CANVAS en HTML5 mediante el proyecto Cartagen

A continuación vamos a hablar de un proyecto muy interesante llamado Cartagen (http://cartagen.org). Según ellos mismos definen en su repositorio de github se trata de:

"Cartagen es un framework de cliente basado en vectores para renderizar mapas en HTML5 nativo. Escrito en JavaScript, utiliza el nuevo elemento Canvas para cargar datos de mapas desde varias fuentes, incluyendo OpenStreetMap."

En el sitio web de Cartagen podemos ver varias demos que muestran el funcionamiento y la potencia de este framework. Además podrás ver y editar el código GSS (Geographic Style Sheets), con el que se le da estilo al mapa e incluso descargar el mapa creado como bitmap.

lunes, 12 de agosto de 2013

Evitar problemas de compatibilidad con HTML5 usando Modernizr

Si estamos empezando un proyecto en el que vamos a utilizar HTML5, de las primeras cosas que nos van a venir a la cabeza son los problemas de compatibilidad que tendrá nuestra web con navegadores antiguos como IE8.

Modernizr es una herramienta que nos va a ayudar a resolver este problema, ya que permite adaptar nuestras webs programadas con HTML5 a cualquier navegador sin importar la versión. La idea es detectar qué funcionalidades no son compatibles con el navegador que estamos usando y buscar la manera de simularlo mediante Javascript.

La herramienta nos permite descargar solamente las capacidades que necesitemos y la url al proyecto es http://www.modernizr.com.

viernes, 2 de agosto de 2013

Elemento audio HTML5

Al igual que con el elemento <video>, hasta la llegada del HTML5, no existía ningún estándar para mostrar audios en una web y la mayoría eran mostrados a través de plugins que podían cambiar para los diferentes browsers.

Con HTML5 se define un nuevo elemento <audio> que especifica un método estándar de insertar audios en una web.

Los formatos soportados son mp3, wav y ogg y aquí os dejo una tabla donde se indica qué formato soporta cada browser.


BrowserMP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESYESNO
Opera 10+NOYES
YES

SINTAXIS

La sintaxis necesaria para insertar un audio en la web es la siguiente:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.wav" type="audio/wav">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento audio.
</audio>


ATRIBUTOS

Encontramos la mayoría de atributos y elementos iguales al <video>:
  • controls: añade los controles, como los botones play, stop, pausa y volumen.
  • source: el elemento de HTML5 source nos servirá para indicar qué audio queremos reproducir. Podemos indicar varios sources con varios formatos y así el navegador reproducirá el primero que reconozca, ya que todos los navegadores no son capaces de reproducir todos esos formatos
  • track: con este nuevo elemento de HTML5 indicamos las pistas de texto para los audios.

MÉTODOS Y EVENTOS

El elemento <audio> dispone además de atributos una serie de métodos básicos para poder iniciar o pausar, como son play() pause(), además de eventos que nos permitirán controlar aspectos de la reproducción, como el momento de la carga, el aumento del volumen, etc.

Para obtener una referencia completa de las características del elemento <audio> de HTML5 podéis acceder al siguiente link:

Elemento video HTML5

Hasta la llegada del HTML5, no existía ningún estándar para mostrar vídeos en una página web y la mayoría eran mostrados a través de plugins (como Flash Player) e incluso hacían falta diferentes plugins para los diferentes browsers.

HTML5 define un nuevo elemento <video> que especifica un método estándar de encapsular vídeos en una web.

Internet Explorer 9+, Firefox, Opera, Chrome, y Safari soportan el elemento <video>. Además, los formatos de vídeo soportados son mp4, ogg y webm.

SINTAXIS

Para añadir un elemento <video> en una página web necesitamos el siguiente código:

<video width="640" height="480" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Tu navegador no soporta el elemento video.
</video>

ATRIBUTOS

Los atributos más importantes que destacamos son los siguientes:
  • controls: añade los controles al vídeo, como play, stop, pausa y volumen.
  • height y width: indican el ancho y alto del vídeo. Si no proporcionamos estos datos el espacio que ocupa se recalculará en el momento de mostrarse el vídeo, ya que el navegador no tiene forma de saber el tamaño que ocupará, con lo que gráficamente puede quedar mal la web.
  • source: el elemento de HTML5 source nos servirá para indicar qué vídeo queremos reproducir. Podemos indicar varios sources con varios formatos y así el navegador reproducirá el primero que reconozca, ya que todos los navegadores no son capaces de reproducir todos esos formatos
  • track: con este nuevo elemento de HTML5 indicamos las pistas de texto para los vídeos.

MÉTODOS Y EVENTOS

El elemento <video> dispone además de atributos una serie de métodos básicos para poder iniciar o pausar el vídeo, como son play() y pause(), además de eventos que nos permitirán controlar aspectos de la reproducción, como el momento de la carga, el aumento del volumen, etc.

Para obtener una referencia completa de las características del elemento <video> de HTML5 podéis acceder al siguiente link:

martes, 30 de julio de 2013

Input number HTML5. Un campo de numérico para los formularios

En este post y en los siguientes vamos a publicar los nuevos tipos de input que encontramos en HTML5. Con estos nuevos input vamos a ahorrarnos muchas líneas de código validando los valores introducidos ya que ellos controlan automáticamente las respuestas.

El input number de HTML5 valida automáticamente que el valor introducido sea un numérico.

SINTAXIS

<input type="number" name="edad" min="18" max="99" step="2" value="18">

ATRIBUTOS

Los atributos más importantes que definen a input number son los siguientes:


  • min: valor mínimo del input
  • max: valor máximo del input
  • step: valor del intérvalo del input. Con este atributo indicamos el valor en que aumenta o disminuye el input si pulsamos las flechas que aparecen.
  • valor: valor por defecto del input.