Curso de HTML5: Nuevos campos y atributos de Formulario

Aquí está el listado de los nuevos campos de formulario:

  •  color: selección de color
  • date: selección de fecha, adiós jcalendar!
  • datetime: fecha y hora
  • Time: sólo hora
  •  Month: mes del año
  • Week: semana del año, esto va para los alemanes 🙂
  • email: para rellenar más fácil un email en el movil
  • number: para rellenar más fácil un número
  • url: para rellenar más fácil una url en el movil
  • tlf: para rellenar más fácil un teléfono en el movil
  • search: típico campo de buscar
  • range: slider desplazador cuyo valor va entre min y max, y a pasos con step.
  • datalist: define un listado para un campo. http://www.w3schools.com/tags/tag_datalist.asp
  • file con opción de multiple

Nuevos atributos de campos de formulario:

  •  Required: campo requerido
  • Placeholder: nos permitirá colocar un texto predefinido en el valor del campo pero que al escribir el usuario se quita 
  •  Autofocus: campo que adquiere el foco
  •  Readonly: solo lectura
  •  Disabled: deshabilitado
  •  Pattern: validaciones por expresiones regulares
  •  Autocomplete: con off deshabilitamos el autocompletado del navegador
  •  Min max step: atributos de los tipo range, number y progress
  • label en option , para dejar ya el value 🙂

Práctica sugerida

Intenta usar estos nuevos tipos de campos en un formulario html5 y comprueba cómo se ven en Chrome, Firefox e Internet Explorer. Si tienes la posibilidad intenta verlo también desde un móvil.

Licencia Creative Commons

Curso de HTML5: Etiquetas Semánticas

Nuevas etiquetas semánticas

A continuación detallaremos las principales nuevas etiquetas semánticas de HTML 5:
  • header: el típico div id=”header” sería lo más aproximado, debería contener la cabecera del documento, lo típico que remetimos en la plantilla a lo largo de todo el sitio web.
  • footer: lo mismo pero con el pié de página, donde solemos colocar el copyright el mapa de la web , la dirección de la empresa etc…
  • section: aquí el tema no es tan fácil de definir. Se refiere a las distintas zonas dentro de una determinada web, las áreas donde vamos colocando los widgets, los contenidos, los menús, las partes en las que está compuesta la página. También puede representar distintas partes de una noticia o un post de un blog.
  • article: en si sentido más genérico sería una noticia, un post, un artículo de un blog, o incluso la ficha de un producto en la tienda. En su sentido más académico serían artículo publicados. 
  • nav: es la etiqueta que debería englobar los menús o las barras de navegación, las migas, etc…
  • aside: todo contenido complementario al contenido principal, que debería estar o dentro de una section o un article, debería estar dentro de un aside. Un ejemplo podrían ser los apartados de productos relacionados con un producto que estoy visitando. 
  • hgroup: debería agrupar aquellas cabaceras, h1, h2, etc.. que van relacionadas. Nombre de empresa y eslogan, sería un ejemplo. 
  • figure: típico gráfico relacionado con el texto, donde visualmente podemos ver algo que nos están explicando en texto, tablas, imágenes, gráficas, etc.. serían figure’s
  • time: se ofrece a escribir una fecha o una hora, cuidado con el atributo datetime 🙂
Lo bueno de la semántica es que no hay maneras correctas o incorrectas de aplicar estas etiquetas, sino maneras lógicas para el autor de colocarlas. No existe una regla definida de si los article deben contener sections o no. Aunque sería lógico pensar en un apartado de la web con los últimos artículos sería una sección que dentro tuviera un listado de artículos.

Práctica propuesta

Intenta ir a la web de amazon de un producto, e intenta definir que etiquetas asociarías a que apartados de la web. Repite ese proceso con un blog, la portada de un periódico y un sitio de recetas. 
Abre un comentario y deja tus impresiones.

Licencia Creative Commons

Curso de HTML5: Estructura Básica

Cambios en la estructura de un HTML5 respecto a HTML4 y XHTML1

