diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-06 12:07:28 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-06 12:07:28 -0400 |
| commit | 4f70db6399a732ca7571c6c8cb952be7c9a85763 (patch) | |
| tree | 3a8b67ddf3790f32902d686e4939abedb7c97578 /files/es/orphaned/web/guide | |
| parent | a0526cb59dfc2de8f87f12e09d9fa6bf2fca6c92 (diff) | |
| download | translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.gz translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.bz2 translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.zip | |
delete conflicting/orphaned in es (#1418)
Diffstat (limited to 'files/es/orphaned/web/guide')
10 files changed, 0 insertions, 1554 deletions
diff --git a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 057a0273fa..0000000000 --- a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.</p> - -<h2 id="Crear_eventos_personalizados">Crear eventos personalizados</h2> - -<p> Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Escucha para el evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Disparar event. -elem.dispatchEvent(event);</pre> - -<p>El codigo de ejemplo de arriba usa el metodo <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a>. </p> - -<p>Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.</p> - -<h3 id="Adición_de_datos_personalizados_con_CustomEvent_()">Adición de datos personalizados con CustomEvent ()</h3> - -<p> Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.<br> - <span style="line-height: 1.5;">Por Ejemplo, </span>el evento se puede crear de la siguiente manera<span style="line-height: 1.5;">:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p> Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (<span style="line-height: 19.0909080505371px;">event listener</span>):</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="La_Forma_Antigua">La Forma Antigua</h3> - -<p> El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:</p> - -<pre class="brush: js">// Creamos el evento. -var event = document.createEvent('Event'); - -/* Definimos el nombre del evento que es 'build'.*/ -event.initEvent('build', true, true); - -// Asignamos el evento. -document.addEventListener('build', function (e) { - // e.target matches document from above -}, false); - -// target can be any Element or other EventTarget. -document.dispatchEvent(event); - -</pre> - -<h2 id="El_disparo_incorporado_eventos">El disparo incorporado eventos</h2> - -<p> Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: </p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var canceled = !cb.dispatchEvent(event); - if (canceled) { - // A handler called preventDefault. - alert("canceled"); - } else { - // None of the handlers called preventDefault. - alert("not canceled"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con los Navegadores</h2> - -<h2 id="sect1"> </h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>Event()</code> constructor</td> - <td>15</td> - <td>11</td> - <td>{{ CompatNo() }}</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Phone</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/es/orphaned/web/guide/events/event_handlers/index.html b/files/es/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 1c298b7826..0000000000 --- a/files/es/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Manejadores de eventos en el DOM -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p><span class="seoSummary">La plataforma Web provee varias formas de recibir notificaciones de los eventos del <a href="/en-US/docs/Web/Events">DOM</a>. Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos.</span> Esta página se enfoca en los detalles de cómo funcionan estos.</p> - -<h3 id="Registering_on-event_handlers">Registering <em>on-event</em> handlers</h3> - -<p>Los controladores <em><strong>on-event</strong></em> son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla, enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser <code>onclick</code>, <code>onkeypress</code>, <code>onfocus</code>, etc.</p> - -<p>Pueden especificar un controlador de evento <code>on<...></code> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:</p> - -<ul> - <li>Usando el HTML {{Glossary("atributo")}} llamados <code>on<em>{eventtype}</em></code> en un elemento, por ejemplo:<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>Un controlador onevent</p> - -<p>Notese que cada objeto puede tener sólo un controlador <em>on-event</em> para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p> - -<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p> - -<pre class="notranslate">xhr.onprogress = function() { ... }</pre> - -<h2 id="Details">Details</h2> - -<h3 id="The_value_of_HTML_on<...>_attributes_and_corresponding_JavaScript_properties">The value of HTML on<...> attributes and corresponding JavaScript properties</h3> - -<p>A handler registered via an <code>on<...></code> attribute will be available via the corresponding <code>on<...></code> property, but not the other way around:</p> - -<pre class="brush: html notranslate"><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> - -<script> -window.onload = function () { - var div = document.getElementById("a"); - console.log("Attribute reflected as a property: ", div.onclick.toString()); - // Prints: function onclick(event) { alert('old') } - div.onclick = function() { alert('new') }; - console.log("Changed property to: ", div.onclick.toString()); - // Prints: function () { alert('new') } - console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); - // Prints: alert('old') -} -</script></pre> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">the this keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may be used to refer to:</p> - -<ul> - <li>any function or object registered to be notified of events,</li> - <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { /* ... */ }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events,</p> - -<ul> - <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li> - <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3> - -<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p> - -<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/es/orphaned/web/guide/events/index.html b/files/es/orphaned/web/guide/events/index.html deleted file mode 100644 index f9469eba26..0000000000 --- a/files/es/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> -<p>Everything you need to know about events will go under here. We're working on cleanup here now.</p> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index d6e7708621..0000000000 --- a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Explicación de los datos de orientación y movimiento -slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained ---- -<p>{{ Draft() }}</p> -<h2 id="Sumario">Sumario</h2> -<p>Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.</p> -<div class="warning"> - <p><strong>Atención:</strong> Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.</p> -</div> -<h2 id="Acerca_de_los_marcos_de_coordenadas">Acerca de los marcos de coordenadas</h2> -<p>Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:</p> -<h3 id="Marco_de_coordenadas_terrestres">Marco de coordenadas terrestres</h3> -<p>El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.</p> -<ul> - <li>El eje <strong>X</strong> sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).</li> - <li>El eje <strong>Y</strong> sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.</li> - <li>El eje <strong>Z</strong> es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).</li> -</ul> -<p> </p> -<p><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Cartesian_xyz.png" style="width: 200px; height: 153px;"></p> -<p> </p> -<h3 id="Marco_de_coordenadas_del_dispositivo">Marco de coordenadas del dispositivo</h3> -<p>El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo</p> -<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p> -<ul> - <li>El eje <strong>x</strong> está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.</li> - <li>El eje <strong>y</strong> está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.</li> - <li>El eje <strong>z</strong> es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.</li> -</ul> -<div class="note"> - <strong>Nota:</strong> En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.</div> -<h2 id="Sobre_la_rotación">Sobre la rotación</h2> -<p>La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.</p> -<h3 id="Alpha">Alpha</h3> -<p>Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p> -<p>El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.</p> -<h3 id="Beta">Beta</h3> -<p>Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p>El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.</p> -<h3 id="Gamma">Gamma</h3> -<p>Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:</p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p>El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.</p> 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 deleted file mode 100644 index 160d590380..0000000000 --- a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -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 ---- -<p>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.<a href="/es/docs/HTML/HTML5" title="en/HTML/HTML5"> HTML5</a> introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y <em>validación de restricciones</em> 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 <a href="/es/docs/HTML/HTML5/Formularios_en_HTML5#Validaci.C3.B3n_restringida" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">API de Validación de Restricciones</a> de HTML.</p> - -<div class="note"><strong>Nota:</strong> La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones <em>de lado del servidor</em>. 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.</div> - -<h2 id="Restricciones_intrínsecas_y_básicas">Restricciones intrínsecas y básicas</h2> - -<p>En HTML5, las restricciones básicas son declaradas de dos formas:</p> - -<ul> - <li>Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo <span style="font-family: courier new;">email</span> creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.</li> - <li>Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.</li> -</ul> - -<h3 id="Tipos_de_captura_semánticos">Tipos de captura semánticos</h3> - -<p>Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tipo de input</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>El valor debe ser una URL absoluta, es decir, una de las siguientes: - <ul> - <li>una URI válida (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>una IRI válida, sin un componente de query (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>El valor debe obedecer a la producción <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> donde: - <ul> - <li><code>atext</code> está definido en <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, y representa una letra US-ASCII (<span style="font-family: courier new;">A</span>-<span style="font-family: courier new;">Z</span> y <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), un dígito (<span style="font-family: courier new;">0</span>-<span style="font-family: courier new;">9</span>) o uno de los siguientes caracteres especiales: <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~</span>,</li> - <li><code>ldh-str</code> está definido en <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, y representa letras US-ASCII, combinadas con dígitos y el símbolo <span style="font-family: courier new;">-</span> agrupados en palabras separadas por un punto (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Nota:</strong> 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 <strong>tipo no coincidente</strong>.</div> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - </tbody> -</table> - -<p>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. </p> - -<h3 id="Atributos_relacionados_con_validaciones">Atributos relacionados con validaciones</h3> - -<p>Los siguientes atributos son usados para describir restricciones básicas:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Atributo</th> - <th scope="col">Tipos de input que soportan el atributo</th> - <th scope="col">Valores posibles</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>Una expresión regular de JavaScript (compilada con las banderas <code title="">global</code>, <code title="">ignoreCase</code>, y <code title="">multiline</code> de ECMAScript 5 <em>desabilitadas</em>)</td> - <td>El valor debe coincidir con el patrón.</td> - <td>Incumplimiento de restricción por <strong>incompatibilidad de patrones (Pattern mismatch)</strong></td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser mayor o igual al de este atributo.</td> - <td rowspan="3">Incumplimiento de restricción por <strong>flujo insuficiente (Underflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser menor o igual al de este atributo</td> - <td rowspan="3">Incumplimiento de restricción por <strong>desborde (Overflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>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") }}</td> - <td><em>ninguno</em>, pues éste es un atributo de tipo Boolean: su presencia representa <em>true</em>, y su ausencia representa <em>false</em></td> - <td>Debe tener un valor (si se establece).</td> - <td>Incumplimiento de restricción por<strong> ausencia (Missing)</strong></td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>Un número entero de días</td> - <td rowspan="5">A menos que se establezca el atributo con la literal <span style="font-family: courier new;">any</span>, el valor debe ser <strong>min</strong> + un enter múltiplo del valor de este atributo.</td> - <td rowspan="5">Incumplimiento de restricción por<strong> inconsistencia de paso (Step mismatch)</strong></td> - </tr> - <tr> - <td>month</td> - <td>Un número entero de meses</td> - </tr> - <tr> - <td>week</td> - <td>Un número entero de semanas</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Un número entero de segundos</td> - </tr> - <tr> - <td>range, number</td> - <td>Un entero</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}</td> - <td>Una longitud en enteros</td> - <td>El número de caracteres (puntos de código) no debe exceder el valor del atributo.</td> - <td>Incumplimiento de restricción por ser<strong> muy largo (Too long)</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Proceso_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Proceso de validación de restricciones</span></h2> - -<p>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:</p> - -<ul> - <li>Invocando a la función <code>checkValidity()</code> de una interfaz <a href="/es/docs/DOM" title="en/DOM">DOM</a> relacionada con formas (<code><a href="/es/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/es/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/es/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> o <code><a href="/es/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a>, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)</li> - <li>Invocando a la función <code>checkValidity()</code> en la interfaz <code><a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code>, llamada <em>validación estática de restricciones</em>.</li> - <li>Enviando el formulario en sí, llamado <em>validación interactiva de restricciones</em>.</li> -</ul> - -<div class="note"><strong>Nota: </strong> - -<ul> - <li>Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.</li> - <li>Invocando al método <code>send()</code> en la interfaz <a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.</li> -</ul> -</div> - -<h2 id="Restricciones_complejas_usando_la_API_de_Restricciones_de_HTML5"><span class="author-g-by4vjwmiwjiydpj7">Restricciones complejas usando la API de Restricciones de HTML5</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">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.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como <strong>onchange</strong>) para calcular si la restricción no se cumple, y entonces usar el método <code><em>field</em>.setCustomValidity()</code> 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.</span></p> - -<h3 id="Restricciones_que_combinan_varios_campos_Validación_de_código_postal">Restricciones que combinan varios campos: Validación de código postal</h3> - -<p>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 <code>D-</code> en Alemania, <code>F-</code> 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.</p> - -<div class="note"> -<p><strong>Nota:</strong> 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.</p> -</div> - -<p><span style="line-height: 1.5;">Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:</span></p> - -<pre class="brush: html notranslate"><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></pre> - -<p>Esto mostrará el siguiente formulario: </p> - -<p><label>Código Postal : </label><input> <label>Country: </label><select><option value="ch">Suiza</option><option value="fr">Francia</option><option value="de">Alemania</option><option value="nl">Países Bajos</option></select></p> - -<p>Primero, escribimos una función que revisará las restricciones en sí:</p> - -<pre class="brush: js notranslate">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]); - } -} -</pre> - -<p>Entonces, enlazamos este código al evento <strong>onchange</strong> del elemento {{ HTMLElement("select") }} y al evento <strong>oninput</strong> del elemento {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">aquí un ejemplo en vivo</a> de la validación de código postal.</p> - -<h3 id="Limitando_el_tamaño_de_un_archivo_antes_de_ser_subido">Limitando el tamaño de un archivo antes de ser subido</h3> - -<p>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.</p> - -<p>Aquí está la parte de HTML:</p> - -<pre class="brush: html notranslate"><label for="FS">Selecciona un archivo menor a 75KB : </label> -<input type="file" id="FS"></pre> - -<p>Esto muestra lo siguiente:</p> - -<p><label>Seleciona un archivo menor a 75KB : </label> <input></p> - - - -<p>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:</p> - -<pre class="brush: js notranslate">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(""); -}</pre> - - - -<p>Finalmente, anclamos el método al evento requerido:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">aquí un ejemplo en vivo</a> de la validación de tamaño de archivos.</p> - -<h2 id="Estilos_visuales_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Estilos visuales de validación de restricciones</span></h2> - -<p>Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.</p> - -<h3 id="Controlando_el_aspecto_de_los_elementos">Controlando el aspecto de los elementos</h3> - -<p>El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.</p> - -<h4 id="Pseudo-clases_required_y_optional">Pseudo-clases :required y :optional</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> y <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.</p> - -<h4 id="Pseudo-clase_-moz-placeholder">Pseudo-clase :-moz-placeholder</h4> - -<p>Véase <a href="/es/docs/Web/CSS/::placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">::placeholder</a> (experimental).</p> - -<h4 id="Pseudo-clases_valid_invalid">Pseudo-clases :valid :invalid</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> e <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> 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.</p> - -<h4 id="Estilos_predeterminados">Estilos predeterminados</h4> - -<h3 id="Controlando_el_texto_de_incumplimiento_de_restricciones">Controlando el texto de incumplimiento de restricciones</h3> - -<h4 id="El_atributo_x-moz-errormessage">El atributo x-moz-errormessage</h4> - -<p>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.</p> - -<div class="note"> -<p style="margin-left: 40px;">Nota: Esta extensión no es estándar.</p> -</div> - -<h4 id="element.setCustomValidity_de_la_API_de_Validación_de_Restricciones">element.setCustomValidity() de la API de Validación de Restricciones</h4> - -<p>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.</p> - -<h4 id="Objeto_ValidityState_de_la_API_de_Validación_de_Restricciones"><span class="author-g-by4vjwmiwjiydpj7">Objeto ValidityState</span> de la API de Validación de Restricciones</h4> - -<p>La interfaz de DOM <code><a href="/es/docs/Web/API/ValidityState">ValidityState</a></code><a href="/es/docs/Web/API/ValidityState"> </a>representa los <em>estados de validez</em> 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.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusión"><span class="author-g-by4vjwmiwjiydpj7">Conclusión</span></h2> 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 deleted file mode 100644 index 5548e129ac..0000000000 --- a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -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 ---- -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">{{ gecko_minversion_header("2") }}{{ draft() }}</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gecko 2 introduce un nuevo analizador basado en HTML 5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nuevo analizador presenta estas mejoras importantes:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Las llamadas a <code>innerHTML</code> son mucho más rápidas.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Se han corregido <a class="external" href="http://tinyurl.com/html-parser-bugs" title="http://tinyurl.com/html-parser-bugs">decenas de errores relacionados desde hace tiempo con el analizador</a>.</span></span></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificación de HTML 5</a> 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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.</span></span></p> -<h2 id="Conductas_del_analizador_modificadas"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Conductas del analizador modificadas</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> -<h3 id="Tokenización_del_ángulo_izquierdo_del_soporte_dentro_de_una_etiqueta"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Tokenización del ángulo izquierdo del soporte dentro de una etiqueta</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Teniendo en cuenta la cadena <code><foo<bar></code> , el nuevo analizador la lee como una etiqueta llamada <code>foo<bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, <code>foo</code> y <code>bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> -<h3 id="Llamar_a_document.write_()_durante_el_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Llamar a document.write () durante el análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Antes de HTML5, Gecko y WebKit permitían las llamadas a <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>durante el análisis</em> para insertar contenido en la secuencia de origen.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento daba lugar inherentemente a <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">condiciones de carrera</a>, puesto que el contenido se insertaba, </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en la secuencia de origen, en</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> un punto dependiente de los tiempos de ejecución.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En IE, este tipo de llamadas son ignoradas o implican una llamada a <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, sustituyendo el documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En HTML5, <code>document.write()</code> sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> o <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Con el analizador de HTML 5, las llamadas a <code>document.write()</code> en cualquier otro contexto o se ignoran o sustituyen el documento.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos contextos en los que <em>no</em> debes llamar a <code>document.write()</code> incluyen:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">scripts creados con <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement ()</a></span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">controladores de eventos</span></span></li> - <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setTimeout ()</span></span></a></li> - <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setInterval ()</span></span></a></li> - <li><code><script async src="..."></code></li> - <li><code><script defer src="..."></code></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a <code>document.write()</code> .</span></span></p> -<h3 id="Falta_de_repetición_del_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Falta de repetición del análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, si el documento carecía de una etiqueta de cierre <code></title></code>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este comportamiento creaba una vulnerabilidad de seguridad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Con HTML 5, los analizadores ya no repiten análisis de ningún documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este cambio tiene las siguientes consecuencias para los desarrolladores web:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página <em>fallará</em> el análisis.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En un script alineado, con el fin de utilizar las cadenas literales <code></script></code> y <code><!--</code> , deberías evitar que se analicen literalmente, expresándolas como <code>\u003c/script></code> y <code>\u003c!--</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La práctica anterior de escapar de la cadena <code></script></code> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.</span></span></li> -</ul> -<h2 id="Mejora_del_rendimiento_con_el_análisis_especulativo"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Mejora del rendimiento con el análisis especulativo</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza <em>el análisis especulativo</em>, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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 <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write ()</a> , escribas un <em>subárbol equilibrado</em> dentro de ese trozo de script.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada <code>document.write()</code>, siempre y cuando estén dentro de la misma etiqueta <code><script></code>.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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') }}.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(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.)</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, el siguiente código escribe un subárbol equilibrado:</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><script></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("<div>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">document.write ("<p> Aquí va el contenido. </ p>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("</ div>");</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ script></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- Aquí va el HTML sin script. --> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" style=""><script>document.write("<div>");</script> -<p>El contenido va aquí.</p> -<script>document.write("</div>");</script> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener más información, consulta <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/HTML/HTML5/Optimizing Your Pages for Speculative Parsing">Optimizar tus páginas para el análisis especulativo</a></span></span></p> -<p>{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}</p> diff --git a/files/es/orphaned/web/guide/html/html5/index.html b/files/es/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index a85b952772..0000000000 --- a/files/es/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -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 ---- -<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5 </strong> <span style="line-height: 21px;">es la última versión de</span> <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </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 de HTML, con nuevos elementos, atributos y comportamientos.</span></li> - <li><span class="seoSummary">Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.</span> A este conjunto se le llama <em>HTML5 y amigos</em>, a menudo reducido a <em>HTML5</em> .</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 página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función. </span></p> - -<ul style="line-height: 22px;"> - <li><em>Semántica</em>: Permite describir con mayor precisión <span id="docs-internal-guid-624d18e2-7fff-fe56-de5d-c9472725617e" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cuál</span> es su contenido.</li> - <li><em>Conectividad</em>: Permite comunicarse con el servidor de formas nuevas e innovadoras.</li> - <li><em>Sin conexión y almacenamiento</em>: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.</li> - <li><em>Multimedia</em>: <span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nos otorga un excelente soporte para utilizar contenido multimedia</span> como lo son audio y video nativamente.</li> - <li><em>Gráficos y efectos 2D/3D</em>: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.</li> - <li><em>Rendimiento e Integración</em>: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.</li> - <li><em>Acceso al dispositivo</em>: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.</li> - <li><em>CSS3</em>: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.</li> -</ul> - -<div class="cleared row topicpage-table" style="line-height: 22px;"> -<div class="section" style="width: 436px;"> -<h2 id="SEMÁNTICA" 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; padding-right: 0.5em; vertical-align: middle; width: 64px;">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 HTML5</a></dt> - <dd>Un vistazo al nuevo esquema y secciones de un documento HTML5: <span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.</span></dd> - <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Uso de audio y video en HTML5">Uso de audio y video en HTML5</a></dt> - <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.</dd> -</dl> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt> - <dd>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<span style="line-height: 1.572;"> {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.</span></dd> - <dt><span style="line-height: 1.572;">Nuevos elementos semánticos</span></dt> - <dd>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 <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>. - <dl> - <dt></dt> - <dt>Mejora en {{HTMLElement("iframe")}}</dt> - <dd>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")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd>Permite integrar directamente fórmulas matemáticas.</dd> - <dd></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><span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">se explica cómo</span> <span class="hps">indicar al</span> <span class="hps">navegador</span> <span class="hps">que está utilizando</span> <span class="hps">HTML5</span> <span class="hps">en</span> <span class="hps">su diseño web</span> <span class="hps">o aplicación web</span><span>.</span></span></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 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.</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; padding-right: 0.5em; vertical-align: middle; width: 64px;">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 e intercambiar 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 "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.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>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.</dd> - </dl> - - <h2 id="Sin_Conexión_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; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sin Conexión 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 sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte 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 con y sin conexión</a></dt> - <dd>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.</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 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 desde aplicaciones web</a></dt> - <dd>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<span style="line-height: 1.572;"> </span><span style="font-family: monospace; line-height: 1.572;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;"> de </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;"> <em>file</em> </span>del elemento HTML <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;">atributos. </span>También esta<span style="line-height: 1.572;"> </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; padding-right: 0.5em; vertical-align: middle; width: 64px;">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 elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. - <dl> - <dt></dt> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>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.</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")}} permite subtítulos y capítulos. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> <span style="line-height: 1.572;">es un formato de pista de texto.</span></dd> - </dl> - - <h2 id="3D_GRAFICOS_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; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, GRAFICOS & EFECTOS</h2> - - <dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> - <dd>Conozca el nuevo elemento <span style="font-family: courier new,andale mono,monospace; line-height: normal;">{{HTMLElement("canvas")}}</span> y cómo dibujar gráficos y otros objetos en Firefox</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos <code style="font-size: 14px;"><canvas></code> </a></dt> - <dd>El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .</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 elementos <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;"><canvas></code></a> HTML5 .</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 incrustar en el código HTML.</dd> - <dt></dt> - </dl> - </dd> - </dl> - </dd> -</dl> -</div> - -<div class="section" style="width: 435px;"> -<h2 id="RESULTADOS_e_INTEGRACIÓN" 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; padding-right: 0.5em; vertical-align: middle; width: 64px;">RESULTADOS e 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 evita que estas actividades ralenticen eventos interactivos.</dd> - <dt><code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Nivel 2</dt> - <dd>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<span style="line-height: 1.572;"> </span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd> -</dl> - -<dl> - <dt>Motores JIT compilación de 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">History API</a></dt> - <dd>Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.</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 una 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>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.</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>Los nuevos atributos HTML5 <code style="font-size: 14px;">activeElement</code> y <code style="font-size: 14px;">hasFocus</code> son soportados.</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 metodo <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>.</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 la renderización de animaciones para obtener un óptimo rendimiento.</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 interfáz de usuario del explorador mostrada.</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> - <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 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.</dd> - </dl> - </dd> -</dl> - -<h2 id="ACCESO_al_dispositivo" 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; padding-right: 0.5em; vertical-align: middle; width: 64px;">ACCESO al dispositivo</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 cuando 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>Permite a los 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>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).</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_STYLING" 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; padding-right: 0.5em; vertical-align: middle; width: 64px;">CSS3 STYLING</h2> - -<p><a href="/en-US/docs/CSS" title="CSS">CSS </a> <font>se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. </font><font>Esto se refiere a menudo como</font> <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, <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 otros 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a> y <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a> se pueden ajustar.</dd> -</dl> - -<dl> - <dt>Bordes mas "lujosos"</dt> - <dd>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 <span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">, </span>aunque los bordes redondeados son apoyados a través de propiedades <span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd> - <dt>Animación de su estilo</dt> - <dd>Utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a> para animar entre los diferentes estados o utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a> para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.</dd> - <dt>Tipografía mejorada</dt> - <dd>Los autores tienen un mejor control para usar la tipografía. Se puede controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto </code></a>{{cssxref("text-overflow")}} y <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a> y también puede poner una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow"> sombra</a> 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> . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">@font-face</code></a> .</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 <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> , y el <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a> .</dd> -</dl> -</div> -</div> 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 deleted file mode 100644 index c0ad7e26db..0000000000 --- a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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 ---- -<p><br> - <span lang="es-ES"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>, 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.</span> <span lang="es-ES">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.</span></p> -<p><span lang="es-ES">Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones.</span> <span lang="es-ES">Debido a esto, algunos navegadores no admiten aún determinadas características.</span> <span lang="es-ES">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.</span> <span lang="es-ES">Puedes encontrar una lista de las características de HTML5 que admite Gecko en la <a href="/es/HTML/HTML5" title="es/HTML/HTML5">página principal de HTML5</a>.</span></p> -<h2 id="El_tipo_de_documento_HTML5">El tipo de documento HTML5</h2> -<p><span lang="es-ES">El tipo de documento para HTML5 es muy sencillo.</span> <span lang="es-ES">Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:</span></p> -<pre lang="es-ES" style="margin-bottom: 0.5cm;"><!DOCTYPE html></pre> -<p lang="es-ES">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.</p> -<p lang="es-ES">{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}</p> diff --git a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html b/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html deleted file mode 100644 index f5f733a71d..0000000000 --- a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Introducción al HTML -slug: orphaned/Web/Guide/HTML/Introduction_alhtml_clone -tags: - - HTML -original_slug: Web/Guide/HTML/Introduction_alhtml_clone ---- -<p>Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas palabras normalmente tienen algunas características, como diferentes tamaños y colores. En algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás viendo. La página también puede contener animaciones y contenidos que cambian mientras el resto de la página se mantiene sin cambios.</p> - -<p>Varias tecnologías (como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) pueden usarse para definir los elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se define usando <a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a> (<strong>HyperText Markup Language)</strong>. Sin HTML, no habría páginas web.</p> - -<p>Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.</p> - -<h2 id="Una_breve_historia_del_HTML">Una breve historia del HTML</h2> - -<p>A finales de la década de los 80s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> estuvo trabajando como físico en <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (las siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para que los científicos pudieran compartir documentos a través de internet. Antes de su invención, las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías como el email, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), y <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>- tecnología en la que se basan los foros de internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).</p> - -<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2> - -<p>HTML es un <strong>lenguaje de etiquetas</strong>. Indica al navegador como tiene que mostrar el contenido. El HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos <>, y las etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una barra /.</p> - -<p>Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "<p>" y una de cierre "</p>". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento párrafo en HTML:</p> - -<div id="Spl1"> -<pre class="brush:html;"><p>Mi perro odia el pescado.</p></pre> -</div> - -<p>Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:</p> - -<p>{{ EmbedLiveSample("Spl1", 400, 50) }}</p> - -<p>El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.</p> - -<p>Los elementos que contienen contenidos, normalmente suelen contener también otros elementos. Por ejemplo, el elemento énfasis (etiqueta <em>) puede estar dentro del elemento párrafo:</p> - -<div id="Spl2"> -<pre class="brush:html;"><p>Mi perro <em>odia</em> el pescado.</p></pre> -</div> - -<p>Cuando se muestre se verá del siguiente modo:</p> - -<p>{{ EmbedLiveSample("Spl2", 400, 50) }}</p> - -<p>Algunos elementos no contienen otros elementos. Como es el caso de la etiqueta imagen ("<img>") que simplemente especifica el nombre del archivo que contiene la imagen como atributo:</p> - -<pre class="brush:html;"><img src="smileyface.jpg"></pre> - -<p>En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma ">" para indicar el final de la misma "/>". Aunque se trata de algo opcional en HTML, en <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).</p> - -<p>El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección. Además, si quieres ver HTML en acción, pásate por <a href="http://thimble.webmaker.org/en-US/projects/wrangler/edit" title="http://thimble.webmaker.org/en-US/projects/wrangler/edit">Mozilla Thimble</a>, que es un editor online interactivo que enseña cómo escribir HTML. Además, en el <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> podrás ver una lista de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada uno de ellos.</p> - -<h2 id="Elementos_—_los_bloques_básicos_de_construcción">Elementos — los bloques básicos de construcción</h2> - -<p>El HTML consiste en una serie de elementos. Los Elementos definen el significado <strong>semántico</strong> del contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez contienen otras etiquetas. Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>" indica una imagen. Mira la página <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> para ver una lista completa de todos los elementos.</p> - -<p>Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como "esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son usados por razones técnicas, como "esto es la información identificativa de la página que no debe ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor semántico.</p> - -<p>Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:</p> - -<pre class="brush:html;"><html> - <body> - - <p>Mi perro <em>odia</em> el pescado.</p> - - </body> -</html></pre> - -<p>Como puedes ver, los elementos <html> encierran el resto del documento, y el elemento <body> encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los elementos <body> y <p> son las ramas que crecen del tronco que es <html>. Esta estructura jerárquica es lo que se denomina <strong>DOM</strong>: siglas inglesas del Documento Objeto Modelo (<strong>Document Object Model)</strong>.</p> - -<h2 id="Etiquetas">Etiquetas</h2> - -<p>Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de código HTML prefieren editores especializados que resaltan las partes de código propias de la sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en mayúsculas o en minúsculas. Aunque, el <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requiere de las minúsculas).</p> - -<p>El código HTML contenido entre los signos de menor que ("<") al comienzo y mayor que (">") al final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo sencillo:</p> - -<pre class="brush: xml"><p>Esto es texto dentro de un párrafo.</p> -</pre> - -<p>En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para poder escribir <strong>código válido</strong>.</p> - -<p>Esto es un ejemplo de <em>código válido</em>:</p> - -<pre class="brush: xml"><em>Me <strong>refiero</strong> a eso</em>. -</pre> - -<p>Esto es un ejemplo de <em>código inválido</em>:</p> - -<pre class="brush: xml">Invalido: <em>Me <strong>refiero</em> a eso</strong>.</pre> - -<p>Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada antes de la etiqueta de cierre del elemento que la contenedor.</p> - -<div class="note"> -<p>Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a medida que han implementado las nuevas normas de interpretación de código HTML no válido. Aquí puede ver el resultado de un código invalido para el mismo arbol DOM <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">en todos los navegadores modernos</a>.</p> -</div> - -<p>Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:</p> - -<pre class="brush: xml"><img src="smileyface.jpg"></pre> - -<p>Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del simbolo mayor que (necesario en los códigos de XHTML).</p> - -<pre class="brush: xml"><img src="smileyface.jpg" /></pre> - -<p>En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.</p> - -<h2 id="Atributos">Atributos</h2> - -<p>La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el siguiente ejemplo. Dicha información es lo que se conoce como <strong>atributos</strong>. Los atributos suelen consistir en dor partes:</p> - -<ul> - <li>Un atributo <strong>nombre </strong>(name).</li> - <li>Un atributo <strong>valor</strong> (value).</li> -</ul> - -<p>Algunos atributos sólo pueden tener un único valor. Son atributos <strong>Booleanos</strong> y pueden ser incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres ejemplos tienen el mismo significado:</p> - -<pre class="brush: xml"><input required="required"> - -<input required=""> - -<input required> -</pre> - -<p>Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos ambiguo para la vista y para evitar errores. El siguiente es semejante error..:Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. El siguiente código sería un error:</p> - -<pre class="brush: xml"><p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)</pre> - -<p>En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el código se interpreta como si se hubiera escrito así:</p> - -<pre class="brush: xml"><p class="foo" bar=""></pre> - -<h2 id="Nombre_de_caracteres_referenciados">Nombre de caracteres referenciados</h2> - -<p>Los<strong> Caraceteres Referenciados </strong> (a veces llamados<em> entidades) </em>son combinaciones de caracteres que sirven para mostrar en el navegador símbolos que tienen un significado especial en el código HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados más comunes, que no estaría de más que memorizases:</p> - -<ul> - <li><code>&gt;</code> representa el carater mayor que (<code>></code>)</li> - <li><code>&lt;</code> representa el caracter menor que (<code><</code>)</li> - <li><code>&amp;</code> representa el caracter ampersand (<code>&</code>)</li> - <li><code>&quot;</code> representa el caracter de comillas dobles (")</li> -</ul> - -<p>Hay <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">muchas más entidades</a>, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.</p> - -<h2 id="Tipo_de_documento_y_comentarios">Tipo de documento y comentarios</h2> - -<p>Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración <strong>doctype</strong> en la primera línea. En el HTML actual esto se escribe del siguiente modo:</p> - -<pre class="brush: xml"><!DOCTYPE html></pre> - -<p>El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares web del <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">peculiaridades</a>.)</p> - -<p>HTML tiene un mecanismo para poder introducir <strong>comentarios</strong> al código que no serán mostrados en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en HTML están contenidos entre los siguientes símbolos:</p> - -<pre class="brush: xml"><!-- Esto es un comentario de texto --></pre> - -<h2 id="Un_pequeño_documento_pero_completo">Un pequeño documento pero completo</h2> - -<p>Colocando todas estas explicaciones juntas, aquí os dejamos un pequeño ejemplo de un documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como <em>myfirstdoc.html</em> y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo se trata de un pequeño comienzo.</p> - -<pre class="brush: xml"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8" /> - <title>A tiny document</title> -</head> -<body> - <h1>Main heading in my document</h1> - <!-- Note that it is "h" + "1", not "h" + the letter "one" --> - <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> -</body> -</html> -</pre> diff --git a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index dcee261b54..0000000000 --- a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Secciones y esquema de un documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<p>La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.</p> - -<div class="note"> -<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p> -</div> - -<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2> - -<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> <body></code> y <code></body></code> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.</p> - -<p>Entonces el siguiente marcado:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="seccion" id="zorro" > -<h1>El zorro</h1> -<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro. -... bla, bla, bla ... -<div class="subseccion" id="zorro-habitat" > -<h2>Hábitat</h2> -<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles. -...bla, bla, bla... -</div> -</div> -</pre> -</div> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat -</pre> - -<p>Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,</p> - -<pre class="brush:xml"><h1>El zorro</h1> -<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro. -... bla, bla, bla ... -<h2>Hábitat</h2> -<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles. -...bla, bla, bla... -<h2>Costrumbres</h2> -<h1>El oso</h1> -</pre> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat - 1.2 Costumbres -2. El oso -</pre> - -<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2> - -<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p> - -<ol> - <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.</li> - <li>Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.</li> - <li>Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <code><h1>Mozart</h1><h2>El genio salzburgués</h2></code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code><hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup></code> crea el esquema <code>1. Mozart</code>).</li> - <li>En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.</li> - <li>Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.</li> -</ol> - -<p>De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.</p> - -<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2> - -<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3> - -<p>Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.</p> - -<div class="note"><strong>Nota: </strong>Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div> - -<p>Ejemplo:</p> - -<pre class="brush:xml"><section> - <h1>El pato</h1> - <section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section> - <section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section> - <aside> - <p>otros estudiosos del pato - </aside> -</section> -<footer> - <p>(c) 2010 The Example company -</footer></pre> - -<p>El bloque de HTML define dos secciones de alto nivel:</p> - -<pre><span style="color: red;"><section> - <h1>El pato</h1> - <section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section> - <section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section> - <aside> - <p>otros estudiosos del pato - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2010 The Example company -</footer></span></pre> - -<p>La primera sección tiene tres subsecciones:</p> - -<pre><section> - <h1>El pato</h1> - - <span style="color: red;"><section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section></span> - - <span style="color: green;"><section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section></span> - - <span style="color: blue;"><aside> - <p>Otros estudiosos del lobo - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company -</footer></pre> - -<p>Esto genera la siguiente estructura:</p> - -<pre>1. El pato - 1.1 Introducción - 1.2 Hábitat - 1.3 Section (aside) -</pre> - -<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3> - -<p>Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.</p> - -<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:</p> - -<pre class="brush:xml"><section> - <h1>La mosca</h1> - <p>El esta sección hablaremos de la mosca, una criatura adorable. - ... bla, bla, bla ... - <section> - <h2>Hábitat</h2> - <p>Únicamente se han divisado colonias de moscas en los montes de.... - ...bla, bla, bla ... - </section> -</section> -<section> - <h3>El mosquito</h3> - <p>A continuación, otra rareza a punto de extinguirse, el mosquito. - ...bla, bla, bla... -</section></pre> - -<p>Genera el siguiente esquema:</p> - -<pre>1. La mosca - 1.1 Hábitat -2. El mosquito</pre> - -<p>Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).</p> - -<h3 id="Seccionado_implícito">Seccionado implícito</h3> - -<p>Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado <em>seccionado implícito</em>.</p> - -<p>Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:</p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p> .... - - <h3 class="subsec-implicita">Hábitat</h3> - <p> ... -</section></pre> - -<p>Genera el siguiente esquema:</p> - -<pre><strong>1. El águila</strong> - <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante <h3>)</em> -</pre> - -<p>Si es del mismo rango que la cabecera anterior, cierra la sección previa (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: </p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p>... - <h1 class="secc-implicita">El buitre</h1> - <p>... -</section></pre> - -<p>genera el siguiente esquema: </p> - -<pre><strong>1. El águila</strong> -<strong>2. El buitre</strong> <em>(implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)</em> -</pre> - -<p>Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:</p> - -<pre class="brush:xml"><body> - <h1>Colores</h1> - <h2>Rojo</h2> - <p> ... - <section> - <h3>Amarillo</h3> - <p> ... - <h3>Verde</h3> - <p> ... - <h2>Sabores</h2> - <p>... - </section> -</body></pre> - -<p>generando el siguiente esquema:</p> - -<pre><strong>1. Colores - 1.1 Rojo</strong> <em>(implícitamente con <code><h2></code> )</em> - <strong>1.2 Amarillo</strong><em>(explícitamente con <code><section> </code>)</em> - <strong>1.3 Verde</strong> <em>(impícitamente con <code><h3></code>, cerrando el <code><h3></code> previo)</em> -<strong>2. Sabores</strong> <em>(implícitamente con <h2>, cerrando el <section> previo)</em> -</pre> - -<p>Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica</p> - -<ul> - <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li> - <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li> -</ul> - -<p>Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.</p> - -<p>Una <strong>excepción</strong> a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser <strong>reutilizadas</strong> en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.</p> - -<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3> - -<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p> - -<ul> - <li>Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: - <pre class="brush:xml"><section> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> -</section></pre> - - <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p> - - <pre>1. La flauta mágica - 1.1 Ópera en dos actos del genio salzburgués -</pre> - </li> - <li>El encabezado secundario puede ser usado por una lista de etiquetas: - <pre class="brush:xml"><section> - <h1>Secciones y esquema del documento</h1> - <h2>HTML, HTML5, secciones, esquema</h2> -</section></pre> - - <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p> - - <pre>1. Secciones y esquema del documento - 1.1 HTML, HTML5, secciones, esquema</pre> - </li> -</ul> - -<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:</p> - -<pre class="brush:xml"><section> - <hgroup> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> - </hgroup> - ... algún contenido ... -</section> -</pre> - -<p>genera el siguiente esquema, que es el que se desea:</p> - -<pre>1. La flauta mágica</pre> - -<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3> - -<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p> - -<p>Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.<br> - Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p> - -<p>Además, el elemento de partida para formar el esquema del documento es {{HTMLElement("body")}}, el cual por ser la raíz, se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.</p> - -<p>Ejemplo:</p> - -<pre class="brush: html"><section> - <h1>Bach</h1> - <section> - <h2>Introducción</h2> - <p>... - </section> - <section> - <h2>La Pasión según S. Mateo</h2> - <p> Bla, bla, bla ... - <blockquote> - <h1>Friedich Nietzsche - <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios” - </blockquote> - </section> -</section></pre> - -<p>Este ejemplo resulta en el siguiente esquema:</p> - -<pre>1. Bach - 1.1 Introducción - 1.2 La Pasión según s. Mateo</pre> - -<p>Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.</p> - -<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3> - -<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p> - -<ol> - <li>El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal, como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.</li> - <li>El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.</li> - <li>El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.</li> - <li>El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.</li> -</ol> - -<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2> - -<p>El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.</p> - -<p>Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> - -<p>De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> - -<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2> - -<p>Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como <code>display:inline</code> por defecto:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.<br> - <br> - Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="Conclusión">Conclusión</h2> - -<p>Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.</p> |