¿sabías que Google Drive permite alojar páginas web?

Google Drive permite almacenar, crear, modificar, compartir y acceder a documentos, archivos y carpetas de todo tipo en un único lugar. Con esta herramienta puedes acceder desde un navegador web o desde cualquier dispositivo en el que hayas instalado Google Drive.


Puedes utilizar Google Drive para almacenar todo tipo de archivos, incluidos documentos, presentaciones, música, fotos y vídeos. Puedes abrir muchos tipos de archivo directamente en tu navegador, incluidos los archivos PDF, archivos Microsoft Office, vídeos de alta definición y muchos tipos de archivos de imagen, aunque no tengas instalado el programa correspondiente en tu ordenador. Fuente oficial: Descripción general de Google Drive

En su página oficial nos informan de todas las posibilidades que ofrece esta plataforma pero además podemos subir a un directorio público todos los ficheros que componen una página web (html, css, js, img, etc) y acceder a la misma desde una dirección web.

¿cómo subo mi página web a Google Drive?

Entramos en la dirección https://drive.google.com/ e introducimos los datos de nuestra cuenta de Google (correo electrónico/contraseña).

Pulsamos el botón rojo Crear y seleccionamos la opción Carpeta. A continuación le damos nombre a la carpeta y hacemos click en el botón azul Crear.



Ya hemos creado la carpeta donde vamos a alojar nuestra página web, ahora vamos a hacerla pública. Para ello pulsamos sobre el nombre de la carpeta con el botón derecho del ratón y seleccionamos la opción del menú Compartir.



Nos va a aparecer una pantalla en la que se nos indican que la carpeta es de acceso privado. Pulsamos en link Cambiar... y marcamos la opción Público en la Web. Por último, guardamos los cambios.



El siguiente paso es subir los ficheros de nuestra página web a la carpeta creada. Y lo podemos hacer de dos formas, pulsando el icono rojo Subir situado a la derecha del botón Crear o arrastrándolos y soltándolos dentro de la carpeta.

Es interesante que la home o página de inicio de nuestro Web Site se llame index con extensión htm o html porque el host la va a detectar automáticamente y no necesitaremos escribirla.

¿cómo accedo a la home de la web?

Lo primero que haremos será localizar el identificador de nuestra carpeta pública: pulsamos con el botón derecho sobre el nombre de la carpeta y hacemos click en la opción del menú contextual Compartir. En el enlace para compartir aparece una cadena de números y letras que corresponde al id público.



La url de nuestra web será del tipo https://googledrive.com/host/ más el id que hemos copiado al portapapeles. En este caso:
https://googledrive.com/host/0B5G3cbs08P16M1JDXzFCNGMyVUk/

Algunas consideraciones

Seamos razonables, para la publicación de nuestro sitio web lo ideal es disponer de hosting y dominio propios. Pero considero que en casos muy concretos, esta plataforma puede resultarnos muy útil.

Por ejemplo, imaginemos que estamos realizando un curso online sobre programación de páginas web con html y tenemos que entregar un proyecto final; ¿qué mejor sitio que Google Drive para colgar nuestra web y que sea accesible para nuestros profesores y compañeros?.

Hace unas semanas, un cliente me enviaba unos datos para que generase un gráfico de barras o circular. La opción que barajaba era generarlo con alguno de los programas propiedad de Microsoft (Excel o Power Point) y enviarle el fichero vía email. Pero corría el riesgo de que mi cliente no tuviera instalado el paquete de Office por lo que no podría visualizar el fichero correspondiente. En tal caso, por qué no utilizar dos de las muchas herramientas que nos proporciona Google: Google Charts para crear el gráfico y Google Drive para compartirlo.
Os garantizo que en menos de cinco minutos tenía la página lista para publicar.

Nota importante

Esta función dejará de estar disponible el 31 de agosto de 2016.

Puedes alojar páginas web con Google Drive hasta el 31 de agosto de 2016. Después de esa fecha, googledrive.com/host/ID dejará de funcionar.

Página de soporte de Google

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Google Universal Analytics: la evolución de Google Analytics

