remove retired locales (#699)

7 files changed, 0 insertions, 1717 deletions

diff --git a/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
deleted file mode 100644
index 082feae6bf..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
+++ /dev/null
@@ -1,288 +0,0 @@
----
-title: Afegir gràfics vectorials a la Web
-slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
-tags:
-  - Beginner
-  - Graphics
-  - Guide
-  - HTML
-  - Images
-  - Learn
-  - Raster
-  - SVG
-  - Vector
-  - iframe
-  - img
-translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
-original_slug: Learn/HTML/Multimèdia_i_incrustar/Afegir_gràfics_vectorials_a_la_Web
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<div class="summary">
-<p>Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits previs:</th>
-   <td>Conèixer els conceptes <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">bàsics d'HTML</a> i com <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">inserir una imatge en el document</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectiu:</th>
-   <td>Aprendre com incrustar una imatge SVG (vector) en una pàgina web.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Nota</strong>: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.</p>
-</div>
-
-<h2 id="Què_són_els_gràfics_vectorials">Què són els gràfics vectorials?</h2>
-
-<p>A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:</p>
-
-<ul>
- <li>Les imatges de trama es defineixen utilitzant una quadrícula de píxels - un arxiu d'imatge de trama conté informació que mostra exactament on cada píxel es col·locat, i exactament de quin color ha de ser. Els formats populars de trama en la web inclouen mapa de bits (.bmp), PNG (.png), JPEG (.jpg) i GIF (.gif).</li>
- <li>Les imatges vectorials es defineixen utilitzant algoritmes - un arxiu d'imatge vectorial que conté definicions de forma i el camí que l'ordinador pot utilitzar per esbrina quin aspecte ha de tenir la imatge quan es representi a la pantalla. El format {{glossary("SVG")}} ens permet crear potents gràfics vectorials per a ús a la web.</li>
-</ul>
-
-<p>Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.</p>
-
-<p><img alt="Two star images, one raster and one vector. At their default size they look identical" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
-
-<p>La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran</p>
-
-<p><img alt="Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp." src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
-
-<p>D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.</p>
-
-<h2 id="Què_és_SVG">Què és SVG?</h2>
-
-<p>SVG és un llenguatge basat en {{glossary("XML")}} per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com {{svgelement("circle")}} i {{svgelement("rect")}}. Més característiques avançades de SVG inclouen {{svgelement("feColorMatrix")}} (transforma colors utilitzant una matriu de transformació,) {{svgelement("animate")}} (animar parts d'un gràfic vectorial,) i {{svgelement("mask")}} (aplicar una màscara sobre la part superior de la imatge.)</p>
-
-<p><span id="result_box" lang="ca"><span>Com a</span> <span>simple exemple</span><span>, el codi</span> <span>següent</span> <span>crea</span> <span>un cercle</span> <span>i un</span> <span>rectang</span></span></p>
-
-<pre class="brush: html">&lt;svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect width="100%" height="100%" fill="black" /&gt;
-  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
-&lt;/svg&gt;</pre>
-
-<p><span id="result_box" lang="ca"><span>Això</span> <span>crea el següent</span> <span>resultat</span><span>:</span></span></p>
-
-<p>{{ EmbedLiveSample('What_is_SVG', 300, 200) }}</p>
-
-<p>L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com <a href="https://inkscape.org/en/">Inkscape</a> o <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).</p>
-
-<p>SVG té algunes avantatges addicionals a més de les descrites fins al moment:</p>
-
-<ul>
- <li>El text en imatges vectorials roman accessible (la qual cosa també beneficia la seva {{glossary("SEO")}}).</li>
- <li>Els SVGs es presten bé a estils/scripts, ja que cada component de la imatge és un element que pot ser dissenyat via CSS o per scripts via JavaScript.</li>
-</ul>
-
-<p>Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:</p>
-
-<ul>
- <li>SVG es pot complicar molt ràpidament, el que significa que les mides d'arxius poden créixer; els SVGs complexos poden arribar a ralentir els temps de processament del navegador</li>
- <li>EL SVG pot ser més difícil de crear que les imatges de trama, depenent de quin tipus d'imatge estem tractant de crear.</li>
- <li>
-  <p>SVG no és compatible amb els navegadors més antics, pel que pot no ser adequat si cal donar suport a les versions antigues d'Internet Explorer amb el vostre lloc web (SVG començar a ser suportat a partir d'IE9).</p>
- </li>
-</ul>
-
-<p>Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article que descriu com preparar SVGs per a la Web</a>.</p>
-</div>
-
-<h2 id="Afegir_SVG_a_les_vostres_pàgines">Afegir SVG a les vostres pàgines</h2>
-
-<p>En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.</p>
-
-<h3 id="La_forma_més_ràpida_htmlelement(img)"><span class="short_text" id="result_box" lang="ca"><span>La forma</span> <span>més</span> <span>ràpida</span></span> : {{htmlelement("img")}}</h3>
-
-<p>Per incrustar un SVG mitjançant un element {{htmlelement("img")}}, només s'ha de fer referència a ell en l'atribut <code>src</code>, com es podria esperar. Necessitarem un atribut <code>height</code> o <code>width</code> (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">imatges en HTML</a>.</p>
-
-<pre class="brush: html">&lt;img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87px"
-    width="100px" /&gt;</pre>
-
-<h4 id="Pros">Pros</h4>
-
-<ul>
- <li>Sintaxi de la imatge ràpida i familiar amb equivalent de text incorporat en l'atribut <code>alt</code>.</li>
- <li>Es pot convertir la imatge en un hipervínculo fàcilment niant el &lt;img&gt; dins d'un element {{htmlelement("a")}}.</li>
-</ul>
-
-<h4 id="Contres">Contres</h4>
-
-<ul>
- <li>No es pot manipular la imatge amb JavaScript.</li>
- <li>Si es vol controlar el contingut SVG amb CSS, s'ha d'incloure els estils CSS en línia en el codi SVG. (Les fulles d'estil externes invocades des de l'arxiu SVG no tenen cap efecte).</li>
- <li>No es pot canviar l'estil de la imatge amb pseudoclasses CSS (like <code>:focus</code>).</li>
-</ul>
-
-<h3 id="Solució_de_problemes_i_compatibilitat_entre_navegadors">Solució de problemes i compatibilitat entre navegadors</h3>
-
-<p>Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut <code>src</code> i utilitzar un atribut {{htmlattrxref("srcset", "img")}} (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:</p>
-
-<pre class="brush: html">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
-
-<p>També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:</p>
-
-<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code>
-background<code>-image: url("image.svg");
-background-size: contain;</code></pre>
-
-<p>Igual que el mètode <code>&lt;img&gt;</code> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.</p>
-
-<p>Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article us orientarà en la direcció correcta</a>.</p>
-
-<h3 id="Com_incloure_el_codi_SVG_dins_del_vostre_HTML"><span class="short_text" id="result_box" lang="ca"><span>Com incloure</span> <span>el codi</span> <span>SVG</span> <span>dins del vostre</span> <span>HTML</span></span></h3>
-
-<p>També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar <strong>en  línia SVG</strong>, o <strong>inlining SVG</strong>. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;&lt;/svg&gt;</a></code> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:</p>
-
-<pre class="brush: html">&lt;svg width="300" height="200"&gt;
-    &lt;rect width="100%" height="100%" fill="green" /&gt;
-&lt;/svg&gt;
-</pre>
-
-<h4 id="Pros_2">Pros</h4>
-
-<ul>
- <li>Posar SVG en línia estalvia una petició HTTP, i per tant pot reduir el temps de càrrega.</li>
- <li>Es pot assignar classes i ids els elements SVG i l'estil d'ells amb CSS, ja sigui dins el SVG o on poseu les regles d'estil CSS per al document HTML. De fet, es pot utilitzar qualsevol <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">atribut de presentació SVG </a>com una propietat CSS.</li>
- <li>Inlining SVG és l'únic enfocament que permet utilitzar les interaccions (com <code>:focus</code>) i animacions CSS en la imatge SVG (Fins i tot en la fulla d'estil regular)</li>
- <li>
-  <p>Es pot convertir el marcat SVG en un hipervincle embolicant-lo en un element {{htmlelement("a")}}.</p>
- </li>
-</ul>
-
-<h4 id="Contres_2">Contres</h4>
-
-<ul>
- <li>Aquest mètode només és adequat si s'utilitza el SVG en un sol lloc. La duplicació es fa per el manteniment intensiu de recursos.</li>
- <li>El codi extra SVG augmenta la mida del arxiu HTML.</li>
- <li>El navegador no pot emmagatzemar en memòria cau SVG en línia, ja que seria emmagatzemar en memòria cau els recursos d'imatges regulars.</li>
- <li>Es pot incloure el respatller en un element {{svgelement ("foreignObject")}}, però els navegadors compatibles amb SVG segueixen descarregant les imatges de respatller. Cal sospesar si la sobrecàrrega addicional realment val la pena, només per donar suport als navegadors obsolets.</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="Com_incrustar_un_SVG_amb_un_htmlelement(iframe)">Com incrustar un SVG amb un {{htmlelement("iframe")}}</h3>
-
-<p>Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <code>&lt;iframe&gt;</code> es fa de la mateixa manera que l'estudiat en <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des de &lt;object&gt; a &lt;iframe&gt; - altres tecnologies d'incrustació</a>.</p>
-
-<p>Aquí teniu una ullada ràpida:</p>
-
-<pre class="brush: html">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
-    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
-&lt;/iframe&gt;</pre>
-
-<p>Això en definitiva no és el millor mètode per triar:</p>
-
-<h4 id="Contres_3">Contres</h4>
-
-<ul>
- <li>Els <code>iframes</code> tenen un mecanisme de reserva, com es pot veure, però els navegadors només mostraran la reserva si manquen de suport complet per <code>iframes</code>.</li>
- <li>D'altra banda, llevat que el SVG i la pàgina web actual tenen el mateix {{glossary('origen')}}, no es pot utilitzar el Javascript a la pàgina web principal per manipular el SVG.</li>
-</ul>
-
-<h2 id="Aprenentatge_actiu_Jugar_amb_SVG">Aprenentatge actiu: Jugar amb SVG</h2>
-
-<p>En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.</p>
-
-<p>Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó <em>Reset</em>.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;svg width="100%" height="100%"&gt;
-  &lt;rect width="100%" height="100%" fill="red" /&gt;
-  &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
-  &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
-  &lt;text x="50" y="100" font-family="Verdana" font-size="55"
-        fill="white" stroke="black" stroke-width="2"&gt;
-    Hello!
-  &lt;/text&gt;
-&lt;/svg&gt;&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;
-&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
-}
-
-.input, .output {
-  width: 90%;
-  height: 10em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-  overflow: auto;
-}
-
-.output {
-  height: 14em;
-}
-
-button {
-  padding: 10px 10px 10px 0;
-}
-</pre>
-
-<pre class="brush: js">var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var code = textarea.value;
-var output = document.querySelector(".output");
-
-function drawOutput() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 600) }}</p>
-
-<h2 id="Sumari">Sumari</h2>
-
-<p>En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.</p>
-
-<p>En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.</p>
-
-<h2 id="Veure">Veure</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started">Tutorial SVG</a> en MDN</li>
- <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conells ràpids per SVGs sensibles</a></li>
- <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial sobre imatges SVG sensibles</a></li>
- <li><a href="http://www.w3.org/TR/SVG-access/">Beneficis d'accessibilitat en SVG</a></li>
- <li><a href="https://css-tricks.com/scale-svg/">Com escalar en SVGs </a>(no és tan simple com els gràfics de trama!)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html
deleted file mode 100644
index 74dc1ff697..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html
+++ /dev/null
@@ -1,374 +0,0 @@
----
-title: Imatges en HTML
-slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
-tags:
-  - Article
-  - Beginner
-  - Guide
-  - HTML
-  - Image
-  - alt text
-  - captions
-  - figcaption
-  - figure
-  - img
-translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
-original_slug: Learn/HTML/Multimèdia_i_incrustar/Images_in_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element {{HTMLElement("img")}}, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits previs:</th>
-   <td>Coneixements bàsics d'informàtica, <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">instal·lació de software bàsic</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb arxius</a>, familiaritat amb els fonaments de l’HTML (que exposen en l’article <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Introducció a l’HTML</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectiu:</th>
-   <td>Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Posar_una_imatge_en_una_pàgina_web"><span id="result_box" lang="ca">P<span>osar una</span> <span>imatge</span> <span>en una pàgina</span> <span>web</span></span></h2>
-
-<p>Per posar una imatge simple en una pàgina web, s'utilitza l'element {{htmlelement("img")}}. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: <code>src</code> (de vegades se l’anomena pel nom complet, <em>source</em>). L'atribut <code>src</code> conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element {{htmlelement("a")}} el valor de l'atribut <code>href</code>.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota: </strong>Fes una lectura de la <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Crear_hipervincles#Una_introducci%C3%B3_r%C3%A0pida_a_les_adreces_URL_i_les_rutes">guia ràpida a les adreces i rutes</a> per refrescar la memòria abans de continuar.</p>
-</div>
-
-<p>Així, per exemple, si la imatge es diu <code>dinosaur.jpg</code> i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:</p>
-
-<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;</pre>
-
-<p>Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors ({{glossary("SEO")}}) / indexació), llavors s'incrusta així:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
-
-<p>I així succesivament.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (<code>dinosaur.jpg</code> és millor que <code>img835.png</code>.)</p>
-</div>
-
-<p>La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:</p>
-
-<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
-
-<p>Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.</p>
-
-<div class="warning">
-<p><strong>Atenció:</strong> La majoria de les imatges tenen drets de propietat intelectual. <strong>No</strong> mostris una imatge a la pàgina web si no és que</p>
-
-<ul>
- <li>n’ets el propietari,</li>
- <li>has rebut permís explícit per escrit del propietari de la imatge, o</li>
- <li>tens proves contundents que la imatge és de domini públic.</li>
-</ul>
-
-<p>Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis <strong>mai</strong> en l'atribut <code>src</code> una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu <em>hotlinking</em> i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.</p>
-</div>
-
-<p>El codi anterior donaria el resultat següent:</p>
-
-<p><img alt="Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Els elements com {{htmlelement("img")}} i {{htmlelement("video")}} es denominen de vegades <strong>elements reemplaçats</strong>, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: Pots trobar l'exemple acabat al final d'aquesta secció, <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">executat a GitHub</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">codi font</a>.)</p>
-</div>
-
-<h3 id="Text_alternatiu">Text alternatiu</h3>
-
-<p>L’atribut següent que veurem és <code>alt</code>. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"&gt;</pre>
-
-<p>La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: <code>dinosooooor.jpg</code>, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.</p>
-
-<p><img alt="El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<p>Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:</p>
-
-<ul>
- <li>L'usuari és discapacitat visual, i usa un <a href="https://ca.wikipedia.org/wiki/Lector_de_pantalla">lector de pantalla</a> per a llegir el lloc web; en aquest cas, disposar de text alternatiu per a descriure les imatges és molt útil.</li>
- <li>Com ja hem vist, podries haver escrit malament el nom de l'arxiu o la ruta.</li>
- <li>El navegador no és compatible amb el tipus d'imatge. Hi ha persones que encara utilitzen navegadors de només text, com <a href="https://ca.wikipedia.org/wiki/Lynx_(navegador_web)">Lynx</a>, que mostra el text alternatiu de les imatges.</li>
- <li>Vols proporcionar una mica de text per a ús dels motors de cerca; els motors de cerca poden associar el text alternatiu amb les consultes de cerca, per exemple.</li>
- <li>Els usuaris han desactivat les imatges per reduir la transferència de dades i les distraccions (comú sobretot en els dispositius mòbils, en països en què l'ample de banda és limitat i car).</li>
-</ul>
-
-<p>Què s'ha d'escriure exactament dins de l'atribut <code>alt</code>? En primer lloc, depèn de <em>per què</em> la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):</p>
-
-<ul>
- <li><strong>Decoració. </strong>Si la imatge és només de decoració i no forma part del contingut, s'afegeix un espai en blanc <code>alt = ""</code>, de manera que, per exemple, un lector de pantalla no perd el temps llegint un contingut que no té cap utilitat per a l'usuari. De totes maneres, les imatges decoratives no pertanyen realment al codi HTML; per a la inserció de la decoració s’han d’utilitzar imatges de fons CSS ({{anch("CSS background images")}}), però si és inevitable, <code>alt = ""</code> és el millor camí que cal seguir.</li>
- <li><strong>Contingut. </strong>Si la imatge proporciona informació important, proporciona la mateixa informació en un text alternatiu <em>breu</em> o, millor encara, en el text principal, i que tothom el pugui veure. No escriguis text alternatiu redundant (no resultaria força molest per a un usuari visual que tots els paràgrafs estiguessin escrits dues vegades en el contingut principal?). Si la imatge ja es descriu adequadament en el cos del text principal, pots simplement utilitzar <code>alt = ""</code>.</li>
- <li><strong>Enllaç.</strong> Si poses una imatge dins d’una etiqueta {{htmlelement("a")}} per convertir-la en un enllaç, també has de proporcionar <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Crear_hipervincles#Fes_servir_un_redactat_clar">text del vincle accessible</a>; en aquest cas, el pots escriure dins del mateix element <code>&lt;a&gt;</code> o dins de l'atribut <code>alt</code> de la imatge, si va més bé.</li>
- <li><strong>Text.</strong> No s'ha de posar el text en imatges (si el encapçalament principal necessita una petita ombra, per exemple, <a href="/en-US/docs/Web/CSS/text-shadow">utilitza CSS</a> en lloc de posar el text en una imatge.) Si <em>realment no es pot evitar fer-ho</em>, s'ha de proporcionar el text dins de l'atribut <code>alt</code>.</li>
-</ul>
-
-<p>La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: WebAIM, <a href="http://webaim.org/techniques/alttext/">guia del text alternatiu</a>, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.</p>
-</div>
-
-<h3 id="Amplada_i_alçada">Amplada i alçada</h3>
-
-<p>Es poden utilitzar els atributs <code>width</code> i <code>height</code> per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar <kbd>Cmd</kbd> + <kbd>I</kbd> per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"&gt;</pre>
-
-<p>Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:</p>
-
-<p><img alt="El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<p>Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.</p>
-
-<p>La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la <a href="https://ca.wikipedia.org/wiki/Relaci%C3%B3_d%27aspecte">relació d'aspecte</a> correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si has d’alterar la mida d'una imatge, utilitza <a href="/ca/docs/Learn/CSS">CSS</a> en lloc d'HTML.</p>
-</div>
-
-<h3 id="Títols_d’imatge">Títols d’imatge</h3>
-
-<p>De la mateixa manera que <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">amb els enllaços</a>, també es pot afegir l'atribut <code>title</code> a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
-
-<p>Això ens fa aparèixer un indicador de funció (<em>tooltip</em>), igual que amb els títols dels enllaços:</p>
-
-<p><img alt="La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester" src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
-
-<p>Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.</p>
-
-<h3 id="Aprenentatge_actiu_incrustar_una_imatge">Aprenentatge actiu: incrustar una imatge</h3>
-
-<p>Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica {{htmlelement("img")}}, i volem que incrustis la imatge que hi ha en la següent URL:</p>
-
-<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
-
-<p>Sí, ja hem dit que no s’ha de fer <em>hotlink</em> d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!</p>
-
-<p>Potser també voldries:</p>
-
-<ul>
- <li>Afegir una mica de text alternatiu i comprovar que funciona quan l'adreça URL de la imatge està mal escrita.</li>
- <li>Establir l'amplada i l'alçada correcta de la imatge (pista: és 200 px d'ample i 171 px d'alt), i experimentar amb altres valors per a veure’n l’efecte.</li>
- <li>Establir un <code>title</code> per a la imatge.</li>
-</ul>
-
-<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per a veure una solució.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;img&gt;&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-  &lt;input id="solution" type="button" value="Show solution" /&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
-}
-
-.input, .output {
-  width: 90%;
-  height: 10em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-  overflow: auto;
-}
-
-button {
-  padding: 10px 10px 10px 0;
-}
-</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var code = textarea.value;
-var output = document.querySelector(".output");
-var solution = document.getElementById("solution");
-
-function drawOutput() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawOutput();
-});
-
-solution.addEventListener("click", function() {
-textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
-
-<h2 id="Descriure_imatges_amb_figures_i_peus_dimatge">Descriure imatges amb figures i peus d'imatge</h2>
-
-<p>Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:</p>
-
-<pre class="brush: html notranslate">&lt;div class="figure"&gt;
-  &lt;img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341"&gt;
-
-  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).</p>
-
-<p>Una solució més encertada és utilitzar els elements {{htmlelement("figure")}} i {{htmlelement("figcaption")}} d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:</p>
-
-<pre class="notranslate">&lt;figure&gt;
-  &lt;img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341"&gt;
-
-  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
-
-<p>L'element {{htmlelement("figcaption")}} indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element {{htmlelement("figure")}}.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu {{htmlattrxref('alt','img')}} tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu {{htmlattrxref('alt','img')}} fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.</p>
-</div>
-
-<p>Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:</p>
-
-<ul>
- <li>Expressa el seu significat en una forma compacta i d'una manera fàcil d'entendre.</li>
- <li>Podria anar en diversos llocs del flux lineal de la pàgina.</li>
- <li>Proporciona informació essencial que dona suport al text principal.</li>
-</ul>
-
-<p>Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.</p>
-
-<h3 id="Aprenentatge_actiu_crear_una_figura">Aprenentatge actiu: crear una figura</h3>
-
-<p>En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:</p>
-
-<ul>
- <li>Etiqueta’l amb un element {{htmlelement("figure")}}.</li>
- <li>Copia el text de l'atribut <code>title</code>, elimina’n l'atribut <code>title</code>; a continuació, posa el text dins d'un element {{htmlelement("figcaption")}} a sota de la imatge.</li>
-</ul>
-
-<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per a veure una solució.</p>
-
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-  &lt;input id="solution" type="button" value="Show solution" /&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
-}
-
-.input, .output {
-  width: 90%;
-  height: 10em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-  overflow: auto;
-}
-
-button {
-  padding: 10px 10px 10px 0;
-}
-</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var code = textarea.value;
-var output = document.querySelector(".output");
-var solution = document.getElementById("solution");
-
-function drawOutput() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawOutput();
-});
-
-solution.addEventListener("click", function() {
-textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
-
-<h2 id="Imatges_de_fons_de_CSS"><span id="result_box" lang="ca"><span title="CSS background images">Imatges de fons de CSS</span></span></h2>
-
-<p>També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat {{cssxref("background-image")}} de CSS, i les altres propietats <code>background*</code> s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:</p>
-
-<pre class="brush: css notranslate">p {
-  background-image: url("images/dinosaur.jpg");
-}</pre>
-
-<p>La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.</p>
-
-<p>Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Aprendreu molt més sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Fons_i_vores">imatges de fons CSS</a> en el nostre tema <a href="/ca/docs/Learn/CSS">CSS</a>.</p>
-</div>
-
-<h2 id="Sumari">Sumari</h2>
-
-<p>Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.</p>
-
-<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/ca/learn/html/multimedia_and_embedding/index.html b/files/ca/learn/html/multimedia_and_embedding/index.html
deleted file mode 100644
index d4f9d6fef8..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Multimèdia i incrustar
-slug: Learn/HTML/Multimedia_and_embedding
-tags:
-  - Assessment
-  - Audio
-  - Beginner
-  - CodingScripting
-  - Flash
-  - Guide
-  - HTML
-  - Images
-  - Landing
-  - Learn
-  - SVG
-  - Video
-  - iframes
-  - imagemaps
-  - responsive
-translation_of: Learn/HTML/Multimedia_and_embedding
-original_slug: Learn/HTML/Multimèdia_i_incrustar
----
-<div class="textArea" id="destText" style="direction: ltr;">
-<div><span class="highlighted" id="ouHighlight__0_9TO0_9">Multimèdia</span><span id="noHighlight_0.7886620835513062"> </span><span id="ouHighlight__11_13TO11_11">i</span><span id="noHighlight_0.5759707384643681"> </span><span id="ouHighlight__15_23TO13_21">incrustar</span></div>
-</div>
-
-<p>{{LearnSidebar}}</p>
-
-<p class="summary">Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.</p>
-
-<h2 id="Requisits_previs">Requisits previs</h2>
-
-<p>Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guies">Guies</h2>
-
-<p>Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imatges en HTML</a></dt>
- <dd>Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contingut d'àudio i vídeo</a></dt>
- <dd>A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; — altres tecnologies d'incrustació</a></dt>
- <dd>En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <code>&lt;iframe&gt;</code>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Afegir gràfics vectorials a la Web</a></dt>
- <dd>
- <p>Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.</p>
- </dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imatges responsive</a></dt>
- <dd>Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.</dd>
-</dl>
-
-<h2 id="Avaluació">Avaluació</h2>
-
-<p>Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Pàgina de benvinguda de Mozilla</a></dt>
- <dd>En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!</dd>
-</dl>
-
-<h2 id="Veure">Veure</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Afegir un hitmap a la part superior d'una imatge</a></dt>
- <dd>Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.</dd>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Conceptes bàsics d'alfabetització Web 2</a></dt>
- <dd>
- <p>Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul <em>Multimèdia i incrustació</em>. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.</p>
- </dd>
-</dl>
diff --git a/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
deleted file mode 100644
index 7f47d7762c..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Mozilla pàgina de benvinguda
-slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
-tags:
-  - Assessment
-  - Beginner
-  - CodingScripting
-  - Embedding
-  - HTML
-  - Images
-  - Multimedia
-  - Video
-  - iframe
-  - picture
-  - responsive
-  - sizes
-  - srcset
-translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
-original_slug: Learn/HTML/Multimèdia_i_incrustar/Mozilla_pàgina_de_benvinguda
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits Previs:</th>
-   <td>Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectiu:</th>
-   <td>Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punt_de_partida">Punt de partida</h2>
-
-<p>Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> en github. Desar el contingut d'<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> en un arxiu anomenat <code>index.html</code> en la unitat local, en un nou directori. A continuació, desar <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).</p>
-
-<p>Accedir a les diferents imatges en el directori de les <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element {{htmlelement("body")}} - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.</p>
-</div>
-
-<h2 id="Project_brief">Project brief</h2>
-
-<p>En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:</p>
-
-<h3 id="Preparar_imatges">Preparar imatges</h3>
-
-<p>Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:</p>
-
-<ul>
- <li><code>firefox_logo-only_RGB.png</code></li>
- <li><code>firefox-addons.jpg</code></li>
- <li><code>mozilla-dinosaur-head.png</code></li>
-</ul>
-
-<p>Anomenar-les d'una manera sensata, per exemple, <code>firefoxlogo400.png</code> i <code>firefoxlogo120.png</code>.</p>
-
-<p>Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'<code>informació addiciona</code>l. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que <code>index.html</code>.</p>
-
-<p>A continuació, crear una versió apaïsada de 1200 píxels d'ample de <code>red-panda.jpg</code>, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que <code>index.html</code>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.</p>
-</div>
-
-<h3 id="Afegir_un_logo_a_la_capçalera">Afegir un logo a la capçalera</h3>
-
-<p>Dins de l'element {{htmlelement("header")}}, afegir un element {{htmlelement("img")}} que incrustar la petita versió del logo de Firefox a la capçalera.</p>
-
-<h3 id="Afegir_un_vídeo_al_continut_principal_del_article">Afegir un vídeo al continut principal del article</h3>
-
-<p>Just dins de l'element {{htmlelement("article")}} (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.</p>
-
-<h3 id="Afegir_imatges_sensibles_als_enllaços_d'informació_addicional">Afegir imatges sensibles als enllaços d'informació addicional</h3>
-
-<p>Dins de {{htmlelement("div")}} amb la classe <code>further-info</code>, troben quatre elements {{htmlelement("a")}} - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element {{htmlelement("img")}} dins de cada un d'ells que continguin els atributs apropiats {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}}.</p>
-
-<p>En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.</p>
-
-<p>Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Per provar correctament els exemples <code>srcset/sizes</code>, es necessita pujar el lloc a un servidor (usant pàgines <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">imatges sensibles: eines útils per a desenvolupadors</a>.</p>
-</div>
-
-<h3 id="Un_art_dirigit_panda_vermell">Un art dirigit panda vermell</h3>
-
-<p>Dins de {{htmlelement("div")}} amb la classe <code>red-panda</code>, volem inserir un element {{htmlelement("picture")}} que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.</p>
-
-<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
-
-<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
-
-<h2 id="Avaluació">Avaluació</h2>
-
-<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampa!</p>
-
-<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
deleted file mode 100644
index caccc6782b..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
+++ /dev/null
@@ -1,319 +0,0 @@
----
-title: De objecte a iframe - altres tecnologies d'incrustació
-slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
-tags:
-  - Article
-  - Beginner
-  - CodingScripting
-  - Embedding
-  - Flash
-  - Guide
-  - HTML
-  - Learn
-  - Multimedia and embedding
-  - Object
-  - embed
-  - iframe
-translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
-original_slug: >-
-  Learn/HTML/Multimèdia_i_incrustar/De_objecte_a_iframe_altres_tecnologies_incrustació
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} i {{htmlelement("object")}}. Els &lt;iframe&gt;s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits Previs:</th>
-   <td>Coneixements bàsics d'informàtica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">programari bàsic instal.lat</a>, coneixement bàsic de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">tractar amb arxius</a>, familiaritat-se amb els fonaments d'HTML (com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici amb HTML</a>) i els articles anteriors d'aquest mòdul.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectiu:</th>
-   <td>Aprendre com inserir elements en pàgines web fent servir {{htmlelement("object")}}, {{htmlelement("embed")}} i {{htmlelement("iframe")}}, com pel·lícules Flash i altres pàgines web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Una_breu_història_de_la_incrustació">Una breu història de la incrustació</h2>
-
-<p>Fa molt de temps, a la web, era popular l'ús de <strong>marcs (frames)</strong> per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat <strong>conjunt de marcs (frameset)</strong>, el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.</p>
-
-<p>Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els <a href="/en-US/docs/Glossary/Java">Java Applets</a> i <a href="/en-US/docs/Glossary/Adobe_Flash">Flash</a> - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com {{htmlelement("object")}}, i el menys usat {{htmlelement("embed")}}, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.</p>
-
-<p>Finalment, l'element {{htmlelement("iframe")}} va aparèixer (juntament amb altres formes d'inserir contingut, com {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un {{htmlelement("img")}} o un altre element, i s'utilitza regularment en l'actualitat.</p>
-
-<p>Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.</p>
-
-<h2 id="Aprenentatge_actiu_usos_clàssics_d'incrustació">Aprenentatge actiu: usos clàssics d'incrustació</h2>
-
-<p>En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb <a href="https://www.youtube.com">Youtube</a>, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un {{htmlelement("iframe")}}.</p>
-
-<ol>
- <li>En primer lloc, anar a Youtube i trobar un vídeo que us agradi.</li>
- <li>A continuació en el vídeo trobareu un botó <em>Compartir</em> - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.</li>
- <li>Seleccioneu l'opció <em>Inserir</em> i se us donarà un cert codi <code>&lt;iframe&gt;</code> - copieu aquest.</li>
- <li>Inserir-lo en el <em>quadre</em> d'entrada de sota, i veureu quin és el resultat a la <em>sortida</em>.</li>
-</ol>
-
-<p>Per als punts de bonificació, també es podria tractar d'insertar un <a href="https://www.google.com/maps/">Google Map</a> en l'exemple:</p>
-
-<ol>
- <li>Aneu a Google Maps i trobar un mapa que us agradi.</li>
- <li>Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.</li>
- <li>Seleccioneu l'opció <em>Compartir o insetar un mapa</em>.</li>
- <li>Seleccionar l'opció insertar un mapa, us donarà un cert codi <code>&lt;iframe&gt;</code> - copieu aquest.</li>
- <li>Inserir-lo en el <em>quadre</em> d'entrada de sota, i veureu quin és el resultat a la <em>sortida</em>.</li>
-</ol>
-
-<p>Si cometeu un error, sempre es pot restablir amb el botó de <em>Reinici</em>. Si aconseguiu realment queda encallats, feu clic al botó <em>Mostra solució</em> per veure una resposta.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-  &lt;input id="solution" type="button" value="Show solution" /&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
-}
-
-.input, .output {
-  width: 90%;
-  height: 10em;
-  padding: 10px;
-  border: 1px solid #0095dd;
-  overflow: auto;
-}
-
-.output {
-  height: 14em;
-}
-
-button {
-  padding: 10px 10px 10px 0;
-}
-</pre>
-
-<pre class="brush: js">var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var code = textarea.value;
-var output = document.querySelector(".output");
-var solution = document.getElementById("solution");
-
-function drawOutput() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawOutput();
-});
-
-solution.addEventListener("click", function() {
-textarea.value = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;';
-  drawOutput();
-});
-
-textarea.addEventListener("input", drawOutput);
-window.addEventListener("load", drawOutput);
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 600) }}</p>
-
-<h2 id="Iframes_en_detall">Iframes en detall</h2>
-
-<p>Per tant, això va ser fàcil i divertit oi? Els elements {{htmlelement("iframe")}} estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como <a href="https://disqus.com/">Disqus</a>, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant &lt;iframe&gt;s.</p>
-
-<p>Hi ha alguns {{anch("Problemes de seguretat")}} greus a considerar amb els &lt;iframe&gt;s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:</p>
-
-<pre>&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox&gt;
-  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
-    Fallback link for browsers that don't support iframes
-  &lt;/a&gt; &lt;/p&gt;
-&lt;/iframe&gt;</pre>
-
-<p>Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <code>&lt;iframe&gt;</code>:</p>
-
-<dl>
- <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
- <dd>Si s'estableix, el <code>&lt;iframe&gt;</code> és capaç de ser col·locat en la manera de pantalla completa amb <a href="/en-US/docs/Web/Apps/Fundamentals/User_notifications/Full_screen_api">Full Screen API</a> (està fora de l'abast per a aquest article).</dd>
- <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
- <dd>Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant {{cssxref('border')}}: <code>none</code>; en el {{Glossary('CSS')}}.</dd>
- <dt>{{htmlattrxref('src','iframe')}}</dt>
- <dd>Aquest atribut, igual que amb {{htmlelement("video")}}/{{htmlelement("img")}}, conté una ruta que apunta a la URL del document per a ser incrustat.</dd>
- <dt>{{htmlattrxref('width','iframe')}} i {{htmlattrxref('height','iframe')}}</dt>
- <dd>Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.</dd>
- <dt>Contingut alternatiu</dt>
- <dd>De la mateixa manera que altres elements similars com {{htmlelement("video")}}, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <code>&lt;iframe&gt;&lt;/iframe&gt;</code> que apareixeran si el navegador no suporta l'etiqueta <code>&lt;iframe&gt;</code>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <code>&lt;iframe&gt;</code>s avui dia.</dd>
- <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
- <dd>Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <code>&lt;iframe&gt;</code> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Nota</strong>: Per tal de millorar la velocitat, és una bona idea establir l'atribut <code>src</code> de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important {{glossary("SEO")}}).</p>
-</div>
-
-<h3 id="Problemes_de_seguretat">Problemes de seguretat</h3>
-
-<p>Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <code>&lt;iframe&gt;</code>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <code>&lt;iframe&gt;</code>s - només s'ha de tenir cura. Seguiu llegint...</p>
-
-<p>Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: <strong>attack vector</strong>) per a les persones dolentes a la web (sovint anomenat <strong>hackers</strong>, o més exactament, <strong>crackers</strong>) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <code>&lt;iframe&gt;</code>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.</p>
-
-<div class="note">
-<p>{{interwiki('wikipedia','Clickjacking')}} és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.</p>
-</div>
-
-<p>Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trobar en Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">veure el codi font</a> també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la <em>consola</em> en les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desevolupament del navegador</a>, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per<em> X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs</em>. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <code>&lt;iframe&gt;</code>s (veure {{anch("Configure CSP directives")}}, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.</p>
-
-<h4 id="Només_incrustar_quan_sigui_necessari">Només incrustar quan sigui necessari</h4>
-
-<p>De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és <em>"Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari"</em>.</p>
-
-<div>
-<p>A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.</p>
-
-<p>Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">sota llicència CC-BY-SA</a>. Això vol dir, que s'ha d'<a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">acreditar adequadament</a> quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.</p>
-</div>
-
-<h4 id="Utilitzar_HTTPS">Utilitzar HTTPS</h4>
-
-<p>{{Glossary("HTTPS")}} és la versió encriptada de {{Glossary("HTTP")}}. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:</p>
-
-<ol>
- <li>HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,</li>
- <li>HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.</li>
-</ol>
-
-<p>L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , <em>no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. </em>(En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <code>&lt;iframe&gt;</code> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut <code>src</code> d'<code>&lt;iframe&gt;</code> quan està incrustant contingut de Google Maps o Youtube, per exemple.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Les pàgines de Github</a> permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.</p>
-</div>
-
-<h4 id="Utilitzar_sempre_l'atribut_sandbox">Utilitzar sempre l'atribut <code>sandbox</code></h4>
-
-<p>Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
-
-<p>El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut <code>sandbox</code>  sense paràmetres, com es mostra en l'exemple anterior.</p>
-
-<p>Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut <code>sandbox</code> ="" ) - veure la referència d'entrada {{htmlattrxref('sandbox','iframe')}} per a totes les opcions disponibles. Una nota important és que <em>mai</em> s'ha d'afegir tant <code>allow-scripts</code> i <code>allow-same-origin</code> al seu atribut <code>sandbox</code> - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un {{glossary("domini")}} diferent del vostre lloc principal.</p>
-</div>
-
-<h4 id="Configurar_directives_CSP">Configurar directives CSP</h4>
-
-<p>La {{Glossary("CSP")}} representa la <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong>, i proporciona <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">un conjunt de capçaleres HTTP</a> (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <code>&lt;iframe&gt;</code>s, es pot <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurar el servidor per a enviar una capçalera X-Frame-Options apropiada</a></em>. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria {{interwiki('wikipedia','clickjacking')}} i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Es pot llegir el post de Frederik Braun <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.</p>
-</div>
-
-<h2 id="Els_elements_&lt;embed>_i_&lt;object>">Els elements &lt;embed&gt; i &lt;object&gt;</h2>
-
-<p>Els elements {{htmlelement("embed")}} i {{htmlelement("object")}}  compleixen una funció diferent a {{htmlelement("iframe")}} - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Un <strong>plugin</strong> és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.</p>
-</div>
-
-<p>No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure {{anch("El cas contra els complements")}}, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.</p>
-
-<p>Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"> </th>
-   <th scope="col">{{htmlelement("embed")}}</th>
-   <th scope="col">{{htmlelement("object")}}</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{glossary("URL")}} del contingut incrustat</td>
-   <td>{{htmlattrxref('src','embed')}}</td>
-   <td>{{htmlattrxref('data','object')}}</td>
-  </tr>
-  <tr>
-   <td><em>accurate </em>{{glossary("MIME type", 'media type')}} del contingut incrustat</td>
-   <td>{{htmlattrxref('type','embed')}}</td>
-   <td>{{htmlattrxref('type','object')}}</td>
-  </tr>
-  <tr>
-   <td>l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement</td>
-   <td>{{htmlattrxref('height','embed')}}<br>
-    {{htmlattrxref('width','embed')}}</td>
-   <td>{{htmlattrxref('height','object')}}<br>
-    {{htmlattrxref('width','object')}}</td>
-  </tr>
-  <tr>
-   <td>noms i valors, per alimentar el complement com paràmetres</td>
-   <td>atributs ad hoc amb els noms i valors</td>
-   <td>elements d'una sola etiqueta {{htmlelement("param")}}, continguts dins <code>&lt;object&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Contingut HTML independent com a recurs alternatiu per a un recurs no disponible</td>
-   <td>No suportat (&lt;noembed&gt; és obsolet)</td>
-   <td>contingut dins <code>&lt;object&gt;</code>, després d'elements <code>&lt;param&gt;</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Nota</strong>: &lt;object&gt; requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut {{htmlattrxref('typemustmatch','object')}} (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un {{glossary("origen")}} diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).</p>
-</div>
-
-<p>Heus aquí un exemple que utilitza l'element {{htmlelement("embed")}} per  incrustar una pel lícula Flash (veure aquest <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en Github</a> i <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">comprovar el codi font</a> també):</p>
-
-<pre class="brush: html">&lt;embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
-
-<p>Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <code>&lt;object&gt;</code> amb un element <code>&lt;embed&gt;</code> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.</p>
-
-<p>Ara veurem un exemple &lt;object&gt;, que insereix un PDF en una pàgina (vegeu l'<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">exemple en viu</a> i el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">codi font</a>):</p>
-
-<pre class="brush: html">&lt;object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch&gt;
-  &lt;p&gt;You don't have a PDF plugin, but you can &lt;a href="myfile.pdf"&gt;download the PDF file.&lt;/a&gt;&lt;/p&gt;
-&lt;/object&gt;</pre>
-
-<p>Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts <a href="http://webaim.org/techniques/acrobat/acrobat">reptes d'accessibilitat</a> i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.</p>
-
-<h3 id="El_cas_en_contra_dels_complements_(plugins)">El cas en contra dels complements (plugins)</h3>
-
-<p>Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.</p>
-
-<ul>
- <li><strong>Ampliar el seu abast a tot el món. </strong>Tothom té un navegador, però els complements (plugins) són cada vegada mes rars, especialment entre els usuaris mòbils. Atès que la web és en gran part utilitzable sense complements (plugins), la gent prefereix anar als llocs web dels seus competidors, que instal·lar un complement (plugin).</li>
- <li><strong>Feu una pausa amb els <a href="http://webaim.org/techniques/flash/">mals de cap d'accessibilitat addicionals </a>que vénen amb Flash i altres complements (plugins).</strong></li>
- <li><strong>Mantenir-se allunyat dels riscos de seguretat addicionals</strong>. Adobe Flash és <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriament insegur,</a> fins i tot després d'un sens fi de pegats. El 2015, Alex Stamos, director de seguretat de Facebook, fins i tot va <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demanar que se suspengues Adobe Flash.</a></li>
-</ul>
-
-<p>Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i {{glossary("JavaScript")}} ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o  tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vídeo HTML5 </a>per les necessitats media, per a gràfics vectorials <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> i <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> per a imatges i animacions complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst escrivia fa uns anys </a>que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft {{glossary("Microsoft Edge","Edge")}} ja no ho suporta.</p>
-
-<h2 id="Sumari">Sumari</h2>
-
-<p>El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.</p>
-
-<p>Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com {{htmlelement("video")}}, {{htmlelement("audio")}} i {{htmlelement("img")}}, però hi ha altres a descobrir, com {{htmlelement("canvas")}} per generar en JavaScript gràfics 2D i 3D, i {{htmlelement("svg")}} per a incrustar gràfics vectorials. Aviat ens ocuparem de <a href="/en-US/docs/Web/SVG">SVG</a> en l'article següent del mòdul.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html
deleted file mode 100644
index ddcce139ff..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ /dev/null
@@ -1,255 +0,0 @@
----
-title: Imatges sensibles
-slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
-tags:
-  - Article
-  - Beginner
-  - CodingScripting
-  - Design
-  - Graphics
-  - Guide
-  - HTML
-  - Image
-  - Intermediate
-  - img
-  - sizes
-  - srcset
-translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
-original_slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<div>
-<p class="summary">En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del <a href="/en-US/docs/Learn/CSS">tema CSS</a>.</p>
-</div>
-
-<table class="learn-box nostripe standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits previs:</th>
-   <td>Heu de coneixer el fonaments <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">bàsics d'HTML</a> i com <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">afegir imatges estàtiques a una pàgina web</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectius:</th>
-   <td>Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Per_què_les_imatges_sensibles"><span class="short_text" id="result_box" lang="ca"><span>Per què</span> <span>les</span> <span>imatges</span> <span>sensibles</span></span> ?</h2>
-
-<p>Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:</p>
-
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
-
-<p>Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">veure l'example en directa</a> i trobar el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">codi font</a> en Github.) No parlarem tant de la CSS, excepte per dir que</p>
-
-<ul>
- <li>El contingut del cos s'ha ajustat a una amplada màxima de 1200 píxels - en la finestra gràfica anterior l'ample del cos es manté en 1200px i es centrat en l'espai disponible. En la finestra gràfica següent l'ample del cos romandre en el 100% de l'amplada de la finestra gràfica.</li>
- <li>La imatge de capçalera s'ha establert de manera que el seu centre es manté sempre en el centre de la capçalera, no importa quina és l'amplada de la capçalera. Així que si el lloc s'està veient en una pantalla més estreta, el detall important del centre de la imatge (el poble) encara es pot veure, i l'excés es perd per fora de cada costat. És 200 píxels d'alt.</li>
- <li>Les imatges de contingut han estat establertes de manera que si l'element del cos es fa més petit que la imatge, les imatges es comencin a encongir de manera que sempre es quedin a l'interior del cos, en lloc de desbordar-se.</li>
-</ul>
-
-<p>Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!</p>
-
-<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
-
-<p>Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el <strong> problema direcció d'art </strong>.</p>
-
-<p>A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu <strong>problema canvi de resolució</strong> - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">gràfics de vector</a>, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.</p>
-
-<p>Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.</p>
-
-<p>Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.</p>
-
-<p>Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. <em>Les tecnologies d'imatges sensibles</em> es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (<em>resolution switching</em>), o diferents imatges adequades per a diferents assignacions d'espai (<em>art direction</em>)</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Les noves característiques que es descriuen en aquest article -  {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)</p>
-</div>
-
-<h2 id="Com_crear_imatges_sensibles">Com crear imatges sensibles?</h2>
-
-<p>En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS podria dir-se que té millors eines per el disseny sensible</a>, parlarem d'elles en un futur mòdul CSS.</p>
-
-<h3 id="Canvi_de_resolució_Diferents_mides">Canvi de resolució: Diferents mides</h3>
-
-<p>Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:</p>
-
-<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
-
-<p>No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> en Github (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">el codi font</a>):</p>
-
-<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
-
-<p>Els atributs <code>srcset</code> i <code>sizes</code> es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:</p>
-
-<p><strong><code>srcset</code></strong> defineix el conjunt d'imatges que permetrà el navegador triar entre,   cada mida d'imatge. Abans de cada coma, escrivim:</p>
-
-<ol>
- <li>Un <strong>nom de fitxer d'imatge</strong> (<code>elva-fairy-480w.jpg</code>.)</li>
- <li>Un espai.</li>
- <li>L'ample de la <strong>imatge inherent en píxels</strong> (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme <kbd>Cmd</kbd> + <kbd>I</kbd> per obrir la pantalla d'informació).</li>
-</ol>
-
-<p><strong><code>sizes</code></strong> defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim</p>
-
-<ol>
- <li>una <strong>condició de medis</strong> ((<code>max-width:480px)</code>) - aprendrem més sobre això en el<a href="/en-US/docs/Learn/CSS"> tema de CSS</a>, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".</li>
- <li>Un espai.</li>
- <li>L'<strong>amplada de l'espai</strong> de la imatge s'ompli quan la condició del medi sigui certa (<code>440px</code>).</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (<code>px</code>, <code>em</code>) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.</p>
-</div>
-
-<p>Així, amb aquests atributs en el seu lloc, el navegador:</p>
-
-<ol>
- <li>Mirar l'amplada del dispositiu.</li>
- <li>Calcular quina condició del medi en la llista de <code>sizes</code> (mides) és el primer a ser veritat.</li>
- <li>Mirar la mida de l'espai donat a aquesta consulta de medis.</li>
- <li>Carregar la imatge de referència en la llista <code>srcset</code> que més s'acosti a la mida de l'espai triat.</li>
-</ol>
-
-<p>I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (<code>max-width: 480px</code>) del medi serà veritat, per tant, es triarà l'espai <code>440px</code>, de manera que el <code>elva-fada-480w.jpg</code> serà carregat, ja que el seu ample inherent (<code>480w</code>) és el més proper a <code>440px</code>. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.</p>
-
-<p>Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En el {{htmlelement("head")}} del document trobarem la línia <code>&lt;meta name = "viewport" content = "width = device-width"&gt;</code>: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).</p>
-</div>
-
-<h3 id="Eines_útils_per_a_desenvolupadors">Eines útils per a desenvolupadors</h3>
-
-<p>Hi ha algunes <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupament</a> útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.</p>
-
-<p>S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al <a href="/en-US/docs/Tools/Page_Inspector">Inspector DOM</a>, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.</p>
-
-<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
-
-<p>A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.</p>
-
-<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
-
-<h3 id="Canvi_de_resolució_Mateixa_grandària_diferents_resolucions">Canvi de resolució: Mateixa grandària, diferents resolucions</h3>
-
-<p>Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant <code>srcset</code> amb x-descriptors i sense grandaries (<code>sizes</code>) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">el codi font</a>):</p>
-
-<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
-</pre>
-
-<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">En aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):</p>
-
-<pre class="brush: css">img {
-  width: 320px;
-}</pre>
-
-<p>En aquest cas, la grandària (<code>sizes</code>) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el <code>srcset</code>. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge <code>elva-fada-320w.jpg</code> serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge <code>elva-fada-640w.jpg</code>. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.</p>
-
-<h3 id="Direcció_d'art">Direcció d'art</h3>
-
-<p>En resum, el <strong>problema de direcció d'art</strong> implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.</p>
-
-<p>Tornant al nostre exemple original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> tenim una imatge que necessita molt la direcció d'art:</p>
-
-<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
-
-<p>Arreglarem això, amb {{htmlelement("picture")}}! Igual que <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> i <code>&lt;audio&gt;</code></a>,  l'element <code>&lt;picture&gt;</code> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> es veu així:</p>
-
-<pre class="brush: html">&lt;picture&gt;
-  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
-  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
-  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
-&lt;/picture&gt;
-</pre>
-
-<ul>
- <li>Els elements <code>&lt;source&gt;</code> inclouen un atribut <code>media</code> que conté una condició de medis - igual que amb el primer exemple amb <code>srcset</code>, aquestes condicions són les proves que decideixen quina és la imatge que es mostrarà - el primer que retorna veritable és el que es mostrarà. En aquest cas, si l'amplada de la finestra gràfica és 799px d'ample o menys, es mostrarà la primera imatge de l'element <code>&lt;source&gt;</code>. Si l'amplada de la finestra gràfica és 800px o més, serà la segona.</li>
- <li>Els atributs <code>srcset</code> contenen la ruta de la imatge per mostrar. Recordeu que tal com vam veure amb <code>&lt;img&gt;</code> a dalt, <code>&lt;font&gt;</code> pot prendre un atribut <code>srcset</code> amb diverses imatges de referència, i també un atribut <code>sizes</code>. Pel que podria oferir diverses imatges a través d'un element <code>&lt;picture&gt;</code>, però  també podria ofererir múltiples resolucions de cadascuna. Sent realistes, és probable no s'hagin de fer aquest tipus de coses molt sovint.</li>
- <li>En tots els casos, s'ha de proporcionar un element <code>&lt;img&gt;</code>, amb <code>src</code> i <code>alt</code>, just abans de <code>&lt;/picture&gt;</code>, en cas contrari no apareixeran les imatges. Això proporciona un cas per defecte que s'aplicarà quan cap de les condicions de medis retorni cert (en realitat es podria treure el segon element <code>&lt;source&gt;</code> en aquest exemple), i una alternativa per als navegadors que no suporten l'element <code>&lt;picture&gt;</code>.</li>
-</ul>
-
-<p>Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:</p>
-
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: S'ha d'utilitzar el atribut <code>media</code> només en escenaris de direcció d'art; quan es fa ús de <code>media</code>, no oferir condicions de medis dins l'atribut <code>sizes</code>.</p>
-</div>
-
-<h3 id="Per_què_no_podem_fer_això_usant_CSS_o_Javascript">Per què no podem fer això usant CSS o Javascript?</h3>
-
-<p>Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com <code>srcset</code>. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.</p>
-
-<ul>
-</ul>
-
-<h3 id="Utilitzar_formats_d'imatge_moderns_audaçment"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>formats</span> <span>d'imatge</span> <span>moderns</span> <span>audaçment</span></span></h3>
-
-<p>Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.</p>
-
-<p>&lt;picture&gt; ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut <code>type</code> perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:</p>
-
-<pre class="brush: html">&lt;picture&gt;
-  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
-  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
-  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
-&lt;/picture&gt;
-</pre>
-
-<ul>
- <li>No utilitzar l'atribut <code>media</code>, llevat que també es necessiti la direcció d'art.</li>
- <li>En un element <code>&lt;source&gt;</code>, només es pot fer referència a les imatges del tipus declarat en <code>type</code>.</li>
- <li>Igual que abans, us convidem a utilitzar llistes separades per comes amb <code>srcset</code> i <code>sizes</code>, segons sigui necessari.</li>
-</ul>
-
-<h2 id="Aprenentatge_actiu_La_implementació_de_les_vostres_pròpies_imatges_sensibles">Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles</h2>
-
-<p>Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <code>&lt;picture&gt;</code>, i un exemple de canvi de resolució que utilitzi <code>srcset</code>.</p>
-
-<ol>
- <li>Escriure alguna cosa d'HTML senzilla per contenir el codi (usar <code>not-responsive.html</code> com a punt de partida, si es vol)</li>
- <li>Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).</li>
- <li>Utilitzeu l'element <code>&lt;picture&gt;</code> per implementar un selector d'imatge de direcció d'art!</li>
- <li>Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.</li>
- <li>Utilitzeu <code>srcset/size</code> per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.</p>
-</div>
-
-<h2 id="Sumari">Sumari</h2>
-
-<p>Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:</p>
-
-<ul>
- <li><strong>Direcció d'art</strong>: El problema pel qual es volem servir imatges retallades per diferentes disposicions - per exemple, una imatge apaïsada que mostra una escena completa per a un disseny d'escriptori, i una imatge retrat que mostra el tema principal enfocat, estreta per a un disseny mòbil. Això es pot resoldre mitjançant l'element {{htmlelement("picture")}}</li>
- <li><strong>Canvi de resolució</strong>: El problema pel qual es volem servir arxius d'imatge més petits a dispositius de pantalla estreta, ja que no necessiten imatges enormes com a pantalles d'escriptori - i també opcionalment servir imatges de resolució diferent a pantalles d'alta/baixa densitat. Això es pot resoldre usant<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web"> gràfics vectoriasl</a> (imatges SVG) i els atributs {{htmlattrxref ("srcset", "img")}} i {{htmlattrxref ("sizes", "img")}}.</li>
-</ul>
-
-<p>Hem arribat al final de tot, dels mòduls <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a>! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.</p>
-
-<h2 id="Veure">Veure</h2>
-
-<ul>
- <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Excel·lent introducció a les imatges sensibles, per Jason Grigsby</a></li>
- <li>{{htmlelement("img")}}</li>
- <li>{{htmlelement("picture")}}</li>
- <li>{{htmlelement("source")}}</li>
-</ul>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
diff --git a/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
deleted file mode 100644
index c37b3ecfd4..0000000000
--- a/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ /dev/null
@@ -1,295 +0,0 @@
----
-title: Contingut de vídeo i àudio
-slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-tags:
-  - Article
-  - Audio
-  - Beginner
-  - Guide
-  - HTML
-  - Video
-  - captions
-  - subtitles
-  - track
-translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-original_slug: Learn/HTML/Multimèdia_i_incrustar/Contingut_de_vídeo_i_àudio
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}; després acabarem mirant com afegir títols/subtítols als vídeos</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisits previs:</th>
-   <td>Coneixements bàsics d'informàtica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">instal.lació programari bàsic</a>, coneixements bàsics de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">treballar amb arxius</a>, familiaritzar-se amb els fonaments HTML (com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici en HTML</a>) i <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imatges en HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectiu:</th>
-   <td>Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Àudio_i_vídeo_a_la_web"><span id="result_box" lang="ca"><span title="Audio and video on the web
-
-">Àudio i vídeo a la web</span></span></h2>
-
-<p>Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (i més tard, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.</p>
-
-<p>Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació {{glossary("HTML5")}} havia afegit aquestes característiques, amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}, i alguns nous i brillants {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.</p>
-
-<p>No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">mostres d'arxiu d'àudio i vídeo i codi d'exemple</a> perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre {{glossary("OVP","OVPs")}} (proveïdors de vídeo en línia) com <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> i <a href="https://vimeo.com/">Vimeo</a>, i proveïdors d'àudio en línia com <a href="https://soundcloud.com/">Soundcloud</a>. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.</p>
-</div>
-
-<h3 id="L'element_&lt;video>">L'element &lt;video&gt;</h3>
-
-<p>L'element {{htmlelement("video")}} permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:</p>
-
-<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;</pre>
-
-<p>Les característiques de la nota són:</p>
-
-<dl>
- <dt>{{htmlattrxref("src","video")}}</dt>
- <dd>De la mateixa manera que l'element {{htmlelement("img")}}, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.</dd>
- <dt>{{htmlattrxref("controls","video")}}</dt>
- <dd>Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'<a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsia</a>.) S'ha d'utilitzar l'atribut <code>controls</code> per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'<a href="/en-US/docs/Web/API/HTMLMediaElement">API JavaScript</a> apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.</dd>
- <dt>El paràgraf dins de les etiquetes <code>&lt;video&gt;</code></dt>
- <dd>
- <p>Això es coneix com a <strong>contingut alternatiu</strong> - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <code>&lt;video&gt;</code>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.</p>
- </dd>
-</dl>
-
-<p>El vídeo incrustat es veurà semblant a això:</p>
-
-<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
-
-<p><span id="result_box" lang="ca"><span>Podeu</span></span> <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">provar l'exemple viu</a> aquí ( <span id="result_box" lang="ca"><span>vegeu</span> <span>també el</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">codi font</a>.)</p>
-
-<h3 id="Suport_de_múltiples_formats">S<span class="short_text" id="result_box" lang="ca"><span>uport</span> <span>de múltiples</span> <span>formats</span></span></h3>
-
-<p>Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).</p>
-
-<p>Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen <strong>formats contenidors</strong>. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.</p>
-
-<p>Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:</p>
-
-<ul>
- <li>Un contenidor WebM generalment empaqueta àudio Ogg Vorbis amb vídeo VP8/VP9. Això és recolzat principalment en Firefox i Chrome.</li>
- <li>Un contenidor MP4 sovint empaqueta àudio AAC o MP3 amb vídeo H.264. Això és recolzat principalment a Internet Explorer i Safari.</li>
- <li>El contenidor Ogg més antic tendeix a anar amb àudio Ogg Vorbis i vídeo Ogg Theora . Això estava recolzat principalment en Firefox i Chrome, però bàsicament ha estat substituït pel format WebM de millor qualitat.</li>
-</ul>
-
-<p>Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: No és tan senzill, com es pot veure a la nostra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">taula de compatibilitat de còdec d'àudio i de vídeo</a>. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.</p>
-</div>
-
-<p>Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents <strong>{{Glossary("Codec","Codecs")}}</strong>, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> És possible que ens pregunten per què existeix aquesta situació. <strong>MP3</strong> (per a àudio) i <strong>MP4/H.264</strong> (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.</p>
-</div>
-
-<p>Llavors, com fem això? Fer una ullada a el següent <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">exemple actualitzat</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">prova-ho qui viu aquí</a>, també):</p>
-
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;</pre>
-
-<p>Aquí hem pres l'atribut <code>src</code> fora de l'etiqueta <code>&lt;video&gt; </code>actual, i en el seu lloc hem inclòs elements {{htmlelement("source")}}, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <code>&lt;source&gt;</code> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.</p>
-
-<p>Cada element <code>&lt;source&gt;</code> també té un atribut <code>type</code>. Aquest és opcional, però s'aconsella que s'inclogui - conté el {{glossary("MIME type","MIME types")}} dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: El nostre <a href="/en-US/docs/Web/HTML/Supported_media_formats">article sobre els formats dels medis compatibles</a> conté alguna cosa en comú {{glossary("MIME type","MIME types")}}.</p>
-</div>
-
-<h3 id="Altres_característiques_de_&lt;video>"><span id="result_box" lang="ca"><span>Altres característiques</span> de <span>&lt;</span><span>video</span><span>&gt;</span></span></h3>
-
-<p>Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:</p>
-
-<pre class="brush: html">&lt;video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png"&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;
-</pre>
-
-<p>Això ens donarà una sortida semblant alguna cosa com això:</p>
-
-<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"> <span id="result_box" lang="ca"><span>Les</span> <span>noves</span> <span>característiques</span> <span>són</span><span>:</span></span></p>
-
-<dl>
- <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
- <dd>Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb {{Glossary("CSS")}}. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la <strong>relació d'aspecte</strong>. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.</dd>
- <dt>{{htmlattrxref("autoplay","video")}}</dt>
- <dd>Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.</dd>
- <dt>{{htmlattrxref("loop","video")}}</dt>
- <dd>Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.</dd>
- <dt>{{htmlattrxref("muted","video")}}</dt>
- <dd>Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.</dd>
- <dt>{{htmlattrxref("poster","video")}}</dt>
- <dd>Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.</dd>
- <dt>{{htmlattrxref("preload","video")}}</dt>
- <dd>
- <p>Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:</p>
-
- <ul>
-  <li><code>"none"</code> no emmagatzema l'arxiu en búfer</li>
-  <li><code>"auto"</code> emmagatzema l'arxiu multimèdia en búfer</li>
-  <li><code>"metadata"</code> només emmagatzema en búfer les metadades de l'arxiu</li>
- </ul>
- </dd>
-</dl>
-
-<p>Es pot trobar l'exemple anterior disponible per <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">reproduir en viu en Github</a> (també <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">veureu el codi font</a>.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!</p>
-
-<h3 id="L'element_&lt;audio>">L'element &lt;audio&gt;</h3>
-
-<p>L'element {{htmlelement("audio")}} funciona exactament de la mateixa manera que l'element {{htmlelement("video")}}, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:</p>
-
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="viper.mp3" type="audio/mp3"&gt;
-  &lt;source src="viper.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/audio&gt;</pre>
-
-<p>Això produeix alguna cosa, com el següent, en un navegador:</p>
-
-<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">executar la demostració d'àudio en viu</a> en Github (també veure el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">codi font reproductor d'àudio</a>.)</p>
-</div>
-
-<p>Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:</p>
-
-<ul>
- <li>L'element {{htmlelement("audio")}} no suporta els atributs <code>width/height</code> - de nou, no hi ha cap component visual, de manera que no hi ha res per assignar una amplada o l'alçada.</li>
- <li>Així mateix, no és compatible amb l'atribut <code>poster</code> - de nou, cap component visual.</li>
-</ul>
-
-<p>A part d'això, &lt;audio&gt; suporta les mateixes característiques que &lt;video&gt; - reviseu les seccions anteriors per obtenir més informació sobre ells.</p>
-
-<h2 id="Visualitzar_pistes_de_text_de_vídeo">Visualitzar pistes de text de vídeo</h2>
-
-<p>Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:</p>
-
-<ul>
- <li>Moltes persones tenen problemes auditius (més comunament coneguda com problemes d'audició o sordesa) pel que no poden sentir l'àudio.</li>
- <li>Altres poden no ser capaços d'escoltar l'àudio perquè es troben en ambients sorollosos (com un bar ple de gent quan s'està veient un joc d'esports) o no voldrien molestar a altres persones si estan en un lloc tranquil (com una biblioteca.)</li>
- <li>Les persones que no parlen l'idioma del vídeo, pot ser que vulguin una transcripció del text traduït o fins i tot una ajuda per entendre el contingut del medi.</li>
-</ul>
-
-<p>No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> i l'element {{htmlelement("track")}}.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.</p>
-</div>
-
-<p>WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:</p>
-
-<dl>
- <dt>subtitles</dt>
- <dd>Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.</dd>
- <dt>captions</dt>
- <dd>Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.</dd>
- <dt>timed descriptions</dt>
- <dd>Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.</dd>
-</dl>
-
-<p>Un arxiu típic WebVTT es veurà així:</p>
-
-<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
-
-1
-00:00:22.230 --&gt; 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --&gt; 00:00:34.074
-This is the second.
-
-  ...</code>
-</pre>
-
-<p>Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:</p>
-
-<ol>
- <li>Guardar-ho com un arxiu <code>.vtt</code> en un lloc sensible.</li>
- <li>Enllaçar al arxiu <code>.vtt</code> amb l'element {{htmlelement("track")}}. <code>&lt;track&gt;</code> ha de ser col·locat dins <code>&lt;audio&gt;</code> o <code>&lt;video&gt;</code>, però després de tots els <code>&lt;source&gt;</code>. Utilitzar l'atribut {{htmlattrxref("kind","track")}} per especificar si els senyals són <code>subtitles</code>, <code>captions</code> o <code>descriptions</code>. A més, utilitzar {{htmlattrxref("srclang","track")}} per indicar al navegador l'idioma en què s'han escrit els subtítols.</li>
-</ol>
-
-<p>Heus aquí un exemple:</p>
-
-<pre class="brush: html">&lt;video controls&gt;
-    &lt;source src="example.mp4" type="video/mp4"&gt;
-    &lt;source src="example.webm" type="video/webm"&gt;
-    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
-&lt;/video&gt;</pre>
-
-<p>Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:</p>
-
-<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
-
-<p>Per a més detalls, si us plau llegiu <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Afegir llegendes i subtitols a video HTML5</a>. Es pot <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trobar l'exemple</a> que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Les pistes de text també ajudan amb {{glossary("SEO")}}, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.</p>
-</div>
-
-<h2 id="Aprenentatge_actiu_Incrustar_el_nostre_àudio_i_vídeo">Aprenentatge actiu: Incrustar el nostre àudio i vídeo</h2>
-
-<p>Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> i <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Ens agradaria que ho provéssiu!</p>
-
-<p>Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">arxius d'àudio i vídeo d'exemple</a> per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.</p>
-
-<p>Ens agradaria que:</p>
-
-<ol>
- <li>Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.</li>
- <li>Crear un nou arxiu HTML en el mateix directori, anomenat <code>index.html</code>.</li>
- <li>Afegir els elements <code>&lt;audio&gt;</code> i <code>&lt;video&gt;</code> a la pàgina; fer que es mostrin els controls del navegador per defecte.</li>
- <li>Proporcionar, a tots dos, elements <code>&lt;source&gt;</code> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs <code>type</code>.</li>
- <li>Donar a l'element <code>&lt;vídeo&gt;</code> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.</li>
-</ol>
-
-<p>Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.</p>
-
-<h2 id="Sumari">Sumari</h2>
-
-<p>I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com {{htmlelement("iframe")}} i {{htmlelement("object")}}.</p>
-
-<h2 id="Veure">Veure</h2>
-
-<ul>
- <li>{{htmlelement("audio")}}</li>
- <li>{{htmlelement("video")}}</li>
- <li>{{htmlelement("source")}}</li>
- <li>{{htmlelement("track")}}</li>
- <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Afegir llegendes i subtitols a vídeo HTML5</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Lliurament d'Àudio i Vídeo</a>: Un MUNT de detalls sobre com posar àudio i vídeo en pàgines web utilitzant HTML i JavaScript.</li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulació d'Àudio i Vídeo</a>: Un MUNT de detalls sobre la manipulació d'àudio i vídeo mitjançant JavaScript (per exemple, afegir filtres)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<dl>
-</dl>
-
-<ul>
-</ul>