Hasta hace poco utilizaba kommander, una potente herramienta para crear programas mediante scripting gráfico, lamentablemente por falta de programadores en el proyecto aún no fue portado a KD4.

Kdialog es un programa que se llama desde la línea de comandos y abre una ventana en modo gráfico según la opción que le suministremos en la llamada. Por ejemplo: kdialog –title “Mi ventana” –msgbox “Hola Mundo” abriría una ventana de mensaje titulada “Mi ventana” y con el texto “Hola Mundo”.

Kdialog no es tan potente y flexible como kommander pero tiene una buena cantidad de controles. Los usuarios de Gnome cuentan con Zenity, aunque no tiene tantos controles como Kdialog.

Cuando se ejecuta kdialog se abre una nueva ventana (evidentemente se trata de una ventana KDE) que presenta al usuario un mensaje, permite introducir un texto, seleccionar un archivo, elegir entre aceptar o cancelar, etc.

En cada caso, kdialog retorna la respuesta del usuario en su salida estándard o bien mediante el código de retorno $? indicando si el usuario a aceptado o cancelado el diálogo.

Ejemplos que podemos probar en una terminal:
Popup pasivo que desaparece:  kdialog –passivepopup “Mensaje” 5 

Solicitud de clave:  kdialog –password “por favor escriba su clave:” 

Lista equivalente a radio-button:  kdialog –radiolist “Elige:” 1 “Uno” on 2 “Dos” on 3 “Tres” off 

Advertencia, continuar – cancelar:  kdialog –warningcontinuecancel “Mensaje” 

Caja de texto:  kdialog –textbox NOMBRE-DE-ARCHIVO 

Selector:  kdialog –combobox “Seleccione el color:” “Uno” “Dos” “Tres” “Negro” 

Opciones de kdialog:

  --yesno             Cuadro de interrogación con botones de sí/no
  --yesnocancel       Cuadro de interrogación con botones de sí/no/cancelar
  --warningyesno      Cuadro de aviso con botones de sí/no
  --warningcontinuecancel  Cuadro de aviso con botones de continuar/cancelar
  --warningyesnocancel  Cuadro de aviso con botones de sí/no/cancelar
  --yes-label         Usar texto como etiqueta del botón «Sí»
  --no-label          Usar texto como etiqueta del botón «No»
  --cancel-label      Usar texto como etiqueta del botón «Cancelar»
  --continue-label    Usar texto como etiqueta del botón «Continuar»
  --sorry             Cuadro de mensaje «Disculpe»
  --error             Cuadro de mensaje «Error»
  --msgbox            Ventana de mensaje
  --inputbox    Ventana de introducción de datos
  --password          Ventana de contraseña
  --textbox  [width] [height] Ventana de texto
  --textinputbox   [width] [height] Ventana de introducción de texto
  --combobox  item [item] [item] ... Ventana con lista desplegable
  --menu  [tag item] [tag item] ... Ventana de menú
  --checklist  [tag item status] ... Ventana de lista de selección
  --radiolist  [tag item status] ... Ventana de lista de selecciones excluyentes
  --passivepopup   Ventana emergente pasiva
  --getopenfilename [startDir] [filter] Ventana de archivo para abrir un archivo ya existente
  --getsavefilename [startDir] [filter] Ventana de archivo para guardar un archivo
  --getexistingdirectory [startDir] Ventana de archivo para seleccionar un directorio ya existente
  --getopenurl [startDir] [filter] Ventana de archivo para abrir un URL ya existente
  --getsaveurl [startDir] [filter] Ventana de archivo para guardar un URL
  --geticon [group] [context] Ventana de selección de iconos
  --progressbar  [totalsteps] Ventana de barra de progreso, devuelve una referencia D-BUS para comunicarse
  --getcolor                Diálogo de color para seleccionar un color
  --title             Título de la ventana
  --default           Entrada predefinida en las listas desplegables, menús y color
  --multiple                Permitir que las opciones --getopenurl y --getopenfilename que devuelvan varios archivos
  --separate-output         Devolver los elementos de la lista en líneas separadas (para la opción de lista de selección y abrir archivo con --multiple)
  --print-winid             Muestra el winId de cada ventana
  --dontagain   El archivo de configuración y el nombre de la opción para guardar el estado «no-mostrar/volver-a-preguntar»
  --slider  [minvalue] [maxvalue] [step] Cuadro de diálogo con un componente deslizante, devuelve el valor seleccionado
  --calendar          Cuadro de diálogo de calendario, devuelve el estado actual
  --attach           Convierte el cuadro de diálogo en transitorio para una aplicación X indicada por winid

