Archive for the ‘Diseño Web’ Category

06.29.2009 by Ramiro

Más críticas aparecen en Internet después de la muerte de Michael Jackson

Con el evidente problema de tráfico el día que murió Michael Jackson el dedo acusador no tardó en levantarse: la culpa la tienen las empresas de publicidad. En gran parte considero que es cierto. Con mi triste experiencia con mi conexión actual de Internet noté que mucho tiempo de carga, por ejemplo, cuando uno visita Facebook, se va en cargar los anuncios. Y seamos realistas: los sitios están cargados, muy cargados hoy día, con muchas empresas ofreciendo no solo anuncios de texto sino también flash. Yen cuanto al texto hayque aclarar que para cargarlo (y medirlo con programas de estadísticas) hay Javascript envuelto en el asunto. Es decir, por mas anuncio de texto que veamos podemos esperar mucho más código en el fondo.

Además de todo esto Google reconoció que un problema que tuvieron con Goolge News se debió a que el tráfico fue  tan grande y repentno que los sistemas lo tomaron como un ataque.

Claro, con conexiones rápidas no se nota tanto pero en cuanto se satura o se usa una conexión lenta se nota la diferencia. Quizás es hora de volver a optimizar sitios por su tamaño además de su contenido ya que con el auge de las nuevas conexiones quedaron atrás las épocas en las que un buen sitio pesaba menos de 90kb.

06.21.2009 by Ramiro

Mitos sobre proyectos de páginas web

Acá van algunos mitos que conozco (y muchos que he sufrido). Si alguien tiene más puede comentar y los voy agregando.

  • Es un trabajo de poca plata (o ad honorem) pero después me van a dar más trabajo: ja-ja esta la escuché muchas veces. Nunca sucede. Si no hay plata para la persona que va a hacer el proyecto o si el proyecto es tan importante y ambicioso entonces por qué no le pagan mejor al diseñador / programador o cómo es que siendo un poryecto tan TAN no hay plata… cómo piensan hacer plata entonces? triste pero cierto.
  • El sitio se promociona solo): MENTIRA ja ja ja. salvo que estemos hablando de algun producto o persona famosa el cuento de que publicando un sitio web está disponible a millones de personas es una mentira. Para que lo vean cientos, miles, millones de personas al sitio lo tienen que conocer, y para que lo conozcan hay que publicitarlo, hay mil maneras, gratuitas y pagas pero si uno no se anuncia nadie lo va a ver. Nadie te Conoce, Nadie te Crée.
  • Agregar un (agregar elemento acá) es fácil, solo te va a tomar unos minutos: esta es una maniobra que mucha gente explota sabiéndolo. Sí, muchas veces agregar un formulario de contacto, un cuadro con un texto sí es fácil. Pero siempre preguntar por qué y para qué. Una que pasa cuando uno empieza es la del formulario de contacto. Cuando a uno le piden eso se imagina un formulario simple (y muchas veces el cliente también lo piensa así) pero siempre hay un jeuga de vivo que pide lo simple y después sale conque necesita listado de paises, validación para todos los campos, que cuando faltan datos el color cambie y que además envíe un archivo adjunto… ahi ya no es simple… y el precio es el mismo.
  • Si es Open Source se puede cambiar: esto lo estuvimos viendo con un amigo hace poco. Mucha gente piensa que cuando uno baja o compra un código abierto éste se puede cambiar y adaptar fácilmente. No es asi. Primero, todo programa tiene una lógica, una estructura y está hecho para ciertas funciones, si el código está bien hecho se le van a poder hacer algunos agregados pero llegado cierto punto hay que hacer modificaciones totales. Si por el contrario el código es un desastre porque al fin y al cabo también está el tema de que cada programador tiene sus mañas por más reglas y estándares que existan. Entonces en esos casos hacer cambios e suna pesadilla y consumen tanto tiempo que es probable que hubiera sido más fácil programar algo desde cero.
  • Es muy caro / es muy barato: esto es muy virtual, siempre es mejor armar presupuestos sobre lo que uno cree que va a tomar de tiempo. Tambíen mucha gente se ampara con precios de otras personas y precios en el extranjero. Siempre tener en cuenta qué es lo que uno va a dar y cuánto tiempo le va a tomar, gastos, etc. No existe un precio estándar, y a mi manera de ver las cosas no se pueden cobrar tarifas fijas. Cada proyecto es diferente. Los precios fijos solo sirven para productos fijos, que ya están listos y de los cuales se conocen los gastos y beneficios. Es igual que un producto de supermercado… un chocolate del estante ya se sabe cuánto se produce, cuánto cuesta… pero si usted encarga un chocolate nuevo, con un envoltorio diferente… ¿crée que el precio va a ser el mismo?
  • El Gurú: hay que tener cuidado con los gurús o cuando a uno lo tildan de uno. O se tira a chanta o le piden creyendo que porque sabe lo va a hacer fácil, rápido y encima va a cobrar poco.
  • Necesito una fecha: por experiencia… en programación al igual que con cosas que se hacen desde cero, artesanales, no de paquete, solamente se pueden dar estimados, y por lo general todos los proyectos toman más de la cuenta. Sobre todo si se depende de muchas personas. Hace poco trabajé con un sistema de tarjetas cuyo backend era mitad de la empresa y mitad de otra empresa que proveía el servicio. Bastó con un correo que se perdió para perder tres días y otros problemas que salieron (inesperados) para perder otra semana… esas cosas no se planean. Pasan. Hay que recordar (como el ejemplo del chocolate, arriba) que estos proyectos son a la medida, no hay nada estático. Eso es en parte lo lindo de este trabajo pero también un dolor de cabeza.
06.17.2009 by Ramiro

Tipos de Letras en Páginas Web y el Futuro

TypekitUno de los problemas del diseño de páginas web es que no todas las fuentes, tipos de letras, están disponibles en todas las computadoras. Mucha gente quiere un tipo de letra específico pero la cantidad de tipos de letras que vienen por defecto en los sistemas operativos es limitada. Si bien hay equivalencias, por ejemplo para el tipo de letra Arial, en Linux, otras fuentes no corren con la misma suerte e incluso un leve cambio en el espaciado cambia la perspectiva y el diseño.

También está el tema de que mucha gente piensa su diseño usando muchos tipos de letras y eso tampoco es sano (ni estético) pero eso es otro problema.

Como si esto fuera poco mucha gente diseña y usando fuentes que no son gratuitas lo cual agrega otra traba a la hora de pasar un diseño desde el programa a la implementación en Web.

Recientemente con el desarrollo de HTML5 y CSS3 se van a implementar nuevas declaraciones para importar fuentes. Si bien esto no soluciona el tema de las fuentes pagas si soluciona que en un futuro no muy lejano podamos mostrar sitios con fuentes que no están presentes en la computadora del visitante.

Por suerte hay un nuevo proyecto que pronto va a dar una solución a ambos problemas. Se llama Typekit.

¿Cómo funciona?

Typekit negocia con los creadores de las fuentes un precio y Typekit le cobra a los diseñadores una tarifa (que según ellos no va a ser muy cara). Además Typekit va a ofrecer un sistema para buscar y navegar fuentes facilitando así la búsuqeda de la fuente perfecta para nuestro proyecto. De esta manera vamos a poder importar directamente desde nuestro CSS las fuentes.

Si bien esta no es una solución para muchos sí ayuda para sitios que requieren fuentes no convencionales. La verdad, a mi manera de pensar, es que si el precio es justo Typekit va a ser una herramienta útil.

Por otro lado sigo en desacuerdo con el tema de usar muchos tipos de letra diferentes. En un sitio de arte una letra rara puede verse bien pero algo que muchos clientes y diseñadores con poca experiencia creen es que cuanto más agresiva es la letra mejor… esto lo único que hace es que el sitio sea dificil de leer… y en Internet el Contenido es el Rey.

Pueden conocer más sobre Typekit desde su Blog. El sitio está en construcción pero parece que este mismo año lanzan el producto. También pueden dejar el correo en el sitio principal para que les avisen cuando Typekit esté disponible.

01.21.2009 by Ramiro

Mapa de Imagenes (Image Map) en Línea

Si al igual que en mi caso usan Linux y Windows y les da pereza volver a Windows para usar Dreamweaver y crear el mapa de imagenes hay una alternativa en línea para usar vía web desde Linux.

El sitio Maschek.hu ofrece una herramienta para crear Image Maps en línea. Muy fácil de usar y ofrece las opciones para subir imagenes o usar imagenes alojadas en la web.

12.17.2008 by Ramiro

Ecofont, el tipo de letra que ahorra hasta un 20% de tinta

Parece una estupides pero es algo realmente simple y efectivo. La empresa holandesa Spranq alteró el tipo de letra Vera Sans (que es open source) y le puso agujeros para disminuir el nivel de negro de cada letra sin perder de vista la visibilidad de la letra para que sea fácil de leer. El resultado es EcoFont que se puede descargar gratis.

ecofont_voorbeeld_klein

Descargar EcoFont.

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