jueves, 9 de abril de 2009

Cuántos bits tiene un byte?

Respuestas: qué es eso, no sé, depende de la resolución, depende de la velocidad de "tu internet", depende del mp3, etc....

Cómo es posible que un profesional que trabaje en desarrollo o actividades relacionadas (diseño, edición, etc.) no sepa algo tan fundamental.

Desde las diferencias entre usar los diferentes formatos gráficos (GIF, JPG, PNG, etc.), pasando por la calidad del audio de un archivo MP3, la velocidad de descarga, el peso de las páginas, la codificación de caracteres (ANSI, UTF, etc), el modelado de bases de datos, la resolución de las pantallas, los colores, etc. etc... (5000 etcs más), TODO parte de bits y bytes.

Si no se entiende algo tan básico, entonces todo lo demás estará construido sobre aire.

--- Un ejemplo ---
Una simple página html. Claro, la página por sí misma no pesa mucho, pero tiene gráficos y según el contenido de cada imagen, uno opta por GIF, JPG o PNG. GIF si los colores son "horizontalmente" planos y pocos, JPG si son fotografías, PNG si no son muy grandes y se necesita transparencia (logotipos, formas, etc.).

GIF admite hasta 256 colores, pero por qué ese número? Porque cada punto se almacena como un byte, que es un número entre 0 y 255 (256 valores posibles).
Por qué? Porque un byte se compone de 8 bits (dígitos binarios) y el máximo número de 8 digitos binarios es 11111111 que equivale a 255.

GIF es ideal para comprimir colores planos porque si un byte se repite N veces, entonces sólo se graba UNA vez el valor y luego se indica cuántas veces se repite. Toda una línea de 1024 pixels del mismo color, se graba en apenas 2 o 3 bytes y no en 1024. La compresión es enorme y la calidad perfecta.

Bueno en realidad es perfecta dependiendo de la cantidad de colores de la imagen, ya que GIF utiliza una paleta, es decir, una selección de hasta 256 de los colores más usados por la imagen. Al almacenar el gráfico no se graba realmente cada color, sino el índice en la paleta al que corresponde dicho color.

Y cómo se graba cada color? Cada color se representa como 3 valores básicos, uno para el rojo, otro para el verde y otro para el azul. Cada color básico tiene 256 posibles variaciones (otra vez ese numerito), por qué? porque cada color se guarda como un byte (de nuevo los 8 bits que permiten almacenar un número entre 0 y 255).

JPG en cambio guarda cada punto directamente como 3 bytes sin usar una paleta, pero utiliza una técnica de compresión por pérdida de calidad. Si cada color se puede expresar como 3 números de 256 posibles valores cada uno, tenemos 256 x 256 x 256 que nos dan los famosos 16 millones de colores (aprox) que admite dicho formato. El ojo humano a duras penas logra distinguir tal gama de colores así que en la práctica no se necesita más.

PNG usa una compresión parecida al GIF así que ya se pueden imaginar que "es pesadito". Además PNG usa un byte adicional para la transparencia (tambien expresada en 256 posibles valores). PNG es útil para formas que deban verse bien, no sean muy grandes y especialmente si requieren transparencia.

--- fin del ejemplo ---

Quizá mareó un poco lo anterior verdad? Pero para realmente lograr que una página pese poco, se deben aplicar correctamente los formatos gráficos, pero si no se sabe algo tan básico como bits y bytes, cómo se podrá comprender lo anterior?

Lo mismo se aplica a los caracteres ASCII, ANSI, UTF8, etc.

Sabían que cuando mandan un attachment por mail, durante la transmisión mide 30% más aprox? Por qué? porque se debe expresar los bytes del archivo como caracteres estándar dentro del mail (que sólo admite 7 bits), así que algunos valores deben expresarse en varios bytes.

...y así podría dar N ejemplos, en otro momento quizá profundice sobre los formatos gráficos o por qué alguien caprichosamente quizo usar 8 bits y no 10, 5 o 1 (o quizá no fue un capricho? todo tiene su explicación), por ahora sólo he querido mostrar la importancia de algo tan elemental en el trabajo diario de un desarrollador, diseñador, etc.

Pueden empezar por Wikipedia: BIT y ya si son "atrevidos" lean sobre numeración hexadecimal.

Qué se diviertan :)

El código es tu amigo

He hecho reir a muchos con esta frase, pero su significado oculto no es para reirse.

El software libre es algo muy bueno pero está causando -al menos en mi país: Perú- un efecto secundario muy peligroso. Los nuevos "profesionales" ya no quieren programar, sólo buscan copiar y adaptar lo que ya existe.

Así pues el panorama de soluciones se está volviendo bastante aburrido: Joomla, Drupal, Moodle, etc.

Por último estas aplicaciones son personalizables, pero ni eso quieren hacer. Es decir, en lugar de crear un estilo (css) único, recurren a plantillas!

Le tienen pánico al código? Tienen la más mínima idea de cómo crear una simple rutina recursiva para calcular el factorial de un número? Nooo, pero es común escucharlos hablar como expertos respecto a las aplicaciones antes mencionadas. "Saber Joomla" (!!!????). Hasta hace algún tiempo los que sabían C++ o Java eran los expertos mientras que los que usaban scripts (ASP, PHP, etc.) eran los "apurados" o menos expertos (por ser suave). Ahora ya ni eso!

Existe tal cantidad de scripts en internet y mucha gente simplemente los baja aún sin entenderlos del todo. Si sabes "instalarlos" ya "sabes".

Señores: el código es su amigo, un verdadero profesional no tiene reparos en utilizar Notepad (o incluso "vi" en Linux). Piérdanle el miedo, la prueba de fuego es crear un web simple sin más herramientas que un editor de texto simple:

Una página HTML, su respectiva hoja de estilos, un archivo externo de código javascript y con eso tendremos un buen comienzo. Luego algo de código en PHP (o similar), quizá un poco de XML y habremos comprendido muchísimo más. Luego pueden volver a sus herramientas habituales (Dreamweaver no? Si pues, otro caso de herramienta que "los que saben, deben usar"). El haberlo hecho a mano algunas veces les ayudará muchísimo a entender los principios básicos, por qué aparecen errores inexplicables, por qué es mejor hacer las cosas de tal o cual forma. Creanme que con el tiempo, les parecerá una pérdida de tiempo usar editores y si son enfermizamente perfeccionistas como yo, entonces nunca más instalarán otra cosa que no sea un mejor editor "de texto" (mi favorito: Notepad++)

Lo mismo con el código copiado. Intenten entenderlo, no lo peguen por pegar. Pueden estar introduciendo un riesgo de seguridad. Además puede que pierdan algo de tiempo la primera vez, pero luego, cuando vuelvan a estar ante una situación similar, podrán aplicar la solución muy rápidamente y adaptarla. Mejor aún si crean su propio código!

Hace algunas semanas me topé con una solución de una pequeña empresa norteamericana que querían desplegar usando nuestro servicio de hosting. La aplicación web estaba construida nada más y nada menos que en C++! construida con CGIs, pero usando plantillas, con separación de código y todo. Me gusto la simpleza y elegancia de su solución. Quizá sea algo extremo usar C++ para una aplicación web en estos tiempos, pero fue bueno ver algo distinto a lo común de estos días.

En VIS tenemos una política: el código tiene que ser nuestro, evitamos en lo posible usar librerías o rutinas de otros. Sólo así podemos garantizar que nuestras soluciones funcionarán como nosotros queremos. Desde nuestra propia plataforma (CMS), nuestros propios módulos, librerías, etc. Salvo necesidades muy puntuales o demasiado especializadas, todo el código es nuestro y lo comprendemos a la perfección.

...porque si seguimos así, dejaremos de tener desarrolladores y pasaremos a ser simplemente "copiones" de lo que otros crean. Y así, cómo evolucionaremos? Seremos más dependientes que nunca!

Señores, programen! dejen de copiar!

Chrome!