A continuación pego el código de un script para realizar conexiones de escritorio remoto mediante RDP. Podemos pegar el archivo php en la ruta $HOME/bin y llamarlo mediante un lanzador en el escritorio con la ruta php $HOME/bin/rdesktop.php.

Este script está escrito en PHP simplemente porque me resulta más sencillo manejar cadenas de texto en este lenguaje, pero tranquilamente podría haber utilizado bash scripting u otro lenguaje de script con posibilidad de ejecutar comandos del sistema.

En php tenemos las funciones system() y exec() para acceder a los comandos del sistema. System devuelve la última línea de la salida del comando en caso de tener éxito, y FALSE si ocurre un error.

Modificamos los valores de los arrays $rdp y $server para adaptarlo a nuestras necesidades:

< ?php

/* OPCIONES */
$rdp = array(
'kb'   => "es", //keyboard es,en,fr,de
'xy'   => "1024x768", //screen size
'bit'  => 15, //color depth
'name'  => "usuario", //user name
'dc'   => true, //domain controller true,false
'domain' => "dominio", //valid if dc is true
'title'  => "RDP:", //window title
'deco'   => true  //show window decoration
);

/* SERVIDORES */
$server = array( // name, server or ip : port
array('servidor1','servidor1.dyndns.org'), //default port
array('servidor2','servidor2.dyndns.org:2500'),
array('servidor3','servidor3.dyndns.org:2500')
);

echo var_dump($rdp); //solo visible por consola
echo var_dump($server); //solo visible por consola

$cnf = "Parametros preconfigurados de rdesktop:\n";
    foreach($rdp as $key => $value)
        $cnf.="\n $key = $value";
$abt = "RDesktop PHP/Kdialog v0.1\n\nAutor: Martin A. Gonzalez (magtec)\nWeb: www.animacionyweb.com.ar\n";

do{
    if($result!='rdp') $result = menu();
    switch($result){
        case 'rdp': $result = rdp($rdp,$server); break;
        case 'cnf': system("kdialog --title \"rdesktop\" --msgbox \"$cnf\""); break;
        case 'abt': system("kdialog --title \"rdesktop\" --msgbox \"$abt\""); break;
        default : break;
    }
}while($result != -1);

function menu(){
    $option = system("kdialog --title \"rdesktop\" --menu \"Opciones del asistente\" rdp \"Listado de servidores\" cnf \"Configuracion\"  abt \"Creditos\" ", $error);
    if($error==0) return $option;
    else return -1;
}

function rdp($rdp,$server){
    $line = "kdialog --title \"rdesktop\" --menu \"Listado de servidores\" ";
    $max = count($server);
    for($i=0;$i< $max;$i++)
        $line.= $i." \"".$server[$i][0]."\" ";
    $option = system( $line, $error);
    if($error==0){
        $line = "rdesktop -5 -k ".$rdp['kb'];
        $line.= " -g ".$rdp['xy'];
        $uniq = date('y').intval(date('z')/100);
        $line.= " -n ".$rdp['name'].$uniq;
        $line.= " -u ".$rdp['name'];
        if($rdp['dc']==true) $line.= "@".$rdp['domain'];
        $line.= " -a ".$rdp['bit'];
        $line.= " -T ".$rdp['title'].$server[$option][0];
        if($rdp['deco']==false) $line.= " -D ";
        else $line.= " ";
        $line.= $server[$option][1];

        echo $line;
        echo system( $line, $error);
        $line = "kdialog --passivepopup \"La conexion a ".$rdp['title'].$server[$option][0]."\nha sido cerrada o interrumpida.\" 10";
        echo system( $line, $error);
        return 'rdp';
    }
    else return 'back';
}