Universal Analytics es un conjunto de innovaciones tecnológicas que mejoran la forma en que los datos se recopilan y procesan en Google Analytics permitiéndonos realizar el seguimiento desde cualquier dispositivo digital (smartphone, tablet, portátil, etc).


Vamos a poder diseñar nuestras métricas personalizadas, adaptando la herramienta de analítica web a las necesidades de nuestra empresa lo que nos va a permitir medir de forma unificada todas las interacciones de un usuario, ya sea desde su equipo, desde su móvil, tablet o cualquier otro dispositivo. También es posible añadir a nuestra nueva herramienta de analítica web datos generados o almacenados fuera de línea, como podría ser del CRM corporativo.

Todas las propiedades de Google Analytics deberán utilizar Universal Analytics. Las propiedades que no sigan el proceso de actualización se transferirán automáticamente a Universal Analytics en el futuro.

La actualización nos proporciona las ventajas de Google Analytics, incluidos los nuevos métodos de recopilación y herramientas de informes. Los métodos de recopilación de Google Analytics clásico (como la biblioteca JavaScript de ga.js) se desactivarán cuando Google Analytics se integre por completo como el nuevo estándar operativo.

El proceso completo de actualización consta de dos pasos:

1. transferir la propiedad a la tecnología de procesamiento de datos de Universal Analytics
2. implementar el código de seguimiento de Universal Analytics.

Se deben actualizar todas las propiedades de Google Analytics. Los usuarios con el permiso Edición pueden transferir las propiedades a la actualización de Universal Analytics en sus cuentas. Un programador u otra persona con conocimientos técnicos debe implementar el nuevo código de seguimiento de Universal Analytics - Introduction to Analytics.js.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-44789425-1', 'https://www.tecnoblog.guru');
 ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Consulta en la Guía de Actualización los detalles del proceso de actualización y en Fases de Actualización los detalles de las fases.

Al realizar la actualización no se pierden datos, se puede acceder al historial de datos y analizarlo con los mismos informes y herramientas que usamos ahora, pero también accederemos a funciones que solo están disponibles a través de Universal Analytics.

Como los datos se recopilan y procesan por propiedad en Google Analytics, cada propiedad se debe actualizar individualmente. Si tienes muchas propiedades en una cuenta de Google Analytics, debes seguir el proceso de actualización para cada una.

Si no completas el paso 1 del proceso de actualización, la propiedad se transferirá automáticamente a Universal Analytics en el futuro. Si no completas el paso 2 del proceso de actualización, seguirás enviando datos a Google Analytics desde un método de recopilación que no es de Universal Analytics. Estos datos seguirán procesándose durante un periodo después de que Universal Analytics se haya convertido en el nuevo estándar operativo, en cuyo momento se desactivarán todos los métodos de recopilación de datos que no sean Universal Analytics y ya no funcionarán. Si sigues enviando datos con un método de recopilación que no sea de Universal Analytics después de que se hayan desactivado, los datos ya no se procesarán.

Todas las actualizaciones de producto y nuevas funciones solo estarán disponibles para las propiedades que reciben datos de un código de seguimiento de Universal Analytics (biblioteca JavaScript analytics.js en sitios web, SDKs de aplicaciones para dispositivos móviles versión 2.x o posterior para Android e iOS, y el protocolo de medición para otros dispositivos digitales, como las videoconsolas y los quioscos de información). Las propiedades clásicas y las propiedades que reciben datos de una versión anteriormente del código de seguimiento de Google Analytics (como la biblioteca JavaScript ga.js) no recibirán actualizaciones de producto ni acceso a nuevas funciones.

Este programa de actualización de Universal Analytics se producirá de forma incremental en tres fases:

1. Fase 1: todas las propiedades pueden actualizarse a Universal Analytics (fase actual).
2. Fase 2: comienza el proceso de transferencia automática.
3. Fase 3: fin de la versión beta de Universal Analytics.
4. Fase 4: Universal Analytics es el estándar operativo de Google Analytics.

