Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

miércoles, 31 de agosto de 2011

Accesibilidad Web para diseñadores

Infografía sobre accesibilidad Web



Bajo una traducción libre, resumo:

Versión texto de la Infografía sobre accesibilidad Web


Planificar de antemano los encabezados

Asegúrese de que todo el contenido y el diseño se ajusta a una estructura lógica título.
Asegurarse que el contenido y el diseño se ajusta a una estructura lógica

Considerar el orden de lectura

El orden de lectura y el orden visual deben ser iguales

Proporcionar un buen contraste

Otorgar un especial cuidado al uso de tonos claros (gris, naranja y amarillo). Controlar los niveles de contraste con un corrector de contraste de color

Siempre que sea posible utilizar texto verdadero

El texto verdadero no sólo se carga más rápido sino que, además, es más fácil de traducir. Para el estilo visual: usar CSS.

Controlar el uso de mayúsculas

Considerar que el uso de textos en mayúsculas puede ser difíciles de leer y que la información tal vez no se lea correctamente en los lectores de pantalla.

Usar adecuadamente el tamaño de las fuentes

El tamaño final de la fuente puede variar en función de la fuente seleccionada. Pero, por lo general, nada debiera estar por debajo de los 10 puntos.

Diseñar con longitudes de líneas adecuadas

No utilizar líneas ni demasiado largas ni demasiado cortas,

Asegurar que los enlaces sean reconocibles

Diferenciar los enlaces del resto del cuerpo de la página con subrayado, por ejemplo; algo más que sólo el color.

Identificar visualmente el foco de los enalces para usuarios de teclado

Utilizar la estándard línea punteada u otro diseño distinto de la diferencia de color.

Utilizar un enlace para “avanzar al contenido principal”

Un enlace para saltar la navegación debe estar presente en la parte superior de la página para aquellos usuarios que navegan con teclado.

No confiar sólo en el color

Debido a los usuarios a menudo no pueden distinguir o puede anular colores de la página, el color no debe ser la única manera de transmitir información.

Diseñar formularios con elementos de control accesibles

Garantizar que los controles de formulario tienen etiquetas descriptivas e instrucciones.

Visto en WebAIM
Vía Seraccesible
Share:

martes, 30 de agosto de 2011

Cómo esta hecho este sitio?

Cómo esta hecho este sitio?

Under the site explorar las tecnologías, los CMS y frameworks, los scripts y el lenguaje usado del lado del servidor de cualquier sitio Web que querramos investigar.

El resultado de una de mis pruebas:


Así, tras innumerable cantidad de consultas, las tecnologías más populares son:
  • HTML5
  • UTF-8 Unicode charset
  • Apache HTTP Server
  • Google Analytics
  • jQuery
  • MooTools
  • TYPO3

Sitio Web | Under the site
Share:

viernes, 26 de agosto de 2011

PicPick - todo en uno para el tratamiento de imágenes

PicPick es una aplicación de escritorio orientada al uso y tratamiento de imágenes.

PicPick - todo en uno para el tratamiento de imágenes

Su increíble particularidad (más allá que es gratis) es que reúne en sí varias características que estamos acostumbrados a utilizar desde distintas aplicaciones. Este es un programa todo en uno (aka all-in-one). Por ello, ofrece

  • Captura de pantalla
  • Editor de imágenes
  • Muestreo y paleta de colores
  • Regla en pantalla (para medir pixels)
  • Magnificador de pantalla
  • Transportador en pantalla (sí, para medir ángulos)

una app freeware para el tratamiento de imágenes

Puede ejecutarse en cualquier versión de Windows (inclusive Win 7) y tiene soporte multi-lenguaje. Todas las funciones son soportadas para un entorno dual screen.
Completamente portable; la aplicación no escribe el registry o carpeta alguna del Sistema. Puede copiarse en cualquier carpeta de algún dispositivo USB

Sitio Web | PicPick
Licencia | Freeware (sólo si es para uso personal)
Share:

jueves, 25 de agosto de 2011

Efectos especiales con AnyMaking

AnyMaking

AnyMaking es una aplicación online que te permite en forma gratuita y sin siquiera registración agregar efectos especiales a tus imágenes.

Más allá del uso de algunos filtros conocidos, la aplicación permite además agregar marcos y recortar imágenes; redondear bordes, rotar y agregar sombras.


Efectos especiales con AnyMaking

Resulta interesante tener esta URL presente; sobre todo cuando lo que en definitiva—a veces se quiere—es una simple operación que no demande la carga de un soft de escritorio.

Sitio Web | AnyMaking
Share:

Como manjear grandes archivos con HJSplit

HJSplit es una aplicación de escritorio multiplataforma que permite manejar grandes archivos: cortando los mismos y volviéndolos a recombinar.

Esto es útil, verdaderamente, para para el envío de infromación a través de correo electrónico o bien, para cortar un archivo que deba ser almacenado en varios CDs o DVDs, por ejemplo.

Como manjear grandes archivos con HJSplit
Tanto la versión para Windows como para Linux permite manejar archivo de hasta 100 Gb, comprobaciones de suma del tipo MD5, comparción de archivos y ejecutarlo sin instalación, en la modalidad portable.
Entre las plataformas que puede ejecutarse, están incluídas:
  • Windows
  • Linux 
  • MAC 
  • BSD 
  • Java 
  • PHP 
  • Amiga 
  • Windows 3.x 
  • DOS OS/2 
Sitios Web | HJSplit
Licencia | Freeware
Share:

miércoles, 24 de agosto de 2011

Como los profesionales se ven entre sí

Si alguna vez trabajaste con desarrolladores, diseñadores, jefes de proyecto o aseguramiento de la calidad; las siguientes relaciones no te llamarán la atención. Es más, las entenderás perfectamente.
Como los profesionales se ven entre sí
Visto en Xerxy
Share:

Imgr | una herramienta para diseñadores

Imgr es una interesante aplicación online que nos hace las cosas bien fáciles para quienes trabajamos con imágenes en la Web.

Esta aplicación requiere que subamos la imagen a su sitio Web y la misma se encarga de contar y mostrar visualmente y en formato hexadecimal los colores utilizados.

Es posible establecer la separaciones con el valor delta informado; auque con 16, por defecto, los resultados resultan prácticos casi en la mayoría de los casos.

Imgr | una herramienta para diseñadores

Esta herramienta nos permite descargar en formato PNG la paleta de colores.

Sitio Web | Imgr
Share:

sábado, 20 de agosto de 2011

Spin.js - un indicador de actividad sin imágenes

Spin.js - un indicador de actividad sin imágenes

Spin.js es una pieza de Javascript que permite emular un ícono animado mediante VML para denotar actividad (carga de imágenes, páginas, etc.)

Sus principales fortalezas, son:
  • No incluye imágenes ni CSS externos
  • No hay dependencias
  • Altamente configurable
  • Renderiza con independencia de la resolución de trabajo
  • Trabaja adecuadamente en la mayoría de los navegadores. Sí, inlcusive en IE6
  • Es más pequeño—aún—que un GIF animado

Ajuste que se pueden llevar a cabo en Spin.js

Spin.js utiliza CSS3 para generar la animación y VML para la retro-compatibilidad con antiguas versiones de Internet Explorer. Si el script detecta compatibilidad con el navegador en uso utiliza @keyframe para animar el spin.

Este script no requiere el uso de jQuery; no obstante, el autor documenta una especial consideración si la implementación así lo requiere.

Los navegadores soportados son:

  • Chrome 
  • Safari 4+ 
  • Firefox 3.5+ 
  • IE 6,7,8,9+ 
  • Opera 10.6+ 
  • Mobile Safari (iOS 4) 
Sitio Web | Spin.js Licencia de Uso | MIT
Share:

jueves, 18 de agosto de 2011

Google agrega info metereológica a Maps

Google agrega info metereológica a Map

Desde hoy está disponible en una layer adicional de Google Maps las temperaturas correspondientes al área consultada.
Video | 01:06 min
Sitio Web | Google Maps
Share:

La psicología de Twitter

Recientemente, los chicos de White Fire SEO, colgaron una encuesta en su sitio Web; la siguente infografía toma los resultados de la misma. A continuación la transcripción.
La psicología de Twitter
  • 39% de los usuarios encuestados dijeron que preferirían seguir una cuenta personal que comparta sus intereses 
  • 61% dijo que preferiría seguir un cuentas que manejases temas diversos
  • 80% de las personas con más de 500 seguidores, dijo que preferiría centrarse en un tema 

¿Por qué dejar de seguir a una persona?

Los encuestados dijeron que es porque ... (La suma es mayor > 100 ya que las respuestas múltiples eran posibles)
  • 66% tweetea demasiado 
  • 58% parecen tweets automáticos 
  • 47% algunos enlaces lo comparte varias veces 
  • 38% porque no usa Twitter 
  • 34% los tweets son acerca de él mismo todo el tiempo

Los bots que envían tweets en forma automática parece que no son el camino adecuado.
Ya es oficial, nadie usa Follow Friday.

