Archivo de la etiqueta: HTML

Mostrar GeoLocalización – Google Maps API (JavaScript)

El título lo dice casi todo. La idea es mostrar la ubicación de la persona que abre un sitio web sobre el mapa de Google.

Hay que considerar lo siguiente:
– La dirección web debe ser https.
– La geolocalización puede ser apróximada dependiendo de la fuente utilizada (Dirección IP o GPS).
– El usuario debe autorizar a la aplicación (o sitio web) para que pueda utilizar la geolocalización.

Debes tener en cuenta que para este ejemplo debes activar una API KEY de Google Maps Javascript API.


<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});

// HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

infoWindow.setPosition(pos);
infoWindow.setContent('Estas Aqui!!!');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Si el navegador no soporta Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: Servicio de Geolocation fallo.' :
'Error: Tu navegador no soporta geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap">
</script>
</body>
</html>

Y este sería el resultado:

Incrusta el audio de un video de youtube

Gracias a un simple pero efectivo código que utiliza la API de Youtube, podemos incrustar en un sitio web el audio de un vídeo de Youtube.

Simplemente copia el siguiente código y reemplaza VIDEO_ID por los 11 caracteres que identifica el vídeo en Youtube.

  1. <div data-video=“VIDEO_ID” data-autoplay=“0” data-loop=“1” id=“youtube-audio”></div>
  2. <script src=“https://www.youtube.com/iframe_api”></script>
  3. <script src=“https://cdn.rawgit.com/labnol/files/master/yt.js”></script>

Por ejemplo, para colocar el audio de este vídeo en nuestro sitio, en el enlace despues de v= tenemos los siguientes caracteres: 5HB_8TBrzLs

Reemplazamos en el código mostrado anteriormente y el resultado es el siguiente:


Fuente: http://www.labnol.org/internet/youtube-audio-player/26740/

Colores que combinan bien

Soy un asco para combinar colores y eso me pasa la cuenta cuando estoy desarrollando un sitio web, es por esa razón que me apoyo de algunos recursos gratuitos que hay en la web.

Les dejo aquí el enlace a uno de ellos, el cual me pareció bastante interesante.

Paletton.com

Con una simple selección te muestra la paleta de colores a utilizar, además de un ejemplo con una página blanca, una negra, etc. y podemos exportar a HTML, CSS y varios más para nuestros proyectos.

 

Elementos Form

Si necesitan una reseña rápida de los elementos que pueden estar dentro de un FORM de HTML5:

http://nativeformelements.com/