Toda la información disponible en: Descripción general de la configuración de Universal Analytics

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Google Charts para crear gráficos en tu sitio web

Google Charts a través de su API ofrece la posibilidad de visualizar datos en tu sitio web. La galería gráfica provee diferentes tipos de gráficos listos para su uso: desde gráficos de barras o líneas simples a mapas de árboles jerárquicos complejos.


Los gráficos se representan mediante la tecnología HTML5 / SVG (Scalable Vector Graphics) para garantizar la compatibilidad entre navegadores (incluyendo VML o Vector Markup Language para versiones anteriores de Internet Explorer) y la portabilidad entre plataformas para iPhones, iPads y Android. Los usuarios no tendremos que instalar plugins o software adicional, sólo es necesario disponer de un navegador web.

La forma común de mostrar los gráficos en tu sitio web es mediante la inserción de código javascript en un documento html. Sólo tenemos que indicar los parámetros correspondientes a cada gráfico a utilizar.

• Gráfico de Líneas (Line Chart)

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Año', 'Ingresos', 'Gastos'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
        var options = {
          title: 'Balance de la Compañía'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico de líneas... por favor, espere

Si queremos presentar las líneas de forma curva añadimos el parámetro curveType:
var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } };
Información detallada de todos los parámetros de configuración: Line Chart

• Gráfico de Barras (Column Chart)

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Año', 'Ingresos', 'Gastos'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
        var options = {
          title: 'Balance de la Compañía',
          hAxis: {title: 'Año', titleTextStyle: {color: 'red'}}
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico de barras... por favor, espere

Hay tres maneras diferentes de definir los colores de las columnas: valores RGB, nombres de los colores en inglés, y estilos css:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Información detallada de todos los parámetros de configuración: Column Chart

• Gráfico Circular (Pie Chart)

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Tareas', 'Horas por día'],
          ['Trabajo',     11],
          ['Comida',      2],
          ['Transporte',  2],
          ['Televisión',  2],
          ['Dormir',      7]
        ]);
        var options = {
          title: 'Mi actividad diaria',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico circular... por favor, espere

El parámetro is3D con valor true indica que el gráfico se visualiza en tres dimensiones. Para mostrarlo en dos dimensiones, cambiamos su valor a false.
Información detallada de todos los parámetros de configuración: Pie Chart

Tal vez te interese instalar esta extensión en tu navegador Google Chrome para generar gráficos en 3D e imprimirlos de forma sencilla:

Crea gráficos online de 2D o 3D. El modo edición es fácil e intuitivo. Además puedes imprimir el gráfico generado.

Todos los ejemplos de gráficos se pueden encontrar en Chart Gallery, así como otros añadidos por la comunidad Additional Charts Gallery

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Google Api: otra forma sencilla de integrar artículos de un blog en tu página web.

API significa Interfaz de Programación de Aplicaciones (del inglés Application Programming Interface), y es el conjunto de llamadas a bibliotecas (informática) que ofrecen acceso a servicios web de terceros, dentro de nuestra propia aplicación web, de manera abstracta para nosotros.


Google proporciona más de 60 apis de acceso a sus servicios en su página Google Data APIs

¿Cómo funcionan las APIs de Google?
Las aplicaciones que escriben los desarrolladores se conectan remotamente con el servicio Web API de Google. Esta comunicación se realiza mediante un protocolo llamado SOAP (Simple Object Access Protocol). Está basado en XML, y se usa para el intercambio de información entre aplicaciones. Sin embargo, no es necesario tener conocimientos ni de SOAP ni de XML para trabajar con las APIs de Google.

Vamos a ser capaces de insertar en nuestro sitio web los últimos post publicados en cualquier blog con sólo unas líneas de código html:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("https://www.tecnoblog.guru/feeds/posts/default"), entry, dv;
 feed.setNumEntries(5);
 feed.load(function(result) {
  if (!result.error) {
   var container = document.getElementById("feed"), entry = result.feed.entries, date;
   for(var i = 0; i < entry.length; i++) {
    dv = document.createElement("div");
    date = new Date(entry[i].publishedDate);
    dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a> ' + date.toDateString().substr(4) + '<br/>' + entry[i].contentSnippet + '<hr/>';
    container.appendChild(dv);
   }
  }else{alert(result.error.message);}
 });
};google.setOnLoadCallback(initialize);
</script>
<div id="feed"></div>

