Nicolás Flores

Diseñador Multimedial

  • Diseño de sitios web
  • Webs autogestionables
  • Optimización y rediseño

Playroad

Diseño y maquetacion por Estudio 46.
Finalización del sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de productos y upload de fotos. Desarrollo del carrito de compras.
  • PHP/MySQL | jQuery
  • Dineromail
Ir al sitio Datos técnicos

OD Real Estate

Diseño y maquetacion por Estudio 46.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de propiedades y noticias, upload de fotos, y un sistema de propiedades destacadas.
  • PHP/MySQL | jQuery
  • CMS propio
  • Montado en Smarty
Ir al sitio Datos técnicos

Bien Cortado

Se rediseño el logo y se desarrollo el sitio web desde cero.
  • PHP | jQuery
  • Maquetacion y SEO
Ir al sitio Datos técnicos

Tercer Ojo

Se terminó el desarrollo del sitio full flash de la empresa. Además se agregó la sección "Novedades", y se optimizó el sitio para que sea correctamente indexado por buscadores.
  • AS 3
  • Información a través de XMLs
  • SEO aplicado a Flash
Ir al sitio Datos técnicos

Coramina Lenceria

Diseño por Pixelate Creativos.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de los productos y upload de fotos.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación | SEO
Ir al sitio Datos técnicos

- Body Line -

Body Line 1 | 2006
Body Line 2 | 2006
Body Line 3 | 2006
Body Line 4 | 2006
Body Line 5 | 2007

- Color -

Rojo | 2005
Naranja | 2005
Amarillo | 2005
Verde | 2005
Celeste | 2005
Azul | 2005
Violeta | 2005

- Influence -

Bob Marley | 2005
Jim Morrison | 2005
John Lennon | 2005
Mick Jagger | 2005

- Pin Up | GGA -

Metamorphosis | 2004
One | 2005
Y | 2006
Web | 2006
Twisted | 2007
NN | 2010

- Angels & Demons -

Angel's Touch | 2004
Divine Temptation | 2004
Lilith | 2005
Black and White | 2005
Sin | 2007

- Personal -

SRV | 2003
Maya | 2004
Ave Fénix | 2004
SL - LD | 2006
Diego Maradona | 2005
Jack Skellington | 2005

El blog del Turu

especialidad de la casa

« ir al inicio

Imagen en el submit de un form

29 de November de 2009 | 10:33 pm

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el “enter”. O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton “Ingresar” para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá “pero es un botón de submit, cómo no van a saber hacerlo?”. Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=”submit”>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=”submit” /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

26 de November de 2009 | 4:42 pm

alguien le avisa a adlatina que el “enter” no funciona en su formulario de login… es muy molesto

Usabilidad y Accesibilidad

3 de November de 2007 | 1:18 am

En los últimos meses me vi más interesado en temas como la usabilidad y accesibilidad. En realidad, usabilidad es algo sobre lo que siempre leí, no así accesibilidad. No estoy seguro el por qué del cambio, al menos no recuerdo ningún hecho en particular.

Ayer me encontre con eXaminator, una herramienta desarrollada en Accesible.com.ar que te permite evaluar un sitio para detectar errores.

Este sitio (al menos la portada) figura en el puesto 44º, nada mal por ser la primera vez que someto el sitio a un análisis seriamente, sumado al hecho que al hacer el sitio no tuve presente en mente la accesibilidad como la mayor directiva.

Esta semana (de a poco) voy a ir cambiando lo necesario para corregir errores.

En serio usaste photoshop?

11 de August de 2007 | 1:07 pm

En cuanto a retoque fotográfico se refiere, lo primero que le digo a mis alumnos es “si se nota que usaste Photoshop, el trabajo está mal hecho”. Esto por supuesto es subjetivo, es mi punto de vista. Odio ver imágenes en revistas en las que es obvio el uso del programa, no sé en qué piensa el retocador en ese momento. Sí, ya sé que TODAS las fotos de una revista están photoshopeadas, pero hay veces en las que se nota exactamente qué herramienta usaste:

Qué tan difícil era duplicar el fondo original para continuar la pared? Después hay que enmascarar, pero dale, es fácil de hacer. O quizás exijo demasiado?

Más errores de Photoshop para ver.

Y qué estuviste haciendo que te mantuvo ocupado?

7 de August de 2007 | 10:35 pm

En las próximas semanas (como mucho, a fin de mes) ya estarían terminados gran parte de los sitios que estoy haciendo ahora. Más orgulloso de unos que de otros, pero me gustan todos. En un proyecto en particular se dió todo lo que hay que evitar para tener un óptimo resultado. Consecuencia: hoy estoy corrigiendo errores de un sitio entregado hace más de un mes.

