Nicolás Flores

Diseñador Multimedial

Diseño, optimización de webs y soluciones autogestionables

Yaestabaregistrado.com

Diseño por Kumite.
La gente de YER quería rediseñar su sitio, y me contactó para la implementación del mismo.
El desafío fue hacer los cambios sin que la rutina que el equipo tenía para actualizar el sitio cambie.
  • WordPress
  • Maquetación respetando los estándares de W3C y SEO.
  • PHP/MySQL | jQuery
Ir al sitio Datos técnicos

Filmabonito

Diseño por Pixelate Creativos.
La empresa necesitaba de un sistema para administrar algunos contenidos del sitio, pero en especial que permita altas, bajas y modificaciones de los productos y upload de fotos. Además el administrador permite elegir entre tres layout de banners para la home.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación respetando los estándares de W3C y SEO.
  • Montado en Smarty
Ir al sitio Datos técnicos

Playroad

Diseño y maquetación por Estudio 46.
El sitio ya contaba con un CMS, pero estaba incompleto. Me confiaron la terminación del mismo, permitiendo altas, bajas y modificaciones de productos y upload de fotos. Luego, se me encargó el desarrollo del carrito de compras.
  • Para el CMS, PHP/MySQL | jQuery
  • Carrito de compra con Dineromail
Ir al sitio Datos técnicos

OD Real Estate

Diseño y maquetacion por Estudio 46.
Se necesitaba un administrador para el catálogo del sitio, el cual permita altas, bajas y modificaciones de propiedades y noticias y upload de fotos. Se hizo también un sistema de propiedades destacadas para la home.
  • PHP/MySQL | jQuery
  • Creación de un CMS propio
  • Montado en Smarty
Ir al sitio Datos técnicos

Bien Cortado

El emprendimiento necesitaba un rediseño del logo y comenzar su comunicación web desde cero.
  • XHTML | jQuery
  • Maquetación respetando los estándares de W3C 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 respetando los estándares de W3C y SEO.
Ir al sitio Datos técnicos

El blog del Turu

pero no soy blogger

« ir al inicio

28 de mayo de 2010 | 8:42 pm

me enteré un poco tarde de esto http://code.google.com/webfonts

Más creatividad con CSS

6 de marzo de 2010 | 9:58 am

Hace un tiempito escribía sobre la importancia para los diseñadores y creativos de aprender qué se puede hacer con CSS, más allá de que ellos mismos sean o no los que produzcan las páginas. Mi consejo era combinarlo con jQuery, por lo que la “tarea” era doble, aprender CSS y jQuery.

Hicieron la “tarea”? Les paso un ejemplo muy sencillo de lo que intentaba lograr, un sitio muy simple, con un jQuery de los mas fáciles de entender, y CSS de lo básico. Sé que este sitio en particular quizás no es la mejor combinación de creatividad + diseño + impacto + magia + etc. que pueda existir, pero era el complemento que me faltaba para cerrar mi posteo anterior, y no quería dejar de pasar la oportunidad.

PD: Gracias a Dumme por pasarme el link que genero este post.

Aprender para crear

29 de enero de 2010 | 7:42 pm

Al hablar con diseñadores web, o que diseñan para web, es innevitable terminar hablando, aunque sea un poco, de hasta dónde deben saber ellos de código HTML, CSS, jQuery, etc. Yo soy un bicho raro, porque soy diseñador y también programador. Ya lo asumí, soy ambas, suelo ejercer más como programador, pero eso es otra cosa. Al tener este doble rol, me es muy fácil entender a ambas partes, y qué encuentran molesto unos de otros.

Respecto a los diseñadores en sí, no pretendo en este post hacer un debate sobre dónde terminan sus obligaciones para con el “conocimiento”. Admito que me da un poco de vergüenza haber escrito esa frase, me hace querer aprender algo nuevo en los próximos 5 minutos por respeto a la autocapacitación jajaja. Me interesa que vean esta creación en CSS.

Y ahora sí, pregunto: no te dan ganas de saber qué se puede hacer en CSS? El código usado para esa animación existe hace muchisimos años. Se trata de ser creativo con lo que se tiene. Con lo que sabemos. O sea, no hace falta saber hacerlo, pero sería un error grave ni siquiera saber los fundamentos básicos, que son los que te dan herramientas, a vos que te consideras “creativo”, para construir algo nuevo. Dar un mensaje.

