¿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

¿quieres conocerme un poco más?

José María Acuña Morgado

WEB DEVELOPER & ETHICAL HACKER - MADRID

info@tecnoblog.guru

PRESENTACIÓN

Tras terminar mi formación de estudios superiores en la Universidad Autónoma de Madrid, me especialicé en la programación en tecnología web.

Desde entonces trabajo como analista-programador en la empresa Baratz, Servicios de Teledocumentación.
He colaborado en el blog de la Comunidad Baratz con los artículos:

• La necesidad de adaptar tu sitio web a dispositivos móviles
• Lenguajes de programación y sus influencias (edición 2014)
• El mopac21 - la versión móvil de absysNET
• Comunidad Baratz en la barra de herramientas de tu navegador

También formo parte del equipo de nuevas tecnologías de la empresa Finanser Asesores y participo en el blog de asesoramiento jurídico y tecnologías Fpyme

Soy un apasionado de Internet y las nuevas tecnologías (Tic), Diseño Web, Desarrollo Web, Social Media, Seo, Sem, nuevas herramientas online que van apareciendo en el mercado.
Me interesan especialmente los estándares web, usabilidad y accesibilidad, desarrollo para dispositivos móviles, diseño web adaptativo, web dedicada y exclusiva para móviles.

El blog ha sido finalista en los #PremiosBlogs2017 (primera edición), categoría Sector Digital y Tendencias organizados por Infoempleo (uno de los portales de empleo de referencia en España) e IMF Business School (institución educativa española de enseñanza superior de Másteres Profesionales y Postgrados Universitarios).





Tienes más información en el siguiente artículo:

#PremiosBlogs2017 - Reconocimiento a la actividad que realizan los blogueros

Otro tema que me inquieta y motiva especialmente es la ciberseguridad.

Algunos logros conseguidos (con recompensas de más de $5000):

• formo parte del Salón de la Fama de Google:
  
  - Google Vulnerability Reward Program
  - Google Vulnerability Reward Program (II)
  - Google Vulnerability Reward Program (III)
  
  
  
• también formo parte del Salón de la Fama de Mozilla:
  
  - Mozilla Security Bug Bounty Program Hall of Fame
  • 3rd Quarter 2019
  • 3rd Quarter 2017 (twice)
  • 1st Quarter 2017
  
  
  
• errores de seguridad reportados y corregidos por Mozilla Firefox y Google Chrome con CVE (Common Vulnerabilities and Exposures) asignado:
  
  - Security vulnerabilities fixed in Firefox 56
  - Security vulnerabilities fixed in Firefox 55
  - Security vulnerabilities fixed in Firefox ESR 52.3
  - Security vulnerabilities fixed in Thunderbird 52.3
  - Security vulnerabilities fixed in Firefox 53
  - Security vulnerabilities fixed in Chrome 60.0.3112.78
  
  
• error de seguridad con recompensa pero sin CVE:
  
  - Firefox allows you to insert confirm/alert/prompt dialog in any domain with the back button
  

Aqui te dejo un enlace al blog de Pinngle (aplicación de mensajería instantánea desarrollada por Zigma Telecom) dónde contesto algunas preguntas sobre seguridad y privacidad en la red:

José María Acuña Morgado de España hablando sobre la Seguridad en Internet

En idioma inglés:

José María Acuña Morgado from Spain Talking about Internet Security

Viajar es otra de mis grandes aficiones, he tenido la suerte de conocer lugares tan dispares como Egipto(El Cairo, Sharm el Sheik), Estambul, Brasil(Río de Janeiro, São Paulo, Cataratas de Iguaçu), Méjico(Península de Yucatán, Cancún), New York (Manhattan, Bronx, Queens, Brooklyn), Isla Mauricio, Lisboa, Roma, Praga, París, Atenas, Londres, Dublín y los acantilados de Moher en la Bahía de Galway, Ámsterdam, Viena, Brujas, Islas Canarias(Lanzarote, Tenerife, Gran Canaria, La Palma, Fuerteventura), Islas Baleares(Mallorca, Menorca). Y antes de que me preguntéis nada, también os diré que adoro el interior de la península.

Ah, y soy padre de una criatura preciosa :))

¿POR QUÉ ESTE BLOG?

- Porque me gusta mi trabajo y me encanta hablar de ello.
- Porque creo que los contenidos que encontrarás en el blog podrán ser de tu ayuda.
- Trabajo para terceros. No puedo hacer pruebas arriesgadas en sus proyectos y tampoco hablar de ellos. Este blog me permite hacer todas las pruebas oportunas sin rendir cuentas a nadie y pudiéndolas compartir.



