Category Archives: HTML5 & CSS3

Nuestro laboratorio HTML5 y CSS3: probando nuevas caracteristicas, combinandolos con CSS3 y probando su accesibilidad.

Posibles Nuevas Características CSS de Adobe

Inspirado en el mundo de la impresión, gente de Adobe y Microsoft vienen nuevas características que podrían (o quizás no) ser incluidas en futuras especificaciones CSS. Estas nuevas características – Regiones CSS y Exclusiones CSS permitirán al texto fluir en las páginas web de manera muy parecida a como lo hacen en los diarios y revistas.

Recuerda que la idea del que el texto fluya en forma de columnas es otra propuesta del CSS3: Las Capas Multi-Columnas en CSS y la de páginas que imitan las revistas ya están en el módulo CSS3 Paged Media

Veamos algunos ejemplos que ADOBE ha implementado:

Hilos de Contenido usando formas y regiones CSS

El texto podría fluir fácilmente de una región a otra y nosotros podríamos escoger intercalar regiones o darles diferente ancho, alto y posiciones en la capa (ver figura siguiente)

Hilos de Contenido

Si puedes establecer regiones rectangulares, por que no hacerlo con formas a discreción del usuario?

contenido en forma de corazon

El texto también fluye de una región (una figura en este caso) a otra.

La idea es súper estupenda y hemos esperado mucho por ellas, pero yo me pregunto sobre su usabilidad si pensamos en la manera en la que la gente lee contenido web versus texto impreso (eso podría cambiar la forma actual de lectura de abajo hacia arriba en forma de L que se ha observado con métodos de eye-tracking).

Exclusión de Contenido

Exclusión de Contenido
La idea opuesta es excluir texto de una cierta región o regiones. (rectangulares o figuras personalizadas)

Posibles implementaciones en el mundo real

adaptive design
Adobe ha mostrado ejemplos más complejos (que funcionan en su propia versión de navegadores basados en WebKit debido a que estas características son aún un borrador y altamente experimentales).

El texto puede fluir en áreas con formas personalizadas y nos permitirá crear gráficos accesibles con CSS con complejas capas que involucren imágenes y textos que se comportarán bien en dispositivos con diferentes tamaños de pantalla y resoluciones.

Cómo leen los lectores de pantalla una página con HTML5 y ARIA

Despues de ver cómo AT lee un contenido generado con pseudo-elementos CSS estaba pensando en pasar a HTML5. Y como hay muchas personas diciendo que deberíamos mezclar HTML5 con ARIA para incrementar la accesibilidad de un sitio web, entonces, ¿por qué no probar y ver lo que pasa?

Un poco de código…

...
 
<header id="header" role="banner">  
    <div id="logo">Logo</div>
    <nav role="navigation">
        <ul id="mainnav">........</ul>
    </nav>
</header>
 
<section id="content" role="main">  
 
    <h1>A level one heading here please</h1>
 
    <div role="application"><p>Here is where an application will be coded. </p></div> 
 
    <article role="article">             
            <h2 class="index-headings">Blog entry no 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article role="article">
            <h2 class="index-headings">Blog entry no 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside role="complementary">  
    <h2>Sidebar</h2>
    <ul>......................</ul>
</aside>
 
<footer id="footer"  role="contentinfo">This is where the footer will stay.</footer>     
...

Esta es la página con ambos elementos HTML5:

  • header
  • nav
  • section
  • article
  • aside
  • footer

y los roles ARIA (aprende más sobre ARIA):

  • role=”banner” – para el elemento header
  • role=”navigation” – para el elemento nav
  • role=”main” – anexo a section
  • role=”application” – en caso de que necesite añadir un widget
  • role=”article” – para el elemento article
  • role=”complementary” – para aside
  • role=”contentinfo” – para footer

Cómo NVDA, JAWS y Windoes Eyes leyeron la versión con sólo HTML5

Para hacer la historia corta, ningún lector de pantalla notó los elementos HTML5 – como se esperaba. Todos se comportaron como si esos elementos fuesen simples DIVs y leyeron la página web de acuerdo a esto.

Cómo NVDA, JAWS y Windoes Eyes leyeron la versión HTML5 + ARIA