?>

Llegué media hora antes para jugar un poco con la netbook del plan conectar igualdad, tenía un RXART :(, lo bueno: prepararon una netbook para cada profesor y un proyector.

A diferencia de mi anterior experiencia con Rxart esta versión es mas o menos usable, pero muy recortada y tuneada para que se parezca a Windows XP, imitando incluso el menú inicio. Lo bueno: tiene una terminal y el centro de software funciona.

La cita fué en la EET12 de San Justo, ex ENET nº1. Hubo muchisimas preguntas y mucho interés, creo que fué una jornada productiva pero igualmente voy a preparar un pequeño cuestionario para tener algo de feedback.

Las netbooks tiene una versión de GNU/Linux modificada por Rxart, al iniciar pide la clave del usuario alumno, la cual es alumno y despliega una presentación flash a pantalla completa, presionamos la tecla [ESC] y cerramos la ventana. En el escritorio tenemos un manual de uso de la netbook, la presentación flash, acceso a Firefox, acceso al disco duro y a aplicaciones de Exo.

A continuación vemos un escritorio muy parecido a Windows XP con algunos iconos y un lanzador de aplicaciones. El icono del dispositivo de red en la bandeja del sistema nos permite conectarnos a redes inalambricas pero solo con cifrado WEP. Junto al icono de la red hay un icono del software de seguridad que muestra un cuadro de dialogo cada pocos minutos, lo que es muy molesto, el referente nos comentó que esto viene así de fábrica para que los chicos sepan cuantos arranques les quedan.

El centro de software, en el menú aplicaciones tiene cientos de aplicaciones para descargar y está configurado, funciona la instalación de nuevas aplicaciones. Se explicó el sistema de repositorios, paquetes y dependencias.

Se repartieron algunas copias del material y se entregó un CD con manuales. Al final de la charla saqué dos fotos de los profes que quedaban.


 
Las fotos no tienen muy buena calidad ya que las saque con el teléfono móvil, lo que cuenta es la intención. Fue una muy buena experiencia, al menos para mí ya que la audiencia se mostró interesada.

A continuación dejo disponible para descarga el manual entregado en la charla:
Introducción al Software Libre – versión 0.1

La gente de conectar igualdad habló sobre el plan de inclusión digital, las netbooks del plan inclusión digital y las experiencias obtenidas. Sin embargo durante la charla todo el material y softwares se mostraron sobre Windows7, hablaron de software público y poca mención se hizo del software libre. Cabe aclarar que el software llamado software público engloba software privativo.

La charla de Stallman trató los temas ya conocidos y habló también sobre la censura, la privacidad en la red, las redes sociales, la computación en la nube, el DRM, los derechos digitales y sobre el plan de inclusión social Conectar-igualdad, al cual denominó “Conectar a maldad”, con explicaciones bastante acabadas sobre su postura, y es que a pesar de que las netbooks traen GNU/Linux, este no se utiliza en clase bien por falta de capacitación o por inercia, además de que el software educativo incluido solo funciona en windows.

Sin embargo lo más llamativo se produjo en la conferencia de prensa siguiente y en publicaciones oficiales del sitio CISL.org.ar, y es que los organizadores de la CISL2011, siglas que significan: “Conferencia Internacional de Software Libre”, manifestaron su “absoluta discrepancia” con los dichos del señor Stallman, quien es el padre del software libre.

En los foros y listas de correo como gleducar la cosa no ha sido diferente, la verdad me da pena ver algunas actitudes, y mucha bronca la intolerancia, por eso se me hace un poco difícil ser moderado en mi opinión.

Me quedo con lo que alguien expresó en una lista como pensamiento que he hecho propio sobre la inclusión de software privativo que nos cuesta millones de pesos:

Dicen que leer cualquier libro es mejor que no leer nada. Como si por el mero hecho que algo haya sido editado, impreso y encuadernado quede garantizado que el contenido albergarará valores altos, universales y eternos. Y quien lo lea en cualquier momento o circunstancia va a estar haciendo algo más noble y profundo que casi cualquier otra cosa.

El plan CI es como si hubiera un programa AlimentAR que diera dos opciones a los chicos, una con ensaladas y guisos y otra con McCombo y bebida de Cola, y luego un médico vendría a opinar que el plan AlimentAR es “Condenar a Obesidad” ya que los chicos sólo comen McCombo.

—

Separandome un poco de la polémica y a raíz de un hilo sobre el CISL en preguntaslinux.org, me encuentro escribiendo y reuniendo material sobre Software libre y GNU/Linux, y sobre las netbooks del programa. A la vez programamos unas charlas/capacitaciones en una escuela técnica de San Justo(partido de La Matanza) para docentes.

El libro se encuentra aún en revisión y no es muy extenso, en pocos días lo subiré aquí para descarga pero por el momento dejo unos enlaces a información de interés y material adicional:

Manuales y material adicional:

http://wiki.gleducar.org.ar/index.php/Tutoriales_de_INTEC-GCBA

http://www.escuelaslibres.org.ar/descargas/doc_download/150-alfabetizacion-digital-basica.html

http://www.molinux.info/downloads/documents/manual-usuario-molinux/

Lectura recomendada:

http://www.gnu.org/philosophy/right-to-read.es.html

http://www.pagina12.com.ar/diario/dialogos/21-124703-2009-05-11.html

http://www.pagina12.com.ar/diario/dialogos/21-130490-2009-08-24.html

http://www.lanacion.com.ar/1404750-stallman-yo-no-soy-un-heroe

http://www.youtube.com/watch?v=YfbDdt7rDH8 (acerca del kindle)

http://wiki.gleducar.org.ar/index.php/Proyecto_Conectar_Igualdad/Software

.

HTML5 añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time(fecha del contenido), link rel=” (tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen entre ellas. No tienen especial impacto en la visualización, se orientan a buscadores. Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

HTML 5 está formado por varios módulos distintos, cuyo grado de especificación está en niveles dispares. Casi todas las características de HTML 5 están ya listas para ser implementadas, y las versiones más nuevas de casi todos los navegadores implementan algunas de las características de HTML 5. Pero para que una web se vea bien en todos los sistemas, hay que utilizar sólo aquellas partes que funcionan en todos los navegadores, por lo que realmente son pocas si queremos hacer un sitio web compatible.

Manos a la obra :)
En este artículo voy a tratar los recursos a implementar para poder comenzar a utilizar la nueva marcación html5, en concreto las etiquetas: article, aside, command, details, summary, figure, figcaption, footer, header, hgroup, mark, meter, nav, progress, ruby, rt, rp, section, time, wbr y canvas.

Utilizaré un ejemplo sencillo que represente la estructura básica de cualquier página web, por ejemplo, lo más común es encontrar una web con las secciones <div class=” header, navigation, content, sidebar y footer “>.Traducido a HTML5 sería:

<!DOCTYPE HTML>
<html>
<head>
    <title>Prueba de HTML5 y CSS3</title>
</head>
<body>
  <div class="wrap"><div class="page">
    <header>
        <h1>Titulo 1</h1>
        <h2>Titulo 2</h2>
        <h3>Titulo 3</h3>
        <nav><li> Hola mundo! </li><li> Contacto </li></nav>
    </header>
    <div class="cuerpo">
        <aside>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </aside>
        <article>
            <h1>Titulo</h1>
            <h2>Subtitulo</h2>
            <p>Texto de prueba, contenido.</p>
        </article>
        <div style="clear:both;"></div>
    </div><!-- cuerpo -->
    <footer>
        <p>Pie de pagina y creditos.</p>
    </footer>
  </div><!-- wrap --></div><!-- page -->
</body>
</html>

Reseteando los estilos del navegador
Antes de seguir debo mencionar que todos los navegadores cuentan con una hoja de estilos CSS que aplican por defecto, esto quiere decir que cuando nosotros no sobrescribimos el estilo de un elemento se aplican las propiedades definidas en la hoja de estilos del navegador. Esta es una de las razones por las que vemos diferencias en el diseño entre un navegador y otro.

Para solucionar esto muchos desarrolladores y diseñadores utilizamos hojas de estilos que “resetean” los estilos aplicados por el navegador, haciendo que nuestros diseños necesiten menos modificaciones para verse igual en todos los navegadores.

Particularmente yo utilizo las hojas de estilos reset.css, base.css y fonts.css de YUI, un framework javascript/css desarrollado y mantenido por Yahoo. Este framework es muy extenso y tiene cientos de funciones, pero vamos a limitarnos a estas hojas de estilos de http://developer.yahoo.com/yui/:
Archivo reset.css – versión comprimida reset-min.css
Archivo base.css – versión comprimida base-min.css
Archivo fonts.css – versión comprimida fonts-min.css

Personalmente junté el contenido de estos 3 archivos en una versión semi-comprimida, y para utilizarlo simplemente lo incluimos en la sección head como el resto de los estilos de la página:
<link type=”text/css” rel=”stylesheet” href=”reset.css”>

La imagen anterior muestra como se ve el anterior código html en IE7 y Firefox 3.6 antes y despues de aplicar el estilo del archivo reset.css, como se puede apreciar, las diferencias de presentación se minimizaron bastante.

IE Print Protector – ieCSS
El siguiente paso es proporcionarle a IE los medios para renderizar páginas HTML5. IE Print Protector es un pequeño programa javascript que permite visualizar páginas HTML5 en Internet Explorer. IE Print Protector posibilita que IE renderice elementos HTML5 correctamente por pantalla e impresora. Podemos descargar ieCSS desde http://www.iecss.com/print-protector/ o desde http://code.google.com/p/html5shiv/
http://www.iecss.com/print-protector/javascript/iepp.1-6-2.js
http://html5shim.googlecode.com/svn/trunk/html5.js
La forma de utilizarlo es mediante un comentario condicional introducido por Microsoft en Internet Explorer en la versión 5 del navegador:
<!–[if lt IE 9]>
<script src=”html5.js”></script>
<![endif]–>

Este código javascript permite que las versiones anteriores a IE9 aniden correctamente las nuevas etiquetas HTML5 en el DOM.

Aplicando un estilo
Ahora apliquemos un estilo para ubicar los elementos de manera que sean rápidamente identificables por el usuario, solo utilizaremos unos estilos básicos.

Estilo aplicado visto con Internet Explorer 6:

Estilo aplicado visto con Internet Explorer 7:

Estilo aplicado visto con Internet Explorer 8:

Estilo aplicado visto con Internet Explorer 9:

Estilo aplicado visto con Firefox 3.6:

Estilo aplicado visto con Firefox 4:

Como podemos ver Internet Explorer 6, 7 y 8 aún no muestran la página correctamente y Firefox 3.6 lo hace con algunos errores, esto se debe a que estos navegadores aplican la propiedad display:inline de css a los elementos desconocidos, sobrescribiendo con display:block veremos algunos cambios. Este código lo podemos añadir al archivo reset.css:

Internet Explorer 7(la versión 6 se ve peor):

Internet Explorer 8:

Firefox 3.6

En estas capturas se puede apreciar como se comportan los diferentes navegadores con el nuevo estandar. IE9 y FF4 hacen un gran trabajo, IE8 y FF 3.6 renderizan de manera más que aceptable luego de aplicar las herramientas y métodos descritos más arriba en este post.

Si solo utilizamos HTML5 de forma parcial como vimos en este artículo, y teniendo en cuenta los datos del artículo anterior, el porcentaje de usuarios que podrá visualizar el sitio será cercano al 76%, pero aún existirá un 24% de visitantes tendrá una mala experiencia de navegación.

IE6 e IE7 la verdad me desaniman bastante, en cuanto tenga tiempo veré como mejorar la presentación en IE7, pero no tengo muchas esperanzas(ni ganas). La verdad, no veo la hora de que estas dos versiones desaparezcan :)