Una de mis frases preferidas:

"lo difícil se consigue, lo imposible se intenta".

También puedes encontrarme en:

Twitter: @jmacuna73


Linkedin: perfil profesional

¿QUIERES APORTAR VALOR?

- Visita la siguiente sección: Colaboradores.


Si tienes alguna duda o quieres hacer una sugerencia para mejorar el contenido del blog, puedes hacerlo enviando un email a la dirección

info@tecnoblog.guru

Leer más

La web móvil. Aspectos técnicos

Ya nos quedó suficientemente claro por qué tenemos que invertir nuestro tiempo en desarrollo web para móviles.
Toda la información en el post 'la necesidad de adaptar tu web site a dispositivos móviles'



El siguiente paso es determinar lo que queremos, ¿web móvil o aplicación móvil?

Tenemos que partir de la base de que el diseño web es universal o compatible con cualquier dispositivo, mientras que una app tiene que aportar un valor añadido, lo que va a suponer una mayor inversión en recursos para la adaptación a la plataforma específica (Iphone, Android, Windows Phone, etc).

1- La primera opción es la de adaptar nuestro sitio web a dispositivos móviles.

Éstos son algunos de los aspectos técnicos básicos a considerar:

• si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.
  
  Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.
  
  Ejemplo: @media only screen and (max-width: 620px) {...}.
  
  
• si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.
  
  El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.
  
  
• en el caso de URL para móviles independientes, la recomendación es la siguiente:
  
  
  1. para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.
     
     Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/>
  2. y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.
     
     Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>

Extracto de las recomendaciones para Developers de Google: Google Developers

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

• los vídeos no se reproducen porque no usamos tecnología html5 estándar.
• redireccionamientos defectuosos.
• error 404 (Page Not Found) sólo para smartphones.
• baja velocidad de carga de la página.
• no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
• llamadas a enlaces externos que se abren en otras ventanas.
• ausencia de un apartado de contacto o método de retroalimentación.
• no proporcionar un enlace al sitio web completo.

2- Si nos decantamos por la aplicación para móviles, tenemos que contar con conocimientos de los lenguajes de programación necesarios para su desarrollo, ¿o tal vez no?

Existen en el mercado diferentes herramientas para crear apps móviles para las distintas plataformas existentes sin conocimientos previos de programación.

Vamos a poder utilizar asistentes de edición para personalizar el diseño de la interfaz y configurar las funciones de aplicaciones básicas, siendo el propio asistente quién se ocupe de compilar nuestro proyecto en una aplicación nativa para la plataforma elegida y su posterior publicación en la tienda de aplicaciones.

• Creapp: ofrece un buen catálogo de plantillas prediseñadas para ayudar a los iniciados en este interesante campo a crear nuestra primera aplicación.
  Permite integrar en nuestro proyecto, sistemas de pedidos online, pasarela de pago para tiendas virtuales y otro tipo de servicios de gran utilidad para medianas y pequeñas empresas.
  
  
• Apps Builder: la diferencia de este servicio con respecto al resto de asistentes es que su editor puede capturar los contenidos de nuestra página web para utilizarlo como base con la que desarrollar aplicaciones para los diferentes sistemas operativos móviles.
  Además ofrece la posibilidad de configurar paso a paso y sin tocar una sola línea de código las características de tu aplicación añadiendo módulos como: Noticias, Foto, Vídeo, Podcasting, Tienda, Canal RSS, Facebook, Twitter, Sitio web, Radio, PDF, Texto, Código, Muro de chat, Contactos, Mapas, Mensaje de texto, Llamada y Correo.
  
  
• Mobincube App Generador: quizá sea uno de los generadores de aplicaciones móviles multiplataforma más completos dado el grado de personalización que permite.
  Resulta bastante intuitiva y práctica y ofrece la posibilidad de exportar nuestro proyecto a las principales plataformas móviles como iOS, Android, HTML5, BlackBerry o Windows Phone.
  
  
• BlackBerry App Generator: nos permite crear aplicaciones para las diferentes versiones del sistema operativo BlackBerry sin tener conocimiento alguno de programación.

Fuente: Cómo crear aplicaciones móviles sin saber programar. Think Big

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

La necesidad de adaptar tu web site a dispositivos móviles

España es líder en tasa de penetración de Smartphones de los países EU5 (Alemania, España, Francia, Italia y Reino Unido). Estudio realizado por ComScore en abril de 2013.
El año 2012 cerró con una tasa de penetración del 63% dónde el 89% de los usuarios afirman usar estos dispositivos para conectarse a Internet a diario.

