diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/guide | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/guide')
| -rw-r--r-- | files/ca/web/guide/ajax/getting_started/index.html | 193 | ||||
| -rw-r--r-- | files/ca/web/guide/ajax/index.html | 26 | ||||
| -rw-r--r-- | files/ca/web/guide/graphics/index.html | 50 | ||||
| -rw-r--r-- | files/ca/web/guide/html/html5/index.html | 171 | ||||
| -rw-r--r-- | files/ca/web/guide/html/using_html_sections_and_outlines/index.html | 342 | ||||
| -rw-r--r-- | files/ca/web/guide/index.html | 56 | ||||
| -rw-r--r-- | files/ca/web/guide/mobile/a_hybrid_approach/index.html | 44 | ||||
| -rw-r--r-- | files/ca/web/guide/mobile/index.html | 19 | ||||
| -rw-r--r-- | files/ca/web/guide/mobile/mobile-friendliness/index.html | 31 | ||||
| -rw-r--r-- | files/ca/web/guide/mobile/separate_sites/index.html | 32 |
10 files changed, 0 insertions, 964 deletions
diff --git a/files/ca/web/guide/ajax/getting_started/index.html b/files/ca/web/guide/ajax/getting_started/index.html deleted file mode 100644 index d93348c916..0000000000 --- a/files/ca/web/guide/ajax/getting_started/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Primers passos -slug: Web/Guide/AJAX/Getting_Started -tags: - - AJAX - - Totes_les_categories -translation_of: Web/Guide/AJAX/Getting_Started -original_slug: Web/Guide/AJAX/Primers_passos ---- -<p> -Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina. -</p> -<h3 id="Qu.C3.A8_.C3.A9s_l.27AJAX.3F" name="Qu.C3.A8_.C3.A9s_l.27AJAX.3F"> Què és l'AJAX? </h3> -<p>El <b>JavaScript asincrònic i XML</b>, (<i>Asynchronous JavaScript and XML, <b>AJAX</b>, en anglès</i>) és un neologisme per a dues potents característiques de navegació que fa anys que existeixen, però que han estat ignorades per molts desenvolupadors web fins a la recent arribada d'aplicacions com Gmail, Google suggest o Google Maps. -</p><p>Les dues característiques en qüestió són poder: -</p> -<ul><li> Fer sol·licituds al vostre servidor sense haver d'actualitzar la pàgina -</li><li> Analitzar i treballar amb documents XML -</li></ul> -<h3 id="Primer_pas_.E2.80.93_Com_fer_una_sol.C2.B7licitud_HTTP" name="Primer_pas_.E2.80.93_Com_fer_una_sol.C2.B7licitud_HTTP"> Primer pas – Com fer una sol·licitud HTTP </h3> -<p>Per a fer una sol·licitud HTTP (HTTP request) al servidor fent servir JavaScript, us cal una instància d'una classe que us en proporcioni la funcionalitat. Aquest tipus de classe va introduir-se originalment a l'Internet Explorer com a objecte ActiveX, anomenant-se <code>XMLHTTP</code>. Més endavant, Mozilla i Safari implementaren una classe, <code>XMLHttpRequest</code>, que funciona amb els mètodes i propietats de l'objecte original ActiveX de Microsoft. -</p><p>Com a resultat, per a crear una instància (objecte) de la classe perquè funcioni a tots els navegadors, heu de fer: -</p> -<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ... - sol·licitud_HTTP = new XMLHttpRequest(); -} else if (window.ActiveXObject) { // IE - sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP"); -} -</pre> -<p>(L'exemple anterior és una versió simplificada il·lustrativa del codi que s'utilitza per a crear una instància XMLHTTP. Per a un exemple del dia a dia, consulteu el tercer pas d'aquest article.) -</p><p>Algunes versions dels navegadors Mozilla no funcionaran correctament si la resposta del servidor no té una capçalera MIME XML. Per a satisfer aquesta exigència, podeu utilitzar una crida d'un mètode extra per a ignorar la capçalera que pogués enviar el servidor, si aquesta no fos <code>text/xml</code>. -</p> -<pre>sol·licitud_HTTP = new XMLHttpRequest(); -sol·licitud_HTTP.overrideMimeType('text/xml'); -</pre> -<p>Tot seguit, cal decidir què voleu fer després de rebre la resposta del servidor a la vostra sol·licitud. En aquest estadi, només cal que especifiqueu a l'objecte de sol·licitud HTTP quina funció de JavaScript processarà la resposta. -Això es fa definint la propietat <code>onreadystatechange</code> de l'objecte per al nom de la funció de JavaScript que penseu fer sevir, tal com es mostra a continuació: -</p><p><code>sol·licitud_HTTP.onreadystatechange = nom_de_la_funció;</code> -</p><p>Tingueu en compte que no hi ha parèntesis després del nom de la funció i no es passa cap paràmetre. A més, en comptes de donar un nom de funció, podeu utilitzar la tècnica de JavaScript de definir funcions al vol i les accions que en processaran la resposta, tal com es mostra a continuació: </p> -<pre>sol·licitud_HTTP.onreadystatechange = function(){ - // fes el que calgui -}; -</pre> -<p>Després d'haver declarat allò que passarà després de rebre la resposta, cal fer-ne la sol·licitud. Heu de cridar els mètodes <code>open()</code> i <code>send()</code> de la classe de sol·licitud HTTP, tal com es mostra a continuació: -</p> -<pre>sol·licitud_HTTP.open('GET', 'http://www.exemple.org/algun.fitxer', true); -sol·licitud_HTTP.send(null); -</pre> -<ul><li> El primer paràmetre de la crida a <code>open()</code> és el mètode de sol·licitud HTTP – GET, POST, HEAD o qualsevol altre mètode que ja vulgueu utilitzar i funcioni al vostre servidor. Escriviu-lo en majúscules atès que és un estàndard de l'HTTP; per altra banda, alguns navegadors (com el Firefox) podrien no processar la sol·licitud. Per a més informació dels mètodes de sol·licitud HTTP, podeu consultar les <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html" class="external">especificacions W3C</a> </li><li> El segon paràmetre és l'URL de la pàgina que esteu sol·licitant. Com a mesura de seguretat, no podeu cridar a pàgines en dominis de tercers. Assegureu-vos que utilitzeu el nom de domini exacte en totes les vostres pàgines o tindreu un error de «permís denegat» quan crideu a open(). Una trampa comuna és accedir al vostre lloc web amb domini.tld, però intentar cridar les pàgines amb www.domini.tld. -</li><li> El tercer paràmetre defineix si la sol·licitud és asincrònica. Si és així, <code>TRUE</code>, l'execució de la funció de JavaScript continuarà mentre la resposta del servidor no hagi arribat. Aquesta és l'A d'AJAX. -</li></ul> -<p>El paràmetre al mètode <code>send()</code> pot ser qualsevol dada que vulgueu enviar al servidor si s'envia la sol·licitud amb POST. Les dades cal que siguin de la forma d'una cadena de consulta com aquesta: -</p><p><code>nom=valor&un_altre_nom=un_altre_valor&i_així=anar_fent</code> -</p><p>Tingueu en compte que si voleu enviar dades amb POST, heu de canviar el tipus MIME de la sol·licitud utilitzant la següent línia: -</p> -<pre>sol·licitud_HTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); -</pre> -<p>Si no ho feu així, el servidor rebutjarà les dades que hi hàgiu enviat. -</p> -<h3 id="Segon_pas_.E2.80.93_Gestionar_la_resposta_del_servidor" name="Segon_pas_.E2.80.93_Gestionar_la_resposta_del_servidor"> Segon pas – Gestionar la resposta del servidor </h3> -<p>Recordeu que quan envieu la sol·licitud, també proporcioneu el nom de la funció JavaScript destinada a gestionar-ne la resposta. -</p><p><code>sol·licitud_HTTP.onreadystatechange = nom_de_la_funció;</code> -</p><p>Observem què hauria de fer aquesta funció. Primer, cal que comprovi l'estat de la sol·licitud. Si aquesta té el valor 4, vol dir que s'ha rebut una resposta total del servidor i podeu continuar processant-la. </p> -<pre>if (sol·licitud_HTTP.readyState == 4) { - // tot va bé, s'ha rebut la resposta -} else { - // encara no està preparada -} -</pre> -<p>La llista sencera de valors d'estat, <code>readyState</code>, és la següent: -</p> -<ul><li> 0 (sense inicialitzar) -</li><li> 1 (s'està carregant) -</li><li> 2 (carregat) -</li><li> 3 (interactiu) -</li><li> 4 (complerta) -</li></ul> -<p>(<a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp" class="external">Font</a>) -</p><p>A continuació, cal que comproveu el codi d'estat de la resposta de servidor HTTP. Tots els codis possible es llisten al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" class="external">lloc del W3C</a>. Per als nostres objectius, només ens interessa la resposta <code>200 OK</code>. -</p> -<pre>if (sol·licitud_HTTP.status == 200) { - // perfecte! -} else { - // hi ha hagut algun problema amb la sol·licitud - // per exemple, la resposta podria ser uns codis de resposta - // 404 (Not Found) o 500 (Internal Server Error) -} -</pre> -<p>Després d'haver comprovat l'estat de la sol·licitud i el codi d'estat HTTP de la resposta, heu de decidir què voleu fer amb les dades que el servidor us ha enviat. Teniu dues opcions per a accedir a les dades: -</p> -<ul><li> <code>sol·licitud_HTTP.responseText</code> – retornarà la resposta del servidor com una cadena de text. -</li><li> <code>sol·licitud_HTTP.responseXML</code> – retornarà la resposta com un objecte document XML, <code>XMLDocument</code>, que podeu recórrer utilitzant les funcions DOM de JavaScript. -</li></ul> -<h3 id="Tercer_pas_.E2.80.93_Un_exemple_simple" name="Tercer_pas_.E2.80.93_Un_exemple_simple"> Tercer pas – Un exemple simple </h3> -<p>Posem-ho tot junt i fem una sol·licitud HTTP simple. El nostre codi JavaScript sol·licitarà un document HTML, <code>prova.html</code>, que conté el text «Açò és un text.» i llavors notificarà, <code>alert()</code>, els continguts del fitxer <code>prova.html</code>. -</p> -<pre><script type="text/javascript" language="javascript"> - - - - function fes_sol·licitud(url) { - - var sol·licitud_HTTP = false; - - if (window.XMLHttpRequest) { // Mozilla, Safari,... - sol·licitud_HTTP = new XMLHttpRequest(); - if (sol·licitud_HTTP.overrideMimeType) { - sol·licitud_HTTP.overrideMimeType('text/xml'); - // Vegeu la nota a sota - } - } else if (window.ActiveXObject) { // IE - try { - sol·licitud_HTTP = new ActiveXObject("Msxml2.XMLHTTP"); - } catch (e) { - try { - sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP"); - } catch (e) {} - } - } - - if (!sol·licitud_HTTP) { - alert('S\'abandona :( No es pot crear una instància d'XMLHTTP'); - return false; - } - sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); }; - sol·licitud_HTTP.open('GET', url, true); - sol·licitud_HTTP.send(null); - - } - - function notifica_continguts(sol·licitud_HTTP) { - - if (sol·licitud_HTTP.readyState == 4) { - if (sol·licitud_HTTP.status == 200) { - alert(sol·licitud_HTTP.responseText); - } else { - alert('Hi ha hagut un problema amb la sol·licitud.'); - } - } - - } -</script> -<span - style="cursor: pointer; text-decoration: underline" - onclick="fes_sol·licitud('prova.html')"> - Fes una sol·licitud -</span> -</pre> -<p><br> -En aquest exemple: -</p> -<ul><li> L'usuari fa un clic a l'enllaç «Fes una sol·licitud»; -</li><li> Açò crida a la funció <code>fes_sol·licitud()</code> amb un paràmetre – el nom <code>prova.html</code> d'un fitxer HTML en el mateix directori; -</li><li> Es fa la sol·licitud i llavors (<code>onreadystatechange</code>) l'execució es passa a <code>notifica_continguts()</code>; -</li><li> <code>notifica_continguts()</code> comprova si la resposta s'ha rebut, i si és correcta, llavors <code>alert()</code> notifica dels continguts al fitxer <code>prova.html</code>. -</li></ul> -<p>Podeu provar l'exemple <a href="http://www.w3clubs.com/mozdev/httprequest_test.html" class="external">ací</a> i veure el fitxer de prova <a href="http://www.w3clubs.com/mozdev/test.html" class="external">també ací</a>. -</p><p><b>Nota</b>: La línia <code>sol·licitud_HTTP.overrideMimeType('text/xml');</code> anterior donarà errors a la consola de Javascript al Firefox 1.5b tal com es documenta a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" class=" link-https" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a> si la pàgina que es crida per XMLHttpRequest no és un XML vàlid (p.ex., si és text net). -</p><p>Si obteniu un error de sintaxi (Syntax Error) o de mal format (Not Well Formed Error) en el navegador, i no esteu intentant carregar una pàgina XML per XMLHttpRequest, suprimiu aquesta línia del codi. -</p><p><b>Nota 2</b>: si envieu una sol·licitud a un codi que retorni XML, en comptes d'un fitxer XML estàtic, heu d'especificar-ne algunes capçaleres de resposta si la vostra pàgina ha de funcionar amb l'Internet Explorer a més d'amb el Mozilla. Si no hi definiu la capçalera, <code>Content-Type: application/xml</code>, l'IE llançarà un error de Javascript 'Object Expected' després de la línia des d'on intenteu accedir a un element XML. Si no hi definiu una capçalera, <code>Cache-Control: no-cache</code>, el navegador emmagatzemarà a la memòria cau la resposta i no tornarà mai a trametre la sol·licitud, fent llavors que la depuració sigui tot un repte. -</p><p><b>Nota 3</b>: si la variable sol·licitud_HTTP s'utilitza globalment, aquelles funcions «competidores» que cridin a fes_sol·licitud() poden anul·lar-se unes a les altres, provocant doncs una condició de cursa. En declarar sol·licitud_HTTP com una variable local a la funció i passar-la a la funció notifica_continguts() ho evita. -</p><p><b>Note 4</b>: Per a registrar la funció de resposta onreadystatechange, no podeu tenir cap argument: -</p> -<pre>sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); }; //1 (sol·licitud simultània) -sol·licitud_HTTP.onreadystatechange = notifica_continguts(sol·licitud_HTTP); //2 (no funciona) -sol·licitud_HTTP.onreadystatechange = notifica_continguts; //3 (variable global) -</pre> -<p>El mètode 1 us permet tenir diferent sol·licituds fetes simultàniament, el 2 no funciona, i el 3 s'utilitza si sol·licitud_HTTP és una variable global. -</p> -<h3 id="Quart_pas_.E2.80.93_Treballant_amb_la_resposta_XML" name="Quart_pas_.E2.80.93_Treballant_amb_la_resposta_XML"> Quart pas – Treballant amb la resposta XML </h3> -<p>En l'anterior exemple, després que es rebés la resposta a la sol·licitud HTTP, vam fer servir la propietat <code>reponseText</code> de l'objecte de sol·licitud i contenia els continguts del fitxer <code>prova.html</code>. Provem-ho ara amb la propietat <code>responseXML</code>. -</p><p>Comencem creant un document XML vàlid, que sol·licitarem més endavant. El document (prova.xml) conté el següent: -</p> -<pre><?xml version="1.0" ?> -<root> - Açò és una prova. -</root> -</pre> -<p>A la seqüència, només cal que canviar-hi la línia de sol·licitud per: -</p> -<pre>... -onclick="fes_sol·licitud('prova.xml')"> -... -</pre> -<p>Llavors a <code>notifica_continguts()</code> cal que reemplacem la línia amb <code>alert()</code> d'<code>alert(sol·licitud_HTTP.responseText);</code> per: -</p> -<pre>var document_xml = sol·licitud_HTTP.responseXML; -var node_arrel = document_xml.getElementsByTagName('root').item(0); -alert(node_arrel.firstChild.data); -</pre> -<p>D'aquesta forma prenem l'objecte <code>XMLDocument</code> donat per <code>responseXML</code> i utilitzem els mètodes DOM per a accedir a algunes dades que es troben al document XML. Podeu veure-ho a <code>prova.xml</code> <a href="http://www.w3clubs.com/mozdev/test.xml" class="external">ací</a> i la seqüència de prova actualizada <a href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html" class="external">ací</a>. -</p><p>Per a més informació dels mètodes DOM, consulteu els documents de la <a href="http://www.mozilla.org/docs/dom/" class="external">implementació DOM de Mozilla</a>. -</p>{{ languages( { "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }} diff --git a/files/ca/web/guide/ajax/index.html b/files/ca/web/guide/ajax/index.html deleted file mode 100644 index 4531a6fd92..0000000000 --- a/files/ca/web/guide/ajax/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: AJAX -slug: Web/Guide/AJAX -tags: - - AJAX - - Totes_les_categories -translation_of: Web/Guide/AJAX ---- -<p> </p> -<div class="callout-box"><strong><a href="/ca/AJAX/Primers_passos" title="ca/AJAX/Primers_passos">Primers passos</a></strong><br> -Una introducció a AJAX.</div> -<div> -<p>El <strong>JavaScript asincrònic i XML</strong>, (<em>Asynchronous JavaScript and XML, <strong>AJAX</strong>, en anglès</em>), no és una tecnologia per si mateixa, sinó un terme que descriu una «nova aproximació» davant de tecnologies ja existents com ara: <a href="/ca/HTML" title="ca/HTML">HTML</a> o <a href="/ca/XHTML" title="ca/XHTML">XHTML</a>, <a href="/ca/CSS" title="ca/CSS">fulls d'estil en cascada</a>, <a href="/ca/JavaScript" title="ca/JavaScript">JavaScript</a>, <a href="/ca/DOM" title="ca/DOM">el model d'objectes de document</a>, <a href="/ca/XML" title="ca/XML">XML</a>, <a href="/ca/XSLT" title="ca/XSLT">XSLT</a>, i l'<a href="/ca/XMLHttpRequest" title="ca/XMLHttpRequest">l'objecte XMLHttpRequest</a>. En combinar-les totes en el model d'AJAX, les aplicacions web poden fer actualitzacions ràpides i incrementals de la interfície d'usuari sense que calgui tornar a actualitzar la pàgina des del navegador. Això fa que l'aplicació respongui més ràpidament a les accions de l'usuari.</p> -</div> -<h4 id="Documentaci.C3.B3_d.27AJAX"><a href="/Special:Tags?tag=AJAX&language=ca" title="Special:Tags?tag=AJAX&language=ca">Documentació d'AJAX</a></h4> -<dl> <dt><a href="/ca/AJAX/Primers_passos" title="ca/AJAX/Primers_passos">AJAX:Primers passos</a></dt> <dd><small>Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina.</small></dd> -</dl> -<dl> <dt><a class="external" href="http://oriolmorell.cat/arxiu/categories/tecnologia/ajax/">Notes sobre AJAX</a></dt> <dd><small>Col·lecció d'apunts sobre AJAX.</small></dd> -</dl> -<h4 id="Temes_relacionats">Temes relacionats</h4> -<dl> <dd><a href="/ca/HTML" title="ca/HTML">HTML</a>, <a href="/ca/XHTML" title="ca/XHTML">XHTML</a>, <a href="/ca/CSS" title="ca/CSS">CSS</a>, <a href="/ca/DOM" title="ca/DOM">DOM</a>, <a href="/ca/JavaScript" title="ca/JavaScript">JavaScript</a>, <a href="/ca/XML" title="ca/XML">XML</a>, <a href="/ca/XMLHttpRequest" title="ca/XMLHttpRequest">XMLHttpRequest</a>, <a href="/ca/XSLT" title="ca/XSLT">XSLT</a>, <a href="/ca/DHTML" title="ca/DHTML">DHTML</a></dd> -</dl> -<p><span>Categories</span></p> -<p><span>Interwiki Language Links</span></p> -<p> </p> -<p>{{ languages( { "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}</p> diff --git a/files/ca/web/guide/graphics/index.html b/files/ca/web/guide/graphics/index.html deleted file mode 100644 index 26a3d02437..0000000000 --- a/files/ca/web/guide/graphics/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Gràfics en la Web -slug: Web/Guide/Graphics -tags: - - 2D - - 3D - - Canvas - - Graphics - - HTML5 - - SVG - - Web - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics -original_slug: Web/Guide/Gràfics ---- -<p>Els llocs web i les aplicacions sovint necessiten presentar gràfics. Les imatges estàtiques poden visualitzar-se fàcilment usant l'element {{HTMLElement("img")}} o configurant el fons dels elements HTML utilitzant la propietat {{cssxref("background-image")}}. També podeu construir gràfics sobre la marxa o manipular imatges després de fetes. Aquests articles proporcionen informació sobre com podeu aconseguir-ho.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Gràfics_2D">Gràfics 2D</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> - <dd>L'element {{HTMLElement("canvas")}} <span id="result_box" lang="ca"><span>proporciona APIs per dibuixar gràfics 2D utilitzant JavaScript.</span></span></dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> - <dd>Els Gràfics Vectorials Escalables (SVG) permeten utilitzar línies, corbes i altres formes geomètriques per representar gràfics. Amb vectors, podeu crear imatges que s'escalen netament a qualsevol grandària.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Veure Tot...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Gràfics_3D">Gràfics 3D</h2> - -<dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>Una guia per començar amb WebGL, l'API de gràfics 3D per a la web. Aquesta tecnologia permet utilitzar OpenGL ES estàndard en contingut web.</dd> -</dl> - -<h2 id="Vídeo">Vídeo</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Ús d'àudio i vídeo HTML5 </a></dt> - <dd>Incrustar vídeo i/o àudio en una pàgina web i controlar la seva reproducció.</dd> - <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> - <dd>El RTC en WebRTC significa Comunicacions en Temps Real, tecnologia que permet la transmissió d'àudio/vídeo i l'intercanvi de dades entre clients del navegador (parells).</dd> -</dl> -</div> -</div> diff --git a/files/ca/web/guide/html/html5/index.html b/files/ca/web/guide/html/html5/index.html deleted file mode 100644 index 6ed392c033..0000000000 --- a/files/ca/web/guide/html/html5/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - Guide - - HTML - - HTML5 - - Overview - - Web - - Web Development -translation_of: Web/Guide/HTML/HTML5 ---- -<p><span class="seoSummary"><strong>HTML5</strong></span> <span id="result_box" lang="ca"><span>és l'última</span> <span>evolució</span> <span>de la norma que</span> <span>defineix</span> <a href="https://developer.mozilla.org/en-US/docs/HTML">HTML</a><span>.</span> <span>El terme</span> <span>representa</span> <span>dos conceptes</span> <span>diferents</span><span>:</span></span></p> - -<ul> - <li>És una nova versió del llenguatge HTML, amb nous elements, atributs i comportaments<span class="seoSummary">,</span></li> - <li>i un ampli conjunt de tecnologies que permet les més diverses i potents aplicacions i llocs web. Aquest conjunt es diu de vegades <em>HTML5 i amics</em> i, sovint escurçat a simplement <em>HTML5</em>.</li> -</ul> - -<p>Dissenyat per a ser utilitzable per tots els desenvolupadors de la Web Oberta, aquesta pàgina de referència enllaça a nombrosos recursos sobre tecnologies HTML5, que es classifiquen en diversos grups segons la seva funció.</p> - -<ul> - <li><em>Semàntica: </em>us permet descriure amb major precisió quin és el seu contingut.</li> - <li><em>Connectivitat</em>: us permet comunicar-vos amb el servidor de formes noves i innovadores.</li> - <li><em>Fora de línia i emmagatzematge</em>: permetre que les pàgines web emmagatzemin les dades localment en el client i funcionin de forma més eficient.</li> - <li><em>Multimèdia</em>: fer ciutadans de primera classe d'àudio i vídeo a la Web Oberta.</li> - <li><em>Gràfics i efectes 2D/3D</em>: permetre una gamma molt més àmplia d'opcions de presentació.</li> - <li><em>Rendiment i integració</em>: proporcionar una major optimització de la velocitat i un millor ús del maquinari de l'equip.</li> - <li><em>Accés al dispositiu</em>: permetre l'ús de diversos dispositius d'entrada i de sortida..</li> - <li><em>Estil</em>: deixar que els autors escriuen temes més sofisticats.</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="SemàntIcA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemàntIcA</h2> - -<dl> - <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seccions i esquemes en HTML5</a></dt> - <dd>Una ullada als nous elements d'esquema i secció en HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.</dd> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Ús d'àudio i vídeo en HTML5</a></dt> - <dd>Els elements {{HTMLElement ("àudio")}} i {{HTMLElement ("vídeo")}} incrustats, permeten la manipulació dels nous continguts multimèdia.</dd> - <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formularis en HTML5</a></dt> - <dd>Una mirada a les millores en els formularis web en HTML5: l'API de validació restringida, diversos atributs nous, nous valors per l'atribut {{htmlattrxref("type", "input")}} de l'element {{HTMLElement("input")}} i l'element nou {{HTMLElement("output")}}.</dd> - <dt><span id="result_box" lang="ca"><span class="alt-edited">Nous elements semàntics</span></span></dt> - <dd>Al costat dels elements de seccions, de medis i de formularis, hi ha nombrosos elements nous, com {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} o {{HTMLElement("meter")}} i {{HTMLElement("main")}}, <span class="short_text" id="result_box" lang="ca"><span>augmentant la</span> <span>quantitat</span> <span>d'</span></span><a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elements HTML5 vàlids</a>.</dd> - <dt><span id="result_box" lang="ca"><span>Millora en</span> <span>{</span><span>{</span><span>HTMLElement</span> <span>(</span><span>"</span><span>iframe</span><span>"</span><span>)</span><span>}</span><span>}</span></span></dt> - <dd>Utilitzant els atributs {{htmlattrxref("sandbox", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}}, els autors ara poden ser precisos sobre el nivell de seguretat i la representació desitjada d'un element {{HTMLElement("iframe")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>incorporació directa</span> <span>de fórmules</span> <span>matemàtiques.</span></span></dd> - <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducció a HTML5</a></dt> - <dd>Aquest article presenta com indicar al navegador que utilitzeu HTML5 en el vostre disseny web o una aplicació web.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analitzador HTML5 compatible</a></dt> - <dd>L'analitzador, que converteix els bytes d'un document HTML en un DOM, s'ha ampliat i ara defineix amb precisió el comportament d'utilitzar en tots els casos, fins i tot quan s'enfronten amb HTML vàlid. Això condueix a una major previsibilitat i interoperabilitat entre els navegadors compatibles amb HTML5.</dd> -</dl> - -<h2 id="Conectivitat" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Conectivitat</h2> - -<dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>creació</span> <span>d'una connexió</span> <span>permanent</span> <span>entre la pàgina</span> <span>i el servidor</span> <span>i l'intercanvi</span> <span>de dades no</span> <span>HTML</span> <span>a través d'</span><span>aquest mitjà.</span></span></dd> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Esdeveniments enviats pel servidor</a></dt> - <dd>Permet a un servidor enviar esdeveniments a un client, en lloc del paradigma clàssic en què el servidor podria enviar les dades només en resposta a la petició d'un client.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complament o una aplicació externa.</dd> -</dl> - -<h2 id="Sense_connexió_emmagatzematge" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sense connexió & emmagatzematge</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sense connexió: El cau de l'aplicació</a></dt> - <dd>Firefox és totalment compatible amb l'especificació de recursos sense connexió d'HTML5. La majoria dels altres recursos sense connexió tenen suport en un cert nivell.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb i sense connexió</a></dt> - <dd>Firefox 3 suporta WHATWG, esdeveniments amb i sense connexió, que permeten a les aplicacions i extensions detectar si hi ha o no una connexió a Internet, així com tambien, detectar quan la connexió es perd o es recupera.</dd> - <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG sessió del costat client i emmagatzamatge continu (emmagatzamatge DOM)</a></dt> - <dd><span id="result_box" lang="ca"><span>Sessió</span> <span>del costat</span> <span>client</span> <span>i</span> <span>l'emmagatzematge</span> <span>continu</span> <span>permet a les</span> <span>aplicacions</span> <span>web emmagatzemar</span> <span>dades estructurades</span> <span>al</span> <span>costat</span> <span>del client.</span></span></dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd><span id="result_box" lang="ca"><span>IndexedDB</span> <span>és</span> <span>un estàndard</span> <span>web</span> <span>per a l'emmagatzematge</span> <span>de grans</span> <span>quantitats</span> <span>de dades estructurades</span> <span>en el navegador i</span> <span>per a les</span> <span>recerques</span> <span>d'alt</span> <span>rendiment</span> <span>d'aquestes dades</span> <span>mitjançant</span> <span>índexs</span></span> .</dd> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Ús d'arxius des d'aplicacions web</a></dt> - <dd>El suport per a la nova API d'arxius d'HTML5 ha estat afegit a Gecko, per la qual cosa és possible que les aplicacions d'Internet accedeixin als arxius locals seleccionats per l'usuari. Això inclou el suport per a la selecció de diversos arxius utilitzant l'element HTML <span style="font-family: monospace;">{{HTMLElement("input")}}</span> de <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> amb el nou atribut <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. També hi ha <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> -</dl> - -<h2 id="Multimèdia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimèdia</h2> - -<dl> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">L'ús àudio i vídeo en HTML5</a></dt> - <dd>Els elements {{HTMLElement("audio")}} i {{HTMLElement("video")}} incrustats permeten la manipulació dels nous continguts multimèdia.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complement o una aplicació externa.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt> - <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd> - <dt>Pista i WebVTT</dt> - <dd>L'element {{HTMLElement("track")}} permet subtítols i capítols. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> és un format de pista de text.</dd> -</dl> - -<h2 id="Gràfics_i_efectes_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gràfics i efectes 3D</h2> - -<dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Tutorial Canvas</a></dt> - <dd>Aprendre sobre el nou element {{HTMLElement("canvas")}} i com dibuixar gràfics i altres objectes en Firefox.</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de text HTML5 per elements <code><canvas></code></a></dt> - <dd>L'API de text HTML5 és ara compatible amb elements {{HTMLElement("canvas")}}..</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL porta gràfics en 3D a la web mitjançant la introducció d'una API que s'ajusta estretament a OpenGL ÉS 2.0 que pot ser utilitzat en elements HTML5 {{HTMLElement("canvas")}}.</dd> - <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> - <dd>Un format basat en XML d'imatges vectorials que pot ser directament incrustat en el codi HTML.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Rendiment_i_Integració" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><span id="result_box" lang="ca"><span>Rendiment</span> <span>i Integració</span></span></h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Permet delegar l'avaluació de JavaScript a subprocessos en segon pla, permetent que aquestes activitats evitin alentir esdeveniments interactius.</dd> - <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> nivell 2</dt> - <dd>Permet anar a buscar de forma asíncrona algunes parts de la pàgina, la qual cosa li permet mostrar contingut dinàmic, variant segons el temps i les accions de l'usuari. Aquesta és la tecnologia que hi ha darrere d'<a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> - <dt>Motors JavaScript un compilador JIT</dt> - <dd><span id="result_box" lang="ca"><span>La nova</span> <span>generació</span> <span>de motors</span> <span>de JavaScript</span> <span>són</span> <span>molt més</span> <span>potents</span><span>, el que porta</span> <span>a un major</span> <span>rendiment</span></span>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">API historial</a></dt> - <dd>Permet la manipulació del històrial del navegador. Això és especialment útil per a les pàgines que carreguen interactivament nova informació.</dd> - <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'atribut contentEditable: Transformeu el vostre lloc web en una wiki!</a></dt> - <dd>HTML5 ha estandarditzat l'atribut contentEditable. Més informació sobre aquesta característica.</dd> - <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrosegar i deixar anar</a></dt> - <dd>El API d'arrossegar i deixar anar d'HTML5 permet el suport per arrossegar i deixar anar elements dins i entre llocs web. Això també proporciona una API senzilla per a l'ús d'extensions i aplicacions basats en Mozilla.</dd> - <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestió del focus en HTML</a></dt> - <dd>Els nous atributs d'HTML5 <code>activeElement</code> i <code>hasFocus</code> són compatibles.</dd> - <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Controladors de protocols basats en la Web</a></dt> - <dd>Ara podeu registrar aplicacions web com controladors de protocol utilitzant el mètode <code>navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> - <dd>Permet controlar les animacions de renderitzat per obtenir un rendiment òptim.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Pantalla completa</a></dt> - <dd>Controla l'ús de tota la pantalla per a una pàgina Web o aplicació, sense que es mostri la interfície d'usuari del navegador.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt> - <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb línia i sense línia</a></dt> - <dd>Amb la finalitat de construir una bona aplicació web sense connexió, necessiteu saber quan la vostra aplicació està realment fora de línia. Per cert, també necessiteu saber quan la vostra aplicació ha tornat a un estat en línia de nou.</dd> -</dl> - -<h2 id="accés_al_dispositiu" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">accés al dispositiu</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt> - <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd> - <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Esdeveniments tàctils</a></dt> - <dd>Manipuladors per reaccionar als esdeveniments creats per un usuari pressionant pantalles tàctils.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Ús de la geolocalització</a></dt> - <dd>Permet als navegadors localitzar la posició de l'usuari mitjançant la geolocalització.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecció de l'orientació del dispositiu</a></dt> - <dd>Obtenir la informació quan el dispositiu en el qual s'executa el navegador canvia l'orientació. Això pot ser usat com un dispositiu d'entrada (per exemple, per fer jocs que reaccionen a la posició del dispositiu) o per adaptar el disseny d'una pàgina a l'orientació de la pantalla (vertical o horitzontal)..</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt> - <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd> -</dl> - -<h2 id="ESTIL" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ESTIL</h2> - -<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> s'ha ampliat per ser capaç de poder donar estil als elements en una forma molt més complexa. Això es coneix com <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, encara que CSS no és una especificació monolítica i els diferents mòduls no estan tots en el nivell 3: alguns són en el nivell 1 i altres al nivell 4, amb tots els nivells intermedis coberts.</p> - -<dl> - <dt>Noves característiques d'estil de fons</dt> - <dd>Ara és possible posar una ombra a una caixa, mitjançant {{cssxref ("box-shadow")}} i es poden configurar <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">diversos fons</a>.</dd> - <dt>Més vores de luxe</dt> - <dd>No només ara és possible usar imatges per a l'estil de vores, usant {{cssxref ("border-image")}} i les seves propietats associades, també les vores arrodonides són suportades a través de la propietat {{cssxref("border-radius")}}.</dd> - <dt>Animació del vostre estil</dt> - <dd>Usant <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> per animar entre diferents estats o usar <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> per animar parts de la pàgina sense un esdeveniment desencadenant, ara podeu controlar elements mòbils en la vostra pàgina.</dd> - <dt>Tipografia millorada</dt> - <dd>Els autors tenen un millor control per arribar a una millor tipografia. Poden controlar {{cssxref ("text-overflow")}} i la separació de síl·labes <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">(hyphenation)</a>, però també poden afegir una ombra <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">(shadow)</a> a ella o controlar amb més precisió les seves decoracions <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">(decorations)</a>. Tipus de lletra personalitzades poden ser descarregades i aplicades gràcies a la nova regla {{cssxref ("@ font-face")}}.</dd> - <dt>Nous dissenys de presentació</dt> - <dd>Per tal de millorar la flexibilitat dels dissenys, s'han afegit dos nous dissenys: el <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> i <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> -</dl> -</div> -</div> diff --git a/files/ca/web/guide/html/using_html_sections_and_outlines/index.html b/files/ca/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index afe591b845..0000000000 --- a/files/ca/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Us de seccions i esquemes en HTML 5 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - Advanced - - Example - - Guide - - HTML - - HTML5 - - Outlines - - Overview - - Sections - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML ---- -<div class="warning"> -<p><strong>Important</strong>: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'<a href="http://www.w3.org/TR/html5/sections.html#outline">esquema</a> no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de <a href="http://www.w3.org/TR/html5/sections.html#rank">rang</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) per transmetre l'estructura.</p> -</div> - -<p>L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.</p> - -<h2 id="Estructura_de_un_document_en_HTML_4">Estructura de un document en HTML 4</h2> - -<p>L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <code><body></code> i <code></body></code>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}}) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.</p> - -<p>Així que el següent marcat:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="section" id="forest-elephants" > - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <div class="subsection" id="forest-habitat" > - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </div> -</div> -</pre> -</div> - -<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> - -<pre>1. Forest elephants - 1.1 Habitat -</pre> - -<p>Els elements {{HTMLElement("div")}} no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè impliqui una nova secció. Per tant aixó,</p> - -<pre class="brush:xml"><h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - <h2>Diet</h2> -<h1>Mongolian gerbils</h1> -</pre> - -<p>condueix al següent esquema:</p> - -<pre>1. Forest elephants - 1.1 Habitat - 1.2 Diet -2. Mongolian gerbils -</pre> - -<h2 id="Problemes_resolts_per_HTML5">Problemes resolts per HTML5</h2> - -<p>La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:</p> - -<ol> - <li>L'ús de {{HTMLElement("div")}} per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "div")}}, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologia d'assistència</a>, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element HTML Section.</li> - <li>La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("aside")}}), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.</li> - <li>En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.</li> - <li>Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.</li> -</ol> - -<p>De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.</p> - -<h2 id="Algoritme_d'esquema_HTML5">A<span class="short_text" id="result_box" lang="ca"><span>lgoritme</span> <span>d'esquema</span> <span>HTML5</span></span></h2> - -<p>Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.</p> - -<h3 id="Definir_seccions">Definir seccions</h3> - -<p>Tot el contingut situat a l'interior de l'element {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("body")}}, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.</p> - -<div class="note">Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("Defining headings")}}</div> - -<p>Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements {{htmlelement("section")}} i un element {{htmlelement("aside")}}:</p> - -<pre class="brush:xml"><section> - - <h1>Forest elephants</h1> - - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - - <aside> - <p>advertising block</p> - </aside> - -</section> - -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>Això ens porta al següent esquema::</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat -</pre> - -<h3 id="Definir_encapçalaments">Definir encapçalaments</h3> - -<p>Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}})) defineix el encapçalament de la secció actual.</p> - -<p>Els elements de capçalera tenen un <em>rang</em> donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més <em>alt</em>, i {{HTMLElement ("H6")}} té el rang més <em>baix</em>. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. - ...this section continues... -</section></pre> - -<p>Aixó crea el següent esquema:</p> - -<pre>1. Forest elephants - 1.1 Habitat -2. Mongolian gerbils</pre> - -<p>Recordeu que el rang de l'element d'encapçalament (en l'exemple {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("h3")}} per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)</p> - -<h3 id="Seccionament_implícit">Seccionament implícit</h3> - -<p>A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu <em>seccionament implícit</em>.</p> - -<p>Els elements de capçalera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3 class="implicit subsection">Habitat</h3> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... -</section></pre> - -<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> - -<pre>1. Forest elephants - 1.1 Habitat <em>(implicitly defined by the h3 element)</em> -</pre> - -<p>Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: </p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h1 class="implicit section">Mongolian gerbils</h1> - <p>Mongolian gerbils are cute little mammals. - ...this section continues... -</section></pre> - -<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> - -<pre>1. Forest elephants -2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em> -</pre> - -<p>Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:</p> - -<pre class="brush:xml"><body> - <h1>Mammals</h1> - <h2>Whales</h2> - <p>In this section, we discuss the swimming whales. - ...this section continues... - <section> - <h3>Forest elephants</h3> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3>Mongolian gerbils</h3> - <p>Hordes of gerbils have spread their range far beyond Mongolia. - ...this subsection continues... - <h2>Reptiles</h2> - <p>Reptiles are animals with cold blood. - ...this section continues... - </section> -</body></pre> - -<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> - -<pre>1. Mammals - 1.1 Whales <em>(implicitly defined by the h2 element)</em> - 1.2 Forest elephants <em>(explicitly defined by the section element)</em> - 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> -2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em> -</pre> - -<p>Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.</p> - -<p>Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per {{HTMLElement("h1")}} per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.</p> - -<h3 id="Arrels_de_seccionament"><a name="sectioning_root">Arrels de seccionament</a></h3> - -<p>Una <a id="sectioning root" name="sectioning root">arrel de seccionament</a> és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de {{HTMLElement("body")}} que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("td")}}.</p> - -<p>Exemple:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h2>Introduction</h2> - <p>In this section, we discuss the lesser known forest elephants</p> - </section> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. Let's - look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> - <blockquote> - <h1>Borneo</h1> - <p>The forest element lives in Borneo...</p> - </blockquote> - </section> -</section> -</pre> - -<p>El resultat d'aquest exemple en el següent esquema:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat</pre> - -<p>Aquest esquema no conté el esquema intern de l'element {{HTMLElement("blockquote")}}, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.</p> - -<h3 id="Seccions_fora_de_l'esquema">Seccions fora de l'esquema</h3> - -<p>HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:</p> - -<ol> - <li>L'element de secció HTML Aside ({{HTMLElement("aside")}}) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.</li> - <li>L'element de secció HTML de navegació ({{HTMLElement("nav")}}) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.</li> -</ol> - -<h3 id="Encapçalats_i_peus_de_pàgina">Encapçalats i peus de pàgina</h3> - -<p>HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:</p> - -<ol> - <li>L'element Header HTML ({{HTMLElement("header")}}) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.</li> - <li>L'element Footer HTML ({{HTMLElement("footer")}}) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.</li> -</ol> - -<p>Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.</p> - -<h2 id="Adreces_en_elements_de_seccionament">Adreces en elements de seccionament</h2> - -<p>L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element {{HTMLElement("address")}}, que s'ha ampliat en HTML5.</p> - -<p>Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> - -<h2 id="Usar_elements_HTML5_en_navegadors_no_HTML5">Usar elements HTML5 en navegadors no HTML5</h2> - -<p>Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb <code>display:inline</code> per defecte:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element {{HTMLElement("time")}} no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.</p> - -<p>Aquest mètode té les seves limitacions, ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit {{HTMLElement( "noscript")}} ha de ser afegit per a aquest cas:</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar scripts:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are created using JavaScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="Conclusió">Conclusió</h2> - -<p>Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.</p> - -<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/ca/web/guide/index.html b/files/ca/web/guide/index.html deleted file mode 100644 index d8bb064439..0000000000 --- a/files/ca/web/guide/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Web developer guides -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -<p><strong>Aquests articles proporcionen una guia pràctica d'informació per ajudar a fer ús de les tecnologies i les API específiques.</strong></p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Learn/HTML">HTML Àrea d'Aprenentatge</a></dt> - <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> és el nucli del llenguatge de gairebé tot el contingut web. La major part del que veieu a la pantalla en el vostre navegador es descrit, fonamentalment, amb l'ús d'HTML.</dd> - <dt class="landingPageList"> <a href="/en-US/docs/Learn/CSS">CSS Àrea d'Aprenentatge</a></dt> - <dd class="landingPageList"><span id="result_box" lang="ca"><span>Fulles</span> <span>d'estil en</span> <span>cascada</span> <span>(</span><span>CSS</span><span>)</span> <span>és</span> <span>un llenguatge de</span> <span>full d'estil</span> <span>s'utilitza</span> <span>per descriure la</span> <span>presentació</span> <span>d'un</span> <span>document</span> <span>escrit</span> <span>en HTML.</span></span></dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Esdeveniments guia per a desenvolupador</a></dt> - <dd class="landingPageList">Esdeveniments es refereix tant a un patró de disseny utilitzat per al maneig asíncrona de diversos incidents que es produeixen en el curs de la vida d'una pàgina web i a la nomenclatura, la caracterització i l'ús d'un gran nombre d'incidents de diferents tipus</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Gràfics a la Web</a></dt> - <dd class="landingPageList">Els llocs web moderns i aplicacions sovint han de presentar gràfics de complexitat variable.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guia de les Web APIs</a></dt> - <dd class="landingPageList">Una llista de totes les API Web i el que fan.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> - <dd>JavaScript és un potent llenguatge de scripting usat per crear aplicacions per a la Web.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizacions i codificaciones de caràcter</a></dt> - <dd class="landingPageList">Els navegadors procesan el text internament com Unicode. No obstant això, una forma de representar caràcters en termes de bytes (codificació de caràcters) s'utilitza per a la transferència de text a través de la xarxa al navegador. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">L'especificació HTML recomana l'ùs de la codificació UTF-8 </a> (que pot representar a tots Unicode), i independentment de la codificació utilitzada requereix de contingut web per declarar aquesta codificació.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mòvil Desenvolupament Web</a></dt> - <dd class="landingPageList">Aquesta pàgina ofereix una visió general d'algunes de les principals tècniques necessàries per dissenyar llocs web que funcionen correctament en dispositius mòbils. Si esteu buscant informació sobre el projecte Firefox OS de Mozilla, vegeu la pàgina de <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. O si esteu interessat en els detalls sobre <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox per Android</a>.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimització i rendiment</a></dt> - <dd class="landingPageList">En la construcció d'aplicacions i llocs web moderns, és important que el seu contingut funcioni de forma ràpida i eficient. Això permetrà que es realitzi de manera efectiva tant per als potents sistemes d'escriptori com per els dispositius portatils més febles.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Anàlisi i serialització XML</a></dt> - <dd class="landingPageList">La plataforma web ofereix diferents mètodes d'anàlisi sintàctica i la serialització XML, cadascun amb els seus propis avantatges i desavantatges.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">La Web Open Font Format (WOFF)</a></dt> - <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) és un format d'arxiu font que és lliure perquè qualsevol el faci servir a la web.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">L'ùs d'objectes FormData</a></dt> - <dd class="landingPageList">L'objecte <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permet compilar un conjunt de parells clau/valor per enviar mitjançant XMLHttpRequest. Està destinat principalment a l'enviament de dades de formularis, però pot ser utilitzat independentment dels formularis per tal de transmetre dades codificades. La transmissió està en el mateix format que el mètode submit() dels formularis per enviar les dades del formulari si el tipus de codificació s'estableix en "multipart/form-data".</dd> - <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossari</a></dt> - <dd class="landingPageList">Defineix nombrosos termes tècnics relacionats amb la Web i Internet.</dd> -</dl> -</div> -</div> - -<h2 id="Veure">Veure</h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> -</ul> diff --git a/files/ca/web/guide/mobile/a_hybrid_approach/index.html b/files/ca/web/guide/mobile/a_hybrid_approach/index.html deleted file mode 100644 index 64c76899c9..0000000000 --- a/files/ca/web/guide/mobile/a_hybrid_approach/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Una solució híbrida -slug: Web/Guide/Mobile/A_hybrid_approach -translation_of: Web/Guide/Mobile/A_hybrid_approach -original_slug: Web_Development/Mobile/A_hybrid_approach ---- -<p>Les bales de plata costen de trobar en el desenvolupament web — és molt més probable que empris estratègies que fan ús de vàries tècniques segons les circumstàncies. I això ens du a la nostra tercera solució pel desenvolupament web amigable amb el mòbil, que tracta d'evitar les deficiències de les altres dues solucions (<a href="/ca/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">diferents webs</a> i <a href="/ca/Web_development/Mobile/Responsive_design" title="en/Web_development/Mobile/Responsive_design">única web amb disseny sensible</a>), combinant-les.</p> -<p>Aquest enfoc híbrid se centra en atacar per separat cada un dels <a href="/ca/Web_Development/Mobile/Mobile-friendliness" title="en/Web development/Mobile/Mobile-friendliness">tres objectius del desenvolupament web per als mòbils</a>, i aplicar les millors solucions tècniques disponibles a cada un d'ells. Aquest article presenta aquí una potencial combinació de tècniques, però en altres circumstàncies pot convenir una combinació diferent. El concepte clau que cal recordar i entendre és que per resoldre les teves necesitats concretes pots combinar les tècniques que calgui de banda del servidor amb les aplicades al navegador.</p> -<h2 id="Avantatges">Avantatges</h2> -<p>El disseny sensible (<em>responsive design</em>) està força bé — ara mateix [NT: juny 2011] és la millor tècnica disponible per a fer que els nostres <em>layouts</em> web es vegin bé en una àmplia varietat de circumstàncies. Si l'ús que se li ha de donar a les versions mòbil i de PC de la teva web són suficientment similars, llavors aquesta és la solució preferible pels teus <em>layouts</em>. Encara que -no s'ha d'oblidar- pot ser una mica cansat continuament usar tècniques (CSS i Javascript) per modificar la presentació de continguts que es presenten segons el context.</p> -<p>Afortunadament, no hi ha motius tècnics que ens forcin a emprar tècniques de la banda del navegador per a aquesta tasca: tenim l'opció de fer servir la detecció del <em>user-agent</em> des de la banda del servidor per a escollir el contingut que volem mostrar a l'usuari. Això no reduirïa la complexitat d'alterar el contingut des de la banda del servidor, però encara permetria que els nostres <em>layouts</em> es beneficiessin de la flexibilitat i futura llegibilitat del disseny sensible.</p> -<p>L'ús de la detecció del <em>user-agent</em> pel contingut i no pas pel <em>layout</em> també et permetria tenir una única URL per a ambdós continguts, puix que el contingut pot adaptar la seva disposició al navegador de l'usuari. Això normalment es veu com a una <a class="external" href="http://www.w3.org/TR/mobile-bp/#OneWeb" title="W3C One Web Recommendation">bona solució</a>. En lloc de mantenir dues versions completament diferents de la web, simplement redirigim els usuaris a les planes amb el contingut que els hi escau. I donat que el disseny és sensible, saps que cada plana es veurà tan bé com és possible a la pantalla de l'usuari.</p> -<p>També podem donar solució a alguns dels problemes de rendiment del disseny sensible incorporant certes tècniques des de la banda del servidor. Per exemple, un dels punts més criticats als dissenys sensibles és que les imatges són enviades a tots els dispositius amb la mateixa resolució, incloent telèfons els quals redimensionen les imatges inteligentment. <a class="external" href="http://wurfl.sourceforge.net/utilities/imageserver.php" title="WURFL Image Server">Una tècnica</a> per a evitar aquest inconvenient empra la detecció del <em>user-agent</em> des del servidor juntament amb la llibreria de detecció de capacitat del dispositiu de <a class="external" href="http://wurfl.sourceforge.net/" title="WURFL device capability library">WURFL</a> per a enviar una imatge ja reescalada segons el dispositiu de l'usuari. Estan sorgint una <a class="external" href="http://imgble.com/" title="IMGBLE">àmplia gama</a> de <a class="external" href="http://www.sencha.com/products/io/" title="Sencha IO">productes</a> que proporcionen això com a webservice. És clar, aquesta tècnica pateix els desavantatges associats a la deteccció del <em>user-agent</em>. Però inclús si això no funciona, el rendiment no és pitjor que emprant només <a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="Fluid Images">imatges fluides</a>.</p> -<p>Combinant les tècniques ja mencionades, podem obtenir una estratègia de desenvolupament web mòbil que és més flexible que les webs fetes diferents (mòbil vs. PC) i té millor rendiment que un disseny sensible pur.</p> -<h2 id="Inconvenients">Inconvenients</h2> -<p>Un inconvenient de les solucions híbrides és que poden conduir a un augment en el nombre de vies de codi que treballen en paralel, tant del costat del navegador com del servidor. Això és tradueix en un molt probablement major consum de temps en programació que d'altres solucions. Encara que amb la correcta planificació, podem tenir el codi organitzat d'una manera asequible per les tasques de manteniment.</p> -<p>Un altre inconvenient és que com que aquesta solució romàn sobre l'ús d'un disseny sensible, és més factible i eficaç per a projectes de nova planta o que ja disposen d'un <em>layout</em> flexible, però no és així per a webs que ja tenen la versió d'escriptori ben construida. De igual forma, puix que emprem la detecció del <em>user-agent</em>, hauràs d'actualitzar les regles de detecció amb el temps continuament. [NT: donat que ja s'ha esmentat que hi ha web services que faciliten aquesta tasca amb un grau òptim de fiabilitat i amb facilitat d'integració en qualsevol CMS com una extensió o llibreria, no li veig al què a aquest inconvenient... és una opinió personal].</p> -<h2 id="Quan_és_adient_escollir_aquesta_solució">Quan és adient escollir aquesta solució</h2> -<p>Sempre té sentit considerar combinar tecnologies del costat del navegador i del servidor; n'hi ha tantes opcions disponibles en aquest sentit que convé calibrar els pros i els contres de cada tècnica que emprem.</p> -<p>En molts casos, no és necesària la complexitat afegida del model híbrid. Per exemple, potser ni necesites ajustar el contingut en funció del dispositiu emprat per l'usuari —podria ser suficient sabent si una característica és present al seu navegador. Això ho podries discernir des del costat del navegador emprant una detecció per <a class="external" href="http://www.modernizr.com/docs/#s2" title="Features Detected by Modernizr">javascript</a>. No pot fer mal excavar una mica i preguntar-te al voltant de quin eix vols centrar el teu contingut en cada cas.</p> -<p>Hem parlat d'afegir tècniques del costat del servidor a un disseny sensible, però també hi ha formes d'implementar un sistema híbrid per a casos on necesites que les versions mòbil i d'escriptori siguin diferents. Podries, per exemple, augmentar la flexibilitat d'amdós versions incorporant a cada una d'elles <em>media queries</em> [NT: indicar al navegador que carregui i apliqui diferents fulls d'estils CSS segons les característiques físiques del navegador] i un <em>layout</em> flexible. D'aquesta forma podries fer que la teva versiò mòbil treballés millor -més adaptativament- sobre les tabletes.well.</p> -<h2 id="Exemples">Exemples</h2> -<p><img align="right" alt="webowonder_mobile_and_desktop-300x225.jpg" class="internal rwrap" src="/@api/deki/files/5895/=webowonder_mobile_and_desktop-300x225.jpg">Per a la web demo de Mozilla O’ Wonder, vam provar una versió bàsica de solució híbrida, amb resultats positius. Vam emprar alguns elements de disseny web sensible per donar a la web un <em>layout</em> mòbil, mentres que empràvem la deteccció de <em>user-agent</em> per a oferir videos amigables amb el mòbil i per a re-ordenar les demos si l'usuari era en un telèfon. Fes una ullada al seu codi si vols, que tenim al <a class="link-https" href="https://github.com/mozilla/webowonder/" title="Mozilla's Web O' Wonder Source Code">github</a>.</p> -<p>Ben aviat podríem estar fent més desenvolupaments en aquesta línia! De fet, una possible via per a la web principal de Mozilla s'ha esbossat amunt a la secció "Avantatges":</p> -<ul> - <li>Emprant la detecció de <em>user-agent</em>, dirigir als visitants a una plana de benvinguda per a la versió de Firefox del seu dispositiu.</li> - <li>Cada plana de la web hauria de veure's genial a una àmplia varietat de resolucions de pantalla, construint-se amb un disseny sensible en ment.</li> - <li>Hi ha plans futurs de provar de servir imatges adaptades a diferents <em>user-agent</em>.</li> -</ul> -<p>De moment no hi ha gaire que veure pel mòbil, puix que encara som a la etapa de planificació del desenvolupament, però sempre pots visitar i veure com creix el nou mozilla.org al <a class="link-https" href="https://github.com/mozilla/bedrock" title="New Mozilla.com Source Code">github</a>. Suscriu-te al bloc <a class="external" href="http://blog.mozilla.com/webdev/" title="http://blog.mozilla.com/webdev/">Mozilla Webdev</a> per assebentar-te dels progressos que fem.</p> -<h2 id="Resum">Resum</h2> -<p>No hi ha una solució única per tots els casos. Les aplicacions web que pels usuaris de la versió mòbil necesiten adaptar molt els continguts o les funcionalitats que ofereixen probablement hauran de desenvolupar una web diferent a la d'escriptori. En canvi, planes orientades al contingut que no necesiten modificar el contingut pels usuaris mòbils quedaran bastant satisfets amb un disseny web sensible. Si el que necesites és canviar només lleugerament el missatge pels usuaris mòbils, i vols conservar els beneficis d'un disseny sensible, una solució híbrida pot ser la teva millor opció. Decisions com aquesta són al cor del desenvolupament de webs mòbils: sigues concret en quan al que t'agradaria aconseguir, i escull una solució pràctica sient conscient dels avantatges i inconvenients. Bona sort!</p> -<h2 id="Enfocs_del_desenvolupament_de_webs_mòbils">Enfocs del desenvolupament de webs mòbils</h2> -<p>Llegeix els articles següents per a entendre el fons i les estratègies de desenvolupament per a mòbils.</p> -<ul> - <li><a href="/ca/Web_Development/Mobile/Mobile-friendliness" title="Wat is CSS">Què és una web amigable amb els mòbils?</a></li> - <li><a href="/ca/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Diferents webs per la versió mòbil i la de PC</a></li> - <li><a href="/ca/Web_Development/Mobile/Responsive_design" title="en/Web development/Mobile/Responsive design">Un únic disseny sensible per la teva web</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Informació_del_document_original">Informació del document original</h3> - <p>Aquest article va ser publicat originalment al 27 de Juny de 2011, al bloc Mozilla Webdev com "<a class="external" href="http://blog.mozilla.com/webdev/2011/06/27/approaches-to-mobile-web-development-part-4-%E2%80%93-a-hybrid-approach/" title="http://blog.mozilla.com/webdev/2011/06/27/approaches-to-mobile-web-development-part-4-%E2%80%93-a-hybrid-approach/">Approaches to Mobile Web Development Part 4 – A Hybrid Approach</a>", per Jason Grlicky.</p> -</div> -<p> </p> diff --git a/files/ca/web/guide/mobile/index.html b/files/ca/web/guide/mobile/index.html deleted file mode 100644 index 8d98081f36..0000000000 --- a/files/ca/web/guide/mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Desenvolupament de webs per a mòbils -slug: Web/Guide/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -<p>Construir webs per ser vistes en dispositius mòbils requereix prendre solucions que assegurin que la web funcioni igual de bé en dispositius mòbils com ho fa en navegadors d'escriptori. Els següents articles descriuen algunes d'aquestes solucions:</p> -<ul> - <li><a class="vt-p" href="/ca/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">Què vol dir que una web és amigable amb els mòbils?</a></li> - <li><a class="vt-p" href="/ca/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Diferents webs per a mobil i per a PC</a></li> - <li><a class="vt-p" href="/ca/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Disseny sensible (<em>responsive design</em>)</a></li> - <li><a class="vt-p" href="/ca/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">Una solució híbrida</a></li> -</ul> diff --git a/files/ca/web/guide/mobile/mobile-friendliness/index.html b/files/ca/web/guide/mobile/mobile-friendliness/index.html deleted file mode 100644 index b521896f7e..0000000000 --- a/files/ca/web/guide/mobile/mobile-friendliness/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Webs amigables amb els mòbils -slug: Web/Guide/Mobile/Mobile-friendliness -translation_of: Web/Guide/Mobile/Mobile-friendliness -original_slug: Web_Development/Mobile/Mobile-friendliness ---- -<h2 id="Què_és_una_web_amigable_amb_els_mòbils">Què és una web amigable amb els mòbils?</h2> -<p>Vol dir multitud de coses segons amb qui parlis. Lo millor és veure aquest assumpte prenent com a referent els 3 objectius per a millorar l'experiència dels teus usuaris: presentació, contingut, i rendiment.</p> -<p><strong>Objectiu #1 (presentació)</strong></p> -<p><em>“Fes webs que treballin bé en qualsevol mida de pantalla.”</em></p> -<p>Avui dia els usuaris accedeixen a les webs emprant una gama amplísima de dispositius que inclou telèfons, tabletes, <em>eReaders</em>, <em>netbooks</em>, a banda dels tradicionals ordinadors d'escriptori i dels portàtils. I no cal dir que una web amb una estructura d'amplada fixe i 3 columnes, que a més usa intensivament javascript, efectes <em>mouse-over</em>, etc. no es veurà molt bé en una pantalla de 2 polzades d'amplada i un processador poc potent. En canvi, una estructura molt més aprimada, amb una estructura i uns elements redimensionats al <a class="external" href="http://www.lukew.com/ff/entry.asp?1085" title="Touch Target Sizes">tamany d'aquesta petita pantalla tàctil</a> probablement garantirà una molt millor experiència de navegació. Aquesta és la raó per la que el primer objectiu és presentar adequadament el contingut de tal manera que els usuaris mòbils tingui la vida més fàcil.</p> -<p><strong>Objectiu #2 (contingut)</strong></p> -<p><em>“Adapta els teus continguts per als usuaris mòbils.”<img align="right" alt="alaska_air_mobile_and_desktop-300x225.png" class="internal rwrap" src="/@api/deki/files/5892/=alaska_air_mobile_and_desktop-300x225.png"></em></p> -<p>Has de rumiar què deuen voler fer els que visiten la teva web des del telèfon. Un bon exemple d'això és la plana d' <a class="external" href="http://www.alaskaair.com/" title="Alaska Air">Alaska Air’s</a>. La seva web per a escriptori se centra en que els visitants facin reserves. Però probablement els usuaris mòbils estan més interessats en el <em>check-in</em> per a un vol, o veure si aquest vol s'ha retrasat. Per això van ajustar el continguts de les seves webs d'acord amb aquest raonament, i així estan atenent millor les necesitats dels usuaris mòbils.</p> -<p><strong>Objectiu #3 (rendiment)</strong></p> -<p><em>“Dona als teus usuaris una experiència fluïda, fins i tot amb una conexió lenta.”</em></p> -<p>Malgrat que la qüestió de la velocitat de conexió ha millorat força en els darrers anys, massa sovint continua sent bastant farragós la navegació sense cables des d'un dispositiu mòbil. Això fa que sigui més necesari que mai posar en pràctica <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="Best Practices for Speeding Up Your Web Site">tècniques d'optimització del rendiment</a>, enviant a l'usuari exclusivament aquells bits que siguin estrictament necesaris.</p> -<h3 id="Coneix_el_teu_públic"><strong>Coneix el teu públic</strong></h3> -<p>Encara que no sigui quelcom estrictament específic de la definició de lo que és amigable amb el mòbil, definir qui i com són els teus potencials usuaris de la teva web mòbil ajuda a concretar els tres objectius anteriors. Per exemple, és absolutament crític tenir en ment a quins navegadors i dispositius et dirigiràs quan defineixis la teva estratègia. Si entre la teva audiència hi ha molts <em>early-adopters</em> [NT: gent que sol ser dels primers en adquirir les innovacions tecnològiques], llavors et pots enfocar en tabletes i telèfons amb navegadors que solen respectar els estàndars. Però si en canvi, la majoria dels teus usuaris disposen de telèfons amb navegadors de menys capacitat, això hauria de fer desestimar segons quines estratègies o dissenys com a opcions viables.</p> -<h2 id="Enfocs_pel_desenvolupament_de_webs_mòbils">Enfocs pel desenvolupament de webs mòbils</h2> -<p>Els següents enfocs difereixen en com tracten de resoldre els objectius d'usabilitat que hem estat comentant.</p> -<ul> - <li><a href="/en/Web_development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Webs diferents per a pantalles diferents</a></li> - <li><a href="/en/Web_development/Mobile/Responsive_design" title="en/Web development/Mobile/Responsive design">Un mateix disseny però sensible (<em>responsive design</em>)</a></li> - <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Una solució híbrida</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Informació_del_document_original">Informació del document original</h3> - <p>Originalment publicat el 4 de Maig, 2011 al bloc Mozilla Webdev com "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/">Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?</a>", per Jason Grlicky.</p> -</div> -<p> </p> diff --git a/files/ca/web/guide/mobile/separate_sites/index.html b/files/ca/web/guide/mobile/separate_sites/index.html deleted file mode 100644 index 1f290e1f84..0000000000 --- a/files/ca/web/guide/mobile/separate_sites/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Diferents webs per a mòbil i PC -slug: Web/Guide/Mobile/Separate_sites -translation_of: Web/Guide/Mobile/Separate_sites -original_slug: Web_Development/Mobile/Separate_sites ---- -<p>La solucio de "webs diferents" per a la construcció de webs accesibles des del mòbil implica crear realment dos webs diferents (de contingut i forma) per als usuaris mòbils i pels que ens visiten des de l'escriptori de l'ordinador/portàtil. Aquesta solució -com les altres- té els seus avantatges però també els seus inconvenients.</p> -<h2 id="Avantatges">Avantatges</h2> -<p>La primera opció és de lluny la més popular i habitual: emprar des del teu codi al servidor la <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">detecció del <em>user-agent</em> del visitant</a> de la web per a redirigir o mostrar una web específicament dissenyada pels mòbils, típicament ubicada a una URL del tipus <em>m.example.com</em>. Així, aquesta tècnica que empra una lògica construida del costat del servidor resol d'un sol cop <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">els tres objectius del desenvolupament web</a> — si sembla que el navegador de l'usuari està corrent en un telèfon llavors la nostra aplicació li proporcionarà un contingut adaptat en tots el sentits per al mòbil i per tant optimitzat en rendiment, en tots els sentits.</p> -<p>Conceptualment senzill, aquesta és la opció més fàcil per a afegir a una web existent, especialment si estàs emprant un CMS o una aplicació web que suporta plantilles pel disseny de manera més o menys flexible. Donat que a l'usuari se li envien només continguts, estils i scripts especifics pel mòbil, aquest métode també proporciona el millor rendiment per sobre de qualsevol dels altres que aquí presentem. Per acabar, també permet donar als usuaris dos experiències completament diferents quan visiten una web o una altra, perqué realment són dos webs diferents.</p> -<h2 id="Inconvenients">Inconvenients</h2> -<p>Per desgràcia, no falten els inconvenients. Per començar, hauràs de mantenir per duplicat totes les planes de la teva web que vulguis mostrar als usuaris mòbils. Si estàs emprant un CMS, és posible reorganitzar les plantilles de la web per a minimitzar aquesta feina de duplicació. Però sempre que hi hagi una diferència entre les plantilles mòbil i d'escriptori, hi haurà una potencial font de complicacions en el teu codi. Igualment, aquesta situació incrementa el temps necesari per a afegir noves característiques o continguts a la web, perqué has d'implementar el teu codi en dos lògiques de <em>frontend</em> diferents.</p> -<p>Més important que això, hi ha el fet de que la detecció del <em>user-agent</em> és una tasca <a class="external" href="http://css-tricks.com/browser-detection-is-bad/" title="Browser Detection is Bad">inherentment defectuosa</a> i amb una alta probabilitat de que amb el pas del temps funcioni malament quan vagin sortint nous dispositius i configuracions de navegador. Cada cop que aparegui un nou navegador hauràs d'ajustar el teu algorisme de detecció per a identificar-lo. I els <em>falsos positius</em> (quan es detecta algo que no és) són particularment inconvenients: podria ser vergonyòs servir la versiò mòbil de la web a un usuari d'escriptori.</p> -<p>[NT: cal dir que hi ha llibreries i webservices que t'ajuden en aquesta detecció del user-agent amb prou fiabilitat, perqué hi ha un equip a darrera que s'encarrega de la seva continua actualització. Això garantiria bastant el que la teva aplicació de servidor sempre interpretés correctament el <em>user-agent </em>del visitant i et permet no només saber el tamany de la pantalla sinó també altres característiques com si és touch. Un bon exemple és el webservice <a href="http://wurfl.thesedays.com/" title="http://wurfl.thesedays.com/">Tera-WURFL</a>.]</p> -<h2 id="Quan_és_adient_escollir_aquesta_solució">Quan és adient escollir aquesta solució</h2> -<p><img align="right" alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png">Primerament, si el teu públic potencial inclou usuaris amb <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">telèfons vells o de capacitat limitada</a>, val la pena assenyalar que necesitaries implementar aquesta solució en algun grau sí o sí encara que no sigui completament. Això és perqué el navegador que porten alguns telèfons no solen ser compatibles amb cert codi que tú empraries normalment en una web per a l'escriptori, però en canvi s'entenen força bé amb formats com <a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a> o el vell <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a>.</p> -<p>Fora d'això, hi ha un cas en el que aquesta estratègia realment destaca per sobre de qualsevol altre. Si la funcionalitat que tú vols fer arribar als teus usuaris mòbils és bastant diferent de la que normalment ofereixes a la web d'escriptori, llavors usar dos webs diferents per a cada escenari és simplement <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">la millor opció</a>. Perqué així tens la opció d'enviar HTML, Javascript i CSS completament diferents als mòbils i als PCs.</p> -<p>Un altre cas on tú estaries forçat a prendre una solució com aquesta és si, per qualsevol raó, no poguessis modificar la web d'escriptori tal com està, llavors necesitaries una web 100% diferent pel mòbil.</p> -<h2 id="Exemples">Exemples</h2> -<p>La majoria de les aplicacions webs que has vist de les grans empreses a internet han optat per aquesta via, incloent <a class="external" href="http://m.facebook.com/">Facebook</a>, <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, i <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>. De fet, Mozilla emprà aquesta solució per a les versions mòbils de <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) i <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO). Si volguessis veure el codi font d'aquests exemples en acció, pren-te la llibertat de consultar el <a class="link-https" href="https://github.com/jbalogh/zamboni/">repositori a github per a AMO</a> o <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>.</p> -<h2 id="Altres_enfocs_pel_desenvolupament_web_mòbil">Altres enfocs pel desenvolupament web mòbil</h2> -<p>Fes una ullada als següents articles sobre el desenvolupament de la web mòbil.</p> -<ul> - <li><a href="/ca/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">Què és una web amigable amb el mòbil?</a></li> - <li><a href="/ca/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Disseny web sensible (un únic disseny que s'adapta al navegador)</a></li> - <li><a href="/ca/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">Una solució híbrida</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Informació_del_document_original">Informació del document original</h3> - <p>Aquest article va ser publicat originalment el 13 de Maig de 2011, al bloc Mozilla Webdev com "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">Approaches to Mobile Web Development Part 2 – Separate Sites</a>", per Jason Grlicky.</p> -</div> -<p> </p> |