Pueden ver el ejemplo de este artículo funcionando en: http://www.animacionyweb.com.ar/pruebas/html5/

Mi sorpresa fue que a pesar de lo que había leído varios navegadores no se comportaban como yo esperaba, incluso haciendo uso del código js de @jon_neal disponible desde su web(iecss pre proccessor), o desde google(html5shiv).

En teoría HTML5 es retro-compatible, lo que significaría que la presentación de una página HTML5 no debería romperse, tampoco deberían aplicarse los estilos a los elementos desconocidos, pero las cosas deberían verse mas o menos en el lugar que fueron puestas. Esto no es así debido a la implementación de HTML que hace cada navegador.

Para comenzar debo decir que los navegadores tienen 2 modos de renderizado: “quirks mode” y “standards mode”. Cuando no se define un DOCTYPE al comienzo del documento HTML el navegador renderiza en modo quirks, compatible con contenido antiguo(ej html3), y cuando se define un DOCTYPE el navegador renderiza en modo estandar, utilizando la versión de html indicada. Actualmente hay unos 15 doctypes que disparan el modo estandar en los navegadores.

Una breve introducción:
En el modo estandar los navegadores dan un correcto tratamiento a los elementos de acuerdo a la especificación implementada de HTML.

Una página HTML es una serie de elementos anidados. La estructura de la página es como un árbol, algunos elementos son hermanos, como las ramas que salen de un tronco y otros pueden ser como hijos, anidados dentro de otros elementos, siendo html el elemento raíz.