A continuación se verán los principales cambios de la estructura básica o el esqueleto de una página HTML5, con comentarios HTML 😉
<!DOCTYPE html>
<!– Lo primero que llamará la atención es el hecho del nuevo doctype simple y efectivo–>
<html lang=“ES-es”>
<!– el idioma definido de manera clara dentro de la etiqueta html–>
    <head>
       <title>Documento HTML</title>
        <!– se acabó el content-type, bienvenido el charset para definir la codificación del fichero –>
       <meta charset=“UTF-8”>
       <meta name=“autor” content=“David Vaquero” />
       <meta name=“copyright” content=“dvaquero.blogspot.com” />
        <!– adios a los type en los scripts y en los estilos 🙂 –>
       <script src=“init.js”></script>
       <script>
       
       </script>
       <link rel=“stylesheet” href=“estilo.css” media=“screen” />
       <style>
        *{
       
        }
    </style>
    </head>
    <body>

       <!– nueva etiqueta heder para identificar la cabecera –>

       <header>
       <img src=“logo.jpg” />
        <!– agrupaciones de H’s –>
       <hgroup>
      <h1>Empresa .com</h1>
      <h2>Somos los mejores en lo que hacemos</h2>
       </hgroup>
        <!– nuevo etiqueta nav para los menús y sistemas de navegación por el sitio y la página –>
      <nav id=“mainmenu”>
      <ul>
      <li><a href=“estructura_base.html”>Estructura base</a></li>
      <li><a href=“fundamentos.html”>Fundamentos</a></li>
      <li><a href=“video.html”>Video</a></li>
      <li><a href=“form.html”>Formulario</a></li>
      <li><a href=“canvas.html”>Canvas</a></li>
      </ul>
      </nav>
       </header>
       
       <div id=“content”>
        <!– el contenido se organizará en artículos y secciones –>
       <article>
      <section id=“titulos”>
      <hgroup>
      <h1 class=“clase”>Titulo</h1>
      <h2>Sub Titulo</h2>
      <h3>Sub sub titulo</h3>
      </hgroup>
      </section>
      <section id=“explicacion”>
      <p id=“iden”>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      <p id=“aviso” class=“clase”>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      </section>
       
       </article>
        <!– aside representará el contenido adosado al contenido principal –>
       <aside>
       <section id=“tablas_relacionadas”>
      <table class=“clase” border=“2”>
      <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
      <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      </tr>
      <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      </tr>
      </table>
      </section>
       </aside>
       </div>
       <!– el pie ya tiene su etiqueta –>
       <footer>Copyright by Pepesan 2013</footer>
    </body>
</html>

Curso de HTML5: Introducción

Introducción

HTML5 es la evolución del estándar HTML4 por lo que para poder entender este curso será necesario conocer la base de HTML4. 
Lo primero que debemos saber es que lo que se está definiendo con HTML5 es un nuevo estándar que se intenta dar solución a los actuales usos de HTML incluyendo en la especificación nuevas etiquetas y API’s Javascript que permitan solventar aquellos problemas típicos que nos daban las web HTML4. 
De cara a conocer las novedades de HTML5 veamos un pequeño listado:
  • Nuevas etiquetas: Semántica y estructuración de Contenido
  • Nuevos Campos de formulario
  • Etiquetas de Audio y Video, adios al FLASH para video.
  • Etiqueta Canvas, un lienzo en el que pintar lo que queramos
  • Websockets, comunicación bidireccional entre cliente y servidor sin peticiones XMLHTTPRequest
  • Comunicaciones, nuevas funciones para las peticiones web desde JS y mensajes entre páginas.
  • Aplicaciones Offline, o cómo hacer que la página funcione sin necesidad de tener conexión a internet
  • Almacenamiento Web: datos simples o bases de datos enteras manejadas desde Javascript
  • File: manejo de sistema de ficheros en local, carpetas y archivos.
  • WebWorkers, hilos de ejecución en JS
  • Geolocalización: o cómo consultar las coordenadas del equipo para hacer búsquedas más efectivas
  • Drag And Drop: desde el DOM básico, nuevos eventos para arrastrar y soltar elementos dentro del documento.
  • History: manejo del histórico de URL’s que se han visitado en la página
Todas esta novedades sobre el estándar están en algunos casos en plena definición y en otros ya completamente definidos.

Soporte por parte de los navegadores

Es importante conocer el soporte de estas funcionalidades por parte de los navegadores en sus distintas versiones. Para ellos disponemos de herramientas que nos van a permitir conocer de antemano o en tiempo de ejecución si el navegador soporta o no una funcionalidad en concreto.

Caniuse

Caniuse es una página en la que podemos consultar todas y cada una de las nuevas funcionalidades y nos indicará en que navegadores y versiones de cada navegador nos va a permitir realizar un uso total o parcial de una determinada funcionalidad.
En la caja de búsqueda indicaremos el nombre de la etiqueta el atributo o incluso el api y nos mostrará una tabla de soporte, muy útil para el análisis de requisitos al empezar o presupuestar un proyecto. 

Modernizr

Es una biblioteca JS que nos va a permitir realizar la consulta al propio navegador para saber si soporta una determinada funcionalidad de HTML5 o CSS3. de esta manera podemos disponer de un plan B por si el navegador no soporta una determinada funcionalidad. 
Página web de Modernizr: http://modernizr.com

Conclusiones

Con estos conocimientos de base podremos hacernos una idea sobre lo que puede y no puede hacer un navegador con soporte de HTML5 

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Archivos

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies