Lo que nos trae en realidad HTML5

HTML5 101 es una presentación a cargo de Christian Heilmann principal evangelista de HTML5 en Mozilla.

Esta charla tuvo lugar el pasado mes de octubre y en ella se explicó acerca de lo qué es y de lo que no es HTML5, acerca de hacia donde nos lleva la revisión del lenguaje básico de la Web, así como de las diferentes tecnologías relacionadas.

La presentación HTML5 101 de una hora de duración e íntegramente en inglés está disponible para su uso y distribución por cualquier interesado gracias a una licencia Creative Commons.

Si estas interesado en conocer lo que a juicio de Mozilla son las claves de HTML5 puedes acceder a esta presentación desde diapositivas + audio.

fuente.desarrolloweb

Tablas compatibilidad HTML5 en navegadores

Presentamos este conjunto de tablas donde mostrar el soporte de HTML5 en los principales navegadores de escritorio y móviles.

Pese al esfuerzo por la definitiva llegada de HTML5, lo cierto es que cada navegador implementa las mejoras de los estándares a su propio ritmo, por lo que tener a mano estas tablas puede resultar muy útil.

Este servicio, además de ofrecernos información clasificada para su mejor comprensión sobre el soporte de HTML 5, CSS3, SVG y otras tecnologías, nos permite seleccionar dos navegadores y realizar comparaciones sobre el grado de implementación de sus propiedades.

Entre los navegadores incluidos en estas tablas encontramos  Internet Explorer, Firefox, Safari, Chrome y Opera, tanto en versiones actuales, versiones anteriores y versiones en desarrollo.

Aquellos desarrolladores y/o diseñadores web interesados pueden acceder a esta plataforma web desde la que informarse de forma actualizada acerca de los navegadores con soporte HTML 5 desde caniuse.com.

fuente:desarrolloweb

Google Abandonó Gear por Html5

Google ha anunciado que no trabajara mas en Google Gears. Las razones son es que Google esta mudándose todas sus aplicaciones en la web a HTML5. Otra de las razones es que Google quiere crear una relación y sincronizar sus aplicaciones con la Web, llevar a la idea de la “Cloud Computing“

La adaptación de las funciones actuales de Google Gears hacia HTML5 aún no está completa, pero de acuerdo a las palabras oficiales, se encuentran muy cerca de alcanzar ese objetivo.

Aunque todavía se ve muy lejos en que se tome el HTML5 como algo universal y se cuestiona a Google está forzando de forma general la adopción de HTML5, pero en realidad es preferible que el traslado se realice hacia un estándar conocido y no se este recurriendo a extensiones y plugins.

Que es un Documento HTML ? Guía Rápida

Un documento en HTML (“HyperText Markup Language”) define la forma en que será desplegada información en un navegador (“Netscape” o “Explorer”), este documento se compone de tags y contenido .

Un tag delimita el inicio y fin de cierto contenido, esto es, cada tag indica cuando se utilizarán letras negritas , cuando iniciarán letras rojas , la ubicación de gráficas y cualquier otra forma que influya en el despliegue de información.

Documento Básico

<html>
<head>
<title> Documento Básico en HTML </title>
</head>
<body>
<h2> Este es el Titulo </H2>

<!-- Este es un comentario de recordatorio
       que no aparecerá en pantalla -->

<a href="mailto:webmaster@osmosislatina.com">
       Envíame un Mail
</a>

</body>
</html>

Analizando el contenido del Documento básico se puede observar que los tags se encuentran definidos entre < y > ; el tag <title> indica que a partir del tag todo contenido será considerado información de Titulo, mientras el tag similar con / ( </title> ) indica que la información de Titulo ha terminado; el tag <!-- indica el inicio de un comentario y --> indica que el comentario termina.

Como generar el Documento

Para generar un documento en HTML es necesario utilizar un editor de textos si utiliza Windows este seria “Notepad” , no utilice “Word” , “Word” agrega un formato adicional al texto ( Editores WYSIWG ), para escribir un documento en HTML este debe ser solo texto , por lo tanto se debe utilizar un editor de textos para que no ocurra ningún tipo de formato adicional.

