From a3cb768f710d274b572a26c48448f0cb8e4a1bdd Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 25 May 2021 00:43:56 +0000 Subject: [CRON] sync translated content --- files/es/_redirects.txt | 14 +- files/es/_wikihistory.json | 108 +++---- .../html/html5/constraint_validation/index.html | 346 +++++++++++++++++++++ .../web/guide/html/html5/html5_parser/index.html | 65 ++++ files/es/orphaned/web/guide/html/html5/index.html | 200 ++++++++++++ .../html/html5/introduction_to_html5/index.html | 17 + .../html/html5/constraint_validation/index.html | 346 --------------------- .../web/guide/html/html5/html5_parser/index.html | 65 ---- files/es/web/guide/html/html5/index.html | 200 ------------ .../html/html5/introduction_to_html5/index.html | 17 - 10 files changed, 691 insertions(+), 687 deletions(-) create mode 100644 files/es/orphaned/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/html5_parser/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/index.html create mode 100644 files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/es/web/guide/html/html5/html5_parser/index.html delete mode 100644 files/es/web/guide/html/html5/index.html delete mode 100644 files/es/web/guide/html/html5/introduction_to_html5/index.html (limited to 'files/es') diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index acb86f967d..0b38f00189 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -891,14 +891,14 @@ /es/docs/HTML/Elemento/var /es/docs/Web/HTML/Element/var /es/docs/HTML/Elemento/video /es/docs/Web/HTML/Element/video /es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats -/es/docs/HTML/HTML5 /es/docs/Web/Guide/HTML/HTML5 +/es/docs/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 /es/docs/HTML/HTML5/Forms_in_HTML5 /es/docs/Learn/Forms /es/docs/HTML/HTML5/Formularios_en_HTML5 /es/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/es/docs/HTML/HTML5/HTML5_Parser /es/docs/Web/Guide/HTML/HTML5/HTML5_Parser +/es/docs/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser /es/docs/HTML/HTML5/HTML5_lista_elementos /es/docs/conflicting/Web/HTML/Element -/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/Web/Guide/HTML/HTML5/Constraint_validation +/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /es/docs/HTML:Canvas /es/docs/Web/API/Canvas_API /es/docs/HTML:Element /es/docs/Web/HTML/Element @@ -2066,6 +2066,10 @@ /es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form /es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data /es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/Forms/Styling_web_forms +/es/docs/Web/Guide/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 +/es/docs/Web/Guide/HTML/HTML5/Constraint_validation /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation +/es/docs/Web/Guide/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser +/es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduction_to_HTML /es/docs/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/orphaned/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/Guide/HTML/Content_categories diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 933fa3d9f8..7478c48f7a 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -14312,60 +14312,6 @@ "V.Morantes" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-05-16T09:08:08.720Z", - "contributors": [ - "jonasdamher", - "SphinxKnight", - "anibalymariacantantes60", - "AzulMartin", - "264531666", - "fracp", - "damianed", - "alfredotemiquel", - "rossettistone", - "carlossuarez", - "teoli", - "JosueMolina", - "Pablo_Ivan", - "welm", - "bicentenario", - "jesusruiz", - "pierre_alfonso", - "pitufo_cabron", - "cesar_ortiz_elPatox", - "inma_610", - "vigia122", - "StripTM", - "deimidis", - "Izel" - ] - }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2020-08-11T08:06:04.309Z", - "contributors": [ - "gerardo750711", - "israel-munoz" - ] - }, - "Web/Guide/HTML/HTML5/HTML5_Parser": { - "modified": "2019-03-24T00:07:09.448Z", - "contributors": [ - "teoli", - "RickieesES", - "inma_610", - "StripTM", - "juanb", - "Izel" - ] - }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-24T00:05:36.058Z", - "contributors": [ - "teoli", - "inma_610" - ] - }, "Web/Guide/HTML/Using_HTML_sections_and_outlines": { "modified": "2019-03-23T23:38:22.567Z", "contributors": [ @@ -23602,6 +23548,60 @@ "rubencidlara" ] }, + "orphaned/Web/Guide/HTML/HTML5": { + "modified": "2020-05-16T09:08:08.720Z", + "contributors": [ + "jonasdamher", + "SphinxKnight", + "anibalymariacantantes60", + "AzulMartin", + "264531666", + "fracp", + "damianed", + "alfredotemiquel", + "rossettistone", + "carlossuarez", + "teoli", + "JosueMolina", + "Pablo_Ivan", + "welm", + "bicentenario", + "jesusruiz", + "pierre_alfonso", + "pitufo_cabron", + "cesar_ortiz_elPatox", + "inma_610", + "vigia122", + "StripTM", + "deimidis", + "Izel" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-08-11T08:06:04.309Z", + "contributors": [ + "gerardo750711", + "israel-munoz" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/HTML5_Parser": { + "modified": "2019-03-24T00:07:09.448Z", + "contributors": [ + "teoli", + "RickieesES", + "inma_610", + "StripTM", + "juanb", + "Izel" + ] + }, + "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:05:36.058Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, "orphaned/Web/Guide/HTML/Introduction_alhtml_clone": { "modified": "2019-03-23T23:11:36.473Z", "contributors": [ diff --git a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..160d590380 --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,346 @@ +--- +title: Validación de restricciones +slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation +tags: + - CSS + - Guía + - HTML5 + - NecesitaContenido + - Selectores +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +original_slug: Web/Guide/HTML/HTML5/Constraint_validation +--- +

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

+ +
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
+ +

Restricciones intrínsecas y básicas

+ +

En HTML5, las restricciones básicas son declaradas de dos formas:

+ + + +

Tipos de captura semánticos

+ +

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

+ + + + + + + + + + + + + + + + + + + + + +
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: +
    +
  • una URI válida (como se define en RFC 3986)
    • +
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • +
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • +
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • +
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: +
    +
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • +
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • +
+ +
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
+ +

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

+ +

Atributos relacionados con validaciones

+ +

Los siguientes atributos son usados para describir restricciones básicas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
+ +

Proceso de validación de restricciones

+ +

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

+ + + +
Nota: + + +
+ +

Restricciones complejas usando la API de Restricciones de HTML5

+ +

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

+ +

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

+ +

Restricciones que combinan varios campos: Validación de código postal

+ +

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

+ +
+

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

+
+ +

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

+ +
<form>
+    <label for="ZIP">Código postal : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">País : </label>
+    <select id="Country">
+      <option value="ch">Suiza</option>
+      <option value="fr">Francia</option>
+      <option value="de">Alemania</option>
+      <option value="nl">Países Bajos</option>
+    </select>
+    <input type="submit" value="Validar">
+</form>
+ +

Esto mostrará el siguiente formulario: 

+ +

+ +

Primero, escribimos una función que revisará las restricciones en sí:

+ +
function checkZIP() {
+  // Para cada país, se define el patrón para el código postal
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
+  };
+
+  // Se lee el ID del país
+  var country = document.getElementById("Country").value;
+
+  // Se obtiene el campo del código postal
+  var ZIPField = document.getElementById("ZIP");
+
+  // Se crea el validador de la restricción
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // ¡Se hace la revisión!
+  if (constraint.test(ZIPField.value)) {
+    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // El código postal no cumple la restricción, usamos la API de Restricciones para
+    // dar un mensaje sobre el formato requerido para este país
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

+ +

Limitando el tamaño de un archivo antes de ser subido

+ +

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

+ +

Aquí está la parte de HTML:

+ +
<label for="FS">Selecciona un archivo menor a 75KB : </label>
+<input type="file" id="FS">
+ +

Esto muestra lo siguiente:

+ +

+ + + +

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Si hay (por lo menos) un archivo seleccionado
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Validar la restricción
+       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
+       return;
+     }
+  }
+  // No hay incumplimiento de la restricción
+  FS.setCustomValidity("");
+}
+ + + +

Finalmente, anclamos el método al evento requerido:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

+ +

Estilos visuales de validación de restricciones

+ +

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

+ +

Controlando el aspecto de los elementos

+ +

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

+ +

Pseudo-clases :required y :optional

+ +

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

+ +

Pseudo-clase :-moz-placeholder

+ +

Véase ::placeholder (experimental).

+ +

Pseudo-clases :valid :invalid

+ +

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

+ +

Estilos predeterminados

+ +

Controlando el texto de incumplimiento de restricciones

+ +

El atributo x-moz-errormessage

+ +

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

+ +
+

Nota: Esta extensión no es estándar.

+
+ +

element.setCustomValidity() de la API de Validación de Restricciones

+ +

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

+ +

Objeto ValidityState de la API de Validación de Restricciones

+ +

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusión

diff --git a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..5548e129ac --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html @@ -0,0 +1,65 @@ +--- +title: Analizador de HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/HTML5_Parser +tags: + - HTML + - HTML5 + - para_revisar +translation_of: Web/Guide/HTML/HTML5/HTML5_Parser +original_slug: Web/Guide/HTML/HTML5/HTML5_Parser +--- +

{{ gecko_minversion_header("2") }}{{ draft() }}

+

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

+

El nuevo analizador presenta estas mejoras importantes:

+ +

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

+

Conductas del analizador modificadas

+

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

+

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

+

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

+

Llamar a document.write () durante el análisis

+

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

+

Algunos contextos en los que no debes llamar a document.write() incluyen:

+ +

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

+

Falta de repetición del análisis

+

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

+

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

+ +

Mejora del rendimiento con el análisis especulativo

+

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

+

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

+

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

+

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

+
<script>
+  document.write ("<div>");
+  document.write ("<p> Aquí va el contenido. </ p>");
+  document.write ("</ div>");
+</ script>
+<!-- Aquí va el HTML sin script. -->
+
+
+

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

+
<script>document.write("<div>");</script>
+<p>El contenido va aquí.</p>
+<script>document.write("</div>");</script>
+
+
+

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

+

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/orphaned/web/guide/html/html5/index.html b/files/es/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..a85b952772 --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,200 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - API + - CSS3 + - Gráficos(2) + - HTML + - HTML5 + - Multimedia + - SVG + - conectividad + - graficos + - mejoras + - nuevo +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

+ + + +

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

+ + + +
+
+

SEMÁNTICA

+ +
+
Secciones y contenidos en HTML5
+
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
+
Uso de audio y video en HTML5
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
+
+ +
+
Formularios en HTML5
+
Un 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")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
+
Nuevos elementos semánticos
+
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos 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 pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
+
MathML
+
Permite integrar directamente fórmulas matemáticas.
+
+
Introducción a HTML5
+
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño 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 a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
+
+ +

CONECTIVIDAD

+ +
+
Web Sockets
+
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
+
Eventos de servidor enviados
+
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
+
WebRTC
+
Esta tecnología, donde 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.
+
+ +

Sin Conexión Y ALMACENAMIENTO

+ +
+
Recursos sin conexión: el caché de la aplicación
+
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
+
Eventos  con y sin conexión
+
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
+
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 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 desde aplicaciones web
+
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan 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 file del elemento HTML múltiples atributos. También esta FileReader.
+
+ +

MULTIMEDIA

+ +
+
Usando HTML5 de audio y video
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. +
+
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia 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 elementos <canvas> HTML5  .
+
SVG
+
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
+
+
+
+
+
+
+
+ +
+

RESULTADOS e INTEGRACIÓN

+ +
+
Web Workers
+
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
+
XMLHttpRequest Nivel 2
+
Permite buscar de forma asíncrona algunas partes de la página, mostrando 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 de JavaScript
+
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
+
History API
+
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
+
El atributo contentEditable: transformar su sitio web en una wiki!
+
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
+
Arrastrar y soltar
+
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
+
Gestión del foco en HTML
+
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
+
Manejadores de protocolo basados ​​en web
+
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
+
Fullscreen API
+
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
+
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 esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
+
+
+
+ +

ACCESO al dispositivo

+ +
+
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 cuando pulsa pantallas táctiles.
+
El uso de geolocalización
+
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
+
Detección de la orientación del dispositivo
+
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. 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 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 menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  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 otros 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.
+
+ +
+
Bordes mas "lujosos"
+
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque 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 el evento se dispare, ahora puede controlar los elementos móviles en su página.
+
Tipografía mejorada
+
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
+
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 .
+
+
+
diff --git a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..c0ad7e26db --- /dev/null +++ b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,17 @@ +--- +title: Introducción a HTML5 +slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +


+ HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

+

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

+

El tipo de documento HTML5

+

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

+
<!DOCTYPE html>
+

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

+

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/es/web/guide/html/html5/constraint_validation/index.html b/files/es/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index ad5fdfc234..0000000000 --- a/files/es/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Validación de restricciones -slug: Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guía - - HTML5 - - NecesitaContenido - - Selectores -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: HTML/HTML5/Validacion_de_restricciones ---- -

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

- -
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
- -

Restricciones intrínsecas y básicas

- -

En HTML5, las restricciones básicas son declaradas de dos formas:

- - - -

Tipos de captura semánticos

- -

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

- - - - - - - - - - - - - - - - - - - - - -
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: -
    -
  • una URI válida (como se define en RFC 3986)
    • -
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • -
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • -
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • -
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: -
    -
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • -
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • -
- -
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
- -

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

- -

Atributos relacionados con validaciones

- -

Los siguientes atributos son usados para describir restricciones básicas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
- -

Proceso de validación de restricciones

- -

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

- - - -
Nota: - - -
- -

Restricciones complejas usando la API de Restricciones de HTML5

- -

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

- -

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

- -

Restricciones que combinan varios campos: Validación de código postal

- -

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

- -
-

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

-
- -

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

- -
<form>
-    <label for="ZIP">Código postal : </label>
-    <input type="text" id="ZIP">
-    <label for="Country">País : </label>
-    <select id="Country">
-      <option value="ch">Suiza</option>
-      <option value="fr">Francia</option>
-      <option value="de">Alemania</option>
-      <option value="nl">Países Bajos</option>
-    </select>
-    <input type="submit" value="Validar">
-</form>
- -

Esto mostrará el siguiente formulario: 

- -

- -

Primero, escribimos una función que revisará las restricciones en sí:

- -
function checkZIP() {
-  // Para cada país, se define el patrón para el código postal
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
-  };
-
-  // Se lee el ID del país
-  var country = document.getElementById("Country").value;
-
-  // Se obtiene el campo del código postal
-  var ZIPField = document.getElementById("ZIP");
-
-  // Se crea el validador de la restricción
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // ¡Se hace la revisión!
-  if (constraint.test(ZIPField.value)) {
-    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // El código postal no cumple la restricción, usamos la API de Restricciones para
-    // dar un mensaje sobre el formato requerido para este país
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-
- -

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

- -

Limitando el tamaño de un archivo antes de ser subido

- -

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

- -

Aquí está la parte de HTML:

- -
<label for="FS">Selecciona un archivo menor a 75KB : </label>
-<input type="file" id="FS">
- -

Esto muestra lo siguiente:

- -

- - - -

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

- -
function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // Si hay (por lo menos) un archivo seleccionado
-  if (files.length > 0) {
-     if (files[0].size > 75 * 1024) { // Validar la restricción
-       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
-       return;
-     }
-  }
-  // No hay incumplimiento de la restricción
-  FS.setCustomValidity("");
-}
- - - -

Finalmente, anclamos el método al evento requerido:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

- -

Estilos visuales de validación de restricciones

- -

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

- -

Controlando el aspecto de los elementos

- -

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

- -

Pseudo-clases :required y :optional

- -

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

- -

Pseudo-clase :-moz-placeholder

- -

Véase ::placeholder (experimental).

- -

Pseudo-clases :valid :invalid

- -

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

- -

Estilos predeterminados

- -

Controlando el texto de incumplimiento de restricciones

- -

El atributo x-moz-errormessage

- -

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

- -
-

Nota: Esta extensión no es estándar.

-
- -

element.setCustomValidity() de la API de Validación de Restricciones

- -

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

- -

Objeto ValidityState de la API de Validación de Restricciones

- -

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusión

diff --git a/files/es/web/guide/html/html5/html5_parser/index.html b/files/es/web/guide/html/html5/html5_parser/index.html deleted file mode 100644 index f4357339f4..0000000000 --- a/files/es/web/guide/html/html5/html5_parser/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Analizador de HTML5 -slug: Web/Guide/HTML/HTML5/HTML5_Parser -tags: - - HTML - - HTML5 - - para_revisar -translation_of: Web/Guide/HTML/HTML5/HTML5_Parser -original_slug: HTML/HTML5/HTML5_Parser ---- -

{{ gecko_minversion_header("2") }}{{ draft() }}

-

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

-

El nuevo analizador presenta estas mejoras importantes:

- -

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

-

Conductas del analizador modificadas

-

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

-

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

-

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

-

Llamar a document.write () durante el análisis

-

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

-

Algunos contextos en los que no debes llamar a document.write() incluyen:

- -

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

-

Falta de repetición del análisis

-

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

-

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

- -

Mejora del rendimiento con el análisis especulativo

-

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

-

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

-

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

-

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

-
<script>
-  document.write ("<div>");
-  document.write ("<p> Aquí va el contenido. </ p>");
-  document.write ("</ div>");
-</ script>
-<!-- Aquí va el HTML sin script. -->
-
-
-

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

-
<script>document.write("<div>");</script>
-<p>El contenido va aquí.</p>
-<script>document.write("</div>");</script>
-
-
-

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

-

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/web/guide/html/html5/index.html b/files/es/web/guide/html/html5/index.html deleted file mode 100644 index 1d98d2baa5..0000000000 --- a/files/es/web/guide/html/html5/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - API - - CSS3 - - Gráficos(2) - - HTML - - HTML5 - - Multimedia - - SVG - - conectividad - - graficos - - mejoras - - nuevo -translation_of: Web/Guide/HTML/HTML5 -original_slug: HTML/HTML5 ---- -

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

- - - -

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

- - - -
-
-

SEMÁNTICA

- -
-
Secciones y contenidos en HTML5
-
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
-
Uso de audio y video en HTML5
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
-
- -
-
Formularios en HTML5
-
Un 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")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
-
Nuevos elementos semánticos
-
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos 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 pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
-
MathML
-
Permite integrar directamente fórmulas matemáticas.
-
-
Introducción a HTML5
-
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño 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 a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
-
- -

CONECTIVIDAD

- -
-
Web Sockets
-
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
-
Eventos de servidor enviados
-
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
-
WebRTC
-
Esta tecnología, donde 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.
-
- -

Sin Conexión Y ALMACENAMIENTO

- -
-
Recursos sin conexión: el caché de la aplicación
-
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
-
Eventos  con y sin conexión
-
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
-
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 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 desde aplicaciones web
-
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan 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 file del elemento HTML múltiples atributos. También esta FileReader.
-
- -

MULTIMEDIA

- -
-
Usando HTML5 de audio y video
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. -
-
-
WebRTC
-
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia 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 elementos <canvas> HTML5  .
-
SVG
-
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
-
-
-
-
-
-
-
- -
-

RESULTADOS e INTEGRACIÓN

- -
-
Web Workers
-
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
-
XMLHttpRequest Nivel 2
-
Permite buscar de forma asíncrona algunas partes de la página, mostrando 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 de JavaScript
-
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
-
History API
-
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
-
El atributo contentEditable: transformar su sitio web en una wiki!
-
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
-
Arrastrar y soltar
-
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
-
Gestión del foco en HTML
-
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
-
Manejadores de protocolo basados ​​en web
-
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
-
Fullscreen API
-
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
-
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 esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
-
-
-
- -

ACCESO al dispositivo

- -
-
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 cuando pulsa pantallas táctiles.
-
El uso de geolocalización
-
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
-
Detección de la orientación del dispositivo
-
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. 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 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 menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  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 otros 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.
-
- -
-
Bordes mas "lujosos"
-
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque 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 el evento se dispare, ahora puede controlar los elementos móviles en su página.
-
Tipografía mejorada
-
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
-
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 .
-
-
-
diff --git a/files/es/web/guide/html/html5/introduction_to_html5/index.html b/files/es/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 877f2666e0..0000000000 --- a/files/es/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Introducción a HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: HTML/HTML5/Introducción_a_HTML5 ---- -


- HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

-

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

-

El tipo de documento HTML5

-

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

-
<!DOCTYPE html>
-

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

-

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

-- cgit v1.2.3-54-g00ecf