HTML5 es la quinta revisión del lenguaje básico de desarrollo web HTML (Hypertext Markup Language), que es el principal lenguaje utilizado en la World Wide Web. HTML 5 establece una serie de nuevos elementos y atributos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.

Document Object Model

“El Document Object Model o DOM (‘Modelo de Objetos del Documento’ o ‘Modelo en Objetos para la representación de Documentos’) es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente. El responsable del DOM es el World Wide Web Consortium (W3C).“ <WIKI>

El problema de retrocompatibilidad de HTML5 comienza cuando verificamos que todos los navegadores implementan la API para representar documentos HTML de forma diferente. Una de las características de la presentación HTML es que el usuario no ve ningún error cuando la página está mal formada, ya sea porque le falta el cierre de un tag o porque tiene un error de sintaxis. El usuario a lo sumo verá alguna inconsistencia en el diseño. Esto que en principio es una ventaja se convierte en desventaja cuando utilizamos nuevos elementos y estos no se renderizan correctamente. Afortunadamente existen tests(html5test.com), y librerías(modernizr) para detectar y evitar algunos problemas.

Otro problema se presenta con IE6 e IE7, mientras que Firefox desde su versión 3.0 anida los elementos desconocidos, aunque por defecto solo es posible aplicarle unas pocas propiedades css como fuente y tamaño, IE6 e IE7 tratan a los nuevos elementos sin aplicarle ninguna propiedad quedando estos a la altura del body en cuanto a anidación se refiere.