Una vez generado el documento, este debe de ser guardado con la extensión .html o .htm , esto garantiza que cada vez que sea abierto el documento vía un icono , este será desplegado por un Navegador (“Netscape” o “Explorer”). También es posible desplegar (abrir) el documento mediante el menú : File | Open del Navegador.

Como opera el Navegador y consideraciones

Cuando un navegador (“Netscape” o “Explorer”) recibe cualquier documento y observa los tags , éste despliega el documento de acuerdo a los estándares establecidos por el Navegador (este proceso es conocido como rendering), a pesar de estos estándares en HTML ( Versión 4.01), existen varias discrepancias en su implementación, la gran mayoría de navegadores desde “Netscape”,”Explorer” y algunos otros utilizan tags que son implementados como propietarios, esto es, si se utiliza un tag para un color grisrojo desarrollado en el Navegador “Netscape” es muy probable que este tag no sea identificado por otros navegadores (“Explorer”) y por lo tanto no se obtenga el mismo resultado (“visualización”) en diferentes Navegadores.

Esta discrepancia en tags no solo se da en colores, sino en diversas áreas relacionadas con el navegador, el caso más delicado es cuando se desarrolla una aplicación de cliente que solo es capaz de ejecutarse en un tipo (marca) de Navegador.

Que es XHTML ?

XHTML (“Extensible HyperText Markup Language”) es la evolución de la ultima versión de HTML (4.01) hacia una nueva estructura y sintaxis de documentos distribuidos en ambientes Web basado en el estándar XML .

Entre las principales diferencias de HTML 4.01 a XHTML son :

  • XHTML posee una sintaxis estrictamente apegada a XML a diferencia de HTML.
  • La anulación (“deprecation”) de diversos tags HTML 4.01, no válidos en XHTML .
  • Fuerte énfasis en el uso de CSS (“Cascading Style Sheets”) .

Creando Formularios en HTML

Formas y Aplicación de Servidor

La recabación de datos forma una parte muy importante para cualquier sitio de Internet y esta también se lleva acabo con elementos HTML denominados formas, los elementos principales de una forma son los tags <form> que indican como y a donde será enviada la información. Dentro de <form> se declaran dos atributos muy importantes, uno de ellos es method y el otro action .

<body>
......
......
<form method="post" action="/cgi-bin/confirmar.pl">
......
......
</form>
.....
</body>

El atributo method le indica al navegador (“Netscape” o “Explorer”) como debe ser enviada la información al Servidor, este valor puede ser post o get , sin entrar en mucho detalle, si se utiliza get los elementos de la forma serán enviados al Servidor en el URL (“Universal Resource Locator”) de action, esto es, si dentro de la forma se solicitan los valores: nombre,edad y nacionalidad, la información sería enviada de la siguiente manera:

http://www.osmosislatina.com/cgi-bin/confirmar.pl?
nombre=PedroMtz&edad=25&nacionalidad=americana

Después del URL el navegador agrega ? para indicar que continúan variables solicitadas, a partir de ? continúan las variables definidas por medio de un = y separadas por un &, en cambio si se utiliza post las variables y sus valores se incluirán en el contenido de la requisición, por debajo del URL. Lo anterior garantiza que el usuario final no sea capaz de observar las variables en el URL, fuera de esto, la única implicación en utilizar post o get es que la aplicación de Servidor sea capaz de leer las variables y sus valores.

En el caso anterior la Aplicación de Servidor (Programa) que procesa esta información es aquella definida por el atributo action , la cual es un “script” en Perl llamado: confirmar.pl ; en otros casos esta Aplicación de Servidor pudo ser: Un JSP (“Java Server Page”) , ASP (“Active Server Page”), PHP (“Hypertext Preprocessor”) u otra metodología de Servidor.

Tags input

El Tag input permite pasar un conjunto de variables con sus respectivos valores en una forma.

Tipo Text

Este tipo de variable permite al usuario final asignar un valor de texto a la variable en cuestión , se expresa de la siguiente manera:

País: <input type="text" name="pais" size="10" maxlength="20" value="mexico">

