Archivo de la categoría: JavaScript

[Evento] HTML Tour 2014

En Plain Concepts estamos que no paramos.

No ha terminado el Wave Tour y ya hemos empezado un año más el HTML Tour 2014

HTML Tour

En las siete sesiones preparadas veremos cuáles son las ventajas de HTML 5, javascript y en petí comité veremos qué es lo que hemos estado haciendo en Plain Concepts, cómo hemos aprovechado las ventajas de esta tecnología y veremos el resultado de los proyectos reales que están en producción.

Sinceramente, alucino con las cosas que son capaces de hacer los compañeros, con los que he tenido el privilegio de trabajar.

Aquí tenéis la agenda. En Sevilla estarán el día 24 de Abril, podéis registraros aquí.

Y los fieras que nos darán las sesiones:

ALFREDO FERNÁNDEZ

Alfredo ha estado desarrollando durante unos 6 años, utilizando tecnologías Microsoft y en gran medida centrado en tecnologías web y patrones de desarrollo, está muy interesado en Asp.Net MVC y HTML5, pero también tiene una amplia experiencia en WPF. Es uno de los coordinadores de SecondNug, uno de los principales grupos de usuarios. NET de España y colabora con diversas iniciativas para crear eventos de alta calidad en todo el país.

DAVID GARCÍA

David García uno de los especialistas del equipo Web de Plain Concepts. Ha participado en proyectos como La Cura y el Training Center de la web de la película Prometheus (proyecto ganador de un FWA), proyecto para el cual creó, junto a otros compañeros, la librería WaveJS, la cual nos permite pintar 3D en canvas 2D.

LUIS MIGUEL JIMÉNEZ

Luis Miguel Jiménez lleva varios años trabajando como diseñador gráfico y gracias al avance de las tecnologías de desarrollo web (HTML5 y CSS3) su carrera da un giro hacia el diseño y la maquetación web donde descubre un nuevo mundo de posibilidades a las que poder aplicar los conocimientos en diseño.

MANUEL MARTÍNEZ

Manuel Martínez es un apasionado de las tecnologías web, empezó como desarrollador de PHP y actualmente pertenece al equipo web de Plain Concepts, donde trabaja habitualmente con ASP.NET MVC y JavaScript.

QUIQUE MARTÍNEZ

Quique Martínez actualmente trabaja en Plain Concepts como Senior Software Developer Engineer. Es un apasionado de la #ArquitecturaDeSoftware y del #CloudComputing, en concreto #WindowsAzure.En esta última ha sido nombrado #MicrosoftMVP y además pertenece a los #AzureInsiders.

Google Earth logo

API Google Earth (I)

Esta va a ser la primera de una serie de entregas que nos servirán para adentrarnos en Google Earth API, la interfaz que nos proporciona Google  para juguetear con ese globo 3D que ya todos conocemos.

En este post, en el que se incluye el código utilizado, veremos cómo un sencillo formulario, algo de jQuery básico y menos de 100 líneas de código javascript bastan para tener en nuestra web el mapa 3D con un control total sobre las capas de información que Google nos proporciona y un buscador que nos permita redireccionar a cualquier punto de la Tierra.

Hello World

Lo primero que haremos será mostrar el mapa, para lo cual nos creamos un archivo HTML con un div donde se pintará el globo terrestre e incluiremos referencias al archivo donde definiremos toda la lógica de la aplicación, así como a las API de Google Earth y jQuery.


	Google Earth (Ejemplo 1)
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/inicializacionExplicada.js"></script>

Ahora, creamos ese archivo (inicializacion.js), añadiendo el siguiente trozo de código.

google.load('earth', '1.x', { 'language': 'es' });
google.load('maps', '3', { other_params: 'sensor=false' });
google.setOnLoadCallback( function inicializarPlugin() {
google.earth.createInstance('mapa3d', inicializar, terminacion);
});

Así, cargamos los plugins de Google Earth y Google Maps (necesario para implementar el buscador) y la función setOnLoadCallback, que evita que se cree la instancia del plugin hasta que todo el DOM esté construido. De esta manera, la función createInstance recibe:

  • Identificador del div que va a contener el mapa terrestre.
  • Función a llamar en caso de que la instancia se cree correctamente.
  • Función para el caso de que haya problemas a la hora de crear la instancia.

Por lo tanto, con sólo poner visible el mapa en inicializarEventos con la sentencia necesaria “ge.getWindow().setVisibility(true)”, podríamos ver el mapa correctamente.

Parámetros configurables

Como el ejemplo incluye opciones de parametrización, en inicializarEventos también vamos a incluir los eventos que permitan activar/desactivar estos elementos configurables.

Si nos centramos en los diferentes elementos configurables (capas, opciones, etc.) que trae Google Earth, nos encontramos con capas tales como carreteras, edificios3D, terreno o datos informativos (aunque se llame borders…), las cuales pueden ser activadas/desactivadas a través de la función enableLayerById.

ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);

Por otra parte, hay otros 2 grupos de parámetros configurables que Google incorpora; el primero lo forman el Sol y la atmósfera, que al no tener influencia informativa directa sobre el mapa terrestre, no son consideradas capas en sí mismas, y el segundo son elementos informativos superpuestos como la leyenda del mapa, informaciones geográficas, etc.

ge.getSun().setVisibility(true);
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getOptions().setOverviewMapVisibility(false);
ge.getOptions().setGridVisibility(true);
ge.getOptions().setAtmosphereVisibility(true);

BUSCADOR