Sabén cuánto cuesta hacer este ejemplo en concreto? un par de horas de alguien que sepa los fundamentos de CSS 1 (no deja de ser un jpg con la textura de la lata mapeada). Los invito a aprender qué se puede hacer con CSS, pero especialmente con jQuery. Atención con lo que dije, aprender que se puede hacer, no aprender a hacerlo, es muy diferente.

Y a no se quedarse con que sólo flash puede hacer cosas lindas y animadas. Vamos, búsquen! O mejor dicho, encuentren!

CSS y Javascript

25 de enero de 2010 | 9:22 pm

En lo que a diseño web se refiere, este año los desarrolladores y maquetadores lo empezamos teniendo en mente HTML5 y CSS3. Uno piensa en la etiqueta <video> por ejemplo, y no puede más que gustarle eso. Después seguís soñando, y lo imaginás con jQuery. Genial. Por último, te acordás que la gente usa internet explorer, y te querés matar.

La curva de aprendizaje del usuario común en verdad no la conozco. Es muy fácil para mí y cualquier geek, imaginar que los usuarios de internet leen e investigan. Nada más lejos de la verdad. A los usuarios de internet, hoy en día lo único que les importa es Facebook, como hace tres años atrás le importaban Fotolog y MySpace, y más atrás aún, revisar su cuenta de email de Yahoo.

Como me gusta leer sobre maquetación, me encuentro con algún truco de CSS. El post está bueno, salvo con que no sirve para ie. Entonces, se usan un par de librerías en javascript que al cargarlas, “corrigen” lo que está mal en el navegador favorito por todos.

Y si directamente no hacemos nada para que se vea bien en IE?

Imagen en el submit de un form

29 de noviembre 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.

Truco CSS para escalar imágenes

11 de mayo de 2009 | 7:12 pm

Hace unas semanas me encontraba leyendo sobre este truco de css para escalar imágenes en Internet Explorer sin que se vean pixeladas. Quedó como una curiosidad, pero no le ví un uso práctico.

Hoy se lo encontré. Estas semana estuve arreglando un back office y un front, y hoy notaron que las imágenes de los productos subidos por BO tienen un tamaño distinto al utilizado en el front. Como las subidas eran más grandes, bastó con esa simple línea de css:

img{
-ms-interpolation-mode: bicubic;
}

y listo.

Rediseño (y van…)

8 de diciembre de 2007 | 5:21 pm

Desde hace unos días que hay un nuevo diseño en el sitio.

Qué tuve en cuenta esta vez? Aprendí mucho desde la última vez que actualicé el sitio, especialmente en CSS, por lo que hay una optimización muy grande en las hojas de estilo.

Otro tema sobre el que estuve leyendo fue accesibilidad, por lo que poco a poco estoy convirtiendo al sitio en una web 100% accesible. Hay una barrera importante en lo que se refiere a la galería de arte digital, por lo que representa en sí a veces se complica hacerla completamente accesible.

Hace un tiempo escribí sobre esto mismo, por aquél entonces el sitio figuró en el puesto Nº44, luego del rediseño subí al puesto Nº23. Nada mal, esta vez hecho un poco más a conciencia.

Ahora valido en casi todas las páginas html, feed y css.

[Valid RSS]
pondría el de CSS, pero en este momento no funciona.

Por supuesto, si están usando el IE6 seguro que todo se ve mal. No me importa, ya estoy cansado de pensar en un navegador que tiene 6 años de antigüedad. Acaso alguien hace software para W98, o W95?

Pequeños detalles

20 de septiembre de 2007 | 1:13 am

En los últimos días dediqué algunos ratos libres a limpiar el código de este sitio, especialmente del CSS. No es demasiado, pero necesario, y me gusta más, que es lo que me importa.

Tengo pendiente (muy atrasado ya) algunos tutoriales de hojas de estilo, diseño, PHP, MySQL, programación, Flash y AS. Intentaré que se vuelva una tarea del día. El espíritu en verdad es hacerlos por diversión y gusto, pero creo que de seguir esperando el momento indicado, jamás los publicaré.

Hablando de publicar, terminé dos sitios web, dos logos y una animación de logo de los que no mostré nada. Está claro que no soy vendedor

Estadísticas

6 de julio de 2007 | 3:55 pm

Semanas movidas las que pasaron. No me dejaron demasiado tiempo ni para postear algo, ni leer blogs, ni para continuar con las imágenes que tengo empezadas para el concurso de Ballistic, ni etc.

Lo que si pude hacer es revisar algunos datos estadísticos de mis sitios, para eso siempre hay tiempo. Asi que vean lo siguiente:

Esto corresponde a los navegadores de las visitas de este sitio, según Statcounter (es gratuito, no es la gran cosa, pero cumple), en donde sigue dominando el peor navegador, no sólo de la actualidad sino desde hace unos años. Sin embargo, el 39% no lo usa. Eso es positivo, a pesar de que hay alguien que usa la versión 5. El Opera es un gran navegador, pero casi nadie lo usa. Mi teoría al respecto es la pésima campaña de marketing que tienen. Hace unos meses quise poner un banner para bajarlo, sin encontrar un sitio del estilo SpreadFirefox. Por supuesto que no busqué profundamente. Lo cierto es que al de Firefox no lo busqué, llegué, mientras que hoy encuentro My Opera. Se entendió la diferencia entre encontrar el sitio y llegar al mismo, no? porque no quiero que me digan “ehh… hace años que existe”, aunque si me guío por las estadísticas, nadie hará ese comentario.

Sigo con estadísticas y comparo ahora con Google Analytics. Interesante, el 61% usa Explorer, y Firefox tiene el 31%. Un lindo porcentaje, mayor al que midió Statcounter. A cuál de los dos creerle? En eso no me meto, pero lo que es una certeza es que Analytics registró correctamente mi celular. El servicio de estadísticas de Google cambió su servicio hace unas semanas. Lo que puedo aportar a tooooodos los análisis del sistema que se leen por todos lados, es que efectivamente es mucho más simple y efectiva la distribución de los reportes. Nada que no sepa un geek.

Y por supuesto, el IE6 sigue ganando en el ranking. Me cuesta entender esto. Creo que es en este tipo de dato cuando uno puede tomar la real dimensión de las técnicas de “monopolio” de Microsoft. Porque el usuario es libre de instalar el navegador que le guste, eso está claro. También está claro que entrar a un sitio, bajar un programa e instalarlo es una pérdida de tiempo para el usuario medio, ni hablar si le sumamos unos minutos para conocer el mercado y decidir cuál es el mejor navegador.

Finalmente, saben que significan estos números? Si dijeron que voy a cambiar el diseño del sitio para darle prioridad a resoluciones mayores a 800×600, están en lo cierto. Porque es otra de las cosas que siempre quise hacer, y estoy adaptando las hojas de estilo para tener un alto rendimiento de resoluciones. Sin javascript que cargue una hoja u otra, sin javascript que escriba un código u otro. Una solución que tiene hacks, pero no scripts. ¿Validar CSS? y para qué sirve eso? Sobretodo si la mayoría usa IE6. Cuando el porcentaje de ese ¿navegador? disminuya al 10%, mis sitios validaran todo. Mientras tanto, me aseguro que más o menos vean las cosas como quiero.

Qué contás?

20 de junio de 2007 | 1:29 am

Justo que parecía que arrancaba con la costumbre de postear seguido, tengo un pausa de casi un mes. La verdad que temas para postear no me faltaron, lo que sí faltó y durante un tiempo fueron ganas. Tuve una pérdida importante el mes pasado, mi perro falleció y eso me afectó y mucho. Hoy ya estoy mejor.

Como dije, temas para escribir acá no me faltaron, y voy a decir los más importantes (si bien la idea es empezar a postear más seguido, quizás con temas más cotidianos, no voy a escribir sobre ellos ahora):

Trabajo

Sigo trabajando como Diseñador Multimedial Free-Lance, pero ya no estoy solo. Viviana ya fue mi compañera de curso en Da Vinci y ahora lo es laboralmente. Ya concretamos algunos trabajos, y a medida que vayan avanzando los proyectos iré mostrando previas por acá.

Tutoriales

El tutorial sobre .NEF con el que inauguré la sección es consultado diariamente, lo que motiva aún más el seguir. La idea es Photoshop y CSS, dentro de lo posible dando algunas de las soluciones que uso en los sitios que voy diseñando.

Arte Digital

Ballistic Publishing está juntando material para su nuevo libro. Asi que allí enviaré algunas imágenes publicadas, y estoy haciendo dos más exclusivas para la ocasión.

Celular

Los que me conocen saben que hay muchas cosas sobre los celulares que odio… especialmente cuando aquellos que no pueden vivir sin él son los más incomunicados.

Cuestión que me veo en la necesidad de tener uno, y el elegido es el Sony Ericcson K310.

En mi caso, el consumo del celular pasará más por las veces que use el navegador web que en llamados. En fin… el que quiera el número, me avisa por otros medios (capaz que pongo el número acá).

Bueno, por ahora nada más. Y ya advertí que el uso del blog pasará a ser un poco más informal.