Mucho mejor esta vez, ARIA está haciendo maravillas aunque no entiendo por qué Windows Eyes ni siquiera pronuncia la existencia de estos encabezados… Soy un novato en este campo así que, ¿tal vez hice algo malo? No quiero cometer una injusticia con WE así que digamos que los resultados fueron inconclusos en relación con este software.

La Diferencia

Así que cuál era la diferencia entre las dos versiones? Qué aportó ARIA desde este punto de vista?

El área del banner: role=”banner”

NVDA – “banner landmark logo here navigation landmark list with 4 items visited link home……. ”
JAWS – “banner landmark logo here navigation landmark list with 4 items visited link home……. ” Al principio también dijo que habían 8 marcas, muy bien!!!

El área principal: role=”main”

NVDA – “main landmark heading level one …”
JAWS – “main landmark heading level one …”

El área de aplicación: role=”application”

NVDA – no se leyó el rol de aplicación.
JAWS – “application landmark here is where….”

Los Artículos: role =”article”

NVDA – el artículo no fue mencionado en lo absoluto.
JAWS – “article landmark heading level….”

La Barra lateral: role=”complementary”

NVDA la barra lateral fue leída de esta manera: “complementary landmark heading level 2…..”
JAWS – “complementary landmark heading level 2…..”

El pié: role=”contentinfo”

– y el pie de pagina: “content info landmark this is where the….”
JAWS – “content info landmark this is where the….”

Hasta ahora JAWS fue el único capaz de leer todas las marcas mientras que NVDA falló en el artículo y la aplicación. Como mencioné antes, Windows Eyes no leyó los elementos ARIA pero tal vez soy sólo yo siendo un novato… Aprecio mucho tu opinión, quizás juntos podamos hacer que funcione. 🙂

Sombras CSS en múltiples navegadores

Un problema muy simple con una solución complicada, mayormente porque IE ignora la propiedad box-shadow de CSS3. En vez de eso progid:DXImageTransform.Microsoft.Shadow está logrando el truco y un equivalente puede ser hallado.

box-shadow: 4px 4px 8px #000;

para la sombra blanca es similar a

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

porque box-shadow tiene los parámetros;

  • horizontal-offset
  • vertical-offset
  • blur-radius
  • color

y progid:DXImageTransform.Microsoft.Shadow:

  • color
  • direction (90 de la parte inferior derecha, también puede ser 0,45,135,225,270 y 315)
  • strength (la distancia, en píxeles en que se extiende el efecto del filtro, parecido a la combinación de 4px 4px en el box-shadow)

Lo que no tiene es un radio de desenfoque, aunque progid:DXImageTransform.Microsoft.Blur existe, desenfocará el contenido de la casilla también haciendo el texto ilegible.

Las esquinas

El resultado es bastante similar, con algunas diferencias en cómo IE muestra las esquinas. Tal como puede ver en la esquina superior derecha y la inferior derecha son un desastre (la inferior izquierda no se ve muy bien tampoco), pero demos gracias por que existen.

crossbrowser dropshadows in mozilla and internet explorer

Pueden ver el demo si quieren usar otros navegadores.

El código CSS

El código CSS completo para todos los navegadores es:

.black-shadow{ -moz-box-shadow: 4px 4px 8px #000;-webkit-box-shadow: 4px 4px 8px #000;box-shadow: 4px 4px 8px #000;
filter:
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=180,strength=8)}

Usando CSS3 para dar estilo a formularios escritos en HTML5

Dar estilo a un formulario nunca es algo fácil de hacer, pero añadir CSS3 a un formulario HTML5 es una tarea que muestra una larga variedad de resultados en lo que se refiere a probar diferentes navegadores. Mire el link de prueba.

En lo que se refiere a CSS3 no es mucho lo que se puede hacer: pero añadir esquinas redondeadas, gradientes y sombras es mas que nada y el aspecto general del formulario es muuuuuuuuucho mejor. Pero HTML5 es soportado por pocos navegadores (éste formulario HTML sólo por OPERA) y CSS3 también por algunos navegadores – pero diferentes del que soporta HTML5.

El resultado

imposible ver el resultado en sólo un navegador: las esquinas redondeadas pueden ser vistas en Mozilla/Chrome/Safari y los elementos HTML5 en Opera.

