Archive for the ‘Web Design’ Category

02.24.2010 by Ramiro

Bug in Photo Manipulation Algorithm

“There is an important error in most photography scaling algorithms. All software tested has the problem: The Gimp, Adobe Photoshop, CinePaint, Nip2, ImageMagick, GQview, Eye of Gnome, Paint, and Krita. The problem exists across three different operating systems: Linux, Mac OS X, and Windows.

This problems represent a considerable loss in quality after several scalings. you can try it yourself.

01.30.2010 by Ramiro

Google Will End Support for Internet Explorer 6

Starting in March Google will drop support for the Internet Explorer 6 browser. This move, entitled in their blogs as “Modern Browsers for Modern Applications” was justified not only by the age of the browser but also aiming to provide a better service for Google Docs and other online applications.

The initiative began months ago and now it seems to be a reality. The problem: old browsers are slow, unsecure and don’t support new tecnology standars like CSS and AJAX correctly.

Some people claim that this move was also influenced by the recent attacks to Google in China were Operating System and Browser vulnerabilities were exploited in order to harm Google’s network.

IE6 is still in use since several applications, specially in the corporate level, were designed specifically for this browser and the cost to upgrade these machines is sometimes very hig. However Microsoft and other known businesses offered different solutions to help people to move to a newer browser.

12.04.2009 by Ramiro

MockingBird

MockingBird is a web application to design mockups. It was built using AJAX (Capuccino, Framework) so there is no need to download anything in order to use it.

Designs created with this application can be shared with customers. It is a great tool, not only for designers, customers can also use the tool to make their thoughts appear as a base mockup and then send it to the designer for further adjustments.

main-screenshot

09.22.2009 by Ramiro

Google Offers New Life for Internet Explorer 6

Google will launch, before the end of this year, Google Wave. A product which I believe will add a lot to the Internet table. As we mentioned before it comes with all the latest toys in the web technology arsenal: HTML5, CSS and Javascript to the extreme. Since Internet Explorer 6 refuses to die because for a lot businesses it is expensive to replace the browser or to adapt / change the applications that depend on it Google knows that offering a “Upgrade your Browser” message will not work.

So, their solutions is to provide a plugin that adds all the thing Internet Explorer 6 needs in order to run Google Wave. So now it will be possible to use Internet Explorer 6 and see rounded borders, shadows (CSS) and HTML5 stuff plus some faster javascript engine.

We will see soon how it works.

07.14.2009 by Ramiro

Some CSS Tricks

These are some elements / things that sometimes we miss while using CSS:

  • Always define margin and padding. This is one of the main problems when designing for multiple browsers (specially IE6) since each browsers has a default value for this properties. You an use * {padding:0; margin:0; } to degine 0 padding and margin for all elements in the stylesheet.
  • Use em instead of px (pixels). That will help to make the site more friendly with users who want to change the default font size. Choose font-size: 62.5% to set the base / standard size which it’s aprox.to a 10px font. This is equivalent to say 1em. From that point we can use 1.1em (11px), etc.
  • Always use a background (or background-color) and color: #xxxxxx to define background and font color since this is important to CSS standards and validation. Remember that some people changes the defaults in their browsers in order to get different contrast options so keep in mind this in order to avoid problems.
  • Instead of setting margin-top, margin-right, margin-bottom y margin-left individually we can save som space by using all these declarations in one line: margin: 12px 4px 6px 3px; (clockwise: top, right, bottom, left).
  • In order to align / float elements right or left and make text wrap these elements use float: right or float: left. You can also add position: relative;
  • Some browsers (like Firefox) ow support some CSS rounded borders options:
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
  • If we wan to use an image instead of text, but we do want to keep the text inside the code we can use display: none and a background with an image in it : background: #fff url(/imagenes/mi_imagen.gif); But be careful since this technique can be seen by Google as a way to hide keywords and may get you intro trouble (see reference).
  • Remember that BODY and HTML can be styled using CSS also.
  • When combining CSS with Flash we can use z-index in order to control which element is on top. The Flash Object option can be set to OPAQUE to gain some control over elements stacking in different browsers.
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.