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.
  
• 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...
  
• 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).
  
• 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.
     Nota: por motivos relativos al nuevo RGPD, finalmente he decidido migrar el formulario a JotForm.
  2. Además dispone de protección captcha y visualización previa.
  
• 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.
  
• CloudContactForms
  
  
  1. Presenta características similares a la plataforma Kontactr.
  

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

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos.

La familia y los amigos son como las estrellas: no siempre las ves, pero siempre están ahí.

¡¡¡FELIZ NAVIDAD!!!

Tarjeta de Navidad animada con jQuery

 

Haz clic en el lazo azul para abrir la tarjeta

 

 

 

 

 

Si lo deseas, puedes descargar y modificar el ejemplo para añadirlo a tu página web en la siguiente dirección: navidad-jquery
(Fuente original: www.lewebmonster.com)

 

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Extensiones de navegador para Social Media

Los medios de comunicación sociales (social media en inglés) son plataformas de comunicación en línea donde el contenido es creado por los propios usuarios mediante el uso de las tecnologías de la Web 2.0 y que facilitan la edición, la publicación y el intercambio de información.
Fuente: Wikipedia.

En el post anterior explicamos qué son y cómo aprovechar todo el potencial de las extensiones de un navegador web. Lectura completa en ¿qué son las extensiones de un navegador web, cómo se instalan y cuáles me interesan?

Ahora vamos a repasar aquellas extensiones útiles para la interacción y análisis de los medios sociales desde nuestro navegador.

Google Chrome

Buffer: permite publicar tus actualizaciones en Twitter, Facebook, LinkedIn y otros. Con cada actualización que publiques, tienes acceso a un análisis sobre clics, retuits, menciones, veces que se ha compartido, «Me gusta» y otros. También hace un seguimiento de resultados y analiza por ti todo lo que compartes. La versión principal de Buffer es gratis.

SocialBro: para gestionar y analizar tu comunidad en Twitter. Es un dashboard en forma de CRM que te permitirá la elaboración de informes de analíticas, gestión de listas, seguimiento de follows/unfollows...

Facebook Notifications: se conecta a tu cuenta de Facebook y te muestra lo que está pasando con tus amigos, incluyendo Likes y comentarios sobre tus posts, invitaciones a eventos, mensajes en grupos, solicitudes de amistad, etcétera.

HootSuite: publica actualizaciones, monitoriza mensajes y analiza resultados en múltiples redes sociales, como Twitter y Facebook. Con HootSuite podrás programar mensajes en Twitter, Facebook, Linkedin, Foursquare, Wordpress.com y muchas más. Monitoriza fácilmente búsquedas y resultados de tu campaña, con informes, sin cambiar de aplicación. Conoce también a tu audiencia según su influencia y hábitos de publicación.

Evernote Web: guarda todas tus notas, investigaciones y proyectos en un solo lugar para acceder a ellas desde todos los ordenadores y teléfonos que utilices. Crea listas de tareas y actividades pendientes para que nunca te olvides de nada. Captura páginas web interesantes, adjunta imágenes, archivos de audio, PDF y más.

Youtube: la comunidad de vídeos online más popular del mundo hace posible que millones de usuarios descubran, vean y compartan vídeos originales. YouTube permite que los usuarios suban y compartan clips de vídeo desde la página web y a través de Internet desde otros sitios web, dispositivos móviles, blogs y mensajes de correo electrónico.

Diigo Web: nos permite guardar nuestras páginas web favoritas. Además podemos crear categorías, etiquetas, resaltar partes de texto que nos interesan o guardar un párrafo que nos llame la atención entre otras muchas cosas.

Feedly: combina el atractivo visual de una revista con la eficiencia y la comodidad de un lector de RSS. El resultado es una poderosa herramienta que permite organizar, leer y compartir la información que se encuentra dispersa por la red. Te permite guardar un artículo cuando te gusta y poder compartirlo fácilmente en Twitter, LinkedIn, Evernote o Buffer.

Search Instagram: es un acceso directo a un servicio de búsquedas en Instagram. Podemos realizar cualquier tipo de búsqueda (tag, palabra clave, usuario, etc) para obtener como resultado las imágenes publicadas en tiempo real.

Pin Search: usa el motor de búsqueda de Google para poder ofrecer más información sobre la imagen que estamos viendo, además de permitirnos encontrar las cosas más fácilmente dentro de Pinterest. Si queremos averiguar de dónde salió una foto, es la herramienta ideal.

SeoQuake: extensión seo que nos proporciona información de la web (pageRank, edad del dominio, índice de Alexa), diagnóstico onpage (metaetiquetado, headings, keyword density, presencia de sitemap), comparativa entre dominios...

