El diseño visual está lejos de ser “un dibujito a la rápida”, aunque sigo encontrándome con ese tipo de solicitudes. En la web es consecuencia de un proceso cada día más científico de DCU. Pero ¿quién traduce el diseño visual para navegarlo y crear un buena experiencia en los usuarios?

Somos los Diseñadores gráficos que debemos tomar el guante y hacernos responsables y no los programadores o ingenieros.

Nada personal,  es más accesible aprender lenguajes como HTML y CSS por ser más acotados.  En el pasado expliqué ¿Qué es el diseño Front? y teniendo eso en cuenta, lo siguiente.

El dominio del HTML y CSS no basta, si bien es fundamental, no basta. Se necesitan conocimientos y experiencia, como en cualquier oficio o profesión. En este caso, teoría de color, estudio de tipografía, composición de elementos, equilibrios visuales, etc. Elementos que construyen  una sensibilidad que hay que saber utilizar, leer, reconocer e interpretar.

Repito, sin dominar el Front no llegamos a ningún lado. Dominándolo podemos hacer una óptima traducción de la propuesta visual, desarrollada en un lenguaje gráfico, en valores de luces, sombras, pesos visuales, dominios del blanco, etc. plasmando correctamente el objetivo, concepto e idea generatriz del proyecto. Traducción o interpretación que por cierto debe tener sentido, ser semántica.

Cuando no dominamos (Diseñadores, Programadores e Ingenieros por igual) alguno de estos lenguajes, Visual, HTML, CSS es cuando los diseños se distancian de las propuestas visuales, cambian los márgenes, tipografías, desaparecen iconos, etc. y pierde el valor o parte de él, el mensaje que se queire entregar.

El Diseño no es “el arte“. Helarte es lo que sientes antes de congelarte.

Cuando Darcy me invitó a exponer sobre HTML a sus alumnos de periodismo de la PUCV el desafío era, como en muchas charlas individuales, que entendieran en cortos 90 minutos la lógica, objetivo y beneficios de un Lenguaje de Marcado, de hecho él lenguaje de marcado más extendido actualmente.
Lo principal es asimilar que el Lenguaje de Marcado no es un invención digital y mucho menos de Internet. Un claro ejemplo que lamentablemente no pude aplicar es el dictado a viva voz para ser transcrito a máquina de escribir.

“Ponga estilo de carta. ponga comillas, ponga mayúsculas, Estimado Juan, ponga dos puntos, aparte, sangría, ponga primera letra mayúscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado… etc”. Lenguaje de Marcado

Se puede fijar como su inicio junto con la industria editorial pues consiste principalmente en marcar los textos manuscritos con indicaciones para identificarlo claramente según Presentación, Procedimientos o Descripción. Siendo esta última clase a la que corresponde el HTML.

Para qué sirve

Describir estructura y contenido, complementar el texto con Objetos, se escribe en forma de “Etiquetas” y rodeada por corchetes angulares.

Dicho esto les dejo la presentación que utilicé para la clase.

Como yo ¿Usas Sprites y no lo sabías? por lo menos con ese nombre

Sprites es una técnica front de optimización de sitios basada en la fusión de imágenes en una sola para posteriormente ser separadas mediante CSS.

• Reduce principalmente el peso de las páginas
• Disminuye de manera considerable las peticiones HTTP
• Minimiza sustancialmente la cantidad de imágenes y
• Optimiza el peso total de los archivos externos al HTML consumiendo menos ancho de banda.

Dejo la presentación de la charla

Escribo un poco de:

• Contexto de la charla
• Origen del término Sprites
• Sprites en la Web
• Mejor buscar por Sprites CSS
• Links de las principales referencias, artículos, tutoriales, screencast y generadores de Sprites

Un poco de contexto

Cuando Juan Carlos me invitó a dar una charla me comentó que se trataba de Sprites y francamente no me sonó para nada el término ¿Sprites? como la bebida, pero cuando me dijo más menos de que se trataba me di cuenta que hace años venía aplicándolo y luego recordé que hace una par de años conocí el término Sprites, el que claramente olvidé. Finalmente armando la clase me di cuenta que tuve la suerte de conocer esta técnica desde que la web la heredó.

Origen de Sprites

