Archive for the ‘Diseño Web’ Category

12.13.2008 by Ramiro

Se definen los estándares de accesibilidad en Internet

Después de varios años la W3C (World Wide Web Consortium), organización que se dedica a organizar y crear estándares para Internet, puso a disposición del público las guías de accesibilidad.

Bajo el título de “Estándar Web del W3C define la accesibilidad para la Web de nueva generación: El esfuerzo de colaboración se plasma en un estándar más flexible y fácil de probar que promueve la accesibilidad de la Web” el comunicado de prensa habla sobre la guía que ofrece por primera vez un punto de partida de dónde diseñadores y profesionales pueden basarse a la hora de desarrollar proyectos.

Ver comunicado de Prensa

Ver Guías

12.07.2008 by Ramiro

Cómo se crea un tema de WordPress (básico)

Esta es una introducción a cómo crear un tema, theme o estilo para WordPress. Está creada para los que cómo yo, se metieron a WordPress de una vez y quieren entender cómo funciona el tema de “estilizar” WordPress de manera general.

  • Para definir nuestro Tema tenemos que crear una carpeta propia dentro de wp-content/themes con el nombre que queremos usar. O, copiar un tema existente (se recomienda el Tema Default) y cambiarle el nombre, y editar los archivos para crear nuestro Tema sobre una buena base.
  • El nombre, descripción y datos sobre autoría se editan en el archivo css principal. Generalmente style.css al principio del archivo. Pueden ver el Tema Default para tener una idea.
  • La imagen del Tema es por defecto screenshot.png
  • Archivos separados / templates: (header.php, sidebar.php, etc): esto es igual que en un diseño. Para entender cómo lo estructura WordPress es muy fácil. Imaginense ver un sitio, usar nuestro navegador para ver el código fuente y cortar cada parte de ese código fuente por las areas del mismo, es decir: header, menú (sidebar), las definiciones de HTML (header), etc. Así está en WordPress. Es obvio, pero si en tu caso no tenés mucha experiencia diseñando esto se puede pasar por alto fácil.
  • Funciones. Todo buen programador guarda sus funciones en un archivo aparte. Solo que en WordPress las clases y funciones ya están metidas en el “core” del sistema. Si nuestro Tema necesita funciones adicionales podemos crearlas en el archivo functions.php dentro de la carpeta de nuestro Tema. Ahi mismo se pueden definir los sidebars en donde podemos poner Widgets en caso de que nuestro Tema use más de 1 sidebar (el primero está definido por defecto).
  • Si queremos usar una plantilla o template de un sitio x en WordPress solamente tenemos que “cortar” el diseño tal cual está y pegarlo dentro de cada archivo correspondiente (header.php. index.php… etc) respetando los tags de PHP () que estan en el template.

La primera ve que intentemos esto es muy recomendable que usemos Default como base, lo copiemos con un nombre nuevo para nuestro tema y editemos a partir de ahi lo que queramos para tener una idea de los tags y funciones que usa WordPress. También podemos ver otros Temas y averiguar cómo hacen algnas cosas como usar mas de un sidebar dinámico para Widgets o en el caso de Default cómo es que cambian el fondo del encabezado.

Como siempre toda la información necesaria está en Internet o en el Codex de WordPress que también está disponible en español.

12.05.2008 by Ramiro

Opera 10 Alpha

La versión de prueba Alpha 1 del navegador Opera 10 está lista para la descarga y promete varias mejoras interesantes.

Opera, aunque no muy usado aun, sigue ganando adeptos por su rapidez y calidad de herramientas.

Entre las mejoras de la versión 10 se destacan el soporte para CSS que pasa el Acid 3 Test (debe ser el único navegador que lo pasa de los navegadores de uso cotidiano en este momento), herramientas para correo, actualización automática, herramientas para desarrolladores y la inclusión del corrector ortográfico (que en Firefox es muy util). Además el sitio dice que el nuevo navegador es un 30% más rapido.

Opera 10 Alpha 1 se puede descargar desde este enlace

Ahora hay que esperar la versión Beta y la versión final que se espera para el 2009.

12.03.2008 by Ramiro

E-Maniacs.com: Tutoriales sobre Diseño

