Pues tal como dice su nombre, son pequeños tutoriales sobre ajax… si eres novato no te sientas afuera, prueblalos que son muy faciles.
miniajax

Lamentablemente por ahora no estoy teniendo mucho tiempo para sentarme y hacer un tutorial para todos, pero si tengo tiempo para compartir los tutos que yo conozco, hoy les paso un interesante y sencillisimo tutorial en el cual nos enseñan a crear un mapa con illustrator.

Hace tiempo que tenía ganas de hablar sobre este tema, es decir porque elegir a uno o al otro? Como saber que formato me serviría mas para una determinada situación y todo este tipo de inquietudes que se te puedan ocurrir.

Bueno empecemos por lo básico: supongamos que tenemos una imagen de forma cuadrada “sin transparencia” y colores planos (nada complicado), en este caso que usarían gif o png?… examinemos juntos los dos resultados con los distintos formatos:


A simple vista no logro notar ninguna diferencia, pero no se olviden que en el diseño web algo muy importante es el peso de las imágenes, entonces: el gif pesa alrededor de 320 bytes, mientras que el png pesa 282 bytes. Por lo tanto, en este caso la mejor opción es el png.

Sigamos avanzando, ahora vamos a crear un grafico con formas desparejas, con bordes redondeados, coloreada con un degrade y sin transparencias. Veamos que pasa:


Si observamos con precisión, podremos notar que la imagen con mayor calidad es el png, en este el degradado esta perfecto, no tiene ningún tipo de desperfectos y pesa alrededor de 4,30 KB. Por otro lado tenemos al gif de 256 colores, a simple vista se ve perfecto igual que el png, pero si lo miramos con lupa podremos notar desperfectos en el degradado y como si fuera poco su peso es superior a el del png, pesa 5,42 KB. Por ultimo tenemos al gif con 128 colores, no tenemos mucho que decir realmente, es un desastre, se puede notar a simple vista los desperfectos del degradado, la única ventaja que tiene es su peso 3,68 KB, pero por un par de Kilo bytes mas prefiero usar el png que esta perfecto. Por lo tanto, a la hora de usar degradados el ganador es el png, por peso y calidad.

Ahora, vamos a crear una grafica con colores, una estructura simple y con transparencia para ver que pasa:


Aquí es cuando la situación se comienza a complicar. Primero evaluemos calidad y peso: a nivel calidad el gif como el png se ven exactamente iguales, por que lo son. Pero cuando nos detenemos a mirar el peso encontramos una diferencia de casi 1 KB. Entonces es fácil ¿nos quedamos con el png y su transparencia nuevamente?… yo diría que estudiemos mas a fondo la situación, como un buen diseñador web tenemos que tener en cuenta los distintos navegadores que encontramos hoy en día y saber que internet explorer 6 no soporta las transparencias del png a menos que usamos algún hack o por medio de algun condicional*. Tenemos dos alternativas, usar el gif con 1 KB mas de peso o usar el png por medio de un hack, directamente nos quedamos con el gif, ya que la diferencia es casi nula y nos ahorramos un par de vueltas.

Por ultimo vamos a hacer lo siguiente, tomaremos un grafico complejo con degradados, formas irregulares y transparencias para evaluarla con los dos formatos:


Voy a tratar de explicar de mejor forma este punto, sencillamente png es la mejor opción para exportar nuestros gráficos complejos con transparencias, ya que su calidad es perfecta y la transparencia es respetada en todos los aspectos, lo único malo que rescato de este formato es el peso, como verán es de 41,7 KB (un poco pesado), sin embargo lo vale. Por otro lado tenemos al gif, su calidad es media, ya que si observamos con precisión podremos notar desperfectos en el degradado de la figura, lo cual nos resta calidad a nuestro trabajo, también cabe destacar el tema de la transparencia la cual debido a la sombra del objeto queda muy desprolija, lo único bueno es el peso 15,6 KB pero no se justifica para nada, ya que su calidad es espantosa.

Que sorpresa me lleve hoy, al encontrarme en “google” con este link y leer que mi nombre se mencionaba dentro del post.
Para aquellos que no saben que es Catalizado les comento que es una impresionante galería/blog, la cual se encarga de mostrar los mejores diseños/diseñadores que podemos encontrar en latino América, y Artzmania Magazine es una revista virtual sobre diseño grafico con un nivel y estilo único, en lo personal me encanta.



Bueno, sigo con mi historia… resulta que estaba navegando por la blogosfera cuando de pronto me encuentro con “Catalizado + Artzmania Magazine”, este post me llamo poderosamente la atención, ya que meses atrás me llego un mail de “Catalizado” en el cual me pedían un par de trabajos realizados por mí, junto con mis datos… como yo conocía la web, creí que simplemente iban a mostrar mis diseños en su galería, pero eso nunca paso, lo cual me extrañó mucho, ya que por algún motivo me pidieron mis trabajos, no? Tiempo después leyendo me entere sobre la asociación de Catalizado con Artzmania Magazine y así fue como comencé a investigar sobre el tema y me tope con que mis trabajos habían sido incluidos en la nueva revista :), junto con numerosos diseñadores muy talentosos y reconocidos a nivel mundial, como por ejemplo:


Entrevistas: Adhemas Batista (Brasil), Claudio Limón (México), Felipe Medeiros (Brasil), Marcelo Grassi (Argentina), Marcio Bomfim (Brasil) y Ricardo Liniers (Argentina).
Muestra de Trabajos: Diego Miguel (Brasil), Diego Quintana (Chile), Felipe Bustamante (Chile), Giovanni Clavijo (Colombia), Javier Garay (Chile), Katherine Lippi (Chile), Lucas Savelli (Argentina), Mario Júnior (Brasil) e Ruyman Gilbert (Venezuela).

Bueno, mientras trabajaba con el css de un cliente, se me ocurrio escribir este post... Muchas veces los diseñadores web nos encontramos con problemas de diversos tipos a la hora de maquetar una web por medio de css ( hay problema con los navegadores, los margenes no son los mismos, las medidas no se respetan, etc. etc. ). Tenemos distintas alternativas para eludirlos: muchos recurren a los Hacks (por medio de scripts), otros simplemente crean un nuevo css para un bronwser en especifico y otros (como yo) usamos "condicionales", condicionales? sip, o por lo menos asi los llamos yo :P


Por ejemlpo, tenemos un "margin: 0 0 10px 15px;" y en IE6 el margen se deforma y se hace un poco mas largo, ¿que podemos hacer entonces?:

Por medio del guión bajo ( _ ) le indicamos al css que solo nos estamos refiriendo a internet explorer 6 por lo tanto, todos los atrivutos que especifiquemos con un guion bajo adelante, nada mas seran atribuidos a IE6...


¿Que pasaria si el problema de margenes no solo esta en IE6, sino tambien en EI7?

Con un simple asterisco (*) por delante del atributo, el css entiende que solo nos estamos referiendo a IE6 e IE7, sip ambos navegadores.


y... ¿si el problema esta solo en IE7?

A traves del asterisco (*) al inicio y el "!important" al final, nos referimos unicamente al IE7


También podemos conbinar los condicionales si queremos atribuir distintos valores a los distintos browsers, por ejemlpo:

De esta forma 10px de margen inferior sera para Firefoxs, 7px sera para IE7 y 5px sera para IE6...


y por ultimo, si solo queremos modificar algun atributo solo en Firefoxs, haremos lo siguiente:

Con el "!important" al final, se entiende que solo hablamos de Firefoxs...