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 

Categorías de Cursos

RSS Cursos de Desarrollo

  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Configuración de un firewall de manera sencilla en Debian/Ubuntu 08/12/2019
    Uno de los problemas principales a la hora de asegurar un servidor es la de filtrar el tráfico de entrada y de salida del mismo, asegurando así que todas las conexiones entrantes y salientes están controladas y sabemos desde donde podemos entrar a los servicios que queremos y no desde donde no queremos. En esta […]
  • Acceso a servidor de la oficina desde fuera gracias a dinaip 06/12/2019
    Una de las tareas para poder acceder a los servicios de nuestro flamante servidor reciclado desde Internet es la de poder configurar el Router y el DNS Dinámico para darle un nombre fijo en Internet, en esta entrada explicaremos cómo lo hemos hecho. Solicitud de IP abierta a Internet en Pepephone El primer paso que […]
  • Arquitectura Web 4.0: Entornos Desacoplados 04/12/2019
    Dentro de la arquitectura Web un Entorno Desacoplado es la combinación de un FrontEnd y un Backend. En esta entrada veremos cómo funciona esta arquitectura desde los puntos más básicos. Como puede verse en el diagrama, una vez cargada una aplicación Frontend, se debería comportar como un agente más que consulta al Servicio Web Rest […]
  • Arquitectura Web 3.0 Frontend 02/12/2019
    Para entender cómo funciona la web iremos viendo cómo funciona de una manera sencilla a la más compleja. En esta entrada veremos los pasos para resolver una petición Web HTTP que gestionar el Navegador Web y cómo se ejecuta el código Javascript   Cliente Web: Solicita la resolución de nombres, actúa como un cliente DNS, […]
  • Estudio de uso de CMSs en los principales 100.000 sitios de la web según Alexa 02/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, en principio, 100.000 principales webs de Internet según Alexa. La idea, será la de ampliar la publicación […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

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