Revision 438473 of HTML5

  • Enlace amigable (slug) de la revisión: HTML/HTML5
  • Título de la revisión: HTML5
  • Id de la revisión: 438473
  • Creada:
  • Creador: pitufo_cabron
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

HTML5 DEMOS

Una colección de demos que muestran las últimas tecnologías HTML en acción.

HTML5_Logo_128.png

 

HTML5  es la última evolución de la norma que define HTMLEl término representa dos conceptos diferentes

  • Se trata de una nueva versión del lenguaje HTML, con nuevos elementos, atributos y comportamientos,
  • y un conjunto más amplio de tecnologías que permite a los sitios Web y las aplicaciones más diversas y de gran alcance. Este conjunto se le llama HTML5 y amigos y, a menudo reducido a sólo HTML5 .

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta referencia página enlaza a numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función.

  • Semántica : lo que le permite describir con mayor precisión cuál es su contenido.
  • Conectividad : lo que le permite comunicarse con el servidor de formas nuevas e innovadoras.
  • Desconectado y almacenamiento : permite páginas web para almacenar datos en el lado del cliente local y operan fuera de línea de manera más eficiente.
  • Multimedia : hacer vídeo y ciudadanos de primera clase de audio en la Web abierta.
  • Gráficos y efectos 2D/3D : permite una gama mucho más amplia de opciones de presentación.
  • Rendimiento e Integración : proporcionar una mayor optimización de la velocidad y un mejor uso del hardware del equipo.
  • Dispositivo de Acceso : lo que permite el uso de varios dispositivos de entrada y salida.
  • Styling : autores dejar escriben temas más sofisticados.

SEMÁNTICA

Secciones y contenidos en  HTML5
Una mirada en el nuevo elemento de formular y seccionamiento en HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} and {{HTMLElement("hgroup")}}.

Usando HTML5 de audio y video

Los elementos embed de  {{HTMLElement("audio")}} y {{HTMLElement("video")}} 
permiten la manipulación de nuevos contenidos multimedia.
 
Formularios en HTML5
Una mirada a la mejora de los formularios web en HTML5: la API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} atributo de {{htmlattrxref("type", "input")}} y el nuevo {{HTMLElement("output")}} elemento.
Nuevos elementos semánticos
Junto a las secciones , los medios de comunicación y elementos de formularios se crearon nuevos numerosos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos.
Mejora en {{HTMLElement("iframe")}}
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora puedenprecisar el nivel de seguridad y la prestación de un querido {{HTMLElement("iframe")}} elemento.
MathML
Permite integrar directamente las fòrmulas matemáticas.
Introducción a HTML5
En este artículo se explica cómo indicar al problema que usted está usando HTML5 en el diseño de su web o aplicación web.
Analizador de HTML5 compatible
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento de utilizar en todos los casos, incluso cuando se enfrentan a HTML válido. Esto conduce a mucho mayor previsibilidad y la interoperabilidad entre los navegadores compatibles con HTML5.

CONECTIVIDAD

Web Sockets
Permite crear una conexión permanente entre la página y el servidor y el intercambio de datos no HTML a través de ese medio.
Eventos de servidor enviados
Permite a un servidor de eventos para empujar a cliente, en lugar de la paradigma clásico donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
WebRTC
Esta tecnología, que RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.

DESCONECTADO Y ALMACENAMIENTO

Recursos sin conexión: el caché de la aplicación
Firefox es totalmente compatible con la especificación de recursos en línea HTML5. La mayoría de los otros tienen offline apoyo de recursos en un cierto nivel.
Eventos en línea y fuera de línea
Firefox 3 soporta WHATWG eventos en línea y fuera de línea, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como para detectar cuando la conexión va hacia arriba y hacia abajo.
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web para almacenar datos estructurados en el lado del cliente.
IndexedDB
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
Uso de archivos de aplicaciones web
Soporte para la nueva API de archivos HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet para acceder a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo de archivo nuevo del elemento HTML
 múltiples atributos. También es FileReader.

