Archivos en la categoría Diseño páginas web

Cientos de iconos gratis en IconFactory

Cientos de iconos gratis en IconFactory
Hace tiempo comenté una completa galería de iconos para descargar de forma gratuita: IconFinder. Si bien los iconos son estupendos y de gran calidad, a día de hoy siguen prácticamente con el mismo catálogo, además de que dichos iconos abundan en multitud de páginas web e incluso aplicaciones Freeware (basta con echar un vistazo al NotePad++, por ejemplo).

Recientemente encontré otra galería con gran cantidad de iconos gratuitos para su descarga: IconFactory. Aunque este portal existe desde hace muchos años (lo sé ahora que he buscado información al respecto), no lo conocí hasta hace unos días. Además de los iconos gratuitos, este portal, o mejor dicho, empresa, se dedica a la venta de iconos, el diseño personalizado de éstos para empresas, como Microsoft, Sony, etc, e incluso ofrecen diversas aplicaciones tanto gratuitas como comerciales.

Más info | http://www.iconfactory.com

Sin Comentarios

Guía de introducción a la Accesibilidad web en castellano

Guía de introducción a la Accesibilidad web en castellano

La accesibilidad web implica el acceso total a una página web sin importar las condiciones en las que ésta sea visitada, ya sean técnicas (hardware, software, conexión o internet) o humanas (idioma, cultura o capacidades físicas). Por otro lado, también podríamos definirla como la capacidad de acceso a una página web y a su contenido por cualquier persona independientemente de si sufre alguna discapacidad (física, intelectual o técnica) que le impida acceder a toda la información ofrecida en ésta. Las normativas que establecen la accesibilidad web son desarrolladas por el WAI (Web Accessibility Initiative), que forma parte del W3C (Consorcio de la World Wide Web), organismo encargado de la creación de estándares web.

Para lograr ese objetivo, el W3C, además de crear estándares web que permitieran un desarrollo universal de una página web, de forma que un usuario pueda ver la página tal y como se ha diseñado originalmente independientemente de la plataforma a través de la cuál se esté vistiando, creó un grupo encargado de desarrollar una serie de directrices o normas que abordasen el acceso a esa información, es decir, el WAI.

A día de hoy se ha convertido en un elemento imprescindible a la hora de desarrollar una página web. Multitud de páginas comerciales o personales cumplen con esas directrices (ya sea total o parcialmente) y la mayoría de las webs estatales y ministeriales están obligadas a su cumplimiento.

La accesibilidad web se divide en tres niveles, denominados prioridades (numeradas del 1 al 3, siendo la prioridad 3 la más alta), que establecen una serie de directrices en cuanto a diseño y programación web. En función de las prioridades se establecen los niveles de conformidad, que se conocen como A, AA y AAA .

Para lograr superar las prioridades y convertir nuestra web en una página accesible, disponemos de un completo catálogo de etiquetas HTML, compatibles con la mayoría de navegadores, que facilitan la accesibilidad: TH, THEAD, TBODY, SUMMARY, TITLE, ACRONYM, etc. Sin embargo, no sólo basta con etiquetar (y hacerlo correctamente) nuestra página web, además, tendremos que ofrecer alternativas al contenido en caso de que éste no pueda visualizarse correctamente (etiquetas <noscript>, ALT en imagenes, textos descriptivos de videos o audios, etc.) o utilizar los elementos básicos de una página web correctamente (tablas, encabezados H1, H2, etc.). Como ejemplo de una directriz del WAI, está la del uso de tablas como elementos de diseño. Las tablas no deben utilizarse para este menester, si no que deben utilizarse para estructurar el contenido de forma que un usuario con cierta discapacidad pueda comprender el significado de la información que contiene la tabla.

Existen varios validadores online que analizan nuestra web y nos indican qué errores y recomendaciones estamos incumpliendo, de forma que analizándolos y corrigiéndolos, podremos superar las distintas prioridades y ofrecer al público una página accesible. Aunque parezca sencillo, diseñar una página accesile es complicado al principio, y tratar de alcanzar la prioridad 3 nos va a resultar tedioso.

El objetivo de esta entrada es el acercamiento al concepto de accesibilidad web y el acceso a recursos relacionados. Además, quería comentaros que hace tiempo hice un curso on-line gratuito para trabajadores en activo muy interesante acerca de la accesibilidad web. El curso estaba dividido en dos partes y en total fueron 150 horas en las que aprendí los conceptos del WAI, el catálogo completo de directrices, la forma de aplicarlas al desarrollo web y cómo validarlas.

Más info | Descarga guía introducción de accesibilidad web
Más info | WAI

Sin Comentarios

¿Cómo personalizo el Favicon de mi página web o blog?

Un favicon es un icono que aparece en la parte superior del navegador junto a la URL de la web. La utilidad práctica de este elemento es nula, sólamente tiene funciones decorativas y de branding (promoción de marca). Además, con la última tendencia de los navegadores de incorporar el uso de tabs o pestañas para navegar con una sola ventana abierta, el favicon cumple otro papel, ya que permite una rápida identificación de la página que “oculta” cada tab.

¿Cómo personalizo el Favicon de mi página web o blog?