La última sentencia de la función hace la redirección a la ciudad de Sevilla, lo cual se consigue mediante una llamada a un Web Service de Google pasándole la cadena de texto que hemos incluido en el buscador (para un caso genérico), devolviéndonos en el callback en formato JSON la latitud y longitud correspondientes a Sevilla, siempre que no haya habido problemas (status OK).

function buscarLocalizacion(direccion) {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({ 'address': direccion }, function (destino, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			modificarVista(destino[0].geometry.location.lat(), destino[0].geometry.location.lng());
		} else {
			alert("Wrong direction");
		}
	});
}

Una vez tenemos las coordenadas, la forma de indicarle a la API que deseamos realizar la redirección es creando un objeto LookAt (range indica el zoom que deseamos sobre Sevilla) y pasándoselo al mapa.

function modificarVista(latitud, longitud){
	var lookAt = globo.createLookAt('');
	lookAt.setLatitude(latitud);
	lookAt.setLongitude(longitud);
	lookAt.setRange(6000);
	globo.getView().setAbstractView(lookAt);
}

NOTA

Hay que tener en cuenta que, por motivos de brevedad, en el post se han obviado cosas como la creación del formulario y los eventos jQuery por considerarse sencillos de comprender.

Aquí puedes descargarte el código creado para realizar este ejemplo, donde puede verse el código completo para comprenderlo mejor.

Fuentes

https://developers.google.com/maps/documentation/javascript/geocoding

https://developers.google.com/loader/

https://developers.google.com/earth/

Autor: Antonio Manuel Acevedo

Usar la API de SkyDrive para Javascript en una página local

Hola a todos, hoy voy a hablaros sobre las API Live que tiene disponible Microsoft y que podemos usar desde nuestras aplicaciones c#, JavaScript, Objective-C y Java, pero además, también está disponible una versión Rest para todo lo que no entre en estos lenguajes.

Vamos a centrarnos en la API para SkyDrive y sobre cómo podemos configurarla para usarla en una web que estemos desarrollando en una máquina local.

El único requisito que necesitamos es definirnos una aplicación en el "Live Connect Developer Center". Es necesario crearnos una nueva App en la sección "My Apps" para obtener un client Id que vamos a necesitar para poder usar la API.

Panel Live Connect

Si accedemos a la sección "SDK Interactivo" podemos irnos al primer ejemplo de la API de Sky Drive del  SDK Interactivo  y ver el código. El código que vamos a ver es código JavaScript, ya que no hay otra forma de verlo de manera interactiva en la web, pero en la documentación sí podemos ver cómo usarla desde C#, Objective-C, Rest y Java.


WL.init({ client_id: clientId, redirect_uri: redirectUri });

WL.login({ "scope": "wl.skydrive" }).then(
    function(response) {
        openFromSkyDrive();
    },
    function(response) {
        log("Failed to authenticate.");
    }
);

function openFromSkyDrive() {
    WL.fileDialog({
        mode: 'open',
        select: 'single'
    }).then(
        function(response) {
            log("The following file is being downloaded:");
            log("");

            var files = response.data.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                log(file.name);
                WL.download({ "path": file.id });
            }
        },
        function(errorResponse) {
            log("WL.fileDialog errorResponse = " + JSON.stringify(errorResponse));
        }
    );
}

function log(message) {
    var child = document.createTextNode(message);
    var parent = document.getElementById('JsOutputDiv') || document.body;
    parent.appendChild(child);
    parent.appendChild(document.createElement("br"));
}

Si ejecutamos este código se nos abrirá un selector de archivos que lo que nos va a permitir es seleccionar un archivo que tengamos en nuestro directorio de SkyDrive, logarnos si no lo estamos ya, y descargarlo. Este es sólo uno de los ejemplos que podemos probar, hay un montón en los que podemos ver cómo usarla para acceder al contenido, cómo recorrer los directorios, etc.

Sin embargo, y es el problema que quiero resolver y el motivo de este post, si usamos la librería JavaScript en una página web que estamos desarrollando, necesitamos hacer un "truco" para poder verlo funcionar en local.

Si os fijáis bien, en la primera línea de código:

WL.init({ client_id: clientId, redirect_uri: redirectUri });

Vemos, que primero tenemos que inicializar "algo" para poder usarla. Para configurarlo adecuadamente necesitaremos el "client id" que comentaba al principio del post y una "redirect_uri". Pues bien, esa uri es un dominio al que se van a redireccionar las peticiones de la API, que necesitamos configurar en el panel de Live Connect:

Configuración de la aplicación

Esa url debe ser de un dominio público y accesible por la api. Sin embargo, como estamos en desarrollo, nuestra web no está todavía disponible ni la tenemos desplegada en un servidor.

¿Qué podemos hacer?

La solución es bien sencilla, tan sólo tenemos que modificar nuestro etc\hosts para que el dominio que configuremos en el panel de control de Live Connect sea nuestra propia máquina. De esta manera la API funcionará perfectamente y podremos hacer nuestras pruebas en local antes de publicar nuestra aplicación en un servidor. Por ejemplo podemos definir en nuestro etc/host el dominio:  midominiodeprueba.com 127.0.0.1

Y en la página de configuración de la aplicación pondremos:

Confgurando el Dominio de redirección

A partir de este momento ya podemos usar la API sin tener que estar publicando en un servidor nuestra aplicación y haciendo pruebas en él.

Una vez que tengamos nuestra web lista para desplegar, sólo hay que modificar esos valores para que todo vaya como la seda :).

Juan María Laó Ramos