unslug ca: move

71 files changed, 695 insertions, 0 deletions

diff --git a/files/ca/learn/accessibility/que_es_accessibilitat/index.html b/files/ca/learn/accessibility/what_is_accessibility/index.html
index 6d8891a20c..6d8891a20c 100644
--- a/files/ca/learn/accessibility/que_es_accessibilitat/index.html
+++ b/files/ca/learn/accessibility/what_is_accessibility/index.html
diff --git a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html
index 3a4df8a2b2..3a4df8a2b2 100644
--- a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html
+++ b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html
diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html
index 2e2ce4727c..2e2ce4727c 100644
--- a/files/ca/learn/css/building_blocks/fons_i_vores/index.html
+++ b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html
diff --git a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html
index 09a5e368eb..09a5e368eb 100644
--- a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html
+++ b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html
diff --git a/files/ca/learn/css/caixes_estil/creació_carta/index.html b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
index 2623d6d0dd..2623d6d0dd 100644
--- a/files/ca/learn/css/caixes_estil/creació_carta/index.html
+++ b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/debugging_css/index.html
index 273468969e..273468969e 100644
--- a/files/ca/learn/css/building_blocks/depurar_el_css/index.html
+++ b/files/ca/learn/css/building_blocks/debugging_css/index.html
diff --git a/files/ca/learn/css/introducció_a_css/comprensió_css_fonamental/index.html b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html
index 34a654269a..34a654269a 100644
--- a/files/ca/learn/css/introducció_a_css/comprensió_css_fonamental/index.html
+++ b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html
diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/overflowing_content/index.html
index 2ee0dc6129..2ee0dc6129 100644
--- a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html
+++ b/files/ca/learn/css/building_blocks/overflowing_content/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 6ab61828f8..6ab61828f8 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
index 175379f986..175379f986 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors/index.html
index 4bd7b005de..4bd7b005de 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index b28cb4873a..b28cb4873a 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 2cdbdc244a..2cdbdc244a 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
index 5ff34b8d93..5ff34b8d93 100644
--- a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html
+++ b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/values_and_units/index.html
index b754bd27ac..b754bd27ac 100644
--- a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html
+++ b/files/ca/learn/css/building_blocks/values_and_units/index.html
diff --git a/files/ca/learn/css/disseny_css/flexbox/index.html b/files/ca/learn/css/css_layout/flexbox/index.html
index 37f31f619b..37f31f619b 100644
--- a/files/ca/learn/css/disseny_css/flexbox/index.html
+++ b/files/ca/learn/css/css_layout/flexbox/index.html
diff --git a/files/ca/learn/css/disseny_css/flotadors/index.html b/files/ca/learn/css/css_layout/floats/index.html
index 25d2fe01a6..25d2fe01a6 100644
--- a/files/ca/learn/css/disseny_css/flotadors/index.html
+++ b/files/ca/learn/css/css_layout/floats/index.html
diff --git a/files/ca/learn/css/disseny_css/graelles/index.html b/files/ca/learn/css/css_layout/grids/index.html
index af97c6f989..af97c6f989 100644
--- a/files/ca/learn/css/disseny_css/graelles/index.html
+++ b/files/ca/learn/css/css_layout/grids/index.html
diff --git a/files/ca/learn/css/disseny_css/index.html b/files/ca/learn/css/css_layout/index.html
index e74e5da0b9..e74e5da0b9 100644
--- a/files/ca/learn/css/disseny_css/index.html
+++ b/files/ca/learn/css/css_layout/index.html
diff --git a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html b/files/ca/learn/css/css_layout/introduction/index.html
index 88a924dc00..88a924dc00 100644
--- a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html
+++ b/files/ca/learn/css/css_layout/introduction/index.html
diff --git a/files/ca/learn/css/disseny_css/flux_normal/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html
index ac44f6a95a..ac44f6a95a 100644
--- a/files/ca/learn/css/disseny_css/flux_normal/index.html
+++ b/files/ca/learn/css/css_layout/normal_flow/index.html
diff --git a/files/ca/learn/css/disseny_css/posicionament/index.html b/files/ca/learn/css/css_layout/positioning/index.html
index 213293ff4e..213293ff4e 100644
--- a/files/ca/learn/css/disseny_css/posicionament/index.html
+++ b/files/ca/learn/css/css_layout/positioning/index.html
diff --git a/files/ca/learn/css/disseny_css/exemples_pràctics_posicionament/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html
index dfaac7f63c..dfaac7f63c 100644
--- a/files/ca/learn/css/disseny_css/exemples_pràctics_posicionament/index.html
+++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html
diff --git a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html b/files/ca/learn/css/css_layout/responsive_design/index.html
index 5bf909e6e7..5bf909e6e7 100644
--- a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html
+++ b/files/ca/learn/css/css_layout/responsive_design/index.html
diff --git a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html
index 5a689b6437..5a689b6437 100644
--- a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html
+++ b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html
diff --git a/files/ca/learn/css/first_steps/com_començar_amb_css/index.html b/files/ca/learn/css/first_steps/getting_started/index.html
index dfc1ae29b3..dfc1ae29b3 100644
--- a/files/ca/learn/css/first_steps/com_començar_amb_css/index.html
+++ b/files/ca/learn/css/first_steps/getting_started/index.html
diff --git a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html b/files/ca/learn/css/first_steps/how_css_is_structured/index.html
index 6c216af68c..6c216af68c 100644
--- a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html
+++ b/files/ca/learn/css/first_steps/how_css_is_structured/index.html
diff --git a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html b/files/ca/learn/css/first_steps/how_css_works/index.html
index 9621d2c21c..9621d2c21c 100644
--- a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html
+++ b/files/ca/learn/css/first_steps/how_css_works/index.html
diff --git a/files/ca/learn/css/first_steps/que_es_el_css/index.html b/files/ca/learn/css/first_steps/what_is_css/index.html
index b158b8e62e..b158b8e62e 100644
--- a/files/ca/learn/css/first_steps/que_es_el_css/index.html
+++ b/files/ca/learn/css/first_steps/what_is_css/index.html
diff --git a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html b/files/ca/learn/css/styling_text/fundamentals/index.html
index e258171ffc..e258171ffc 100644
--- a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html
+++ b/files/ca/learn/css/styling_text/fundamentals/index.html
diff --git a/files/ca/learn/css/estilitzar_text/index.html b/files/ca/learn/css/styling_text/index.html
index c815d83297..c815d83297 100644
--- a/files/ca/learn/css/estilitzar_text/index.html
+++ b/files/ca/learn/css/styling_text/index.html
diff --git a/files/ca/learn/css/estilitzar_text/estilitzar_enllaços/index.html b/files/ca/learn/css/styling_text/styling_links/index.html
index 448a53289d..448a53289d 100644
--- a/files/ca/learn/css/estilitzar_text/estilitzar_enllaços/index.html
+++ b/files/ca/learn/css/styling_text/styling_links/index.html
diff --git a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html b/files/ca/learn/css/styling_text/styling_lists/index.html
index 6caa6e0e24..6caa6e0e24 100644
--- a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html
+++ b/files/ca/learn/css/styling_text/styling_lists/index.html
diff --git a/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html
index 2619be67e7..2619be67e7 100644
--- a/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html
+++ b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html
diff --git a/files/ca/learn/css/estilitzar_text/fonts_web/index.html b/files/ca/learn/css/styling_text/web_fonts/index.html
index b4d1e8ecfd..b4d1e8ecfd 100644
--- a/files/ca/learn/css/estilitzar_text/fonts_web/index.html
+++ b/files/ca/learn/css/styling_text/web_fonts/index.html
diff --git a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html b/files/ca/learn/forms/basic_native_form_controls/index.html
index 73ee2a9249..73ee2a9249 100644
--- a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html
+++ b/files/ca/learn/forms/basic_native_form_controls/index.html
diff --git a/files/ca/learn/html/forms/validacio_formularis/index.html b/files/ca/learn/forms/form_validation/index.html
index 0b76183d7e..0b76183d7e 100644
--- a/files/ca/learn/html/forms/validacio_formularis/index.html
+++ b/files/ca/learn/forms/form_validation/index.html
diff --git a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html b/files/ca/learn/forms/how_to_structure_a_web_form/index.html
index c0cb1e022c..c0cb1e022c 100644
--- a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html
+++ b/files/ca/learn/forms/how_to_structure_a_web_form/index.html
diff --git a/files/ca/learn/html/forms/index.html b/files/ca/learn/forms/index.html
index bfd01dcf91..bfd01dcf91 100644
--- a/files/ca/learn/html/forms/index.html
+++ b/files/ca/learn/forms/index.html
diff --git a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html b/files/ca/learn/forms/your_first_form/index.html
index 3f327d4494..3f327d4494 100644
--- a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html
+++ b/files/ca/learn/forms/your_first_form/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/css_bàsic/index.html b/files/ca/learn/getting_started_with_the_web/css_basics/index.html
index 991a20ca78..991a20ca78 100644
--- a/files/ca/learn/getting_started_with_the_web/css_bàsic/index.html
+++ b/files/ca/learn/getting_started_with_the_web/css_basics/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html b/files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html
index 0ba94d3273..0ba94d3273 100644
--- a/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html
+++ b/files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html b/files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html
index 4a36fb2bff..4a36fb2bff 100644
--- a/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html
+++ b/files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/instal·lació_bàsica_programari/index.html b/files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html
index aa431f3199..aa431f3199 100644
--- a/files/ca/learn/getting_started_with_the_web/instal·lació_bàsica_programari/index.html
+++ b/files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/javascript_bàsic/index.html b/files/ca/learn/getting_started_with_the_web/javascript_basics/index.html
index e9b90830ca..e9b90830ca 100644
--- a/files/ca/learn/getting_started_with_the_web/javascript_bàsic/index.html
+++ b/files/ca/learn/getting_started_with_the_web/javascript_basics/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html b/files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html
index 0329bbfcd0..0329bbfcd0 100644
--- a/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html
+++ b/files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html
diff --git a/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindrà_vostre_lloc_web/index.html b/files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
index a7e5ef4b2c..a7e5ef4b2c 100644
--- a/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindrà_vostre_lloc_web/index.html
+++ b/files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
diff --git a/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..6c683a8156
--- /dev/null
+++ b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,186 @@
+---
+title: Consells per crear pàgines HTML de càrrega ràpida
+slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida
+tags:
+  - Advanced
+  - Guide
+  - HTML
+  - NeedsUpdate
+  - Performance
+  - Web
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p><span id="result_box" lang="ca"><span>Aquests consells</span> <span>es</span> <span>basen</span> <span>en el coneixement</span> <span>i</span> <span>l'experimentació</span> <span>comuna.</span></span></p>
+
+<p>Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.</p>
+
+<p>Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.</p>
+
+<h2 id="Consells">Consells</h2>
+
+<h3 id="Reduir_el_pes_de_la_pàgina"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>el pes</span> <span>de la pàgina</span></span></h3>
+
+<p>El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.</p>
+
+<p>La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.</p>
+
+<p>Eines com ara <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.</p>
+
+<h3 id="Reduir_al_mínim_el_nombre_d'arxius"><span class="short_text" id="result_box" lang="ca"><span>Reduir al</span> <span>mínim el</span> <span>nombre d'arxius</span></span></h3>
+
+<p>La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> necessaries per descarregar una pàgina.</p>
+
+<p>Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició <code>If-Modified-Since</code> al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.</p>
+
+<p>En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.</p>
+
+<p>Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.</p>
+
+<p>L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.</p>
+
+<h3 id="Reduir_la_recerca_de_dominis"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>la recerca</span> <span>de dominis</span></span></h3>
+
+<p>Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.</p>
+
+<p>Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.</p>
+
+<h3 id="Contingut_reutilitzat_en_memòria_cau"><span class="short_text" id="result_box" lang="ca"><span>Contingut</span> <span>reutilitzat</span> <span>en memòria cau</span></span></h3>
+
+<p>Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.</p>
+
+<p>En concret, presteu atenció a la capçalera <code>Last-Modified</code>. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera <code>Last-Modified</code> a pàgines estàtiques (per exemple <code>.html, .css</code>), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, <code>.php, .aspx</code>), això, per descomptat, no es pot fer, i la capçalera no s'envia.</p>
+
+<p>Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.</p>
+
+<p>Més informació:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Ordenar_de_manera_òptima_els_components_de_la_pàgina">Ordenar de manera òptima els components de la pàgina</h3>
+
+<p>Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.</p>
+
+<p>Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduir el nombre de scripts en línia</h3>
+
+<p>Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de <code>document.write()</code> per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'<a href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a> per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en <code>document.write()</code>.</p>
+
+<h3 id="Utilitzar_CSS_modern_i_marcat_vàlid"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>CSS</span> <span>modern</span> <span>i</span> <span>marcat</span> <span>vàlid</span></span></h3>
+
+<p>L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.</p>
+
+<p>L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).</p>
+
+<p>D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.</p>
+
+<h3 id="Part_del_teu_contingut">Part del teu contingut</h3>
+
+<p>Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> o <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, s'han d'utilitzar al seu lloc.</p>
+
+<p>Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.</p>
+
+<p>En lloc de niar profundament les taules com en:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>utilitzar</span> <span>taules no</span> <span>niats</span> <span>o</span> <span>divs</span> <span>com</span> <span>a</span></span>:</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Veure: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> i <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Minimitzar_i_comprimir_recursos_SVG">Minimitzar i comprimir recursos SVG</h3>
+
+<p>SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.</p>
+
+<h3 id="Especificar_les_mides_de_les_imatges_i_taules"><span class="short_text" id="result_box" lang="ca"><span>Especificar</span> <span>les mides de les</span> <span>imatges</span> <span>i</span> <span>taules</span></span></h3>
+
+<p>Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, <code>height</code> i <code>width</code> s'han d'especificar per a les imatges, sempre que sigui possible.</p>
+
+<p><span id="result_box" lang="ca"><span>Les</span> <span>taules</span> <span>han d'utilitzar la combinació CSS</span> <span>selector:propietat</span><span>:</span></span></p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML <code>COL</code> i <code>COLGROUP</code>.</p>
+
+<h3 id="Trieu_els_vostres_requisits_d'agent_d'usuari_sàviament">Trieu els vostres requisits d'agent d'usuari sàviament</h3>
+
+<p>Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.</p>
+
+<p>L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.</p>
+
+<p>Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Exemple de l'estructura d'una pàgina</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+  <dd>Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Utilitzar_asyn_i_defer_si_és_possible">Utilitzar asyn i defer, si és possible</h2>
+
+<p>Fer que els scripts de JavaScript siguin compatibles tant amb <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> i <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> i utilitzar <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.</p>
+
+<p>Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.</p>
+
+<h2 id="Enllaços_relacionats"><span class="short_text" id="result_box" lang="ca"><span>Enllaços</span> <span>relacionats</span></span></h2>
+
+<ul>
+ <li>Llibre: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li><span id="result_box" lang="ca"><span>Les</span> <span>excel·lents i</span> <span>molt</span> <span>completes</span></span> <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li><span id="result_box" lang="ca"><span>Eines</span> <span>per a l'anàlisi</span> <span>i</span> <span>l'optimització</span> <span>del rendiment</span></span> : <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>
diff --git a/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html b/files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 8163f0b4c3..8163f0b4c3 100644
--- a/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html
+++ b/files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html
diff --git a/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html b/files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html
index c2bc2d0b0c..c2bc2d0b0c 100644
--- a/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html
+++ b/files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html
diff --git a/files/ca/learn/html/introducció_al_html/depurar_html/index.html b/files/ca/learn/html/introduction_to_html/debugging_html/index.html
index 5d8feaea62..5d8feaea62 100644
--- a/files/ca/learn/html/introducció_al_html/depurar_html/index.html
+++ b/files/ca/learn/html/introduction_to_html/debugging_html/index.html
diff --git a/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html b/files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html
index 1088731eea..1088731eea 100644
--- a/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html
+++ b/files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html
diff --git a/files/ca/learn/html/introducció_al_html/getting_started/index.html b/files/ca/learn/html/introduction_to_html/getting_started/index.html
index 03b70effc6..03b70effc6 100644
--- a/files/ca/learn/html/introducció_al_html/getting_started/index.html
+++ b/files/ca/learn/html/introduction_to_html/getting_started/index.html
diff --git a/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html b/files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html
index fafc49effe..fafc49effe 100644
--- a/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html
+++ b/files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html
diff --git a/files/ca/learn/html/introducció_al_html/index.html b/files/ca/learn/html/introduction_to_html/index.html
index 721a2795f5..721a2795f5 100644
--- a/files/ca/learn/html/introducció_al_html/index.html
+++ b/files/ca/learn/html/introduction_to_html/index.html
diff --git a/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html b/files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html
index 34647eb294..34647eb294 100644
--- a/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html
+++ b/files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html
diff --git a/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html b/files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
index e3481bdc15..e3481bdc15 100644
--- a/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html
+++ b/files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
diff --git a/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html b/files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index 934377c4ca..934377c4ca 100644
--- a/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html
+++ b/files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/afegir_gràfics_vectorials_a_la_web/index.html b/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
index feaf09c048..feaf09c048 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/afegir_gràfics_vectorials_a_la_web/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/images_in_html/index.html b/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html
index 839a38b400..839a38b400 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/images_in_html/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/index.html b/files/ca/learn/html/multimedia_and_embedding/index.html
index 43e0e89c91..43e0e89c91 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/mozilla_pàgina_de_benvinguda/index.html b/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
index 71e1d3426e..71e1d3426e 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/mozilla_pàgina_de_benvinguda/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustació/index.html b/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
index 0a69bc1d47..0a69bc1d47 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustació/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/imatges_sensibles/index.html b/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html
index 4be56f6248..4be56f6248 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/imatges_sensibles/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html
diff --git a/files/ca/learn/html/multimèdia_i_incrustar/contingut_de_vídeo_i_àudio/index.html b/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
index 5a8855df2b..5a8855df2b 100644
--- a/files/ca/learn/html/multimèdia_i_incrustar/contingut_de_vídeo_i_àudio/index.html
+++ b/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
diff --git a/files/ca/learn/html/taules_html/taula_html_característiques_avançades_i_laccessibilitat/index.html b/files/ca/learn/html/tables/advanced/index.html
index 69b7edf725..69b7edf725 100644
--- a/files/ca/learn/html/taules_html/taula_html_característiques_avançades_i_laccessibilitat/index.html
+++ b/files/ca/learn/html/tables/advanced/index.html
diff --git a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html b/files/ca/learn/html/tables/basics/index.html
index f21f6fd3ca..f21f6fd3ca 100644
--- a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html
+++ b/files/ca/learn/html/tables/basics/index.html
diff --git a/files/ca/learn/html/taules_html/index.html b/files/ca/learn/html/tables/index.html
index add81f874e..add81f874e 100644
--- a/files/ca/learn/html/taules_html/index.html
+++ b/files/ca/learn/html/tables/index.html
diff --git a/files/ca/learn/html/taules_html/avaluació_estructurar_les_dades_dels_planeta/index.html b/files/ca/learn/html/tables/structuring_planet_data/index.html
index 15d583607f..15d583607f 100644
--- a/files/ca/learn/html/taules_html/avaluació_estructurar_les_dades_dels_planeta/index.html
+++ b/files/ca/learn/html/tables/structuring_planet_data/index.html
diff --git a/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html
new file mode 100644
index 0000000000..83a6f18c98
--- /dev/null
+++ b/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -0,0 +1,147 @@
+---
+title: JavaScript i CSS
+slug: Web/Guide/CSS/Inici_en_CSS/JavaScript
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Intermediate
+  - NeedsUpdate
+  - Web
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>Aquesta és la primera secció de la Part II del <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">tutorial CSS</a>. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.</p>
+
+<p>Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.</p>
+
+<p>En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.</p>
+
+<p>Secció anterior (Part I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Mitjà</a><br>
+ Secció següent: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
+
+<h3 id="Information:_JavaScript" name="Information:_JavaScript"><span id="result_box" lang="ca"><span>Informació</span><span>: JavaScript</span></span></h3>
+
+<p>JavaScript és un <em>llenguatge de programació</em>. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.</p>
+
+<p>JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.</p>
+
+<p>Hi ha tres maneres de fer això:</p>
+
+<ul>
+ <li>Treballant amb la llista de fulles d'estil del document, per exemple: afegir, eliminar o modificar una fulla d'estil.</li>
+ <li>Treballant amb les regles en una fulla d'estil, per exemple: afegir, eliminar o modificar una regla.</li>
+ <li>Treballant amb un element individual en el DOM, modificant el seu estil independentment de les fulles d'estil del document.</li>
+</ul>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>Més detalls</caption>
+ <tbody>
+  <tr>
+   <td>Per obtenir més informació sobre JavaScript, vegeu la pàgina de <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> en aquest wiki.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>de JavaScript</span></span></h3>
+
+<p>Feu un nou document HTML, <code>doc5.html</code>. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;</p>
+
+<div style="width: 48em;">
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
+&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
+&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;JavaScript sample&lt;/h1&gt;
+&lt;div id="square"&gt;&lt;/div&gt;
+&lt;button&gt;Click Me&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>Feu una nova fulla d'estil CSS, <code>style5.css</code>. Copieu i enganxeu el contingut d'aquí:</p>
+
+<div style="width: 48em;">
+<pre class="brush:css;">  #square {
+    width: 120px;
+    height: 120px;
+    border: 2px inset gray;
+    margin-bottom: 1em;
+  }
+
+  button {
+    padding: .5em 2em;
+  }</pre>
+</div>
+
+<p>Feu un nou arxiu de text, <code>script5.js</code>. Copieu i enganxeu el contingut d'aquí:</p>
+
+<div style="width: 48em;">
+<pre class="brush:js;">// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+var button = document.querySelector("button");
+button.addEventListener("click", changeBg);
+console.log(button);
+</pre>
+</div>
+
+<p><span id="result_box" lang="ca"><span>Obriu el</span> <span>document</span> <span>en el navegador i</span> <span>premeu el</span> <span>botó</span> <span>o vegeu</span> <span>una mostra</span> <span>del treball</span> <span>a continuació.</span></span></p>
+
+<p>{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}</p>
+
+<div class="note"><strong>Notes importants</strong> sobre aquesta demostració:
+
+<ul>
+ <li>El document HTML vincula la fulla d'estil com de costum, i també vincula  el script.</li>
+ <li>L'script funciona amb elements individuals en el DOM. Modifica l'estil del cuadrat directament. Modifica l'estil del botó indirectament pel canvi d'un atribut.</li>
+ <li>En JavaScript, <code>document.getElementById("square")</code> és similar en funció al selector CSS <code>#square</code>.</li>
+ <li>En JavaScript, backgroundColor correspon a la propietat CSS <code>background-color</code>. JavaScript no permet guions en noms, de manera que "camelCase" s'utilitza en el seu lloc.</li>
+ <li>El vostre navegador té una regla CSS incorporada per <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que canvia l'aspecte del botó quan està desactivat.</li>
+</ul>
+</div>
+
+<div class="warning">
+<p>De fet, el document HTML anterior pot tenir una condició de competència  (informació relacionada en aquesta pàgina <a href="http://www.w3.org/TR/2014/REC-html5-20141028/single-page.html#common-pitfalls-to-avoid-when-using-the-scripting-apis">W3C</a>), ja que té l'element <em>script</em> dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable <em>button</em> serà nul.la. En moure l'element <em>script</em> sota de l'element button (just damunt de l'etiqueta de tancament <em>body</em>) en el marcat HTML hauria de resoldre aquest problema.</p>
+</div>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;">
+ <caption>Repte</caption>
+ <tbody>
+  <tr>
+   <td>Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veure la solució per el repte.</a></p>
+
+<h3 id="I_ara_què">I ara què?</h3>
+
+<p>Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="https://developer.mozilla.org/Talk:en/CSS/Getting_Started/JavaScript">discussió</a>.</p>
+
+<p>En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: <strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">vincles XBL</a></strong></p>
diff --git a/files/ca/learn/javascript/objects/index.html b/files/ca/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..187f7930f4
--- /dev/null
+++ b/files/ca/learn/javascript/objects/index.html
@@ -0,0 +1,362 @@
+---
+title: Introducció al Javascript orientat a Objectes
+slug: Web/JavaScript/Introducció_al_Javascript_orientat_a_Objectes
+translation_of: Learn/JavaScript/Objects
+translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+---
+<div>{{jsSidebar("Introductory")}}</div>
+
+<p>JavaScript és orientat a objectes des del nucli, amb unes capacitats potents, flexibles {{Glossary("OOP")}}. Aquest article comença amb la introducció de la programació orientada a objectes, després es revisa el model d'objectes de Javascript, i finalment es mostren els conceptes de la programació orientada a objectes en JavaScript.</p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review">Revisió de JavaScript</h2>
+
+<p>Si no us sentiu segurs amb els conceptes de Javascript com ara variables, tipus, funcions, i àmbits podeu llegir sobre aquests temes en <a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Una reintroducció a JavaScript</a>. També podeu consultar la <a href="/en-US/docs/Web/JavaScript/Guide">Guia de JavaScript</a>.</p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programació orientada a Objectes</h2>
+
+<p>La programació orientada a Objectes és un paradigma de programació que usa l'abstracció per crear models basants en el món real. Fa servir diverseses tècniques de paradigmes previament establerts, inclosa la modularitat, poliformisme, i l'encapsulament. Avui, moltes llengües de programació (com Java, JavaScript, C#, C++, Python, PHP, Ruby i Objective-C) suporten la programació orientada a Objectes (POO).</p>
+
+<p>La programació orientada a Objectes es pot entendre com el disseny de software fent servir una col·lecció d'objectes que cooperen, al contrari de la visió tradicional en el qual un programa es vist com una col·lecció de funcions, o simplement com una llista d'instruccions per a un ordinador. En POO, cada objecte és capaç de rebre missatges, processar data, i enviar missatges a altres objectes. Cada objecte pot ser entès com una petita màquina independent amb un rol diferent o amb responsabilitat.</p>
+
+<p>La programació orientada a Objectes intenta promoure una major flexibilitat, mantenibilitat en programació, i és àmpliament popular en enginyeria de software a gran esala. En virtut de la seva forta èmfasi en modularitat, el codi orientat a objecte intenta ser més simple de desenvolupar i més facil d'entendre després, es presta a una anàlisi més directa, codificació, i comprensió de situacions complexes i procediments en comptes d'altres mètodes de programació menys modulars.<a href="#cite-1"><sup>1</sup></a></p>
+
+<h2 id="Terminology" name="Terminology">Terminologia</h2>
+
+<dl>
+ <dt>{{Glossary("Namespace")}}</dt>
+ <dd>Un contenidor que permet als desenvolupadors agrupar totes les funcionalitats sota un nom únic d'aplicació específica.</dd>
+ <dt>{{Glossary("Class")}}</dt>
+ <dd>Defineix les característiques de l'objecte. És la definició d'una plantilla de variables i mètodes d'un objecte.</dd>
+ <dt>{{Glossary("Object")}}</dt>
+ <dd>Una instància d'una classe.</dd>
+ <dt>{{Glossary("Property")}}</dt>
+ <dd>Una característca d'un objecte, com ara un color.</dd>
+ <dt>{{Glossary("Method")}}</dt>
+ <dd>Una capacitat d'un objecte, com ara caminar. És una subrutina o funció associada amb una classe.</dd>
+ <dt>{{Glossary("Constructor")}}</dt>
+ <dd>Un mètode que es crida en el moment d'instanciació d'un objecte. Normalment té el mateix nom que el de la classe que el conté.</dd>
+ <dt>{{Glossary("Inheritance")}}</dt>
+ <dd>Una classe pot heretar les característiques d'una altra classe.</dd>
+ <dt>{{Glossary("Encapsulation")}}</dt>
+ <dd>Una manera d'agrupar les dades i mètodes que es fan servir juntes.</dd>
+ <dt>{{Glossary("Abstraction")}}</dt>
+ <dd>La conjunció d'una herència complexa, mètodes, les propietats d'un objecte, han de ser capaces de simular una realitat a modelar.</dd>
+ <dt>{{Glossary("Polymorphism")}}</dt>
+ <dd>Poli significa "<em>molts</em>" i morfisme significa "<em>formes</em>". Classes diferents poden definir el mateix mètode o propietat.</dd>
+</dl>
+
+<p>Per una descripció més extensa sobre la programació orientada a objectes vegeu {interwiki("wikipedia", "Object-oriented programming")}} a la Viquipèdia.</p>
+
+<h2 id="Programació_basada_en_prototipus">Programació basada en prototipus</h2>
+
+<p>Programació basat en prototipus és un estil de programació orientada a objectes que no fa ús de les classes. En el seu lloc, la reutilització del comportament (conegut com a herència en llenguatges basats en classes) es porta a terme a través d'un procés de decoració (o d'ampliació) on els objectes que ja existeixen serveixen com a prototipus. Aquest model també és conegut com a model sense classes, orientat a prototip, o programació basadad en instàncies.</p>
+
+<p>L'exemple original (i més canònic) d'un llenguatge basat en prototipus és el llenguatge de programació {{interwiki("wikipedia", "Self (programming language)", "Self")}} desenvolupat per David Ungar i Randall Smith. Tanmateix, l'estil de programació sense classes s'ha anat fent més i més popular, i ha sigut adoptat per llenguatges de programació com JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quan s'utilitza el marc Viewer per manipular components Morphic), i altres.<a href="#cite-1"><sup>1</sup></a></p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programació orientada a Objectes de JavaScript</h2>
+
+<h3 id="Namespace">Namespace</h3>
+
+<p>Un namespace és un contenidor el qual permet als desenvolupadors agrupar totes les funcionalitats sota un únic, nom d'aplicació específic. <strong>En JavaScript un namespace és només un altre objecte que conté mètodes, propietats, i objectes.</strong></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Es important remarcar que en JavaScript, no hi ha diferèn<u>cia de nivell d'idioma entre els objectes regulars i els namespace</u>s. Això dista d'altres llenguatges orientats a objectes, i pot resultat confús als programadors nous en JavaScript.</p>
+</div>
+
+<p>La idea darrera la creació d'un namespace en JavaScript és simple: Un objecte global és creat i totes les variables, metòdes, i funcions es converteixen en propietats d'aquest objecte.<u> L'ús de namespaces també minimitza la possibilitat de conflictes de noms en l'aplicació, ja que cada objecte d'aplicació son propietats d'un objecte global d'aplicació definit</u>.</p>
+
+<p>Creem un objecte global anomenat MYAPP:</p>
+
+<pre class="brush: js">// global namespace
+var MYAPP = MYAPP || {};</pre>
+
+<p>En el codi de mostra superior, primer hem comprovat si MYAPP ja està definit (ja sigui en el mateix arxiu o en un altre arxiu). En cas de ser així, s'usa l'objecte global MYAPP existent, del contrari es crea un objecte buit anomenat MYAPP el qual encapsula el mètode, funcions, variables, i objectes.</p>
+
+<p>També podem crear sub-namespaces:</p>
+
+<pre class="brush: js">// sub namespace
+MYAPP.event = {};</pre>
+
+<p>Abaix es troba la sintaxi de codi per crear un namespace i afegir variables, funcions, i un mètode:</p>
+
+<pre class="brush: js">// Create container called MYAPP.commonMethod for common method and properties
+MYAPP.commonMethod = {
+  regExForName: "", // define regex for name validation
+  regExForPhone: "", // define regex for phone no validation
+  validateName: function(name){
+    // Do something with name, you can access regExForName variable
+    // using "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // do something with phone number
+  }
+}
+
+// Object together with the method declarations
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    //  code stuff
+    },
+   removeListener: function(el, type, fn) {
+    // code stuff
+   },
+   getEvent: function(e) {
+   // code stuff
+   }
+
+   // Can add another method and properties
+}
+
+// Syntax for Using addListener method:
+MYAPP.event.addListener("yourel", "type", callback);</pre>
+
+<h3 id="Core_Objects" name="Core_Objects">Objectes estàndards integrats</h3>
+
+<p>JavaScript té alguns objectes inclosos en el seu nucli, per exemple, trobem objectes come Math, Object, Array, i String. L'exemple d'abaix ens mostra com fer servir l'objecte Math per aconseguir números aleatoris usant el seu mètode <code>random()</code>.</p>
+
+<pre class="brush: js">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>Nota:</strong> Aquest i tots els exemples següents suposen que la funció anomenada {{domxref("console.log()")}} es defineix globalment. De fet, la funció <code>console.log()</code> no és part del llenguatge de JavaScript en si, però molts navegadors ho implementen per tal d'ajudar en la depuració.</div>
+
+<p>Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">Referència de JavaScript: Objectes estàndards integrats</a> per una llista d'objectes cor en JavaScript.</p>
+
+<p>Cada objecte en JavaScript és una instància de l'objecte <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> i per tant, n'hereda totes les seves propietats i mètodes.</p>
+
+<h3 id="Custom_Objects" name="Custom_Objects">Objectes personalitzats</h3>
+
+<h4 id="The_Class" name="The_Class">La classe</h4>
+
+<p>JavaScript és un llenguatge basat en prototipus que no conté<u> cap <code>class</code> statement, </u>el qual si que es pot trobar en C++ o Java. Això és confós a vegades per a programadors acostumats a llenguatges amb el <u><code>class</code> statement.</u> En el seu lloc, JavaScript fa servir funcions com a classes. Definir duna classe és tan fàcil com definir una funció. En l'exemple d'abaix definim una nova classe anomenada Person.</p>
+
+<pre class="brush: js">var Person = function () {};
+</pre>
+
+<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">L'objecte (instància de classe)</h4>
+
+<p>Per crear una nova instància d'un objecte <code>obj</code> fem servir la declaració <code>new obj</code>, assignant el resultat (el qual és de tipus <code>obj</code>) a una variable per accedir-hi més tard. <span style="font-size: 14px; line-height: 1.5;">Una forma alternativa de crear una nova instància és fent servir {{jsxref("Object.create()")}}. Aquesta crearà una instància This will create an <u>uninititalized instance.</u></span></p>
+
+<p>En l'exemple d'adalt definim una classe anomenada <code>Person</code>. En l'exemple següent creem dues instàncies (<code>person1</code> i <code>person2</code>).</p>
+
+<pre class="brush: js">var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<div class="note"><strong>Nota:</strong> Siusplau vegeu {{jsxref("Object.create()")}} per un mètode instantacional nou, addiccional new, additional, instantiation mètode.</div>
+
+<h4 id="The_Constructor" name="The_Constructor">El constructor</h4>
+
+<p>El constructor és cridat en el moment de la instantiation (el moment en que la instància de l'objecte és creat). El constructor és ún mètode de la classe. En JavaScript la funció serveix com el constructor de l'objecte, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.</p>
+
+<p>El constructor es fa servir per establir les propietats de l'objecte o per cridar mè call methods to prepare the object for use. Per afegir mètodes de classes i les seves definicions es necessita una sintaxi diferent que s'explicarà més tard en aquest article.</p>
+
+<p>En l'exemple d'abaix, el constructor de la classe <code>Person</code> mostra un missatge quan és crea una instànca <code>Person</code>.</p>
+
+<pre class="brush: js">var Person = function () {
+  console.log('instance created');
+};
+
+var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">La propietat (atribut de l'objecte)</h4>
+
+<p>Les propietats són variables contingudes en la classe; cada instància de l'objecte té aquestes propietats. Les propietats són asssignades en el constructor (funció) de la classe de forma que es creen en cada instància.</p>
+
+<p>Per treballar amb propietats de dins de la classe s'utilitza la paraula clau <code>this</code>, que fa referència a l'objecte actual. Accedir (llegir o escriure) a una propietat fora d'aquesta classe es fa mitjançant la sintaxi: <code>InstanceName.Property</code>; Aquesta és la mateixa sintaxi que es fa servir en C++, Java, i numeroses altres llengües. (Dins la classe, la sintaxi <code>this.Property</code> s'utilitza per obtindre o escriure el valor de les propietats.)</p>
+
+<p>En l'exemple següent definim la propietat <code>firstName</code> property per la classe <code>Person</code> i ho definim com a instanciació.</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+};
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Show the firstName properties of the objects
+console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
+</pre>
+
+<h4 id="The_methods" name="The_methods">Els mètodes</h4>
+
+<p>Els mètodes segueixen la mateixa llògica que les propietats; la diferència es que són funcions i estan definides com a funcions. Cridar un mètode és similar a accedir a una propietat, però s'afegeix <code>()</code> al final the nom del mètode, possiblement amb arguments. Per definir un mètode, s'assigna una funció a una propietat amb nom de la propietat de la classe <code>prototype</code>; el nom que s'assigna a la funció és el mateix que el nom que té el mètode en l'objecte.</p>
+
+<p>En l'exemple següent definim i usem el mètode <code>sayHello()</code> per la classe <code>Person</code>.</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// call the Person sayHello method.
+person1.sayHello(); // logs "Hello, I'm Alice"
+person2.sayHello(); // logs "Hello, I'm Bob"
+</pre>
+
+<p>En JavaScript els mètodes són funcions normals dels objectes que són lligats a un objecte com una propietat, El que vol dir que poden ser invocats "fora del context". Vegeu el codi d'exemple següent:</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// logs "Hello, I'm Alice"
+person1.sayHello();
+
+// logs "Hello, I'm Bob"
+person2.sayHello();
+
+// logs "Hello, I'm undefined" (or fails
+// with a TypeError in strict mode)
+helloFunction();
+
+// logs true
+console.log(helloFunction === person1.sayHello);
+
+// logs true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// logs "Hello, I'm Alice"
+helloFunction.call(person1);</pre>
+
+<p>Com l'exemple mostra, totes les referències a la funció <code>sayHello</code> — les que existeixen a <code>person1</code>, a <code>Person.prototype</code>, a la variable <code>helloFunction</code>, etc. — fan referència a la <em>mateixa funció</em>. El valor de <code>this</code> durant una crida a la funció depen en com es crida. En el cas comú en que es crida la funció des d'una propietat de l'objecte — <code>person1.sayHello()</code> — <code>this</code> rep el valor de l'objecte d'on prové la propietat (<code>person1</code>), és per això que <code>person1.sayHello()</code> fa servir el nom "Alice" i <code>person2.sayHello()</code> fa servir el nom "Bob". Però si ho cridem d'altres maneres, <code>this</code> rebrà un valor diferent: Cridar-la des d'una variable — <code>helloFunction()</code> — <code>this</code> rep el valor de l'objecte global (<code>window</code>, en navegadors). Al no tenir la propietat <code>firstName aquest </code>objecte (probablement) , acabem amb el resultat "Hello, I'm undefined". (Això és en el mode no estricte; en el <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">mode estricte </a>seria diferent [un error], però per evitar confussions no entrarem aquí en detall.) O podem assignar explícitament el valor de <code>this</code> mitjançant <code>Function#call</code> (o <code>Function#apply</code>), com es mostra al final de l'exemple.</p>
+
+<div class="note"><strong>Nota:</strong> Vegeu més sobre <code>this</code> a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div>
+
+<h4 id="Inheritance" name="Inheritance">L'herència</h4>
+
+<p>L'herència és una manera de crear una classe com una versió especialitzada d'una o més classes (<em>JavaScript només suporta l'herència única</em>). La classe especialitzada és communment anomenada el <em>fill</em>, i l'altra classe es comunment anomenada el <em>pare</em>. En JavaScript això s'aconsegueix mitjançant l'assignació d'una instància de la classe pare a la classe fill, i després s'especialitza. En navegadors moderns també es pot usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> per implementar herències.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> JavaScript does no detecta la classe fill <code>prototype.constructor</code> (vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), així que ho hem de declarar manualment.</p>
+</div>
+
+<p>En l'exemple d'abaix, definim la classe <code>Student</code> com una classe fill de <code>Person</code>. Després redefinim el mètode <code>sayHello()</code> i afegim el mètode <code>sayGoodBye()</code>.</p>
+
+<pre class="brush: js">// Define the Person constructor
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// Add a couple of methods to Person.prototype
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Define the Student constructor
+function Student(firstName, subject) {
+  // Call the parent constructor, making sure (using Function#call)
+  // that "this" is set correctly during the call
+  Person.call(this, firstName);
+
+  // Initialize our Student-specific properties
+  this.subject = subject;
+};
+
+// Create a Student.prototype object that inherits from Person.prototype.
+// Note: A common error here is to use "new Person()" to create the
+// Student.prototype. That's incorrect for several reasons, not least
+// that we don't have anything to give Person for the "firstName"
+// argument. The correct place to call Person is above, where we call
+// it from Student.
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// Set the "constructor" property to refer to Student
+Student.prototype.constructor = Student;
+
+// Replace the "sayHello" method
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// Add a "sayGoodBye" method
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// Example usage:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Check that instanceof works correctly
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+</pre>
+
+<p>Pel que fa a la línia <code>Student.prototype = Object.create(Person.prototype)</code>: En els motors de Javascript més antics sense <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, es pot utilitzar tant un "polyfill" (també conegut com a  "falca", vegeu l'article enllaçat), o fer servir una funció que aconegueixi assolir el mateix resultat, tal com:</p>
+
+<pre class="brush: js">function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Usage:
+Student.prototype = createObject(Person.prototype);
+</pre>
+
+<div class="note"><strong>Nota:</strong> Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> per més informació sobre el que fa, i una falca per a motors més vells.</div>
+
+<h4 id="Encapsulation" name="Encapsulation">L'encapsulació</h4>
+
+<p>En l'exemple anterior, <code>Student</code> no necessita saber com el mètode <code>Person</code> class's <code>walk()</code> és implementat, però tot i així pot fer-lo servir com a mètode; la classe <code>Student</code>no necessita definir explícitament aquest mètode a no ser que ho volguem canviar. D'això se'n diu <strong>encapsulació</strong>, per la qual cada classe empaqueta data i mètodes en una sola unitat.</p>
+
+<p>L'ocultació d'informació és una característica comuna en altres llenguatges sovint com a mètodes/propietats privats i protegits. Tot i que es podria simular alguna cosa com aquesta en JavaScript, no és un requeriment per fer programació orientada a objectes.<a href="#cite-2"><sup>2</sup></a></p>
+
+<h4 id="Abstraction" name="Abstraction">L'abstracció</h4>
+
+<p>L'abstracció és un mecanisme que permet modelar la part que ens ocupa del problema en el qual estem treballant. Això es pot aconseguir per mitjar de l'herència (especialització), o composició. JavaScript aconsegueix l'especialització per mitjà de l'herència, i la composició per mitjà de deixar a les instàncies de classes ser valors d'atributs d'altres objectes.</p>
+
+<p>La classe Function de JavaScript hereta de la classe Object (això demostra la especialització del model) i la propietat Function.prototype property és una instància d'Object (Això demostra composició).</p>
+
+<pre class="brush: js">var foo = function () {};
+
+// logs "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// logs "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre>
+
+<h4 id="Polymorphism" name="Polymorphism">El polimorfisme</h4>
+
+<p>Tal i com tots els mètodes i propietats són definides dins la propietat Prototype, classes diferents poden definir mètodes amb el mateix nom; els mètodes estan en l'àmbit de la classe en la qual estan definits. Això només és cert quan les dues classes no tenen una relació pare-fill (quan un no hereta de l'altre en una cadena d'herència).</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Les tècniques presentades en aquesta article per implementar programació orientada a objectes no són les úniques que es poden fer servir en JavaScript, que és molt flexible en termes de com es pot realitzar la programació orientada a objectes.</p>
+
+<p>De la mateixa manera, les tècniques que s'han mostrat aquí no utilitzen cap <em>hack</em> del llenguatge, ni imiten cap implementació de teories d'objectes d'altres llenguatges.</p>
+
+<p>Hi ha altres tècniques que proporcionen programació orientada a objectes més avançada en JavaScript, però aquests estan fora de l'abast d'aquest article introductori.</p>
+
+<h2 id="References" name="References">Referències</h2>
+
+<ol>
+ <li><a name="cite-1"></a>Viquipèdia. "<a href="http://ca.wikipedia.org/wiki/Programaci%C3%B3_orientada_a_objectes">Programació orientada a Objectes</a>"</li>
+ <li><a name="cite-2"></a>Viquipèdia. "<a href="http://ca.wikipedia.org/wiki/Encapsulaci%C3%B3">Encapsulació (programació orientada a Objectes)</a>"</li>
+</ol>