Es una técnica que surge con los video juegos, hasta el término suena rancio, estoy hablando de 1980, de la mano de los Atari800 y llega a su máxima expresión en 1992 con Mortal Combat. Juego que revoluciona con una gráfica basada en fotos de actores reales, digitalizadas y aplicadas con esta técnica. Realmente revolucionó lo conocido hasta entonces. Entonces aparece la tecnología 3D que deja la técnica Sprites obsoleta, por lo menos  en lo que a Video Juegos se refiere.

Formalmente son agrupaciones de imágenes generalmente sobre fondo transparente que se muestran por partes de forma enmascarada y pueden llegar a representar movimientos, mediante reemplazos de otras secciones de la máscara.

Sprites en la WEB

La web hereda Sprites por el afán de optimización del Checo Petr Stanicek [1] quien buscando una alternativa a los botones implementados con reemplazo de imágenes mediante Javascript aplica, sin referenciar el término sprites, la técnica utilizando CSS. Disminuyendo considerablemente el peso de las páginas, la cantidad de archivos y por consiguiente los HTTP request y el consumo de ancho de banda.

Solo un año después Dave Shea [2] publica un post bajo el título de CSS Sprites – Image Slicing’s Kiss of Death. Hace referencia a Petr y se convierte en la mayor referencia en la web sobre Sprites con ejemplos muy bien explicados y disponibles para su estudio.

Se encuentra más directamente por Sprites CSS

Bajo estos términos “CSS Sprites” encuentras información relacionada a la Web específicamente al Front (HTML/CSS/Imagenes) pues si buscas solo Sprites llegarás principalmente a los VideoJuegos.

Pero acá están los links que considero relevantes

Principales referentes

[1] http://wellstyled.com/css-nopreload-rollovers.html
[2] http://www.alistapart.com/articles/sprites/

Artículos/Tutoriales/Listas/ScreenCast

http://www.tufuncion.com/css-sprites/
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites2/
http://www.csslessons.com/
http://adamducker.com/blog/7/use-css-sprites/
http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/
http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://www.romancortes.com/blog/la-tecnica-de-sprites-css/
http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://borkweb.com/story/faster-page-loads-with-image-concatenation/
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/
http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Generadores de Sprites/CSS/Imagenes

http://spriteme.org/
http://css-sprit.es/
http://printf.ru/spritr/
http://www.floweringmind.com/sprite-creator/index.php
http://drupal.org/project/sprites
http://www.csssprites.com/
http://es.spritegen.website-performance.org/
http://csssprites.org/

Otros

http://es.wikipedia.org/wiki/Sprite_(videojuegos)

Un par de post anteriores expuse las imágenes que hasta hoy me tienen intranquilo, preocupado y bastante molesto. También son estas imágenes las que me están dando energía para que precisamente no se repitan. Sobre todo los que quedan vivos y temerosos en esta demolición.

Mi respuesta al siguiente email

Don Maximiliano

El proyecto, aprobado por la Ilustre Municipalidad de Viña del Mar y el Servicio de Salud Viña del Mar – Quillota, hace referencia a la ocupación del 100% del terreno para la construcción del proyecto y mi mandante me pide por contrato dejar el terreno totalmente limpio y despejado, por lo tanto es obvio que se deben extraer los árboles y llevarlos a botadero y sobre todo cuando esa especie no esta protegida ni en peligro de extinción, además para que usted tenga conocimiento, la extracción, traslado y la reubicación de un árbol de esas dimensiones fluctúa alrededor de $ 5.000.000 (neto) suma que no me corresponde desembolsar.

Sería muy positivo que usted pudiera comandar una organización para la defensa de los árboles que se encuentran en el plan de la ciudad  y que en algún momento serán extraídos y llevados a botadero. Creo que usted podría comenzar por aportar una pequeña suma de dinero todos los meses a una cuenta corriente, a nombre de esta organización, demostrando así sus muy buenas intenciones de poder preservar la naturaleza para nuestras futuras generaciones. Yo por mi lado, estaré atento para hacer también mi aporte todos los meses, y por supuesto cobraré el costo que significa realizar los traslados de estas especies.

No quiero ser irrespetuoso, pero siento que es muy fácil criticar, escribir alguna carta de reclamo o apuntar con el dedo, creo que es mas positivo hacer cosas, como las que yo he hecho a través

de mi trayectoria como empresario. He dado trabajo a mucha gente, he estado siempre presente con las autoridades en los desastres de la naturaleza, tales como, temporales, terremotos, etc., he pagado impuestos, fondos que el gobierno ocupa para pavimentar las calles por las cuales usted y muchos otros ciudadanos transitan, he aportado con mi trabajo al progreso de nuestra ciudad, pero creo que es injusto que se me acuse de algo que yo no tengo ningún tipo de ingerencia, como son los proyectos inmobiliarios. Creo que la autoridad municipal debiera de exigir lo que usted esta demandando.

Saludos cordiales,

Marioporzio

Acá mi respuesta

Estimado Mario,

gracias por seguir esta conversación y dedicarle su valioso tiempo y dinero.

No dudo en ningún caso que ud. cumple la ley, independiente de si es o no consciente con el medio ambiente (hablo de la ley por su puesto).
Al leer sus palabras me queda claro, espero no equivocarme, que centra su discurso en un ámbito  económico. Tema que por cierto puse yo en el tapete al preguntar
¿Qué costaba trasplatarlo?

Tengo algunas dudas que seguramente me puede aclarar porque son propias del rubro, supongo.
¿Por qué es obvio que dejar el terreno limpio implica botar árboles y no transplantarlos?
¿Por qué solo debemos ser concientes de las especies en extincion o protegidas?
¿A quien le corresponde desembolsar el valor del trasplante, neto, bruto? (Estoy tomando contacto con la Inmobiliaria)

La idea de la organización es en extremo loable, sobre todo si surge de ud. pero lamentablemente mis recursos económicos son escasos y no me permiten trasplantar a ese costo.
De todos modos si averiguo sobre alguna organización que preserve árboles (no se si tan específicamente los del plan de la ciudad) le avisaré para que su atención mediante aportes económicos no quede inconclusa y genere las frustarciones propias de la impotencia de no ayudar, teniendo el poder económico que implican sus palabras.  Por mi parte comenzaré una campaña con tiempo y trabajo (traducible a dinero si es mejor así para ud. entenderlo). Por ejemplo aciendo que la información que ahora ha llegado a mi pueda ser difundida y accedida por más personas y así tomemos conciencia, como bien lo dijo ud. “poder preservar la naturaleza para nuestras futuras generaciones“.

En ningún caso siento que ha sido irrespetuoso, solo directo y claro en exponer su punto de vista y accionar. Como ud. encuentro injustas las acusaciones a queines no tienen ingerencia en algo. Acá es donde realmente no estamos de acuerdo. Me cuesta desvincular estas imágenes de destrucción de árboles que presencié hoy en la mañana con su empresa.

Y por último don Mario, ¿qué sucederá con los árboles que quedan?

Correspondo sus “Saludos cordiales”
Maximiliano

Datos extras

• La inmobiliaria no me responde (don Mario, ¿les podría avisar de “nuestros” intereses?)
• La Municipalidad está en vías de contacto (don Mario yo le aviso cualquier cosa)

Vínculos y material para difundir la campaña Árboles de Chile

• Grupo en FaceBook Árboles de Chile
• Álbum de fotos en Flickr
• Videos en YouTube, Vimeo, Viddler

¿Qué más podemos seguir haciendo? ¿Quién nos puede ayudar a salvar los arbole sque aún están vivos ahí?

Hoy Basilio me mandó este artículo que recomiendo absolutamente En qué he estado. Ismael de Estado Beta comparte su experiencia del último tiempo.

Me hace mucho sentido en cómo evolucionan constantemente los desarrollos desde distintos puntos de vista y que lo vemos a diario precisamente con Basilio, con Maxi y en general con los chicos de producción de AyerViernes.

Nunca un proyecto se implementa de la misma forma que otro. Si fuera así estamos trabajando productos obsoletos y está claro que eso no nos gusta. Siempre nos preguntamos ¿cuál es el I+D de este proyecto? por pequeña que esa Investigación y Desarrollo sea.

Es lo malo de los desarrollos para el gobierno que se enredan en tanta burocracia que meses antes de escribir las primeras lineas de código, están “obsoletizándose”.

Y ni hablar que el proyecto evolucione a diario, semanal o mensualmente.

¿Cómo hacer entender por ejemplo que un formulario de contacto no sirve con 18 13 campos requeridos? Porque la Oficina de Información, Reclamos y Sugerencias (OIRS) necesita esos datos.

¿Cómo darle más agilidad a los proyectos desde sus concepciones por parte de los clientes?

Vínculos

• http://www.estadobeta.com/2008/08/31/en-que-he-estado