HTML 5. Primer acercamiento

July 15th, 2010

No hay mejor manual que el que tiene la WCAG, que es el referente en todos estos temas.

http://dev.w3.org/html5/spec/Overview.html

aquí te dejo también un tutorial básico para una primera toma de contacto.

http://www.cristalab.com/blog/tutorial-de-html-5-de-armando-sosa-c85454l/

y aquí otras páginas con ejemplos concretos

http://html5tutorial.net/

http://html5demos.com/

Ojo, tienes que tener en cuenta qué navegadores empiezan a soportar HTML5. Te dejo un link de una herramienta que permite puntuar a nuestros navegadores según el grado de soporte respecto de las características de HTML5.

http://html5test.com/

Usabilidad y menús desplegables

May 21st, 2010
Los menús con muchos niveles sobrecargan la memoria del usuario y contradicen su lógica.

Las estructuras de navegación son elementos fundamentales en un portal web. Los errores relacionados con menús y enlaces de navegación son generalmente críticos, debido a que son los mecanismos que el usuario emplea para navegar y explorar un sitio.

Los portales cuya arquitectura de información es demasiado profunda, tienden a ofrecer al usuario menús desplegables de múltiples niveles para “asegurarse de que todo está a la vista.”. Sin embargo, lejos de ser una buena práctica, el uso de menús desplegables de más de dos niveles es uno de los atentados más grandes contra el éxito de un portal.

Entre las razones por las cuales no se deberían usar menús desplegables de múltiples niveles están:

  • Los menús con demasiados niveles son difíciles de manipular. Generalmente el usuario cree que la distancia más corta entre dos puntos es una línea recta. Al cruzar en diagonal hacia un nivel desplegado los menús tienden a cerrarse.
  • Los menús de múltiples niveles generalmente contienen muchos elementos, por lo que sobrecargan la memoria del usuario y le hacen más difícil aprender a usar el sitio.
  • El problema se agrava si el menú tiene un comportamiento aleatorio. Por ejemplo se abre a izquierda o derecha según se va navegando.
  • Si los elementos de navegación son difíciles de usar, el usuario no podrá explorar el sitio web.
  • Si se combinan menús desplegables de varios niveles, con el uso de texto falso en sus elementos, el error es aún más grave.

Una buena práctica, es el uso de menús desplegables verticales (de solo dos niveles), o incluso un menú simple con enlaces (un solo nivel). Al reducir las posibilidades, el usuario podrá tomar sus decisiones más rápido, y seguramente una navegación de contexto le dirá adónde ir dentro de un nivel mucho más específico.

8 consejos básicos para optimizar el peso de los SWF

May 21st, 2010

De www.leandrodonofrio.com me traigo un post con las premisas básicas a la hora de optimizar un swf

¿Mejorar el peso para qué?

Simple. No todas las personas que entren a nuestro sitio tendrán una conexión de banda ancha y no hay nada más feo que entrar a una web hecha en Flash y ver al preloader sumar byte por byte…

Hoy en día son pocos los sitios en Flash que cargan todo el contenido de una sola vez. Habitualmente lo que se hace es dividir el sitio en varias películas e ir cargándolas a medida que el usuario lo requiere. El tamaño de cada película va a depender de la complejidad del sitio.

Lo ideal seria tener una presentación liviana e ir cargando las películas externas con un peso no mayor a 40 KB aunque como bien dije todo va a depender de la complejo que sea la web.

