Archivo de la categoría: Recursos

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:

Cuando un JSON viene con error

Traté de muchas maneras poder utilizar un webservice que entregaba un JSON, pero no me daba ningún resultado.

Al principio pensé que estaba haciendo mal las cosas, utilizando Ajax, JQuery, etc. pero la verdad era que el servicio estaba entregando los datos con unos caracteres raros al principio.

Obviamente Google me ayudó y di con la función que te permite limpiar esos caracteres que no corresponden y que no nos permitirán leer de manera correcta un JSON.

<?php
$datos = file_get_contents("http://domino.com/Json");
// Remover carcateres que no queremos
// http://www.php.net/chr
for ($i = 0; $i <= 31; ++$i) {
$datos = str_replace(chr($i), "", $datos);
}
$datos = str_replace(chr(127), "", $datos);
// algunos archivos comienzan con 'efbbbf' para marcar el comienzo del archivo (nivel binario)
// aqui lo detectamos y removemos, basicamente los 3 primeros caracteres
if (0 === strpos(bin2hex($datos), 'efbbbf')) {
$datos = substr($datos, 3);
}
//Decodificamos el json y lo imprimimos
$datos = json_decode( $datos );
print_r($datos);
?>

Ahora a continuar con el desarrollo de una aplicación web (y posiblemente para smartphone) consumiendo estos datos interesantes.

UDID o UUID en iPhone

En estos días de aplicaciones híbridas en mi trabajo, tuve que aprender un montón de cosas, como por ejemplo que es el UDID o UUID de un iPhone.

El identificador único universal es un número de 32 dígitos hexadecimales, que como bien dice su nombre es único y sirve para identificar un iPhone, en mi caso particular, para que la distribución de una aplicación sea solamente a los equipos que yo necesite.

La manera más simple de obtener este número es a través de iTunes, conectando el equipo, luego en el menu del iPhone en Resumen está el número de serie, lo pinchas y se transforma en el famoso UDID.

Me había quedado en el pasado…. mysql

Este mes a sido un mes de aprendizaje en todo sentido. De una idea en una pizarra, nació una app de la cual debo sentirme orgulloso. Pero tuve que aprender y recordar cosas que hace mucho tiempo no utilizaba.

Entre esas cosas MYSQL y las consultas. Me había quedado en el pasado y el servidor donde estaba desarrollando las consultas me dijo “Hey! esa función es muy vieja…. “. Así que comparto con Uds, si es que aún viven en el pasado, la comparación entre mysql mysqli y PDO.

Es super importante tener en consideración ya que la versión 7 de PHP no admite mysql y por lo tanto cuando generas una conexión “a la antigua” ya no funcionará por ningún motivo. Entre PDO y mysqli ? Me quedo con el segundo. (ejemplo extraido desde php.net)

<?php
// mysqli
$mysqli = new mysqli("ejemplo.com", "usuario", "contraseña", "basedatos");
$resultado = $mysqli->query("SELECT '¡Hola, querido usuario de MySQL!' AS _message FROM DUAL");
$fila = $resultado->fetch_assoc();
echo htmlentities($fila['_message']);

// PDO
$pdo = new PDO('mysql:host=ejemplo.com;dbname=basedatos', 'usuario', 'contraseña');
$sentencia = $pdo->query("SELECT '¡Hola, querido usuario de MySQL!' AS _message FROM DUAL");
$fila = $sentencia->fetch(PDO::FETCH_ASSOC);
echo htmlentities($fila['_message']);

// mysql
$c = mysql_connect("ejemplo.com", "usuario", "contraseña");
mysql_select_db("basedatos");
$resultado = mysql_query("SELECT '¡Hola, querido usuario de MySQL!' AS _message FROM DUAL");
$fila = mysql_fetch_assoc($resultado);
echo htmlentities($fila['_message']);
?>


Todos los sismos del día en Chile

API Google Maps + Web Scraping

Poco a poco mejorando el código, tomé todos los sismos del día en Chile, desde la web de Sismología.cl y puse un marcador por cada uno. Simplemente utilizando un arreglo y recorriendolo con un simple FOR.

Ahora la idea es ir por más y utilizar la magnitud de cada sismo y crear marcadores dependiendo de los valores, puede ser con colores o puede ser tamaños distintos.

Si alguien está interesado en el código, puede solicitarmelo en los comentarios.

http://eq.roison.me/sismosdiarios.php

Google Maps API + PHP Web Scraping

Hace mucho tiempo pensaba hacer algún tipo de servicio que me mostrara la información del último sismo registrado en Chile. Tratando de buscar información, nunca dí con un servicio online que me diera esa información, por lo tanto me acordé del famoso Web Scraping.

