slide1

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.

slide2

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.

slide3

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.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

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

slide5

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.

2 de marzo de 2015

Emojis para tu web o dispositivo móvil

El término japonés Emoji significa pictograma dónde la "e" es dibujo o imagen y "moji" es letra, es decir, un dibujo para expresar algo y cuyo uso se extiende a mensajes electrónicos y sitios web.
Los emojis son utilizados principalmente en conversaciones de texto a través de teléfonos inteligentes.

Emojis y Unicode

Los emojis son caracteres como las letras y los números.
Apple y Google empujaron para que se estandarizaran en Unicode, entendido como un estándar internacional encargado de la representación de caracteres de escritura de la mayoría de idiomas en sistemas informáticos.

El proceso de estandarización de los emojis comenzó en 2007 y hasta la versión 6.0 de Unicode, de 2010, no estuvo lista.
Pero ya están dentro de Unicode y hay 772 emojis dentro de Unicode (perfectamente identificados en codificación y significado).

Si los emojis no se representan bien en un sistema operativo es porque no tienen, dentro de la fuente habitual que usa el sistema, dichos caracteres implementados.
Es como si alguien nos manda algo en Chino o Japonés. Nuestro ordenador entiende que es un carácter de Unicode, pero si no tenemos instaladas las fuentes en Chino o Japonés, no las veremos bien.

Fuente original: xatakandroid

Instrucciones de uso

Podemos utilizarlos de tres formas diferentes:

  • Apoyándonos en las fuentes de usuarios (tipografías) presentes en cada navegador y haciendo referencia a su entidad html.
    <style type="text/css">
    .emj-original{
     font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", Symbola, "lucida grande", tahoma, verdana, arial, sans-serif;
     font-size: 30px;
    }
    </style">
    <div class="emj-original">
     &#127873; &#127874; &#127875; &#127876; &#127877; &#127878; &#127879; &#127880; &#127881; &#127882;
    </div>
    

  • o copiando directamente el carácter correspondiente al emoji.
    <style type="text/css">
    .emj-original{
     font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", Symbola, "lucida grande", tahoma, verdana, arial, sans-serif;
     font-size: 30px;
    }
    </style">
    <div class="emj-original">
     🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊
    </div>
    

    En ambos casos el código html devuelto es:

    🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊

  • Usando una fuente externa para visualizar en mi página web utilizando la regla @font-face.
    <style type="text/css">
    @font-face{
     font-family: "Twitter Emoji";
     src: url("http://cdn.twittercounter.com/assets/fonts/EmojiSymbols-Regular.woff") format("woff");
    }
    .emj-face{
     font-family: "Twitter Emoji";
     font-size: 30px;
     color:#b11e1e;
    }
    </style">
    <div class="emj-face">
     &#127873; &#127874; &#127875; &#127876; &#127877; &#127878; &#127879; &#127880; &#127881; &#127882;
    </div>
    
    Ahora la página html renderiza los siguientes caracteres unicode:

    🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊

Soporte

Los emojis están disponibles para su uso en la mayoría de los dispositivos móviles de última generación como Android, Apple y Windows Phone.

Apple fué el primero que incorporó los caracteres unicode emoji (en 2011) con el lanzamiento de Mac OS X v10.7: es la octava versión de OS X, el sistema operativo de Apple para sus ordenadores de escritorio, portátiles y servidores.

Google añade soporte nativo emoji al teclado (en 2013) para los dispositivos con Android 4.4 y versiones posteriores.

Windows 8 y versiones superiores son compatibles con emoji a través de la familia de fuentes Microsoft Segoe UI. A partir de Windows 8.1, la fuente Segoe UI Emoji suministra pictografías a todo color.

Algunas distribuciones de Linux como Ubuntu, Debian, Fedora y OpenSUSE admiten caracteres emoji instalando fuentes adicionales.

En general, cualquier sistema operativo que permita añadir fuentes adicionales tendrá soporte emoji.

Fuente: wikipedia

Catálogo de Emojis

A continuación muestro la lista completa de emojis.
Puedes copiar directamente el emoji o utilizar la entidad html correspondiente posicionando el cursor encima de cada uno (aparecerá un tooltip con su entidad html)