La declaración indica que será desplegado un recuadro de 10 espacios (size) donde la variable llevará por nombre pais, dicha variable puede tener un valor máximo de 20 letras (maxlength) y aparecerá un valor “default” mexico (este valor puede ser modificado por el usuario).

Tipo Password

También permite que el usuario especifique un valor de texto, pero a diferencia del tipo text el usuario observará asteriscos ( **** ) mas no el texto.

Contraseña: <input type="password" name="pass" size="15" maxlength="30">

NOTA: A pesar que el valor no aparece en pantalla, el valor no es protegido al momento de ser transferido al nivel de Red, para realizar esta protección se requiere utilizar encriptación en el Servidor de Paginas.

Tipo Radio

Este tipo de variable es utilizada para desplegar un menú con botones.

País:<input type="radio" name="pais" value="ar">Argentina
     <input type="radio" name="pais" value="br">Brazil
     <input type="radio" name="pais" value="co">Colombia
     <input type="radio" name="pais" checked value="mx">México
     <input type="radio" name="pais" value="ve">Venezuela

Lo anterior indica que el nombre de la variable pais será un menú de selección de botones, donde el valor “default” ( checked ) será México, los parámetros value indican el valor que tomará la variable en caso de ser seleccionada; value es de gran ayuda cuando la descripción de la variable es extensa y solo se desea enviar un vocablo o iniciales como valor al Servidor de Paginas, si se omite el valor value , el valor de la variable pasa a ser aquel que se encuentra del lado derecho del elemento.

Tipo Checkbox

Este tipo de variable es utilizada para desplegar un menú con cuadros de selección, a diferencia del tipo Radio , Checkbox permite la selección de múltiples valores :

Intereses:<input type="checkbox" name="intereses" value="p">Política
          <input type="checkbox" name="intereses" checked value="d">Deportes
          <input type="checkbox" name="intereses" value="c">Cine
          <input type="checkbox" name="intereses" checked value="t">Tecnología
          <input type="checkbox" name="intereses" value="a">Administración

Los parámetros que son utilizados para este tipo de variable tienen el mismo funcionamiento que el Tipo radio ( name, checked, value), la única diferencia es que si son seleccionados varios valores, la información es pasada al Servidor de Paginas como: intereses="d" intereses="t" , por lo tanto debe asegurarse que su Aplicación de Servidor sea capaz de procesar dos o más valores para la misma variable.

Tipo Hidden

Este tipo de elemento es utilizado para esconder el valor de cierta variable, se utiliza generalmente cuando es necesario procesar datos a lo largo de dos o tres paginas, de esta manera la variable sigue existiendo en la forma, pero no es desplegada en pantalla.

     <input type="hidden" name="intereses">
     <input type="hidden" name="pais" value="mexico">

Tag select

El Tag select permite generar menús de una manera similar a las mencionadas anteriormente.

 

<select size="3" name="intereses" multiple>
<option  value="p">Política
<option  value="t" selected>Tecnología
<option  value="d">Deportes
<option  value="c">Cine
<option  value="m">Música
</select>

Los parámetros del Tag select son:

  • name : Indica el nombre de la variable (como los Tag input).
  • size : Especifica el número de opciones que serán desplegadas en pantalla ( las restantes serán incluidas en forma de menú).
  • multiple (opcional): Permite al usuario final elegir varios valores (si se omite multiple solo se permite seleccionar un valor, como el comportamiento del input radio ); para seleccionar diversos elementos de manera aleatoria, se oprime del teclado Ctrl.
  • <option> : Define los valores de la variable en cuestión, dentro de estos tags es posible indicar el parámetro value que tiene el mismo funcionamiento que los Tags input , y selected que permite preseleccionar ciertos valores.

Tag textarea

Los Tags textarea son muy similares a input text , la diferencia estriba en que textarea permite definir el área por renglones y columnas.

El parámetro name indica el nombre de la variable que llevará el contenido, mientras cols y rows definen el espacio que es visible en pantalla, cualquier texto que aparezca entre los tags textarea será desplegado dentro del recuadro.