MULTIMEDIA

Usando HTML5 de audio y video
Los {{HTMLElement("audio")}} y {{HTMLElement("video")}} 
elementos embed y permiten la manipulación de nuevos contenidos multimedia.
 
WebRTC
Esta tecnología, que RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
Usando la API de la cámara
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
Track and WebVTT
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.

3D, GRAFICOS & EFECTOS

Canvas Tutorial
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox

 
API de texto para elementos <canvas> 
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .

 
WebGL
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en HTML5 <canvas> elementos.
SVG
Un formato basado en XML de imágenes vectoriales que directamente se pueden embdedded en el código HTML.
 

RESULTADOS Y LA INTEGRACIÓN

Web Workers
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que permite estas actividades para evitar ralentizar eventos interactivos.
XMLHttpRequest Nivel 2
Permite a buscar de forma asíncrona algunas partes de la página, que le permite ser mostrar contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.

Motores JIT compilación tarde JavaScript
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
Historia API
Permite la manipulación de la historia del navegador. Esto es especialmente útil para la carga de las páginas interactiva nueva información.
El atributo contentEditable: transformar su sitio web en un wiki!
HTML5 ha estandarizado el atributo contentEditable.Aprenda más sobre esta opción.
Arrastrar y soltar
El arrastre HTML5 y API gota permite soporte para arrastrar y soltar elementos dentro y entre los sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basados ​​en Mozilla.
Gestión del foco en HTML
El nuevo HTML5 activeElement y hasFocus atributos son compatibles.
Manejadores de protocolo basados ​​en web
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el

navigator.registerProtocolHandler() method.
requestAnimationFrame
Permite controlar las animaciones de representación para obtener un rendimiento óptimo.
Fullscreen API
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfaz de usuario de explorador muestra.
API Pointer Lock
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
Eventos en línea y fuera de línea
 
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación es realmente fuera de línea. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.

ACCESO DEVICE

Usando la API de la cámara
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
Eventos táctiles
Manipuladores para reaccionar a los eventos creados por un usuario pulsa pantallas táctiles.
El uso de geolocalización
Deje navegadores localizar la posición del usuario mediante geolocalización.
Detección de la orientación del dispositivo
Vamos a obtener la información cuando el dispositivo en el que se ejecuta el cambio de orientación de navegador. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o para adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
API Pointer Lock
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.

CSS3 STYLING

CSS  se ha ampliado para ser capaz de elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y un poco en el nivel 4, con todos los niveles intermedios cubiertos.