Para solucionar este problema @jon_neal creó iess pp(http://code.google.com/p/html5shiv/), un pequeño script que por medio de javascript declara los nuevos elementos de html5 en el elemento html del DOM permitiendo que el navegador los anide correctamente, pero por desgracia en IE tampoco se aplican bien los estilos.

Esto hace que nos desanimemos un poco ya que los únicos navegadores que renderizan correctamente los elementos básicos de HTML5 y CSS3 son Opera desde su versión 10, Chrome desde su versión 11, Firefox desde su versión 5, y de manera muy limitada IE9. IE8 aunque hace algún avance no supera a Firefox 3.5 renderizando HTML5.

Existen algunas cosas que podemos hacer para utilizar los nuevos elementos de marcado de HTML5 y que se visualicen bien en navegadores antiguos, pero esto es solo una muy pequeña porción de lo que trae html5, e igualmente seguiremos sin poder utilizar las propiedades de estos elementos.

Los elementos(tags) que podemos comenzar a utilizar logrando que se visualicen correctamente en navegadores que originalmente no soportan html5 son:
article, aside, command, details, summary, figure, figcaption, footer, header, hgroup, mark, meter, nav, progress, ruby, rt, rp, section, time, wbr y canvas

Entonces, ¿conviene comenzar a diseñar en HTML5?
Bueno, todo depende del público objetivo de la web y de los navegadores que utilicen. ¿Estamos dispuestos a romper la web para los usuarios que tienen un navegador de antes de 2010?. Teniendo en cuenta que muchos internautas utilizan el navegador que viene con el SO, y que no hay nuevas versiones de IE para windows XP, nos encontramos en un dilema: ¿romper la web o no romperla? :)

