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

setInterval error en Chrome y Firefox

22 de enero de 2012 | 5:46 pm

Hace unos días encontré un error en una animación que hice en jQuery, que hace uso de setInterval.  SetInterval existe para ejecutar una función cada determinada cantidad de tiempo. Supongamos que estoy en un sitio que hace uso de esta función, pero después voy a otro tab del browser, y me quedo navegando allí durante unos minutos, eso quiere decir que en otro tab (que no estoy viendo…) se debería estar ejecutando una función.

Firefox y Chrome evitan que las funciones con setInterval se ejecuten si uno está viendo otro tab. Tiene sentido, intentan ahorrar memoria para ponerla, justamente, donde el usuario esté mirando. El único problema es que en vez de hacer un “pause”, lo que hacen es ir guardando todas las veces que se deberían ejecutar. Lo que provoca que cuando finalmente vuelvemos a hacer foco, se ejecutan una detrás de la otra!

La solución es increiblemente fácil cuando las funciones con setInterval involucran animaciones, como en mi caso.

Primero les muestro el còdigo sin la corrección:

function magic(elemento){
	$(elemento).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Este código lo que hace es mover un div hacia la izquierda y abajo, y luego hacia la posición original, provocando un ligero temblor. Para ejecutarlo, uso por ejemplo:

setInterval("magic('.banner')",5000);

Lo que hace que cada 5 segundos, el div banner tiemble. Al perder el foco y luego volver al tab, la ejecuciòn en cadena hacia que el banner se fuera no 1, sino por ejemplo 200 pixeles hacia la izquierda (y hacia abajo…). Quedaba horrible por el hecho de quedar en cola de ejecución la función de temblor.

La solución es borrar lo que haya en memoria:

function magic(elemento){
	$(elemento).stop(true,true).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Así de simple…

Explorer atrasa

4 de marzo de 2011 | 5:02 pm

En mi vuelta al desarrollo web en relación de dependencia, me he vuelto a encontrar con un viejo conocido por todos aquellos que se dedican al diseño/programación/maquetación web: Internet Explorer 6.

Habiendo ya betas del IE9 dando vueltas, y estando en el mercado el IE7 e IE8 desde hace tanto tiempo ya, no tengo manera de imaginarme el tipo de usuario que elige al IE6 para navegar diariamente.

Justamente hoy, me entero de ie6countdown.com, una iniciativa que parte desde el mismísimo Microsoft.

Quienes me conocen saben la cantidad de luchas que le he ganado al IE6, como así también saben que ya no quiero hacer más nada compatible con este navegador.

Para todos aquellos que como yo aún deben “solucionar problemas” del IE6, les dejo un listado de herramientas que les pueden ser útiles:

  • Explorer 6: para testear, necesitamos el navegador. Antes solía usar Multiple-IE, pero hoy en día utilizo IETester, sobretodo por si lo que hay que testear es un formulario (los formularios en Multiple-IE no funcionan).
  • ie7.js Project: con este javascript convertimos al explorer 6 en casi casi un navegador en el que se puede maquetar un sitio web.
  • Companion JS: para cualquier versión de explorer, este javascript te permite tener un Firebug en el explorer, y hacer debug de javascript.

Hay miles de cosas más para testear y usar, acá les dejo un compilado más completo que el mío.

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?

18 de junio de 2009 | 5:33 pm

deep, deeper…

9 de mayo de 2009 | 1:56 pm

dos semanas a puro jquery… es buenísimo, pero la documentacion es horrible

Unicode para javascript

1 de marzo de 2009 | 4:08 pm

Para los que como yo quieren poner tildes en los alertas de javascript:

  • \u00e1 -> á
  • \u00e9 -> é
  • \u00ed -> í
  • \u00f3 -> ó
  • \u00fa -> ú
  • \u00c1 -> Á
  • \u00c9 -> É
  • \u00cd -> Í
  • \u00d3 -> Ó
  • \u00da -> Ú
  • \u00f1 -> ñ
  • \u00d1 -> Ñ

Firefox 3

17 de junio de 2008 | 10:22 pm

Hoy es/fue el Download Day de Firefox 3. Para los que no saben, te invitaban a bajar en navegador hoy para establecer un record Guinness.

Ya lo baje en el laburo, y estoy haciendo lo mismo en casa. Pero acá no lo voy a instalar aún, porque lo mejor que tiene Firefox son las extensiones, y con esta versión no son compatibles las que más uso, como el Firebug.

En cuanto estén (que calculo será mañana, o a lo sumo pasado) lo instalaré acá también.

Todavía no pude testearlo a fondo, pero ya vi es que no se llevó para nada bien con Mootools, especialmente con el nuevo header en el que tanto trabajé estos días.

Habrá que ver… si mal no recuerdo, al salir el Firefox 2 en menos de una semana había una actualización.

Ctrl + F5

16 de junio de 2008 | 4:04 pm

Era hora de emprolijar el sitio, y qué mejor que un fin de semana largo para esto. Toquen Ctrl+F5 si estuvieron hace poco, porque sino no les va a funcionar nada.

Saqué la cabecera con la imagen en random, es suficiente con la que está en la home… aparte no lograba motivar al público a ver el resto de las galerías. O sea, tengo muchas visitas paracaídas, que entran directamente a la página de una de las imágenes (especialmente la de Jack Skellington) y no ve el resto.

La actual cabecera está hecha con Mootools, un framework en javascript que ya vengo usando y del que debería indagar más.

El mejor cambio es el que vine haciendo de a poco, unificando la estética de todo el sitio. Por algún motivo que desconozco, usé varios recursos gráficos para mostrar cosas similares en distintas partes del sitio. Supongo que habrá sido por no hacerlo de punta a punta, habiendo hecho otros sitios en el medio. Todavía falta un poco más de esto, pero los cambios eran los suficientes como para poner todo online.

Al día

29 de julio de 2007 | 9:30 pm

Me llevó todo el domingo leer los cientos de post que acumulé durante las últimas ¿3 semanas? Este es uno del motivos de mi posteo anterior, me gustaría dedicar tiempo a leer los post del día durante la semana, pero terminaba cansado como para ponerme a leer todo.

Como es de esperar de un blogger (no sé si entro del todo en esta categoría), leo blogs que escriben sobre blogs. Y la verdad, tengo que depurar eso. Le doy la razón a Fabio en que la peor categoría es la que eligen Adsense como tema de lectura.

Cuando me preguntan sobre posicionamiento-Google-Adsense les hablo sobre mi experiencia con este sitio, en donde sin ser un gran posteador, sin tener en cuenta las palabras claves, sin hablar del iPhone, ni tantas otras cosas, mi sitio no sólo está indexado como corresponde, sino que no se vuelve una tarea imposible encontrarme en la web. No hice nada especial para ello, de hecho, debería dedicarme más a generar contenido. Porque si hay algo que no hago es copy/paste de otros sitios. Aparte de que tengo ideas para ampliar este sitio, pero por ahora no puedo dedicarme.

Volviendo un poco sobre lo que estuve leyendo, el spam siempre será motivo de queja, y cómo agregan y desarrollan mejores captchas. En breve estaremos relanzando el sitio de Cadmus, con el mejor captcha que encuentro, formularios en flash. Flash lo tienen instalados todos, y me parece un buen lugar en donde utilizarlo.

Y ya que me fui para el lado del desarrollo, AJAX está bueno, pero no deja de ser Javascript, o me equivoco? Lo admito, tengo que estudiar más el tema, pero de ser así el problema con AJAX es el mismo que con javascript, si el usuario lo tiene bloqueado, se vuelve innavegable, al menos que su función no gravite en la usabilidad del sitio. Como dije, tengo que leer sobre el tema.

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.