Asi que empecemos a hablar un poco sobre el tema…

  • Por lo general cuando estamos desarrollando un trabajo en Flash solemos repetir elementos en el escenario (Botones, MovieClips, Gráficos, etc). ¿Para qué dibujar lo mismo varias veces cuando podemos tener mismos símbolos con diferentes propiedades? La utilización de instancias de símbolos ayuda a bajar el tamaño final. Por ejemplo si necesitamos dos círculos de diferentes tamaños y colores, no vamos a crear dos círculos diferentes, sino creamos uno, lo convertimos en símbolo y lo copiamos en el escenario. Luego con los paneles modificamos el color y tamaño de cada uno;
  • El entorno de autor de Flash fue pensado como el escritorio de un dibujante/animador. Sin embargo si necesitamos realizar alguna animación en movimiento no es recomendable realizarla fotograma por fotograma sino utilizar Interpolaciones de Movimiento debido a que Flash realiza varios cálculos complejos para crear la animación y optimizar el archivo final en peso;
  • Con los mapas de bits podemos crear texturas que con vectores no podemos. Sin embargo utilizarlos incrementa varios KB al archivo final. No quiero decir que nunca hay que utilizarlos, son necesarios en muchas ocasiones, por ejemplo como fondos estáticos. Si los vamos a utilizar tratar de comprimirlos lo mejor posible sin perder mucha calidad. Para eso podemos utilizar la opción Exportar para web en Photoshop o utilizar programas como el PIXresizer;
  • Una de las ventajas de Flash es la posibilidad de mostrar textos estáticos con cualquier tipografía. En contrapartida si utilizamos fuentes muy complejas (ejemplo: Cocaine sans) ó fuentes incrustadas (en caso de utilizar textos dinámicos o de entrada) incrementaremos el peso del archivo final. Si tan solo deseamos mostrar un texto podemos utilizar fuentes pixeladas que son mucho más livianas o usar fuentes standards como Arial, Verdana, etc;
  • Sigo con el tema de las fuentes, si utilizamos fuentes incrustadas, solo incorporar los caracteres necesarios;
  • Al incorporar música al sitio, probar con distintos bitrate hasta encontrar un sonido entendible, no distorsionado y no muy desproporcionado en peso;
  • Optimizar el código y no repetirlo. Utilizar funciones genéricas que puedan ser reutilizadas. Habituarse a usar un código centralizado y no desparramado por diferentes elementos. Utilizar más o menos comentarios dentro del código no afecta al archivo final ya que Flash no los incorpora al exportar el swf;

Recursos Vectoriales

May 11th, 2010

Aquí os dejo un link (a recursos vectoriales) con unas cuantas páginas donde se pueden sacar recursos para unas prisas

Internet Explorer 9 no soportará Flash

May 3rd, 2010

De itespresso.es me traigo este post sobre la polémica de la utilidad de flash.

******************************

Microsoft anuncia que su navegador reproducirá solo H.264.

Adobe no está pasando por su mejor momento. Tras la carta de Steve Jobs explicando por qué no le gusta Flash, Microsoft acaba de anunciar que la próxima versión de Internet Explorer, IE9, también dejará fuera al formato de Adobe y reproducirá únicamente H.264.
Dean Hachamovitch, Manager General de Internet Explorer, explicó en un post en su blog corporativo que aunque HTML5 (”el futuro de la web”) permite vídeo sin especificar un formato determinado, en Microsoft creen que H.264 es una opción “excelente”, por lo que “IE9 solo reproducirá H.264″.
Podría parecer así que Microsoft se une a Apple en su guerra contra Adobe, pero las palabras de Hachamvitch apuntan en otra dirección. Si bien afirmó que Flash tiene problemas de “fiabilidad, seguridad y rendimiento”, también aclaró que en Microsoft trabajan con los ingenieros de Adobe de forma continua, “compartiendo información” sobre estos puntos.
Dean Hachamovitch dedica dos párrafos de su entrada a explicar la cuestión Flash, incidiendo en la comunicación continua y el trabajo conjunto para resolver problemas. No es descartable por lo tanto que en un futuro, y una vez que Adobe haya mejorado en esos aspectos, IE9 vuelva a abrir la puerta a Flash.

Recursos Flash

April 26th, 2010

http://www.gotoandlearn.com/index

Efecto de profundidad en flash (Parallax)

April 26th, 2010

Parallax Photo Effect

Efecto parallax 01

Efecto parallax 02

La alternativa a Flash

April 26th, 2010

Ojeando elpais.es, encuentro este articulo que considero de gran utilidad para nuestro mundillo.

***********************************************************

La alternativa a Flash

La versión final del estándar HTML5 estará lista en 2012 - Google y Apple se vuelcan en su desarrollo - La hegemonía del programa de Adobe, presente en el 75% del vídeo ‘online’ y en el 98% de los ordenadores, se ve amenazada

Steve Jobs presenta su nuevo juguete, el iPad. Recostado en un sofá, muestra lo fácil que es navegar en la tableta. Abre la web del New York Times y, horror, hay vídeos que no se ven, fotos en blanco. Parte de la audiencia se queda fría; parte ríe. Jobs ni arquea una ceja. El iPad no soportará Flash.

“Nadie utilizará Flash. El mundo se está pasando a HTML5″. Esto lo diría tres días después en una reunión interna de Apple, por si a alguien le quedaba alguna duda. Como él, cada vez más fabricantes de software y equipos, compañías de Internet, de contenidos y desarrolladores comparten la misma visión: HTML5, la próxima versión del lenguaje utilizado para crear páginas y aplicaciones online, será una pequeña revolución.