Internet Explorer? Mejor ni pregunte. No hay soporte aún.

Así que los resultados:

  1. Mozilla 3: esquinas redondeadas + / elementos HTML5 –
    capture-2
  2. Chrome: esquinas redondeadas + (se ven extrañas) / elementos HTML5 –
    chrome-screenshot
  3. Safari: esquinas redondeadas + / elementos HTML5 –
    capture-3
  4. Opera 9: esquinas redondeadas – / elementos HTML5 +
    capture-1
  5. IE (sin importar cual): esquinas redondeadas – / elementos HTML –
    ie8-screenshot

Parece que tendremos que esperar un poco más hasta que podamos lanzar Javascript desde dar estilos a las formas.

ACTUALIZACIÓN

Ric Ferrer envió una captura de pantalla con el comportamiento del safari móvil desde su Ipod. Gracias 🙂

37555934

Una tercera manera de escribir y validar formularios – HTML5

Despues de escribir un formulario accesible en XHTML y validarlo con scripts PHP desde el lado del servidor & luego con scripts desde el cliente en Mootools, escribo hoy acerca de una tercera manera de aproximarse al tema – usando el próximo en venir HTML5 (habiendo dicho eso, en realidad espero ser capaz de usarlo muuuucho antes de 2011).

La belleza consiste en tener toda la validación mencionada con anterioridad dentro del código HTML: tendremos

  • input type=”email” para la dirección de correo electrónico
  • type=”url” para urls
  • type=”date” y “datetime” para campos de fecha (usualmente hechos con JS calendars hasta ahora) o “month”, “week”, “time”
  • type=”number”  para números
  • deslizadores de acceso, con type=”range”
  • datalists
  • la habilidad de añadir condiciones de validación extra, luego de escribir la marca como: required, read-only,disabled, autofocus, un valor mínimo, un valor máximo aceptado / tamaño

El código para nuestro formulario de contacto:

<form action="index.php" method="post" name="contactform"
id="contact">
 
<label for="name">Name <span>(required)</span></label>
<input  tabindex="1" type="text" name="name" id="name" required />
 
<label for="mail">Email <span>(required)</span></label>
<input  tabindex="2" type="email" name="mail" id="mail" required />
 
<label for="phone">Telephone</label>
<input tabindex="3" type="text" name="phone" id="phone" />
 
<label for="message">Message</label>
<textarea tabindex="4" cols="30" rows="10" name="message"
id="message"></textarea>
 
<button tabindex="5" type="submit" name="submit" id="send">
Submit</button>
 
</form>

El resultado será una manera mucho mas fácil de escribir y validar formularios de una manera accesible, sin añadir código cargado adicional con PHP/JS script. Todo lo que tienes que hacer es colocar “required” a todos los campos obligatorios y usar el anteriormente mencionado valor mínimo y máximo, etc para controlar la entrada de datos del usuario.

La lista completa de los tipos y tablas útiles con los métodos que apliquen a cada estado pueden ser localizados en el sitio W3C

El problema ahora es la incapacidad de los navegadores de trabajar con muchas características HTML5. Y el futuro no luce prometedor. Hasta ahora el único navegador que soporta los nuevos formularios es Opera 9.5+. Internet Explorer 8 e inferiores no son compatibles y probablemente IE9 no lo será tampoco (estamos hablando del 2010). Chrome 2+, Safari 4+ soportarán parcialmente algunas características mientras que Mozilla no lo hará ni en su versión 4.0 (programada para ser lanzada en 2010).

Ahora, el mismo formulario de contacto que usamos para jugar con él, pero escrito en HTML5, se ve de la misma manera pero se comportará mejor (el código también es mas ligero). Nos ahorra bastante tiempo y dolores de cabeza y es mucho mas amigable al usuario.

Juega con el ejemplo – en Opera 9.5+- y deja un comentario si consideras que el tema es suficientemente interesante ara volver con mas ejemplos de código.

Si te interesa aprender más sobre HTML5 y las novedades sobre formularios TopicosWeb tiene 2 artículos muy útiles:
Introducción a HTML5
Placeholder para los elementos de un formulario con HTML5