Está claro que la mejor manera de conseguir a alguien que te siga es a través de retweets, así que lo que hace que la gente retweetee parece ser que es
  • 92% - Contenido de interés 
  • 84% - Humor 
  • 66% - Contenido personal 
  • 21% - Cosas que le pasa a las celebridades 
  • 32% - Incentivos ofrecidos (tangibles o virtuales) 
  • 26% - "Por favor, RT!" 

Visto en White Fire SEO
Share:

miércoles, 17 de agosto de 2011

Como identificar fuentes con Fount

Como identificar fuentes con Fount

Fount es un bookmarklet que nos pone las cosas bien fáciles a la hora de indentificar fuentes sobre una página Web. Desde el sitio Web (ver enlace abajo) sólo hay que arrastrar el ícono de Fount como un marcador hacia la barra del menú del navegador.

Luego, una vez ahí; en cualquier página Web, sólo resta hacer click sobre el texto donde queremos identifcar el font.

Por resultado, obtenemos la siguiente información:
  • nombre de la fuente
  • tamaño
  • peso
  • estilo
Trabaja apropiadamente en Safari, Chrome, Firefox e IE8+
Sitio Web | Fount
Vía | Makeuseof
Share:

martes, 16 de agosto de 2011

Como montar tu propio Yahoo! Preguntas

Como montar tu propio Yahoo! Preguntas

Coordino es una aplicación—open-source—basada en preguntas y respuestas. Creada en PHP y MySQL permite montar tu propio Yahoo! Preguntas.

La aplicación posee una cantidad y calidad de herramientas que permiten en forma sencilla compartir conocimientos con tu comunidad.

El contenido y los usarios pueden ser fácilmente administrados desde el panel de control y la inclusión de etiquetas en los temas permite manejar con facilidad las categorías de las preguntas.

Sitio Web | Coordino
Demo | Tour  Coordino
Vía | Delicious
Share:

lunes, 15 de agosto de 2011

Hipster Ipsum: una alternativa a Lorem Ipsum

Hipster Ipsumes una aplicación Web de uso muy práctico para cuando se necesitan párrafos para completar nuestro diseño Web, una alternativa a Lorem Ipsum
Hipster Ipsum: una alternativa a Lorem Ipsum

Puede solicitarse la cantidad de párrafos a generar, siendo cualquier de ellos algo más o menos así:
Echo park food truck cliche, williamsburg mixtape retro freegan PBR high life Austin mustache wes anderson. Vegan vinyl stumptown, viral letterpress echo park quinoa craft beer irony cliche master cleanse organic. Ethical quinoa brunch lo-fi organic raw denim. Four loko sustainable craft beer, you probably haven't heard of them bicycle rights raw denim trust fund echo park viral retro. Seitan ethical mcsweeney's twee blog, yr homo cardigan helvetica brunch +1 stumptown art party lo-fi. Tumblr tofu craft beer food truck, high life VHS portland.
Sitio Web | Hipster Ipsum
Share:

sábado, 13 de agosto de 2011

Formas en CSS



CSS3 Shapes es un respositorio de formas llevadas a cabo mediante CSS3

Formas en CSS

Las CLASSes que este ejercicio propone son las siguientes:
  • square
  • circle
  • oval
  • up-triangle
  • down-triangle
  • left-triangle
  • right-triangle
  • trapezium
  • diamond
  • rectangle
  • parallelogram
  • twelve-point-star
  • six-point-star
  • octagon
  • speech-bubble
  • egg
  • eq-triangle
  • pacman
  • biohazard
Para el uso no es requerido licencia o atribución.

Sitio Web | CSS3 Shapes
Share:

martes, 9 de agosto de 2011

Estoy trabajando muy cerca del monitor?

Estoy trabajando muy cerca del monitor?
El agotamiento visual, en especial atención a quienes trabajamos muchas horas frente a una PC, básicamente se encuadra en lo siguientes tópicos; aunque no necesariamente en el siguiente orden:
  • disminución del parpadeo frente al monitor 
  • lentes recetados fuera de vigencia 
  • distancia al monitor 
Al respecto de esto último en Finest Glasses existe un prueba personal (cualquiera puede llevarla a cabo) que nos permite llevar a cabo una rápida comprobación.

Se trata de Pupil Distance Measure Online. La prueba es sencilla y requiere, de manera inicial subir una foto con anteojos o bien una captura mediante webcam.

En cualquiera de ambos casos la imagen debe ser de nuestro rostro, de frente y con los lentes colocados.

En mis pruebas realicé una captura de imagen mediante webcam.