En los últimos años ha habido un cambio drástico en los navegadores de internet. Nosotros en VIS hemos vivido casi toda la historia, desde aquellos días en que Netscape era el navegador dominante.

Qué complicado era al principio! Los webs tenían que ser extremadamente simples, para evitar problemas con aquellos que no soportaban tablas o que no ejecutaban javascript (sí... hace mucho, mucho tiempo). Aún recuerdo la "promesa" Java, que nunca terminó por imponerse, recuerdo la primera vez que ví una animación vectorial en web y luego de investigar descubrí que era Flash! pero estaba en pañales y sin embargo, logró lo que Java no consiguió! (al menos en el entorno web).

Internet Explorer

La verdadera revolución vino con Internet Explorer 4: muy criticado, lento, lleno de bugs, etc. pero -aunque algunos se rasguen las vestiduras por mi comentario- el mejor de entonces. El hecho de que cualquier elemento HTML pudiera ser modificado, más la semilla del Ajax que ya llevaba, permitían todo un nuevo abanico de posibilidades.

Las controversiales medidas de Microsoft causaron su masificación (vencedor de la primera guerra de browsers) y la virtual inexistencia (en la práctica) de estándares, ocasionó que los sitios web se orientaran principalmente a este navegador. Y era una cuestión matemática, bastaba ver las estadísticas de cualquier sitio web y ante más del 95% de utilización de Internet Explorer, resultaba casi absurdo desperdiciar recursos y agregar limitaciones por aquel otro porcentaje mínimo. Más que un tema técnico, era un tema de costo-beneficio.

Y asi durante muchos años el "estándar" de facto era la orientación del código hacia Internet Explorer.

Aún recuerdo el trabajo enorme que nos costó que LaNet (un antiguo proyecto nuestro de finales de los 90) pudiera operar en Explorer y Netscape "casi" sin problemas. En gran parte gracias a Java (Flash aún era una curiosidad rara, muy muy rara).

Firefox

Confieso que nunca he sido precisamente un fan de Firefox, principalmente porque debido a mi trabajo tenía que preocuparme del porcentaje mayoritario de personas que usarían nuestras creaciones. Incluso llegamos a darle más importancia a Safari, debido a que otra de nuestras creaciones -Caretas-, era muy usada en Macs. Fue muy problemático garantizar que funcionara bien con Safari, porque no teníamos uno. Tuvimos que usar un Linux virtual (VMWare) ejecutando Konqueror (la base de Safari) para "acercarnos" lo más posible (mucho despues llegaría la versión Windows de Safari).

Finalmente, las estadísticas empezaron a cambiar: de pronto Internet Explorer perdía terreno, Firefox subía respetablemente, Safari ya no aparecía en "otros", etc. Luego vendría el iPhone y todos los celulares con navegadores, etc. Los estándares finalmente habían madurado.

...y apareció Chrome!

Me rindo ante su sencillez, limpieza y velocidad. En apenas horas hizo lo que Firefox nunca pudo: arrancarme de Internet Explorer. Cuál es mejor? No hay que complicarse la vida, es una mera cuestión de gustos! A mi en particular nunca me ha gustado usar un producto simplemente "para parecer que sé" del tema, algo que he notado con Firefox. Es como un sello distintivo: si usas Firefox es porque "sabes", de lo contrario eres un Lamer :) bueno, a mi me gusta Chrome! lo siento mucho.

Su forma de manejar la memoria, priorizando seguridad e independencia y no tanto ahorro (o quizá otra forma de ahorro?), su motor de javascript mucho más rapido que los otros, su interface tan limpia y sin miles de opciones, en resumen: ese estilo "minimalista", terminaron en conjunto por gustarme mucho.

Claro que son otros tiempos: con los estándares tan masificados hoy hacemos las pruebas con IE 6, 7 y 8, Firefox, Safari y Chrome (además de nuestros celulares con Windows Mobile, en mi caso ejecutando NetFront). En esta nueva realidad, el problemático casi siempre resulta siendo IE, pero nada que una hoja CSS secundaria (de 3 o 4 líneas) no pueda resolver.