Es posible comenzar a utilizar ahora las etiquetas anteriormente mencionadas pensando en el soporte futuro del estándar, pero en cuanto queramos hacer una implementación completa de html5 en una página nos encontraremos con que muchísimos elementos no funcionan o no lo hacen como deberían, como por ejemplo los nuevos elementos de formulario. Los nuevos tipos para input no funcionarán como deben en muchos navegadores y veremos en su lugar un input type text, esto es debido a que el estándar html define que los tipos desconocidos de elementos de formulario se traten de esa manera, y como puede apreciarse en el gráfico al inicio de este post, no podemos despreciar las visitas de navegadores obsoletos.

El gráfico muestra las ultimas 15000 visitas de un sitio online de noticias de Argentina, por lo que la muestra es bastante amplia como para como para ser representativa de la realidad local. En el gráfico puede apreciarse que solo el 36%(Chrome, IE9, FF5/6) de los usuarios disponen de un navegador capaz de renderizar correctamente una página hecha en HTML5, por lo que hay un 64% que vería nuestra web rota. Cabe aclarar que a la fecha de este artículo ningún navegador soporta completamente el nuevo estandar, por lo que actualmente ningún navegador ha implementado correctamente todos los elementos y modificaciones introducidos por la nueva especificación.

Si solo utilizamos HTML5 de forma parcial como vimos en este artículo, el porcentaje de usuarios que podrá visualizar el sitio será mucho mayor, por sobre el 76% de ellos, pero aún existirá un 24% de visitantes tendrá una mala experiencia de navegación.

Otro dato interesante de ese gráfico es que el 36% de los usuarios cuenta con una pantalla de 1024 pixels de ancho. Este es un buen dato a tener en cuenta a la hora de diseñar una web.

¿Cuando comenzar a utilizar HTML5?
Por desgracia Microsoft no publica nuevas versiones de Internet Explorer para Windows Xp, y dado que en Argentina tiene más del 50% del mercado, y más del 40% a nivel mundial, no hay buenas expectativas de que sea pronto. De acuerdo al gráfico IE6 e IE7 suman 21% y IE8 cuenta con el 28%, esto quiere decir que casi el 90% de los usuarios de Windows Xp utilizan el navegador que viene con windows, obstaculizando el avance de las nuevas tecnologías, porque las empresas no realizaran webs que no puedan ver la mitad de los visitantes.

Como dije anteriormente podemos comenzar a utilizar algunos elementos de html5 utilizando varios trucos, pero para tener una mejor idea del tiempo que suele demorar la adopción de un estandar, la versión HTML 4.01 que se utiliza actualmente fue publicada en diciembre del año 1999, y recién en 2009 comenzamos a ver su verdadero potencial.

Seguramente pasen algunos años para que HTML 5 sea lo que HTML 4.01 es hoy, pero las mejoras que aporta la nueva versión son tan impresionantes, que pueden afectar su velocidad de su adopción.

En próximas entregas avanzaré con algunos ejemplos sobre Firefox 6, mientras tanto hay que convencer a nuestros conocidos que dejen de utilizar Internet Explorer.