Stats Checker for Google Analytics™: permite acceder a las estadísticas de la cuenta de Google Analityics actualizadas cada 5 segundos.

FlexClip: una potente extensión que puede convertir contenido en línea como artículos y noticias en videos personalizados con un solo clic. Utiliza tecnología de inteligencia artificial para extraer rápidamente el contenido y generar videos, lo cual es 10 veces más rápido que los métodos de producción tradicionales. Además, FlexClip también ofrece funciones avanzadas de edición de video, lo que te permite crear fácilmente videos de calidad profesional.

Mozilla Firefox

Algunas de las extensiones más importantes de Google Chrome también las encontramos en Firefox, además de otras de máximo interés:

• Facebook Notifications:
• HootSuite:
• Evernote Web Clipper:
• Youtube Video Center:
• Diigo Toolbar - Annotate, Screenshot, Bookmark:
• Feedly:
• Search Instagram:
• SeoQuake:
• Shorten URL (Bit.ly):
• Google+ Share:
• Shareaholic | share with Google, Facebook and more:
• Reddit Enhancement Suite:
• Twitter Address Bar Search:
• Delicious Bookmarks:
• Amazon "Add to Wish List" Button:

Tal vez te interese conocer como se crean y publican las extensiones en la Chrome Web Store:

Como crear extensiones para tu navegador Google Chrome

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

¿qué son las extensiones de un navegador web, cómo se instalan y cuáles me interesan?

Acerca de las extensiones: son aplicaciones o pequeños programas que una vez instalados en el propio navegador facilitan la experiencia de usuario. En definitiva, son funciones adicionales que puedes añadir fácilmente a los navegadores web.


Me voy a centrar en Google Chrome y Mozilla Firefox por ser los web browsers más populares de la red y que más utilizo en mi trabajo diario.

Google Chrome

Descubre extensiones muy interesantes en la sección de extensiones de Chrome Web Store: https://chrome.google.com/webstore/category/extensions. Una vez que hayas encontrado una extensión que te guste, instálala simplemente haciendo clic en el botón

Gratis

correspondiente.

Podemos administrar las extensiones instaladas de dos formas diferentes:

• en el icono situado en la parte derecha de la barra de navegación y cuyo tooltip es 'Personaliza y controla Google Chrome' selecciona las opciones: Herramientas → Extensiones
• introduce en la barra de direcciones: chrome://extensions/ y pulsa la tecla Enter

Teniendo en cuenta que Google Chrome cuenta con más de 12.000 extensiones, voy a exponer algunas de las que resultan más interesantes:

Checker Plus for Gmail™: es posiblemente la mejor extensión para revisar tu correo Gmail, pues te notifica de los correos recibidos al instante, puedes leerlos y administrarlos directamente desde la extensión y no es necesario abrir Gmail.

Download Master: te permite descargar todos los elementos de un sitio web, ya sean imágenes, enlaces, documentos PDF, vídeos u otro tipo de contenido. Además existe la opción de seleccionar el tipo de archivo que deseamos bajar.

Select To Get Maps: puedes resaltar una dirección de la página web para obtener indicaciones y enlaces de mapas de forma instantánea.

Print Selection: nos facilita enormemente la impresión de cualquier página web, pudiendo seleccionar la zona que deseamos imprimir.

BugMeNot Lite: proporciona nombres de usuario y contraseñas para que los usuarios puedan entrar en una página sin registrarse obligatoriamente, es decir, para que puedan entrar libremente.

dotEPUB: a partir del contenido de una página web nos permite generar contenido para nuestro Kindle o para cualquier otro lector de libros electrónicos que soporte formato EPUB. Genera un archivo con extensión EPUB (formato libre) para ser usado no solo con un Kindle, sino con otros dispositivos como Nook, Sony Reader o Papyre entre otros.

HTTPS Everywhere: nos permite navegar de forma segura usando el protocolo HTTPS cuando sea posible.

Simple QR Code Generator: crea un código QR a partir de la dirección que tenga cargada el navegador, también es posible añadir alguna nota de texto extra.

Guardar en Google Drive: guarda el contenido web o la captura de pantalla directamente en Google Drive.

Extensión Google Chrome to Phone: te permite enviar enlaces y otro tipo de información de Chrome a tu dispositivo Android.


Nota de interés
El día 7 de noviembre Google hizo público en su blog del proyecto Chromium que su objetivo prioritario es evitar o reducir al máximo la posibilidad de infectar Windows con extensiones maliciosas. La compañía ha decidido controlar las extensiones que se podrán instalar en su navegador para el sistema operativo de Microsoft, anunciando que a partir de enero todas las extensiones tendrán que provenir obligatoriamente de su Chrome Web Store.

Mozilla Firefox

Este navegador utiliza complementos.
Hay varios tipos de complementos que personalizan Firefox de diferentes maneras:

• las extensiones añaden nuevas funciones o modifican alguna funcionalidad ya existente.
• los temas completos modifican la apariencia completa de Firefox, entre los que normalmente se incluyen iconos, colores, diálogos y otros estilos visuales.
• los temas son temas ligeros que utilizan imágenes de fondo para personalizar tus barras de herramientas.
• los buscadores añaden más opciones a la lista desplegable del cuadro de búsqueda. Estos buscadores te permiten buscar rápidamente cualquier página web.
• los diccionarios y los paquetes de idiomas permiten utilizar idiomas adicionales.
• los plugins ayudan a visualizar o entender los diferentes contenidos multimedia, como Adobe Flash o Apple Quicktime.

Normalmente, los complementos se pueden instalar simplemente haciendo clic en el botón

Agregar a Firefox

correspondiente.

Los complementos se pueden administrar, desactivar y desinstalar desde el administrador de complementos:

• desde la barra de navegación selecciona las opciones Herramientas → Complementos o pulsa las teclas Ctr+Mayús.+A

Numerosas extensiones disponibles en Google Chrome también lo están en Mozilla Firefox.

Tal vez te interese conocer como se crean y publican las extensiones en la Chrome Web Store:

Como crear extensiones para tu navegador Google Chrome

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Librerías javascript de gran utilidad para tu desarrollo web

JavaScript es un lenguaje de programación que a lo largo de los últimos años ha ido ganando popularidad y con la incursión de HTML5 ha dotado de mayor dinamismo e interactividad a la web, haciendo posible una navegación más agradable para el usuario.


Todos los navegadores llevan integrados sus propios motores JavaScript con objeto de aprovechar al máximo sus características y ofrecer al usuario un mayor rendimiento en aplicaciones web.

Algunas de las librerías más conocidas y que nos pueden ayudar en el desarrollo de nuestros proyectos web son:

• jQuery: es la librería más utilizada por su fácil manejo en el tratamiento de los objetos del DOM ya que nos permite abstraernos completamente. Muy aconsejable para la integración de efectos y animaciones personalizadas.
  jQuery es software libre y de código abierto permitiendo su uso en proyectos libres y privativos. Además es compatible con los navegadores más comunes del mercado como Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+
  Recomiendo el siguiente libro gratuito en español sobre Fundamentos de jQuery: http://librojquery.com/

• Mootools: este framework está enfocado a la orientación de objetos como sus siglas indican (My object oriented tools).
  Cuenta con un componente avanzado de efectos y con transiciones optimizadas y utilizadas por multitud de desarrolladores Flash.
  Es de código abierto y compatible y probado en Safari 3+, Internet Explorer 6+, Mozilla Firefox 2+, Opera 9+, Google Chrome 4+

• Prototype: es un framework escrito en JavaScript para el desarrollo sencillo y dinámico de aplicaciones web. Su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails.

• Yahoo! UI Library: bibliotecas utilizadas para la construcción de aplicaciones enriquecidas RIA (rich Internet applications) o aplicaciones web que tienen la mayoría de las características de las aplicaciones de escritorio tradicionales.
  Liberadas bajo licencia BSD por parte de la compañía Yahoo.

• Modernizr: esta librería proporciona la misma experiencia de usurio a todos los visitantes del sitio web independientemente de su navegador.
  Modernizr no añade ninguna funcionalidad al navegador. En cambio, sólo averigua si la funcionalidad que estás intentando implementar responde en dicho navegador. Esto nos permite experimentar con las nuevas características de HTML5 y CSS3 sin preocuparnos por restar experiencia de usuario o que la página no se renderice adecuadamente.

• Dojo: es un framework que contiene APIs y widgets para facilitar el desarrollo de aplicaciones Web que utilicen tecnología AJAX.
  Es de código abierto y se puede descargar de forma gratuita en su página oficial. Cuenta con el patrocinio de IBM, Google, AOL y Nexaweb.

Si buscamos librerías que atiendan a propósitos específicos:

• Validación de formularios: wForms, Validanguage, LiveValidation, qForms

• Visualización y efectos de imagenes: JS charts (gráficos de barras, circulares y de líneas simples), Gráfico (10 tipos de gráficos, de barras, de area, de línea y barras horizontales...), Canvas 3D JS Library (objetos 3D), CanvasXpress (gráficos tridimensionales), Raphaël (gráficos vectoriales con SVG y VML), ImageFX (efectos sobre imágenes con CANVAS), Reflection.js (efectos de reflexión), PaintbrushJS (efectos sobre imágenes similares a los que podemos encontrar en aplicaciones como Instagram o picplz)