Nuevas características de diseño de fondo
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.

 
More fancy borders
Ahora no sólo es posible utilizar las imagenes con los estilos de bordes, utilizandoi {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhandaunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
Animación de su estilo
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que evento trigerring, ahora puede controlar los elementos móviles en su página.
Tipografía mejorada
Autores tener un mejor control para llegar mejor a la tipografía. Se puede controlar el texto de desbordamiento y guiones , pero también puede unasombra de ella o controlar con mayor precisión susdecoraciones . Tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva font-face @ en regla.
Nuevos diseños de presentación
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .

 

Fuente de la revisión

<div class="callout-box" style="line-height: 22px;">
  <div class="syntaxbox" style="font-size: 20px; line-height: normal; font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', sans-serif; text-transform: uppercase;">
    HTML5 DEMOS</div>
  <p>Una&nbsp;<a href="/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5/">colección de demos</a>&nbsp;<span style="line-height: 21px;">que muestran las últimas tecnologías HTML en acción.</span></p>
  <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" /></a></p>
</div>
<p style="line-height: 22px;">&nbsp;</p>
<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5&nbsp;</strong>&nbsp;<span style="line-height: 21px;">es la última evolución de la norma que define</span>&nbsp;<a href="/en-US/docs/HTML" title="HTML">HTML</a>.&nbsp;</span><span style="line-height: 21px;">El término representa dos conceptos diferentes</span></p>
<ul style="line-height: 22px;">
  <li><span class="seoSummary">Se trata de una nueva versión del&nbsp;<em>lenguaje</em>&nbsp;HTML, con nuevos elementos, atributos y comportamientos,</span></li>
  <li><span class="seoSummary">y un conjunto más amplio de tecnologías que permite a los sitios Web y las aplicaciones más diversas y de gran alcance.</span>&nbsp;Este conjunto se le llama&nbsp;<em>HTML5 y amigos</em>&nbsp;y, a menudo reducido a sólo&nbsp;<em>HTML5</em>&nbsp;.</li>
</ul>
<p style="line-height: 22px;"><span style="line-height: 21px;">Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta referencia página enlaza a numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función.</span></p>
<ul style="line-height: 22px;">
  <li><em>Semántica</em>&nbsp;: lo que le permite describir con mayor precisión cuál es su contenido.</li>
  <li><em>Conectividad</em>&nbsp;: lo que le permite comunicarse con el servidor de formas nuevas e innovadoras.</li>
  <li><em>Desconectado y almacenamiento</em>&nbsp;: permite páginas web para almacenar datos en el lado del cliente local y operan fuera de línea de manera más eficiente.</li>
  <li><em>Multimedia</em>&nbsp;: hacer vídeo y ciudadanos de primera clase de audio en la Web abierta.</li>
  <li><em>Gráficos y efectos 2D/3D</em>&nbsp;: permite una gama mucho más amplia de opciones de presentación.</li>
  <li><em>Rendimiento e Integración</em>&nbsp;: proporcionar una mayor optimización de la velocidad y un mejor uso del hardware del equipo.</li>
  <li><em>Dispositivo de Acceso</em>&nbsp;: lo que permite el uso de varios dispositivos de entrada y salida.</li>
  <li><em><font class="goog-text-highlight" style="background-color: rgb(201, 215, 241); -webkit-box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-sizing: border-box; position: relative;">Styling</font></em><font class="goog-text-highlight" style="background-color: rgb(201, 215, 241); -webkit-box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-sizing: border-box; position: relative;">&nbsp;: autores dejar escriben temas más sofisticados.</font></li>
</ul>
<div class="cleared row topicpage-table" style="line-height: 22px;">
  <div class="section" style="width: 436px;">
    <h2 id="SEM.C3.81NTICA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />SEMÁNTICA</h2>
    <dl>
      <dt>
        <a href="https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y contenidos en &nbsp;HTML5</a></dt>
      <dd>
        Una mirada en el nuevo elemento de formular y seccionamiento en HTML5:&nbsp;<span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} and {{HTMLElement("hgroup")}}.</span></dd>
      <br />
    </dl>
    <dl>
      <dd>
        <a href="https://developer.mozilla.org/es/docs/Usando_audio_y_video_con_HTML5" style="color: rgb(34, 85, 170); text-decoration: underline; font-weight: bold;" title="Using_audio_and_video_in_Firefox"><font class="goog-text-highlight" style="background-color: rgb(201, 215, 241); -webkit-box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-sizing: border-box; position: relative;">Usando HTML5 de audio y video</font></a></dd>
      <br />
      <dd>
        Los elementos embed de &nbsp;{{HTMLElement("audio")}} y {{HTMLElement("video")}}&nbsp;</dd>
      <dd>
        permiten la manipulación de nuevos contenidos multimedia.
        <dl>
          <dt>
            &nbsp;</dt>
          <dt>
            <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt>
          <dd>
            Una mirada a la mejora de los formularios web en HTML5: la API de validación de restricción, varios atributos nuevos, nuevos valores para el<span style="line-height: 1.572;">&nbsp;{{HTMLElement("input")}} atributo de {{htmlattrxref("type", "input")}} y el nuevo {{HTMLElement("output")}} elemento.</span>
            <dl>
              <dt>
                <span style="background-color: rgb(201, 215, 241);">Nuevos elementos semánticos</span></dt>
              <dd>
                Junto a las secciones , los medios de comunicación y elementos de formularios se crearon nuevos numerosos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de&nbsp;<a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>.</dd>
              <dt>
                Mejora en {{HTMLElement("iframe")}}</dt>
              <dd>
                Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y &nbsp;{{htmlattrxref("srcdoc", "iframe")}} los autores ahora puedenprecisar el nivel de seguridad y la prestación de un querido {{HTMLElement("iframe")}} elemento.</dd>
              <dt>
                <a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
              <dd>
                Permite integrar directamente las fòrmulas matemáticas.</dd>
              <dt>
                <a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducción a HTML5</a></dt>
              <dd>
                En este artículo se explica cómo indicar al problema que usted está usando HTML5 en el diseño de su web o aplicación web.</dd>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analizador de HTML5 compatible</a></dt>
              <dd>
                El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento de utilizar en todos los casos, incluso cuando se enfrentan a HTML válido.&nbsp;Esto conduce a mucho mayor previsibilidad y la interoperabilidad entre los navegadores compatibles con HTML5.</dd>
            </dl>
            <h2 id="CONECTIVIDAD" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />CONECTIVIDAD</h2>
            <dl>
              <dt>
                <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
              <dd>
                Permite crear una conexión permanente entre la página y el servidor y el intercambio de datos no HTML a través de ese medio.</dd>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Eventos de servidor enviados</a></dt>
              <dd>
                Permite a un servidor de eventos para empujar a cliente, en lugar de la paradigma clásico donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.</dd>
              <dt>
                <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
              <dd>
                Esta tecnología, que RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd>
            </dl>
            <h2 id="DESCONECTADO_Y_ALMACENAMIENTO" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />DESCONECTADO Y ALMACENAMIENTO</h2>
            <dl>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sin conexión: el caché de la aplicación</a></dt>
              <dd>
                Firefox es totalmente compatible con la especificación de recursos en línea HTML5.&nbsp;La mayoría de los otros tienen offline apoyo de recursos en un cierto nivel.</dd>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt>
              <dd>
                Firefox 3 soporta WHATWG eventos en línea y fuera de línea, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como para detectar cuando la conexión va hacia arriba y hacia abajo.</dd>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM / Almacenamiento">WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt>
              <dd>
                Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web para almacenar datos estructurados en el lado del cliente.</dd>
              <dt>
                <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
              <dd>
                Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.</dd>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Uso de archivos de aplicaciones web</a></dt>
              <dd>
                Soporte para la nueva API de archivos HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet para acceder a los archivos locales seleccionados por el usuario.&nbsp;Esto incluye el apoyo para la selección de varios archivos utilizando el<span style="line-height: 1.572;">&nbsp;</span><span style="line-height: 1.572; font-family: monospace;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;">&nbsp;de&nbsp;</span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-type" style="line-height: 1.572;" title="HTML/Element/input#attr-type">tipo</a></strong><span style="line-height: 1.572;">&nbsp;de&nbsp;</span><span style="line-height: 1.572; font-family: 'Courier New';">archivo</span><span style="line-height: 1.572;">&nbsp;</span>nuevo del elemento HTML<br />
                <span style="line-height: 1.572;">&nbsp;</span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-multiple" style="line-height: 1.572;" title="HTML/Element/input#attr-multiple">múltiple</a>s</strong><span style="line-height: 1.572;">&nbsp;atributos.&nbsp;</span>También es<span style="line-height: 1.572;">&nbsp;</span><a href="/en-US/docs/DOM/FileReader" style="line-height: 1.572;" title="DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.572;">.</span></dd>
            </dl>
            <h2 id="MULTIMEDIA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />MULTIMEDIA</h2>
            <dl>
              <dt>
                <a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Usando HTML5 de audio y video</a></dt>
              <dd>
                Los {{HTMLElement("audio")}} y {{HTMLElement("video")}}&nbsp;</dd>
              <dd>
                elementos embed y permiten la manipulación de nuevos contenidos multimedia.
                <dl>
                  <dt>
                    &nbsp;</dt>
                  <dt>
                    <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
                  <dd>
                    Esta tecnología, que RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd>
                  <dt>
                    <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt>
                  <dd>
                    Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd>
                  <dt>
                    Track and WebVTT</dt>
                  <dd>
                    El elemento {{HTMLElement("track")}}&nbsp;permite subtítulos y capítulos.&nbsp;<a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a>&nbsp;<span style="line-height: 1.572;">es un formato de pista de texto.</span></dd>
                </dl>
                <h2 id="3D.2C_GRAFICOS_.26_EFECTOS" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />3D, GRAFICOS &amp; EFECTOS</h2>
                <dl>
                  <dt>
                    <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt>
                  <dd>
                    Conozca el nuevo elemento&nbsp;<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">{{HTMLElement("canvas")}}</span>&nbsp; y cómo dibujar gráficos y otros objetos en Firefox</dd>
                  <br />
                  <dd>
                    &nbsp;</dd>
                  <dt>
                    <a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos&nbsp;<code style="font-size: 14px;">&lt;canvas&gt;</code>&nbsp;</a></dt>
                  <dd>
                    El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}}&nbsp;.</dd>
                  <br />
                  <dd>
                    &nbsp;</dd>
                  <dt>
                    <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
                  <dd>
                    WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en HTML5&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;">&lt;canvas&gt;</code></a>&nbsp;elementos.</dd>
                  <dt>
                    <a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
                  <dd>
                    Un formato basado en XML de imágenes vectoriales que directamente se pueden embdedded en el código HTML.</dd>
                  <dt>
                    &nbsp;</dt>
                </dl>
              </dd>
            </dl>
          </dd>
        </dl>
      </dd>
    </dl>
  </div>
  <div class="section" style="width: 435px;">
    <h2 id="RESULTADOS_Y_LA_INTEGRACI.C3.93N" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />RESULTADOS Y LA INTEGRACIÓN</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
      <dd>
        Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que permite estas actividades para evitar ralentizar eventos interactivos.</dd>
      <dt>
        <code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>&nbsp;Nivel 2</dt>
      <dd>
        Permite a buscar de forma asíncrona algunas partes de la página, que le permite ser mostrar contenido dinámico, que varía según el tiempo y las acciones del usuario.&nbsp;Esta es la tecnología detrás de<span style="line-height: 1.572;">&nbsp;</span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd>
      <br />
    </dl>
    <dl>
      <dt>
        Motores JIT compilación tarde JavaScript</dt>
      <dd>
        La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">Historia API</a></dt>
      <dd>
        Permite la manipulación de la historia del navegador.&nbsp;Esto es especialmente útil para la carga de las páginas interactiva nueva información.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML / contenido editable">El atributo contentEditable: transformar su sitio web en un wiki!</a></dt>
      <dd>
        HTML5 ha estandarizado el atributo contentEditable.Aprenda más sobre esta opción.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop / Drag_and_Drop">Arrastrar y soltar</a></dt>
      <dd>
        El arrastre HTML5 y API gota permite soporte para arrastrar y soltar elementos dentro y entre los sitios web.&nbsp;Esto también proporciona una API simple para el uso de extensiones y aplicaciones basados ​​en Mozilla.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestión del foco en HTML</a></dt>
      <dd>
        El nuevo HTML5&nbsp;<code style="font-size: 14px;">activeElement</code>&nbsp;y&nbsp;<code style="font-size: 14px;">hasFocus</code>&nbsp;atributos son compatibles.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manejadores de protocolo basados ​​en web</a></dt>
      <dd>
        Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el</dd>
      <br />
      <dd>
        <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>&nbsp;method.</dd>
      <dt>
        <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code style="font-size: 14px;">requestAnimationFrame</code></a></dt>
      <dd>
        Permite controlar las animaciones de representación para obtener un rendimiento óptimo.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
      <dd>
        Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfaz de usuario de explorador muestra.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt>
      <dd>
        Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt>
      <dd>
        <div>
          &nbsp;</div>
        <dl style="margin: 0px 0px 1.286em; padding: 0px;">
          <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
            Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación es realmente fuera de línea.&nbsp;Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.</dd>
        </dl>
      </dd>
    </dl>
    <h2 id="ACCESO.C2.A0DEVICE" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />ACCESO&nbsp;DEVICE</h2>
    <dl>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt>
      <dd>
        Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM / Touch_events">Eventos táctiles</a></dt>
      <dd>
        Manipuladores para reaccionar a los eventos creados por un usuario pulsa pantallas táctiles.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="El uso de geolocalización">El uso de geolocalización</a></dt>
      <dd>
        Deje navegadores localizar la posición del usuario mediante geolocalización.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detección de la orientación del dispositivo</a></dt>
      <dd>
        Vamos a obtener la información cuando el dispositivo en el que se ejecuta el cambio de orientación de navegador.&nbsp;Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o para adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt>
      <dd>
        Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd>
    </dl>
    <h2 id="CSS3.C2.A0STYLING" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; vertical-align: middle; width: 64px; padding-right: 0.5em;" />CSS3&nbsp;STYLING</h2>
    <p><a href="/en-US/docs/CSS" title="CSS">CSS&nbsp;</a>&nbsp;<font style="line-height: 21px;">se ha ampliado para ser capaz de elementos de estilo de una manera mucho más compleja.&nbsp;</font><font style="line-height: 21px;">Esto se refiere a menudo como</font>&nbsp;<a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>,&nbsp;<span style="line-height: 21px;">aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y un poco en el nivel 4, con todos los niveles intermedios cubiertos.</span></p>
    <dl>
      <dt>
        Nuevas características de diseño de fondo</dt>
      <dd>
        Ahora es posible poner una sombra a un cuadro, con&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a>&nbsp;y&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a>&nbsp;se pueden ajustar.</dd>
      <br />
    </dl>
    <div>
      &nbsp;</div>
    <dl>
      <dt>
        More fancy borders</dt>
      <dd>
        Ahora no sólo es posible utilizar las imagenes con los estilos de bordes, utilizandoi {{cssxref("border-image")}} y asociando sus propiedades asociadas a&nbsp;<span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">,&nbsp;</span>aunque los bordes redondeados son apoyados a través de propiedades&nbsp;<span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd>
      <dt>
        Animación de su estilo</dt>
      <dd>
        Utilizando&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a>&nbsp;para animar entre los diferentes estados o utilizando&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a>&nbsp;para animar partes de la página, sin que evento trigerring, ahora puede controlar los elementos móviles en su página.</dd>
      <dt>
        Tipografía mejorada</dt>
      <dd>
        Autores tener un mejor control para llegar mejor a la tipografía.&nbsp;Se puede controlar&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto de desbordamiento</code></a>&nbsp;y&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a>&nbsp;, pero también puede una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow">sombra</a>&nbsp;de ella o controlar con mayor precisión sus<a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG / atributo / text-decoration">decoraciones</a>&nbsp;.&nbsp;Tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">font-face @</code></a>&nbsp;en regla.</dd>
      <dt>
        Nuevos diseños de presentación</dt>
      <dd>
        Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS / Using_CSS_multi-column_layouts">CSS diseño de varias columnas</a>&nbsp;, y el&nbsp;<a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a>&nbsp;.</dd>
    </dl>
  </div>
</div>
<p>&nbsp;</p>
Revertir a esta revisión