diff options
Diffstat (limited to 'files/es/web')
26 files changed, 0 insertions, 5057 deletions
diff --git a/files/es/web/api/audionode/index.html b/files/es/web/api/audionode/index.html deleted file mode 100644 index ea6ff34406..0000000000 --- a/files/es/web/api/audionode/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: AudioNode -slug: Web/API/AudioNode -translation_of: Web/API/AudioNode ---- -<div>{{APIRef("Web Audio API")}}</div> - -<p>La interfaz <strong><code>AudioNode</code></strong> es una interfaz genérica para representar un módulo de procesamiento de audio. Ejemplos:</p> - -<ul> - <li>En un recurso de audio (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, an {{domxref("OscillatorNode")}}, etc.),</li> - <li>the audio destination,</li> - <li>intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}} or {{domxref("ConvolverNode")}}), or</li> - <li>volume control (like {{domxref("GainNode")}})</li> -</ul> - -<p>{{InheritanceDiagram}}</p> - -<p class="note"><strong>Note</strong>: An <code>AudioNode</code> can be target of events, por lo tanto este implementa {{domxref("EventTarget")}} interface.</p> - -<h2 id="Descripción">Descripción</h2> - -<h3 id="The_audio_routing_graph">The audio routing graph</h3> - -<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> - -<p>Cada <code>AudioNode</code> posee entradas y salidas, y múltiples nodos de audio son conectados para construir un <em>processing graph</em>. Este graph es contenido en {{domxref("AudioContext")}}, y cada nodo de audio solo puede pertecener a un audio context.</p> - -<p>Un <em>source node</em> tiene cero entradas pero una o muchas salidas, y puede ser usado para generar sonido. Por otro lado, un <em>destination node</em> no tiene salidas; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are <em>processing nodes</em> which have inputs and outputs. The exact processing done varies from one <code>AudioNode</code> to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).</p> - -<p>The more nodes in a graph, the higher the latency will be. Por ejemplo, si tu graph tiene una latencia de 500ms, Cuando el source node reproduzca un sonido, este va a tomar la mitad de un segundo hasta que el sonido pueda ser escuchado en tus altavoces. (or even longer because of latency in the underlying audio device). Por lo tanto, si tu necesitas tener un audio interactivo, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (<code>GainNode</code>) should be the last node so that volume changes take immediate effect.</p> - -<p>Each input and output has a given amount of <em>channels</em>. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.</p> - -<p>For a list of all audio nodes, see the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p> - -<h3 id="Creating_an_AudioNode">Creating an <code>AudioNode</code></h3> - -<p>There are two ways to create an <code>AudioNode</code>: via the <em>constuctor</em> and via the <em>factory method</em>.</p> - -<pre class="brush: js;">// constructor -const analyserNode = new AnalyserNode(audioCtx, { - fftSize: 2048, - maxDecibels: -25, - minDecibels: -60, - smoothingTimeConstant: 0.5, -}); - -// factory method -const analyserNode = audioCtx.createAnalyser(); -analyserNode.fftSize = 2048; -analyserNode.maxDecibels = -25; -analyserNode.minDecibels = -60; -analyserNode.smoothingTimeConstant = 0.5;</pre> - -<p>Eres libre de usar cualquiera de los constructors o factory methods, o una mezcla de ambos, sin embargo hay ventajas al usar contructores:</p> - -<ul> - <li>All parameters can be set during construction time and don't need to be set individually.</li> - <li>You can <a href="https://github.com/WebAudio/web-audio-api/issues/251">sub-class an audio node</a>. While the actual processing is done internally by the browser and cannot be altered, you could write a wrapper around an audio node to provide custom properties and methods.</li> - <li>Slightly better performance: In both Chrome and Firefox, the factory methods call the constructors internally.</li> -</ul> - -<p>Tener en cuenta que Microsoft Edge does not yet appear to support the constructors; it will throw a "Function expected" error when you use the constructors.</p> - -<p><em>Brief history:</em> The first version of the Web Audio spec only defined the factory methods. After a <a href="https://github.com/WebAudio/web-audio-api/issues/250">design review in October 2013</a>, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.</p> - -<h2 id="Properties" style="">Properties</h2> - -<dl> - <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> - <dd>Returns the associated {{domxref("BaseAudioContext")}}, that is the object representing the processing graph the node is participating in.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of inputs feeding the node. Source nodes are defined as nodes having a <code>numberOfInputs</code> property with a value of <code>0</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of <code>0</code> for this attribute.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCount")}}</dt> - <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCountMode")}}</dt> - <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd> - <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> - <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> - The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioNode.connect()")}}</dt> - <dd>Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an {{domxref("AudioParam")}}.</dd> - <dt>{{domxref("AudioNode.disconnect()")}}</dt> - <dd>Allows us to disconnect the current node from another one it is already connected to.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> - -<pre class="brush: js;">const audioCtx = new AudioContext(); - -const oscillator = new OscillatorNode(audioCtx); -const gainNode = new GainNode(audioCtx); - -oscillator.connect(gainNode).connect(audioCtx.destination); - -oscillator.context; -oscillator.numberOfInputs; -oscillator.numberOfOutputs; -oscillator.channelCount;</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.AudioNode")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index 1f2a93dbae..0000000000 --- a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -original_slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility ---- -<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> - -<div class="summary">The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.</div> - -<div class="summary">El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.</div> - -<h2 id="Fallback_content">Fallback content</h2> - -<p>The content inside the <code><canvas> ... </canvas></code> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demonstrates how this can be done:</p> - -<pre class="brush: html"><canvas> - <h2>Shapes</h2> - <p>A rectangle with a black border. - In the background is a pink circle. - Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. - Partially overlaying the circle is a green - <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> - and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, - both of which are semi-opaque, so the full circle can be seen underneath.</p> -</canvas> </pre> - -<p>See the <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video how NVDA reads this example by Steve Faulkner</a>.</p> - -<h2 id="ARIA_rules">ARIA rules</h2> - -<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA techniques</a> for more information.</p> - -<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> -</pre> - -<h2 id="Hit_regions">Hit regions</h2> - -<p>Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Adds a hit region to the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Removes all hit regions from the canvas.</dd> -</dl> - -<p>You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.</p> - -<pre class="brush: html"><canvas id="canvas"></canvas> -<script> -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.beginPath(); -ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); -ctx.fill(); -ctx.addHitRegion({id: 'circle'}); - -canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } -}); -</script></pre> - -<p>The <code>addHitRegion()</code> method also takes a <code>control</code> option to route events to an element (that is a descendant of the canvas):</p> - -<pre class="brush: js">ctx.addHitRegion({control: element});</pre> - -<p>This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen demo</a>.</p> - -<h2 id="Focus_rings">Focus rings</h2> - -<p>When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the <code>drawFocusIfNeeded</code> property can be used.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> - <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> -</dl> - -<p>Additionally, the <code>scrollPathIntoView()</code> method can be used to make an element visible on the screen if focused, for example.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> - <dd>Scrolls the current path or a given path into the view.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> -</ul> - -<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> diff --git a/files/es/web/api/filesystem/index.html b/files/es/web/api/filesystem/index.html deleted file mode 100644 index 62f5e91b4b..0000000000 --- a/files/es/web/api/filesystem/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: FileSystem -slug: Web/API/FileSystem -translation_of: Web/API/FileSystem ---- -<p>{{APIRef("File System API")}} {{non-standard_header}}</p> - -<p>La interfaz de la API <strong><code>FileSystem</code></strong> para la entrada de archivos y directorios es usada para representar un sistema de archivos. Estos objetos pueden ser obtenidos desde la propiedad {{domxref("FileSystemEntry.filesystem", "filesystem")}} en cualquier entrada del sistema de archivos . Algunos navegadores ofrecen APIs adicionales para crear y administrar el sistema de archivos , como el metodo de Chrome {{domxref("Window.requestFileSystem", "requestFileSystem()")}}.</p> - -<p>This interface will not grant you access to the users filesystem. Instead you will have a "virtual drive" within the browser sandbox. If you want to gain access to the users filesystem you need to invoke the user by eg. installing a Chrome extension. The relevant Chrome API can be found <a href="https://developer.chrome.com/apps/fileSystem">here</a>.</p> - -<div class="note"> -<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.</p> -</div> - -<h2 id="Conceptos_Basicos">Conceptos Basicos</h2> - -<p>Hay dos formas de acceder a un objeto <code>FileSystem</code> :</p> - -<ol> - <li>You can directly ask for one representing a sandboxed file system created just for your web app directly by calling <code>window.requestFileSystem()</code>. If that call is successful, it executes a callback handler, which receives as a parameter a <code>FileSystem</code> object describing the file system.</li> - <li>You can get it from a file system entry object, through its {{domxref("FileSystemEntry.filesystem", "filesystem")}} property.</li> -</ol> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("USVString")}} representing the file system's name. This name is unique among the entire list of exposed file systems.</dd> - <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("FileSystemDirectoryEntry")}} object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File System API')}}</td> - <td>{{Spec2('File System API')}}</td> - <td>Draft of proposed API</td> - </tr> - </tbody> -</table> - -<p>This API has no official W3C or WHATWG specification.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores </h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracteristica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>13{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoDesktop(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}} {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>0.16{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoMobile(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Microsoft Edge implements this interface under the name <code>WebKitFileSystem</code>, and supports its use only in drag-and-drop scenarios using the {{domxref("DataTransferItem.webkitGetAsEntry()")}} method. It's not available for use in file or folder picker panels (such as when you use an {{HTMLElement("input")}} element with the {{domxref("HTMLInputElement.webkitdirectory")}} attribute.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li> - <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, and {{domxref("FileSystemDirectoryEntry")}}</li> - <li>MSDN article: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li> -</ul> diff --git a/files/es/web/api/headers/index.html b/files/es/web/api/headers/index.html deleted file mode 100644 index cb65b6aa11..0000000000 --- a/files/es/web/api/headers/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Headers -slug: Web/API/Headers -tags: - - API - - Experimental - - Fetch - - Headers - - Interface - - Reference -translation_of: Web/API/Headers ---- -<div>{{ APIRef("Fetch") }}</div> - -<div>La interfaz <strong><code>Headers</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto <code>Header</code> tiene una lista asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.</div> - -<div>Es posible añadir metodos de uso como <span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.</span></div> - -<div>Por razones de seguridad, algunos headers pueden ser controlados unicamente por el <strong>user agent</strong>. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}} y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.</div> - -<p>A Headers object also has an associated guard, which takes a value of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.</p> - -<p>You can retrieve a <code>Headers</code> object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new <code>Headers</code> object using the {{domxref("Headers.Headers()")}} constructor.</p> - -<p>An object implementing <code>Headers</code> can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> is equivalent to <code>for (var p of myHeaders.entries())</code>.</p> - -<div class="note"> -<p><strong>Note</strong>: you can find more out about the available headers by reading our <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> reference.</p> -</div> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("Headers.Headers()")}}</dt> - <dd>Creates a new <code>Headers</code> object.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Headers.append()")}}</dt> - <dd>Appends a new value onto an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd> - <dt>{{domxref("Headers.delete()")}}</dt> - <dd>Deletes a header from a <code>Headers</code> object.</dd> - <dt>{{domxref("Headers.entries()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd> - <dt>{{domxref("Headers.forEach()")}}</dt> - <dd>Executes a provided function once for each array element.</dd> - <dt>{{domxref("Headers.get()")}}</dt> - <dd>Returns a {{domxref("ByteString")}} sequence of all the values of a header within a <code>Headers</code> object with a given name.</dd> - <dt>{{domxref("Headers.has()")}}</dt> - <dd>Returns a boolean stating whether a <code>Headers</code> object contains a certain header.</dd> - <dt>{{domxref("Headers.keys()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd> - <dt>{{domxref("Headers.set()")}}</dt> - <dd>Sets a new value for an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd> - <dt>{{domxref("Headers.values()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd> -</dl> - -<div class="note"> -<p><strong>Note</strong>: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: All of the Headers methods will throw a <code>TypeError</code> if you try to pass in a reference to a name that isn't a <a href="https://fetch.spec.whatwg.org/#concept-header-name">valid HTTP Header name</a>. The mutation operations will throw a <code>TypeError</code> if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.</p> -</div> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <dt>{{domxref("Headers.getAll()")}}</dt> - <dd>Used to return an array of all the values of a header within a <code>Headers</code> object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>In the following snippet, we create a new header using the <code>Headers()</code> constructor, add a new header to it using <code>append()</code>, then return that header value using <code>get()</code>:</p> - -<pre class="brush: js">var myHeaders = new Headers(); - -myHeaders.append('Content-Type', 'text/xml'); -myHeaders.get('Content-Type') // should return 'text/xml' -</pre> - -<p>The same can be achieved by passing an array of arrays or an object literal to the constructor:</p> - -<pre class="brush: js">var myHeaders = new Headers({ - 'Content-Type': 'text/xml' -}); - -// or, using an array of arrays: -myHeaders = new Headers([ - ['Content-Type', 'text/xml'] -]); - -myHeaders.get('Content-Type') // should return 'text/xml' -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#headers-class','Headers')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Headers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html deleted file mode 100644 index 84b04854fa..0000000000 --- a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Tipos de Drag recomendados -slug: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types -translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types -original_slug: DragDrop/Recommended_Drag_Types ---- -<p>A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.</p> -<h2 id="text" name="text">Arrastramdo Texto</h2> -<p>Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:</p> -<pre>event.dataTransfer.setData("text/plain", "This is text to drag") -</pre> -<p>Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.</p> -<p><span style="line-height: 1.5;">Se recomienda que siempre se agrega datos del tipo </span><code style="font-size: 14px;">text/plain</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.</span></p> -<p><span style="line-height: 1.5;">En códigos más viejo, encontrara </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/unicode o </span>el tipo<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">Text.</span><span style="line-height: 1.5;">Estos equivalen </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain,</span><span style="line-height: 1.5;">que </span><span style="line-height: 1.5;">guardara y recibia los datos del texto plano en ese lugar</span><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">.</span></font></p> -<h2 id="link" name="link">Arrastrando Enlaces</h2> -<p>Los enlaces deben incluir los datos de los dos tipos, el primero debe ser URL utilizando el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/uri-list,</span><span style="line-height: 1.5;">y el segundo es URL utilizando el tipo </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain. </span><span style="line-height: 1.5;">Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:</span></p> -<pre>var dt = event.dataTransfer; -dt.setData("text/uri-list", "http://www.mozilla.org"); -dt.setData("text/plain", "http://www.mozilla.org"); -</pre> -<p>Es constumbre, establecer el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain de ultimo, </span><span style="line-height: 1.5;">, ya que es menos específico que el tipo de URI.</span></p> -<p>Note que el tipo de URL <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">uri-list </span><span style="line-height: 1.5;">es con una "i", no una "L"</span></p> -<p><span style="line-height: 1.5;">Note that the URL type is </span><code style="font-size: 14px;">uri-list</code><span style="line-height: 1.5;"> with an 'I', not with an 'L'.</span></p> -<p>To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The <code>text/plain</code> version of the drag data should include all links but should not include the comments.</p> -<p>For example:</p> -<pre>http://www.mozilla.org -#A second link -http://www.xulplanet.com -</pre> -<p>This sample <code>text/uri-list</code> data contains two links and a comment.</p> -<p>When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type <code>URL</code> may be used to refer to the first valid link within the data for the <code>text/uri-list</code> type. You should not add data using the <code>URL</code> type; attempting to do so will just set the value of the <code>text/uri-list</code> type instead.</p> -<pre>var url = event.dataTransfer.getData("URL"); -</pre> -<p>You may also see data using the <code>text/x-moz-url</code> type which is a Mozilla specific type. If it appears, it should be used before the <code>text/uri-list</code> type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:</p> -<pre>http://www.mozilla.org -Mozilla -http://www.xulplanet.com -XUL Planet -</pre> -<h2 id="html" name="html">Dragging HTML and XML</h2> -<p>HTML content may use the <code>text/html</code> type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the <code>innerHTML</code> property of an element.</p> -<p>XML content may use the <code>text/xml</code> type, but you should ensure that the data value is well-formed XML.</p> -<p>You may also include a plain text representation of the HTML or XML data using the <code>text/plain</code> type. The data should be just the text and should not include any of the source tags or attributes. For instance:</p> -<pre>var dt = event.dataTransfer; -dt.setData("text/html", "Hello there, <strong>stranger</strong>"); -dt.setData("text/plain", "Hello there, stranger"); -</pre> -<h2 id="file" name="file">Dragging Files</h2> -<p>A local file is dragged using the <code>application/x-moz-file</code> type with a data value that is an <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the <a href="/En/DragDrop/DataTransfer#mozSetDataAt.28.29" title="mozSetDataAt">mozSetDataAt</a> method to assign the data. Similarly, when retrieving the data, you must use the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method.</p> -<pre>event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0); -</pre> -<p>If possible, you may also include the file URL of the file using both the <code>text/uri-list</code> and/or <code>text/plain</code> types. These types should be added last so that the more specific <code>application/x-moz-file</code> type has higher priority.</p> -<p>Multiple files will be received during a drop as mutliple items in the data transfer. See <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a> for more details about this.</p> -<p>The following example shows how to create an area for receiving dropped files:</p> -<pre><listbox ondragenter="return checkDrag(event)" - ondragover="return checkDrag(event)" - ondrop="doDrop(event)"/> - -<script> -function checkDrag(event) -{ - return event.dataTransfer.types.contains("application/x-moz-file"); -} - -function doDrop(event) -{ - var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0); - if (file instanceof Components.interfaces.nsIFile) - event.currentTarget.appendItem(file.leafName); -} -</script> -</pre> -<p>In this example, the event returns false only if the data transfer contains the <code>application/x-moz-file</code> type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the <code>instanceof</code> operator is used here as the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method will return an <code>nsISupports</code> that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.</p> -<h2 id="image" name="image">Dragging Images</h2> -<p>Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the <code>text/uri-list</code> type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see <a class="internal" href="/en/data_URIs" title="en/The data URL scheme">the data URL scheme</a>.</p> -<p>As with other links, the data for the <code>text/plain</code> type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the <code>text/plain</code> data in this situation.</p> -<p>In chrome or other privileged code, you may also use the <code>image/jpeg</code>, <code>image/png</code> or <code>image/gif</code> types, depending on the type of image. The data should be an object which implements the <a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.</p> -<p>You should also include the <code>application/x-moz-file</code> type if the image is located on disk. In fact, this a common way in which image files are dragged.</p> -<p>It is important to set the data in the right order, from most specific to least specific. The image type such as <code>image/jpeg</code> should come first, followed by the <code>application/x-moz-file</code> type. Next, you should set the <code>text/uri-list</code> data and finally the <code>text/plain</code> data. For example:</p> -<pre>var dt = event.dataTransfer; -dt.mozSetDataAt("image/png", stream, 0); -dt.mozSetDataAt("application/x-moz-file", file, 0); -dt.setData("text/uri-list", imageurl); -dt.setData("text/plain", imageurl); -</pre> -<p>Note that the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.</p> -<h2 id="node" name="node">Dragging Nodes</h2> -<p>Nodes and elements in a document may be dragged using the <code>application/x-moz-node</code> type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.</p> -<p>You should always include a plain text alternative for the node.</p> -<h2 id="custom" name="custom">Dragging Custom Data</h2> -<p>You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.</p> -<h2 id="filestoos" name="filestoos">Dragging files to an operating system folder</h2> -<p>There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:</p> -<pre class="brush: js">// currentEvent is a given existing drag operation event - -currentEvent.dataTransfer.setData("text/x-moz-url", URL); -currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL); -currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName); -currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise', - new dataProvider(success,error), - 0, Components.interfaces.nsISupports); - -function dataProvider(){} - -dataProvider.prototype = { - QueryInterface : function(iid) { - if (iid.equals(Components.interfaces.nsIFlavorDataProvider) - || iid.equals(Components.interfaces.nsISupports)) - return this; - throw Components.results.NS_NOINTERFACE; - }, - getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) { - if (aFlavor == 'application/x-moz-file-promise') { - - var urlPrimitive = {}; - var dataSize = {}; - - aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize); - var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString)); - console.log("URL file orignal is = " + url); - - var namePrimitive = {}; - aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize); - var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString)); - - console.log("target filename is = " + name); - - var dirPrimitive = {}; - aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize); - var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile); - - console.log("target folder is = " + dir.path); - - var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile); - file.initWithPath(dir.path); - file.appendRelativePath(name); - - console.log("output final path is =" + file.path); - - // now you can write or copy the file yourself... - } - } -} -</pre> -<p>{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}</p> diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html deleted file mode 100644 index 4759cd6250..0000000000 --- a/files/es/web/api/htmlcanvaselement/toblob/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: HTMLCanvasElement.toBlob() -slug: Web/API/HTMLCanvasElement/toBlob -translation_of: Web/API/HTMLCanvasElement/toBlob ---- -<div> -<div> -<div>{{APIRef("Canvas API")}}</div> -</div> -</div> - -<p>EL metodo <strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del user agent. Si la propiedad <code>type</code> no se especifica el tipo de la imagen será <code>image/png</code>. La imagen creada tiene una resolución de 96dpi.<br> - El tercer argumento es usado con las imagenes <code>image/jpeg</code> para especificar la calidad de salida.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>void <em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var> -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt>callback</dt> - <dd>A callback function with the resulting {{domxref("Blob")}} object as a single argument.</dd> - <dt><code>type</code> {{optional_inline}}</dt> - <dd>A {{domxref("DOMString")}} indicating the image format. The default type is <code>image/png</code>.</dd> - <dt><code>encoderOptions</code> {{optional_inline}}</dt> - <dd>A {{jsxref("Number")}} between <code>0</code> and <code>1</code> indicating image quality if the requested type is <code>image/jpeg </code>or <code>image/webp</code>. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>None.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Getting_a_file_representing_the_canvas">Getting a file representing the canvas</h3> - -<p>Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas.</p> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); - -canvas.toBlob(function(blob) { - var newImg = document.createElement("img"), - url = URL.createObjectURL(blob); - - newImg.onload = function() { - // no longer need to read the blob so it's revoked - URL.revokeObjectURL(url); - }; - - newImg.src = url; - document.body.appendChild(newImg); -}); -</pre> - -<p>Note that here we're creating a PNG image; if you add a second parameter to the <code>toBlob()</code> call, you can specify the image type. For example, to get the image in JPEG format:</p> - -<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre> - -<div> -<h3 id="A_way_to_convert_a_canvas_to_an_ico_(Mozilla_only)">A way to convert a canvas to an ico (Mozilla only)</h3> - -<p>This uses <code>-moz-parse</code> to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.</p> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var d = canvas.width; -ctx = canvas.getContext("2d"); -ctx.beginPath(); -ctx.moveTo(d / 2, 0); -ctx.lineTo(d, d); -ctx.lineTo(0, d); -ctx.closePath(); -ctx.fillStyle = "yellow"; -ctx.fill(); - -function blobCallback(iconName) { - return function(b) { - var a = document.createElement("a"); - a.textContent = "Download"; - document.body.appendChild(a); - a.style.display = "block"; - a.download = iconName + ".ico"; - a.href = window.URL.createObjectURL(b); - } -} -canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', - '-moz-parse-options:format=bmp;bpp=32');</pre> -</div> - -<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3> - -<div class="note"> -<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p> -</div> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var d = canvas.width; -ctx = canvas.getContext("2d"); -ctx.beginPath(); -ctx.moveTo(d / 2, 0); -ctx.lineTo(d, d); -ctx.lineTo(0, d); -ctx.closePath(); -ctx.fillStyle = "yellow"; -ctx.fill(); - -function blobCallback(iconName) { - return function(b) { - var r = new FileReader(); - r.onloadend = function () { - // r.result contains the ArrayBuffer. - Cu.import('resource://gre/modules/osfile.jsm'); - var writePath = OS.Path.join(OS.Constants.Path.desktopDir, - iconName + '.ico'); - var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), - {tmpPath:writePath + '.tmp'}); - promise.then( - function() { - console.log('successfully wrote file'); - }, - function() { - console.log('failure writing file') - } - ); - }; - r.readAsArrayBuffer(b); - } -} - -canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', - '-moz-parse-options:format=bmp;bpp=32');</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>A low performance polyfill based on toDataURL.</p> - -<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) { - Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { - value: function (callback, type, quality) { - - var binStr = atob( this.toDataURL(type, quality).split(',')[1] ), - len = binStr.length, - arr = new Uint8Array(len); - - for (var i=0; i<len; i++ ) { - arr[i] = binStr.charCodeAt(i); - } - - callback( new Blob( [arr], {type: type || 'image/png'} ) ); - } - }); -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop('19')}}</td> - <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Image quality parameter (jpeg)</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop('25')}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Image quality parameter (jpeg)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("25")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Chrome does not implement this feature yet. See <a href="http://crbug.com/67587">bug 67587</a>.</p> - -<p>[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> - <li>{{domxref("Blob")}}</li> -</ul> diff --git a/files/es/web/api/mediasource/index.html b/files/es/web/api/mediasource/index.html deleted file mode 100644 index 2f5ff914c9..0000000000 --- a/files/es/web/api/mediasource/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: MediaSource -slug: Web/API/MediaSource -translation_of: Web/API/MediaSource ---- -<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p> - -<p>El <strong><code>MediaSource</code></strong> interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un <code>MediaSource</code> objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt> - <dd>construye y retorna un <code>MediaSource</code> objeto sin asociar un recurso con buffers.</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this <code>MediaSource</code>.</dd> - <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.</dd> - <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt> - <dd>Returns an enum representing the state of the current <code>MediaSource</code>, whether it is not currently attached to a media element (<code>closed</code>), attached and ready to receive {{domxref("SourceBuffer")}} objects (<code>open</code>), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd> - <dt>{{domxref("MediaSource.duration")}}</dt> - <dd>Gets and sets the duration of the current media being presented.</dd> -</dl> - -<dl> -</dl> - -<dl> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt> - <dd>Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the <code>MediaSource</code>'s {{domxref("SourceBuffers")}} list.</dd> - <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt> - <dd>Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this <code>MediaSource</code> object.</dd> - <dt>{{domxref("MediaSource.endOfStream()")}}</dt> - <dd>Signals the end of the stream.</dd> - <dt> - <h2 id="Static_methods">Static methods</h2> - </dt> - <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt> - <dd>Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">viewed live here</a> (you can also <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">download the source</a> for further investigation.)</p> - -<pre class="brush: js">var video = document.querySelector('video'); - -var assetURL = 'frag_bunny.mp4'; -// Need to be specific for Blink regarding codecs -// ./mp4info frag_bunny.mp4 | grep Codec -var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; - -if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { - var mediaSource = new MediaSource; - //console.log(mediaSource.readyState); // closed - video.src = URL.createObjectURL(mediaSource); - mediaSource.addEventListener('sourceopen', sourceOpen); -} else { - console.error('Unsupported MIME type or codec: ', mimeCodec); -} - -function sourceOpen (_) { - //console.log(this.readyState); // open - var mediaSource = this; - var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); - fetchAB(assetURL, function (buf) { - sourceBuffer.addEventListener('updateend', function (_) { - mediaSource.endOfStream(); - video.play(); - //console.log(mediaSource.readyState); // ended - }); - sourceBuffer.appendBuffer(buf); - }); -}; - -function fetchAB (url, cb) { - console.log(url); - var xhr = new XMLHttpRequest; - xhr.open('get', url); - xhr.responseType = 'arraybuffer'; - xhr.onload = function () { - cb(xhr.response); - }; - xhr.send(); -};</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td> - <td>{{Spec2('Media Source Extensions')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>23</td> - <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("42.0")}}</td> - <td>11<sup>[2]</sup></td> - <td>15</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4.4</td> - <td> - <p>{{CompatNo}}</p> - </td> - <td>{{CompatNo}}</td> - <td>11</td> - <td>30</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p> - -<p>[2] Only works on Windows 8+.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("SourceBuffer")}}</li> - <li>{{domxref("SourceBufferList")}}</li> -</ul> diff --git a/files/es/web/api/webvtt_api/index.html b/files/es/web/api/webvtt_api/index.html deleted file mode 100644 index 7a54969a31..0000000000 --- a/files/es/web/api/webvtt_api/index.html +++ /dev/null @@ -1,903 +0,0 @@ ---- -title: Formato de pistas de texto para la web (WebVTT) -slug: Web/API/WebVTT_API -translation_of: Web/API/WebVTT_API ---- -<div>{{DefaultAPISidebar("WebVTT")}}</div> - -<p><span class="seoSummary"><strong>El formato de pistas de texto para la web (WebVTT)</strong> es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}.</span> El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.</p> - -<h2 id="Archivos_WebVTT">Archivos WebVTT</h2> - -<p>El tipo MIME de los archivos WebVTT es <code>text/vtt</code>.</p> - -<p>Un archivo WebVTT (<code>.vtt</code>) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:</p> - -<pre class="notranslate">WEBVTT - -00:01.000 --> 00:04.000 -- Nunca bebas nitrógeno líquido. - -00:05.000 --> 00:09.000 -- Podría perforar tu estómago. -- Podrías morir. - -NOTE Esta es la última línea en el archivo -</pre> - -<h2 id="Estructura_WebVTT">Estructura WebVTT</h2> - -<p>La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:</p> - -<ul> - <li>Una marca de orden de bytes (BOM) opcional.</li> - <li>La cadena de texto "<code>WEBVTT</code>".</li> - <li>Un encabezado de texto opcional a la derecha de <code>WEBVTT</code>. - <ul> - <li>Debe haber al menos un espacio después de <code>WEBVTT</code>.</li> - <li>Podrías usarlo para añadir una descripción al archivo.</li> - <li>Puedes usar cualquier cosa en el encabezado de texto excepto saltos de línea o la cadena "<code>--></code>".</li> - </ul> - </li> - <li>Una línea en blanco, que es equivalente a dos saltos de línea consecutivos.</li> - <li>Cero o más apuntes o comentarios.</li> - <li>Cero o más líneas en blanco.</li> -</ul> - -<h5 id="Ejemplo_1_-_El_archivo_WebVTT_más_simple_posible">Ejemplo 1 - El archivo WebVTT más simple posible</h5> - -<pre class="eval notranslate">WEBVTT -</pre> - -<h5 id="Ejemplo_2_-_Archivo_WebVTT_muy_simple_con_un_encabezado_de_texto">Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto</h5> - -<pre class="eval notranslate">WEBVTT - Este archivo no tiene anotaciones. -</pre> - -<h5 id="Ejemplo_3_-_Ejemplo_de_un_archivo_WebVTT_común_con_encabezado_y_anotaciones">Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones</h5> - -<pre class="eval notranslate">WEBVTT - Este archivo tiene anotaciones. - -14 -00:01:14.815 --> 00:01:18.114 -- ¿Qué? -- ¿Dónde estamos ahora? - -15 -00:01:18.171 --> 00:01:20.991 -- Este es el país de los murciélagos grandes. - -16 -00:01:21.058 --> 00:01:23.868 -- [ Murciélagos chillando ] -- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos. -</pre> - -<h3 id="Estructura_interna_de_un_archivo_WebVTT">Estructura interna de un archivo WebVTT</h3> - -<p>Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.</p> - -<pre class="notranslate">WEBVTT - -00:01.000 --> 00:04.000 -- Nunca bebas nitrógeno líquido. - -00:05.000 --> 00:09.000 -- Podría perforar tu estómago. -- Podrías morir. - -NOTE Esta es la última línea en el archivo</pre> - -<p>En el caso de cada anotación:</p> - -<ul> - <li>La primera línea se empieza con un tiempo, que es el tiempo en el que se empieza a mostrar el téxto que aparece debajo.</li> - <li>En la misma línea, tenemos una cadena de texto "<code>--></code>".</li> - <li>Acabamos la línea con un segundo tiempo, que es el tiempo en el que se termina de mostrar el texto asociado.</li> - <li>Nosotros podemos entonces tener una o más líneas que empiezan con un guión, cada una de ellas conteniendo parte de la pista de texto para mostrar.</li> -</ul> - -<p>También podemos poner comentarios en nuestro archivo <code>.vtt</code>, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena <code>NOTE</code>. Aprenderas más sobre eso en la siguiente sección.</p> - -<p>Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.</p> - -<h2 id="Comentarios_en_WebVTT">Comentarios en WebVTT</h2> - -<p>Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.</p> - -<p>Un comentario no puede contener la cadena de texto "<code>--></code>", el símbolo &, o el signo de menor que (<). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo <code>&amp;</code> para el símbolo &, y &lt; para menor que (<). Tambien es recomendado que uses la secuencia de escape de mayor que <code>&gt;</code> en vez de el simbo de mayor que (<code>></code>) para evitar la confusión con etiquetas.</p> - -<p>Un comentario consiste en tres partes:</p> - -<ul> - <li>La cadena de texto <code>NOTE</code>.</li> - <li>Un espacio o un salto de línea.</li> - <li>Cero o más caracteres que no sean los indicados arriba.</li> -</ul> - -<h5 id="Ejemplo_4_-_Ejemplo_común_de_WebVTT">Ejemplo 4 - Ejemplo común de WebVTT</h5> - -<pre class="eval notranslate">NOTE Esto es un comentario -</pre> - -<h5 id="Ejemplo_5_-_Comentario_multilínea">Ejemplo 5 - Comentario multilínea</h5> - -<pre class="eval notranslate">NOTE -Un comentario que está ocupando -más de una línea. - -NOTE También puedes hacer un comentario -que ocupe más de una línea de esta manera. -</pre> - -<h5 id="Ejemplo_6_-_Uso_común_de_comentarios">Ejemplo 6 - Uso común de comentarios</h5> - -<pre class="eval notranslate">WEBVTT - Traducción de la película que me gusta - -NOTE -Esta traducción esta hecha por Kyle para que -Algunos amigos puedan verla con sus padres. - -1 -00:02:15.000 --> 00:02:20.000 -- Ta en kopp varmt te. -- Det är inte varmt. - -2 -00:02:20.000 --> 00:02:25.000 -- Har en kopp te. -- Det smakar som te. - -NOTE Esta ultima línea puede no estar bien traducida. - -3 -00:02:25.000 --> 00:02:30.000 -- Ta en kopp -</pre> - -<h2 id="Estilizando_anotaciones_WebVTT">Estilizando anotaciones WebVTT</h2> - -<p>Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.</p> - -<h3 id="Dentro_del_CSS_del_sitio">Dentro del CSS del sitio</h3> - -<pre class="brush: css notranslate">video::cue { - background-image: linear-gradient(to bottom, dimgray, lightgray); - color: papayawhip; -} - -video::cue(b) { - color: peachpuff; -} -</pre> - -<p>Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con <code>"papayawhip"</code> como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color <code>"peachpuff"</code>.</p> - -<p>El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.</p> - -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> - <track default src="track.vtt"> -</video> -</pre> - -<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3> - -<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> - -<pre class="notranslate">WEBVTT - -STYLE -::cue { - background-image: linear-gradient(to bottom, dimgray, lightgray); - color: papayawhip; -} -/* Style blocks cannot use blank lines nor "dash dash greater than" */ - -NOTE comment blocks can be used between style blocks. - -STYLE -::cue(b) { - color: peachpuff; -} - -00:00:00.000 --> 00:00:10.000 -- Hello <b>world</b>. - -NOTE style blocks cannot appear after the first cue.</pre> - -<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> - -<pre class="notranslate">WEBVTT - -1 -00:00.000 --> 00:02.000 -That’s an, an, that’s an L! - -crédit de transcription -00:04.000 --> 00:05.000 -Transcrit par Célestes™ -</pre> - -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } -::cue(#crédit\ de\ transcription) { color: red; }</pre> - -<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> - -<pre class="notranslate">WEBVTT - -00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% -Where did he go? - -00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% -I think he went down this lane. - -00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% -What are you waiting for?</pre> - -<h2 id="WebVTT_cues">WebVTT cues</h2> - -<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p> - -<ul> - <li>An optional cue identifier followed by a newline.</li> - <li>Cue timings.</li> - <li>Optional cue settings with at least one space before the first and between each setting.</li> - <li>One or more newlines.</li> - <li>The cue payload text.</li> -</ul> - -<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> - -<pre class="eval notranslate">1 - Title Crawl -00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start -Some time ago in a place rather distant....</pre> - -<h3 id="Cue_identifier">Cue identifier</h3> - -<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>-->"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p> - -<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> - -<pre class="eval notranslate">1 - Title Crawl</pre> - -<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> - -<pre class="eval notranslate">WEBVTT - -1 -00:00:22.230 --> 00:00:24.606 -This is the first subtitle. - -2 -00:00:30.739 --> 00:00:34.074 -This is the second. - -3 -00:00:34.159 --> 00:00:35.743 -Third -</pre> - -<h3 id="Cue_timings">Cue timings</h3> - -<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p> - -<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p> - -<p>Each cue timing contains five components:</p> - -<ul> - <li>Timestamp for start time.</li> - <li>At least one space.</li> - <li>The string "<code>-->".</code></li> - <li>At least one space.</li> - <li>Timestamp for end time. - <ul> - <li>Which must be greater than the start time.</li> - </ul> - </li> -</ul> - -<p>The timestamps must be in one of two formats:</p> - -<ul> - <li><code>mm:ss.ttt</code></li> - <li><code>hh:mm:ss.ttt</code></li> -</ul> - -<p>Where the components are defined as follows:</p> - -<ul> - <li><code>hh</code> is hours. - - <ul> - <li>Must be at least two digits.</li> - <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li> - </ul> - </li> - <li><code>mm</code> is minutes. - <ul> - <li>Must be between 00 and 59 inclusive.</li> - </ul> - </li> - <li><code>ss</code> is seconds. - <ul> - <li>Must be between 00 and 59 inclusive.</li> - </ul> - </li> - <li><code>ttt</code> is miliseconds. - <ul> - <li>Must be between 000 and 999 inclusive.</li> - </ul> - </li> -</ul> - -<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> - -<pre class="eval notranslate">00:00:22.230 --> 00:00:24.606 -00:00:30.739 --> 00:00:34.074 -00:00:34.159 --> 00:00:35.743 -00:00:35.827 --> 00:00:40.122</pre> - -<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> - -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 -00:00:05.000 --> 00:01:00.000 -00:00:30.000 --> 00:00:50.000</pre> - -<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> - -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 -00:00:10.000 --> 00:01:00.581 -00:01:00.581 --> 00:02:00.100 -00:02:01.000 --> 00:02:01.000</pre> - -<h3 id="Cue_settings">Cue settings</h3> - -<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p> - -<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p> - -<ul> - <li><strong>vertical</strong> - - <ul> - <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="2">Table 1 - vertical values</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>vertical:rl</code></th> - <td>writing direction is right to left</td> - </tr> - <tr> - <th><code>vertical:lr</code></th> - <td>writing direction is left to right</td> - </tr> - </tbody> - </table> - </li> - <li><strong>line</strong> - <ul> - <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li> - <li>Value can be a line number. - <ul> - <li>The line height is the height of the first line of the cue as it appears on the video.</li> - <li>Positive numbers indicate top down.</li> - <li>Negative numbers indicate bottom up.</li> - </ul> - </li> - <li>Or value can be a percentage. - <ul> - <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - </li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 2 - line examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>line:0</code></th> - <td>top</td> - <td>right</td> - <td>left</td> - </tr> - <tr> - <th><code>line:-1</code></th> - <td>bottom</td> - <td>left</td> - <td>right</td> - </tr> - <tr> - <th><code>line:0%</code></th> - <td>top</td> - <td>right</td> - <td>left</td> - </tr> - <tr> - <th><code>line:100%</code></th> - <td>bottom</td> - <td>left</td> - <td>right</td> - </tr> - </tbody> - </table> - </li> - <li><strong>position</strong> - <ul> - <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li> - <li>Value is a percentage.</li> - <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 3 - position examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>position:0%</code></th> - <td>left</td> - <td>top</td> - <td>top</td> - </tr> - <tr> - <th><code>position:100%</code></th> - <td>right</td> - <td>bottom</td> - <td>bottom</td> - </tr> - </tbody> - </table> - </li> - <li><strong>size</strong> - <ul> - <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li> - <li>Value is a percentage.</li> - <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 4 - size examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>size:100%</code></th> - <td>full width</td> - <td>full height</td> - <td>full height</td> - </tr> - <tr> - <th><code>size:50%</code></th> - <td>half width</td> - <td>half height</td> - <td>half height</td> - </tr> - </tbody> - </table> - </li> - <li><strong>align</strong> - <ul> - <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 5 - align values</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>align:start</code></th> - <td>left</td> - <td>top</td> - <td>top</td> - </tr> - <tr> - <th><code>align:middle</code></th> - <td>centred horizontally</td> - <td>centred vertically</td> - <td>centred vertically</td> - </tr> - <tr> - <th><code>align:end</code></th> - <td>right</td> - <td>bottom</td> - <td>bottom</td> - </tr> - </tbody> - </table> - </li> -</ul> - -<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5> - -<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> - -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 -00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start -00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start -00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end -</pre> - -<h3 id="Cue_payload">Cue payload</h3> - -<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> - -<p>A cue text payload cannot contain the string "<code>-->"</code>, the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p> - -<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p> - -<table> - <thead> - <tr> - <th colspan="3">Table 6 - Escape sequences</th> - </tr> - </thead> - <tbody> - <tr> - <th>Name</th> - <th>Character</th> - <th>Escape Sequence</th> - </tr> - <tr> - <td>Ampersand</td> - <td>&</td> - <td><code>&amp;</code></td> - </tr> - <tr> - <td>Less-than</td> - <td><</td> - <td><code>&lt;</code></td> - </tr> - <tr> - <td>Greater-than</td> - <td>></td> - <td><code>&gt;</code></td> - </tr> - <tr> - <td>Left-to-right mark</td> - <td></td> - <td><code>&lrm;</code></td> - </tr> - <tr> - <td>Right-to-left mark</td> - <td></td> - <td><code>&rlm;</code></td> - </tr> - <tr> - <td>Non-breaking space</td> - <td><code> </code></td> - <td><code>&nbsp;</code></td> - </tr> - </tbody> -</table> - -<h3 id="Cue_payload_text_tags">Cue payload text tags</h3> - -<p>There are a number of tags, such as <code><bold></code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p> - -<ul> - <li><strong>Timestamp tag</strong> - - <ul> - <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> - </ul> - - <div> - <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - - <pre class="eval notranslate">1 -00:16.500 --> 00:18.500 -When the moon <00:17.500>hits your eye - -1 -00:00:18.500 --> 00:00:20.500 -Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie - -1 -00:00:20.500 --> 00:00:21.500 -That's <00:00:21.000>amore -</pre> - </div> - </li> -</ul> - -<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> - -<ul> - <li><strong>Class tag</strong> (<code><c></c></code>) - - <ul> - <li>Style the contained text using a CSS class.</li> - </ul> - - <div> - <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - - <pre class="notranslate"><c.classname>text</c></pre> - </div> - </li> - <li><strong>Italics tag</strong> (<code><i></i></code>) - <ul> - <li>Italicize the contained text.</li> - </ul> - - <div> - <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - - <pre class="notranslate"><i>text</i></pre> - </div> - </li> - <li><strong>Bold tag</strong> (<code><b></b></code>) - <ul> - <li>Bold the contained text.</li> - </ul> - - <div> - <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - - <pre class="notranslate"><b>text</b></pre> - </div> - </li> - <li><strong>Underline tag</strong> (<code><u></u></code>) - <ul> - <li>Underline the contained text.</li> - </ul> - - <div> - <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - - <pre class="notranslate"><u>text</u></pre> - </div> - </li> - <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) - <ul> - <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> - </ul> - - <div> - <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> - </div> - </li> - <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) - <ul> - <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> - </ul> - - <div> - <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> - </div> - </li> - <li><strong>Voice tag</strong> (<code><v></v></code>) - <ul> - <li>Similar to class tag, also used to style the contained text using CSS.</li> - </ul> - - <div> - <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - - <pre class="notranslate"><v Bob>text</v></pre> - </div> - </li> -</ul> - -<h2 id="Interfaces">Interfaces</h2> - -<p>There are two interfaces or APIs used in WebVTT which are:</p> - -<h3 id="VTTCue_interface">VTTCue interface</h3> - -<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p> - -<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; -enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; -enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; -enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; -enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)] -interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> { - attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>; - attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>; - attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>; - <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>(); -};</pre> - -<h3 id="VTT_Region_interface">VTT Region interface</h3> - -<p>This is the second interface in WebVTT API.</p> - -<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] -interface <dfn>VTTRegion</dfn> { - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; - attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>; -};</pre> - -<h2 id="Methods_and_properties">Methods and properties</h2> - -<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p> - -<ul style="list-style-type: circle;"> - <li> - <h3 id="VTTCue">VTTCue</h3> - - <ul> - <li>The methods which are available in this interface are: - <ul style="list-style-type: circle;"> - <li>GetCueAsHTML to get the HTML of that Cue.</li> - <li>VTT Constructor for creating new objects of Cues.</li> - <li>Autokeyword.</li> - <li>DirectionSetting: to set the direction of caption or text in a file.</li> - <li>LineAlignment: to adjust the line alignment.</li> - <li>PositionAlignSetting: to adjust the position of text.</li> - </ul> - </li> - </ul> - </li> - <li> - <h3 id="VTTRegion">VTTRegion</h3> - - <ul> - <li>The methods used for region are listed below along with description of their functionality: - <ul style="list-style-type: circle;"> - <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li> - <li>VTT Region Constructor: for construction of new VTT Regions.</li> - </ul> - </li> - </ul> - </li> -</ul> - -<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2> - -<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p> - -<ol> - <li>Open a notepad.</li> - <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li> -</ol> - -<pre class="notranslate">WEBVTT</pre> - -<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> - -<pre class="notranslate">00:01.000 --> 00:05.000</pre> - -<ol> - <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> - <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li> -</ol> - -<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2> - -<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p> - -<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> - -<pre class="notranslate">WEBVTT - -04:02.500 --> 04:05.000 -J’ai commencé le basket à l'âge de 13, 14 ans - -04:05.001 --> 04:07.800 -Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier</pre> - -<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code><i></code> tag is for italics.</p> - -<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p> - -<ul> - <li>Lang (Lanugage): e.g., p:lang(it).</li> - <li>Link: e.g., a:link.</li> - <li>Nth-last-child: e.g., p:nth-last-child(2).</li> - <li>Nth-child(n): e.g., p:nth-child(2).</li> -</ul> - -<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3> - -<div> - - -<p>{{Compat("api.VTTCue", 0)}}</p> - -<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3> - -<div> - - -<p>{{Compat("api.TextTrack", 0)}}</p> - -<h3 id="Notes">Notes</h3> -</div> -</div> - -<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p> - -<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p> - -<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p> diff --git a/files/es/web/api/window/domcontentloaded_event/index.html b/files/es/web/api/window/domcontentloaded_event/index.html deleted file mode 100644 index 0659abde6f..0000000000 --- a/files/es/web/api/window/domcontentloaded_event/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/API/Window/DOMContentLoaded_event -translation_of: Web/API/Window/DOMContentLoaded_event -original_slug: Web/Events/DOMContentLoaded ---- -<p>El evento <code>DOMContentLoaded</code> es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para finalizar la carga. Un evento muy diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> cuando <code>DOMContentLoaded</code> sería mucho más apropiado, así que úsalo con cuidado.</p> - -<p>JavaScript síncrono pausa el parseo del DOM.</p> - -<p>También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.</p> - -<h2 id="Speeding_up">Speeding up</h2> - -<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="width: 120px; text-align: right; float: left;">Specification</dt> - <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> - <dt style="width: 120px; text-align: right; float: left;">Interface</dt> - <dd style="margin: 0px 0px 0px 120px;">Event</dd> - <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes</dd> - <dt style="width: 120px; text-align: right; float: left;">Cancelable</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes (although specified as a simple event that isn't cancelable)</dd> - <dt style="width: 120px; text-align: right; float: left;">Target</dt> - <dd style="margin: 0px 0px 0px 120px;">Document</dd> - <dt style="width: 120px; text-align: right; float: left;">Default Action</dt> - <dd style="margin: 0px 0px 0px 120px;">None.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Example">Example</h2> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); -</script> -</pre> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); - -for(var i=0; i<1000000000; i++) -{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. -</script> -</pre> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> - <td>9.0<sup>[2]</sup></td> - <td>9.0</td> - <td>3.1<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p> - -<p>[2] Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p> - -<h2 id="Related_Events">Related Events</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/es/web/api/worker/postmessage/index.html b/files/es/web/api/worker/postmessage/index.html deleted file mode 100644 index c47fe400fc..0000000000 --- a/files/es/web/api/worker/postmessage/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Worker.postMessage() -slug: Web/API/Worker/postMessage -translation_of: Web/API/Worker/postMessage ---- -<p>{{APIRef("Web Workers API")}}</p> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> posee un metodo llamado <code><strong>postMessage()</strong></code> el cual envia un mensaje al ambito del worker. Este metodo acepta un parametro, el cual es un dato enviado al worker. El dato puede ser un valor o objeto controlado por el algoritmo strctured clone (incluye referencias ciclicas).</p> - -<p>El Worker puede enviar de vuelta información al hilo que lo genero usando el metodo {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><em>aMessage</em></dt> - <dd>The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm, which includes cyclical references.</dd> - <dt><em>transferList</em> {{optional_inline}}</dt> - <dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and it becomes available only to the worker it was sent to.</dd> - <dd>Only {{domxref("MessagePort")}} and {{domxref("ArrayBuffer")}} objects can be transferred.</dd> -</dl> - -<h3 id="Returns">Returns</h3> - -<p>Void.</p> - -<h2 id="Example">Example</h2> - -<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (<code>first</code> and <code>second</code>) have their values changed, {{event("change")}} events invoke <code>postMessage()</code> to send the value of both inputs to the current worker.</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -} - -second.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -} -</pre> - -<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" dir="ltr" href="mailto:aguilahorus@gmail.com">run dedicated worker</a>).</p> - -<div class="note"> -<p><strong>Note</strong>: <code>postMessage()</code> can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.</p> -</div> - -<h2 id="Transfer_Example">Transfer Example</h2> - -<p>This example is of a Firefox addon that transfers an ArrayBuffer from the main thread to the ChromeWorker, and then the ChromeWorker trasnfers it back to the main thread.</p> - -<h4 id="Main_thread_code">Main thread code:</h4> - -<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js'); - -function handleMessageFromWorker(msg) { - console.log('incoming message from worker, msg:', msg); - switch (msg.data.aTopic) { - case 'do_sendMainArrBuff': - sendMainArrBuff(msg.data.aBuf) - break; - default: - throw 'no aTopic on incoming message to ChromeWorker'; - } -} - -myWorker.addEventListener('message', handleMessageFromWorker); - -// Ok lets create the buffer and send it -var arrBuf = new ArrayBuffer(8); -console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength); - -myWorker.postMessage( - { - aTopic: 'do_sendWorkerArrBuff', - aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below - }, - [ - arrBuf // The array buffer we created 9 lines above - ] -); - -console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength); -</pre> - -<h4 id="Worker_code">Worker code</h4> - -<pre class="brush: js">self.onmessage = function (msg) { - switch (msg.data.aTopic) { - case 'do_sendWorkerArrBuff': - sendWorkerArrBuff(msg.data.aBuf) - break; - default: - throw 'no aTopic on incoming message to ChromeWorker'; - } -} - -function sendWorkerArrBuff(aBuf) { - console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength); - - self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]); - - console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength); -} -</pre> - -<h4 id="Output_logged">Output logged</h4> - -<pre>arrBuf.byteLength pre transfer: 8 bootstrap.js:40 -arrBuf.byteLength post transfer: 0 bootstrap.js:42 - -from worker, PRE send back aBuf.byteLength: 8 myWorker.js:5:2 - -incoming message from worker, msg: message { ... } bootstrap.js:20 -got back buf in main thread, aBuf.byteLength: 8 bootstrap.js:12 - -from worker, POST send back aBuf.byteLength: 0 myWorker.js:7:2</pre> - -<p>We see that byteLength goes to 0 as it is trasnferred. To see a fully working example of this Firefox demo addon see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> - <td>{{Spec2('Web Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0 [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0 [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Worker")}} interface it belongs to.</li> -</ul> diff --git a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html deleted file mode 100644 index 28675abd79..0000000000 --- a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Solicitudes síncronas y asíncronas -slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests -translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests ---- -<p><code>XMLHttpRequest</code> soporta solicitudes síncronas y asíncronas, pero la mas preferida es la asíncrona por razones de rendimiento</p> - -<p><span id="result_box" lang="es"><span>Las solicitudes síncronas bloquean la ejecución del código, mientras se procesa la solicitud, dejando a la pantalla congelada y dando una experiencia de usuario poco agradable</span></span></p> - -<h2 id="Peticiones_asíncronas">Peticiones asíncronas</h2> - -<p><span id="result_box" lang="es"><span>Si se utiliza <code>XMLHttpRequest</code> de forma asíncrona, recibirá una devolución de llamada cuando los datos se hayan recibido .</span> <span>Esto permite que el navegador continúe funcionando de forma normal mientras se procesa la solicitud.</span></span></p> - -<h3 id="Ejemplo_Enviar_un_archivo_a_la_consola"><span id="result_box" lang="es"><span>Ejemplo: Enviar un archivo a la consola</span></span></h3> - -<p><span class="short_text" id="result_box" lang="es"><span>Este es el uso más simple de la asíncronia </span></span><code>XMLHttpRequest</code>.</p> - -<pre class="brush: js">var xhr = new XMLHttpRequest(); -xhr.open("GET", "/bar/foo.txt", true); -xhr.onload = function (e) { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - console.log(xhr.responseText); - } else { - console.error(xhr.statusText); - } - } -}; -xhr.onerror = function (e) { - console.error(xhr.statusText); -}; -xhr.send(null); </pre> - -<p>En la linea 2, el ultimo parametro de <code>open()</code> , especifica <code>true</code> para indicar que la solicitud se tratara de forma asíncrona</p> - -<p>Line 3 creates an event handler function object and assigns it to the request's <code>onload</code> attribute. This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content. If an error occurred, an error message is displayed.</p> - -<p>Line 15 actually initiates the request. The callback routine is called whenever the state of the request changes.</p> - -<h3 id="Ejemplo_Creando_una_funcion_estandar_para_leer_archivos_externos.">Ejemplo: Creando una funcion estandar para leer archivos externos.</h3> - -<p>In some cases you must read many external files. This is a standard function which uses the <code>XMLHttpRequest</code> object asynchronously in order to switch the content of the read file to a specified listener.</p> - -<pre class="brush: js">function xhrSuccess () { this.callback.apply(this, this.arguments); } - -function xhrError () { console.error(this.statusText); } - -function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) { - var oReq = new XMLHttpRequest(); - oReq.callback = fCallback; - oReq.arguments = Array.prototype.slice.call(arguments, 2); - oReq.onload = xhrSuccess; - oReq.onerror = xhrError; - oReq.open("get", sURL, true); - oReq.send(null); -} -</pre> - -<p>Usage:</p> - -<pre class="brush: js">function showMessage (sMsg) { - alert(sMsg + this.responseText); -} - -loadFile("message.txt", showMessage, "New message!\n\n"); -</pre> - -<p>The signature of the utility function <em><strong>loadFile</strong></em> declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.</p> - -<p>Line 1 declares a function invoked when the XHR operation completes successfully. It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 7). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.</p> - -<p>Line 3 declares a function invoked when the XHR operation fails to complete successfully.</p> - -<p>Line 7 stores on the XHR object the success callback function given as the second argument to loadFile.</p> - -<p>Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.</p> - -<p>Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes. </p> - -<p>Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.</p> - -<p>Line 11 specifies <code>true</code> for its third parameter to indicate that the request should be handled asynchronously.</p> - -<p>Line 12 actually initiates the request.</p> - -<h3 id="Example_using_a_timeout">Example: using a timeout</h3> - -<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p> - -<pre class="brush: js">function loadFile(sUrl, timeout, callback){ - - var args = arguments.slice(3); - var xhr = new XMLHttpRequest(); - xhr.ontimeout = function () { - console.error("The request for " + url + " timed out."); - }; - xhr.onload = function() { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - callback.apply(xhr, args); - } else { - console.error(xhr.statusText); - } - } - }; - xhr.open("GET", url, true); - xhr.timeout = timeout; - xhr.send(null); -}</pre> - -<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p> - -<p>Usage:</p> - -<pre class="brush: js">function showMessage (sMsg) { - alert(sMsg + this.responseText); -} - -loadFile("message.txt", 2000, showMessage, "New message!\n"); -</pre> - -<p>Here, we're specifying a timeout of 2000 ms.</p> - -<div class="note"> -<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p> -</div> - -<h2 id="Synchronous_request">Synchronous request</h2> - -<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> - -<p>In rare cases, the use of a synchronous method is preferable to an asynchronous one.</p> - -<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3> - -<p>This example demonstrates how to make a simple synchronous request.</p> - -<pre class="brush: js">var request = new XMLHttpRequest(); -request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous -request.send(null); - -if (request.status === 200) { - console.log(request.responseText); -} -</pre> - -<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p> - -<p>Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p> - -<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3> - -<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>.</p> - -<p><code><strong>example.html</strong></code> (the main page):</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>MDN Example</title> -<script type="text/javascript"> - var worker = new Worker("myTask.js"); - worker.onmessage = function(event) { - alert("Worker said: " + event.data); - }; - - worker.postMessage("Hello"); -</script> -</head> -<body></body> -</html> -</pre> - -<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en/DOM/XMLHttpRequest" title="/en/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p> - -<pre>Hello World!! -</pre> - -<p><code><strong>myTask.js</strong></code> (the <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>):</p> - -<pre class="brush: js">self.onmessage = function (event) { - if (event.data === "Hello") { - var xhr = new XMLHttpRequest(); - xhr.open("GET", "myFile.txt", false); // synchronous request - xhr.send(null); - self.postMessage(xhr.responseText); - } -}; -</pre> - -<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div> - -<p>It could be useful in order to interact in background with the server or to preload some content. See <a class="internal" href="/En/DOM/Using_web_workers" title="en/Using DOM workers">Using web workers</a> for examples and details.</p> - -<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3> - -<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en/DOM/window.onunload" title="en/DOM/window.onunload"><code>window.onunload</code></a> and <a class="internal" href="/en/DOM/window.onbeforeunload" title="en/DOM/window.onbeforeunload"><code>window.onbeforeunload</code></a> events. The <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these usecases typically while delivering a good UX.</p> - -<p><span>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.</span></p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - var client = new XMLHttpRequest(); - client.open("POST", "/log", false); // third parameter indicates sync xhr. :( - client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); - client.send(analyticsData); -} -</pre> - -<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p> - -<p>The following example shows a theoretical analytics code pattern that submits data to a server using the by using the <strong><code>sendBeacon()</code></strong> method.</p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - navigator.sendBeacon("/log", analyticsData); -} -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a></li> - <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li> -</ul> - -<p>{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}</p> diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html deleted file mode 100644 index 8c1ead6ac3..0000000000 --- a/files/es/web/css/@document/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '@document' -slug: Web/CSS/@document -translation_of: Web/CSS/@document ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>The <strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.</p> - -<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") { - h1 { - color: green; - } -} -</pre> - -<ul> -</ul> - -<h2 id="Syntax">Syntax</h2> - - - -<p>Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:</p> - -<ul> - <li><code>url()</code>, which matches an exact URL.</li> - <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided.</li> - <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it).</li> - <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li> -</ul> - -<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can be optionally enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <em>must</em> be enclosed in quotes.</p> - -<p>Escaped values provided to the <code>regexp()</code> function must additionally be escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p> - -<div class="note"> -<p><strong>Note</strong>: There is a -moz-prefixed version of this property — <code>@-moz-document</code>. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example">Example</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@document url(http://www.w3.org/), - url-prefix(http://www.w3.org/Style/), - domain(mozilla.org), - regexp("https:.*") { - /* CSS rules here apply to: - - The page "http://www.w3.org/" - - Any page whose URL begins with "http://www.w3.org/Style/" - - Any page whose URL's host is "mozilla.org" - or ends with ".mozilla.org" - - Any page whose URL starts with "https:" */ - - /* Make the above-mentioned pages really ugly */ - body { - color: purple; - background: yellow; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.document")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li> -</ul> diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html deleted file mode 100644 index 16f74f3cb7..0000000000 --- a/files/es/web/css/background-position-x/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: background-position-x -slug: Web/CSS/background-position-x -translation_of: Web/CSS/background-position-x ---- -<div>{{CSSRef}}</div> - -<p>El <strong><code>background-position-x</code></strong> propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> - -<p class="hidden">El recurso para este ejemplo interactivo es almacenado en un repositorio GitHub. Si te gustaría contrubuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud.</p> - -<p>The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ -background-position-x: left; -background-position-x: center; -background-position-x: right; - -/* <percentage> values */ -background-position-x: 25%; - -/* <length> values */ -background-position-x: 0px; -background-position-x: 1cm; -background-position-x: 8em; - -/* Side-relative values */ -background-position-x: right 3px; -background-position-x: left 25%; - -/* Multiple values */ -background-position-x: 0px, center; - -/* Global values */ -background-position-x: inherit; -background-position-x: initial; -background-position-x: unset; -</pre> - -<p>The <code>background-position-x</code> property is specified as one or more values, separated by commas.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>left</code></dt> - <dd>Aligns the left edge of the background image with the left edge of the background position layer.</dd> - <dt><code>center</code></dt> - <dd>Aligns the center of the background image with the center of the background position layer.</dd> - <dt><code>right</code></dt> - <dd>Aligns the right edge of the background image with the right edge of the background position layer.</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the <em>right</em> edge of the background image is aligned with the <em>right</em> edge of the container, thus a value of 50% horizontally centers the background image.</dd> -</dl> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_example">Basic example</h3> - -<p>The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div></div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">div { - width: 300px; - height: 300px; - background-color: skyblue; - background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); - background-repeat: no-repeat; - background-position-x: center; - background-position-y: bottom 10px; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Basic_example', '100%', 300)}}</p> - -<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-position-x")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li> -</ul> diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html deleted file mode 100644 index 39e3ab03d7..0000000000 --- a/files/es/web/css/border-radius/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - CSS Borders - - CSS Property - - Reference -translation_of: Web/CSS/border-radius ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumen">Resumen</h2> - -<p>La propiedad CSS <code>border-radius</code> permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.</p> - -<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p> - -<p>El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.</p> - -<p>Esta propiedad es un <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">atajo</a> para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.</p> - -<div class="note">As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="twopartsyntaxbox">Formal grammar: [ <var><length></var> | <var><percentage></var> ]{1,4} [ / [ <var><length></var> | <var><percentage></var> ]{1,4}] ? - \------------------------------/ \-------------------------------/ - First radii Second radii (optional) -</pre> - -<pre><strong>The syntax of the first radius allows one to four values:</strong> -border-radius: <em>radius</em> -border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -<strong>The syntax of the second radius also allows one to four values</strong> -border-radius: (first radius values) / <em>radius</em> -border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -border-radius: inherit -</pre> - -<h3 id="Valores">Valores</h3> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"><em>radius</em></td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left</em></td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right</em></td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-right</em></td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-left</em></td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><code>inherit</code></td> - <td> </td> - <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td> - </tr> - </tbody> -</table> - -<h3 id="Valores_2">Valores</h3> - -<dl> - <dt><length></dt> - <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.</dd> - <dt><percentage></dt> - <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd> -</dl> - -<p>Por ejemplo:</p> - -<pre class="brush: css">border-radius: 1em/5em; - -/* es equivalente a: */ - -border-top-left-radius: 1em 5em; -border-top-right-radius: 1em 5em; -border-bottom-right-radius: 1em 5em; -border-bottom-left-radius: 1em 5em; -</pre> - -<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; - -/* es equivalente a: */ - -border-top-left-radius: 4px 2px; -border-top-right-radius: 3px 4px; -border-bottom-right-radius: 6px 2px; -border-bottom-left-radius: 3px 4px; -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; - /* the border will curve into a 'D' */ - border-radius: 10px 40px 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; - border-radius: 2em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; - border: ridge gold; - border-radius: 13em/3em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; - border-radius: 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; - border-radius: 50%; -</pre> - -<h2 id="Notas">Notas</h2> - -<ul> - <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li> - <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li> - <li>Old versions of WebKit handle multiple values differently, see below.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</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('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatGeckoDesktop("2.0") }}<br> - {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> - <td>4.0<br> - 0.2{{ property_prefix("-webkit") }}</td> - <td>9.0</td> - <td>10.5</td> - <td>5.0<br> - 3.0{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>yes</td> - <td>yes</td> - <td>yes</td> - <td>yes, but see below</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>yes</td> - <td>4.0</td> - <td>yes</td> - <td>yes</td> - <td>5.0</td> - </tr> - <tr> - <td>Percentages</td> - <td>yes<br> - was {{ non-standard_inline() }} (see below)</td> - <td>yes</td> - <td>yes</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>iOS Safari</th> - <th>Opera Mini</th> - <th>Opera Mobile</th> - <th>Android Browser</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.2{{ property_prefix("-webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>2.1{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Percentages</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="<percentage>_values"><code><percentage></code> values</h3> - -<ul> - <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> - <li>are buggy in Opera prior to 11.50</li> - <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li> - <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li> -</ul> - -<h3 id="Gecko_notes">Gecko notes</h3> - -<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p> - -<ul> - <li>changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> - <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li> -</ul> - -<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div> - -<h3 id="WebKit_notes">WebKit notes</h3> - -<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p> - -<ul> - <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li> - <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners - <pre>/* this is equivalent: */ - --webkit-border-radius: 40px 10px; - border-radius: 40px/10px; -</pre> - </li> -</ul> - -<h3 id="Opera_notes">Opera notes</h3> - -<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li> -</ul> - -<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p> diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html deleted file mode 100644 index 87b99bd61c..0000000000 --- a/files/es/web/css/cascade/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Introducción a CSS en cascada -slug: Web/CSS/Cascade -translation_of: Web/CSS/Cascade ---- -<div>{{CSSRef}}</div> - -<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div> - -<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2> - -<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p> - -<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p> - -<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p> - -<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> - -<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> - -<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> - -<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> - -<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> - -<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> - -<h3 id="Author_stylesheets">Author stylesheets</h3> - -<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> - -<h3 id="User_stylesheets">User stylesheets</h3> - -<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> - -<h2 id="Cascading_order">Cascading order</h2> - -<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> - -<ol> - <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> - <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: - <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">Origin</th> - <th scope="col">Importance</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>user agent</td> - <td>normal</td> - </tr> - <tr> - <td>2</td> - <td>user</td> - <td>normal</td> - </tr> - <tr> - <td>3</td> - <td>author</td> - <td>normal</td> - </tr> - <tr> - <td>4</td> - <td>animations</td> - <td></td> - </tr> - <tr> - <td>5</td> - <td>author</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>6</td> - <td>user</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>7</td> - <td>user agent</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>8</td> - <td>transitions</td> - <td></td> - </tr> - </tbody> - </table> - </li> - <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> -</ol> - -<h2 id="Resetting_styles">Resetting styles</h2> - -<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> - -<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> - -<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> - -<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> - -<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> - -<h2 id="Example">Example</h2> - -<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> - -<p><strong>User-agent CSS:</strong></p> - -<pre class="brush:css;">li { margin-left: 10px }</pre> - -<p><strong class="brush:css;">Author CSS 1:</strong></p> - -<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> - -<p><strong class="brush:css;">Author CSS 2:</strong></p> - -<pre class="brush:css;">@media screen { - li { margin-left: 3px } -} - -@media print { - li { margin-left: 1px } -} -</pre> - -<p><strong class="brush:css;">User CSS:</strong></p> - -<pre class="brush:css;">.specific { margin-left: 1em }</pre> - -<p><strong>HTML:</strong></p> - -<pre class="brush:html;"><ul> - <li class="specific">1<sup>st</sup></li> - <li>2<sup>nd</sup></li> -</ul> -</pre> - -<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> - -<p>So three declarations are in competition:</p> - -<pre class="brush:css;">margin-left: 0</pre> - -<pre class="brush:css;">margin-left: 3px</pre> - -<pre class="brush:css;">margin-left: 1px</pre> - -<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> - -<pre class="brush:css;">margin-left: 3px</pre> - -<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p> - -<h2 id="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("CSS4 Cascade")}}</td> - <td>{{Spec2("CSS4 Cascade")}}</td> - <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Cascade")}}</td> - <td>{{Spec2("CSS3 Cascade")}}</td> - <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> - <li>{{CSS_Key_Concepts}}</li> -</ul> diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html deleted file mode 100644 index a8b5253601..0000000000 --- a/files/es/web/css/clip-path/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: clip-path -slug: Web/CSS/clip-path -translation_of: Web/CSS/clip-path ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p> - -<pre class="brush:css no-line-numbers">/* Valores clave */ -clip-path: none; - -/* Valores de imagen */ -clip-path: url(resources.svg#c1); - -/* Valores de caja */ -clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; -clip-path: margin-box; -clip-path: border-box; -clip-path: padding-box; -clip-path: content-box; - -/* Valores geometricos */ -clip-path: inset(100px 50px); -clip-path: circle(50px at 0 100px); -clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - -/* Valores Geometricos y de caja combinados */ -clip-path: padding-box circle(50px at 0 100px); - -/* Valores globales */ -clip-path: inherit; -clip-path: initial; -clip-path: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>url()</code></dt> - <dd>Represents a URL referencing a clip path element.</dd> - <dt> </dt> - <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> - <dd>A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <code><geometry-box></code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd> - <dt><code><geometry-box></code></dt> - <dd>If specified in combination with a <code><basic-shape></code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: - <dl> - <dt><code>fill-box</code></dt> - <dd>Uses the object bounding box as reference box.</dd> - <dt><code>stroke-box</code></dt> - <dd>Uses the stroke bounding box as reference box.</dd> - <dt><code>view-box</code></dt> - <dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd> - <dt><code>margin-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd> - <dt><code>border-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd> - <dt><code>padding-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd> - <dt><code>content-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd> - </dl> - </dd> - <dt><code>none</code></dt> - <dd>There is no clipping path created.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<pre class="brush:css">/* inline SVG */ -.target { - clip-path: url(#c1); -} - -/* external SVG */ -.anothertarget { - clip-path: url(resources.svg#c1); -} - -/* circle */ -.circleClass { - clip-path: circle(15px at 20px 20px); -}</pre> - -<h2 id="Live_sample">Live sample</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="MDN logo"> -<svg height="0" width="0"> - <defs> - <clipPath id="cross"> - <rect y="110" x="137" width="90" height="90"/> - <rect x="0" y="110" width="90" height="90"/> - <rect x="137" y="0" width="90" height="90"/> - <rect x="0" y="0" width="90" height="90"/> - </clipPath> - </defs> -</svg> - -<select id="clipPath"> - <option value="none">none</option> - <option value="circle(100px at 110px 100px)">circle</option> - <option value="url(#cross)" selected>cross</option> - <option value="inset(20px round 20px)">inset</option> -</select> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#clipped { - margin-bottom: 20px; - clip-path: url(#cross); -} -</pre> - -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); -clipPathSelect.addEventListener("change", function (evt) { - document.getElementById("clipped").style.clipPath = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p> - -<h2 id="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("CSS Masks", "#the-clip-path", 'clip-path')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>Extends its application to HTML elements</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition (applies to SVG elements only)</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.properties.clip-path")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li> - <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li> - <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> - <li>{{SVGAttr("clip-path")}} SVG attribute</li> -</ul> diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index 81f1e41608..0000000000 --- a/files/es/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Probando media queries -slug: Web/CSS/Media_Queries/Testing_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries -original_slug: Web/Guide/CSS/probando_media_queries ---- -<p>{{SeeCompatTable}}</p> -<p>El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.</p> -<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Creando una media query list</h2> -<p>Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.</p> -<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p> -<pre>var mql = window.matchMedia("(orientation: portrait)"); -</pre> -<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Revisando el resultado de un query</h2> -<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p> -<pre class="brush: js">if (mql.matches) { - /* The device is currently in portrait orientation */ -} else { - /* The device is currently in landscape orientation */ -} -</pre> -<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Recibiendo notificaciones query</h2> -<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:</p> -<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)"); -mql.addListener(handleOrientationChange); -handleOrientationChange(mql); -</pre> -<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p> -<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p> -<pre class="brush: js">function handleOrientationChange(mql) { - if (mql.matches) { - /* The device is currently in portrait orientation */ - } else { - /* The device is currently in landscape orientation */ - } -} -</pre> -<h2 id="Ending_query_notifications" name="Ending_query_notifications">Terminando con las notificaciones query </h2> -<p>Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al <code>removeListener()</code> en el {{domxref("MediaQueryList") }}:</p> -<pre>mql.removeListener(handleOrientationChange); -</pre> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los navegadores</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>9</td> - <td>{{CompatGeckoDesktop("6.0") }}</td> - <td>10</td> - <td>12.1</td> - <td>5.1</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>3.0</td> - <td>{{CompatUnknown}}</td> - <td>10</td> - <td>12.1</td> - <td>5</td> - </tr> - </tbody> - </table> -</div> -<h2 id="See_also" name="See_also">Ver también</h2> -<ul> - <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> - <li>{{domxref("window.matchMedia()") }}</li> - <li>{{domxref("MediaQueryList") }}</li> - <li>{{domxref("MediaQueryListListener") }}</li> -</ul> diff --git a/files/es/web/html/attributes/autocomplete/index.html b/files/es/web/html/attributes/autocomplete/index.html deleted file mode 100644 index 553e9a293c..0000000000 --- a/files/es/web/html/attributes/autocomplete/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: The HTML autocomplete attribute -slug: Web/HTML/Attributes/autocomplete -translation_of: Web/HTML/Attributes/autocomplete -original_slug: Web/HTML/Atributos/autocomplete ---- -<p>El atributo <code>autocomplete</code> está disponible en varios tipos de {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. <span class="seoSummary"><code>autocomplete</code> </span> permite a los desarrolladores web especificar qué permisos si los hay <span class="seoSummary">{{Glossary("user agent")}} </span> debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.</p> - -<p> </p> - -<p>Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ingresados por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.</p> - -<p>Si un elemento {{HTMLElement("input")}} no tiene el atributo <code>autocomplete</code> , entonces los navegadores usan el atributo <code>autocomplete</code> del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.</p> - -<p>Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}</p> - -<div class="blockIndicator note"> -<p>Para proveer el autocompletado, el navegador necesita del los elementos <code><input></code>:</p> - -<ol> - <li>Que tengan <code>name</code> y/o <code>id</code></li> - <li>Pertenezcan a un elemento <code><form></code></li> - <li>Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}</li> -</ol> -</div> - -<h2 id="Valores">Valores</h2> - -<dl> - <dt><code>"off"</code></dt> - <dd>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. - <div class="note"><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to <code>"off"</code> will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div> - </dd> - <dt><code>"on"</code></dt> - <dd>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</dd> - <dt><code>"name"</code></dt> - <dd>The field expects the value to be a person's full name. Using <code>"name"</code> rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components: - <dl> - <dt><code>"honorific-prefix"</code></dt> - <dd>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</dd> - <dt><code>"given-name"</code></dt> - <dd>The given (or "first") name.</dd> - <dt><code>"additional-name"</code></dt> - <dd>The middle name.</dd> - <dt><code>"family-name"</code></dt> - <dd>The family (or "last") name.</dd> - <dt><code>"honorific-suffix"</code></dt> - <dd>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd> - <dt><code>"nickname"</code></dt> - <dd>A nickname or handle.</dd> - </dl> - </dd> - <dt><code>"email"</code></dt> - <dd>An email address.</dd> - <dt><code>"username"</code></dt> - <dd>A username or account name.</dd> - <dt><code>"new-password"</code></dt> - <dd>A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.</dd> - <dt><code>"current-password"</code></dt> - <dd>The user's current password.</dd> - <dt><code>"organization-title"</code></dt> - <dd>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</dd> - <dt><code>"organization"</code></dt> - <dd>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</dd> - <dt><code>"street-address"</code></dt> - <dd>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</dd> - <dt><code>"address-line1"</code>, <code>"address-line2"</code>, <code>"address-line3"</code></dt> - <dd>Each individual line of the street address. These should only be present if the <code>"street-address"</code> is also present.</dd> - <dt><code>"address-level4"</code></dt> - <dd>The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.</dd> - <dt><code>"address-level3"</code></dt> - <dd>The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.</dd> - <dt><code>"address-level2"</code></dt> - <dd>The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</dd> - <dt><code>"address-level1"</code></dt> - <dd>The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</dd> - <dt><code>"country"</code></dt> - <dd>A country code.</dd> - <dt><code>"country-name"</code></dt> - <dd>A country name.</dd> - <dt><code>"postal-code"</code></dt> - <dd>A postal code (in the United States, this is the ZIP code).</dd> - <dt><code>"cc-name"</code></dt> - <dd>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</dd> - <dt><code>"cc-given-name"</code></dt> - <dd>A given (first) name as given on a payment instrument like a credit card.</dd> - <dt><code>"cc-additional-name"</code></dt> - <dd>A middle name as given on a payment instrument or credit card.</dd> - <dt><code>"cc-family-name"</code></dt> - <dd>A family name, as given on a credit card.</dd> - <dt><code>"cc-number"</code></dt> - <dd>A credit card number or other number identifying a payment method, such as an account number.</dd> - <dt><code>"cc-exp"</code></dt> - <dd>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</dd> - <dt><code>"cc-exp-month"</code></dt> - <dd>The month in which the payment method expires.</dd> - <dt><code>"cc-exp-year"</code></dt> - <dd>The year in which the payment method expires.</dd> - <dt><code>"cc-csc"</code></dt> - <dd>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</dd> - <dt><code>"cc-type"</code></dt> - <dd>The type of payment instrument (such as "Visa" or "Master Card").</dd> - <dt><code>"transaction-currency"</code></dt> - <dd>The currency in which the transaction is to take place.</dd> - <dt><code>"transaction-amount"</code></dt> - <dd>The amount, given in the currency specified by <code>"transaction-currency"</code>, of the transaction, for a payment form.</dd> - <dt><code>"language"</code></dt> - <dd>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</dd> - <dt><code>"bday"</code></dt> - <dd>A birth date, as a full date.</dd> - <dt><code>"bday-day"</code></dt> - <dd>The day of the month of a birth date.</dd> - <dt><code>"bday-month"</code></dt> - <dd>The month of the year of a birth date.</dd> - <dt><code>"bday-year"</code></dt> - <dd>The year of a birth date.</dd> - <dt><code>"sex"</code></dt> - <dd>A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.</dd> - <dt><code>"tel"</code></dt> - <dd>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: - <dl> - <dt><code>"tel-country-code"</code></dt> - <dd>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</dd> - <dt><code>"tel-national"</code></dt> - <dd>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</dd> - <dt><code>"tel-area-code"</code></dt> - <dd>The area code, with any country-internal prefix applied if appropriate.</dd> - <dt><code>"tel-local"</code></dt> - <dd>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use <code>"tel-local-prefix"</code> for "555" and <code>"tel-local-suffix"</code> for "6502".</dd> - </dl> - </dd> - <dt><code>"tel-extension"</code></dt> - <dd>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</dd> - <dt><code>"impp"</code></dt> - <dd>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</dd> - <dt><code>"url"</code></dt> - <dd>A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.</dd> - <dt><code>"photo"</code></dt> - <dd>The URL of an image representing the person, company, or contact information given in the other fields in the form.</dd> -</dl> - -<p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p> - -<div class="note"> -<p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply to the <code><input></code> by virtue of its <code>type</code>. See {{bug(654072)}}.</p> -</div> - -<h2 id="Administrative_levels_in_addresses">Administrative levels in addresses</h2> - -<p>The four administrative level fields (<code>"address-level1"</code> through <code>"address-level4"</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p> - -<p><code>"address-level1"</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p> - -<h3 id="Form_layout_flexibility">Form layout flexibility</h3> - -<p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p> - -<h3 id="Variations">Variations</h3> - -<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p> - -<h4 id="United_States">United States</h4> - -<p>A typical home address within the United States looks like this:</p> - -<p>432 Anywhere St<br> - Exampleville CA 95555</p> - -<p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>"address-level1"</code> is the state, or "CA" in this case.</p> - -<p>The second-least specific portion of the address is the city or town name, so <code>"address-level2"</code> is "Exampleville" in this example address.</p> - -<p>United States addresses do not use levels 3 and up.</p> - -<h4 id="United_Kingdom">United Kingdom</h4> - -<p>The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.</p> - -<h4 id="China">China</h4> - -<p>China can use as many as three administrative levels: the province, the city, and the district.</p> diff --git a/files/es/web/html/element/shadow/index.html b/files/es/web/html/element/shadow/index.html deleted file mode 100644 index 7c5720124f..0000000000 --- a/files/es/web/html/element/shadow/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: <shadow> -slug: Web/HTML/Element/shadow -translation_of: Web/HTML/Element/shadow -original_slug: Web/HTML/Elemento/Shadow ---- -<p>{{obsolete_header}}</p> - -<p><span class="seoSummary">El <strong>HTML <code><shadow></code> element</strong>—es una parte absoluta de la suite tecnológica de <a href="/en-US/docs/Web/Web_Components">Web Components</a> —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.</span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts flow content.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>None</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLShadowElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Example">Example</h2> - -<p>Aquí está un ejemplo simple usando el <code><shadow></code> element. Es un archivo HTML con todo lo necesario en él.</p> - -<div class="note"> -<p><strong>Note:</strong> This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> -</div> - -<pre class="brush: html"><html> - <head></head> - <body> - - <!-- This <div> will hold the shadow roots. --> - <div> - <!-- This heading will not be displayed --> - <h4>My Original Heading</h4> - </div> - - <script> - // Get the <div> above with its content - var origContent = document.querySelector('div'); - // Create the first shadow root - var shadowroot1 = origContent.createShadowRoot(); - // Create the second shadow root - var shadowroot2 = origContent.createShadowRoot(); - - // Insert something into the older shadow root - shadowroot1.innerHTML = - '<p>Older shadow root inserted by - &lt;shadow&gt;</p>'; - // Insert into younger shadow root, including <shadow>. - // The previous markup will not be displayed unless - // <shadow> is used below. - shadowroot2.innerHTML = - '<shadow></shadow> <p>Younger shadow - root, displayed because it is the youngest.</p>'; - </script> - - </body> -</html> -</pre> - -<p>If you display this in a web browser it should look like the following.</p> - -<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> - -<h2 id="Specifications">Specifications</h2> - -<p>This element is no longer defined by any specifications.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>35</td> - <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>26</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>37</td> - <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] If Shadow DOM is not enabled in Firefox, <code><shadow></code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> - <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html deleted file mode 100644 index e1e70a7747..0000000000 --- a/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: encodeURIComponent -slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent -tags: - - JavaScript - - URI -translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent -original_slug: Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent ---- -<div>{{jsSidebar("Objects")}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>El método <strong>encodeURIComponent()</strong> codifica un componente URI (Identificador Uniforme de Recursos) al reemplazar cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter (solo serán cuatro secuencias de escape para caracteres compuestos por dos carácteres "sustitutos").</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox">encodeURIComponent(str);</pre> - -<h3 id="Parameters" name="Parameters">Parámetros</h3> - -<dl> - <dt><code>str</code></dt> - <dd>Cadena. Un componente de un URI.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ . ! ~ * ' ( )</code></p> - -<p>Note that an {{jsxref("Objetos_globales/URIError", "URIError")}} will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,</p> - -<pre class="brush: js">// high-low pair ok -alert(encodeURIComponent('\uD800\uDFFF')); - -// lone high surrogate throws "URIError: malformed URI sequence" -alert(encodeURIComponent('\uD800')); - -// lone low surrogate throws "URIError: malformed URI sequence" -alert(encodeURIComponent('\uDFFF')); -</pre> - -<p>To avoid unexpected requests to the server, you should call <code>encodeURIComponent</code> on any user-entered parameters that will be passed as part of a URI. For example, a user could type "<code>Thyme &time=again</code>" for a variable <code>comment</code>. Not using <code>encodeURIComponent</code> on this variable will give <code>comment=Thyme%20&time=again</code>. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST <code>comment</code> key equal to "<code>Thyme &time=again</code>", you have two POST keys, one equal to "<code>Thyme </code>" and another (<code>time</code>) equal to <code>again</code>.</p> - -<p>For <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST), spaces are to be replaced by '+', so one may wish to follow a <code>encodeURIComponent</code> replacement with an additional replacement of "%20" with "+".</p> - -<p>To be more stringent in adhering to <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:</p> - -<pre class="brush: js">function fixedEncodeURIComponent (str) { - return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A"); -} -</pre> - -<h2 id="See_also" name="See_also">Examples</h2> - -<p>The following example provides the special encoding required within UTF-8 <code>Content-Disposition</code> and <code>Link</code> server response header parameters (e.g., UTF-8 filenames):</p> - -<pre class="brush: js">var fileName = 'my file(2).txt'; -var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName); - -console.log(header); -// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" - - -function encodeRFC5987ValueChars (str) { - return encodeURIComponent(str). - // Note that although RFC3986 reserves "!", RFC5987 does not, - // so we do not need to escape it - replace(/['()]/g, escape). // i.e., %27 %28 %29 - replace(/\*/g, '%2A'). - // The following are not required for percent-encoding per RFC5987, - // so we can allow for a little better readability over the wire: |`^ - replace(/%(?:7C|60|5E)/g, unescape); -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 3rd Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_Also" name="See_Also">See also</h2> - -<ul> - <li>{{jsxref("decodeURI")}}</li> - <li>{{jsxref("encodeURI")}}</li> - <li>{{jsxref("decodeURIComponent")}}</li> -</ul> diff --git a/files/es/web/javascript/reference/statements/with/index.html b/files/es/web/javascript/reference/statements/with/index.html deleted file mode 100644 index 9ad9f256c4..0000000000 --- a/files/es/web/javascript/reference/statements/with/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: with -slug: Web/JavaScript/Reference/Statements/with -translation_of: Web/JavaScript/Reference/Statements/with -original_slug: Web/JavaScript/Referencia/Sentencias/with ---- -<div class="warning">El uso de la declaración no es recomendado, ya que puede ser el origen de los errores de confusión y problemas de compatibilidad. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div> - -<div>{{jsSidebar("Statements")}}</div> - -<p>La <strong>sentencia with</strong> extiende el alcance de una cadena con la declaración.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">with (expresión) { - <em>declaración</em> -} -</pre> - -<dl> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">expresión</font></dt> - <dd>Añade la expresión dada a la declaración. Los parentesis alrededor de la expresión son necesarios.</dd> - <dt><code>declaración</code></dt> - <dd>Se puede ejecutar cualquier declaración. Para ejecutar varias declaraciónes, utilizar una declaración de bloque ({ ... }) para agrupar esas declaraciónes.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a {{jsxref("ReferenceError")}} is thrown.</p> - -<div class="note">Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.</div> - -<h3 id="Performance_pro_contra">Performance pro & contra</h3> - -<p><strong>Pro:</strong> The <code>with</code> statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</p> - -<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p> - -<h3 id="Ambiguity_contra">Ambiguity contra</h3> - -<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> - -<pre class="brush: js">function f(x, o) { - with (o) - print(x); -}</pre> - -<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> - -<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:</p> - -<div> -<pre class="brush:js">function f(foo, values) { - with (foo) { - console.log(values) - } -} -</pre> - -<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_with">Using <code>with</code></h3> - -<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p> - -<pre class="brush:js">var a, x, y; -var r = 10; - -with (Math) { - a = PI * r * r; - x = r * cos(PI); - y = r * sin(PI / 2); -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Now forbidden in strict mode.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/block", "block")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> -</ul> diff --git a/files/es/web/mathml/authoring/index.html b/files/es/web/mathml/authoring/index.html deleted file mode 100644 index f9c30ff92c..0000000000 --- a/files/es/web/mathml/authoring/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: Redacción de MathML -slug: Web/MathML/Authoring -translation_of: Web/MathML/Authoring ---- -<p>Este artículo explica como redactar funciones matemáticas utilizando el lenguaje MathML. Al igual que HTML, MathML puede describirse con etiquetas y atributos. HTML puede volverse interminable cuando tu documento contiene estructuras avanzadas como listas o tablas pero afortunadamente existen varios generadores, desde simple notaciones, editores WYSIWYG y otros Sistemas de Administración de Contenido (CMS) utilizados para la creación de páginas web.</p> - -<p>Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas. Como consecuencia, las buenas herramientas de redacción de MathML son importantes y más adelante describimos algunas opciones. En particular, el équipo MathML de Mozilla ha creado <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>, un convertor de LaTeX a MathML compatible con Unicode, para ser utilizado en muchos scenari descrito ahí. Desde luego, la lista no es de ninguna manera definitiva y estás invitado a revisar la <a class="external" href="https://www.w3.org/Math/Software/">Lista de Software MathML de W3C</a> donde puedes encontrar diferentes herramientas.</p> - -<p>Hay que señalar que por diseño, MathML está bien integrado en HTML5 y particularmente puedes utilizar las características Web comunes como CSS, DOM, Javascript o SVG. Esto está fuera del ámbito de este artículo pero cualquiera con conocimientos básicos de lenguajes Web será capaz de combinar fácilmente estas características con MathML. Revisa <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">nuestros demos</a> y <a href="/en-US/docs/Web/MathML" title="en/MathML/Element">referencias de MathML</a> para más detalles.</p> - -<h2 id="Fundamentos">Fundamentos</h2> - -<h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">Utilizar MathML en páginas HTML</h4> - -<p>Puedes utilizar MathML dentro de un documento HTML5:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>MathML in HTML5</title> -</head> -<body> - - <h1>MathML in HTML5</h1> - - <p> - Square root of two: - <math> - <msqrt> - <mn>2</mn> - </msqrt> - </math> - </p> - -</body> -</html> </pre> - -<p>Content MathML no esta soportado por el navegador. Es recomendable convertir tu content MathML markup en Presentation MathML antes de publicarlo, por ejemplo con la ayuda de la hoja de calculo <a class="external external-icon" href="https://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> . Las herramientas mencionadas en esta pagina generan Presentation MathML.</p> - -<h4 id="sect1"> </h4> - -<h4 id="Para_navegadores_sin_soporte_a_MathML">Para navegadores sin soporte a MathML</h4> - -<p>Desafortunadamente, algunos navegadores no son capaces de renderizar ecuaciones MathML o tienen un soporte limitado. Por lo tanto necesitará usar MathML polyfill para proveer el renderizado. Si necesita solo construcciones matematicas básicas tales como las utilizadas en esta wiki de MDN entonces una pequeña hoja de cálculo <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> podria ser suficiente. Para usarlo, solo inserta una linea en el header de tu documento:</p> - -<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathml.css/mspace.js"></script></pre> - -<p>If you need more complex constructions, you might instead consider using the heavier <a href="https://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p> - -<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script></pre> - -<p>Note that these two scripts perform feature detection of the <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p> - -<pre class="brush: js language-js"> function hasMathMLSupport() { - var div = document.createElement("div"), box; - div.innerHTML = "<math><mspace height='23px' width='77px'/></math>"; - document.body.appendChild(div); - box = div.firstChild.firstChild.getBoundingClientRect(); - document.body.removeChild(div); - return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1; -}</pre> - -<p>Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:</p> - -<pre class="brush: js language-js">var ua = navigator.userAgent; -var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1; -var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;</pre> - -<h4 id="sect2"> </h4> - -<p>Mathematical fonts</p> - -<p><strong>Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko & WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.</strong></p> - -<p>To get a good mathematical rendering in browsers, some <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> are required. It's a good idea to provide to your visitors a link to the <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MDN page that explains how to install MathML fonts</a>. Alternatively, you can just make them available as Web fonts. You can get these fonts from the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">MathML-fonts add-on</a> ; the xpi is just a zip archive that you can fetch and extract for example with the following command:</p> - -<pre class="brush: bash language-html">wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \ -unzip mathml-fonts.zip -d mathml-fonts</pre> - -<p>Then copy the <code>mathml-fonts/resource/</code> directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the <code>mathml-fonts/resource/mathml.css</code> style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:</p> - -<pre class="brush: css language-css">@import url('/path/to/resource/mathml.css');</pre> - -<p><span>You then need to modify the font-family on the <math> elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p> - -<pre class="language-html"><span class="brush: css"><span class="brush: css">math { - font-family: STIXGeneral; -} - -</span>::-moz-math-stretchy { - font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral; -} -</span></pre> - -<p><span>Try the <a href="/docs/Mozilla/MathML_Project/MathML_Torture_Test" title="/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML torture test</a></span> to compare the rendering of various fonts and the CSS rules to select them.</p> - -<h4 id="Utilizar_MathML_en_documentos_XML_(XHTML_EPUB_etc.)">Utilizar MathML en documentos XML (XHTML, EPUB, etc.)</h4> - -<p>Si por alguna razón necesitas utilizar MathML en documentos XML, asegúrate de cumplir con los requisitos habituales: documentos bien realizados, el uso correcto de la especificación MIME, el prefijo MathML <code>"http://www.w3.org/1998/Math/MathML"</code> en la raíz<code> <math></code>. Por ejemplo, la versión XHTML del ejemplo anterior luce de esta manera:<br> - </p> - -<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" - "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml"> -<head> - <title>XHTML+MathML Example</title> -</head> -<body> - -<h1>XHTML+MathML Example</h1> - - <p> - Square root of two: - <math xmlns="http://www.w3.org/1998/Math/MathML"> - <msqrt> - <mn>2</mn> - </msqrt> - </math> - </p> - -</body> -</html> </pre> - -<p>Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.</p> - -<h4 id="Utilizar_MathML_en_correos_electrónicos">Utilizar MathML en correos electrónicos</h4> - -<p>Los clientes de correos modernos pueden enviar y recibir correos electrónicos en el formato HTML5 y por lo tanto pueden manejar expresiones de tipo MathML. Asegúrate de tener las opciones de "Enviar como HTML" y "Ver como HTML" habilitadas. En Thunderbird, puedes utilizar el comando "Insertar HTML" para pegar tu código HTML+MathML. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> es un complemento conveniente de Thunderbird para insertar este tipo de expresiones MathML utilizando la sintaxis AsciiMath.<br> - <br> - De nuevo, la forma en como MathML es manejada y la calidad de cómo se muestran estas expresiones <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">depende del cliente de correo electrónico</a>. Aún si tu navegador es compatible con MathML, tu servicio de correo electrónico puede evitar que envíes o recibas correos con expresiones MathML.</p> - -<h2 id="Conversion_from_a_Simple_Syntax">Conversion from a Simple Syntax</h2> - -<p>There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.</p> - -<ul> - <li>pros: - <ul> - <li>Writing mathematical expressions may only require a standard text editor.</li> - <li>Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.</li> - <li>This gives access to advanced features of LaTeX like macros.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc</li> - <li>The interface is not user-friendly: only code editor without immediate display of the mathematical expression.</li> - <li>None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.</li> - </ul> - </li> -</ul> - -<h3 id="Client-side_Conversion">Client-side Conversion</h3> - -<p>In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.</p> - -<ul> - <li>pros: - <ul> - <li>This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.</li> - <li>This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This won't work if the visitor has Javascript disabled.</li> - <li>The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.</li> - <li>The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "<" for tags or "$" for money amounts)</li> - <li>You may need to synchronize the Javascript converter with other Javascript programs on your page.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex"><x-tex></a> custom element, that can be used to write things like</p> - -<pre class="language-html"><span class="brush: html"><<span class="start-tag">x-tex</span>></span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html"></<span class="end-tag">x-tex</span>></span></pre> - -<p>and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript parsing of expressions at load time</a> as all the other tools in this section do.</p> - -<p>One simple client-side conversion tools is <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="https://mathcs.chapman.edu/%7Ejipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> script and copy it to your Web site. Then on your Web pages, add a <code><script></code> tag to load ASCIIMathML and the mathematical expressions delimited by <code>`</code> (grave accent) will be automatically parsed and converted to MathML:</p> - -<pre class="brush: html language-html"><html> -<head> -... -<script type="text/javascript" src="ASCIIMathML.js"></script> -... -</head> -<body> -... -<p>blah blah `x^2 + y^2 = r^2` blah ... -...</pre> - -<p><a href="https://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> is a similar script that allows to parse more LaTeX commands. The installation is similar: copy <a href="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:</p> - -<pre class="brush: html language-html"><head> -... -<script type="text/javascript" src="LaTeXMathML.js"></script> -<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" /> -... -</head> - -<body> -... - -<div class="LaTeX"> -\documentclass[12pt]{article} - -\begin{document} - -\title{LaTeXML Example} -\maketitle - -\begin{abstract} -This is a sample LaTeXML document. -\end{abstract} - -\section{First Section} - - $ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $ - -\end{document} -</div> -...</pre> - -<p><a href="https://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <mrow> <msqrt> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. The installation is similar: download and copy the relevant <a href="https://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript and CSS files</a> on your Web site and reference them in your page header (see the <code>COPY-ME.html</code> file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.</p> - -<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="https://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a>. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:</p> - -<pre class="brush: html language-html">... - <script type="text/x-mathjax-config"> - MathJax.Hub.Config({ - MMLorHTML: { prefer: { Firefox: "MML" } } - }); - </script> - <script type="text/javascript" - src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> - </script> - </head> - <body> - \[ \tau = \frac{x}{y} + \sqrt{3} \] -...</pre> - -<p>Note that <a href="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters" title="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters">the dollar delimiters are not used by default</a>. To use the ASCIIMathML input instead, just replace <code>TeX-AMS-MML_HTMLorMML</code> by <code>AM-MML_HTMLorMML</code>. MathJax has many other features, see the <a href="http://docs.mathjax.org/en/latest/" title="http://docs.mathjax.org/en/latest/">MathJax documentation</a> for further details.</p> - -<h3 id="Command-line_Programs">Command-line Programs</h3> - -<p>An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.</p> - -<ul> - <li>pros: - <ul> - <li>You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.</li> - <li>Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.</li> - <li>You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.</li> - <li>You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.</li> - <li>Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be used <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">from the command line</a> and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.</p> - -<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="https://golem.ph.utexas.edu/%7Edistler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> or <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:</p> - -<pre class="brush: bash language-html">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \ -tar -xzf itexToMML.tar.gz; \ -cd itex2MML/itex-src; -make -sudo make install</pre> - -<p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p> - -<pre class="brush: html language-html">input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}<code class="language-html">input.html - -... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$\sqrt{a^2-3c}$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}<code class="language-html">input.html - -... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$\sqrt{a^2-3c}$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> -</body> -</html></pre> - -<p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p> - -<pre class="language-html">cat input.html | itex2MML > output.html</pre> - -<p>There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example <a href="https://www.tug.org/tex4ht/">TeX4ht</a> is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:</p> - -<pre class="language-html"> mk4ht mzlatex foo.tex # Linux/Mac platforms - mzlatex foo.tex # Windows platform -</pre> - -<p><a href="https://dlmf.nist.gov/LaTeXML/">LaTeXML</a> is another tool that is still actively developed but the release version is rather old, so you'd better <a href="https://github.com/KWARC/LaTeXML">install the development version</a>. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:</p> - -<pre class="language-html"> latexml --dest foo.xml foo.tex - latexmlpost --dest foo.html --format=html5 foo.xml -</pre> - -<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="/es/docs/Web/MathML/Authoring$edit#mathjax-fallback">Javascript lines given above</a> into a <code>mathjax.js</code> file and use the <code>--javascript</code> parameter to tell LaTeXML to include that file:</p> - -<pre class="language-html"> latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml -</pre> - -<p>If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the <code>--splitat</code> parameter for that purpose. For example, this will split the pages at the <code>\section</code> level:</p> - -<pre class="language-html"> latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml -</pre> - -<p>Finally, to generate an EPUB document, you can do</p> - -<pre class="language-html"> latexmlc --dest foo.epub --splitat=section foo.xml -</pre> - -<h3 id="Server-side_Conversion">Server-side Conversion</h3> - -<ul> - <li>pros: - <ul> - <li>Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This might be a bit more difficult to set up, since you need some admin right on your server.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="https://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p> - -<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p> - -<h2 id="Graphical_Interface">Graphical Interface</h2> - -<h3 id="Input_Box">Input Box</h3> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="https://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p> - -<p style="text-align: center;"><img alt="BlueGriffon" src="mathml-shot1.png"></p> - -<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3> - -<p><a href="https://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p> - -<p><a href="https://www.openoffice.org/">OpenOffice</a> and <a href="https://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p> - -<p style="text-align: center;"><img alt="Open Office Math" src="openoffice.png"></p> - -<p><a href="https://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p> - -<h2 id="Optical_Character_Handwriting_Recognition">Optical Character & Handwriting Recognition</h2> - -<p><a href="https://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="https://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p> - -<p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p> - -<p>Original Document Information</p> - -<div class="originaldocinfo"> -<ul> - <li>Author(s): Frédéric Wang</li> - <li>Other Contributors: Florian Scholz</li> - <li>Last Updated Date: April 2, 2011</li> - <li>Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="https://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> -</ul> -</div> - -<p> </p> diff --git a/files/es/web/mathml/authoring/openoffice.png b/files/es/web/mathml/authoring/openoffice.png Binary files differdeleted file mode 100644 index 4876bc83df..0000000000 --- a/files/es/web/mathml/authoring/openoffice.png +++ /dev/null diff --git a/files/es/web/media/formats/index.html b/files/es/web/media/formats/index.html deleted file mode 100644 index b11ddc3580..0000000000 --- a/files/es/web/media/formats/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Media type and format guide: image, audio, and video content' -slug: Web/Media/Formats -tags: - - API - - Audio - - Codecs - - Containers - - File Types - - Files - - Filetypes - - Landing - - Media - - NeedsTranslation - - TopicStub - - Types - - Video - - Web - - formats -translation_of: Web/Media/Formats ---- -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p> - -<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p> - -<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="References">References</h2> - -<h3 id="Images">Images</h3> - -<dl> - <dt><span class="hidden"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> - <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt> - <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd> -</dl> - -<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt> - <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt> - <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt> - <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt> - <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt> - <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="Guides">Guides</h2> - -<h3 id="Concepts">Concepts</h3> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt> - <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt> - <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd> -</dl> - -<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt> - <dd>This tutorial introduces and details the use of media on the web.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt> - <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd> -</dl> - -<h2 id="Other_topics">Other topics</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> - <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd> -</dl> -</div> -</div> diff --git a/files/es/web/svg/element/foreignobject/index.html b/files/es/web/svg/element/foreignobject/index.html deleted file mode 100644 index ea64360cbb..0000000000 --- a/files/es/web/svg/element/foreignobject/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: foreignObject -slug: Web/SVG/Element/foreignObject -translation_of: Web/SVG/Element/foreignObject ---- -<div>{{SVGRef}}</div> - -<p>El elemento <code>foreignObject</code> permite la inclusión de un namespace XML externo que tiene su contenido gráfico dibujado por un diferente user-agent. El contenido gráfico externo incluido está sujeto a las transformaciones SVG y composición.</p> - -<p>The contents of <code>foreignObject</code> are assumed to be from a different namespace. Any SVG elements within a <code>foreignObject</code> will not be drawn, except in the situation where a properly defined SVG subdocument with a proper <code>xmlns</code> attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).</p> - -<p>Usually, a <code>foreignObject</code> will be used in conjunction with the {{ SVGElement("switch") }} element and the {{ SVGAttr("requiredExtensions") }} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.</p> - -<h2 id="Usage_context">Usage context</h2> - -<p>{{svginfo}}</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: xml"><svg width="400px" height="300px" viewBox="0 0 400 300" - xmlns="http://www.w3.org/2000/svg"> - <desc>This example uses the 'switch' element to provide a - fallback graphical representation of a paragraph, if - XHTML is not supported.</desc> - - <!-- The 'switch' element will process the first child element - whose testing attributes evaluate to true.--> - <switch> - - <!-- Process the embedded XHTML if the requiredExtensions attribute - evaluates to true (i.e., the user agent supports XHTML - embedded within SVG). --> - <foreignObject width="100" height="50" - requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>"> - <!-- XHTML content goes here --> - <body xmlns="http://www.w3.org/1999/xhtml"> - <p>Here is a paragraph that requires word wrap</p> - </body> - </foreignObject> - - <!-- Else, process the following alternate SVG. - Note that there are no testing attributes on the 'text' element. - If no testing attributes are provided, it is as if there - were testing attributes and they evaluated to true.--> - <text font-size="10" font-family="Verdana"> - <tspan x="10" y="10">Here is a paragraph that</tspan> - <tspan x="10" y="20">requires word wrap.</tspan> - </text> - </switch> -</svg> -</pre> - -<h2 id="Attributes">Attributes</h2> - -<h3 id="Global_attributes">Global attributes</h3> - -<ul> - <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">Presentation attributes</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> - -<h3 id="Specific_attributes">Specific attributes</h3> - -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("width") }}</li> - <li>{{ SVGAttr("height") }}</li> -</ul> - -<h2 id="DOM_Interface">DOM Interface</h2> - -<p>This element implements the <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code> interface.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>1.9</td> - <td>{{ CompatNo() }}</td> - <td>2.0</td> - <td>3.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>2.0</td> - <td>{{ CompatNo() }}</td> - <td>2.0</td> - <td>3.0</td> - </tr> - </tbody> -</table> -</div> - -<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p> diff --git a/files/es/web/xslt/element/number/index.html b/files/es/web/xslt/element/number/index.html deleted file mode 100644 index 519c2361c2..0000000000 --- a/files/es/web/xslt/element/number/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: number -slug: Web/XSLT/Element/number -tags: - - Todas_las_Categorías - - XSLT -translation_of: Web/XSLT/Element/number -original_slug: Web/XSLT/number ---- -<p>{{XsltRef}}</p> - -<p>El elemento <code><xsl:number></code> hace conteos secuenciales. También puede ser usado para darle formato a los números.</p> - -<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> - -<pre><xsl:number - count=EXPRESION - level="single" | "multiple" | "any" - from=EXPRESION - value=EXPRESION - format=FORMAT-STRING - lang=XML:LANG-CODE - letter-value="alphabetic" | "traditional" - grouping-separator=CARACTER - grouping-size=NUMERO /></pre> - -<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3> - -<p>Ninguno.</p> - -<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3> - -<dl> - <dt><code>count</code></dt> - <dd>Indica que es lo que debe ser numerado de manera secuencial. Usa una expresión XPath.</dd> -</dl> - -<dl> - <dt><code>level</code></dt> - <dd>Define cuantos niveles del documento deben ser tomados en cuenta para generar la secuencia numérica. Tiene 3 valores permitidos: <code>single</code>, <code>multiple</code>, y <code>any</code>. El valor por preestablecido es <code>single</code>:</dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>single</code></dt> - <dd>Numera los nodos hermanos de manera secuencia, como en los listados. ... CONTINUAR DESDE AQUÍ...</dd> - <dd>Numbers sibling nodes sequentially, as in the items in a list. The processor goes to the first node in the <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> axis that matches the <code>count</code> attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the <code>from</code> attribute, if there is one) that also match the <code>count</code> attribute.If no match is found, the sequence will be an empty list.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>multiple</code></dt> - <dd>Numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (The nested format can be specified with the <code>format</code> attribute, e.g. A.1.1). The processor looks at all <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestors</code></a> of the current node and the current node itself, stopping when it reaches a match for the <code>from</code> attribute, if there is one. For each node in this list that matches the <code>count</code> attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself. If no match is found, the sequence will be an empty list.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>any</code> (Not supported at this time.)</dt> - <dd>Numbers all matching nodes, regardless of level, sequentially. The <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>, <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>, and <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> axes are all considered. The processor starts at the current node and proceeds in reverse document order, stopping if it reaches a match to any <code>from</code> attribute. If no match to the <code>count</code> attribute is found, the sequence will be an empty list. This level is not supported at this time.</dd> - </dl> - </dd> -</dl> - -<dl> - <dt>from</dt> - <dd>Specifies where the numbering should start or start over. The sequence begins with the first descendant of the node that matches the <code>from</code> attribute.</dd> -</dl> - -<dl> - <dt>value</dt> - <dd>Applies a given format to a number. This is a quick way to format a user-supplied number (as opposed to a node sequence number) in any of the standard <code><xsl:number></code> formats.</dd> -</dl> - -<dl> - <dt>format</dt> - <dd>Defines the format of the generated number:</dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="1"</dt> - <dd>1 2 3 . . . (This is the only format supported at this time)</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="01"</dt> - <dd>01 02 03 . . . 09 10 11 . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="a"</dt> - <dd>a b c . . .y z aa ab . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="A"</dt> - <dd>A B C . . . Y Z AA AB . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="i"</dt> - <dd>i ii iii iv v . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="I"</dt> - <dd>I II III IV V . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dt>lang (Not supported at this time.)</dt> - <dd>Specifies which language's alphabet should be used in letter-based numbering formats.</dd> -</dl> - -<dl> - <dt>letter-value</dt> - <dd>Disambiguates between numbering sequences that use letters. Some languages have more than one numbering system that use letters. If both systems begin with the same token, ambiguity can arise. This attribute can have the value "<code>alphabetic</code>" or "<code>traditional</code>". The default is "<code>alphabetic</code>".</dd> -</dl> - -<dl> - <dt>grouping-separator</dt> - <dd>Specifies what character should be used as the group (e.g. thousands) separator. The default is the comma (<code>,</code>).</dd> -</dl> - -<dl> - <dt>grouping-size</dt> - <dd>Indicates the number of digits that make up a numeric group. The default value is "<code>3</code>".</dd> -</dl> - -<h3 id="Type" name="Type">Type</h3> - -<p>Instruction, appears within a template.</p> - -<h3 id="Defined" name="Defined">Defined</h3> - -<p>XSLT, section 7.7</p> - -<h3 id="Gecko_support" name="Gecko_support">Gecko support</h3> - -<p>Partial support. See comments above.</p> |
