Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

27 de enero de 2014

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("http://jmacuna73.blogspot.com/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 'http://jmacuna73.blogspot.com/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:
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.



22 de enero de 2014

FeedBurner: como añadir entradas de un blog a tu web, sin plugins y en una línea de código.


FeedBurner es un proveedor de gestión de fuentes web propiedad de Google. Proporciona herramientas de gestión de fuentes web RSS a bloggers, podcasters, y otros publicadores de contenido basado en tecnología web.


A la velocidad con la que avanza la nueva era digital, hoy día, todo el mundo puede crear un blog o página web sin conocimientos avanzados de programación. Basta con utilizar uno de los numerosos CMS (Sistema de Gestión de Contenidos) en su versión gratuita o de pago de acceso en la red.
Todos los CMS ofrecen la posibilidad de instalar componentes extra (plugins, addons, widgets, etc), proporcionando al visitante del sitio web funcionalidades añadidas.

Si contamos con un blog y un sito web, es frecuente incorporar las publicaciones del blog en una de las páginas del sitio, por ejemplo en la sección 'últimas noticias'. Para tal propósito, podemos hacer uso de estos plugins.

En este post, utilizaremos el servicio FeedBurner para convertir el Feed (Fuente o Canal web) de cualquier blog en un fragmento de código HTML para integrar en tu página web.

Si tenemos una cuenta en Google, accederemos con los datos de la cuenta desde la dirección http://feedburner.google.com/

  • Puedes cambiar el idioma de la página al español en la parte superior derecha, haciendo clic en el enlace Languages.
  • Volvemos a la sección Mis feeds e introducimos la dirección de nuestro feed o blog como ilustra la siguiente imagen:



    Voy a hacerle un guiño a Bitelia, blog que sigo con asiduidad, por poner al alcance de todos información interesante acerca de software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo lo que necesitas para disfrutar de la tecnología.
    Escribimos http://feeds.hipertextual.com/bitelia en la caja de texto y pulsamos el botón Siguiente.
  • Aparece una pantalla en la que pondremos título al feed y una dirección que lo identifique (BlogBitelia). A continuación pulsamos el botón Siguiente.

  • Se nos muestra la confirmación de que el feed se ha creado correctamente:



    Hacemos clic en el botón Siguiente hasta llegar a la última pantalla:

  • Volvemos a la sección Mis feeds y accedemos al feed de Bitelia que acabamos de crear.
    Pulsamos en la pestaña Publicize(Publicita tu Feed) y hacemos clic en el servicio BuzzBoost(Publica tu blog como HTML).
    Prestemos especial atención a este apartado donde parametrizaremos la forma en que vamos a mostrar los artículos del blog: número de post a mostrar, título del feed, favicon, número de palabras por artículo, formato en texto plano o html, etc.
    Configuramos todos los parámetros de visualización del contenido y pulsamos el botón Activar.

  • Por último, copiamos el código generado para integrar en nuestra página web:

    <script src="https://feeds.feedburner.com/BlogBitelia?format=sigpro" type="text/javascript"></script>

    y vemos el resultado final:

Últimas noticias


15 de enero de 2014

Crea tu propio formulario de contacto para el blog o página web


Vamos a diseñar un formulario de contacto de manera sencilla y sin conocimientos previos de programación, tan sólo usaremos un servicio externo y gratuito de creación y personalización de formularios.


Son numerosas las opciones disponibles para insertar un formulario en nuestro blog. Algunas de las más interesantes son:

  • Google Drive Formularios

    1. Un formulario es un documento de Drive y por tanto tiene su propio menú y su barra de botones. Se puede guardar con un nombre, duplicar, descargar y compartir.
    2. En la plantilla de formulario puedes añadir todos los elementos o campos que quieras. También puedes organizar el formulario añadiendo encabezados y dividiéndolo en varias páginas.
    3. Google también nos permite añadir un formulario a partir de una hoja de cálculo de Google Docs
    4. Información detallada: Cómo crear un formulario de Google.
    Google Drive Formularios
  • JotForm

    1. Debemos darnos de alta en su página web. En su versión gratuita podemos crear formularios de forma ilimitada, la restricción de espacio es de 100 megas y 100 envíos mensuales.
    2. Presenta un panel de personalización en castellano muy completo: cuenta con más de 50 plantillas diferentes, permite personalizar fuentes, colores, fondos, tamaño del formulario, etc.
    3. Podemos introducir campos de tipo cuadro de texto, áreas de texto, desplegables, botones de radio, casillas de verificación, campos para realizar pagos, podemos subir ficheros, imágenes, captcha.
    4. También tenemos la posibilidad de añadir al formulario vídeos de YouTube, Image Slider, SoundCloud...
    JotForm
  • EmailMeForm

    1. Para su uso, tenemos que registrarnos. La versión gratuita te permite crear un número ilimitado de formularios y ofrece hasta un máximo de 100 megas y 100 envíos al mes.
    2. Permite la subida de ficheros adjuntos de correo electrónico.
    3. Implementa la gestión de permisos de usuarios y protección por contraseña, así como código captcha anti-spam.
    4. Cuenta con versión adaptada para dispositivos móviles (Responsive Design).
    EmailMeForm
  • Foxyform

    1. Es el que utilizo para este blog por razones de peso:
      "no necesito registrarme, ofrece los campos suficientes para integrar en mi formulario y permite de forma básica configurar el color de fondo, color de fuente, fuente y tamaño de la fuente. Y todo en menos de un minuto".
      Podéis visualizarlo en este link.
    2. Además dispone de protección captcha y visualización previa.
    Foxyform
  • Kontactr

    1. Es necesario crear una cuenta en su plataforma.
    2. Dispone de protección Captcha.
    3. Permite personalizar el color de fondo del formulario y de las cajas de texto.
    4. Presenta el inconveniente de que los textos descriptivos de los campos están en inglés y no se pueden modificar.
    Kontactr
  • CloudContactForms

    1. Presenta características similares a la plataforma Kontactr.
    CloudContactForms



8 de enero de 2014

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