Sustituirá a HTML4, aprobado como estándar en 1997, y a extensiones posteriores como XML y XHTML. Y traerá decenas de novedades importantes. Entre ellas, la capacidad de insertar vídeo y audio de forma nativa en el navegador sin necesidad de los conectores (plugs-in) de las Rich Internet Applications (RIA). Adobe Flash es la RIA más extendida para representar vídeo, juegos y animaciones interactivas. Más del 75% del vídeo en la Red se visualiza con Flash. Vive en el 70% de los juegos online y en el 98% de los ordenadores. ¿Un imperio en peligro?

“HTML5 se está moviendo hacia el vídeo, pero estamos seguros de que Flash seguirá siendo el formato preferido”, asegura Enrique Duvós, de Adobe. “Hay mucha fragmentación de navegadores y el estándar no estarán listos hasta dentro de unos años”.

El consorcio W3C, encargado de desarrollar y aprobar HTML5, asegura que queda poco. “En 2011 o 2012, como muy tarde, estará lista la versión final del estándar”, dice Martín Álvarez, responsable en España del W3C. Los desarrolladores más avezados comienzan a experimentar. “¿Ventajas del HTML5? Muchísimas. Flash es el cáncer de Internet: propietario, cerrado y sin control para el programador”, dice Isidro Gilabert, director técnico de la creadora de videojuegos Virtual Toys. “HTML5 abre un nuevo mundo”.Desde su creación en 1989 por Tim Berners-Lee, el HTML, el lenguaje de la web, ha recorrido un lento camino de versiones. El periodo crítico fue a partir de 1998. El consorcio W3C decidió tomar un nuevo rumbo y desarrollar XHTML, una alternativa a HTML4, el estándar vigente hasta entonces.

La iniciativa no funcionó. La mayoría de los navegadores no soportaron nunca las versiones de XHTML y el mercado se fraccionó. Fueron precisamente los años en los que Adobe Flash comenzó a ganar terreno. Ante la parsimonia del W3C, Apple, Mozilla y Opera formaron en 2004 el grupo independiente WHATWG.

Tres años después propusieron al consorcio retomar el HTML con el estándar HTML5. Ian Hickson, hoy en Google, fue uno de los principales promotores. El W3C aceptó y publicó el primer borrador en enero del 2008. La web volvía a sus inicios, pero mejorada.

“La propuesta fue muy buena. Consideramos que una bifurcación en el camino iba a confundir al mercado y paramos el trabajo en XML para continuar con HTML5″, explica Martín Álvarez, de W3C. Así es como Google, Apple, Mozilla y Opera han llegado a ser hoy los grandes impulsores del nuevo estándar. También IBM o Microsoft, aunque en menor medida.

Más posibilidades

HTML5 promete a los desarrolladores un nuevo abanico de posibilidades. Se basa en un renovado sistema de etiquetas y atributos que darán paso a la web semántica. Las páginas incluyen microdatos incrustados en el código, información como fechas y descripciones del contenido. No serán visibles para el internauta, pero los navegadores y aplicaciones podrán comprender los datos representados. La indexación en buscadores será más sencilla.

Otro de los cambios es la posibilidad de incluir directamente en los navegadores audio y vídeo sin necesidad de Flash, Silverlight o JavaFX. “Vemos siempre distintos formatos y reproductores al navegar por la Red, es un problema. HTML5 pretende estandarizar la forma en la que se representa vídeo en la web”, dice Álvarez. A los vídeos se podrá además añadir subtítulos, traducciones e información contextual.

YouTube, Vimeo y Dailymotion ya permiten probar vídeos en HTML5 sobre Chrome, Safari e Internet Explorer con el conector Chrome Frame instalado. ¿Ventajas? Poder saltar a cualquier punto del vídeo de forma instantánea y mayor rapidez de carga. Para el desarrollador, menos dolores de cabeza a la hora de picar código.

Eso sí, está por resolver la batalla de los codecs, programas que descodifican los datos a vídeo. Google y Apple apuestan por el propietario H.264. Mozilla y Opera por Ogg Theora, basado en software libre con el apoyo del W3C. Y hay una tercera opción: Google anunció recientemente que liberará el código de otro codec, VP8. Una batalla que podría retrasar la adopción de HTML5.

Para algunos, la gran novedad de este estándar será la posibilidad de crear gráficos y dibujos directamente en el navegador. “La etiqueta canvas es lo más interesante, permitirá crear animaciones interactivas y dibujar directamente en el ordenador”, explica Ricardo Cabello (Mr. doob), diseñador y programador español afincado en Londres.

Cabello participó con cinco diseños sobre HTML5 en la iniciativa Chrome Experiments, promovida por Google para demostrar el potencial del lenguaje. Uno de ellos, Harmony, es una aplicación web de dibujo. “La ventaja de HTML5 es que no quedará desfasado como ocurrió con Adobe Shockwave. Lo que hagas hoy seguirá valiendo en 20 años”.

Otra mejora será la posibilidad de guardar datos en local (en el ordenador, móvil…), lo que permitirá descargar contenido para ser consumido sin conectarse a la Red. Útil, por ejemplo, para guardar el progreso de un juego y seguir más adelante o para mejorar el rendimiento de las aplicaciones. HTML5 incluirá etiquetas de geolocalización, que daría lugar a nuevas aplicaciones y servicios.

Un desarrollo, muchas pantallas

El potencial de disrupción de HTML5 es aún mayor en móviles y tabletas. El W3C trabaja en crear interfaces (APIs) que permitan trasladar un mismo desarrollo a múltiples equipos (PC, smartphones, tabletas…) y, además, conecten la aplicación con los recursos del aparato: cámara, GPS, acelerador…

“Es el sueño de la portabilidad, que un mismo lenguaje sirva para todas las plataformas. Todavía es utópico, pero con HTML5 creo que nos acercaremos”, dice Israel Pastrana, director técnico de la agencia de diseño y publicidad UVE Producers, que ya ha comenzado a utilizar la nueva versión en algunos proyectos.

Isidro Gilabert, de Virtual Toys, cree que HTML5 dará lugar a un modelo híbrido de aplicaciones en smartphones. “Por un lado estarán las aplicaciones nativas, que interactúan con el hardware, con la tarjeta gráfica, el procesador… y por otro las que se ejecutan directamente en el navegador utilizando HTML5, conectadas a Internet para comprar o vender productos, jugar con otras personas… Las posibilidades son enormes”, advierte.

Ingenieros de Google trasladaron recientemente el juego Quake II sobre un navegador utilizando HTML5 y WebGL, un estándar que permite utilizar los recursos gráficos del equipo. Firefox ya lo soporta. “Estos desarrollos son perfectos para equipos como el iPad: juegos y aplicaciones sobre el navegador, conectados a Internet y con la posibilidad de servir publicidad online”, dice Gilabert. Justo el negocio estratégico al que aspiran Apple y Google. El primero, desde el hardware se está moviendo a las aplicaciones y la publicidad. El segundo, desde la Red y el PC, quiere conquistar la Internet móvil. Ambos se encontrarán en el HTML5.

Posible querella contra Apple

“Ni confirmamos ni desmentimos, simplemente no comentamos sobre el tema”. Es la respuesta oficial de Adobe a los rumores que han inundado Internet en los últimos días sobre una posible demanda de la compañía a Apple. El desplante de Jobs ha surtido efecto. Toda una industria ha clavado su atención en el potencial de HTML5.

Entre los desarrolladores hay consenso: el nuevo estándar sustituirá progresivamente a Flash, pero no hasta dentro de unos años. “A largo plazo se impondrá, pero Flash seguirá su progreso. Al final, las herramientas de Adobe tendrán que dar soporte a HTML5″, dice Pastrana. “Para subsistir, Flash tendrá que centrarse en los huecos que no queden cubiertos”, apunta Ricardo Cabello.

El W3C da una visión más neutral: “Habrá un gran impacto en la reproducción de video y audio en la web, pero Flash no desaparecerá. Lo continuaremos viendo en aplicaciones concretas fuera del navegador”, señala Martín Álvarez.

En Adobe se aferran a la coexistencia de los formatos. “Para algunas aplicaciones será mejor HTML5, para las que necesiten mucha interacción Flash será la opción”, dice Duvós. En su contra juega la rápida evolución de los navegadores. Opera, Safari, Chrome y Firefox han anunciado compatibilidad con HTML5. Internet Explorer 8 no lo soporta, pero IE9, esperado para el año que viene, sí será compatible.

Técnicas CSS para el reemplazo de imágenes

February 11th, 2010

de CSS-tricks rescato este interesantísimo post para todos aquellos que les toca maquetar de vez en cuando

Técnicas CSS para el reemplazo de imágenes

Bugs IE8

February 10th, 2010

Por cortesía de Marina Contreras dejo un link muy útil para maquetadores

ie8-bugs