E-Maniacs.com es un blog que ofrece tutoriales sobre diseño web abarcando varias categorías. Ofrece recursos (brushes de Photoshop, Iconos, figuras), tutoriales, videos explicativos, gráficos vectoriales gratis, themes de WordPress y hasta wallpapers.

Si usted está buscando recursos de calidad, gratis no puede dejar de visitarlo. En la parte derecha del blog están los links y sitios afiliados y abajo de ese bloque estan las categorías del sitio en donde puede  encontrar más calidad que cantidad. El sitio se actualiza regularmente por lo cual podemos esperar más novedades.

No solo pueden suscribirse al RSS del sitio sino que también pueden seguir su progreso en Twiter.

12.02.2008 by Ramiro

¿Cómo se ve su sitio en diferentes navegadores?

Desde que Internet Explorer se hizo famoso por el soporte a CSS (los archivos que le dan formato a las páginas) se inició la guerra de los navegadores… a partir de eso momento comenzó además el desorden de los estándares (y el auge de las organizaciones que tratan de arreglarlo).

Esto lleva al problema de que muchos diseños no son compatibles entre navegadores. ¿Cómo darse cuenta? esta herramienta ofrece screenshots de sitios. Solo debemos escribir la dirección y seleccionar en qué navegador queremos verlo.

Visitar NetRednerer

12.01.2008 by Ramiro

Revisión de Sitios Web

Una de las maneras más fáciles para conocer opiniones sobre su sitio web es buscar sitios que ofrezcan revisiones de sitios web. Muchos sitios ofrecen la opción de publicar en sus foros la dirección el sitio para ser revisado por diferentes personas las cuales dejarán su opinión al respecto. De esta manera se pueden recibir críticas / correcciones y opiniones sobre diferentes partes y características del sitio de diferentes personas.

Algunos sitios como TalkReviews están dedicados a este tipo de revisiones de sitios.

Lo interesante de estos sitios es poder obtener información objetiva de personas que no nos conocen y ver detalles que muchas veces se nos escapan como navegación, links rotos y visualización con diferentes navegadores.

11.24.2008 by Ramiro

Diseño de Logos: para a tener en cuenta

A la hora de diseñar logos hay varios elementos que se desconocen. Por experiencia cuando alguien se decide por un logo se basa mas en parámetros personales que de mercadeo lo cual hace que el logo no sirva para mucho.

Esta es una lista de cosas a tener en cuenta a la hora de buscar el logo, que al fin de cuentas es la imagen de la empresa / proyecto:

  1. Concepto / Idea: el logo debe ser fácil de identificar con la actividad de la empresa o del proyecto que representa. Y, en casos abstractos ver el punto 2:
  2. Debe ser fácil de recordar / asociar a la empresa / proyecto. La presentación es muy importante.
  3. Debe ser simple: los logos complicados son muy lindos pero carecen del beneficio de los dos puntos anteriores. Aunque suene gastado el ejemplo más conocido sobre este punto es el logo de Nike (conocido como Swoosh) es simple, fácil de recordar y mercadeable.
  4. Debe ser flexible: si se necesita usar el logo en blanco y negro, en ropa, en vehículos y otros medios el logo debe ser adaptable o por lo menos tener versiones que se adapten a estos medios. Colores degradados, 3D y diseños complicados son muchas veces difíciles de reproducir en ropa, por poner un ejemplo.
  5. Legales: si el logo utiliza fuente, imágenes, decoraciones que cuentan con derechos de autor restrictivos puede ser un problema a futuro. Es muy frecuente ver el uso de Dingbats y otros símbolos que se encuentran en tipos de letras que vienen con Windows / Office en algunos logos y eso puede ser un problema bastante grave y objeto de demanda. Lo mismo pasa con las fotos.
11.12.2008 by Ramiro

Revisando diseños – PhoneWatch.com

Recientemente estuve viendo algunos sitios y encontré Phone Watch Un sitio que vende teléfonos con forma de reloj.

El sitio tiene la particularidad de tener un diseño y una navegación simple lo cual hace que sea fácil encontrar la información. Esto es lo que hace la diferencia en un sitio ya que ademas es lo que ayuda a poder hacer una compra sin complicaciones.

El sitio está estructurado usando menú a la izquierda, datos de perfil y compras en la parte superior y una navegación extra en la parte de abajo.

