Microsoft liderará el grupo de trabajo HTML en la W3C

ByLuis

El grupo de trabajo que, dentro de la W3C, se encargará de la controvertida misión de “reinventar el HTML“, estará liderado por Chris Wilson, el jefe del proyecto IE7. Este grupo de trabajo colaborará con WHATWG de evolucionar el HTML de forma paralela al XHTML.
Personalmente me llevé una grata impresión de Chris, al que muchos pudimos escuchar en la pasada edición de Fundamentos Web, y hay que reconocerle su gran labor acercando IE7 a los estándares.
Pero que sea un alto responsable de Microsoft el que se encarge de liderar la evolución de un lenguaje que esa empresa ha respetado tan poco a largo del tiempo es algo que nos produce inquietud y desasosiego.
No puedo estar más de acuerdo con Daniel Glazman cuando considera que:

No puedo entender cómo y porqué el liderazgo del Grupo de Trabajo del HTML se da al vendedor mayoritario de navegadores, en este caso Microsoft. Microsoft, Mozilla, Opera y Apple deberían estar fuera de este liderazgo de este nuevo grupo de trabajo para preservar su independencia total o al menos añadir un co-lider independiente para mantener este propósito.

Creo que los que piensan que esto significa que Microsoft se acercará a los estándares y a la W3C pecan de ingenuos y que esta no es una buena noticia.
Vía / 456BereaStreet

Similar Posts

|

Tres grandes tutoriales sobre HTML5

ByLuis

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

  var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.

Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site

|

Favoritos del CSS Reboot

ByLuis

A pesar de apuntarse centenares de sitios, por segunda edición consecutiva el CSS Reboot sólo nos ha deparado apenas una veintena de diseños destacables. Entre hoy y mañana publicaremos en CSS Manía lo más destacable. Dicho esto, siempre son bienvenidas este tipo de iniciativas.

Nuestros favoritos sin ningún orden en particular:

|

¿Qué son los Microformatos?

ByLuis

microformats.pngÚltimamente se habla bastante de microformatos, pero la verdad es que está un poco confuso, por ello vamos a intentar explicar qué son, para qué lo podemos usar y ejemplos de algunos de ellos, aunque ya explicamos anteriormente un poco sobre ello.

¿Qué son?

La verdad es que la definición oficial nos puede dejar tal cual, sin entender palabra, por eso creo que son mejores las explicaciones que nos ofrecen otras personas. Traducimos:

Microformatos son códigos simples que tu puedes usar para identificar tipos de datos específicos, como personas o eventos, en tus páginas web.

Microformatos son un modo de publicar y compartir información en tu web de un modo bastante fiel.
Por ejemplo, si quieres que la información de contacto de tu empresa sea fácilmente identificable, puedes publicarlo mediante hCard. […]
La clave de los microformatos es que son suficientemente simples para que los diseñadores/desarrolladores web lo incluyan en sus páginas ellos mismos. Los microformatos son más sencillos que publicar feeds. No necesitas ser programador para poder usarlos. Alguien que sepa un mínimo de XHTML/CSS puede usarlos.

Pero lo más importante es que primero debe ser entendible para el ser humano y luego por las máquinas.

¿Para qué sirven? ¿Qué se puede hacer con los microformatos?

Con los microformatos puedes publicar información sobre eventos, tarjetas de visita de empresas, libretas de direcciones, … de forma que sea fácil de leer por una persona en una página web y que a la vez sea entendible para un ordenador, que luego la almacenará, indexará o tratará. Se trata de mostrar información y que queramos que ésta sea facilmente compartida (mediante la localización e indexación, por ejemplo). Tenemos una información y queremos que otros (hombres o máquinas) no se vuelvan locos intentando localizarla. En definitiva, ordenar información para que sea fáci y rápidamente catalogada y accesible.

Ejemplos

  • hCalendar: para mostrar calendarios y eventos
  • hCard: información sobre personas, compañías y organizaciones
  • rel-license: para indicar la licencia de uso
  • rel-nofollow: el enlace no debe ser analizado por motores de búsqueda
  • rel-tag: para indicar que el enlace es un tag
  • VoteLinks: para indicar el tipo de voto que se hace sobre una pregunta

Más información

|

Contactos: de la web a la agenda con microformatos y xslt

ByLuis

microformats_logo.pngLos microformatos están de moda. Cada vez se habla más sobre ellos y muchos los recomendamos, intentamos difundirlos y apostamos por su uso. Pero suele haber una pregunta recurrente cuando hablamos del tema ¿Qué utilidades tienen?.

Podemos contestar que constituyen una buena práctica, que aportan semántica a nuestra web, que facilitan el procesamiento de nuestro código por terceras partes… pero a veces es complejo poner ejemplos concretos.

Hace poco tiempo explicaba en tripix.net cómo la extensión de Firefox, Operator, trabaja con los microformatos, hoy vamos a ver otra interesante aplicación: cómo hacer que cuando la información de contacto en una web, microformateada con hcard, se exporte directamente a vCard, un formato de archivo estandarizado que para el intercambio de datos de contacto que entienden la práctica totalidad de las aplicaciones de agenda (Thunderbird, iCal, Outlook, etc.)

El microformato en nuestra página

Vamos a utilizar un ejemplo muy sencillo en el que mostramos mis datos de contacto. El código que utilizaríamos para poner esta información en nuestro código xHtml sería el siguiente.

<div class="vcard">
<a class="url fn" href="http://sentidoweb.com/">Xose Pita</a>
<br />
<div class="adr">
<span class="locality">Granada</span>, <span class="country-name">España</span>
</div>
<div class="org">Sentido Web</div>
</div>

Pasando de hCard a Vcard

Para esto utilizaremos una pequeña utilidad que ha desarrollado Brian Suda, uno de los grandes evangelistas de los microformatos, y que mediante PHP y XSLT (lenguaje que permite transformar cualquier documento XML a otra sintaxis) convierte la información de contacto microformateada que encuentre en una url a formato vCard.

Solamente es necesario enlazar con la dirección http://suda.co.uk/projects/X2V/get-vcard.php y pasarle por GET el parámetro "uri" con la url donde está la información de contacto. Por ejemplo: 


<a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://sentidoweb.com/about/">Guardar tarjeta de contacto</a>

Útil y fácil, así que Descargar mi tarjeta de contacto.

Podéis ver un ejemplo práctico ya con CSS en mi perfil de Sentido Web.

Vía / Shape Shed

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js