En cuanto a tablets ocupamos la octava posición en el ranking mundial con una tasa de penetración del 24%. El crecimiento de estos dispositivos ha sido histórico y nunca antes visto en nuestro país.

En términos de tráfico web procedente de estos dispositivos la tendencia también es creciente. En el año 2012 se duplicó por cuarto año consecutivo respecto al año anterior y se espera que en 2013 se mantenga dicho crecimiento.
Fuente: Comunidad IEBS, Innovation & Entrepreneurship Business School

• ¿son éstas, razones de peso en la adaptación de contenidos para la web móvil?
  
  Evidentemente sí, en el año 2013 ya habrá más usuarios navegando desde móviles que desde PC.
  
  
• ¿cuáles son los problemas con los que nos vamos a encontrar?
  
  Las características de este tipo de dispositivos dificultan la experiencia de navegación y de usuario. Cuentan con una serie de limitaciones que no tienen los ordenadores de escritorio:
  
  
  1. las pantallas son pequeñas y su resolución escasa
  2. no están optimizados para la entrada de datos
  3. existe una gran diversidad de dispositivos con diferentes capacidades: algunos terminales no soportan determinados formatos de vídeo o lenguaje de script
  4. la velocidad de carga de datos es más lenta
  5. disponen de un menor ancho de banda en sus conexiones
  6. escasos recursos de memoria de los dispositivos
  7. etcétera
  
  
• Ante un reto de tal magnitud, ¿cuáles son mis opciones de desarrollo?
  
  Existen tres técnicas de desarrollo que se utilizan normalmente en la web para dirigirse a los usuarios multidispositivo y permitir la personalización de contenido y optimización en la experiencia de usuario:
  
  
1. Responsive Web Design o diseño web adaptativo
   
   El diseño web adaptativo o adaptable es una técnica de diseño y desarrollo web que consigue adaptar el sitio web al entorno del usuario, lo que hace posible tener un único diseño para móviles, tabletas y PC.
   Esta técnica te permite optimizar la experiencia de tu página en diferentes tamaños de pantalla sin crear varios sitios web.
   
1. Dynamis Serving o publicación dinámica de diferente contenido HTML en la misma URL
   
   Cuando un cliente visita tu sitio web, el servidor web puede detectar el tipo de dispositivo en el que se encuentra y presentar una página personalizada (provees un documento HTML y CSS distintos) en la misma URL.
   Puede ser muy útil para ocultar o mostrar ciertos elementos que, según el contexto, no tienen sentido en móvil o en la versión de escritorio.
   
   
2. Web dedicada y exclusiva para móviles
   
   Consiste en crear un sitio diferente para el tráfico de móviles, independiente del sitio original para ordenadores.
   La ventaja fundamental es que la carga y navegación son más rápidos al adaptar más fácilmente el contenido a los usuarios de móviles.
   
   

Construyendo sitios web móviles amigables

¿Qué solución es mejor?

Google Developers: Creación de sitios web optimizados para móviles

Jose Maria Acuña Morgado - Desarrollador Web

Leer más

Herramientas web que te sacarán de más de un apuro

La red ofrece cada vez un mayor número de herramientas online cuyo uso nos facilita sobremanera el día a día.



Que tire la primera piedra quién no se haya visto en una situación de emergencia y haya tenido que recurrir a una de estas aplicaciones en línea de gran utilidad.

Algunas de las herramientas que uso con frecuencia:

• Convierte los archivos con extensión docx a doc
  
  Es posible que te hayan enviado por correo un documento de word adjunto con extensión .docx (formato de Office 2007) y al tener instalado una versión anterior (Office 2000, Office XP, Office 2003 o incluso OpenOffice) no has podido abrirlo.
  
  La solución es sencilla, basta con instalar el paquete de compatibilidad de Microsoft Office para formatos de archivos de Word, Excel y PowerPoint 2007.
  Pero si te urge leer el fichero sin recurrir a la instalación, recomiendo acceder al convesor online:
  
  Able2Extract
  
  
• Instala una impresora virtual generando pdf desde cualquier aplicación con PDF Creator
  
  Si has realizado todos los pasos necesarios para hacer una reserva online de avión o de hotel y llegados al último paso en el que quieres imprimir el localizador te das cuenta de que no tienes tinta en la impresora, no te eches las manos a la cabeza.
  
  Puedes instalar el software libre y gratuíto PDF Creator que genera archivos pdf desde cualquier aplicación que soporte impresión.
  
  PDF Creator
  
  
• Transforma cualquier url en un archivo pdf respetando el contenido original con HTML2PDF
  
  Si lo que queremos es crear un documento pdf a partir de una página web cualquiera HTML2PDF es tu herramienta online.
  
  Su manejo es tan sencillo como incluir la url del sitio web que nos interese o incluso su código html y marcar la opción "Convert" para obtener una previsualización del resultado final y un enlace de descarga para almecenar en nuestro equipo el documento final.
  
  HTML2PDF
  
  
• Convierte tu imagen al formato ICO. También puedes crear un favicon para tu web.
  
  Muy útil para los desarrolladores que no tienen el perfil de diseñador gráfico y por tanto no disponen de un programa de edición gráfica que resuelva este problema.
  Podemos encontrar este conversor en:
  
  Online Convert
  
  
• Reduce hasta un 70% el peso de una imagen png preservando buena parte de su calidad original con el compresor TinyPNG
  
  No olvidemos que el formato de imagen png es el único formato ampliamente soportado que puede almacenar imágenes parcialmente transparentes.
  
  Interesante herramienta para reducir el tamaño de imágenes de un website con el objetivo de lograr un menor consumo de ancho de banda, una carga más rápida y en definitiva una mejor experiencia de usuario.
  
  Shrink PNG files
  
  
• Potente editor online de html, javascript y css: JSFiddle
  
  Es una herramienta 100% web para practicar en tu navegador.
  Te ofrece un ambiente de varias ventanas, en las que puedes escribir por separado html, javascript y css y en otra ventana puedes ver el resultado de tus pruebas.
  
  Una de las ventajas añadidas, además de su fácil uso, es la incorporación de las librerías javascript más populares del mercado: Mootols, JQuery, Prototype, Yui, Dojo, Processing, ExtJS, etc.
  
  JSFIDDLE
  
  
• Interesante herramienta con la que tener una aproximación de cómo nos ven nuestros usuarios desde todo tipo de dispositivos: Screenfly
  
  Nos permite visualizar un sitio web en resoluciones de navegadores de escritorio, tablets, smartphones y hasta los navegadores presentes en algunos televisores o smart tv.
  
  Simplemente con introducir la URL de nuestro site o blog, esta herramienta simula de forma automática la visualización que un usuario tiene en múltiples resoluciones y dispositivos dando una idea exacta de la experiencia que estamos ofreciendo a nuestros usuarios.
  
  quirktools
  
  
• Si estáis diseñando una web o realizando cambios en vuestro sitio y una de las prioridades es cambiar su tipografía, podéis usar typewonder.
  
  Se trata de una herramienta que permite visualizar cómo quedaría cualquier página web si usamos algún tipo de letra de las disponibles en Google Fonts.
  
  Solo tenemos que informar la url y seleccionar la tipografía deseada, typewonder se encargará de mostrar el resultado sin necesidad de haber tocado una sola linea de código.
  
  TypeWonder
  
  
• Interesante utilidad web que nos permite encontrar el tono exacto de cualquier color que busquemos proporcionándonos el código hexadecimal correspondiente: 0to255
  
  Construido por diseñadores y para diseñadores, se trata de una herramienta minimalista, útil, sencilla e intiutiva.
  
  Elegimos un color del panel de colores ofrecido y de forma automática se incluyen una amplia colección de tonalidades que van desde el más claro hasta el más oscuro.
  
  0to255
  
  
• Herramienta online gratuíta para todo desarrollador interesado en validar su código html: HTML_CodeSniffer
  
  Los estándares que se utilizan para evaluar el código son WCAG 2.0 nivel AAA, WCAG 2.0 nivel AA y WCAG 2.0 nivel A.
  
  Esta utilidad cuenta además con una herramienta que nos permite pegar directamente el código html para mostrarnos posibles errores, advertencias y avisos de nuestro código.
  
  Las normas y sus reglas están alojadas en el repositorio GitHub, por lo que, una vez que una nueva norma o regla se agrega, el bookmarklet se actualiza de forma automática.
  
  HTML_CodeSniffer
  
  
• Conversor de divisas
  
  Por último, no quería excluir de la lista, un conversor de divisas para aquellos a los que nos apasiona visitar países más allá de las fronteras de la Unión Europea.
  
  La información que proporciona el sitio web se actualiza cada minuto, mostrándonos su valor real en cada momento.
  
  XE

Jose Maria Acuña Morgado - Desarrollador Web

Leer más