Lo positivo, todo fue previsto, eran de esperar errores (y muchos) en el desarrollo de un sitio con sistema de autogestión e informes cuando había que entregarlo en ¡dos días! Pero bueno, esas fueron las circunstancias. Ya está un 99% terminado, en cuanto esté todo voy a comentarlo por acá.

Hoy leo que en México se firma manifiesto de Usabilidad y Accesibilidad en sitios del gobierno. Qué bueno que se tomen este tipo de iniciativas en Latinoamérica. Hacer un sitio usable es el trabajo de cualquier diseñador web, es su obligación, es lo que marca la diferencia con alguien que no maneja conceptos de diseño.

Según mi experiencia el problema está en el cliente (ojo, no tiene la culpa), que no tiene por qué estar al tanto de este tipo de sitios. La realidad marca que el cliente (y el usuario) común no navega este tipo de sitios. Mi tarea es explicarle de su existencia y beneficios, pero la realidad es que flash vende… mejor dicho, el cliente compra flash. No tengo nada en contra de flash, lo usé como el mejor ejemplo de lo que el cliente piensa que es lo mejor. Flash es bueno para unas cosas, para otras no. Mi autocrítica es que debo ponerme más firme y explicar mejor los beneficios de este tipo de diseño.

Ya llegará el día…

Aniversario

24 de May de 2007 | 7:49 pm

La mañana del lunes 24 de mayo del 2004 hacía uso de la 4º falta permitida por cuatrimestre (ya no podría faltar más a Audio), para llegar en término con una entrega para Diseño Gráfico 2.

Eduardo Arnau era el profesor, y la consigna entregada con las tres semanas de anticipación era “Visualización de la música”. Al comienzo del cuatrimestre contábamos con las consignas de todos los trabajos, y recuerdo que la tarde en que las leí, me entuasismé con ese – Ojalá que tengamos que hacerlo -, y por suerte fue dado.

Pocas veces hice tanto uso de las tres semanas, pero por otras obligaciones estaba destinado a trabajar a fondo durante el fin de semana previo a la entrega.

Nuestra obligación era entregar un storyboard de la animación, no la animación en sí. Pero como uso Flash desde la versión 5, me sentía obligado a animar. Y nunca tuve problemas con Flash, hasta ese fin de semana…

Cada tanto aparecían carteles de error, nunca antes vistos por mí, que cerraban el programa automáticamente. Muy molesto, que obligaba a un Ctrl+S bastante seguido. Por suerte tenía estructurado el tiempo que necesitaba para hacer cada una de las escenas (sí, en esa época usaba escenas para una animación larga). Pero no contaba con que, aproximadamente a las 12:05 (recuerdo que Fútbol de Primera ya había terminado), se iba a colgar la máquina. Hasta ahí no hay problema, reinicio y se acabó. El problema era que instantes antes del cuelgue, había tocado Ctrl+S…

Por supuesto, el archivo estaba dañado, y sin backup. De tener el 40% terminado pasé a 0 en un segundo. Planeaba trabajar toda la noche, pero para terminar lo que faltaba y pulir todo. Eso ya no era posible. Y lo que fue un error, como lo es trabajar con escenas, me salvó.

En flash uno puede hacer la vista previa de toda la película, como así también de cada escena. Por supuesto que para animación, esta opción es fundamental, imaginen sino ver toda la animación desde el principio para corregir un error en el minuto 3. Lo que realmente salvó todo el trabajo e impidió que llegue a la entrega con las manos vacías fue el hecho de que los dos principales tramos de animación los recuperé con los .swf de las previas de las escenas, no así las otras dos más simples.

Recuerdo rehacer ambas escenas y acoplarlas con las rescatadas (dejando todo como lo tenía antes de perderlo) cerca de las 2:30 de la mañana. Fue el momento en que decidí ducharme. Y usar ese tiempo para definir en mi cabeza la conclusión de la animación, que pensaba resolver con más tiempo.

El trabajo lo terminé cerca de las 10 de la mañana. Fui hasta Da Vinci, me tomé un café en el buffet esperando a mis compañeros, para subir y exponer por primera vez Expresión de un sentimiento. Quedó bautizada en octubre, cuando necesitaba un nombre para participar del Encuentro de Arte Jóven, de donde ganó su categoría.

Esa noche aprendí varias cosas. Primero, la importancia del backup, aún mientras trabajas. Segundo, que Flash va a fallar cuando tengas una fecha límite, porque luego de ese episodio nunca más me falló. Tercero, no sirvo para quedarme toda la noche trabajando, aunque esto último tuve que repetirlo.

Ojalá tenga la oportunidad de trabajar en algún proyecto similar, porque a pesar de los problemas, es uno de los trabajos que más fácil concebí y disfruté haciendo. Sobretodo, por el esfuerzo.