🈚 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🈁 🈂 🉐 🉑 🌀 🌁 🌂 🌃 🌄 🌅 🌆 🌇 🌈 🌉 🌊 🌋 🌌 🌍 🌎 🌏 🌐 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌙 🌚 🌛 🌜 🌝 🌞 🌟 🌠 🌍 🌰 🌱 🌲 🌳 🌴 🌵 🌷 🌸 🌹 🌺 🌻 🌼 🌽 🌾 🌿 🍀 🍁 🍂 🍃 🍄 🍅 🍆 🍇 🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍔 🍕 🍖 🍗 🍘 🍙 🍚 🍛 🍜 🍝 🍞 🍟 🍠 🍡 🍢 🍣 🍤 🍥 🍦 🍧 🍨 🍩 🍪 🍫 🍬 🍭 🍮 🍯 🍰 🍱 🍲 🍳 🍴 🍵 🍶 🍷 🍸 🍹 🍺 🍻 🍼 🎀 🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊 🎋 🎌 🎍 🎎 🎏 🎐 🎑 🎒 🎓 🎠 🎡 🎢 🎣 🎤 🎥 🎦 🎧 🎨 🎩 🎪 🎫 🎬 🎭 🎮 🎯 🎰 🎱 🎲 🎳 🎴 🎵 🎶 🎷 🎸 🎹 🎺 🎻 🎼 🎽 🎾 🎿 🏀 🏁 🏂 🏃 🏄 🏆 🏇 🏈 🏉 🏊 🏠 🏡 🏢 🏣 🏤 🏥 🏦 🏧 🏨 🏩 🏪 🏫 🏬 🏭 🏮 🏯 🏰 🐀 🐁 🐂 🐃 🐄 🐅 🐆 🐇 🐈 🐉 🐊 🐋 🐌 🐍 🐎 🐏 🐐 🐑 🐒 🐓 🐔 🐕 🐖 🐗 🐘 🐙 🐚 🐛 🐜 🐝 🐞 🐟 🐠 🐡 🐢 🐣 🐤 🐥 🐦 🐧 🐨 🐩 🐪 🐫 🐬 🐭 🐮 🐯 🐰 🐱 🐲 🐳 🐴 🐵 🐶 🐷 🐸 🐹 🐺 🐻 🐼 🐽 🐾 👀 👂 👃 👄 👅 👆 👇 👈 👉 👊 👋 👌 👍 👎 👏 👐 👑 👒 👓 👔 👕 👖 👗 👘 👙 👚 👛 👜 👝 👞 👟 👠 👡 👢 👣 👤 👥 👦 👧 👨 👩 👪 👫 👬 👭 👮 👯 👰 👱 👲 👳 👴 👵 👶 👷 👸 👹 👺 👻 👼 👽 👾 👿 💀 💁 💂 💃 💄 💅 💆 💇 💈 💉 💊 💋 💌 💍 💎 💏 💐 💑 💒 💓 💔 💕 💖 💗 💘 💙 💚 💛 💜 💝 💞 💟 💠 💡 💢 💣 💤 💥 💦 💧 💨 💩 💪 💫 💬 💭 💮 💯 💰 💱 💲 💳 💴 💵 💶 💷 💸 💹 💺 💻 💼 💽 💾 💿 📀 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📖 📗 📘 📙 📚 📛 📜 📝 📞 📟 📠 📡 📢 📣 📤 📥 📦 📧 📨 📩 📪 📫 📬 📭 📮 📯 📰 📱 📲 📳 📴 📵 📶 📷 📹 📺 📻 📼 🔀 🔁 🔂 🔃 🔄 🔅 🔆 🔇 🔈  🔉 🔊 🔋 🔌 🔍 🔎 🔏 🔐 🔑 🔒 🔓 🔔 🔕 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔝 🔞 🔟 🔠 🔡 🔢 🔣 🔤 🔥 🔦 🔧 🔨 🔩 🔪 🔫 🔬 🔭 🔮 🔯 🔰 🔱 🔲 🔳 🔴 🔵 🔶 🔷 🔸 🔹 🔺 🔻 🔼 🔽 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧 🗻 🗼 🗽 🗾 🗿 😀 😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 😎 😏 😐 😑 😒 😓 😔 😕 😖 😗 😘 😙 😚 😛 😜 😝 😞 😟 😠 😡 😢 😣 😤 😥 😦 😧 😨 😩 😪 😫 😬 😭 😮 😯 😰 😱 😲 😳 😴 😵 😶 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇 🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 🚀 🚁 🚂 🚃 🚄 🚅 🚆 🚇 🚈 🚉 🚊 🚋 🚌 🚍 🚎 🚏 🚐 🚑 🚒 🚓 🚔 🚕 🚖 🚗 🚘 🚙 🚚 🚛 🚜 🚝 🚞 🚟 🚠 🚡 🚢 🚣 🚤 🚥 🚦 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚮 🚯 🚰 🚱 🚲 🚳 🚴 🚵 🚶 🚷 🚸 🚹 🚺 🚻 🚼 🚽 🚾 🚿 🛀 🛁 🛂 🛃 🛄 🛅                                                                                                                         



26 de febrero de 2015

Firefox Hello: el servicio de videollamadas ya está disponible

Mozilla ha desarrollado una nueva función con la colaboración de Telefónica (basado en Movistar) para mantener comunicaciones de voz y vídeo con otras personas directamente en el navegador, sin instalar plugins ni programas adicionales y sin necesidad de descargar extensiones.


El proyecto se sustenta en la integración de tecnología WebRTC o lo que es lo mismo, una API o conjunto de reglas que está siendo elaborada por la World Wide Web Consortium para permitir a las aplicaciones del navegador realizar llamadas de voz, chat de vídeo y uso compartido de archivos P2P sin plugins.
Los programadores pueden implementar esta API y utilizarla en otras aplicaciones. Más información: http://es.wikipedia.org/wiki/WebRTC

Como Hello está integrado en Firefox, tus conversaciones e informaciones se mantendrán privadas y seguras.

Lo único que necesitas es Firefox para iniciar nuevas conversaciones o administrar una lista de contactos. Si tienes la última versión de Firefox, ya tienes Hello.
No hace falta abrirse una cuenta, ni registrarse ni descargar nada.

Solo tienes que iniciar una conversación, enviar un enlace a un amigo y pedirle que haga clic. Éste ni siquiera necesita Firefox para unirse a la conversación. Lo único que necesita es un navegador compatible, y listo.
Los navegadores que soportan WebRTC a día de hoy son Firefox, Google Chrome y Opera.

Comienza por pulsar el icono de conversación situado en la parte superior derecha de tu navegador y haz clic en el botón Iniciar una conversación.



En la esquina inferior derecha aparecerá una ventana para que etiquetes la conversación.
La aplicación autogenera una url única por conversación que podrás copiar para enviar por correo electrónico a la persona con la que esperas comunicarte. También puedes pegar el enlace en otra aplicación de mensajería.



La persona que reciba el enlace, lo copiará en la barra de dirección de un navegador compatible y podrá unirse a la conversación pulsando el botón azul. Lo único que necesita es un micrófono y una web cam (opcional)



Cuando tu amigo acceda al enlace para iniciar la llamada, te aparecerá una notificación en tu navegador

Aunque no necesitas una cuenta de Firefox para utilizar Firefox Hello, si te creas una podrás agregar, administrar y llamar a tus contactos directamente con tan solo un clic de ratón. Para obtener más información, consulta el artículo Crea y administra tu lista de contactos en Firefox Hello.




Nota importante


El equipo de Mozilla ha decidido dejar de incluirlo a partir de la versión 50 de Firefox y las razones son suficientemente claras: no puede competir contra servicios como Skype, FaceTime o Hangouts. Toda la información en su página oficial Bugzilla




18 de febrero de 2015

Calendario con todos los post publicados en Blogger

Calendario Blogger
La mayoría de los gestores de contenido proporcionan herramientas precisas (widgets o plugins) para mostrar información acerca de los archivos publicados en el blog ordenados de forma cronológica. Si queremos dotar a nuestro blog de un diseño más atractivo, también podemos presentar un calendario de publicaciones.


Vamos a hacer ésto posible con tan sólo unas pocas líneas de código.

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widgets (por ejemplo Calendario)
  5. En la caja Contenido pega el siguiente código:

    <div id='calendar'><strong>Loading...</strong></div>
    <script>
    var conf = {
     bgcolor: '#1e4e7e', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     tooltip: true,      // false:title por defecto | true:tooltip con css3
     start:   1,         // 0:Domingo | 1:Lunes
     days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
     months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
     date:    "Ir al mes actual"
    }
    </script>
    <script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
    <script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
    
  6. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros de configuración:

  • bgcolor: color de fondo del calendario.
  • newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
  • tooltip: false para mostrar el tooltip por defecto o true para mostrarlo en forma de bocadillo.
  • start: 1 si queremos que el calendario empiece en Lunes o 0 si empieza en Domingo.
  • days: días de la semana. Nota: si ponemos la variable start a cero, el primer día de la semana en la variable days será el Domingo
  • months: meses del año.
  • date: texto que aparece cuando posicionamos el cursor encima de la fecha actual (parte inferior en color gris).
  • Tenemos que escribir la url de nuestro blog en el último script, dónde aparece https://www.tecnoblog.guru resaltado en negrita.

    Importante: si el calendario no se carga en tu página, lo más probable es que sea debido a la incompatibilidad del protocolo seguro como consecuencia de una redirección de tu blog a través de protocolo http (contenido mixto). En este caso, la solución es muy sencilla.
    Reemplaza la parte de la url https://www.tecnoblog.guru/feeds del script por https://www.blogger.com/feeds/TUIDDEBLOGGER, dónde TUIDEDEBLOGGER es el parámetro numérico que aparcen como blogID en tu blog.

    En mi caso: https://www.blogger.com/feeds/5415513870832441455/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar

    Y si aún así no funciona, no dudes en preguntarme a través del blog o de mi cuenta de correo info@tecnoblog.guru. Estaré encantado de ayudarte!!
Si ponemos la variable tooltip a true, tenemos que añadir la clase tooltip de la siguiente manera:

<style type="text/css">
.tooltip{
  position:absolute;
  display:none;
  border-radius:3px;
  background:#333;
  color:#fff;
  font-size:11px;
  font-family:Verdana,Geneva,sans-serif,Helvetica;
  padding:8px;
  white-space:pre-line
}
</style>


Instrucciones de uso:

  • Pulsa sobre las flechas ◀ y ▶ para moverte por los meses anterior/siguiente
  • Haz clic sobre el mes actual y aparecerá un desplegable con los doce meses del año
  • Haz clic sobre el año en curso y aparecerá un desplegable para seleccionar otro año.
    Deja pulsadas las flechas o para avanzar más rápido hasta el año deseado.
  • Si queremos volver a la situación inicial, haremos clic en la fecha actual que aparece en la parte inferior del calendario


Podéis ver el ejemplo funcionando a continuación.



Puedes descargarte el ejemplo para modificarlo o personalizarlo libremente en Calendario para Blogger.
Los ficheros que intervienen son:

Por último y a petición popular, os dejo el código html para insertar un calendario en cualquier blog (Blogger, Wordpress, Drupal, Joomla, etc) o Página Web:

<style type="text/css">
iframe#calendar html, #calendar body{
 overflow:hidden
}
iframe#calendar{
 position:absolute;
 border:0;
 width:240px;
 height:230px
}
</style>
<iframe id='calendar' src='about:blank' scrolling='no'></iframe>
<script>
var conf = {
    bgcolor: '#741826', //color del calendario
 start:   1, // 0:Domingo | 1:Lunes
 days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
 months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
 date:    "Ir al mes actual"
}
</script>
<script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar-iframe.js' type='text/javascript'></script>
Lo puedes visualizar en: Calendario web

Si quieres disponer del calendario en tu navegador Google Chrome, instala la extensión:

Calendario Anual en Google Chrome

Muchas gracias!!


11 de febrero de 2015

Que es la accesibilidad web: pautas, técnicas y herramientas

Una página o sitio web es accesible cuando está diseñado y codificado de forma que sus contenidos y servicios estén disponibles para cualquier persona, con independencia de su contexto de navegación. Ésto va a permitir que las personas con algún tipo de discapacidad, puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos.

Según el último informe mundial sobre la discapacidad de la Organización Mundial de la Salud, más de mil millones de personas viven en todo el mundo con alguna forma de discapacidad; de ellas, casi 200 millones experimentan dificultades considerables en su funcionamiento.

Entre los beneficiarios de la accesibilidad web se encuentran:

  • Usuarios que usan traductores a voz, braille... y usuarios en general que no disponen de tarjeta de sonido o usan navegadores en modo texto.
  • Usuarios con dificultad para distinguir colores, usuarios con sistemas monocromos.
  • Usuarios con dificultades oculares que tienen que aumentar el tamaño de letra de una página web.
  • Usuarios con epilepsia fotosensible.
  • Usuarios con navegadores desfasados o que han deshabilitado servicios de su navegador.
  • Usuarios con dificultades motrices que no son capaces de interactuar con objetos en movimiento.
  • Usuarios que no disponen de ratón o no lo pueden usar.
  • Usuarios con dificultades cognitivas
El Director y Creador de la World Wide Web, Tim Berners-Lee, dice que "El poder de la Web está en su universalidad. El acceso de todo el mundo con independencia de su discapacidad es un aspecto esencial."
Para alcanzar este objetivo se han ido proponiendo una serie de pautas que persiguen hacer más accesibles los contenidos Web.

El país pionero a la hora de legislar sobre el acceso a la información de las personas discapacitadas es Estados Unidos, y tras él han sido muchos los países que han incluido en sus leyes aspectos relativos a la accesibilidad en los sitios web públicos.

A nivel europeo, la Comisión Europea junto con el Consejo Europea está promoviendo el desarrollo de una Internet accesible para todos, con la Iniciativa eEuropa que pretende que las administraciones públicas de los estados miembros mejoren el nivel de accesibilidad en sus páginas y las organizaciones que reciban fondos públicos deberán hacer que sus sitios web sean accesibles.

La Iniciativa de Accesibilidad a la Web del W3C (WAI) fundada en 1997, recibe el apoyo de los principales actores de la industria y los gobiernos del mundo y se dedica a promover soluciones de accesibilidad en la web para personas con discapacidades.
Esta iniciativa trabaja en definitiva para el desarrollo del potencial de la web.

La WAI actúa principalmente sobre cinco áreas de trabajo:

  • Asegurar que las tecnologías web den soporte a la accesibilidad
  • Desarrollar pautas de accesibilidad
  • Crear herramientas de evaluación y corrección de la accesibilidad web
  • Desarrollar materiales para la educación y difusión
  • Coordinar proyectos de investigación y desarrollo
La accesibilidad web incluye los contenidos y aplicaciones, los navegadores y reproductores multimedia, las herramientas de autor y las tecnologías XML.
La WAI ha propuesto para cada una de estas necesidades unas pautas a seguir.

Niveles de accesibilidad

El WAI tiene, actualmente, tres niveles de accesibilidad.
Para que una página sea totalmente accesible debe cumplir, al menos el nivel doble AA y contar con una buena usabilidad.

  • Nivel A (Prioridad 1): el desarrollador tiene que satisfacer estos puntos de verificación, si no, algunos grupos de personas serán incapaces de acceder a la información de un sitio. WAI A
  • Nivel AA (Prioridad 2): el desarrollador debe satisfacer estos puntos, de lo contrario, alguien encontrará muchas dificultades para acceder a la información. WAI AA
  • Nivel AAA (Prioridad 3): el desarollador puede satisfacer estos puntos, de lo contrario, algunas personas hallarán dificultades para aceeder la la información. WAI AAA
Puntos de verificación Prioridad 1

