Skip to main content

Obtener coordenadas un marcador google maps

En este video tutorial te mostraré como obtener las coordenadas de la posición de un marcador de Google Maps después de haberlo arrastrado, usaremos la Geolocalización de HTML 5, y también explicaré como incrustar un mapa en nuestro sitio web usando la API de Google Maps, debajo del video encontrarás el código comentado del ejemplo para que pruebes su funcionamiento.

Espero que sea de tu ayuda, cualquier duda o aclaración comenta en este post y no olvides suscribirte a mi canal y seguirme en mis redes sociales.

 

Código

 

Leer Más

Poniendo Audio con HTML5

Si naciste igual que yo en los 90’s o antes, y tuviste computadora conectada a internet , sabrás de que era imposible poder ver videos en el navegador o poner un reproductor en nuestro sitio ya que los navegadores de esa época no eran compatibles con esos formatos, a esta problemática existencial llegaron los famosos archivos FLV ( Flash Video ) , que hasta hace poco era el reino y señor de los contenidos multimedia embebidos en el navegador , pero con la llegada de HTML 5 y sus API para poder tener un reproductor de archivos sonoros con solo una líneas de código o un sencillo pero práctico reproductor de videos que soporta múltiples formatos , han hecho que los desarrolladores implementen esta nueva forma tan sencilla de mostrar contenido multimedia en sus sitios y aplicaciones. Si no me creen que es tan sencillo sigue leyendo este post y aprende como poder tener un reproductor de música funcional en nuestro sitio en menos de 5 min.

Audio.

Para reproducir un archivo de audio en una página web, debemos utilizar la etiqueta <audio>, que en sintaxis mínima e ideal llevaría esta sencilla estructura

 

Pero esto no producirá ningún resultado, ni visual, ni auditivo, ya que estaría faltando definir atributos que controlen la visualización del reproductor y la manera en que se comenzará a reproducir o no el archivo en cuestión. Veamos entonces cuáles son las opciones existentes.

Atributos

Al entrar al sitio web se empezará a reproducir el archivo que hayamos puesto en el atributo src
y es tan simple hacer esto con tan solo definir el atributo autoplay en el tag audio.

 


Otro atributo para el control de esta etiqueta es loop que sirve para que el archivo vuelva a reproducirse cada vez que finalice de manera infinita, un caso de aplicación sería una música de fondo que queremos que escuche nuestro visitante y ambientar nuestro sitio según el enfoque del mismo, por ejemplo para un sitio de algún restaurante o museo de alta categoría se pondría de fondo una canción tranquila como una sinfonía, en cambio para una empresa dedicada a vender equipo de supervivencia usaríamos sonidos parecidos a los de una jungla o escenarios de naturaleza.

En lo personal a mí me gusta usar este atributo pero siempre con la visualización de los controles para que los visitantes puedan parar el sonido en cualquier momento.

Para poder visualizar los controles de stop, play, la barra de tiempo, regulación de sonido, y la duración total tenemos que definir el atributo controls, con esto tendremos listo nuestro reproductor de música sin ningún código extra con solo HTML5.

< audio src="archivo.ogg" autoplay controls loop>

Al usar el tag de audio tenemos tener en cuenta que no todos los navegadores soportan los mismos formatos de archivo de sonido, es por eso que tenemos que poner varias opciones de formato, en la tabla de abajo se muestra el navegador y el formato que soporta. De igual manera algunas versiones de los navegadores no soportan elementos de audio, puedes ver las versiones de los diferentes navegadores que soportan este elemento en la tabla de abajo.

Browser

MP3

WAV

OGG

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

Elemento

Chrome

IE

Firefox

Safari

Opera

<audio>

4.0

9.0

3.5

4.0

10.5

Para definir las diferentes opciones del archivo que queramos reproducir se necesita poner el tag  <source src="horse.ogg" type="audio/ogg">  donde el atributo type se define el tipo de archivo con el cual el navegador identificara cual soporta y ese va a reproducir, este paso quedaría de la siguiente manera.

En esta tabla se muestra como debemos definir los media types según el formato que manejemos, como vieron no es muy complicado tener un reproductor en nuestro sitio,es algo básico pero depués les mostraré como  personalizarlo con algo de CSS3 y javascript para hacer cosas interesantes.

 

Formato del archivo

Media Type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

Código del video Tutorial

 

Leer Más

Geo localización JavaScript

Actualmente esta funcionalidad en las aplicaciones web y móviles se ha popularizado, ejemplos de esto son foursquere, Google Maps, Facebook entre otras.

Con HTML5 obtener la ubicación del usuario es muy fácil pero tenemos que tener en cuenta que no todos los dispositivos cuentan con un GPS que permite una localización más precisa por una triangulación de antenas y satélites, otros solo cuentan con conexión vía ISP y el navegador típicamente tomará esta información por IP o por triangulación de puntos de acceso Wi-Fi.

Para implementar la geo localización debemos asegurarnos de que el navegador soporta la API de geo localización de HTML5.

Para recuperar la localización del usuario haremos uso del objeto navigator.geolocation y la función básica para este caso es getCurrentPosition(), su sintaxis es :

getCurrentPosition(FuncionExito[,FuncionError],opciones);

FuncionExtito le dice al navegador al cual función debería llamar si los datos de localización han sido encontrados como disponibles. La función indicada toma los datos de la localización obtenida y actúa en consecuencia.

FuncionError, este parámetro llama a una función en curso de que la petición de localización falle por alguna razón que escapa de nuestro control. Es opcional pero es una buena práctica.

Opciones, aquí se maneja internamente a su vez tres parámetros opcionales que se encierran entre los símbolos “{ }”.

  • enableHighAcurrency:  indica al navegador que utilice una fuente de información exacta si está disponible. Los valores posibles son TRUE o FALSE. NOTA : Usted no puede controlar la fuente de información.
  • Timeout:Le indica el monto de máximo de tiempo del que dispone para calcular la posición actual. Si el cálculo no se completa en el tiempo indicado, la función de error se dispara. El valor se da en milisegundos.
  • maximumAge: Señala que tan vieja puede ser la información de localización antes de volver a recalcularla. El valor también se indica en milisegundos.

 

 

Ejemplo

 

Leer Más

Como crear un menú con HTML5

Una de las partes  más importantes de un sitio web es el menú de navegación ya que a través  de él  nuestros usuarios interactúan con el sitio, hoy veremos cómo crear un menú usando las nuevas etiquetas de HTML5, una introducción a estilos con CSS  y cómo empezar a usar esta nueva especificación que  ha creado muchas controversias respecto a usarlo o no.

 

Leer Más

Galería de imágenes con Jquery CSS y HTML

En este tutorial les mostrare como crear una galería de imágenes usando Jquery  y html5, para esto usaremos  un plug in de Jquery.

Un plug In de Jquery   no es más que  una función que se agrega el objeto JQuery para poder realizar  efectos o animaciones más fáciles  ya que la mayoría reciben parámetros de configuración, en este caso en específico usaremos el plug In llamado Cycle  que nos permite con unas cuantas líneas de código crear un slider de imágenes con diferentes efectos.

Sin más preámbulo les dejo abajo el video  tutorial de mi canal de YouTube  y los enlaces de descarga del plug in, jquery

 

 

Enlace de jquery:

https://ajax.googleapis.com/ajax-libs/jquery/1.7.2/jquery.min.js

Enlace de Cycle:

http://cloud.github.com/downloads/malsup/cycle/query.cycle.all.latest.js

Enlace de Efectos:

http://www.malsup.com/jquery/cycle/browser.html

Leer Más