Luego de actualizar la imagen; aparecen sobre la misma 2 spinners que hay que deslizarlos, cada uno, sobre cada pupila.

El segundo paso consiste en mover 2 sliders hacia los bordes laterales de nuestros anteojos.

Por tercer y último paso, hay que quitarse los lentes y medir sobre los mismos esa distancia anteriormente acotada.

En mi caso, ese valor es de 120 mm y en resguardo de mi optometría la aplicación Web me informa que la distancia que debo mantener entre mi pupila y el monitor es de 64 mm
Estás trabajando muy cerca del monitor?
Share:

domingo, 7 de agosto de 2011

NounProject

NounProject es una iniciativa que nace en Los Angeles, USA y permite mantener en forma actualizada y de fácil acceso al público en general una buena y excelente cantidad de íconos que permiten transmitir ideas, deportes, localizaciones, etc. más allá del lenguaje oral utilizado.

El uso de la imagen, el ícono, para transmitir información. El sitio cuenta con soporte de idioma, incluído el castellano.

NounProject

Las imágenes, en principio, están organizadas por temas y categorías:
  • animales
  • alimentos y bebidas
  • salud y bienestar
  • gente
  • seguridad y advertencias
  • ciencia y matemáticas
  • deporte y recreación
  • transportes
  • viajes y señalización
  • clima y naturaleza
La naturaleza de estas imágenes es gratuita y permanecerá gratuita (dominio público) y, además, es posible suscribirse por correo a las actualizaciones del sitio Web.

Las imágenes pueden descargarse en formato SVG dentro del ZIP correspondiente.

Sitio Web | NounProject
Share:

jueves, 4 de agosto de 2011

Quién está conectado a tu red inalámbrica?

Wireless Network Watcher  es una pequeña utilidad que nos permite conocer los equipos que están conectados a nuestra red inlámbrica (aka wireless)

Quién está conectado a tu red inalámbrica?

Por cada computador o dispositivo conectado a nuestra red, este recurso nos muestra:
  • dirección IP
  • dirección MAC
  • fabricante de la tarjeta de red
  • nombre del equipo

Requiere Windows 2000, Windows XP, Windows Server 2003/2008, Windows Vista, y Windows 7. Y sólo puede llevar a cabo los rastreos de la red a la cual el equipo está conectado.

La instalación cuenta con soporte de idioma, incluído el castellano.

Sitio Web | Wireless Network Watcher
Share:

miércoles, 3 de agosto de 2011

Como hacer un seguimiento del botón +1 de Google con Analytics

Ya cualquiera pueda insertar en su sitio Web o blog el botón +1 que permite que cualquier visitante del sitio vote—en aprobación—al respecto de la publicación.

Llevar a cabo un seguimiento—mediante Google Analytics—es muy sencillo y sólo deben seguirse estos pasos.

Hay que insertar el código en Javascript, preferentemente antes del cierre de la etiqueta body

<script type="text/javascript" 
  src="http://apis.google.com/js/plusone.js"></script>

Luego hay que definir la apariencia del botón, y esto se consigue mediante la herramienta de creación. Luego en la opciones avanzadas, hay que agregar un callbak plusone_vote es un buen comienzo.

Como hacer un seguimiento del botón +1 de Google con Analytics

De esta forma; el código obtenido es más o menos así:

<g:plusone size="tall" callback="plusone_vote"></g:plusone>

Por último, y debajo del códdigo provisto por Google sólo resta insertar el código Javascript que se encargará del seguimiento:

<script type="text/javascript">
  function plusone_vote( obj ) {
    _gaq.push(['_trackEvent','plusone',obj.state]);
  }
</script>

Vía | Yoast
Share:

No creo que Bing me ayude

No creo que Bing me ayude

Puede un sitio Web—que carece de un sitemap.xml—ayudarme cuando busco algo y no lo encuentro?

Yo creo que no.

Si un sitio Web no puede—mediante un estándard—mostrarme como es la arquitectura de sus URLs no puedo confiar, entonces que su buscador lo haga.

Yahoo! tampoco me muestra mediante este archivo esa estructura; pero aún así, luego de decirme que no tienen dicho archivo redirecciona hacia su Home ;-)

En cambio; Google sí lo ha adoptado, lo cual se hace evidente al consultar http://www.google.com/sitemap.xml en el navegador.

Sitemap 0.90 está sujeto a las condiciones de la licencia Attribution-ShareAlike Creative Commons License y es compatible con muchos servicios, incluidos Google, Yahoo! y Microsoft.
Fuente: sitemaps.org
Share:

Publicidad

Estadísticas