diff options
Diffstat (limited to 'files/ca/web_development')
6 files changed, 0 insertions, 272 deletions
diff --git a/files/ca/web_development/index.html b/files/ca/web_development/index.html deleted file mode 100644 index ba6fb934f0..0000000000 --- a/files/ca/web_development/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Desenvolupament web -slug: Web_Development -tags: - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development ---- -<p><strong>El desenvolupament web</strong> comprèn tots els aspectes de construir un portal o aplicació web.</p> -<p>Aprèn a crear qualsevol cosa des d'una simple web fins a una web complexa i altament interactiva emprant les darreres tecnologies web fullejant els articles que et mostrem aquí.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="DOCUMENTACIÓ">DOCUMENTACIÓ</h2> - <h3 id="Tecnologies">Tecnologies</h3> - <dl> - <dt> - <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introducció al desenvolupament web</a></dt> - <dd> - Una guia de com desenvolupar webs.</dd> - <dt> - <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> - <dd> - L'<em> HyperText Markup Language</em> (en català, Llenguatge de Marcació de Hipertext) és el llenguatge basic per a la creació de webs i d'altres documents mostrats en un navegador.</dd> - <dt> - <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> - <dd> - Els <em>Cascading Style Sheets</em> (en català, Fulls d'estils en cascada) fan possible construir sofisticats <em>layouts</em> per a les planes web.</dd> - <dd> - [NT: <em>layouts</em> podria traduir-se per estructura o disposició dels elements, però donada la generalitzada acceptació del terme en anglés he optat per no adaptar-lo al català]</dd> - <dt> - <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> - <dd> - JavaScript és el llenguatge de programació (<em>scripting</em>) més comú per programar aplicacions web en el costat del navegador. A més, és emprat en el desenvolupament del software de Mozilla.</dd> - <dt> - <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> - <dd> - De l'anglès <em>Document Object Model</em> (en català, Model de l'Objecte Document) és una API per a documents HTML i XML, que proporciona una representació de l'estructura del document i els seus elements que hom pot modificar per a alterar la visualització del mateix.</dd> - <dt> - <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> - <dd> - De l'anglès <em>Asynchronous JavaScript and XML</em> (Javascript i XML Asincrònic) més que una tecnologia és una combinació de tecnologies, usant Javascript i d'altres tecnologies del costat del navegador per comunicar-se amb el servidor sense recarregar la plana sencera, lo qual permet crear aplicacions dinàmiques de qualitat.</dd> - <dt> - <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> - <dd> - De l'anglès <em>Extensible HyperText Markup Language</em> (Llenguatge de marcació hipertext extensible) és un llenguatge de marcatge com el HTML però que respecte les regles formals del XML que ofereix una sintaxi més estricta però més robusta i potent que l'HTML.</dd> - <dt> - <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> - <dd> - De l'anglès <em>Scalable Vector Graphics</em> (gràfics de vectors escalables) és un llenguatge de marcatge XML per dibuizar gràfics vectorials 2D.</dd> - </dl> - <h3 id="Estratègies">Estratègies</h3> - <dl> - <dt> - <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Estàndars web</a></dt> - <dd> - Aprèn com fer que la teva web o aplicació pugui ser emprada pel màxim nombre possible d'usuaris gràcies a fer-la compatible amb la web oberta (<em>open web</em>).</dd> - <dt> - <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Disseny web sensible </a></dt> - <dd> - Juga amb el CSS per a presentar el mateix contingut a qualsevol plataforma, des de telèfons mòbils fins a pantalles amples de màquines d'escriptori d'alta resolució.</dd> - <dt> - <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Construir webs compatibles amb equips vells i moderns</a></dt> - <dd> - Les millors pràctiques per a crear webs que no es trenquen quan s'actualitzen els navegadors dels usuaris.</dd> - <dt> - <a href="/ca/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Construir webs pel mòbil</a></dt> - <dd> - Desenvolupar webs per ser vistes en dispositius mòbils requereix prendre certes mesures úniques a les que potser no estàn avessats els desenvolupadors habituals de webs per a navegadors d'ordinadors d'escriptori.</dd> - <dt> - <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Preguntes freqüents del desenvolupador web respostes, per Mozilla</a></dt> - <dd> - Llegeix les respostes de Mozilla a les preguntes més freqüents dels desenvolupadors web.</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">Veure-ho tot...</a></span></p> - </td> - <td> - <h2 class="Community" id="COMUNITAT">COMUNITAT</h2> - <ul> - <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Bloc Mozilla Hacks</a></li> - <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> - </ul> - <h2 class="Tools" id="EINES">EINES</h2> - <ul> - <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Plana de les principals eines</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Extensió per a navegadors: Firebug</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Extensió per a navegadors: Web Developer</a></li> - <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, per depurar Javascript</li> - <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">Inspector de DOM</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> - </ul> - <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">Veure-ho tot...</a></span></p> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/ca/web_development/mobile/a_hybrid_approach/index.html b/files/ca/web_development/mobile/a_hybrid_approach/index.html deleted file mode 100644 index da2ee0a625..0000000000 --- a/files/ca/web_development/mobile/a_hybrid_approach/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Una solució híbrida -slug: Web_Development/Mobile/A_hybrid_approach -translation_of: Web/Guide/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_development/mobile/index.html b/files/ca/web_development/mobile/index.html deleted file mode 100644 index 84a810eb1c..0000000000 --- a/files/ca/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Desenvolupament de webs per a mòbils -slug: Web_Development/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: 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_development/mobile/mobile-friendliness/index.html b/files/ca/web_development/mobile/mobile-friendliness/index.html deleted file mode 100644 index b5ed1bbdb4..0000000000 --- a/files/ca/web_development/mobile/mobile-friendliness/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Webs amigables amb els mòbils -slug: Web_Development/Mobile/Mobile-friendliness -translation_of: Web/Guide/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_development/mobile/responsive_design/index.html b/files/ca/web_development/mobile/responsive_design/index.html deleted file mode 100644 index 53bd5eb866..0000000000 --- a/files/ca/web_development/mobile/responsive_design/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Disseny sensible (Responsive design) -slug: Web_Development/Mobile/Responsive_design -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design ---- -<p>Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos <a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">dissenys web separats</a> per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet <a class="external" href="http://www.alistapart.com/articles/dao/">no tant</a>) ha crescut en popularitat: oblidar-se de la detecció del <em>user-agent</em> des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo <a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">disseny web sensible</a>. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.</p> -<h2 id="Avantatges">Avantatges</h2> -<p>Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres <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?">objectius</a> del desenvolupament web per a mòbils:</p> -<ul> - <li><strong>Presentació</strong> — Emprant un <em>layout</em> flexible a la teva web juntament amb <em>media queries</em> de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.</li> - <li><strong>Contingut</strong> — Alterant el contingut basant-te en les característiques del navegador <a class="external" href="http://www.quirksmode.org/blog/archives/2010/08/combining_media.html">via JavaScript</a>, pots adaptar el missatge a cada usuari.</li> -</ul> -<p>Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del <em>user-agent</em> del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.</p> -<h2 id="Inconvenients">Inconvenients</h2> -<p>Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.</p> -<p>Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un <a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/"><em>layout</em> flexible</a>. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.</p> -<p>Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.</p> -<h2 id="Quan_és_adient_escollir_aquesta_opció">Quan és adient escollir aquesta opció</h2> -<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>Tal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.<br> - <br> - Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.</p> -<h2 id="Exemples">Exemples</h2> -<p>Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:</p> -<ul> - <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – un dels meus dissenys sensibles favorits, que tambè he capturat abans en la imatge!</li> - <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – un bon article per a llegir, que inclou més enllaços amb exemples</li> - <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> - <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li> - <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> -</ul> -<p>Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que <a class="external" href="http://www.lukew.com/ff/entry.asp?1117">primer generis un disseny per a pantalla petita</a>, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.</p> -<p>També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant <em>media queries</em> [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els <em>media queries</em> encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs <a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aquí</a>.</p> -<h2 id="Enfocs_del_desenvoulpament_web">Enfocs del desenvoulpament web</h2> -<p>Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.</p> -<ul> - <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">Què vol dir ser un disseny amigable amb els mòbils?</a></li> - <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Dissenys diferents per a diferents pantalles</a></li> - <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Un enfoc híbrid</a></li> -</ul> -<h2 id="Llegeix_també">Llegeix també</h2> -<ul> - <li><a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">Disseny web sensible</a> per obtenir més recursos</li> -</ul> -<div class="originaldocinfo"> - <h3 id="Document_d'informació_original">Document d'informació original</h3> - <p>Originalment publicat al 27 Maig, 2011 al bloc Mozilla Webdev com "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", per Jason Grlicky.</p> -</div> -<p> </p> diff --git a/files/ca/web_development/mobile/separate_sites/index.html b/files/ca/web_development/mobile/separate_sites/index.html deleted file mode 100644 index ceb9160b38..0000000000 --- a/files/ca/web_development/mobile/separate_sites/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Diferents webs per a mòbil i PC -slug: Web_Development/Mobile/Separate_sites -translation_of: Web/Guide/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> |