Que es el Web Scraping? Bueno como dice Wikipedia, es una técnica que se utiliza para extraer información desde sitios web, simulando la navegación en los mismos, ya sea a través de una aplicación…. o en mi caso por PHP.

Siemplemente en este caso busqué donde se publica el último sismo registrado en Chile. Para eso me basé en la información que entrega www.sismologia.cl

A través de una función de PHP (file_get_contents) ingreso a la pagina donde está el listado con el último sismo, busco los datos que están separados por columnas y esos datos los asigno a variables. Luego esas variables las utilizo para crear a través de la API de Google Maps, el mapa centrado en la coordenada del sismo y agrego una marca con algunos datos del sismo, logrando algo como esto:

Esto fue solo un ejercicio para poder aprender el uso de la API de Google Maps, creando marcadores dinámicos, que se actualiza cada vez que hago un refresco de la página. Hay cosas que mejorar en el código o ir más allá y automatizar el proceso, para que el último sismo quede registrado en una BD y luego al cargar el mapa, la marca se extraiga del último registro.

Con eso podría marcar todos los sismos del día en un mismo mapa o incluso un historico de sismos. Algo interesante para continuar aprendiendo.

Si alguien quiere el código me lo pide! Pueden ver el último sismo en este mismo sitio, o ingresando a http://eq.roison.me

InfoPath, Mayusculas <-> Minusculas

Uno de los problemas que me dió InfoPath en unos formularios que tenía aprobaciones de por medio, es que al hacer la comparación entre quien debía aprobar (buscando en Active Directory) y quien abría el formulario (utilizando la funcion userName() o nombreUsuario()), comparaba incluso las mayusculas y minusculas.

La solución más simple era transformar ambos o a mayusculas o a minusculas, así no tendría nunca el problema de meter manos al código del formulario para poder permitir estas aprobaciones.

La función que permite hacer eso es: Traducir() o Translate()

Como usarla?
Translate(string;”abcdefghijklmnopqrstuvwxyz”;”ABCDEFGHIJKLMNOPQRSTUVWXYZ”)

Simplemente el string lo puedes tomar de una función o de una variable.

 

Música para nuestros proyectos – Incompetech

Si tienes algún proyecto en el cual puedas dar crédito de la música utilizada, te recomiendo Incompetech. Bajo licencia Creative Commons podrás utilizar la música disponible en este sitio, la cual está muy bien catalogada, con la posibilidad de buscar música desde los beats (tempo) hasta el tipo de genero que necesitas (genre).

Puedes escuchar en el mismo sitio el tema seleccionado, sin tener que instalar nada y además puedes descargarlo en formato MP3 o sin compresión (sólo en algunos casos) para que lo puedas utilizar.

“Super Power Cool Dude” Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
http://creativecommons.org/licenses/by/3.0/

Hexatar: Avatares vectorizados

Hace años se usaban bastante los avatares, especialmente para quienes regularmente visitabamos los foros de Internet. Yo participaba activamente en dos, www.deejay.cl y  www.overclockers.cl.

En ambos utilizaba el mismo avatar y nunca lo cambiaba, me gustó como había quedado y me representaba bastante. Lo usé también un tiempo en el desaparecido MSN Messenger y así en algún otro “nuevo” servicio de aquel entonces.

Hexatar es un servicio que permite crear tu avatar de cabeza hexagonal y poder mostrarte en internet de una manera distinta. Bastante personalizable, donde puedes llegar a resultados muy semejantes a ti, solo basta con tomar lo que más te identifica y plasmarlo en esta aplicación.

Permite una vez finalizado, descargar tu avatar el cual podrás utilizar donde quieras. Si te registras podrás descargar tu avatar vectorizado e incluso mantener varios en tu cuenta.

hexatar.com

JW Player

Como siempre, dando vueltas por Internet dí con un sitio que permite subir vídeos y publicarlos en tu sitio. La gracia (ya que para esto ya existe Youtube) es que es un sitio del famoso JW Player.

El plan gratuito permite subir hasta 5 GB, hacer 25 GB de streaming mensual y 10 K visualizaciones. Por supuesto hay planes mayores, donde puedes obtener más espacio, más streaming y por supuesto más visualizaciones.

Una vez que subes un vídeo, puedes compartirlo incrustándolo en tu web como IFRAME o con JavaScript. Lo interesante de tener una plataforma como la que nos presenta JW Player, es que podemos hacer análisis de los vídeos como por ejemplo desde que plataforma lo han visto, cuantos lo han visto completo, cuantas veces a sido incrustado, etc.

No es Youtube, pero es una plataforma que podemos utilizar para algún proyecto en particular.

jwplayer.com