Escribimos este fragmento de código dentro del cuerpo de nuestro documento html y sustituimos la url 'https://www.tecnoblog.guru/feeds/posts/default' por la de nuestro feed. También podemos modificar el número de entradas a mostrar representado por el 5 en el método setNumEntries.

A continuación mostramos el noticiero formateando el estilo con CSS (Cascading Style Sheets).

Sigue las siguientes instrucciones:

• escribe en la caja de texto un feed válido (Ejemplo: http://wwwhatsnew.com/feed/ - http://www.ticbeat.com/feed/)
• selecciona del desplegable el número de artículos a mostrar.
• y pulsa el botón Últimas noticias. Obtendrás el resultado de tu canal en tiempo real.
  
  

Número de post a mostrar: 51020

Loading...

Nota importante

Google ha decidio dejar de dar soporte a esta api a partir del 15 de diciembre de 2016.

El mensaje oficial es:

"This API is officially deprecated and will stop working after December 15th, 2016."

Más información

Para superar este contratiempo, en el post "Alternativas a Google Feed Api" ofrezco tres opciones válidas con ejemplos incluidos.

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Cómo insertar un vídeo de youtube en mi página web sin su logo o leyenda

Hoy más que nunca se hace necesario tener presencia corporativa en los diferentes medios sociales. Ofrecer al usuario información de tu negocio requiere de determinadas estrategias y YouTube es una magnífica plataforma para mostrar vídeos en tu blog o sitio web.


Hace sólo unos meses, un cliente decidió dar el salto e insertar vídeos corporativos en su página web.
Partíamos del inconveniente de que son vídeos generados en alta definición cuyo formato ocupa mucho espacio en disco (superando alguno de ellos los 500 megabytes), ralentizando el tiempo de carga de la página.
Con el fin de no encarecer los costes del hosting contratando más espacio, le sugerí optar por soluciones de alojamiento gratuito de vídeo entre las que destacan Vimeo y YouTube.
Al final nos decidimos por la más usada mudialmente: YouTube.

A continuación, el reto que se planteaba era tratar de ocultar el logo de YouTube para dotar a la web de mayor corporativismo.
La plataforma de YouTube provee una serie de parámetros de su reproductor para configurar la forma en que vamos a visualizar un vídeo en nuestro sitio web: https://developers.google.com/youtube/player_parameters.
El parámetro modestbranding=1 oculta el logo pero no como hubiésemos deseado, ya que si situamos el cursor encima del vídeo, éste aparece en la parte inferior derecha.

Youtube: Zooming In On a Tree – Urban/Water Background




Google también nos ofrece su servicio de alojamiento de archivos en la nube Google Drive: cada usuario cuenta con 15 gigabytes de espacio gratuito para almacenar sus archivos, ampliables mediante pago.

Si tienes cuenta en Google, accede al Panel de control de Google para consultar fácilmente los datos asociados a tu cuenta: Google Dashboard. Abarca más de 20 productos y servicios, incluidos Google+, Gmail, Calendar, Drive, Analytics, Adsense, Blogger, Docs, Maps, Herramientas para Webmaster (webmaster tools), FeedBurner, Sites, Historial web, Alertas de Google y YouTube.

¿Qué tengo que hacer para insertar un vídeo subido a Google Drive en mi página web o blog?

Lo primero es establecerlo como público. Para ello haremos clic con el botón derecho sobre el nombre del fichero y seleccionamos la opción Compartir... > Compartir... del menú contextual. A continuación cambiamos el origen del vídeo a público y copiamos el Enlace para compartir.

Google Drive: Zooming In On a Tree – Urban/Water Background

Jose Maria Acuña Morgado - Desarrollador Web

Leer más