Blog de sonicbyte

Edge – La nueva herramienta Html5 de Adobe

Cuando Steve Jobs declaró en una carta abierta en abril del 2010 sus críticas respecto del reproductor Flash de Adobe y del porqué no permitirían su incorporación al IPhone y futuros productos de la manzanita, brindando su apoyo total al nuevo standard abierto HTML5, y sumado a comentarios previos poco halagadores para la gente de Adobe (tratándolos poco menos de “vagos”), explotó una bomba en toda la web.

Las razones de Jobs en esa carta, entre otras, fueron:

Adobe Flash es un formato propietario, mientras que HTML5 es un estándar abierto.
Flash es un riesgo de seguridad y consume muchos recursos siendo de esta manera inapropiado para dispositivos móviles por el consumo de batería que esto supone.
Se diseñó para ser utilizado con ratón y no para la creciente tendencia táctil.

Ante las duras críticas y el avance, no solo tecnológico sino de aceptación, del HTML5 como standard para la web (YouTube creó un reproductor HTML5 para sus videos y planea dejar de utlizar Flash) y teléfonos moviles, daba la impresión que Adobe estaba perdiendo terreno en la web y que quedaría relegado a otras áreas donde Adobe es mas fuerte (como en Photoshop).

Hace pocos meses la empresa tuvo una primer iniciativa, a modo de paliativo quizas, con una herramienta para convertir archivos Flash en HTML5. Sin embargo, este lunes en un paso mucho mas enérgico, Adobe lanzó la primer beta pública de un nuevo producto que permite realizar animaciónes sobre contenido web (sin usar flash) únicamente con tecnologías HTML5, CSS3 y Javascript llamado “Edge“.

Adobe afirma que “Edge” preserva intactos el código HTML y CSS3 originales, de hecho puede utilizarse sobre proyectos existentes sin alterarlos en absoluto, la herramienta utiliza Webkit como motor de la vista previa del navegador y las animaciónes se realizan con Javascript (JSON) permitiendo de esta forma que diseñadores, desarrolladores y demás miembros del equipo trabajen en paralelo.

Por el momento “Edge” permite trabajar con archivos de imágenes PNG, JPG, GIF y SVG, la beta será actualizada regularmente con nuevas características y puede ser utilizada de forma gratuita descargándose desde la página oficial de “Edge“.

Aquí un video demo de esta nueva herramienta:

Fuente Venturebeat.com y Mashable

Wireframes: ¿qué son y por qué usarlos?

No, no es una nueva app para tu Iphone, ni tampoco un condimento de cocina exótico…  Si eres diseñador o desarrollador web de experiencia conocerás muy bien de que se trata esto, si estas comenzando, este post es para ti, y también será útil si eres un emprendedor o tu empresa requiere algún servicio web en un futuro cercano, te interesará conocer sus ventajas.

Un wireframe o dibujo esquemático, es una representación visual muy sencilla del “esqueleto” o estructura de una página web (o aplicación web), se lo utiliza como un primer paso que sentará las bases del resto del diseño. El objetivo es definir sencillos bloques de contenido y su posición, incluyendo navegación, elementos de la interfaz, bloques de contenido y analizar como éstos funcionarán entre sí.

A diferencia de los bocetos, los wireframes se caracterizan por no tener ningún detalle tipográfico, color, elemento gráfico o estético, se realizan con trazos simples, cajas y texto, todo como a mano alzada, ya que el objetivo es centrarse en la funcionalidad, la experiencia de usuario y la prioridad de los contenidos del proyecto.

(más…)

Un sistema de gestión mejora vidas

La siguiente es la historia de una empresa que sabía que su sistema de gestión era muy deficiente y que estaba perdiendo dinero y cómo solucionó sus problemas hasta convertirse en una empresa muy rentable, creando una nueva experiencia para sus clientes.

A veces me da la impresión de que a nadie le importa tu proceso. Es decir, es difícil transmitir a nuestros clientes al menos al comienzo de la relación los valores y beneficios de la metodología con la que trabaja tu empresa, de aquellos hablé en este post. Y tal vez de manera inconsciente nos replegamos y empezamos a pensar que es algo nuestro y que al cliente no lograré implicarlo lo suficiente, dejándolo relegado a otros temas. Y así acabaremos perdiendo todo lo bueno que tiene.

Me he encontrado con esta historia y no sabía como contarla o qué tanto aportaba a este blog. Es la historia de una empresa, el Virginia Mason Medical Center de Seattle, que adaptó el sistema de producción Toyota^W (TPS), cuyos principios fueron empleados por la industria del software en las metodologías ágiles^W. Creo que es el tipo de historia que motiva a una empresa, sea del tipo que sea, a mejorar y cuenta además con un fuerte componente emotivo ya que involucra la mejora en la calidad de vida de enfermos de cáncer.

Es un reportaje realizado por la radio pública KAAW de San Francisco. (inglés)

Existe un libro, que no he leído, que recoge la experiencia y plantea un desafío de cambio en la gestión de la salud. Transforming Health Care: Virginia Mason Medical Center’s Pursuit of the Perfect Patient Experience.
.

Los ciudadanos e internet: TEDGlobal

Hoy se celebra una de las citas de pensadores más importante a nivel mundial, se trata del evento TEDGlobal, que no solamente puede ser presenciado por el selecto grupo de asistentes que pagaron la valiosa entrada, sino que este año se ve en directo en muchas ciudades gracias al esfuerzo de los grupos TEDx, como es el caso de TEDxZaragoza.

A pesar de haber comenzado hace unas pocas horas, ya está disponible en su sitio la primera charla  ”Rebecca MacKinnon: Let’s take back the Internet!” batiendo todos los records de producción. La charla es un llamado a que Internet crezca poniendo como epicentro a los ciudadanos.

El único legítimo fin del gobierno es servir a los ciudadanos. Y el único legítimo fin de la tecnología es mejorar nuestras vidas no manipularnos ni esclavizarnos.

La charla por supuesto, es en inglés, aunque la velocidad en que se subtitulan al español es cada vez mayor. Espero que la disfrutes y te sirva para reflexionar acerca de la libertad y el rol de la tecnología en nuestro tiempo, como a mi:

Mi granito de arena – Plantilla HTML5 / CSS3

Hace 11 años comencé a diseñar webs y en ese momento me incliné por hacerlo fundamentalmente con Flash. Por ese entonces usaba la versión 4, y en perspectiva me resulta asombroso ahora la falta de accesibilidad, estándares web y algo llamado SEO (¿les suena?) que tenía no sólo mi trabajo sino en general la web, por esa y otras razones comencé a dejar de utilizarlo y me volqué de lleno al HTML, CSS3 y PHP entre otros lenguajes web.

Hoy HTML5 es el nuevo rey, Flash ha sido algo exiliado y los estándares web, los frameworks, el SEO y demás son, como diría un amigo, la bomba. Aprendí mucho también en como hacer mas eficiente mi flujo de trabajo, gracias a la experiencia y buenas prácticas de otros diseñadores y proyectos (como Boilerplate) me inspiraron en hacer lo que llamo mi “Master template“, una plantilla de trabajo, simple pero muy útil, con la que comienzo a maquetar casi cualquier web.

Desde que la utilizo mi productividad es claramente superior, siempre estoy intentando mejorarla para hacerla mas eficiente, y ahora me parece increíble el tiempo que perdía al no utilizarla.

La plantilla está hecha en HTML5 válida. Si bien detallar en profundidad el fundamento de cada decisión y cada linea de código sería muy largo para este post, intentaré a grandes rasgos explicar la lógica de la plantilla:

Tiene cuatro carpetas principales

• css
• images
• js
• lib

Las carpetas js y lib las utilizo para ordenar archivos de javascript, frameworks y otras librerías que mencionaré luego como CSS3PIE. Por supuesto, no necesito explicar la carpeta “images” :)

Contenido carpeta CSS:

reset.css

Cada navegador posee valores por defecto, para todas las etiquetas de HTML y estilos CSS, gracias a una hoja de reset, se reducen las inconsistencias, logrando que la mayoría de las propiedades queden con los mismos valores, por defecto, para todos los navegadores.

fonts.css

Aquí incluiremos (si lo deseamos) las reglas css necesarias para utilizar font-face en nuestro diseño. Incluyo aquí una carpeta “fonts” donde guardo los archivos de las fuentes que utilizo.

handheld.css

La utilizo para definir algunas pocas reglas que mejoran la visualizacion de la página en telefonos móviles antiguos, básicamente quito los floats de todos los elementos, reduzco la fuente y le doy buen contraste al fondo y texto.

layout.css y estilo.css

Aquí defino por separado estructura y estilo de cada elemento del diseño respectivamente. Esto facilita bastante la lectura del código y encontrar lo que uno necesita editar o mejorar posteriormente. Algo para destacar, encontrarán una poco común

behavior: url(lib/pie/PIE.htc);

esto se debe a la libreria CSS3PIE de la que hablé en un post anterior, sirve para aplicar algunos estilos css3 en versiones antiguas de Internet Explorer.

movil.css

En este css están agregados todos las reglas Media-Query necesarias para que el sitio web pueda verse correctamente en distintos dispositivos de múltiples resoluciones de pantalla, como netbooks y smartphones como Iphone y Ipad entre otros.

global.css

Esta es la hoja css que carga todas las demás mediante “import” (excepto handheld.css) de esta forma:

@import url("reset.css");
@import url("estilo.css");
@import url("layout.css");
@import url("fonts.css");
@import url("movil.css");

Archivos html

• Index.html
• 404.html
• ie6.html

Index.html

Lo primero que defino en la plantilla, aparte del doctype HTML5, son los condicionales para la detección de versión de Internet Explorer, utilizo la técnica de Boilerplate de agregarle una clase al ser detectada la versión, de esta forma todos los estilos pueden separarse por clases y agregarse las reglas en la hoja principal de estilo en vez de hacerlo en hojas específicas, ahorrando llamadas al servidor y resulta más simple enfocar las correciones necesarias por versión.

Ejemplo:

<!--[if IE 7 ]>class="ie7"</strong><mce:script _mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script><![endif]-->;

Entonces si necesitamos corregir un selector específico para Explorer 7, podemos usar esa clase aplicada al condicional, todo desde la hoja principal de estilos. En el ejemplo además se carga el script html5shiv que les recomiendo utilizar, ya que permite que navegadores antiguos reconozcan selectores de HTML5.

.ie7 input[type="submit"]   {background: #ccc; height:37px; padding-top: 17px; pointer:cursor;}

El resto de la hoja index.html muestra una estructura sencilla con cabecera, menú de navegación y pie de página (en donde se cargan los javascripts para mejorar la velocidad de carga general de la página)

404.html

Simplemente una página para mediante htaccess customizar el aspecto de una página no encontrada.

ie6.html

Salvo excepciones, no solemos dar mas soporte a Internet Explorer 6, por lo que si es detectado por los condicionales del index.html el usuario es redirigido a una página explicandole que su navegador no es soportado en este sitio e invitándolo a actualizar su navegador.

Sean libres de descargar, modificar y utilizar esta plantilla, espero les sea de utilidad y cualquier consejo para mejorarla será bienvenido.

Hasta la próxima…

Descargar plantilla desde GitHub