01.22.2008 by Ramiro

De cómo diseñar se volvió una pesadilla

Hace unos años Internet Explorer era el navegador más usado con más del 90% de usuarios en todo el mundo. Decir “Explorer” era como decir Gillette o WD-40… la marca se convirtió en la herramienta. Pero también estaba Netscape y más tarde aparecieron Mozilla, Opera y Safari (Macintosh), entre otros desconocidos. En el medio de esa etapa y antes de la llegada de Firefox tenemos varias versiones de Internet Explorer también. Hoy día los gigantes son Internet Explorer, Firefox (que en algunos casos es el 40% de usuarios), Opera y las versiones para Mac y Linux de cada uno de estos.

Para diseñar páginas se usa CSS (Cascade Style Sheets) que básicamente es un archivo en donde se le define al navegador que colores, posición y tamaño tiene cada elemento de la página: encabezados, fondo, párrafos, enlaces, etc.

El problema es que como cada navegador empezó a su gusto cada versión interpretaba el CSS a su manera. Y no es que no haya estándares, simplemente la mala costumbre la comenzó Microsoft que adaptó las fallas de lectura de CSS y las convirtió en implementaciones propias (ya que al principio no había mucha competencia entonces era como ellos querían que fuese).

El Problema

Ahora no solo hay más navegadores sino que cada versión, especialmente de IE por ser el más usado, sigue funcionando de manera diferente a los estándares. De hecho ningún navegador es 100% compatible con los estándares. Hay una prueba que se puede hacer en línea llamada ACID que permite demostrar si nuestro navegador usa las reglas bien o mal. Hasta el momento hay pocos navegadores que pasan la prueba (Opera, Safari, Konqueror) pero ninguno es ampliamente usado . Tenemos que esperar la llegada de Firefox 3 y de Internet Explorer 8 para poder ver estándares reales en los navegadores más usados.

Ahora, para diseñar hay que hacer malabares entre IE6 (Windows XP), IE7 (XP y Windows Vista), Opera y Forefox. Es decir… el trabajo que se hace de HTML y CSS está mal hecho… se ve bien (en la medida de lo posible) pero es como tener un automóvil que usa ruedas de madera pintadas y decoradas para parecer llantas de aluminio de perfil bajo.

A la hora de diseñar, cuando uno esperaba que con IE7 las cosas se normalizaran solo fué ajustar el bache entre Firefox e IE7… IE6 sigue funcionando extraño pero sigue siendo uno de los más usados. Además los sitios deben funcionar en Mac y Linux lo cual agrega otro contratiempo ya que las dos plataformas están ganando mucho terreno, y para este 2008 mucho más.

Otro problema es la falta de soluciones. Por poner un ejemplo, el mismo Microsoft no ofrece soluciones viables. Lo más cercano es instalar unsoftware que se llama Virtual Machine 2007 (que no funciona en las versiones básicas de Windows Vista) y que sirve para hacer una instalación completa de Windows XP dentro de Windws Vista para poder usar Internet Explorer 6 y así poder probar los sitios.Varios desarrolladores de sitios web se quejaron de esta incompatibilidad y la falta de programas para poder trabajar con las nuevas versiones y las viejas al mismo tiempo. La respuesta de Microsoft fué: “Ustedes no son nuestros clientes”. Parte de esa actitud le está costando a Microsoft el fracaso de Windows Vista.

Por suerte hay recursos como NetRenderer que nos permiten obtener (auqnue sea parcialmente) un screenshot o foto de un sitio como se vería en IE6 pero tiene sus limitaciones.

En definitiva la falta de seguimiento de estándares esta siendo demasiado costosa ya que para diseñar hay que invertir mucho más tiempo. En un mundo donde los programas ya se manejan por Internet y no como programas instalables, locales en una PC esto genera un problema. Al punto de que muchas empresas no quieren migrar a Windows Vista / IE7 porque el bache de compatibilidad es muy grande.

¿Qué se puede hacer al respecto?

En forma práctica nada… varias empresas decidieron no hacer más parches para navegadores obsoletos y la respuesta de gigantes como Microsoft es: “Actualicen”.

Por otro lado hay organizaciones como Web Standards (los que hacen el ACID test) que promueven que haya un cambio organizado para solucionar este problema.