En General:

  • Proporcionar un texto equivalente para todo elemento no textual (p. ej. A través de alt, longdesc o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (p. ej. GIFs animados), applets y objetos programados, ASCII art, marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (utilizados con o sin interacción), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos.
  • Asegurar que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores.
  • Identificar claramente los cambios en el idioma original del texto del documento y en cualquier texto equivalente (p. ej. leyendas).
  • Organizar el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
  • Asegurar que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico.
  • Hasta que las aplicaciones de usuario permitan controlarlo, evitar provocar parpadeo en la pantalla.
  • Utilizar el lenguaje apropiado más claro y simple para el contenido de un sitio.
Si se utilizan imágenes y mapas de imágenes:

  • Proporcionar vínculos de texto redundantes con cada zona activa de un mapa de imagen del servidor.
  • Proporcionar mapas de imágenes controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.
Si utiliza tablas:

  • En las tablas de datos, identificar los encabezamientos de fila y columna.
  • Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilizar marcadores para asociar las celdas de encabezamiento y las celdas de datos.
Si utiliza marcos (frames):

  • Titular cada marco para facilitar la identificación y navegación de los mismos.
Si utiliza applets y scripts:

  • Asegurarse de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos de programación. Si esto no es posible, proporcionar información equivalente en una página alternativa accesible.
Si utiliza multimedia:

  • Proporcionar una descripción autiditiva de la información importante de la banda visual de una presentación multimedia, hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual.
  • Para toda presentación multimedia tempodependiente (p. ej. una película o animación) sincronizar alternativas equivalentes (p. ej. subtítulos o descripciones de la banda visual) con la presentación.
Y si todo lo demás falla:

  • Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información equivalente (o funcional) y sea actualizada tan a menudo como la página (original) inaccesible.
Puntos de verificación Prioridad 2

En General:

  • Asegurarse de que las combinaciones de los colores de fondo y primer plano tengan el suficiente contraste para que sean percibidos por personas con deficiencias de percepción de color o por pantallas en blanco y negro.
  • Utilizar marcadores en vez de imágenes para transmitir la información cuando exista un marcador apropiado.
  • Crear documentos que estén validados por las gramáticas formales publicadas.
  • Utilizar hojas de estilo para controlar la maquetación y presentación.
  • Utilizar unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.
  • Utilizar elementos de encabezado para transmitir la estructura lógica y hacerlo de acuerdo con la especificación.
  • Marcar las listas y los puntos de las listas correctamente.
  • Marcar las citas. No utilizar el marcador de citas para efectos de formato tales como sangrías.
  • Asegurar que los contenidos dinámicos son accesibles o proporcionar una página o presentación alternativa.
  • Evitar el parpadeo del contenido (por ejemplo, cambio de presentación en periodos regulares, así como el encendido y apagado) hasta que las aplicaciones de usuario permitan controlarlo.
  • No crear páginas que se actualicen automáticamente de forma periódica hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones.
  • No utilizar marcadores para redirigir las páginas automáticamente hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático. En su lugar, configurar el servidor para que ejecute esta posibilidad.
  • No provocar apariciones repentinas de nuevas ventanas y no cambiar la ventana actual sin informar al usuario hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas.
  • Utilizar tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea, y usar las últimas versiones cuando sean soportadas.
  • Evitar características desaconsejadas por las tecnologías W3C.
  • Dividir los bloques largos de información en grupos más manejables cuando sea natural y apropiado.
  • Identificar claramente el objetivo de cada vínculo.
  • Proporcionar meta datos para añadir información semántica a las páginas y sitios.
  • Proporcionar información sobre la maquetación general de un sitio (p ej. mapa del sitio o tabla de contenidos).
  • Utilizar los mecanismos de navegación de forma coherente.
Si utiliza tablas:

  • No utilizar tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcionar una alternativa equivalente (la cual debe ser una versión alineada).
  • No utilizar marcadores estructurales para realizar un formateo visual si se utiliza una tabla para maquetar.
Si utiliza marcos (frames):

  • Describir el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco.
Si utiliza formularios:

  • Para todos los controles de formularios con etiquetas asociadas implícitamente, asegurar que la etiqueta está colocada adecuadamente, hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta.
  • Asociar explícitamente las etiquetas con sus controles.
Si utiliza applets y scripts:

  • Para los scripts y applets, asegurarse de que los manejadores de eventos sean entradas independientes del dispositivo.
  • Evitar los movimientos en las páginas hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos.
  • Hacer que los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas.
  • Asegurar que cualquier elemento que tiene su propia interfaz pueda manejarse independiente del dispositivo.
  • Para scripts, especificar manejadores de eventos lógicos mejor que manejadores de eventos dependientes de dispositivos.
Puntos de verificación Prioridad 3

En General:

  • Especificar la expansión de cada abreviatura y acrónimo en el documento cuando aparezca por primera vez.
  • Identificar el idioma principal de un documento.
  • Crear un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos.
  • Proporcionar atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario.
  • Incluir caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos, hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos.
  • Proporcionar la información de modo que los usuarios puedan recibir los documentos según sus preferencias (p. ej. idioma, tipo de contenido, etc.).
  • Proporcionar barras de navegación para destacar y dar acceso al mecanismo de navegación.
  • Agrupar los vínculos relacionados, identificar el grupo (para las aplicaciones de usuario) y proporcionar una manera de evitar el grupo hasta que las aplicaciones de usuario lo hagan.
  • Si proporciona una función de búsqueda, permitir diferentes tipos de búsqueda para diversos niveles de habilidad y preferencias.
  • Localizar la información destacada al principio de los encabezamientos, párrafos, listas, ec...
  • Proporcionar la información sobre las colecciones de documentos (por ejemplo, los documentos que comprendan múltiples páginas).
  • Proporcionar un medio para saltar sobre un ASCII art de varias líneas.
  • Complementar el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página.
  • Crear un estilo de presentación que sea coherente para todas las páginas.
Si se utilizan imágenes y mapas de imágenes:

  • Proporcionar vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente.
Si utiliza tablas:

  • Proporcionar resúmenes de las tablas
  • Proporcionar abreviaturas para las etiquetas de encabezamiento.
  • Proporcionar un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo, en columnas de palabras, hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos.
Si utiliza formularios:

  • Incluir caracteres por defecto en los cuadros de edición y áreas de texto hasta que las aplicaciones de usuario manejen correctamente los controles vacíos.
Herramientas de validación

Para evaluar la accesibilidad de un sitio web, se hace uso de las ayudas técnicas y las estrategias de acceso siguiendo un proceso manual.
Sin embargo, existe un gran número de herramientas automáticas de validación, genéricas (validadores de sintaxis del lenguaje de marcado o de las hojas de estilo) y especificas de accesibilidad.
Estas herramientas son de gran ayuda, tanto en el desarrollo como en el mantenimiento de una web, pero no garantizan al 100% la accesibilidad de un sitio.

Herramientas Genéricas Versión Online Versión Instalable Gratuíta Comentarios
Markup Validation Service v0.6.7 Servicios de validación HTML, también valida HTML, XHTML, XML, MathML según el tipo indicado en el documento.
CSS Validation Service 2.0 Servicios de validación de hojas de estilo (Cascading Style Sheet).
HTML Tidy Servicios de limpieza del código HTML, interface por línea de comandos o interface gráfica, todas la plataformas, proyecto "open source"

Versión Online, que te muestra el código HTML resultante por pantalla:
Tidy Online - http://cgi.w3.org/cgi-bin/tidy

Herramientas Específicas Versión Online Versión Instalable Gratuíta Comentarios
Cynthia Says de ICDRI y HiSoftware Validador de accesibilidad que permite seleccionar las pautas de accesibilidad, tanto el WCAG como la Seccion 508, validar contenidos dinámicos con un emulador, detecta errores en los enlaces, reconoce código javascript, objetos multimedia, etc. La versión en línea solo permite una página por minuto pero es gratuita.
TAW de la Fundación CTIC y el SIDAR El Test de Accesibilidad Web, es una herramienta web para el análisis e información del grado de accesibilidad que presentan otras web.
Se puede descargar una versión para ejecutarla en local.
WAVE de Temple University Institute on Disabilities y WebAIM Este es otra herramienta de validación, es muy útil para evaluar los puntos básicos de la accesibilidad de un sitio web, incluye las WCAG 1.0 y la Sección 508.
Existen cuatro modos de validación:
1. Validar un dirección web pública
2. Validar un fichero local (upload)
3. Instalar una barra de tareas en el navegador
4. Añadir WAVE a los "bookmarklet" del navegador
A-Prompt de la Univeridad de Toronto A-Prompt esta realizado por la Universidad de Toronto, es una herramienta para validar la accesibilidad de un sitio web y al mismo tiempo ayuda a autor a corregir los problemas o propone soluciones.
Solo trabaja con ficheros locales por lo que no es muy útil para páginas dinámicas.

Herramientas de Apoyo Comentarios
Color Laboratory Este programa permite seleccionar colores para ver el resultado final con un fondo u otro, y de este modo poder ver el contraste de las distintas combinaciones.
Color Filter En esta página se pueden realizar distintos filtros en función de tipo de ceguera de color que se quiera simular. Se pueden aplicar filtros a páginas web y a imágenes.
Vischeck Es un simulador de la ceguera de color. Existe una versión online y un plug-in para el Photoshop.
MAGpie de NCAM Esta herramienta permite a los desarrolladores añadir subtítulos para videos de QuickTime, Windows Media o SMIL, y añadir descripciones de audio para SMIL.
W3C Link Checker Validador del W3C online, detecta los enlaces rotos y puede recorrer los enlaces dentro de un sitio web hasta la profundidad especificada.
XENU Herramienta para comprobar si existe algun enlace roto, dirección de imagen o cualquier otro fichero. Se puede ejecutar en local y permite configurar la profundidad, el tipo de enlaces, y las zonas del sitio que no se deseen evaluar.

Complementos para navegadores Aplicable Comentarios
Complex Table Inspector Todos Un favelet (pequeño fragmento de código JavaScript que se almacena como "favorito" en el navegador) que permite visualizar la información sobre una tabla que suele estar oculta en los navegadores visuales: summary, headers, axis, scope y abbr.
Favelets For The Validator Todos Varios favelets del W3C que permiten validar el código HTML de la página que se está visualizando.
NCAM Accessibility QA Favelet Todos Un favelet que realiza varios análisis que permiten localizar problemas de accesibilidad en una página web.
Web Developer Todos Añade un menú y una barra de herramientas con numerosas opciones que ayudan a desarrollar páginas web. Además, este complemento se puede emplear para revisar la accesibilidad de un sitio web.
La extensión está disponible para Chrome, Firefox y Opera y se ejecutará en cualquier plataforma compatible con estos navegadores, incluyendo Windows y Linux.
Chrome Web Developer Tools Google Chrome Un clon del complemento Web Developer para Mozilla Firefox.
Firebug Lite Google Chrome Permite editar y corregir errores en el HTML, CSS y JavaScript en "vivo" en cualquier página web.
IE Tab Google Chrome Permite ver una página web dentro de Chrome a través del motor de Microsoft Internet Explorer.
DebugBar Microsoft Internet Explorer Contiene las siguientes utilidades: DOM Inspector (visualiza y permite modificar etiquetas y atributos de CSS), HTTP Inspector (visualiza las peticiones HTTP/S, las cookies y los parámetros pasados por GET y POST), Javascript Inspector y Javascript Console, HTML Validator y otras funciones. Es gratuito para uso personal.
Internet Explorer Developer Toolbar Microsoft Internet Explorer Proporciona un conjunto de herramientas para validar la sintaxis del HTML y el CSS de una página, explorar y modificar el DOM de una página, mostrar información sobre las imágenes de una página como sus dimensiones o su texto alternativo, visualizar y borrar las cookies de una página, etc.
Web Accessibility Toolbar Microsoft Internet Explorer Ayuda a inspeccionar las páginas web y comprobar si se cumplen los criterios de accesibilidad. Entre otras cosas, permite: identificar los componentes de una página web, facilita el uso de aplicaciones online, simula la "experiencia" de algunos tipos de usuarios (básicamente, usuarios con algún problema de visión) y proporciona enlaces a guías de referencia y otros recursos.
Fangs - the screen reader emulator Mozilla Firefox Crea una versión textual de una página web similar a cómo lee la página un lector de pantallas. Añade un menú contextual al navegador que abre una nueva ventana donde se puede ver la versión textual, la lista de encabezados y la lista de enlaces de la página.
HeadingsMap Mozilla Firefox Crea un índice o mapa de los encabezados de una página web. Además, este complemento permite navegar por la página web saltando de un encabezado a otro, tal como lo hacen los usuarios que utilizan un lector de pantallas.
Juicy Studio Accessibility Toolbar Mozilla Firefox Realiza tres funciones: permite examinar los roles y propiedades de las regiones activas de WAI-ARIA, permite examinar las tablas de datos y determina si el contraste de color es suficiente. Más información: Examining WAI-ARIA Live Regions.
Link Widgets Mozilla Firefox Facilita la navegación entre páginas que forman una secuencia al añadir una barra de botones para ir a la primera, anterior, siguiente y última página. Para ello emplea la etiqueta o lo adivina a partir del texto de los enlaces.
Textise Mozilla Firefox Crea una versión textual de una página web.
WCAG Contrast checker Mozilla Firefox Permite comprobar el grado de cumplimiento de los niveles de contraste, luminosidad y brillo en la combinación de colores de los contenidos textuales en base a los requerimientos de las WCAG 1 y WCAG 2.
X-Ray Mozilla Firefox Permite visualizar las etiquetas HTML de una página web sobre la misma página web, sin tener que ver el código fuente.


Extracto del curso Accesibilidad en Internet y del Curso Avanzado sobre Diseño de Sitios Web impartidos por la Fundación Instituto de Ciencias del Hombre en colaboración con el Ministerio de Industria, Turismo y Comercio.


6 de febrero de 2015

Librerías para Blogger alojadas en la CDN de Google

Una CDN (Content Delivery Network) o 'Red de Distribución de Contenidos' es un conjunto de servidores que redistribuyen localmente el contenido y guardan en caché los archivos permitiendo acelerar la carga de las páginas, mejorando los tiempos de respuesta y reduciendo el consumo de ancho de banda.

Vamos a poner como ejemplo un blog.

Todo el contenido del blog lo sirve el hosting dónde está alojado, haciendo uso de su propio ancho de banda.
Con el paso del tiempo tu blog irá creciendo en suscriptores y número de visitas.
Supongamos que publicas el post de tu vida que atrae centenares de miles de visitas y se te cae el servicio de hosting por exceso de peticiones o el acceso a tu página web es demasiado lento porque el ancho de banda se colapsa. Las consecuencias son evidentes: los usuarios acabarán no leyendo el artículo por lo que perderás clientes potenciales.

Entre otras cosas, una CDN evita esta situación:
si tu contenido (vídeos, imágenes, música, documentos, etc.) se replica en diferentes redes y países dirigiendo las solicitudes de los usuarios hasta la copia más cercana a su red, la probabilidad de que tu hosting se sature disminuye consiguiendo unos tiempos de respuesta más rápidos.


Imagen de Wikipedia: sistema tradicional de distribución de datos y CDN.

El espacio de almacenamiento que nos ofrece el servicio Blogger de Google es gratuito y está destinado exclusivamente para nuestro blog (entradas, texto, plantillas, comentarios, widgets y poco más), lo cual plantea ciertos inconvenientes.

Cuando publico un post, procuro dotarle de dinamismo añadiendo gráficos y vídeos explicativos. Blogger lo resuelve permitiendo subir imágenes en local, desde una url externa, desde su servicio Picasa, etc.
En el caso de los vídeos podemos publicarlos en Youtube y referenciarlos desde nuestra plantilla html.

Pero ¿qué ocurre si quiero utilizar ficheros de presentación css (hojas de estilo en cascada) o js (javascript) para implementar funcionalidades en mi web?

  • los alojamos en servicios externos: Google Drive, Dropbox ...
  • accedemos directamente a los que nos ofrecen las CDN de terceros
Blogger hace uso de sus CDN como podemos ver en las siguiente captura de pantalla de Firebug (haz clic en la imagen para ampliarla).



Google tiene su propia CDN con las librerías javascript de código libre y css más utilizadas por los desarrolladores web.
Ofrece un listado con el nombre de las librerías alojadas así como las versiones soportadas.

Para cargar una de sus librerías alojadas, copia y pega el fragmento HTML en tu página web. Por ejemplo, para cargar jQuery, insertamos el código <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>.

Recomienda cargar las librerías de la CDN a través del protocolo HTTPS, incluso si tu propio sitio web sólo utiliza HTTP.
Los archivos de la CDN se procesan con cabeceras CORS y Timing-Allow y permiten ser almacenados en caché durante un año.

Librerías disponibles:
(fecha de última actualización 2 de febrero de 2015)

Toda la información en https://developers.google.com/speed/libraries/devguide




Otras páginas que ofrecen librerías javascript y css en su Red de Distribución de Contenido son:


También podemos encontrar numerosas CDN para Wordpress.
Algunos plugins son gratuítos:


El siguiente vídeo (en inglés) nos habla de MaxCDN, una CDN de pago para integrar con WordPress, Drupal, Joomla, Magento, PrestaShop, Social Engine, X-Cart, IP.Board, vBulletin, OpenCart, PyroCMS, MODX, Custom.




2 de febrero de 2015

Resalta el código fuente de tu web con Google Code Prettify

¿cuántas veces hemos recurrido a internet para consultar lenguajes de programación tan conocidos como html e insertar fragmentos de código en los blogs, foros o cualquier página web?
La manera más fácil y rápida de entender el código fuente es resaltar su sintáxis con diferentes colores.


En la red podemos encontrar multitud de servicios online para resaltar bloques de código fuente. Algunos de los más conocidos son:

Otras páginas nos ofrecen la posibilidad de descargar archivos (ficheros javascript y css) para instalar en nuestra web:

De todas las opciones disponibles he decidido usar Google Code Prettify por dos razones de peso:

  • No necesito instalar ninguna librería
  • Es muy fácil de usar: para integrarlo en mi blog, voy a escribir muy pocas líneas de código (a continuación os mostraré varios ejemplos).
Las características fundamentales de este resaltador de códigos son:

  • No bloquea la carga de la página mientras se ejecuta
  • Detecta automáticamente los bloques de código y el lenguaje de programación usado
  • Reconoce los lenguajes tipo C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Ruby, PHP, VB, y Awk
  • Es compatible con la mayoría de los navegadores web
La forma de proceder es la siguiente:

  • Escribimos la línea

    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=default" defer="defer"></script>

    dónde skin es la hoja de estilos que vamos a cargar.
    skin = default
    skin = sons-of-obsidian
    skin = sunburst
    skin = desert
    skin = doxy
  • A continuación escribimos la etiqueta <pre class="prettyprint">
  • Introducimos el código que vamos a colorear dentro del tag pre.
    Importante: hay que reemplazar todos los < por &lt; y los > por &gt; para que el navegador entienda que es texto plano.
  • Por último, cerramos la etiqueta </pre>
Ejemplo con 'default':



Ejemplo con 'sons-of-obsidian':



Ejemplo con 'sunburst':



Ejemplo con 'desert':



Ejemplo con 'doxy':



Además podemos numerar las líneas de código para cada uno de los estilos mencionados.
Para ello, tenemos que añadir la clase linemus al tag pre de la siguiente manera:
<pre class="prettyprint linenums">
Ejemplo con 'default' y 'linemus':



Documentación oficial:

https://github.com/google/code-prettify/blob/master/README.md
https://github.com/google/code-prettify
https://rawgit.com/google/code-prettify/master/examples/quine.html



29 de enero de 2015

Compartir desde Firefox ahora es más fácil

La última versión de Firefox permite compartir contenido de forma muy sencilla en los diferentes medios sociales. Por el momento soporta Facebook, Twitter, Google+, Gmail, LinkedIn, Tumblr, Delicious, Pocket, Mixi, Xing entre otras.
Si no usas Firefox puedes descargártelo gratis en https://www.mozilla.org/es-ES/firefox/new/

Comienza por pulsar el icono del avioncito de papel situado en la parte superior derecha de tu navegador para escoger tus redes sociales, marcadores favoritos en la nube, música, noticias personalizadas y mucho más.
Sin necesidad de programas ni descargas, sin complementos, esta nueva característica estará lista cuando pulses el icono desde cualquier sitio web que quieras compartir.



La primera vez, Firefox te llevará a la página de servicios disponibles para ir activando los que más nos interesen con sólo pulsar el botón Activar ahora



Una vez añadidos al navegador, pulsamos sobre uno de ellos para compartir el contenido de la página que estemos visualizando en ese momento.



Si queremos eliminar alguno de ellos, pulsamos sobre la opción Abrir menú situado en la parte superior derecha y a continuación hacemos clic en el icono Complementos



Nos situamos en Servicios y eliminamos o desactivamos pulsando el botón correspondiente.



Puedes comprobar todas las novedades que ha incorporado Firefox en su versión 35 Release en la siguiene dirección:
https://developer.mozilla.org/en-US/Firefox/Releases/35