• Manejo de cadenas y funciones matemáticas: Date.js (funciones complejas de fechas), Sylvester (vectores y arrays en varias dimensiones), XRegEx (expresiones regulares), JavaScript Url Library (manipulación de direcciones o url).

• Uso de cualquier fuente en un sitio web: typeface.js, Cufón

Como punto final, os reto a que resolváis el siguiente puzzle realizado con JQuery Puzzle:

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Es hora de cambiar el diseño de mi blog: usos y plantillas en Blogger

“ Somos muchos los que iniciamos esta ardua tarea de crear un blog y escribir.
En mi caso, lo que comenzó como un entretenimiento, ha empezado a tomar forma y llegados a este punto considero esencial una transformación en el diseño para potenciar la imagen de marca. ”

Para aquellos cuyo uso no trasciende más allá de lo personal, como es mi caso, o el presupuesto no permite un diseño web exclusivo, Blogger nos ofrece la posibilidad de utilizar alguna de las numerosas plantillas que podemos encontrar en la red. Doy por sentado que las que proporciona Blogger por defecto, no cumplen nuestras expectativas.

Sitios de plantillas gratis para Blogger:

• BTemplates: dispone de una galería con más de 3000 plantillas. Se puede navegar por las plantillas de acuerdo a su temática o por las propiedades del diseño. También te permite votar y comentar cada plantilla por su diseño y ver cuales son las más descargadas, las más vistas y las más votadas. Es uno de los mejores sitios. Recomendado 100%.
• Premium Blogger Templates: excelentes temas ordenados en categorías desde estilo revista hasta galerías para blogs de vídeos.
• DeluxeTemplates: permite buscar por categorías y cuenta con diseños de 2 o 3 columnas. También proporciona plantillas para WordPress.
• Soratemplates: Blogspot Templates premium de alta calidad disponibles en diseños de 1, 2 o 3 columnas.
• Best Theme: también incluye plantillas diseñadas en HTML5 y para WordPress.
• Cool Blog Templates: otro sitio con plantillas muy elegantes y de excelente diseño para cualquier temática de tu blog.
• Blog and Web: hay diseños con 1, 2 o 3 columnas, estilo revista, adaptadas de WordPress y de varias temáticas.
• Bloggerthemes: ofrecen temas de calidad, widgets, herramientas y servicios de personalización.
• New Blogger Themes: plantillas con diseños en 1, 2 o tres columnas.
• Blogtemplate4u: ofrece plantillas con diseño de 3 columnas.

Una vez seleccionada la plantilla ideal para mi blog, ¿cómo la subo?

Antes de nada, es más que recomendable hacer una copia de seguridad de tu antigua plantilla en caso de que quieras volver a usarla.

Realizar una copia de seguridad:

1. Selecciona la opción Plantilla del panel principal de Blogger.
2. Pulsa el botón situado en la parte superior derecha
   
   "Crear/Restablecer copia de seguridad"
   
   
3. A continuación haz click sobre el botón
   
   "Descargar plantilla completa"
   
   
4. La aplicación descargará un fichero con extensión XML para guardar en tu pc y que podrás recuperar en un futuro.

Subir la plantilla seleccionada:

1. Descarga tu Plantilla XML para Blogger. La plantilla está contenida en un archivo comprimido (con extensión ZIP)
2. Entra en tu panel de Blogger y pulsa en la entrada Plantilla
3. En la parte superior derecha de la pantalla, pulsa el botón
   
   "Crear/Restablecer copia de seguridad"
   
   
4. Haz click sobre el botón "Seleccionar archivo". Busca la ubicación de tu plantilla y selecciónala. Después pulsa el botón "Descargar"
5. Por último pulsa el botón
   
   "Subir"
   
   para hacer efectivo el cambio de plantilla.

Ya hemos realizado todos los pasos necesarios para disfrutar del nuevo diseño, pero no son suficientes.

En mi caso, aparecieron los widgets desordenados, el tamaño de las imágenes no era el adecuado, los textos estaban en inglés, las opciones de la toolbar eran ejemplos inservibles y un largo etcétera.

Para realizar un "ajuste fino" no vamos a tener más remedio que editar el código de la plantilla en formato HTML. Si cuentas con un perfil técnico en desarrollo web, no vas a tener ningún problema.

Para ello, volvemos a la opción Plantilla y pulsamos el botón

"Editar HTML".

Y con ésto ya estamos listos para modificar la plantilla a nuestro antojo!!

Jose Maria Acuña Morgado - Desarrollador Web

Leer más