Crear uno es muy sencillo. En primer lugar tendremos que tener una imagen que deseemos usar como favicon. Hay que tener en cuenta que la imagen deberá ser  16 x 16px, por lo que no debe contener mucha información gráfica, es decir, procura que sea algo simple que permita identificar tu web, ya sea con el logotipo, una inicial o una pequeña ilustración. Si utilizamos imagenes con muchos colores, al crear un favicon de 16×16 se perderá muchísima calidad de imagen, tanta, que lo más probable es que el favicon sea indescriptible. Por eso mismo la recomendación es crear un favicon directamente con un tamaño de 16×16 o incluso 32×32. En mi caso, uso el Photoshop, aunque puedes utilizar cualquier otra herramienta de edición de imagenes (GIMP, Corel Paint Sho Pro, etc).

Cuando hayamos creado nuestro pequeño icono, bastará con subirlo a Favicon from Pics y en unos pocos segundos podremos descargar un ZIP con nuestro favicon preparado para subirlo a la web. Lo ideal sería subirlo al root de la web (directorio raiz). Lo último que necesitaremos será incluir entre los metas <head></head> de cada página los siguientes códigos. Ten en cuenta que si usas un CMS, Blog o web dinámica cuya cabecera sea un único fichero, bastará con que lo incluyas ahí.

<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />

Más info | Favicon from Pics

4 Comentarios

10 errores habituales en el diseño de aplicaciones y páginas web

10 errores habituales en el diseño de aplicaciones y páginas webA continuación os muestro un listado de los errores más habituales a la hora de diseñar o desarrollar una página web. El artículo original está en inglés, escrito por Jakob Nielsen. Si deseáis ampliar la información, podéis pasaros por Squac.iti.upv.es y leer el artículo completo en castellano.

  • Controles GUI (interfaces gráficas de usuario) no estándar
  • Inconsistencia
  • No mostrar claramente su funcionamiento (“no perceived affordance”)
  • Sin retroalimentación (“feedback”)
  • Malos mensajes de error
  • Pedir la misma información varias veces
  • Sin valores por defecto
  • Usuarios “lanzados” contra la aplicación
  • No indicar cómo se usará la información
  • Funcionalidades centradas en el sistema

Fuente | http://squac.iti.upv.es
Artículo original | http://www.useit.com/alertbox/application-mistakes.html

Sin Comentarios

sIFR: como usar tipografías no estándar en páginas web

sIFR: como usar tipografías no estándar en páginas web
A la hora de escoger una tipografía para una página web nos encontramos limitados a una serie de fuentes estándar: verdana, arial, georgia, helvetica, times new roman, y unas pocas más. Cuando elegimos una tipografía para nuestra web, debemos pensar que para que un usuario pueda verla, tendrá que tenerla instalada en su equipo, de lo contrario se sustituirá por aquella que tenga configurada por defecto en su navegador. Son tipografías estándar por que cualquier usuario las tiene instaladas por defecto en su ordenador (sea cual sea su SO).

Si queremos usar una tipografía especial (gótica, handwritten, etc.) solo tenemos dos opciones: bien crear una imagen del texto con photoshop (o cualquier programa de edición de imágenes)  y subirla a la web, o bien crear una regla CSS @font-face, que permite la descarga automática de la fuente en caso de que el usuario visitante no la tenga instalada. Ambos métodos tienen desventajas importantes, en primer lugar, tener que crear una imagen para cada texto de la web puede resultar una tarea tediosa, además de perjudicar al SEO. Además, tenemos el problema de que esta medida sólo sirve para contenido estático, es decir, que no varía. Por otra parte, es probable que tengamos problemas con algunos navegadores al usar @font-face, ya sea por que son antiguos o por que simplemente no lo soportan.

La solución para una página web con contenido dinámico es usar tecnologías sIFR, es decir, mediante JavaScript, CSS, DOM y ActionScript creamos una imagen en tiempo de ejecución (on-the-fly), que nos mostrará una imagen con el texto. Os recomiendo FaceLift, un pequeño script que podemos descargar de forma gratuita.

Más info | FaceLift

4 Comentarios

Importancia de la tipografia en entornos web

La siguiente presentación nos introduce en el mundo de las tipografías y su uso en las páginas web. Hay algunas ideas que van en contra del aspecto gráfico de la página web, como la recomendación de asignar a los enlaces un estilo clásico, es decir, de color azul y subrayado. Concepto que se encuentra en conflicto con el diseño, ya que, personalmente, un enlace con esas características puede resultar tan relevante u obvio para un usuario como un enlace de otro color que destaque sobre el resto del texto.

Por otro lado, comenta la posibilidad de utilizar distintos tipos de tipografías para estructurar el texto: Serif (las terminaciones de cada letra están marcadas para identificarlas mejor en una lectura rápida, como la Times New Roman) para las cabeceras y Sans Serif (las letras están redondeadas y sin terminaciones marcadas, como la verdana o arial) para el cuerpo del texto. Además de estructurar el texto, estamos aplicando a nuestra página una mejora de usabilidad web, ya que clasificamos y permitimos una mejor identificación del contenido.

Sin Comentarios