2018-11-09T10:10:16+00:00http://www.oxygen.catBeneficios FANOC, una PWA amb Nextjs i WordPress API2018-11-09T09:48:19+00:00http://www.oxygen.cat/beneficios-fanoc-pwa-headless-wp-with-nextjs<blockquote>
<p>... La creació d'aplicacions web progressives, PWA, és el futur de la Web i el 30% de tots els webs són WordPress. I si ho ajuntem? Això és BenFamCaNum: una PWA gestionada amb WordPress i 'presentada' amb Nextjs!</p>
<footer>— <cite><a href="/beneficios-fanoc-pwa-headless-wp-with-nextjs/" title="Beneficios FANOC, una PWA amb Nextjs i WordPress API">Ramon Gil</a></cite></footer>
</blockquote>
<h2 id="el-passat">El passat</h2>
<p><strong>Els desenvolupadors i dissenyadors segueixen utilitzant l’arquitectura de PC i la Web basada en el navegador d’escriptori</strong> i continuen desitjant poder accelerar-la als mòbils. Veiem aquest enfocament en els “embolcalls” per a aplicacions natives, personificats a per exemple PhoneGap (IE, Apache Còrdova), on les aplicacions web i llocs web estan escrites en HTML i CSS i després “embolicades” amb propietats natives (API hooks per al sistema operatiu i el maquinari del telèfon mòbil). El terme a la indústria per a aquests beuratges és aplicacions “híbrides”. A dia d’avui, aquest és <strong>un enfocament erroni en el desenvolupament multiplataforma</strong> i en la construcció de les millors experiències Web i app.</p>
<h2 id="el-present">El Present</h2>
<p>Si heu anat seguint el desenvolupament web el darrer any, és probable que hagueu llegit les Aplicacions Web Progressives (en anglès <strong>PWAs</strong>). És un concepte general utilitzat per descriure experiències web tan avançades que competeixen amb les aplicacions natives: el ple funcionament offline, la capacitat d’instal·lació, la ràpidesa, el comportament “suau” de l’aplicació al navegador, les notificacions push i una gran interfície d’usuari.</p>
<p>Les Aplicacions web progressives (“progressive web apps”) és un concepte <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" title="Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted">exposat per primer cop per l’enginyer de Google Alex Russell el juny de 2015</a>. En poques paraules, les aplicacions web progressives comencen com pestanyes als navegadors (Chrome, Firefox i aviat Safari) i <strong>esdevenen progressivament més “aplicació”</strong> a mida que més persones les utilitzen, fins al punt en què poden ser afegides a la pantalla principal del telèfon i tenir accés a propietats d’aplicació com ara notificacions i ús sense connexió. Les aplicacions web progressives són “linkables” via URL, completament responsives i segures.</p>
<h2 id="service-workers">“Service Workers”</h2>
<p>Els “Service Workers” poden fer que els llocs web funcionin fora de línia o ajudar a accelerar el contingut “interceptant les sol·licituds de xarxa per oferir respostes programàtiques o emmagatzemades a la memòria cau.”</p>
<p>L’interessant dels “Service Workers” és que si poden interceptar, emmagatzemar i lliurar continguts a partir de sol·licutds de xarxa, també poden <strong>tenir sempre a disposició l’arquitectura de l’aplicació (“Appication Shell Architecture”)</strong>, és a dir, la interfície bàsica i el disseny de l’aplicació web emmagatzemats i llests per lliurar-los gairebé a l’instant.</p>
<p>No obstant això, tot i que la nova API dels Service Worker permet emmagatzemar a la memòria cau tots els actius del lloc web per a una segona càrrega gairebé instantània, com quan conèixer algú nou, la primera impressió és el que compta. <strong>Si la primera càrrega triga més de 3 segons</strong>, un estudi de <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">DoubleClick</a> mostra que <strong>més del 53% de tots els usuaris ens abandonarà</strong>. La <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-adds-up/">velocitat</a> al mòbil sí importa.</p>
<h2 id="millor-una-pwa-que-una-app-nativa">Millor una PWA que una app nativa</h2>
<p>Un dels <a href="https://www.youtube.com/watch?v=z2JgN6Ae-Bo">avantatges</a> més importants d’un lloc web és l’entrada gairebé sense fricció - és a dir, sense el pas de la instal·lació i amb la càrrega gairebé instantània. <strong>Un usuari web és sempre a tan sols un clic de distància</strong>. Per realment beneficiar-nos d’aquesta oportunitat cal ser molt ràpids! Per mantenir-nos, cal ser atractius.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/beneficios-fanoc-una-wppwa-full-width-snapshot.png" /><figcaption><p>beneficios.fanoc.org una aplicació web avançada!</p></figcaption></figure>
<p>Al final el que importa és aconseguir una experiència d’usuari ideal. Hem d’anar tenint, de manera progressiva, una experiència de navegació cada cop més atractiva.</p>
<p>Sona massa bo per ser veritat? Doncs <strong>justament això és <a href="https://beneficios.fanoc.org/" title="Beneficios FANOC">BenFamCaNum</a>, una sòlida comibació de tres tecnologies: PWA + WordPress (WP API) + React (NextJS)</strong></p>
<h2 id="beneficios-fanoc-una-pwa-amb-react-i-wordpress-api">Beneficios FANOC, una PWA amb React i WordPress API</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció d’app webs que dugin a la millor experiència possible als seus usuaris per mitjà de les millors tecnologies disponibles en cada moment. És per això que hem creat <strong><a href="https://beneficios.fanoc.org/" title="Beneficios FANOC">BenFamCaNum</a></strong>, una mostra de les possibilitats reals d’una aplicació web progressiva, gestionada pel CMS més estés, WordPress, i presentada per mitjà de NextJS:</p>
<ul>
<li>Plenament responsiva</li>
<li>De càrrega gairebé instantània gràcies al SSR del NextJS</li>
<li>Indepentent de la connectivitat, ja que funciona “offline”</li>
<li>Instal·lable a la pantalla d’inici</li>
<li>Autogestionable gràcies al WP.</li>
</ul>
<p>A més a més, de <strong>segura</strong> (funciona sota https) i <strong>moderna</strong> ja que separa estrictament el gestor de les dades (WordPress + WP API) de la seva visualiztació (ReactJS / NextJS).</p>
<p>Aquesta és la segona iteració del concepte que duen a terme a Oxygen. Els avantatges del model <strong>ens permeten crear una experiència customitzada</strong> per a FANOC a partir de compartir la mateixa API que la Federación Española de Familias Numerosas.</p>
<hr />
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
Beneficios Familias Numerosas, una PWA amb React i WordPress API2018-03-07T09:48:19+00:00http://www.oxygen.cat/benfamnum-pwa-headless-wp-with-react<blockquote>
<p>... La creació d'aplicacions web progressives (PWA) és el futur de la Web i el 30% de tots els webs són WordPress. I si ho ajuntem? Això és BenFamNum: una PWA gestionada amb WordPress i 'presentada' amb React!</p>
<footer>— <cite><a href="/benfamnum-pwa-headless-wp-with-react/" title="Beneficios Familias Numerosas, una PWA amb React i WordPress API">Ramon Gil</a></cite></footer>
</blockquote>
<h2 id="el-passat">El passat</h2>
<p><strong>Els desenvolupadors i dissenyadors segueixen utilitzant l’arquitectura de PC i la Web basada en el navegador d’escriptori</strong> i continuen desitjant poder accelerar-la als mòbils. Veiem aquest enfocament en els “embolcalls” per a aplicacions natives, personificats a per exemple PhoneGap (IE, Apache Còrdova), on les aplicacions web i llocs web estan escrites en HTML i CSS i després “embolicades” amb propietats natives (API hooks per al sistema operatiu i el maquinari del telèfon mòbil). El terme a la indústria per a aquests beuratges és aplicacions “híbrides”. A dia d’avui, aquest és <strong>un enfocament erroni en el desenvolupament multiplataforma</strong> i en la construcció de les millors experiències Web i app.</p>
<h2 id="el-present">El Present</h2>
<p>Si heu anat seguint el desenvolupament web aquests darrers mesos, és probable que hagueu llegit les Aplicacions Web Progressives (en anglès <strong>PWAs</strong>). És un concepte general utilitzat per descriure experiències web tan avançades que competeixen amb les aplicacions natives: el ple funcionament offline, la capacitat d’instal·lació, la ràpidesa, el comportament “suau” de l’aplicació al navegador, les notificacions push i una gran interfície d’usuari.</p>
<p>Les Aplicacions web progressives (“progressive web apps”) és un concepte <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" title="Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted">exposat per primer cop per l’enginyer de Google Alex Russell el juny de 2015</a>. En poques paraules, les aplicacions web progressives comencen com pestanyes als navegadors (Chrome, Firefox i aviat Safari) i <strong>esdevenen progressivament més “aplicació”</strong> a mida que més persones les utilitzen, fins al punt en què poden ser afegides a la pantalla principal del telèfon i tenir accés a propietats d’aplicació com ara notificacions i ús sense connexió. Les aplicacions web progressives són “linkables” via URL, completament responsives i segures.</p>
<h2 id="service-workers">“Service Workers”</h2>
<p>Els “Service Workers” poden fer que els llocs web funcionin fora de línia o ajudar a accelerar el contingut “interceptant les sol·licituds de xarxa per oferir respostes programàtiques o emmagatzemades a la memòria cau.”</p>
<p>L’interessant dels “Service Workers” és que si poden interceptar, emmagatzemar i lliurar continguts a partir de sol·licutds de xarxa, també poden <strong>tenir sempre a disposició l’arquitectura de l’aplicació (“Appication Shell Architecture”)</strong>, és a dir, la interfície bàsica i el disseny de l’aplicació web emmagatzemats i llests per lliurar-los gairebé a l’instant.</p>
<p>No obstant això, tot i que la nova API dels Service Worker permet emmagatzemar a la memòria cau tots els actius del lloc web per a una segona càrrega gairebé instantània, com quan conèixer algú nou, la primera impressió és el que compta. <strong>Si la primera càrrega triga més de 3 segons</strong>, un estudi de <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">DoubleClick</a> mostra que <strong>més del 53% de tots els usuaris ens abandonarà</strong>. La <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-adds-up/">velocitat</a> al mòbil sí importa.</p>
<h2 id="millor-una-pwa-que-una-app-nativa">Millor una PWA que una app nativa</h2>
<p>Un dels <a href="https://www.youtube.com/watch?v=z2JgN6Ae-Bo">avantatges</a> més importants d’un lloc web és l’entrada gairebé sense fricció - és a dir, sense el pas de la instal·lació i amb la càrrega gairebé instantània. <strong>Un usuari web és sempre a tan sols un clic de distància</strong>. Per realment beneficiar-nos d’aquesta oportunitat cal ser molt ràpids! Per mantenir-nos, cal ser atractius.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/beneficios-familias-una-wppwa-full-width-snapshot.png" /><figcaption><p>QUID.cat el millor dels dos móns!</p></figcaption></figure>
<p>Al final el que importa és aconseguir una experiència d’usuari ideal. Hem d’anar tenint, de manera progressiva, una experiència de navegació cada cop més atractiva.</p>
<p>Sona massa bo per ser veritat? Doncs <strong>justament això és <a href="https://beneficiosfamiliasnumerosas.org/" title="Beneficios Familias Numerosas">BenFamNum</a>, una sòlida comibació de tres tecnologies: PWA + WordPress (WP API) + React (NextJS)</strong></p>
<h2 id="beneficios-familias-numerosas-una-pwa-amb-react-i-wordpress-api">Beneficios Familias Numerosas, una PWA amb React i WordPress API</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció d’app webs que dugin a la millor experiència possible als seus usuaris per mitjà de les millors tecnologies disponibles en cada moment. És per això que hem creat <strong><a href="https://beneficiosfamiliasnumerosas.org/" title="Beneficios Familias Numerosas">BenFamNum</a></strong>, una mostra de les possibilitats reals d’una aplicació web progressiva, gestionada pel CMS més estés, WordPress, i presentada per mitjà de React (via NextJS):</p>
<ul>
<li>Plenament responsiva</li>
<li>De càrrega gairebé instantània gràcies al SSR del NextJS</li>
<li>Indepentent de la connectivitat, ja que funciona “offline”</li>
<li>Instal·lable a la pantalla d’inici</li>
<li>Autogestionable gràcies al WP.</li>
</ul>
<p>A més a més, de <strong>segura</strong> (funciona sota https) i <strong>moderna</strong> ja que separa estrictament el gestor de les dades (WordPress + WP API) de la seva visualiztació (ReactJS / NextJS).</p>
<hr />
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
QUID, el millor dels dos móns: una PWAMP2016-12-10T11:48:19+00:00http://www.oxygen.cat/quid-el-millor-dels-dos-mons-una-pwamp<blockquote>
<p>... La creació d'aplicacions web progressives és el futur de la Web, la carrega instantània al mòbil una abosluta necessitat. La combinació és una PWAMP. I això és QUID, el millor dels dos móns!</p>
<footer>— <cite><a href="/quid-el-millor-dels-dos-mons-una-pwamp/" title="QUID, el millor dels dos móns: una PWAMP">Ramon Gil</a></cite></footer>
</blockquote>
<h2 id="el-passat">El passat</h2>
<p><strong>Els desenvolupadors i dissenyadors segueixen utilitzant l’arquitectura de PC i la Web basada en el navegador d’escriptori</strong> i continuen desitjant poder accelerar-la als mòbils. Veiem aquest enfocament en els “embolcalls” per a aplicacions natives, personificats a per exemple PhoneGap (IE, Apache Còrdova), on les aplicacions web i llocs web estan escrites en HTML i CSS i després “embolicades” amb propietats natives (API hooks per al sistema operatiu i el maquinari del telèfon mòbil). El terme a la indústria per a aquests beuratges és aplicacions “híbrides”. A dia d’avui, aquest és <strong>un enfocament erroni en el desenvolupament multiplataforma</strong> i en la construcció de les millors experiències Web i app.</p>
<h2 id="el-present">El Present</h2>
<p>Si heu anat seguint el desenvolupament web aquests darrers mesos, és probable que hagueu llegit les Aplicacions Web Progressives (en anglès <strong>PWAs</strong>). És un concepte general utilitzat per descriure experiències web tan avançades que competeixen amb les aplicacions natives: el ple funcionament offline, la capacitat d’instal·lació, “Retina”, la ràpidesa, el comportament “suau” de l’aplicació al navegador, les notificacions push i una gran interfície d’usuari.</p>
<p>Les Aplicacions web progressives (“progressive web apps”) és un concepte <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" title="Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted">exposat per primer cop per l’enginyer de Google Alex Russell el juny de 2015</a>. En poques paraules, les aplicacions web progressives comencen com pestanyes al navegador Chrome i <strong>esdevenen progressivament més “aplicació”</strong> a mida que més persones les utilitzen, fins al punt en què poden ser afegides a la pantalla principal del telèfon i tenir accés a propietats d’aplicació com ara notificacions i ús sense connexió. Les aplicacions web progressives són “linkables” via URL, completament responsives i segures.</p>
<h2 id="service-workers">“Service Workers”</h2>
<p>Els “Service Workers” poden fer que els llocs web funcionen fora de línia o ajudar a accelerar el contingut “interceptant les sol·licituds de xarxa per oferir respostes programàtiques o emmagatzemades a la memòria cau.”</p>
<p>L’interessant dels “Service Workers” és que si poden interceptar, emmagatzemar i lliurar continguts a partir de sol·licutds de xarxa, també poden <strong>tenir sempre a disposició l’arquitectura de l’aplicació (“Appication Shell Architecture”)</strong>, és a dir, la interfície bàsica i el disseny de l’aplicació web emmagatzemats i llests per lliurar-los gairebé a l’instant.</p>
<p>No obstant això, tot i que la nova API dels Service Worker permet emmagatzemar a la memòria cau tots els actius del lloc web per a una segona càrrega gairebé instantània, com quan conèixer algú nou, la primera impressió és el que compta. <strong>Si la primera càrrega triga més de 3 segons</strong>, l’últim estudi de <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">DoubleClick</a> mostra que <strong>més del 53% de tots els usuaris ens abandonarà</strong>.</p>
<h2 id="amp-per-a-pàgines-mòbils-accelerades">AMP, per a Pàgines Mòbils Accelerades</h2>
<p>Un dels avantatges més importants d’un lloc web és l’entrada gairebé sense fricció - és a dir, sense el pas de la instal·lació i amb la càrrega gairebé instantània. Un usuari és sempre a un clic de distància. Per realment beneficiar-nos d’aquesta oportunitat l’únic que <strong>necessitem és un lloc web “fotudament” ràpid!</strong> <a href="https://www.ampproject.org/">AMP</a>, abreviatura de pàgines mòbils accelerades, la clava en això. De fet, és la seva raó de ser! … tot i que a costa d’haver de ser extramadament respectuosos a l’hora de desenvolupar amb les restriccions que imposa.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/quid-una-pwamp-full-width-snapshot.png" /><figcaption><p>QUID.cat el millor dels dos móns!</p></figcaption></figure>
<h2 id="quidcat-el-millor-dels-dos-móns"><a href="https://www.quid.cat/" title="QUID, Connectem Empresa i Cultura">QUID.cat</a> el millor dels dos móns!</h2>
<p>Al final el que importa és aconseguir una experiència d’usuari ideal. Més o menys hauria de ser així:</p>
<ol>
<li>Un usuari descobreix un enllaç cap al nostre web i fa clic.</li>
<li>El contingut es carrega gairebé instantàniament i és un plaer consumir-lo.</li>
<li>Automàticament es convida l’usuari a una experiència encara més rica, amb les notificacions push i el funcionament offline.</li>
<li>L’usuari exclama: “I tant, és clar que sí!” I en un instant el redirigim a una experiència similar al d’una app nativa i se’l pot instal·lar a la pantalla d’inici.</li>
</ol>
<p>La primera càrrega del nostre web l’hem de sentir com gairebé instantània, i després hem d’anar tenint una experiència de navegació cada cop més atractiva.</p>
<p>Sona massa bo per ser veritat? Doncs <strong>justament això és <a href="https://www.quid.cat/" title="QUID, Connectem Empresa i Cultura">QUID</a>, el millor dels dos móns! Una sòlida comibació de les dues tecnologies: PWA + AMP</strong></p>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció d’app webs que dugin a la millor experiència possible als seus usuaris per mitjà de les millors tecnologies disponibles en cada moment. És per això que hem creat <strong><a href="https://www.quid.cat/" title="QUID, Connectem Empresa i Cultura">QUID</a></strong>, una mostra de les possibilitats reals d’una aplicació web progressiva amb pàgines mòbils accelerades. <strong>QUID és una PWAMP!</strong> (PWA + AMP):</p>
<ul>
<li>Plenament responsiva</li>
<li>De càrrega gairebé instantània en qualsevol escenari</li>
<li>Indepentent de la connectivitat, ja que funciona “offline”</li>
<li>Instal·lable a la pantalla d’inici</li>
<li>Atractiva ja que disposa de la capacitat per retenir els usuaris via notifacions no intrusives de nous contignuts.</li>
</ul>
<p>A més a més, de <strong>segura</strong> (funciona sota https) i <strong>moderna</strong> ja que té un flux de publicació basat en 2 respositoris <strong>github</strong> i compilació via <strong>travis</strong> amb <strong>gulp</strong>. D’això en seguirem parlant en una altra ocasió.</p>
<hr />
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
World Biomimetic Challenges and Conscience. Una nova web app2016-06-07T11:48:19+00:00http://www.oxygen.cat/world-biomimetic-challenges-and-conscience-una-nova-web-app<blockquote>the first edition of World Biomimetics Challenges & Conscience... is well underway for the coming World Biomimetic Experience Summit 2017 that will get to know a new social, economic and industrial reality by a bioinspiring Cosmo vision.<footer>— <cite><a href="/world-biomimetic-challenges-and-conscience-una-nova-web-app/" title="World Biomimetic Challenges and Conscience. Una nova web app">Daniel Fuentes</a></cite></footer></blockquote>
<p>El proper 22 de juny (2016) tindrà lloc la primera edició dels ‘World Biomimetic Challenges and Conscience’. Un esdeveniment de caire internacional que pretén:</p>
<ul>
<li>Donar a conèixer la biomimètica per contribuir a la seva implementació en la societat, atenent al desenvolupament integral de l’ésser humà, de les comunitats que el formen i del planeta que el sustenta.</li>
<li>Apropar la dimensió creativa de la Naturalesa als límits de la imaginació humana.</li>
<li>Ser un altaveu de reconeixament de projectes que promouen la consciencia, el talent i la creativitat biomimètica per afrontar els desafiaments globals de futur.</li>
<li>Donar coneixement del 1st World Biomimetics Experience Summit 2017.</li>
<li>Fomentar un espai de consciència col·lectiva desde una cosmovisió biomimètica.</li>
</ul>
<h2 id="els-wbchac-una-sigle-page-web-app">Els WBChaC, una sigle page web app</h2>
<p><a href="https://www.biomimeticchallengesandawards.com/">Els WBChaC</a> estan concebuts com una single page web app, de manera què <strong>en un sol “html” hi troben tot el que cal per posicionar l’esdevinent a Internet</strong>. És a dir, en accedir a <a href="https://www.biomimeticchallengesandawards.com/">https://www.biomimeticchallengesandawards.com/</a> ho tenim tot: el què, el qui, el quan i l’on harmònicament distribuït amb diferents “call to action.”</p>
<p>Hem desenvolupat la pàgina d’un esdeveniment i l’hem dotat d’elements de “<a href="/progressive-web-apps-el-futur-de-la-web/">progressive web app</a>”: <strong>notificacions push i “add to home”</strong>.</p>
<h2 id="el-passat">El passat</h2>
<p><strong>Els desenvolupadors i dissenyadors segueixen utilitzant l’arquitectura de PC i la Web basada en el navegador d’escriptori</strong> i continuen desitjant poder accelerar-la als mòbils. Veiem aquest enfocament en els “embolcalls” per a aplicacions natives, personificats a per exemple PhoneGap (IE, Apache Còrdova), on les aplicacions web i llocs web estan escrites en HTML i CSS i després “embolicades” amb propietats natives (API hooks per al sistema operatiu i el maquinari del telèfon mòbil). El terme a la indústria per a aquests beuratges és aplicacions “híbrides”. A dia d’avui, aquest és <strong>un enfocament erroni en el desenvolupament multiplataforma</strong> i en la construcció de les millors experiències Web i app.</p>
<h2 id="el-futur">El Futur</h2>
<p>Hi ha una nova arquitectura que ajudarà a tancar la bretxa entre el rendiment de la web i el de les aplicacions natives i, finalment, pot proporcionar <strong>la solució per a la creació d’aplicacions i llocs web que són ràpids i fiables a l’era mòbil</strong>.</p>
<p>Les Aplicacions web progressives (“progressive web apps”) és un concepte <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" title="Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted">exposat per primer cop per l’enginyer de Google Alex Russell el juny de 2015</a>. En poques paraules, les aplicacions web progressives comencen com pestanyes al navegador Chrome i <strong>esdevenen progressivament més “aplicació”</strong> a mida que més persones les utilitzen, fins al punt en què poden ser afegides a la pantalla principal del telèfon i tenir accés a propietats d’aplicació com ara notificacions i ús sense connexió. Les aplicacions web progressives són “linkables” via URL, completament responsives i segures.</p>
<table>
<tbody>
<tr>
<td>Per a la velocitat i funcionalitat, les aplicacions web progressistes **es basen en dues funcions: l’[arquitectura d’aplicació tipus closca](https://developers.google.com/web/updates/2015/11/app-shell “Instant Loading Web Apps with An Application Shell Architecture</td>
<td>Web Updates - Google Developers”) (“Application Shell Architecture”) i els “<a href="http://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html" title="Chromium Blog: Chrome 40 Beta: Powerful Offline and Lightspeed Loading with Service Workers">Service Workers</a>“**.</td>
</tr>
</tbody>
</table>
<h2 id="service-workers-i-application-shell-architecture">“Service Workers” i “Application Shell Architecture”</h2>
<p>Els “Service Workers” poden fer que els llocs web funcionen fora de línia o ajudar a accelerar el contingut “interceptant les sol·licituds de xarxa per oferir respostes programàtiques o emmagatzemades a la memòria cau.”</p>
<p>L’interessant dels “Service Workers” és que si poden interceptar, emmagatzemar i lliurar continguts a partir de sol·licutds de xarxa, també poden <strong>tenir sempre a disposició l’arquitectura de l’aplicació (“Appication Shell Architecture”)</strong>, és a dir, la interfície bàsica i el disseny de l’aplicació web emmagatzemats i llests per lliurar-los gairebé a l’instant.</p>
<p>D’aquesta manera, la “closca” (“shell”) de l’aplicació és <strong>lliurada de manera instantània en el mateix moment que algú fa una petició des del seu mòbil</strong>.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/world-biomimetic-challenges-and-awards-full-width-snapshot.png" /><figcaption><p>digitalartbarcelona.com, el millor web possible per a la II Mostra Simultània d'Art Digital</p></figcaption></figure>
<h2 id="i-els-wbchac-què-han-de-dir">I els WBChaC què han de dir?</h2>
<p>La implementació dels “Service Workers” juntament amb l’arquitectura tipus “closca” tot just està començant. Ara bé, totes les eines ja estan disponibles (en diversos graus de maduresa). Tot és a punt per als desenvolupadors que ja vulguin fer el pas. De fet, en el darrer <strong><a href="https://events.google.com/io2016/" title="Google I/O 2016">Google I/O 2016</a></strong> es va donar com a solució estàndard alhora d’enfocar un nou projecte web</p>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció d’app webs que dugin a la millor experiència possible als seus usuaris per mitjà de les millors tecnologies disponibles en cada moment. És per això que hem creat <strong><a href="https://www.biomimeticchallengesandawards.com/">WBChaC</a></strong>, una mostra de les possibilitats reals d’una aplicació web progressiva. WBChaC és<sup><a href="#fn1" id="r1">[1]</a></sup>:</p>
<ul>
<li>Plenament responsiva</li>
<li>Instal·lable</li>
<li>Atractiva ja que disposa de la capacitat per retenir els usuaris via notifacions no intrusives de nous contignuts.</li>
<li>Rica en dades estructurades</li>
</ul>
<p>En aquest projecte hem seguit apostant per un ús intensiu de dades estructurades via <a href="http://json-ld.org/" title="JSON for linked data">JSON-LD</a>, que permet millorar la cercabilitat i per tant, la descoberta de nous continguts presents al web. A partir d’una sigle page app, progressivament es construeix un entrament de més de 100 URL’s.</p>
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
<hr />
<section>
<p id="fn1"><small><a href="#r1">[1]</a> Les funcionalitats d'aquesta app estan optimitzades per als navegador Chrome Desktop i Chrome Android a partir de la versió 47.</small></p>
</section>
<hr />
4YFN, petita història d'una decepció2016-02-29T11:48:19+00:00http://www.oxygen.cat/4yfn-2016-petita-historia-d-una-decepcio<blockquote>
<p>We believe that the startup culture is the driving force for change in economy and business fabric, and one of the main drivers to improve citizens’ quality of life.<footer>— <cite><a href="/4yfn-2016-petita-historia-d-una-decepcio/" title="4YFN, petita història d'una decepció">4YFN</a></cite></footer></p>
</blockquote>
<h2 id="artinpocket-un-dels-convidats-de-creative-catalonia">Artinpocket, un dels convidats de “Creative Catalonia”</h2>
<p>Enguany, fa un mes i escaig vàrem rebre una notícia que ens alegrà enormement. <a href="http://www.creativecatalonia.cat/web/sites/default/files/Booklet_4YFN_2016.pdf">Creative Catalonia</a>, sota el paraigua de l’ICEC, convidava <a href="http://www.artinpocket.cat/">Artinpocket</a>, juntamet amb altres 6 empreses, a participar com a exhibidor al 4YFN, el que per a nosaltres era l’esdeveniment mundial de referència del món start-up tecnològic. Engunay era el primer any d’aquesta iniciativa de l’ICEC.</p>
<p>Assimilada la notícia ens posem a treballar. Dissenyem la nostra estratègia de participació, comencem a preparar els materials de comunicació i màrqueting, ens posem a la recerca de noves obres digitals especials per a l’ocasió i ens repartim les diferentes càrregues de treball. En resum, posem fil a l’agulla amb el més gran dels somriures: anem al 4YFN a exhibir el nostre projecte estrella, Artinpocket!</p>
<p>Passen els dies, ja tenim els materials de comunicació en perfecte anglès a punt d’impremta, ja hem donat d’alta totes les edicions digitals de les obres seleccionades, ja hem revisat que el procés de certificació de l’unicitat digital funciona a les mil meravelles (amb més d’una emprenyada, pel camí tot sigui dit), ja hem omplert tots els formularis “haguts i per haver”, ja ho tenim tot.</p>
<h2 id="dilluns-dimarts-i-sobretot-dimecres-al-4yfn">Dilluns, dimarts i, sobretot, dimecres al 4YFN</h2>
<p>Arriba dilluns dia 22 de febrer de 2016 i com que diumenge ja havia fet la meva mitja hora de cua pertinent per obtenir l’acreditació, a les 9 en punt ja sóc dins del recinte firal de Montjuïc de camí al flamant estand d’Artinpocket a la caseta de Creative Catalonia. (Deixo de banda tot el que significà el caos de mobilitat, se n’ha dit de tot i més.). Ja ens hem instal·lat, ja ens hem presentat amb els veïns, ja hem connectat tots els dispositius per mostrar com cal la nostra feina, ja tenim els materials per anar repartint ordenats per tipus d’interès, ja tenim les targes de visita ben col·locades.</p>
<blockquote class="twitter-tweet" data-lang="ca"><p lang="es" dir="ltr">Empieza el <a href="https://twitter.com/hashtag/4YFN?src=hash">#4YFN</a> dónde presentamos tecnología certifica la unicidad de las obras de arte y las fotografías en formato digital <a href="https://twitter.com/hashtag/MWC16?src=hash">#MWC16</a></p>— Artinpocket (@Artinpocket) <a href="https://twitter.com/Artinpocket/status/701695530154520577">22 de febrer de 2016</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>I entre una cosa i l’altra, el dilluns és el primer dia, és la novetat, tot ha anat amb una certa normalitat.</p>
<blockquote class="twitter-tweet" data-lang="ca"><p lang="en" dir="ltr">We have invented the digital uniqueness! | <a href="https://twitter.com/hashtag/digitalart?src=hash">#digitalart</a> <a href="https://twitter.com/hashtag/MWC16?src=hash">#MWC16</a> <a href="https://twitter.com/hashtag/4yfn?src=hash">#4yfn</a> <a href="https://t.co/sMDAiFCSdU">https://t.co/sMDAiFCSdU</a></p>— freecates (@freecates) <a href="https://twitter.com/freecates/status/702065210761281536">23 de febrer de 2016</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Ja som dimarts 23 de febrer de 2016. Avui és el segon dia complet de 4YFN. Anem fent contactes, anem retrobant amics, coneguts i saludats i anem mirant de fer demos de la <strong>unicitat en les obres d’art i fotografies digitals</strong>. Anem, anem, anem intentant-ho! Som al 4YFN del MWC i <strong>no hi ha una wifi decent i la xarxa de telefonia té una cobertura pèsima!</strong></p>
<p>Entre conversa, passejada, tarja repartida i demo frustada arriba l’hora de plegar i marxar cap a casa. Demà serà dimecres. El gran dia. El dia dels <a href="https://4yfn.com/foundersandinvestors">“founders & investors”</a>. Caram com sóna això! “Founders & investors”!</p>
<p>I dimecres 24 arribà. Se’ns va convocar a les 10:30 hores, 15 minuts abans de l’inici de la nostra sessió “Founders & investors”. “Founders & investors” és una sessió tipus 1 a 1. Un format habitual al món start-up. Com funciona? <strong>Cada empresa que cerca finançament, prepara un discurs breu, anomenat “pitch”, centrat en les bondats del projecte empresarial, les necessitats de finançament i el retorn previst de la inversió</strong>. Concretament, al 4YFN les regles eren: 3 minuts per inversor, un màxim de 30 minuts i per tant, un màxim de 10 “pitchs” a 10 inversos diferents.</p>
<p>A les 10:30 ja hi eren tots els convocats. Repassant els nostres discursos. Comentant amb d’altres empreses els seus projectes. A les 10:45 entravem i se’ns col·locava en fila índia. Fila índia que va durar una hora més. Una hora més fent cua, i per fi, arribà el nostre torn. I, <strong>oh sopresa, després d’una hora fent cua només hi havia 3 dels 10 possibles inversors presents</strong>. 3, només 3 de 10 s’hi van presentar. <strong>Cara de pasta de moniato</strong>.</p>
<p>Em podria estendre més i llepar-me les ferides. Però no.</p>
<p>La meva experiència al <a href="https://twitter.com/4YFN_MWC">@4YFN_MWC</a> del <a href="https://twitter.com/MWC_Barcelona">@MWC_Barcelona</a>, <strong>decepcionant</strong>… Però com tot en aquesta vida, només és la meva experiència. N’hi ha moltes altres. Com ara <a href="http://dauapps.com/cronica-i-reflexions-del-4yfn-2016/">aquesta</a> o bé <a href="http://www.ara.cat/opinio/que-no-del-al-MWC_0_1531046915.html">aquesta</a> altra.</p>
'Progressive web Apps', el futur de la Web2015-12-08T11:48:19+00:00http://www.oxygen.cat/progressive-web-apps-el-futur-de-la-web<blockquote>
<p>... La creació d'aplicacions web progressives és el futur de la Web, ja que l'arquitectura d'aplicació tipus closca, el·liminarà la necessitat d'aplicacions híbrides.</p>
<footer>— <cite><a href="/progressive-web-apps-el-futur-de-la-web/" title="'Progressive web Apps', el futur de la Web">Ramon Gil</a></cite></footer>
</blockquote>
<h2 id="el-passat">El passat</h2>
<p><strong>Els desenvolupadors i dissenyadors segueixen utilitzant l’arquitectura de PC i la Web basada en el navegador d’escriptori</strong> i continuen desitjant poder accelerar-la als mòbils. Veiem aquest enfocament en els “embolcalls” per a aplicacions natives, personificats a per exemple PhoneGap (IE, Apache Còrdova), on les aplicacions web i llocs web estan escrites en HTML i CSS i després “embolicades” amb propietats natives (API hooks per al sistema operatiu i el maquinari del telèfon mòbil). El terme a la indústria per a aquests beuratges és aplicacions “híbrides”. A dia d’avui, aquest és <strong>un enfocament erroni en el desenvolupament multiplataforma</strong> i en la construcció de les millors experiències Web i app.</p>
<h2 id="el-futur">El Futur</h2>
<p>Hi ha yna nova arquitectura que ajudarà a tancar la bretxa entre el rendiment de la web i el de les aplicacions natives i, finalment, pot proporcionar <strong>la solució per a la creació d’aplicacions i llocs web que són ràpids i fiables a l’era mòbil</strong>.</p>
<p>Les Aplicacions web progressives (“progressive web apps”) és un concepte <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" title="Progressive Web Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted">exposat per primer cop per l’enginyer de Google Alex Russell el juny de 2015</a>. En poques paraules, les aplicacions web progressives comencen com pestanyes al navegador Chrome i <strong>esdevenen progressivament més “aplicació”</strong> a mida que més persones les utilitzen, fins al punt en què poden ser afegides a la pantalla principal del telèfon i tenir accés a propietats d’aplicació com ara notificacions i ús sense connexió. Les aplicacions web progressives són “linkables” via URL, completament responsives i segures.</p>
<p>Per a la velocitat i funcionalitat, les aplicacions web progressistes <strong>es basen en dues funcions: l’<a href="https://developers.google.com/web/updates/2015/11/app-shell" title="Instant Loading Web Apps with An Application Shell Architecture">arquitectura d’aplicació tipus closca</a> (“Application Shell Architecture”) i els “<a href="http://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html" title="Chromium Blog: Chrome 40 Beta: Powerful Offline and Lightspeed Loading with Service Workers">Service Workers</a>“</strong>.</p>
<h2 id="service-workers-i-application-shell-architecture">“Service Workers” i “Application Shell Architecture”</h2>
<p>Els “Service Workers” poden fer que els llocs web funcionen fora de línia o ajudar a accelerar el contingut “interceptant les sol·licituds de xarxa per oferir respostes programàtiques o emmagatzemades a la memòria cau.”</p>
<p>L’interessant dels “Service Workers” és que si poden interceptar, emmagatzemar i lliurar continguts a partir de sol·licutds de xarxa, també poden <strong>tenir sempre a disposició l’arquitectura de l’aplicació (“Appication Shell Architecture”)</strong>, és a dir, la interfície bàsica i el disseny de l’aplicació web emmagatzemats i llests per lliurar-los gairebé a l’instant.</p>
<p>D’aquesta manera, la “closca” (“shell”) de l’aplicació és <strong>lliurada de manera instantània en el mateix moment que algú fa una petició des del seu mòbil</strong>.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/progressive-web-apps-full-width-snapshot.png" /><figcaption><p>digitalartbarcelona.com, el millor web possible per a la II Mostra Simultània d'Art Digital</p></figcaption></figure>
<h2 id="com-a-mostra-un-botó-artinpocketshowcase">Com a mostra un botó: ArtinpocketShowcase</h2>
<p>La implementació dels “Service Workers” juntament amb l’arquitectura tipus “closca” tot just està començant. Ara bé, totes les eines ja estan disponibles (en diversos graus de maduresa). Tot és a punt per als desenvolupadors que ja vulguin fer el pas.</p>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció d’app webs que dugin a la millor experiència possible als seus usuaris per mitjà de les millors tecnologies disponibles en cada moment. És per això que hem creat <strong><a href="https://artinpocketshowcase.appspot.com/">Artinpocketshowcase</a></strong>, una mostra de les possibilitats reals d’una aplicació web progressiva. Artinpocketshowcase és<sup><a href="#fn1" id="r1">[1]</a></sup>:</p>
<ul>
<li>Plenament responsiva</li>
<li>De càrrega gairebé instantània</li>
<li>Indepentent de la connectivitat, ja que funciona “offline”</li>
<li>Instal·lable</li>
<li>Atractiva ja que disposa de la capacitat per retenir els usuaris via notifacions no intrusives de nous contignuts.</li>
<li>Modular via Polymer</li>
</ul>
<p>En aquest projecte hem seguit apostant pels <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre>
<code>
<template is="dom-if" if="{{article.categoryaday}}" restamp="true">
<section class="main">
<template is="dom-repeat" items="{{article.desc}}">
<dl>
<dt><strong>{{item.pregunta}}</strong></dt>
<dd>{{item.resposta}}</dd>
</dl>
</template>
</section>
</template>
</code>
</pre>
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
<hr />
<section>
<p id="fn1"><small><a href="#r1">[1]</a> Les funcionalitats d'aquesta app estan optimitzades per als navegador Chrome Desktop i Chrome Android a partir de la versió 47.</small></p>
</section>
<hr />
digitalartbarcelona, el millor web possible per a la II Mostra Simultània d'Art Digital2015-07-08T11:48:19+00:00http://www.oxygen.cat/digital-art-barcelona-el-millor-web-possible-per-a-la-ii-mostra-simultania-d-art-digital<blockquote>
<p>… descobrir i experimentar amb l’art digital en entorns a priori fora del circuit expositiu tradicional d’art. Oci, cultura i patrimoni es fusionen per oferir una experiència entorn l’Art digital sense precedents a Barcelona.<footer>— <cite><a href="/digital-art-barcelona-el-millor-web-possible-per-a-la-ii-mostra-simultania-d-art-digital/" title="digitalartbarcelona, el millor web possible per a la II Mostra Simultània d'Art Digital">digitalartbarcelona.com</a></cite></footer></p>
</blockquote>
<h2 id="mad-bcn-ii-mostra-simultània-dart-digital">MAD BCN. II Mostra Simultània d’Art Digital</h2>
<p>La Plataforma <strong><a href="http://www.artinpocekt.cat/">Artinpocket</a></strong> juntament amb el <strong>Convent de Sant Agustí</strong> i en col·laboració amb <strong>Blanz</strong> com a entitats conscients de les transformacions en la creació, difusió i exhibició de l’art han ceat la segona Mostra d’art digital de Barcelona (MAD Barcelona) que es pot veure del 8 al 19 de juliol a diferents espais de Barcelona.</p>
<p>MAD Barcelona té com a objectiu oferir al públic la possibilitat de descobrir i experimentar amb l’art digital en entorns a priori fora del circuit expositiu tradicional d’art. Per assolir-ho es compta amb <strong>Canon</strong>, que realitzarà un taller on es mostraran els últims avenços tecnològics de les seves impressores vehiculant-les amb el món de l’art, així com el suport de <strong>TRAM</strong>, que projectarà vídeos de la mostra als monitors de les seves línies de transport.</p>
<p>Des de MAD Barcelona es promou la divulgació i normalització del consum de l’art digital fora dels circuits habituals i per aquest motiu la part educativa de la Mostra, que serà dirigida pel Convent de Sant Agustí de Barcelona, resulta essencial. Aquesta consistirà en la realització de deu càpsules formatives relacionades amb la creació digital i multimèdia i que es portaran a terme del 6 al 19 juliol al mateix convent.</p>
<h3 id="digitalartbarcelona">digitalartbarcelona</h3>
<p><a href="https://www.digitalartbarcelona.com/" title="MAD Barcelona · II Simultaneous Digital Art Show">www.digitalartbarcelona.com</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp per a la recollida i gestió de les propostes del I Premi Internacional Digital Art Barcelona 2015, ruta dels espais d’exposició, agenda dels tallers i activitats paral·leles i tot plegat amb notificacions push</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 10 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/digital-art-barcelona-full-width-snapshot.png" /><figcaption><p>digitalartbarcelona.com, el millor web possible per a la II Mostra Simultània d'Art Digital</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’<strong>estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web</strong>. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-webcompoents-service-worker-formularis-de-google-customitzats-i-notificacions-push">La fórmula amb Jekyll, Prose, Webcompoents, Service Worker, formularis de Google customitzats i notificacions push!</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest projecte seguim apostant pels <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre>
<code><google-map latitude="41.389329" longitude="2.172469" disableDefaultUI zoom="14">
{% for place in site.data.places %}
<google-map-marker latitude="{{ place.latitude }}" longitude="{{ place.longitude }}"
title="{{ place.name }}" draggable="false" icon="/favicon.ico">
<p class="text-center"><a href="{{ place.url-in }}"><img src="/public/img/{{ place.logo }}"></a></p>
<p>
<strong><a href="{{ place.url-in }}">{{ place.name }}</a></strong><br/>
<strong>Adreça</strong> / <em>Address</em> / Dirección: {{ place.address }}<br/>
<strong><a href="{{ place.getdirections }}">Com arribar-hi?</a></strong> / <em><a href="{{ place.getdirections }}">Get directions</a></em> / <a href="{{ place.getdirections }}">¿Cómo llegar?</a><br/>
<strong>Horari projecció</strong> / <em>Screening timetable</em>: <strong>{{ place.screening-ca }}</strong> / <em>{{ place.screening-en }}</em><br/>
</p>
</google-map-marker>
{% endfor %}
</google-map>
</code>
</pre>
<p>Des del punt de vista tècnic, el web digitalartbarcelona.com fa ús també del “<a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">service worker</a>”. Amb aquesta implementació, ara sí, el web es comporta com una veritable app ja que <strong>funciona 100% offline sense els maldecaps de l’<a href="http://alistapart.com/article/application-cache-is-a-douchebag">appcache</a></strong>! Aquesta funcionalitat es troba encara en una fase força <a href="http://caniuse.com/#feat=serviceworkers">experimental</a> de l’HTML5 però de ben segur que aquest és el futur de les web apps. A més a més, gràcies a la versió 1.0 de Polymer, la implementació és força més senzilla.</p>
<h3 id="formularis-de-google-customitzats">Formularis de Google customitzats</h3>
<p>Per a la recollida de dades dels participants al I Premi Internacional Digital Art Barcelona 2015, hem optat de nou per cusotmitzar dos formularis de Google i lligar-lo a un full de càlcul al núvol, la qual cosa ens ha permés fer <strong>un seguiment en temps real de totes les dades dels participants</strong>.</p>
<h3 id="notificacions-push">Notificacions push</h3>
<p>Cal destacar com a gran novetat, la incorporació de notificacions push. La incorporació d’aquesta nova API HTML5 als navegadors Chrome (tant entorn escriptori com mòbil i tauletes), donen un nou gran valor afegit a les webapp, pertement <strong>una comunicació més directe amb els nostres usuaris</strong>. Tot plegat gràcies al servei <a href="http://goroost.com">goroost.com</a>.</p>
<h2 id="millor-difusió-a-xarxes-socials-i-millor-seo">Millor difusió a xarxes socials i millor SEO</h2>
<p>digitalartbarcelona.com presenta quatre detalls interessants que <strong>faciliten la seva difusió a les xarxes socials i un millor posicionament SEO</strong>:</p>
<ul>
<li>Ús de <a href="http://ogp.me/" title="The Open Graph Protocol">metadades og</a> que generen de manera automàtica <strong>millors posts a Facebook i a Goolge Plus</strong>.</li>
<li>
<table>
<tbody>
<tr>
<td>Ús de [Twitter Cards](https://dev.twitter.com/cards/overview “Twitter Cards</td>
<td>Twitter Developers”) que generen de manera automàtica <strong>resums ampliats en forma de tarjeta als tuits</strong> sobre el Concurs.</td>
</tr>
</tbody>
</table>
</li>
<li>Ús d’<a href="http://schema.org/docs/schemas.html" title="Schemas - schema.org">Schema Metadata</a> (Organization i Article) per <strong>facilitar la indexació</strong> dels contiguts a Google, <strong>facilitar el poscionament</strong> i donar <strong>millors resultats de cerca</strong>.</li>
<li>SSL gràcies a Cloudflare. <a href="http://googlewebmastercentral.blogspot.com.es/2014/08/https-as-ranking-signal.html" title="Official Google Webmaster Central Blog: HTTPS as a ranking signal">Google</a> aposta dedicidament per una Internet més segura i per tant ha decidit <strong>premiar aquells webs que corrin sota https</strong>!</li>
</ul>
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: el millor servei i la millor innovació</strong>!</p>
Webs sense connexió a Internet! El cas del concurs TRAMdisseny2015-04-07T11:48:19+00:00http://www.oxygen.cat/webs-sense-connexio-el-cas-del-concurs-tram-disseny<blockquote>
<p>Concurs adreçat a estudiants de disseny gràfic amb el que es pretén ampliar la formació acadèmica de l’alumne amb un cas real.<footer>— <cite><a href="/webs-sense-connexio-el-cas-del-concurs-tram-disseny/" title="Webs sense connexió a Internet! El cas del concurs TRAMdisseny">TRAMdisseny</a></cite></footer></p>
</blockquote>
<h2 id="tram">TRAM</h2>
<p><strong><a href="http://www.tram.cat/" title="TRAM - Barcelona">TRAM</a></strong> és una empresa de transport públic que gestiona les dues xarxes actuals de tramvies a la Regió Metropolitana de Barcelona de la manera més eficient. Treballen per oferir el millor servei als viatgers que diàriament utilitzen el tramvia per desplaçar-se de manera ràpida, còmoda i segura.</p>
<p>Des de <strong>TRAM</strong> volen posar en marxa la seva línia de merxandatge. És en aquest sentit que s’emmarca <strong>el nou web del concurs TRAMdisseny</strong>.</p>
<h3 id="tramdisseny">TRAMdisseny</h3>
<p><a href="https://www.tramdisseny.cat/" title="Concurs adreçat a estudiants de disseny gràfic amb el que es pretén ampliar la formació acadèmica de l’alumne amb un cas real. TRAM seleccionarà les proposte...">www.tramdisseny.cat</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp per a la recollida i gestió de les propostes del concurs</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 10 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/tram-disseny-full-width-snapshot.png" /><figcaption><p>Webs sense connexió a Internet! El cas del concurs TRAMdisseny</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’<strong>estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web</strong>. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-webcompoents-service-worker-i-formularis-de-google-customitzats">La fórmula amb Jekyll, Prose, Webcompoents, Service Worker i formularis de Google customitzats</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest projecte seguim apostant pels <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre>
<code><google-map latitude="41.5499299" longitude="2.4512864" fitToMarkers disableDefaultUI zoom="15" id="mapa">
{% assign place_data = site.data.places | where:"id", 2 %}
{% assign place = place_data | first %}
<google-map-marker latitude="{{ place.latitude }}" longitude="{{ place.longitude }}"
title="{{ place.name }}" draggable="false" icon="/favicon.ico">
<p><strong>{{ place.name }}</strong></p>
<p><small><strong>Adreça:</strong> {{ place.address }}<br/><strong>Telèfon:</strong> <a href="tel:{{ place.phone }}">{{ place.phone }}</a> | <strong><a href="{{ place.getdirections }}">Com arribar-hi?</a></strong></small></p>
<p><small><a href="{{ place.url }}" title="{{ place.name }}" rel="external">url</a> | <a href="https://twitter.com/{{ place.twitter }}" title="@{{ place.twitter }} rel="external"">t</a> | <a href="{{ place.facebook }}" title="{{ place.name }} en Facebook" rel="external">f</a> | <a href="mailto:{{ place.email }}" title="Correo-e {{ place.email }}" rel="external">e</a></small></p>
</google-map-marker>
</google-map>
</code>
</pre>
<p>Des del punt de vista tècnic, el web tramdisseny.cat fa ús també del “<a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">service worker</a>”. Amb aquesta implementació, ara sí, el web es comporta com una veritable app ja que <strong>funciona 100% offline sense els maldecaps de l’<a href="http://alistapart.com/article/application-cache-is-a-douchebag">appcache</a></strong>! Aquesta funcionalitat es troba encara en una fase força <a href="http://caniuse.com/#feat=serviceworkers">experimental</a> de l’HTML5 però de ben segur que aquest és el futur de les web apps.</p>
<h3 id="formularis-de-google-customitzats">Formularis de Google customitzats</h3>
<p>Per a la recollida de dades dels participants al Concurs <strong>TRAM</strong>disseny, hem optat per cusotmitzar un formulari de Google i lligar-lo a un full de càlcul al núvol, la qual cosa ens permet fer <strong>un seguiment en temps real de totes les dades dels participants</strong>.</p>
<h2 id="millor-difusió-a-xarxes-socials-i-millor-seo">Millor difusió a xarxes socials i millor SEO</h2>
<p>tramdisseny.cat presenta quatre detalls interessants que <strong>faciliten la seva difusió a les xarxes socials i un millor posicionament SEO</strong>:</p>
<ul>
<li>Ús de <a href="http://ogp.me/" title="The Open Graph Protocol">metadades og</a> que generen de manera automàtica <strong>millors posts a Facebook i a Goolge Plus</strong>.</li>
<li>
<table>
<tbody>
<tr>
<td>Ús de [Twitter Cards](https://dev.twitter.com/cards/overview “Twitter Cards</td>
<td>Twitter Developers”) que generen de manera automàtica <strong>resums ampliats en forma de tarjeta als tuits</strong> sobre el Concurs.</td>
</tr>
</tbody>
</table>
</li>
<li>Ús d’<a href="http://schema.org/docs/schemas.html" title="Schemas - schema.org">Schema Metadata</a> (Organization i Article) per <strong>facilitar la indexació</strong> dels contiguts a Google, <strong>facilitar el poscionament</strong> i donar <strong>millors resultats de cerca</strong>.</li>
<li>SSL gràcies a Cloudflare. <a href="http://googlewebmastercentral.blogspot.com.es/2014/08/https-as-ranking-signal.html" title="Official Google Webmaster Central Blog: HTTPS as a ranking signal">Google</a> aposta dedicidament per una Internet més segura i per tant ha decidit <strong>premiar aquells webs que corrin sota https</strong>!</li>
</ul>
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> tenim la voluntat d’intentar anar un pas per endavant, <strong>oferint allò que els nostres clients es mereixen: bon servei i millor innovació</strong>!</p>
Figura i retrat. Jekyll, Polymer i Schema metadata2015-03-06T11:48:19+00:00http://www.oxygen.cat/figura-i-retrat-jekyll-polymer-i-schema-metada<blockquote>
<p>Per què és vol el retrat?. S’ha dit que el retrat és el substitut i/o el record de la presència de l’absent: amb el retrat es vol que l’absent, el recordat, sigui present.<footer>— <cite><a href="/figura-i-retrat-jekyll-polymer-i-schema-metada/" title="Figura i retrat. Jekyll, Polymer i Schema metadata">Arnau Puig</a></cite></footer></p>
</blockquote>
<h2 id="la-fundació-iluro">La Fundació Iluro</h2>
<p>La <a href="http://www.fundacioiluro.cat/">Fundació Iluro</a> té una remarcable col·lecció de pintura, escultura, dibuix i gravat que configura el seu fons artístic. El Patronat de la Fundació té clar que fer-lo accessible al públic ha de ser una de les seves prioritats.</p>
<p>És en aquest sentit que s’emmarca <strong>el nou web de l’exposició Figura i Retrat</strong>.</p>
<h3 id="figura-i-retrat">Figura i Retrat</h3>
<p><a href="http://figurairetrat.fundacioiluro.cat/" title="L'exposició “La figura i el retrat en els fons d'art de la Fundació Iluro” es configura com una mostra de les obres més destacades del fons.">figurairetrat.fundacioiluro.cat</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp d’esdeveniments artístics</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 10 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/figura-i-retrat-full-width-snapshot.png" /><figcaption><p>Figura i retrat. Jekyy, Polymer i Schema metadata</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’<strong>estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web</strong>. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-webcompoents-i-schema-metadata">La fórmula amb Jekyll, Prose, Webcompoents i Schema metadata!</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest projecte seguim apostant pels <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre>
<code><google-map latitude="41.5499299" longitude="2.4512864" fitToMarkers disableDefaultUI zoom="15" id="mapa">
{% assign place_data = site.data.places | where:"id", 2 %}
{% assign place = place_data | first %}
<google-map-marker latitude="{{ place.latitude }}" longitude="{{ place.longitude }}"
title="{{ place.name }}" draggable="false" icon="/favicon.ico">
<p><strong>{{ place.name }}</strong></p>
<p><small><strong>Adreça:</strong> {{ place.address }}<br/><strong>Telèfon:</strong> <a href="tel:{{ place.phone }}">{{ place.phone }}</a> | <strong><a href="{{ place.getdirections }}">Com arribar-hi?</a></strong></small></p>
<p><small><a href="{{ place.url }}" title="{{ place.name }}" rel="external">url</a> | <a href="https://twitter.com/{{ place.twitter }}" title="@{{ place.twitter }} rel="external"">t</a> | <a href="{{ place.facebook }}" title="{{ place.name }} en Facebook" rel="external">f</a> | <a href="mailto:{{ place.email }}" title="Correo-e {{ place.email }}" rel="external">e</a></small></p>
</google-map-marker>
</google-map>
</code>
</pre>
<p>En aquest projecte no fem ús de la <a href="http://en.wikipedia.org/wiki/Representational_state_transfer" title="Representational state transfer - Wikipedia, the free encyclopedia">RESTful API</a> del portal principal, per obtenir les dades de les obres, donat que aquestes no estan a la venda. En aquest cas construim les dades a mida en format <a href="http://en.wikipedia.org/wiki/YAML" title="YAML - Wikipedia, the free encyclopedia">YAML</a>. Una altra forma de crear <strong>un sistema “automatitzat” per a l’emplenat de dades</strong>.</p>
<h2 id="millor-difusió-a-xarxes-socials-i-millor-seo">Millor difusió a xarxes socials i millor SEO</h2>
<p>Des del punt de vista tècnic, el web figuraitretrat.fundacioiluro.cat presenta tres detalls interessants que <strong>faciliten la seva difusió a les xarxes socials i un millor posicionament SEO</strong>:</p>
<ul>
<li>Ús de <a href="http://ogp.me/" title="The Open Graph Protocol">metadades og</a> tant a les obres com als esdeveniments, que generen de manera automàtica <strong>millors posts a Facebook i a Goolge Plus</strong>.</li>
<li>
<table>
<tbody>
<tr>
<td>Ús de [Twitter Cards](https://dev.twitter.com/cards/overview “Twitter Cards</td>
<td>Twitter Developers”) tant a les obres com als esdeveniments, que generen de manera automàtica <strong>resums ampliats en forma de tarjeta als tuits</strong> sobre l’exposició.</td>
</tr>
</tbody>
</table>
</li>
<li>Ús d’<a href="http://schema.org/docs/schemas.html" title="Schemas - schema.org">Schema Metadata</a> (Organization, IndividualProduct i Event) per <strong>facilitar la indexació</strong> dels contiguts a Google, <strong>facilitar el poscionament</strong> i donar <strong>millors resultats de cerca</strong>.</li>
</ul>
<p>A <a href="http://www.oxygen.cat/">Oxygen.cat</a> <strong>tenim la voluntat d’anar un pas per endavant</strong>!</p>
Jordi Pagès. Jekyll, Polymer, RESTful API i Service Worker2015-02-04T11:48:19+00:00http://www.oxygen.cat/jordi-pages-jekyll-polymer-restful-api-i-service-worker<blockquote>
<p>Jordi Pagès és un artista de Granollers (1951) amb una forta empremta a Cadaqués.<footer>— <cite><a href="/jordi-pages-jekyll-polymer-restful-api-i-service-worker/" title="Jordi Pagès. Jekyll, Polymer, RESTful API i Service Worker">Artinpocket</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<p>És en aquest sentit que s’emmarca <strong>el nou web de l’artista Jordi Pagès</strong>.</p>
<h3 id="jordi-pagès">jordi Pagès</h3>
<p><a href="http://www.jordipages.cat/" title="Jordi Pagès és un artista de Granollers amb una forta empremta a Cadaqués">jordipages.cat</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp de portfoli professional</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 10 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/jordipages-full-width-snapshot.png" /><figcaption><p>Jordi Pagès. Jekyll, Polymeri Service Worker</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’<strong>estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web</strong>. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-webcompoents-restful-api-i-service-worker">La fórmula amb Jekyll, Prose, Webcompoents, RESTful API i Service Worker!</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest projecte emprem de nou <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre><code><core-image sizing="cover" class="core-image-size" preload fade src="{{ work.featured_src }}"></core-image></code></pre>
<p>Seguim emprant la <a href="http://en.wikipedia.org/wiki/Representational_state_transfer" title="Representational state transfer - Wikipedia, the free encyclopedia">RESTful API</a> del portal principal, per obtenir les dades de les obres en venda de l’artista via <a href="http://en.wikipedia.org/wiki/JSON" title="JSON - Wikipedia, the free encyclopedia">JSON</a>. D’aquesta manera creem <strong>un sistema “automatitzat” per a l’emplenat de dades</strong>.</p>
<h3 id="service-worker">Service Worker</h3>
<p>Des del punt de vista tècnic, el web jordipages.cat presenta <strong>una darrera novetat molt innovadora</strong>: l’ús del “<a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">service worker</a>”. Amb aquesta implementació, ara sí, el web esc comporta com una veritable app ja que <strong>funciona 100% offline sense els maldecaps de l’<a href="http://alistapart.com/article/application-cache-is-a-douchebag">appcache</a></strong>! Aquesta funcionalitat es troba encara en una fase força <a href="http://caniuse.com/#feat=serviceworkers">experimental</a> de l’HTML5 però tot sembla indicar que aquest és el futur de les web apps.</p>
<p>A Oxygen.cat <strong>sempre anem un pas per endavant</strong>! Ah, abans que se’ns oblidi! Un app <a href="/webs-segures-per-a-tothom-amb-ssl/">100% segura</a>, gràcies a Cloudflare!</p>
Webs segures per a tothom amb ssl. Millor posicionament2015-01-09T11:48:19+00:00http://www.oxygen.cat/webs-segures-per-a-tothom-amb-ssl<p>A Oxygen apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 10 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia. En essència la fórmula és:</p>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a></li>
</ul>
<h2 id="google-i-la-seguretat-una-prioritat-de-màxim-nivell-un-millor-posicionament">Google i la seguretat. Una prioritat de màxim nivell. Un millor posicionament</h2>
<p><a href="http://googlewebmastercentral.blogspot.com.es/2014/08/https-as-ranking-signal.html" title="Official Google Webmaster Central Blog: HTTPS as a ranking signal">Google</a> ja fa temps que ha apostat per la seguretat com una prioritat màxima. En aquest sentit una Intenet més segura passa per l’adopció del que anomenen “<a href="https://www.youtube.com/watch?v=cBhZ6S0PFCY" title="Google I/O 2014 - HTTPS Everywhere - YouTube">HTTPS a tot arreu</a>”. Aquesta prioritat a més a més fa que Google consideri l’<a href="http://ca.wikipedia.org/wiki/HTTPS" title="HTTPS - Viquipèdia, l'enciclopèdia lliure">HTTPS</a> com un indicador en el posicionament orgànic. És a dir, <strong>els nostres webs tindran majors possibilitats d’aparèixer al capdamunt dels resultats de cerca si fem ús del protocol HTTPS</strong>. És a dir, si estan certificats via <a href="http://en.wikipedia.org/wiki/Transport_Layer_Security" title="Transport Layer Security - Wikipedia, the free encyclopedia">SSL</a>.</p>
<h2 id="https-a-tot-arreu-com-ho-faig">HTTPS a tot arreu. Com ho faig</h2>
<p>Des de fa molt de temps hi ha empreses especialitzades en l’emissió de certificats de navegació segura. Aquestes empreses emeten diferents tipus de certificat amb diferents nivells d’encriptació. Algunes d’aquestes empreses són: Symantec, Thawte o GeoTrust. Els preus anuals d’emissió oscil·len entre els 150€ i els 400€. Un cop adquirit el nostre certificat caldrà configurar el nostre servidor web per tal d’acitivar-lo.</p>
<p>Ara bé, <strong>i si hem apostat per la fórmula Jekyll <a href="https://konklone.com/post/github-pages-now-supports-https-so-use-it">Github</a> amb domini propi? Doncs estem de sort!</strong> Podem tenir els nostres webs segurs i millor posicionats, <strong>com per exemple <a href="https://www.espaisid.com/">#espaiSID</a></strong>, gràcies al servei universal SSL que ens ofereix <a href="https://www.cloudflare.com/index.html">Cloudflare</a>. I a més, sense cost addicional.</p>
<h3 id="activant-el-servei-universal-ssl-de-cloudflare">Activant el servei universal SSL de Cloudflare</h3>
<p>En primer lloc, hem de crear un compte a Cloudflare. No ens preocupem, és fàcil registrar-se! La part “difícil” és modificar el DNS al registrador de dominis, però si sabem allotjar el nostre codi a Github, sabem modificar registres DNS al registrador de dominis. Seguim les instruccions Cloudflare (hem d’apuntar els nostres servdidors de noms als de Cloudflare) i després configurem les nostres opcions preferides (per exemple podem “minimitzar” els nostres CSS i Javascript).</p>
<p>Hem d’habilitar SSL en la configuració Cloudflare i esperar-ne l’activació. L’última part és forçar HTTPS a totes les pàgines. Per fer això, hem d’anar a ‘pages rules” i activar-ne l’opció. Molt fàcil!</p>
<h2 id="per-què-és-això-important">Per què és això important?</h2>
<p>SSL és una capa de seguretat a través d’HTTP que impedeix que qualsevol un tercer pugui veure el contingut de les pàgines a les que accedim. Evita que les “escoltes” i per tant que get com la NSA sapiguen per on naveguem (o potser no :-)).</p>
<p>És una barrera de xifrat que és útil per evitar que algú sàpiga els nostres hàbits de navegació i les nostres que fem en un determinat lloc. Això és encara més rellevant quan ens connectem a xarxes wifi públiques, com la d’un aeroport o un hotel.</p>
<p>A més a més, com hem dit al començament, <strong>Google ha anunciat que millorarà el PageRank dels llocs web que tenen HTTPS!</strong></p>
Emocionart. Un altre cop, Jekyll i Polymer i a més RESTful API2014-10-15T11:48:19+00:00http://www.oxygen.cat/emocionart-un-altre-cop-jekyll-and-polymer<blockquote>
<p>‘#Emocionart’ és una acció d’Artinpocket per promocionar i impulsar la compra d’art.<footer>— <cite><a href="/emocionart-un-altre-cop-jekyll-and-polymer/" title="Emocionart. Un altre cop, Jekyll i Polymer i a més RESTful API">Artinpocket</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<h3 id="emocionart">Emocionart</h3>
<p>Amb aquest nou projecte <strong><a href="http://www.artinpocket.cat/">Artinpocket</a></strong>, duu a terme una acció per promocionar i impulsar la compra d’art. Durant tres mesos la plataforma impulsarà diferents accions amb l’objectiu d’apropar l’art i incentivar la compra obres originals a preus assequibles. Amb aquesta acció es pretén trencar falsos mites: l’art és car? No sempre! L’Art és per a una minoria? ¡Fals!</p>
<p><a href="http://www.emocio-nart.com/" title="#Emocionart · Descubre, emociónate y compra obras de arte ">emocio-nart.com</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp d’ecommerce</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/emocionart-full-width-snapshot.png" /><figcaption><p>Emocionart. Un altre cop, Jekyll and Polymer</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-webcompoents-i-restful-api">La fórmula amb Jekyll, Prose, Webcompoents i RESTful API!</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest nou projecte emprem de nou <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google.</p>
<pre><code><core-image sizing="cover" class="core-image-size" preload fade src="{{ work.featured_src }}"></core-image></code></pre>
<p>A més a més hem començat a emprar la <a href="http://en.wikipedia.org/wiki/Representational_state_transfer" title="Representational state transfer - Wikipedia, the free encyclopedia">RESTful API</a> del portal principal per obtenir les dades de les obres dels artistes via <a href="http://en.wikipedia.org/wiki/JSON" title="JSON - Wikipedia, the free encyclopedia">JSON</a>. D’aquesta manera creem <strong>un sistema “automatitzat” per l’emplenat de dades</strong>.</p>
<h2 id="artinpocket-segueix-creixent">artinpocket, segueix creixent</h2>
<p>A més a més de la posta en marxa d’emocio-nart.com, des d’<strong>Oxygen</strong> seguim aportant per fer més gran l’ecosistema web d’<strong>artinpocket</strong>:</p>
<ul>
<li><a href="http://www.artinpocket.cat/">artinpocket.cat</a>, la comunitat de compra venda d’art accessible amb un sol clic</li>
<li><a href="http://www.artinpocket.cat/blog/">artinpocket.cat/blog</a>, el blog general sobre el projecte</li>
<li><a href="http://www.artinpocketregular.com/">artinpocketregular.com</a>, el blog del verkami per a desenvolupar una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</li>
<li><a href="http://www.artelowcost.com/">artelowcost.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.arteeconomico.com/">arteeconomico.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.inpockettshirts.com/">inpockettshirts.com</a>, la botiga d’art per emportar d’Artinpocket. Art per portar posat, art amb la gent, per a la gent i per la gent.</li>
<li><a href="http://www.inpocketart.com/">inpocketart.com</a>, <del>la botiga d’art digital d’edició limitada amb certificat digital d’autenticitat</del>. Fusionada amb el portal principal, que conté ambdues tipologies d’art: analògic i digital amb certficiat digital d’autenticitat.</li>
<li><a href="http://www.digitalartbarcelona.com/">digitalartbarcelona.com</a>, la 1ª mostra simultània d’art digital a Barcelona.</li>
<li><a href="http://www.emocio-nart.com/">emocio-nart.com</a>, campanya per promocionar i impulsar la compra d’art.</li>
</ul>
Barcelona Digital Art. Jekyll and Polymer2014-07-31T11:48:19+00:00http://www.oxygen.cat/barcelona-digital-art-jekyll-and-polymer<blockquote>
<p>La mostra simultània d’art digital a Barcelona es presenta com una exposició simultània en espais i edificis de referència de la ciutat.<footer>— <cite><a href="/barcelona-digital-art-jekyll-and-polymer/" title="Barcelona Digital Art. Jekyll and Polymer">Artinpocket</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<h3 id="barcelona-digital-art">Barcelona Digital Art</h3>
<p>Amb aquest nou projecte <strong>Artinpocket</strong>, crea la 1ª mostra simultània d’art digital a Barcelona. Una exposició simultània en espais i edificis de referència de la ciutat. La mostra neix amb l’objectiu d’oferir al públic la possibilitat de descobrir i experimentar amb l’art digital en entorns a priori fora del circuit expositiu tradicional d’art. Oci, cultura i patrimoni es fusionen per oferir una experiència entorn l’Art digital sense precedents a Barcelona. Amb la finalitat de divulgar la disciplina de l’art digital; projectar i promocionar el treball de joves artistes i obrir nous espais i formats expositius a Barcelona <a href="http://www.artinpocket.cat/">Artinpocket</a>, el <a href="http://www.digitalartbarcelona.com/patrocinadors/2014/07/24/convent-sant-agusti/">Convent de Sant Agustí</a>, amb la col·laboració de <a href="http://www.digitalartbarcelona.com/patrocinadors/2014/07/26/idodi/">IDODI</a> i <a href="http://www.digitalartbarcelona.com/patrocinadors/2014/07/25/blanz/">BlaNZ</a>, han reunit més de 20 creadors d’art digital per crear una mostra simultània a diferents locals de Barcelona.</p>
<p><a href="http://www.digitalartbarcelona.com/" title="Barcelona Digital Art · 1st simultaneous digital art show in Barcelona">digitalartbarcelona.com</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp d’ecommerce</strong>.</p>
<h2 id="cms-free">CMS-free</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/barcelona-digital-art-full-width-snapshot.png" /><figcaption><p>Barcelona Digital Art. Jekyll and Polymer</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-i-webcompoents">La fórmula amb Jekyll, Prose i… Webcompoents!</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>En aquest nou projecte hem començat a emprar <a href="http://webcomponents.org/" title="WebComponents.org">web components</a>, una veritable revolució en el desenvolupament web, per mitjà de <a href="http://www.polymer-project.org/" title="Welcome - Polymer">Polymer</a>, l’“opinionated framework” creat per Google que n’ha fet un impressionant desplegament al <a href="https://www.google.com/events/io/schedule/session/de22e147-07b6-e311-8491-00155d5066d7">I/O 2014</a>.</p>
<pre><code><google-map latitude="41.3804463" longitude="2.1800922" disableDefaultUI fitToMarkers zoom="15">
{% for place in site.data.places %}
<google-map-marker latitude="{{ place.latitude }}" longitude="{{ place.longitude }}"
title="{{ place.name }}" draggable="false" icon="/public/favicon.ico">
<p class="text-center"><a href="{{ place.url-in }}"><img src="/public/img/{{ place.logo }}"></a></p>
<p>
<strong><a href="{{ place.url-in }}">{{ place.name }}</a></strong><br/>
<strong>Direcció</strong> / <em>Address</em>: {{ place.address }}<br/>
<strong>Horari projecció</strong> / <em>Screening timetable</em>: <strong>{{ place.screening-ca }}</strong> / <em>{{ place.screening-en }}</em><br/>
</p>
</google-map-marker>
{% endfor %}
</google-map></code></pre>
<h2 id="artinpocket-segueix-creixent">artinpocket, segueix creixent</h2>
<p>A més a més de la posta en marxa d’digitalartbarcelona.com, des d’<strong>Oxygen</strong> seguim aportant per fer més gran l’ecosistema web d’<strong>artinpocket</strong>:</p>
<ul>
<li><a href="http://www.artinpocket.cat/">artinpocket.cat</a>, la comunitat de compra venda d’art accessible amb un sol clic</li>
<li><a href="http://www.artinpocket.cat/blog/">artinpocket.cat/blog</a>, el blog general sobre el projecte</li>
<li><a href="http://www.artinpocketregular.com/">artinpocketregular.com</a>, el blog del verkami per a desenvolupar una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</li>
<li><a href="http://www.artelowcost.com/">artelowcost.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.arteeconomico.com/">arteeconomico.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.inpockettshirts.com/">inpockettshirts.com</a>, la botiga d’art per emportar d’Artinpocket. Art per portar posat, art amb la gent, per a la gent i per la gent.</li>
<li><a href="http://www.inpocketart.com/">inpocketart.com</a>, la botiga d’art digital d’edició limitada amb certificat digital d’autenticitat.</li>
<li><a href="http://www.digitalartbarcelona.com/">digitalartbarcelona.com</a>, la 1ª mostra simultània d’art digital a Barcelona.</li>
</ul>
El canvi és possible2014-06-27T11:48:19+00:00http://www.oxygen.cat/larry-page-el-canvi-es-possible<blockquote>
<p>Molts líders de les grans organitzacions, crec jo, no creuen que el canvi és possible. Però si ens fixem en la història, les coses canvien, i si el teu negoci és estàtic, és molt probable que tingui problemes. <footer>— <cite><a title="Enllaç extern; Larry Page" href="https://www.google.com/+LarryPage">Larry Page</a>.</cite></footer></p>
</blockquote>
Inpocketart, convert your screens in your art collection2014-05-26T11:48:19+00:00http://www.oxygen.cat/inpocketart-convert-your-screens-in-your-art-collection<blockquote>
<p>Artinpocket et dóna l’oportunitat de crear una col·lecció digital d’obres originals i d’edició limitada.<footer>— <cite><a href="/inpocketart-convert-your-screens-in-your-art-collection/" title="Inpocketart, convert your screens in your art collection">Artinpocket</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<h3 id="inpocketart">Inpocketart</h3>
<p>Amb aquest nou projecte, <strong>Artinpocket</strong> ens dóna l’oportunitat de crear una <strong>col·lecció digital d’obres originals i d’edició limitada</strong>. El col·lecionsita, en comprar la seva obra, rep de manara automàtica un <strong>certificat d’autenticitat</strong> amb la signatura de l’artista, el nom del col·leccionista, la data d’adqusició i el número d’edició.</p>
<table>
<tbody>
<tr>
<td>[inpocketart.com](http://www.inpocketart.com/ “Inpocketart</td>
<td>L’art digital d’Artinpocket</td>
<td>Converteix les teves pantalles en la teva col·lecció d’art”) s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant <strong>una veritable webapp d’ecommerce</strong>.</td>
</tr>
</tbody>
</table>
<h2 id="per-què-wordpress">Per què WordPress?</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia. Malgrat tot, el mercat té molt interioritzades les pareules plataforma i gestor de continguts com a sinòmims de desenvolupament, comunicació i presència a Internet. I, al capdamunt de la llista, <strong>WordPress</strong> hi apareix en boca de tothom.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/inpocketart-full-width-snapshot.png" /><figcaption><p>Inpocketart, convert your screens in your art collection</p></figcaption></figure>
<p>Als inicis dels CMS, WordPress va ser àmpliament considerat com una simple plataforma de blocs. Aquells temps han passat. WordPress segueix sent la plataforma de blocs més popular, però és molt més que això. Gràcies a l’àmplia base de la seva comunitat, ha crescut fins a esdevenir un <strong>CMS capaç d’alimentar gairebé qualsevol tipus de lloc web</strong>.</p>
<p>Així, si Magnolia, Joomla, Drupal, Magento i altres CMS de codi obert són tan poderosos i els nostres clients volen de totes totes un CMS, <a href="/per-que-wordpress/">per què triar WordPress</a>?</p>
<ul>
<li>Fàcil de fer servir</li>
<li>Estalvi de diners</li>
<li>Flexible i ampliable</li>
<li>Plantilles boniques</li>
<li>“SEO-friendly”</li>
<li>Una gran comunitat</li>
</ul>
<p><strong>A inpocketart.com hem customitzat una implementació Woocommerce</strong> per gestionar de manera eficient el producte virtual descarragable que representa cadascuna de les obres d’art digital d’edició limitada.</p>
<h2 id="artinpocket-segueix-creixent">artinpocket, segueix creixent</h2>
<p>A més a més de la posta en marxa d’inpocketart.com per, la botiga d’art digital, des d’<strong>Oxygen</strong> seguim aportant per fer més gran l’ecosistema web d’<strong>artinpocket</strong>:</p>
<ul>
<li><a href="http://www.artinpocket.cat/">artinpocket.cat</a>, la comunitat de compra venda d’art accessible amb un sol clic</li>
<li><a href="http://www.artinpocket.cat/blog/">artinpocket.cat/blog</a>, el blog general sobre el projecte</li>
<li><a href="http://www.artinpocketregular.com/">artinpocketregular.com</a>, el blog del verkami per a desenvolupar una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</li>
<li><a href="http://www.artelowcost.com/">artelowcost.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.arteeconomico.com/">arteeconomico.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.inpockettshirts.com/">inpockettshirts.com</a>, la botiga d’art per emportar d’Artinpocket. Art per portar posat, art amb la gent, per a la gent i per la gent.</li>
<li><a href="http://www.inpocketart.com/">inpocketart.com</a>, la botiga d’art digital d’edició limitada amb certificat digital d’autenticitat.</li>
</ul>
Inpockettshirts, l'art per emportar d'Artinpocket2014-05-09T11:48:19+00:00http://www.oxygen.cat/inpockettshirts-l-art-per-emportar-d-artinpocket<blockquote>
<p>Un objecte especial, personal i únic<footer>— <cite><a href="/inpockettshirts-l-art-per-emportar-d-artinpocket/" title="Inpockettshirts, l'art per emportar d'Artinpocket">Pep Marés</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<h3 id="inpockettshirts">Inpockettshirts</h3>
<p>Art per portar posat, descobreix la samarreta que <strong>Artinpocket</strong> i <a href="http://www.b-lab.eu/">B Lab</a> han dissenyat per a tu, <strong>art amb la gent, per la gent i per a la gent</strong>.</p>
<p>El disseny de la samarreta Artinpocket consisteix en la reproducció de la marca, en part com la butxaca de les samarretes, i en part serigrafiat. Trobem el lloc ideal per produir les nostres exclusives samarretes <strong>ben aviat hi haurà més</strong>.</p>
<p><a href="http://www.inpockettshirts.com/" title="Inpockettshirts, l'art per emportar d'Artinpocket">inpockettshirts.com</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web.</p>
<p><strong>inpockettshirts.com</strong> ha estat desenvolupat a mida, seguint la fórmula <strong>Jekyll i Prose</strong>, sota els paràmetres del disseny web responsiu. En aquest cas a més, hi hem afegit <strong>una botiga en línia</strong> fent ús del carret de la compra open-source <strong><a href="http://simplecartjs.org/">simpleCart(js)</a></strong> que gestiona a la perfecció el carret i el procés de pagament via Paypal, tot amb Javascript.</p>
<p>A Oxygen apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free/">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<p>Tot i la complexitat de qualsevol sistema, tots ells han de produir els mateixos formats de sortida: estàndards web.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/inpockettshirts-full-width-snapshot.png" /><figcaption><p>Inpockettshirts, l'art per emportar d'Artinpocket</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-prose-i-simplecartjs">La fórmula amb Jekyll, Prose i simpleCart(js)</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
<li><a href="http://simplecartjs.org/" title="Javascript Shopping Cart - simpleCart(js)">simpleCart(js)</a>, una cistella de la compra de codi obert en JS que s’integra fàcilment amb qualsevol lloc web.</li>
</ul>
<h2 id="artinpocket-segueix-creixent">artinpocket, segueix creixent</h2>
<p>A més a més de la posta en marxa d’inpockettshirts.com per, la botiga d’art per emportar, des d’<strong>Oxygen</strong> seguim aportant per fer més gran l’ecosistema web d’<strong>artinpocket</strong>:</p>
<ul>
<li><a href="http://www.artinpocket.cat/">artinpocket.cat</a>, la comunitat de compra venda d’art accessible amb un sol clic</li>
<li><a href="http://www.artinpocket.cat/blog/">artinpocket.cat/blog</a>, el blog general sobre el projecte</li>
<li><a href="http://www.artinpocketregular.com/">artinpocketregular.com</a>, el blog del verkami per a desenvolupar una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</li>
<li><a href="http://www.artelowcost.com/">artelowcost.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.arteeconomico.com/">arteeconomico.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.inpockettshirts.com/">inpockettshirts.com</a>, la botiga d’art per emportar d’Artinpocket. Art per portar posat, art amb la gent, per a la gent i per la gent.</li>
</ul>
Al Port de la Selva, també escullen WordPress2014-04-14T11:48:19+00:00http://www.oxygen.cat/al-port-de-la-selva-tambe-escullen-wordpress<blockquote>
<p>… una proposta de l’associació de Comerciants i Restauradors per dinamitzar el comerç i el turisme del Port de la Selva a partir de potenciar, donar a conèixer i crear experiències que fomentin la interacció amb el comerç i el patrimoni de la població<footer>— <cite><a href="/al-port-de-la-selva-tambe-escullen-wordpress/" title="Al Port de la Selva, també escullen WordPress">ARC</a></cite></footer></p>
</blockquote>
<p>Amb WordPress, una associació de comerciants i restauraddors, <strong>ARC</strong>, pot <strong>gestionar de manera senzilla i eficaç</strong> la <a href="http://www.portdelaselvasensefiltres.cat/">seva presència</a> i la seva comunicació a Internet.</p>
<h2 id="per-què-wordpress">Per què WordPress?</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia. Malgrat tot, el mercat té molt interioritzades les pareules plataforma i gestor de continguts com a sinòmims de desenvolupament, comunicació i presència a Internet. I, al capdamunt de la llista, <strong>WordPress</strong> hi apareix en boca de tothom.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/portdelaselva-sensefiltres-full-width-snapshot.png" /><figcaption><p>Al Port de la Selva, també escullen WordPress</p></figcaption></figure>
<p>Als inicis dels CMS, WordPress va ser àmpliament considerat com una simple plataforma de blocs. Aquells temps han passat. WordPress segueix sent la plataforma de blocs més popular, però és molt més que això. Gràcies a l’àmplia base de la seva comunitat, ha crescut fins a esdevenir un <strong>CMS capaç d’alimentar gairebé qualsevol tipus de lloc web</strong>.</p>
<p>Així, si Magnolia, Joomla, Drupal, Magento i altres CMS de codi obert són tan poderosos i els nostres clients volen de totes totes un CMS, <a href="/per-que-wordpress/">per què triar WordPress</a>?</p>
<ul>
<li>Fàcil de fer servir</li>
<li>Estalvi de diners</li>
<li>Flexible i ampliable</li>
<li>Plantilles boniques</li>
<li>“SEO-friendly”</li>
<li>Una gran comunitat</li>
</ul>
La Web fa 25 anys2014-04-11T11:48:19+00:00http://www.oxygen.cat/tim-berners-lee-la-web-fa-25-anys<blockquote>
<p>Avui, i al llarg d’aquest any, hauríem de celebrar els primers 25 anys de la Web. Però encara que l’estat d’ànim és optimista, també sabem que no hem acabat. Tenim molt a fer per a què la Web arribi al seu màxim potencial. Hem de seguir defensant els seus principis bàsics i fer front a alguns reptes clau. Això és per a tots! <footer>— <cite><a title="Enllaç extern en anglès; Sir Tim Berners Lee" href="http://www.webat25.org/greetings" hreflang="en">Sir Tim Berners Lee</a>.</cite></footer></p>
</blockquote>
artinpocket / regular, lletres al servei de l'art2014-03-24T11:48:19+00:00http://www.oxygen.cat/artinpocket-regular-lletres-al-servei-de-l-art<blockquote>
<p>Lletres que esdevinguin una veu adient per als projectes culturals i artístics i s’adeqüin a la cultura visual del públic objectiu<footer>— <cite><a href="/artinpocket-regular-lletres-al-servei-de-l-art/" title="artinpocket / regular, lletres al servei de l'art">Pep Marés</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-artinpocket">El cas artinpocket</h2>
<p><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">artinpocket</a> ofereix una comunitat de compra venda d’art accessible amb un sol clic. Ofereix una plataforma especialitzada en art que aglutina la promoció d’artistes i galeries amb un canal directe de venda i compra d’obres. Vol transformar i renovar el canal tradicional de projecció d’art utilitzant artinpocket com a suport, una xarxa social per a incentivar i estimular la compra d’art.</p>
<h3 id="artinpocketregular">artinpocket/regular</h3>
<p><strong>artinpocket/regular</strong> és una campanya a verkami per a desenvolupar, artinpocket/regular, una tipografia pròpia i adequada per al món de les arts plàstiques i visuals. Sota una llicencia de <strong>Creative Commons</strong> aquesta es podrà utilitar i compartir voluntàriament, lliurant-los llicències i eines lliures que els permetin aprofitar al màxim tota la ciència, coneixement i cultura disponible en Internet. Per potenciar-ne la difusió s’ha creat <strong>artinpocketregular.com</strong>.</p>
<p><a href="http://www.artinpocketregular.com/" title="artinpocket/regular, lletres al servei de l'art">artinpocketregular.com</a> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web.</p>
<p><strong>artinpocketregular.com</strong> ha estat desenvolupat a mida, seguint la fórmula <strong>Jekyll i Prose</strong>, sota els paràmetres del disseny web responsiu.</p>
<p>A Oxygen apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free/">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<p>Tot i la complexitat de qualsevol sistema, tots ells han de produir els mateixos formats de sortida: estàndards web.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/artinpocket-regular-full-width-snapshot.png" /><figcaption><p>artinpocket/regular, una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-i-prose">La fórmula amb Jekyll i Prose</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<h2 id="artinpocket-segueix-creixent">artinpocket, segueix creixent</h2>
<p>A més a més de la posta en marxa d’artincpocketregular.com per potenciar la difusió del verkami, des d’<strong>Oxygen</strong> hem posat en marxa dos nous blog especialitzats en art accessible que contribueixen a fer més gran l’ecosistema web d’<strong>artinpocket</strong>:</p>
<ul>
<li><a href="http://www.artinpocket.cat/">artinpocket.cat</a>, la comunitat de compra venda d’art accessible amb un sol clic</li>
<li><a href="http://www.artinpocket.cat/blog/">artinpocket.cat/blog</a>, el blog general sobre el projecte</li>
<li><a href="http://www.artinpocketregular.com/">artinpocketregular.com</a>, el blog del verkami per a desenvolupar una tipografia pròpia i adequada per al món de les arts plàstiques i visuals</li>
<li><a href="http://www.artelowcost.com/">artelowcost.com</a>, un blog especialitzat en art contemporani de baix cost</li>
<li><a href="http://www.arteeconomico.com/">arteeconomico.com</a>, un blog especialitzat en art contemporani de baix cost</li>
</ul>
Oxygen posa en marxa Castellers de Barcelona, un nou web sobre WordPress2014-03-19T11:48:19+00:00http://www.oxygen.cat/oxygen-posa-en-marxa-castellers-de-barcelona-un-nou-web-sobre-wordpress<blockquote>
<p>El 1969 va néixer la primera colla de la ciutat de Barcelona – la nostra. 45 anys han passat i portem centenars de castells en el nostre equipatge, tant per Catalunya com per tota Europa. Però no podem viure en el passat; cal mirar endavant. Cap al futur. Aquest és el tema del nostre 45è Aniversari: el futur de la Colla. Per això hem decidit muntar tot un seguit d’actes al nostre barri i la nostra ciutat per divulgar, gaudir i fer país!<footer>— <cite><a href="/oxygen-posa-en-marxa-castellers-de-barcelona-un-nou-web-sobre-wordpress/" title="Oxygen posa en marxa Castellers de Barcelona, un nou web sobre WordPress">El President, Ramon Morentin</a></cite></footer></p>
</blockquote>
<p>El <strong>19 de març de 2014</strong>, els <a href="http://www.castellersdebarcelona.cat/" title="Colla Castellers de Barcelona">Castellers de Barcelona</a> han llançat un <strong>nou web</strong>. És un web modern, informatiu, intuïtiu i fresc. És una primera versió, de moment, però durant el 2014 anirant movent notícies importants del passat. En un segon estadi també es muntarà la “botigueta” en línia.</p>
<p>El treball de crear aquest nou web començava fa temps amb reunions de treball amb el Sergi Rubia “Baggio”, Alex Rubia, Txory Lleixà, Sergi Brió i després s’han anat afegint opinions i feedback de la Junta, Edu París, Oriol Baró i Ramon Gil.</p>
<h2 id="per-què-wordpress">Per què WordPress?</h2>
<p>A <strong>Oxygen</strong> apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia. Malgrat tot, el mercat té molt interioritzades les pareules plataforma i gestor de continguts com a sinòmims de desenvolupament, comunicació i presència a Internet. I, al capdamunt de la llista, <strong>WordPress</strong> hi apareix en boca de tothom.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/castellers-de-barcelona-full-width-snapshot.png" /><figcaption><p>Castellers de Barcelona, un nou web sobre WordPress</p></figcaption></figure>
<p>Als inicis dels CMS, WordPress va ser àmpliament considerat com una simple plataforma de blocs. Aquells temps han passat. WordPress segueix sent la plataforma de blocs més popular, però és molt més que això. Gràcies a l’àmplia base de la seva comunitat, ha crescut fins a esdevenir un <strong>CMS capaç d’alimentar gairebé qualsevol tipus de lloc web</strong>.</p>
<p>Així, si Magnolia, Joomla, Drupal, Magento i altres CMS de codi obert són tan poderosos i els nostres clients volen de totes totes un CMS, <a href="/per-que-wordpress/">per què triar WordPress</a>?</p>
<ul>
<li>Fàcil de fer servir</li>
<li>Estalvi de diners</li>
<li>Flexible i ampliable</li>
<li>Plantilles boniques</li>
<li>“SEO-friendly”</li>
<li>Una gran comunitat</li>
</ul>
<p>Amb WordPress, una colla castellera, els <strong>Castellers de Barcelona</strong>, un col·lectiu tan divers i tan dinàmic, pot <strong>gestionar de manera eficaç</strong> la seva presència i la seva comunicació a Internet.</p>
Vortex Online Wind Modeling for Professionals. By Professionals2014-03-05T11:48:19+00:00http://www.oxygen.cat/vortex-online-wind-modeling-for-professionals-by-professionals<blockquote>
<p>We are Vortex: experienced, independent and supported<footer>— <cite><a href="/vortex-online-wind-modeling-for-professionals-by-professionals/" title="Vortex Online Wind Modeling for Professionals. By Professionals">Vortex</a></cite></footer></p>
</blockquote>
<h2 id="el-cas-vortex">El cas Vortex</h2>
<p><a href="http://www.vortex.es/" title="Vortex Online Wind Modeling for Professionals. By Professionals">Vortex</a> és un servei de modelatge en línia present als mercats solar, marí, del vent i del pronòstic, aportant solucions ràpides i fàcils d’usar, accessibles des de l’escriptori a través d’Internet.</p>
<p><strong>Vortex</strong> s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web.</p>
<p><em>vortex.es</em> ha estat desenvolupat a mida, seguint la fórmula <strong>Jekyll i Prose</strong>, sota els paràmetres del disseny web responsiu, a partir del disseny gràfic original d’<a href="http://www.iohipermedia.com/">Ió Hipermedia</a>. Davant la proliferació dels dispositius mòbils amb accés a Internet, aquesta modalitat de programació preveu una resposta òptima del web per a una correcta visualització en les múltiples resolucions de pantalla: des de les més petites, dels telèfons mòbils o tauletes; a les més grans dels televisors o projectors connectats a Internet.</p>
<p>A Oxygen apostem de totes totes per la construcció de webs <a href="/oxygen-un-web-cms-free/">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<p>Tot i la complexitat de qualsevol sistema, tots ells han de produir els mateixos formats de sortida: estàndards web.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/vortex-full-width-snapshot.png" /><figcaption><p>Vortex Online Wind Modeling for Professionals. By Professionals</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladar l’estalvi de costos als clients alhora que s’el·limina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-i-prose">La fórmula amb Jekyll i Prose</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
Per què WordPress?2014-02-13T11:48:19+00:00http://www.oxygen.cat/per-que-wordpress<p>A Oxygen apostem de totes totes per la contruscció de webs <a href="/oxygen-un-web-cms-free">CMS-free</a>. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia. Malgrat tot, el mercat té molt interioritzades les pareules plataforma i gestor de continguts com a sinòmims de desenvolupament, comunicació i presència a Internet. I, al capdamunt de la llista, <strong>WordPress</strong> hi apareix en boca de tothom.</p>
<p>Als inicis dels CMS, WordPress va ser àmpliament considerat com una simple plataforma de blocs. Aquells temps han passat. WordPress segueix sent la plataforma de blocs més popular, però és molt més que això. Gràcies a l’àmplia base de la seva comunitat, ha crescut fins a esdevenir un CMS capaç d’alimentar gairebé qualsevol tipus de lloc web.</p>
<p>Així, si Magnolia, Joomla, Drupal, Magento i altres CMS de codi obert són tan poderosos i els nostres clients volen de totes totes un CMS, per què triar WordPress?</p>
<h2 id="fàcil-de-fer-servir">Fàcil de fer servir</h2>
<p>El meteòric ascens de WordPress al cim del programari de desenvolupament web és degut, sobretot, a la seva facilitat d’ús. La interfície d’administració, en comparació amb Drupal o Joomla, per exemple, és molt més clara i tot es veu senzill. Això fa que sigui fàcil per a algú que no ha tingut cap experiència amb la web. Si podem fer servir un editor de textos com Word, podem començar a utilitzar WordPress d’immediat!</p>
<h2 id="estalvi-de-diners">Estalvi de diners</h2>
<p>WordPress és 100% gratis i de codi obert. Això vol dir que som lliures de descarregar-lo i modificar-lo al nostre gust. A més, la gran comunitat de desenvolupadors al voltant d’ell sempre està treballant per millorar el seu nucli amb noves característiques i pegats. Aquestes actualitzacions també són gratuïtes. Desenvolupar un CMS personalitzat costa milers d’euros. En alguns casos, destinats a acabar en “coses” que WordPress pot realitzar còmodament.</p>
<h2 id="flexible-i-ampliable">Flexible i ampliable</h2>
<p>El nucli del programari de WordPress no és l’única cosa lliure - la majoria dels seus plugins són gratuïts, i fins i tot aquells que són comercials tenen baix cost. Amb plugins, podem estendre WordPress per anar més enllà. Per exemple, el popular connector WooCommerce permet integrar un sistema completament funcional de comerç electrònic / carret de la compra amb molts pocs clics. Això permet al client centrar-se en afegir productes i nous continguts. Hi ha plugins per a la construcció de comunitats, fòrums, intercanvi d’arxius, sistemes de reserva hotelera, gestió de projectes, anuncis classificats i moltes altres coses que puguem imaginar.</p>
<h2 id="plantilles-boniques">Plantilles boniques</h2>
<p>De nou, WordPress és molt popular per la gran col·lecció de boniques plantilles gratuïtes i premium disponibles. Si volem començar un blog o un lloc web corporatiu immediatament, hi ha una bona col·lecció de temes lliures per triar a WordPress.org.</p>
<p>En canvi, si estem buscant un gran disseny amb un munt d’opcions de personalització, probablement apostarem per algun tema premium. Alguns d’ells vénen amb grans funcionalitats incorporades, de manera que és molt més fàcil de construir un lloc web personalitzat amb només el tema instal·lat (sense plugins addicionals obligatoris). Per exemple, podem trobar temes per a llocs web de béns arrels, llocs web corporatius, llocs web per a organitzacions sense afany de lucre, llocs de comerç electrònic, etc a mercats com ara Mojo Temes, ThemeForest i dotzenes d’altres fabricants temàtics a preus que van dels 25 € als 100 €.</p>
<h2 id="seo-friendly">“SEO-friendly”</h2>
<p>Tothom diu que als motors de cerca els encanta les URLs amigables i el disseny de les pàgines WordPress. A més, hi ha un gran nombre de plugins SEO per optimitzar millor les entrades i les pàgines, com per exemple WordPress SEO by Yoast i All in One SEO Pack.</p>
<h2 id="una-gran-comunitat">Una gran comunitat</h2>
<p>WordPress té una gran comunitat de desenvolupadors i entusiastes al darrera. Això vol dir que s’actualitza periòdicament i gairebé sempre trobarem respostes a les nostres preguntes cada vegada que ens quedem clavats. A més dels fòrums WordPress.org que poden ser una gran font de suport gratuït, hi ha moltíssims bloggers que regularment ofereixen consells i trucs per aconseguir el màxim rendiment de WordPress.</p>
Exposició: Jo em rebel·lo, nosaltres existim2014-01-28T11:48:19+00:00http://www.oxygen.cat/exposicio-jo-em-rebel-lo-nosaltres-existim<blockquote>
<p>Art i acció ciutadana es donen cita a la Fundació Palau amb la mostra 'Jo em rebel·lo, nosaltres existim'</p>
<footer>
— <cite><a href="/exposicio-jo-em-rebel-lo-nosaltres-existim/" title="Exposició: Jo em rebel·lo, nosaltres existim">Fundació Palau</a></cite>
</footer>
</blockquote>
<p>La Fundació Palau no vol estar al marge dels actuals moments de convulsió, lluita i transformació social que estem vivint. Fruit del seu compromís i voluntat de participació amb el present, presenta la col·lectiva ‘Jo em rebel·lo, nosaltres existim’ que reuneix propostes d’artistes, associacions, pensadors, col·lectius i organitzacions que promouen noves maneres de participació ciutadana en la transformació social.</p>
<p>Amb un total de 26 participants, la trobada es concentra en tres apartats: l’exposició, les activitats paral·leles i la publicació. L’exposició arrenca amb una instal·lació audiovisual de veus actives (col·lectius, associacions i artistes) en l’actual procés de transformació social: Pau Llonch de a PAH, la periodista Marta Sibina de Cafè amb llet, l’ambientòleg Iago Otero, Marc Vives de Som Energia, Dídac Costa de la Cooperativa Integral Catalana, l’activista Esther Vivas, el periodista Guillem Martínez, l’escriptor i economista Antonio Baños, l’arquitecte Santiago Cirugeda, l’arquitecta Itziar González, Xavi Teis de la banca ètica Coop57 i Roger Palà de Mèdia.cat.</p>
<p>L’exposició, ha estat pensada i coordinada per l’escriptor <a href="https://twitter.com/itramselas" title="Martí Sales (itramselas) a Twitter">Martí Sales</a> i pel director de la Fundació Palau <a href="https://twitter.com/AlmedaPere" title="Pere Almeda (AlmedaPere) a Twitter">Pere Almeda</a>.</p>
<h2 id="una-app-web-per-lexposició">Una app web per l’exposició</h2>
<p>A <a href="/" title="Oxygen comunicació i infraestructures per mitjà dels darres estàndards de disseny, programació web i virtualització al núvol">Oxygen.cat</a> hem desenvolupat la versió web de l’exposció sota <a href="http://www.joemrebelo.cat/" title="Exposició: Jo em rebel·lo, nosaltres existim">www.joemrebelo.cat</a>. Hem creat una app web responsiva dividida en dues sales on s’hi projecten 6 vídeos per sala. Els vídeos es gestionen des del compte <a href="http://vimeo.com/fundaciopalau">Vimeo</a> de la Fundació Palau.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/jo-em-rebelo-nosaltres-existim-multi-dispositiu-snapshot.png" /><figcaption><p>Art i acció ciutadana es donen cita a la Fundació Palau amb la mostra 'Jo em rebel·lo, nosaltres existim'</p></figcaption></figure>
Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic2014-01-27T17:48:19+00:00http://www.oxygen.cat/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic<blockquote>
<p>Artinpocket, la comunitat d'art contemporani accesible per difondre i vendre les teves obres.</p>
<footer>
— <cite><a href="/artipocket-la-comunitat-de-compra-venda-d-art-accessible-amb-un-sol-clic/" title="Artinpocket, la comunitat de compra venda d'art accessible amb un sol clic">Pep Marès</a></cite>
</footer>
</blockquote>
<p><a href="http://www.artinpocket.cat/" title="Artipocket la comunitat de compra venda d'art accessible amb un sol clic">artinpocket.cat</a> s’ha realitzat amb llenguatge de programació HTML5 i l’aplicació del disseny web responsiu (en anglès: <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive web desgin - Wikipedia the free encyclopedia">responsive web design</a>. Hom ha plantejat i realitzat un projecte innovador per crear una nova xarxa social d’art, aplicant les últimes novetats en programació i disseny web.</p>
<p>artinpocket.cat ha estat programat a mida en HTML5 sota els paràmetres del disseny web responsiu, a partir de l’iconografia de <a href="http://www.jordimitja.com/" title="::JORDI MITJÀ::">Jordi Mitjà</a> i el disseny gràfic original d’<a href="http://www.iohipermedia.com/">Ió Hipermedia</a>, coordinat per <a href="http://www.francescvila.cat/">Francesc Vila</a>. Davant la proliferació dels dispositius mòbils amb accés a Internet, aquesta modalitat de programació preveu una resposta òptima del web per a una correcta visualització en les múltiples resolucions de pantalla: des de les més petites, dels telèfons mòbils o tauletes; a les més grans dels televisors o projectors connectats a Internet.</p>
<h2 id="colleccions-obres-artistes-i-galeries">Col·leccions, obres, artistes i galeries</h2>
<p>Artipocket vol esdevenir la comunitat de referència per a la difusió, de col·leccions, obres, artistes i galeries a Internet. Un espai de compra i venda sense intermediaris on <a href="http://artinpocket.cat/privada/privada.php" title="Artinpocket Àrea Privada">tothom s’hi pot inscriure</a> i valorar l’art que s’hi exposa i, alhora, esdevenir artista o galeria i publicitar les pròpies obres.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/artinpocket-full-width-snapshot.png" /><figcaption><p>Artinpocket la comunitat de compra venda d'art accessible amb un sol clic</p></figcaption></figure>
<h2 id="un-blog-per-saber-ne-més">Un blog per saber-ne més</h2>
<table>
<tbody>
<tr>
<td>Artinpocket és un projecte liderat per [Pep Marès](http://www.artinpocket.cat/blog/2013/07/pep-mares-i-artinpocket-lerror-mes-gran-es-no-intentar-ho/ “Pep Mares i Artinpocket: ‘L’error més gran és no intentar-ho’</td>
<td>Artinpocket”) amb el ferm suport de <strong>Mavi Carberol</strong> i <strong>Ramon Gil</strong>, que consta amb un blog on s’hi va desgranant l’<a href="http://www.artinpocket.cat/blog/">evolució del projecte</a>.</td>
</tr>
</tbody>
</table>
W3c Dixit2014-01-22T11:48:19+00:00http://www.oxygen.cat/w3c-dixit<blockquote>
<p>Si l'essència d'Internet és esdevenir la xarxa d'accés universal a la informació, aquesta xarxa ha d'estar a disposició de totes les persones, qualsevol que sigui el seu maquinari, programari, infraestructura de xarxa, idioma matern, cultura, localització geogràfica, o capacitat física o mental.</p>
<footer>— <cite><a title="Enllaç extern en anglès; World Wide Web Consortium" href="http://www.w3c.org/" hreflang="en">W3C</a> dixit! Hi estem d'acord? I tant (qui osaria).</cite></footer>
</blockquote>
Box-fort.com, un web també CMS-free2013-12-24T11:48:19+00:00http://www.oxygen.cat/box-fort-un-web-tambe-cms-free<blockquote>
<p>Jekyll permet la construcció senzilla, flexible i fiable de webs sense el sobrecost del CMS. Fins i tot multi idioma</p>
<footer>
— <cite><a href="/box-fort-un-web-tambe-cms-free/" title="Box-fort.com, un web també CMS-free">Oxygen</a></cite>
</footer>
</blockquote>
<p>A Oxygen apostem de totes totes per la contruscció de webs CMS-free. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<h2 id="lera-cms-magnolia-un-aliat">L’era CMS. Magnolia un aliat</h2>
<p>En el passat, la creació de llocs web “potents”, significava la creació de complexos sistemes de gestió de continguts. Aquests CMSs necessitaven de la lògica de les plantilles, el codi d’aplicació i les bases de dades de contingut per poder “muntar” pàgines web cada vegada que eren sol·licitades pels visitants del web. Eren sistemes complexos que depenien d’aplicacions diferents treballant alhora, com un servidor web per conduir les peticions de pàgina cap a una aplicació Java, que emprava plantilles de disseny de pàgina predefinides per donar format a contingut emmagatzemat en una base de dades MySQL. Per servir una sola sol·licitud de pàgina calia almenys tres aplicacions separades treballant alhora.</p>
<p>Tant els frameworks de codi obert com ara Magnolia, Drupal o Wordpress com les aplicacions de codi propietari de milions d’euros que empren governs i grans empreses, produeixen exactament el mateix “output”: arxius HTML, CSS i JavaScript que els navegadors web saben com “convertir” en les pàgines web que veiem.</p>
<p>Tot i la complexitat d’aquests sistemes, tots ells han de produir els mateixos formats de sortida: estàndards web.</p>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladars l’estalvi de costos als clients alhora que s’elimina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-amb-jekyll-i-prose">La fórmula amb Jekyll i Prose</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
<li><a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, un editor de continguts web específicament dissenyat per treballar amb Jekyll</li>
</ul>
<p>Per a plantilles i per a la generació de llocs web, hom pot emprar Jekyll, un projecte de codi obert iniciat a GitHub fa gairebé cinc anys. Jekyll emmagatzema tot el contingut en arxius de text simple. Les metadades que descriuen el contingut es troben sobre el contingut en el mateix arxiu de text. Aquestes metadades associades al contingut amb les plantilles de disseny, permeten un format avançat com ara el filtratge de categories o etiquetes, i podem emmagatzemar dades estructurades arbitràries com l’associació d’articles amb autors, fotos del moment, o qualsevol altra cosa que el desenvolupador de la plantilla estableixi.</p>
<p>Si volem que un tercer sense coneixements tècnics pugui mantenir i administrar un web creat amb Jekyll, cal trobar un editor de continguts amb interfície web. <a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, és un editor de continguts web específicament dissenyat per treballar bé amb Jekyll. Prose permet editar arxius de text allotjats a GitHub, on emmagatzemem el nostre codi. Ofereix una elegant interfície que se centra en l’escriptura.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/box-fort-full-width-snapshot.png" /><figcaption><p>Captura de "Maletes de plàstic, Doble paret" — Box-fort.com, un web també CMS-free</p></figcaption></figure>
<h2 id="i-si-el-fem-multi-idioma">I si el fem multi idioma?</h2>
<p>Amb <a href="http://www.box-fort.com/" title="Boxfort, maletes i contenidors professionals">Box fort</a>, hme fet un pas més en la creció de webs CMS-free. Hem fet un web CMS-free multi idioma. A la <abbr title="World Wide Web">WWW</abbr>, hi ha molts de recursos que parlen de com afrontar un web multi idioma fet amb Jekyll. Alguns d’ells són:</p>
<ul>
<li><a href="http://www.garron.me/en/blog/jekyll-multi-language.html" title="G. Garron - Multi language site with Jekyll">G. Garron - Multi language site with Jekyll</a></li>
<li>
<table>
<tbody>
<tr>
<td>[Building a multilanguage Jekyll blog](http://nicoespeon.com/en/2013/04/building-a-multinlingual-jekyll-blog/ “Building a multilanguage Jekyll blog</td>
<td>@nicoespeon”)</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<tbody>
<tr>
<td>[Multilingual Jekyll](http://developmentseed.org/blog/multilingual-jekyll-sites/ “Multilingual Jekyll</td>
<td>Development Seed”)</td>
</tr>
</tbody>
</table>
</li>
</ul>
<p>En el cas que ens ocupa hem optat per treure el màxim de pròfit de les metadades <abbr title="YAML Ain't Markup Language">YAML</abbr> per assignar l’idioma i una estructura separada dins d’una carpeta amb el nom corresponent al codi ISO de l’idioma que estem fent:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
lang: es
---
|-- _includes/ # Partials included in other files
|-- _layouts/ # Templates of the website
|-- _plugins/ # Plugins to override Jekyll workflow
|-- assets/ # LESS/CSS, JS, images, ...
|-- es/ # Spanish category
| |-- index.html # French html files
| |-- (...)
|-- index.html # Default html files (CA)
|-- (...)
|-- _config.yml # Jekyll configuration file
</code></pre></div></div>
<p>A partir d’aquí podem també tenir els nostres includes amb les diferents opcions idiomàtiques del nostre web:</p>
<pre><code><li>
{% if page.lang == 'es' %}
<a href="{{ site.base_url }}/es/maletas/aluminio/standard.html">
{% if page.box == "standard" %}
<strong>
<em>
Standard
</em>
</strong>
{% else %}
Standard
{% endif %}
</a>
{% else if %}
<a href="{{ site.base_url }}/maletes/alumini/standard.html">
{% if page.box == "standard" %}
<strong>
<em>
Standard
</em>
</strong>
{% else %}
Standard
{% endif %}
</a>
{% endif %}
</li></code></pre>
Oxygen.cat, un web CMS-free2013-09-06T11:48:19+00:00http://www.oxygen.cat/oxygen-un-web-cms-free<blockquote>
<p>Jekyll permet la construcció senzilla, flexible i fiable de webs sense el sobrecost del CMS.</p>
<footer>
— <cite><a href="/oxygen-un-web-cms-free/" title="Oxygen.cat, un web CMS-free">Oxygen</a></cite>
</footer>
</blockquote>
<p>A Oxygen apostem de totes totes per la contruscció de webs CMS-free. Les lliçons apreses i les experiències visqudes durant 9 anys liderant projectes Magnolia són el rerafons de l’evolució d’un procés que ens condueix cap a nous webs simples, flexibles i fiables que permeten un enfocament renovat de disseny i estratègia.</p>
<h2 id="lera-cms-magnolia-un-aliat">L’era CMS. Magnolia un aliat</h2>
<p>En el passat, la creació de llocs web “potents”, significava la creació de complexos sistemes de gestió de continguts. Aquests CMSs necessitaven de la lògica de les plantilles, el codi d’aplicació i les bases de dades de contingut per poder “muntar” pàgines web cada vegada que eren sol·licitades pels visitants del web. Eren sistemes complexos que depenien d’aplicacions diferents treballant alhora, com un servidor web per conduir les peticions de pàgina cap a una aplicació Java, que emprava plantilles de disseny de pàgina predefinides per donar format a contingut emmagatzemat en una base de dades MySQL. Per servir una sola sol·licitud de pàgina calia almenys tres aplicacions separades treballant alhora.</p>
<p>Per fer funcionar això a escala cal encara major complexitat: ús de noves aplicacions per emmagatzemar en memòria cau la informació de la base de dades o l’“output” de l’aplicació Java, replicar el contingut a través de diversos servidors de bases de dades i alhora intentar mantenir els nous continguts en sincronia, posant nous servidors en paral·lel per manegar talls de tràfic i moltes altres tàctiques d’escalabilitat ideades durant anys per mantenir aquest model. Al final, però, la capacitat de mantenir el lloc web “dempreus” servint contingut al ritme d’un munt de peticions, depèn de la capacitat dels desenvolupadors per anar activant nous servidors i la confiança en els sistemes de memòria cau.</p>
<p>Tant els frameworks de codi obert com ara Magnolia, Drupal o Wordpress com les aplicacions de codi propietari de milions d’euros que empren governs i grans empreses, produeixen exactament el mateix “output”: arxius HTML, CSS i JavaScript que els navegadors web saben com “convertir” en les pàgines web que veiem.</p>
<p>Tot i la complexitat d’aquests sistemes, tots ells han de produir els mateixos formats de sortida: estàndards web.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/oxygen-multi-pantalla.png" /><figcaption><p>Captures de la pàgina d'inici del web d'Oxygen en diferents tipus de suport. Des dels telèfons mòbils fins a les grans pantalles — oxygen.cat, un web cms-free</p></figcaption></figure>
<h2 id="tornar-al-bàsic">Tornar al bàsic</h2>
<p>Mitjançant el desenvolupament de llocs web, com aplicacions de la banda client (“client-side”) que només consten dels arxius utilitzables directament per un navegador web sense el treball addicional realitzat pels servidors de back-end, hom es capaç de traslladars l’estalvi de costos als clients alhora que s’elimina pràcticament el risc de caiguda de la pàgina web. Per a funcionalitats addicionals no disponibles en les aplicacions “client-side”, hom integra serveis externs.</p>
<h2 id="la-fórmula-més-senzilla">La fórmula més senzilla</h2>
<ul>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
</ul>
<p>Per descomptat, la senzillesa i la fiabilitat de l’arquitectura d’aquests llocs en principi és a costa d’algunes de les característiques dinàmiques del CMS. Per exemple, sense una base de dades, no sembla possible filtrar i visualitzar grans conjunts de dades o acceptar i processar continguts generats per usuaris com ara comentaris. O per exemple, una interfície web per oferir als clients una manera fàcil d’actualitzar i mantenir el contingut.</p>
<h2 id="incorporació-de-serveis-per-a-funcions-avançades">Incorporació de serveis per a funcions avançades</h2>
<p>Hom gestiona les funcionalitats que anteriorment demanava a una base de dades, com ara el maneig de contingut generat per l’usuari o la visualització de dades, mitjançant la delegació en serveis externs i la integració amb les seves APIs. La naturalesa de la web moderna fa això molt més fàcil que en el passat. Molts dels serveis que existeixen es centren en problemes específics. Flickr per a la gestió i la incrustació de fotos, de vídeo Vimeo i Twitter i Disqus per les respostes i comentaris. Aquests serveis tenen APIs o senzills “widgets” que incrusten el seu contingut en les pàgines web estàtiques per omplir els forats de la funcionalitat dinàmica.</p>
<p>Hom pot construir llocs web completament “client-side” que tenen aplicacions servidor avançades integrades per mitjà serveis externs dedicats. Si un servei falla, no afecta els altres o el contingut del lloc web.</p>
<h2 id="plantilles-i-la-generació-de-contingut-html">Plantilles i la generació de contingut HTML</h2>
<p>Resulta que hom també pot invertir el procés de fer plantilles i la generació de fitxers. En el model anterior, es construia la carcassa d’una pàgina web amb la seva estructura i el disseny en un arxiu, i quan el navegador demanava aquesta pàgina web, inseriem el contingut de la base de dades en els llocs apropiats d’aquesta plantilla per generar dinàmicament l’arxiu HTML que necessitva el navegador.</p>
<p>Si ens centrem en la creació de llocs web “client-side”, cal buscar solucions de plantilles que evitin la necessitat de la representació sota demanda. És a dir, aplicacions que generin continguts per endavant en lloc de per encàrrec. Una aplicació pot generar tots els arxius de sortida necessaris per al lloc web, utilitzant el mateix tipus de plantilles dinàmiques, en qüestió d’uns pocs segons o minuts. Llavors, podem organitzar els arxius estàtics resultants en gairebé qualsevol entorn.</p>
<h2 id="rematant-la-fórmula-amb-jekyll">Rematant la fórmula amb Jekyll</h2>
<ul>
<li><a href="http://jekyllrb.com/" title="Jekyll • Simple, blog-aware, static sites">Jekyll</a> per a plantilles de pàgina i la generació d’arxius estàtics</li>
<li>Fitxers HTML, CSS i Javascript</li>
<li>El servidor de pàgines estàtiques GitHub</li>
<li>APIs externes quan cal</li>
</ul>
<p>Per a plantilles i per a la generació de llocs web, hom pot emprar Jekyll, un projecte de codi obert iniciat a GitHub fa gairebé cinc anys. Jekyll emmagatzema tot el contingut en arxius de text simple. Les metadades que descriuen el contingut es troben sobre el contingut en el mateix arxiu de text. Aquestes metadades associades al contingut amb les plantilles de disseny, permeten un format avançat com ara el filtratge de categories o etiquetes, i podem emmagatzemar dades estructurades arbitràries com l’associació d’articles amb autors, fotos del moment, o qualsevol altra cosa que el desenvolupador de la plantilla estableixi.</p>
<h2 id="administrant-un-web-jekyll-de-manera-fàcil">Administrant un web Jekyll de manera fàcil</h2>
<p>Si volem que un tercer sense coneixements tècnics pugui mantenir i administrar un web creat amb Jekyll, cal trobar un editor de continguts amb interfície web. <a href="http://prose.io/" title="Prose · A Content Editor for GitHub">Prose.io</a>, és un editor de continguts web específicament dissenyat per treballar bé amb Jekyll. Prose permet editar arxius de text allotjats a GitHub, on emmagatzemem el nostre codi. Ofereix una elegant interfície que se centra en l’escriptura. Els creadors de continguts poden anar a Prose.io per crear o editar mitjançant la seva senzilla interfície. Els canvis es desen directament a GitHub, que manté un registre de totes les versions de cada arxiu. Amb GitHub Pages hom pot allotjar llocs web Jekyll de forma gratuïta. Els canvis realitzats a través de Prose en un lloc GitHub s’insereixen automàticament al lloc web.</p>
<hr />
<p><small>Aquest article està fortament inspirat pel treball de Dave Cole a Development Seed: <cite><a href="http://developmentseed.org/blog/2012/07/27/build-cms-free-websites/" title="How We Build CMS-Free Websites | Development Seed" rel="external">How We Build CMS-Free Websites</a></cite></small>.</p>
John Allshopp2013-08-21T11:48:19+00:00http://www.oxygen.cat/john-allshopp<blockquote>
<p>El control que els dissenyadors tenen al mitjà imprès, i que sovint desitgen al mitjà web, és simplement una funció de la limitació de la pàgina impresa. Hem d'acceptar el fet que el web no té les mateixes limitacions i dissenyar per a aquesta flexibilitat.</p>
<footer>— <cite><a rel="external" title="A Dao of Web Design · An A List Apart Article" hreflang="en" href="http://www.alistapart.com/articles/dao">John Allsopp</a> – Abril, 2000</cite></footer>
</blockquote>
La transformació de la xarxa amb el nou protocol IPv62013-08-05T11:48:19+00:00http://www.oxygen.cat/la-transformacio-de-la-xarxa-amb-el-nou-protocol-IPv6<blockquote>
<p>Estem davant d’un canvi important a la xarxa que alguns ja han batejat com a una nova revolució per a l’expansió d’Internet.</p>
</blockquote>
<p>De la mateixa manera que cada telèfon té un número assignat que li permet connectar-se a la xarxa telefònica per poder rebre i fer trucades, cada dispositiu electrònic o informàtic que es connecta a Internet necessita una adreça IP. Fins ara, tots els dispositius connectats a la xarxa Internet han estat utilitzant el protocol de comunicació IPv4 (Internet Protocol, versió 4).</p>
<p>L’any 1996 ja es va preveure que el número de connexions possibles acabaria superant les IP disponibles, i es va començar a treballar en una nova versió d’aquest protocol, l’<a href="http://www.worldipv6launch.org/" title="IPv6">IPv6</a>. El 6 de juny de 2012 va ser la data escollida perquè les grans empreses fessin el canvi i comencessin a treballar amb aquest nou sistema, donant per iniciat així el procés de transformació que, tard o d’hora, acabarà implantant-se a tots els aparells i dispositius del món.</p>
<h2 id="pensar-en-ipv6">Pensar en ipv6</h2>
<p>Fins ara, les IP estaven formades per quatre grups de números separats per punts, on cada grup podia anar de 0 a 255. Les IP només podien ser del tipus XXX.XXX.XXX.XXX, per exemple, la IP <a href="http://77.246.179.126" title="Ip d'exemple d'Oxygen">77.246.179.126</a>, que es correspon al web d’un dels clients d’Oxygen. Aquesta codificació permet gairebé 4.300 milions d’IP a tot el món, xifra que va ser assolida el 3 de febrer de 2012.</p>
<p>Amb la posada en funcionament del nou sistema IPv6, els principals proveïdors d’Internet i les grans empreses de la xarxa, com ara Facebook o Google, van activar oficialment el protocol IPv6 en els seus sistemes el 6 de juny de 2012. Amb el nou protocol d’accés a la xarxa, les IP són del tipus XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX, on cada X té un valor de 0 a 9 i a, b, c, d, e i f. Això permet que hi puguin haver més de 340 sixtilions d’adreces IP al món.</p>
<p>A la xarxa circulen moltes <a href="http://www.google.es/ipv6/" title="Google i IPv6">metàfores i comparacions</a> del canvi en el funcionament d’Internet. Una d’elles m’ha semblat molt gràfica: si el volum de la xarxa amb les IP antigues s’equipara a una pilota de ping-pong, amb la nova IP, el volum d’Internet pot arribar a tenir les dimensions del Sol! El canvi d’un sistema a l’altre també es pot comparar amb la substitució de totes les canonades del món perquè hi pugui circular més aigua i pugui arribar a qualsevol indret.</p>
<h2 id="la-ipv6-a-oxygen">La ipv6 a oxygen</h2>
<p>D’entrada, serà quasi impossible memoritzar les IP, com feien fins ara les ments més àgils. A la pràctica, tard o d’hora, el sistema informàtic d’Oxygen (servidors, ordinadors, connexions, telèfons, etc.), hauran d’adaptar-se a les noves adreces IP. A més a més, entre d’altres, s’hauran de reconfigurar tots els dominis propis i de tots els projectes dels clients d’Oxygen perquè puguin funcionar amb el nou sistema.</p>
<p>No hi ha presa, però cal començar a preveure-ho, perquè tot i que el canvi ja s’ha fet, durant un temps coexistiran els dos sistemes d’IP, fins a que els operadors d’Internet, que en teoria ja s’han estat adaptant al canvi, comencin a implantar adreces d’aquest tipus als seus clients.</p>
Clústers d’alta disponibilitat i programari lliure per a sistemes fiables i segurs2013-08-04T11:48:19+00:00http://www.oxygen.cat/clusters-alta-disponibilitat-programari-lliure-sistemes-fiables-segurs<blockquote>
<p>Un clúster és una de les solucions avançades per la redundància i la fiabilitat del sistema informàtic per a les empreses que busquen l’excel·lència.</p>
</blockquote>
<p>Quan tenim un servei crític en què una fallada suposa un cost molt elevat (aturada de la producció, del servei a clients, etc…) necessitem un sistema que redueixi tot el possible la probabilitat que això passi. Parlem d’un sistema d’alta disponiblitat, més concretament: d’un clúster d’alta disponibilitatat.</p>
<p>Un clúster d’alta disponibilitat és un sistema amb dues o més màquines que fan funcionar una sèrie de serveis i es comuniquen constantment entre sí per monitoritzar el correcte funcionament. En el moment en que una de les màquines pateix una fallada, el sistema arrenca el servei en una altra de les màquines reduint de forma casi inperceptible la sensació de fallada a l’usuari.</p>
<h2 id="el-cost-de-la-disponibilitat-del-sistema">El cost de la disponibilitat del sistema</h2>
<p>La inversió inicial en aquest tipus de sistema és elevada, però, si s’analitza el cost que suposa tenir el sistema aturat per una fallada es pot veure clarament que compensa amb escreix invertir en la fiabilitat i disponibilitat del sistema.</p>
<p>Us imagineu el cost de tenir un web de venda de productes a Internet sense funcionar algunes hores? Quina imatge dóna un servei de compra en línia que no funciona als compradors? Què suposaria per una empresa no poder accedir als fitxers o tenir el correu electrònic sense funcionar durant un dia? Us imagineu Google, Facebook o Twitter sense funcionar durant unes hores? Quan la respota a aquestes preguntes suposen molts diners és quan cal aplicar solucions potents, com ho és un clúster d’alta disponibilitat.</p>
<p>Una vegada més, apostem pel programari lliure per a la seva programació, ja que en codi obert es poden trobar les eines i els recursos necessaris per a una programació segura i personalitzada. La redundància i la fiabilitat són elements importants per a qualsevol sistema informàtic. En canvi, un clúster és una de les solucions avançades per la redundància i la fiabilitat del sistema informàtic per a les empreses que busquen l’excel·lència.</p>
L’ús intensiu i intel·ligent dels mitjans i les xarxes socials en línia, la millor estratègia d’una empresa a Internet2013-08-02T11:48:19+00:00http://www.oxygen.cat/us-intensiu-intel-ligent-dels-mitjans-xarxes-socials-en-linia-estrategia-empresa-internet<blockquote>
<p>Un web sense una estratègia comunicativa a través de les xarxes socials és un lloc situat en un racó de la xarxa, amb molt poca o nul·la visibilitat</p>
</blockquote>
<p>Es pot fer ràpidament i de qualsevol manera, però, una bona estratègia per aprofitar tot el potencial d’Internet passa per l’elaboració d’un pla de comunicació. Aquesta és una de les maneres més eficaces d’<strong>establir els objectius</strong> del que es vol comunicar a la xarxa, coordinament a la resta d’activitats de l’organització.</p>
<p>Quina és la millor estratègia per fer visible una empresa a Internet? Sense cap mena de dubte, ha de ser el resultat d’un pla estratègic de comunicació personalitzat, que tingui en compte un ús intensiu de les xarxes socials en línia, amb <strong>capacitat per implicar el personal</strong> de l’organització, que sigui suficientment flexible per arribar als diferents públics als quals ens volem adreçar i molt àgil per poder donar resposta al canvi permanent.</p>
<h2 id="pla-de-mitjans-i-xarxes-socials">Pla de mitjans i xarxes socials</h2>
<p>Actualment, Internet no s’entén sense els mitjans i les xarxes socials, per això, diem que un web sense una <strong>estratègia comunicativa a través de les xarxes socials</strong> és un lloc situat en un racó de la xarxa, amb molt poca o nul·la visibilitat, condemnat a l’ostracisme. Qualsevol pla de comunicació per a un projecte a Internet requereix d’un pla de mitjans socials en línia, que tingui en compte:</p>
<ul>
<li>L’anàlisi de rellevància social de cada mitjà social.</li>
<li>La definició dels canals o xarxes socials en què cal estar.</li>
<li>La planificació d’accions i estratègies en els mitjans i les xarxes.</li>
<li>L’assignació de recursos i la determinació dels costos.</li>
<li>La necessària verificació dels resultats.</li>
</ul>
<p>Abans de la immersió de qualsevol organització, gran o petita, a l’univers de les xarxes socials en línia, cal preguntar-se si els recursos humans estan a punt per assumir un repte tan ambiciós. Ja que aquest és un viatge sense retorn en què el principal combustible per navegar sorgeix de la <strong>comunicació sincera amb els teus públics</strong>, amb totes les contradiccions i satisfaccions que provoca.</p>
<p>I això s’aconsegueix amb <strong>eines actualitzades i formació específica per a tot el personal</strong>, a cada àrea o perfil professional al nivell que tingui assignat. Perquè, tard o d’hora, qualsevol dia, com a la vida social del món off line, qualsevol de nosaltres acabarà interactuant a la xarxa en nom de l’empresa, fent de portaveu improvisat en un entorn immens o tot s’acaba sabent, o tot és susceptible de ser rellevant.</p>
Disseny responsiu, Bootstrap i WordPress per al web d’Interlands2012-07-20T11:48:19+00:00http://www.oxygen.cat/disseny-web-responsiu-twitter-bootstrap-i-wordpress-per-al-web-dinterlands-ciutat-i-territori<blockquote>
<p>El nou web combina disseny responsiu, la flexibilitat de Twitter i la simplicitat de WordPress.</p>
</blockquote>
<h2 id="dels-320-píxels-en-amunt">Dels 320 píxels en amunt!</h2>
<table>
<tbody>
<tr>
<td>Amb el nou web d’[Interlands® Ciutat i Territori](http://www.interlands.cat/ “Interlands ciutat i territori</td>
<td>interlands@interlands.cat 935 891 234”), honm continua amb l’aposta pel llenguatge HTML5 i l’aproximació <a href="http://www.abookapart.com/products/responsive-web-design" title="A Book Apart, Responsive Web Design">responsive web design</a> (en català “disseny web responsiu”).</td>
</tr>
</tbody>
</table>
<p>Davant la proliferació dels dispositius mòbils amb accés a Internet, aquesta modalitat de disseny preveu una resposta òptima del web per a una correcta visualització en les múltiples resolucions de pantalla. Dels 320 píxels en amunt!</p>
<p>De la mateixa manera que amb el 10enCom primer i més tard amb SVC, el web responsiu d’Interlands® s’ha desenvolupat per a què funcioni també com una autèntica webapp en els dispositius mòbils. Per a accedir-hi com si fos una aplicació mòbil, només cal crear una icona d’accés a la pantalla d’inici des del navegador del mòbil.</p>
<h2 id="disseny-flexiblitat-i-simplicitat">Disseny, flexiblitat i simplicitat</h2>
<p>Hom ha plantejat i realitzat un projecte molt innovador per actualitzar la presència a la xarxa d’un gran equip, especialista en processos d’ordenació territorial i millora urbana.</p>
<p>Hem fet un equilàter combinant disseny, flexibilitat i simplicitat. El web d’Interlands® ha estat programat a mida en HTML5 sota els paràmetres del disseny web responsiu, a partir de <a href="http://www.rootstheme.com/" title="A starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.">Roots Theme</a>: una plantilla base per a desenvolupadors de WordPress basada en <a href="http://html5boilerplate.com/" title="A rock-solid default for HTML5 awesome.">HTML5 Bolierplate</a> i <a href="http://twitter.github.com/bootstrap/" title="Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.">Bootstrap de Twitter</a>.</p>
<p>La combinació dels elements abans esmentats posen el client al centre, ja que se’ls lliura un model de web avançat que podran mantenir i fer créxier amb enorme facilitat.</p>
Disseny responsiu per al web de Sant Vicenç de Castellet2012-07-13T11:48:19+00:00http://www.oxygen.cat/disseny-web-responsiu-per-al-web-de-sant-vicenc-de-castellet<blockquote>
<p>El nou web és pioner en l’ús de programació HTML5 i l’aplicació del disseny web responsiu.</p>
</blockquote>
<p>El nou web de l’<a href="http://www.svc.cat/">Ajuntament de Sant Vicenç de Castellet</a> s’ha realitzat amb llenguatge de programació HTML5 i l’aplicació del <a href="http://www.svc.cat/svcastellet/ca/disseny-web-responsiu">disseny web responsiu</a> (en anglès: responsive web design). Hom ha plantejat i realitzat un projecte innovador per actualitzar la presència a la xarxa del consistori de la comarca del Bages, aplicant les últimes novetats en programació i disseny web.</p>
<p>El web de l’Ajuntament ha estat programat a mida en HTML5 sota els paràmetres del disseny web responsiu, a partir del disseny gràfic original d’<a href="http://www.iohipermedia.com/">Ió Hipermedia</a>. Davant la proliferació dels dispositius mòbils amb accés a Internet, aquesta modalitat de programació preveu una resposta òptima del web per a una correcta visualització en les múltiples resolucions de pantalla: des de les més petites, dels telèfons mòbils o tauletes; a les més grans dels televisors o projectors connectats a Internet.</p>
<p>El disseny aplicat organitza el web en quatre seccions destacades a l’inici: ajuntament, municipi, serveis i seu electrònica. Aquests quatre eixos donen cabuda a les múltiples àrees d’actuacions del consistori. Actualitat i agenda d’activitats són dues de les seccions dinàmiques importants, com també ho és l’apartat de l’Arxiu municipal, programat perquè es pugui anar ampliant, tant en forma com en continguts.</p>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/sant-vicenc-castellet-multi-pantalla.png" /><figcaption><p>Disseny responsiu per al web de Sant Vicenç de Castellet</p></figcaption></figure>
<h2 id="optimitzat-per-a-mòbils">Optimitzat per a mòbils</h2>
<p>El web responsiu de l’Ajuntament de Sant Vicenç de Castellet s’ha desenvolupat perquè funcioni com una autèntica Webapp en els dispositius mòbils. Per a accedir-hi com si fos una aplicació mòbil, només cal crear una icona d’accés a la pantalla d’inici des del navegador del mòbil.</p>
<p>A més d’optimitzar la mida dels elements, el web reorganitza la navegació de les pàgines web perquè siguin fàcil de trobar. D’aquesta manera, la versió més gran de pantalla proporciona una major quantitat de continguts, i les versions més petites prescindeixen d’elements, especialment els de caràcter redundant o que poden alentir la navegació</p>
Una webapp amb HTML5 i JQuery Mobile2012-05-09T11:48:19+00:00http://www.oxygen.cat/web-app-fundacio-escacc-html5-jquery-mobile<blockquote>
<p>Dissenyada i programada per als continguts del web d’Escacc amb tecnologia de codi obert</p>
</blockquote>
<p>La comunicació mòbil arriba al web d’Escacc. Avui s’ha fet el llançament de la nova web app que permet consultar tots els continguts del “<a href="http://www.escacc.cat/" title="Portal d'Escacc">Portal de tendències en comunicació i indústries culturals</a>” de la Fundació Escacc.</p>
<p>Aquesta web app ha estat dissenyada i programada amb tecnologia de codi obert, basada en JQuery Mobile i optimitzada per a iPhone i Android. Des del web app d’Escacc s’accedeix a una versió àgil i simplificada per a dispositius mòbils dels continguts més importants publicats al web d’Escacc.</p>
<p>Tots els continguts als quals es pot accedir des d’aquesta aplicació són oberts: notícies diàries sobre sectors de la comunicació i la cultura, agenda d’activitats relacionada amb aquests àmbits, el bloc amb articles d’especialistes, la secció a+a+ amb informació destacada procedent de la xarxa.</p>
<h2 id="integració-amb-les-xarxes-socials">Integració amb les xarxes socials</h2>
<p>Els continguts d’Escacc oferts des d’aquesta web app es poden recomanar i compartir a través de les principals xarxes socials (Twitter, Facebook, Linkedin, Delicious, Google+) i enviar per correu electrònic des dels dispositius mòbils.</p>
<p>Per crear un accés directe a la pantalla d’inici del teu dispositiu mòbil, i que el web app es comporti com qualsevol aplicació mòbil, cal accedir a <a href="http://m.escacc.cat/">http://m.escacc.cat/</a> i seleccionar l’opció de compartir des del navegador del dispositiu mòbil. Accedeix directament des del teu mòbil a través del codi QR d’aquesta pàgina.</p>
Un web en HTML5 i responsiu per a la programació ambiciosa del 10 en Comunicació2012-03-21T11:48:19+00:00http://www.oxygen.cat/un-web-en-html5-i-responsiu-per-a-la-programacio-ambiciosa-del-10-en-comunicacio<blockquote>
<p>Som pioners en la realització d'aquesta modalitat de disseny web responsiu, sensible a la proliferació de pantalles, basat en HTML5 i CSS3.</p>
<footer>
— <cite><a href="/un-web-en-html5-i-responsiu-per-a-la-programacio-ambiciosa-del-10-en-comunicacio/" title="Un web en HTML5 i responsiu per a la programació ambiciosa del 10 en Comunicació">Ramon Gil</a></cite>
</footer>
</blockquote>
<p>Amb la tercera edició del <strong>10 en Comunicació</strong>, hem realitzat un web específic amb la informació completa i dinàmica d’aquest cicle de conferències, dedicat a la comunicació i la cultura, organitzat per la Fundació <a href="http://www.escac.cat/" title="ESCACC: Fundació Espai Català de Cultura i Comunicació">Escacc</a>.</p>
<p>El web per a aquesta edició del 10 en Comunicació ha estat programat en <strong>HTML5</strong> i <strong>CSS3</strong> sota els paràmetres del <strong>disseny web responsiu</strong> (<a href="http://www.abookapart.com/products/responsive-web-design" title="A Book Apart, Responsive Web Design">responsive web design</a>). Davant la proliferació dels dispositius mòbils amb accés a Internet, aquest tipus de programació preveu la resposta més òptima d’un web per a una correcta visualització en les múltiples i diferents resolucions de pantalla.</p>
<table>
<tbody>
<tr>
<td>Oxygen.cat és pioner a Catalunya en la realització d’aquesta modalitat avançada de disseny web, que s’inicià amb els conceptes content first, [moible first](http://www.lukew.com/ff/entry.asp?933 ‘LukeW</td>
<td>Mobile First’): sensible a la proliferació de pantalles, des de les més petites dels telèfons intel·ligents o tauletes, a les més grans dels televisors o projectors connectats a Internet; sense deixar d’atendre les exigències dels diferents programes i sistemes operatius a l’hora d’accedir als continguts de la xarxa.</td>
</tr>
</tbody>
</table>
<figure class="hidden-xs hidden-sm ox_animate_when_almost_visible ox_right-to-left"><img src="/assets/img/10-en-com-multi-pantalla.png" /><figcaption><p>El web per a aquesta edició del 10 en Comunicació ha estat programat en HTML5 i CSS3 sota els paràmetres del disseny web responsiu</p></figcaption></figure>
<h2 id="una-nova-manera-de-treballar">Una nova manera de treballar</h2>
<p>El disseny d’un web pensant en una única resolució de pantalla fa un temps que no té sentit. Davant aquesta realitat, s’imposa la programació web en <strong>HTML5</strong> i el <strong>disseny web responsiu</strong>. A Argus.net hem incorporat aquest concepte en les creacions web. De fet, se’ns fa difícil concebre un nou web sense començar a definir-lo des des de la pantalla més petita d’un telèfon intel·ligent, fins a les pantalles més grans d’un televisor, passant per les diferents tauletes i ordinadors portàtils i de sobretaula. L’univers de les pantalles i la manera d’accés a la xarxa està canviant a gran velocitat.</p>
<p>No obstant això, el disseny web resposiu no és simplement reduir les mides de font o d’una imatge perquè s’adapti als diferents formats de pantalla. Aquest concepte requereix d’un procés col·laboratiu, de treball conjunt de les àrees de <strong>disseny</strong> i <strong>programació</strong> per determinar com redistribuir els elements, per exemple el sistema de navegació principal, d’acord a la resolució, però també, discriminar quins elements poden ser eliminats i quina estructura es pot mostrar per a cada dispositiu.</p>
Sant Vicenç de Castellet, estratègia de comunicació per a l'actualització del web de l'ajuntament2011-11-15T11:48:19+00:00http://www.oxygen.cat/sant-vicenc-de-castellet-estrategia-de-comunicacio-per-a-lactualitzacio-del-web-de-l-ajuntament<blockquote>
<p>No hem de perdre de vista que l'objectiu d'un disseny web actual és millorar la comunicació al conjunt de la xarxa.</p>
<footer>
— <cite><a href="/sant-vicenc-de-castellet-estrategia-de-comunicacio-per-a-lactualitzacio-del-web-de-l-ajuntament/" title="Sant Vicenç de Castellet, estratègia de comunicació per a l'actualització del web de l'ajuntament">Ramon Gil</a></cite>
</footer>
</blockquote>
<p>Estem treballant amb el nou web de l’Ajuntament de Sant Vicent de Castellet. L’objectiu principal del web és l’actualització de la imatge, l’estructura i la comunicació del consistori i el municipi a la xarxa.</p>
<p>L’estructura general del web de Sant Vicenç de Castellet es generarà a partir del desplegament de quatre grans eixos: institucional, municipal, serveis i tramitació electrònica. L’estructura del nou web s’elabora a partir dels objectius i mitjançat l’estratègia de comunicació del web.</p>
<p>A més a més, es defineixen altres eixos transversals que incideixen en el conjunt del web per potenciar la comunicació i la interacció dels diferents usuaris, amb especial atenció als dispositius mòbils.</p>
<h2 id="un-web-de-referència">Un web de referència</h2>
<p>L’estratègia de comunicació en l’elaboració d’un web serveix per definir l’estructura, la programació i el disseny, així com per fixar els recursos tecnològics i les aplicacions que requeriran els diferents apartats per a una comunicació eficaç amb els diferents públics. Apostem en ferm per l’<a href="http://en.wikipedia.org/wiki/HTML5" title="HTML5 - Wikipedia, the free encyclopedia">HMTL5</a> i el “<a href="http://www.abookapart.com/products/responsive-web-design" title="ABook Apart, Responsive Web Design">responsive web design</a>”.</p>
<p>Mitjançant l’<strong>estructura</strong> podem establir els eixos principals, les seccions i els apartats que despleguen el web per arribar a tots els continguts definits prèviament i ordenar-los de la millor manera possible, fent-los accessibles a tots els usuaris i atenent als criteris de comunicació interna i externa.</p>
<p>La <strong>programació</strong> és l’eina clau per al funcionament intern del web i el millor posicionament a la xarxa. En el cas del web d’una corporació municipal, la programació es posa al servei dels processos informàtics necessaris per a la tramitació en línia, garantir la seguretat en l’enviament i la recepció de dades, però, també, per a la incorporació de les xarxes socials o el cercador del web.</p>
<p>I, pel que fa al <strong>disseny</strong>, la realització d’un nou web permet actualitzar la imatge corporativa d’una manera global i efectiva, no només al propi web, també al conjunt de la xarxa. La posada al dia del disseny de les organitzacions permet incorporar les innovacions gràfiques i d’imatge. No hem de perdre de vista que l’objectiu d’un disseny web actual és millorar la comunicació al conjunt de la xarxa.</p>
Nova pàgina d'inici del web del Grup 62 per potenciar la marca, el catàleg i els autors2011-06-30T11:48:19+00:00http://www.oxygen.cat/nova-pagina-inici-del-web-del-grup-62-per-potenciar-la-marca-el-cataleg-i-els-autors<blockquote>
<p>Gestionem la totalitat dels sistemes web del Grup 62, format per una dotzena de portals específics, aplicacions diferents i editores personalitzades per a cada necessitat.</p>
<footer>
— <cite><a href="/nova-pagina-inici-del-web-del-grup-62-per-potenciar-la-marca-el-cataleg-i-els-autors/" title="Nova pàgina d'inici del web del Grup 62 per potenciar la marca, el catàleg i els autors">Ramon Gil</a></cite>
</footer>
</blockquote>
<p>Quatre anys després de la publicació del web corporatiu del <strong>Grup 62</strong>, hem refet la pàgina d’inici d’aquest important grup editorial català. Amb aquesta actualització de la portada s’inicia una nova fase al web corporatiu del Grup 62, la qual es caracteritza per la potenciació del <strong>catàleg conjunt</strong>, les <strong>novetats editorials</strong> i els <strong>autors</strong> del llibres, tot aprofitant la consolidació de la marca del grup.</p>
<p>L’any 2006, el Grup 62 va iniciar la seva trajectòria a la WWW de la mà d’Argus.net, amb la idea de donar màxima visibilitat al segell editorial. Coincidint amb la <strong>Fira del Llibre de Frankfurt 2007</strong>, en la qual la cultura catalana va ser convidada d’honor, el Grup 62 va estrenar el seu primer lloc web corporatiu. Actualment, Argus.net gestiona la totalitat dels sistemes web del Grup 62, format per una dotzena de portals específics, aplicacions diferents i editores personalitzades per a cada necessitat.</p>
<p>En aquell moment, l’objectiu principal va ser potenciar marques que han esdevingut molt conegudes a Internet, com ara: Edicions 62, Columna, Proa o Empúries. Al mateix temps, i per primera vegada, es posava a la xarxa la marca de 62 com a grup i s’apostava pels autors com a principals agents del món literari. Actualment, el Grup 62 i Argus.net treballen conjuntament per actualitzar tot el sistema web per posar-lo al dia de les <strong>novetats tecnològiques</strong> i per atendre noves <strong>necessitats de comunicació</strong>.</p>
El Grup 62 estrena web per al nou servei d'impressió de llibres per encàrrec2011-05-16T11:48:19+00:00http://www.oxygen.cat/grup-62-estrena-web-impressio-llibres-per-encarrec<blockquote>
<p>Hem creat un web ple de petits detalls, fets amb les més innovadores tècniques de disseny web, el CSS3</p>
<footer>
— <cite><a href="/grup-62-estrena-web-impressio-llibres-per-encarrec/" title="El Grup 62 estrena web per al nou servei d'impressió de llibres per encàrrec">Ramon Gil</a></cite>
</footer>
</blockquote>
<h2 id="impressió-per-encàrrec-llibres-que-mai-més-no-sexhauriran">Impressió Per Encàrrec, llibres que mai més no s’exhauriran</h2>
<p>Creem un nou web per al Grup 62. En aquest cas és un exercici de disseny d’<strong>interfície moderna que potencia per damunt de tot el llibre</strong> amb l’objectiu de tornar al mercat aquells llibres de l’extens catàleg del Grup 62 que cal tenir i potser ja no es reeditaran. És <strong>una clara aposta per la impressió per encàrrec en català</strong>.</p>
<p>Com tot <strong>projecte “made by us”</strong> ;-) hem fet des de la base de dades, passant pels sistemes d’autogestió (WCMS) i editores, fins al disseny gràfic i d’interacció.</p>
Key4 Communications, usabilitat en el disseny i innovació tecnològica al servei del B2B2011-01-17T11:48:19+00:00http://www.oxygen.cat/key4-communications-usabilitat-disseny-innovacio-tecnologica-b2b<blockquote>
<p>Hem fet fet un projecte rodó: direcció general, conceptualització, definició estètica i disseny gràfic, front-ent, back-end, SEO i analítica.</p>
<footer>
— <cite><a href="/key4-communications-usabilitat-disseny-innovacio-tecnologica-b2b/" title="Key4 Communications, usabilitat en el disseny i innovació tecnològica al servei del B2B">Ramon Gil</a></cite>
</footer>
</blockquote>
<h2 id="hem-llançat-key4-the-b2b-information-authority">Hem llançat “<a href="http://www.key4communications.com/" title="key4communications.com">Key4</a>, the B2B information authority”!</h2>
<p>Key4 és un lloc web de comunicació professional que actua com a plataforma d’informació intersectorial per als professionals i empreses del sector de la joguina, la puericultura i el negoci del licensing. L’ús dels estàndards web 2.0 que componen el portal, permeten la universal usabilitat del site, podent accedir o rebre la informació d’actualitat del tres sectors des de qualsevol plataforma multimèdia.</p>
<p>Des d’ARGUS vàrem apostar per crear un sistema mitjançant el qual tot usuari pot <strong>adquirir qualsevol contingut privat en 3 únics passos</strong>, si no està identificat en el sistema, i en 5 passos cas de no estar donat d’alta ni identificat en el sistema. El quart pas correspon a la validació financera que recau sobre el mètode de pagament que hem decidit i implementat: Paypal. <strong>Si l’usuari està identificat en el sistema, la seva compra es fa en un sol pas</strong>.</p>
<p>A més a més, com gairebé sempre, <strong>hem fet un projecte</strong>, permeteu-nos la modèstia, <strong>rodó: direcció general, conceptualització, definició estètica i disseny gràfic, front-ent</strong> (HTML5, CSS3, JS, Ajax), <strong>back-end</strong> (CMS, Editores i autogestió de l’ecommerce), <strong>SEO</strong> i <strong>analítica</strong> (sota Piwik).</p>
Flash estàndard: Gràfics vectorials amb SVG2006-02-16T11:48:19+00:00http://www.oxygen.cat/flash-estandard-grafics-vectorials-amb-svg<h2 id="del-flash-al-svg">Del Flash al SVG</h2>
<p>L’animació d’objectes a la web i el disseny utilitzant gràfics vectorials ha estat dominat els últims deu anys per Macromedia. Un llenguatge basat en XML desenvolupat pel World Wide Web Consortium (W3C) anomenat Scalable Vector Graphics (SVG) ha a aparegut com a competidor i sembla que està guanyant terreny.</p>
<p>La història de la interactivitat utilitzant gràfics vectorials comença a principis dels anys noranta quan Macromedia va desenvolupar el Shockwave, un producte que va permetre als desenvolupadors multimèdia crear les primeres animacions amb una interactivitat mai vista fins aleshores.</p>
<p>Els primers navegadors van començar a suportar Shockwave utilitzant plugins però molt aviat Macromedia va veure que una versió reduïda podia ser distribuïda directament. És així quan el 1996 Macromedia va comprar FutureWave que amb el seu producte FutureSplash es va convertir en el Flash 1.0.</p>
<p>A mitjans dels anys noranta, va aparèixer un nou actor en el món de les dades gràcies a la senzillesa d’organitzar-les. Molts tipus de dades es van començar a representar en XML: representació d’informació matemàtica utilitzant MathML, gestió del coneixement amb RDF per a representar catàlegs de biblioteques, notícies o col·leccions de música, fotografies o agendes. Aquesta forma d’organitzar les dades són la base la creació de l’SVG.</p>
<p>L’any 1999 va sortir la primera especificació de l’SVG. Proporciona una estructura per a una definició vectorial de gràfics utilitzant XML que inclouen l’animació temporal, la gestió d’events i la modifiació de documents. Tot això fa que l’SVG sigui un ferm competidor del Flash, lliure i estàndard.</p>
<p>El principal problema per a la generalització del SVG és poca implantació en navegadors i la manca d’una eina estàndard d’autor. L’aparició del Firefox 1.5 que suporta SVG de forma nativa i el ràpid creixement dels últims temps de la utilització d’estàndards com XHTML i CSS en el desenvolupament d’alicacions web, fa pensar en un creixement molt ràpid d’aquesta tecnologia.</p>
<h3 id="taula-de-comparació-de-flash-i-svg">Taula De Comparació De Flash I SVG</h3>
<table>
<thead>
<tr>
<th> </th>
<th>Macromedia Flash</th>
<th>SVG</th>
</tr>
</thead>
<tbody>
<tr>
<td>Llicència oberta i estàndard</td>
<td>No</td>
<td>Si</td>
</tr>
<tr>
<td>Especificació</td>
<td>Macromedia SWF</td>
<td>Llicència del World Wide Web Consortium</td>
</tr>
<tr>
<td>Tipus de format</td>
<td>Binari</td>
<td>Text (XML llegible per humans)</td>
</tr>
<tr>
<td>Tipus MIME</td>
<td>application/x-shockwave-flash</td>
<td>image/svg+xml</td>
</tr>
<tr>
<td>Possibilitat de Streamming</td>
<td>Si</td>
<td>No</td>
</tr>
<tr>
<td>Interactivitat</td>
<td>Si. Utilitzant Scripts i Events</td>
<td>Si. Utilitzant Scripts, SMIL, i events</td>
</tr>
<tr>
<td>DOM</td>
<td>Intern</td>
<td>SVGDOM conforme amb la recomenació DOM Nivell 1</td>
</tr>
<tr>
<td>Z-Order (Ordenació de gràfics)</td>
<td>L’element amb més profunditat queda a dalt. Es pot modificar</td>
<td>Utilitza l’estructura de SVGDOM per a col·locar els objectes. L’últim element queda a dalt i es pot modificar utilitzant DOM</td>
</tr>
<tr>
<td>Compressió</td>
<td>Si. ZLIB</td>
<td>Si. GZIP</td>
</tr>
<tr>
<td>Suport natiu en navegadors</td>
<td>No. Però el “plugin” està instal·lat en la majoria de sistemes operatius i navegadors</td>
<td>Parcialment implementat en alguns navegadors. Plugin d’Adobe disponible.</td>
</tr>
<tr>
<td>Indexat pels cercadors</td>
<td>Per la majoria</td>
<td>Només alguns</td>
</tr>
<tr>
<td>Estils</td>
<td>Específic de SWF (Subconjunt de CSS)</td>
<td>Específic de SVG. Molt similar i compatible amb CSS2 i XSL</td>
</tr>
</tbody>
</table>
<h2 id="més-info">Més info</h2>
<ul>
<li><a href="http://www.webstandards.org/" title="The Web Standards Project">The Web Standards Project</a></li>
<li><a href="http://www.w3.org/" title="World Wide Web Consortium">World Wide Web Consortium</a></li>
<li><a href="http://webstandardsgroup.org/" title="Web Standards Group">Web Standards Group</a></li>
<li><a href="http://www.webstandardsawards.com/" title="Web Standards Awards">Web Standards Awards</a></li>
</ul>
Per què estàndards web?2006-02-16T11:48:19+00:00http://www.oxygen.cat/per-que-estandards-web<table>
<tbody>
<tr>
<td>El març del 2003 l’<strong>Internet Explorer</strong> va arribar al màxim de la seva quota de mercat coincidint amb la sortida al mercat del <strong>Mozilla 1.3</strong>. Un altre punt d’iflexió va ser el juny del 2004 quan va aparèixer la versió 0.9 del <a href="http://www.mozilla.org" title="Enllaç extern en anglès; Mozilla Corporation - Home of the Firefox web browser">Firefox</a>. Des del març del 2003 l’Internet Explorer ha passat d’una quota de mercat del 88,0% a un 71,7% al desembre del 2004. En el mateix període de temps, el conjunt d’eines Mozilla (la suitte i el Firefox) han passat del 4,2% al 21,2%.El Mozilla Firefox aporta noves funcionalitats a la navegació amb les pestanyes o incorpora les adreces d’interès dinàmiques utilitzant [RSS](http://www.mozilla.com/firefox/livebookmarks ‘Enllaç extern en anglès; Product RSS</td>
<td>Mozilla Corporation’). Amb el bloqueig de les pantalles emergents (POPUPs), imposa una nova forma de dissenyar webs. Permet la personalització i la incorporació d’extensions d’una forma molt sezilla.</td>
</tr>
</tbody>
</table>
<p>A banda d’aquestes noves funcionalitats, la suite de productes Mozilla són els navegadors que suporten plenament els estàndards proposats pel <a href="http://www.w3.org/" title="Enllaç extern en anglès; World Wide Web Consortium">W3C</a>: <strong>HTML 4.x</strong>, <strong>XHTML 1.x</strong>, o <strong>XML</strong> per a l’estructura de continguts i <strong>CSS</strong> o <strong>XSLT</strong> per a la presentació. Els navegadors Mozilla també són estàndards en les plataformes en les que estan disponibles: Windows, Mac OSX i Linux.</p>
<p><strong>Oxygen</strong> pensa que ha arribat una nova era en la programació web on un dels indicadors principals és la pujada del Firefox que aposta per la programació amb estàndards. En la història d’Internet, s’ha oblidat molt fàcilment que entre l’usuari i el servidor hi ha un programa (el navegador) que és una màquina; i que ha d’interpretar una codificació i mostrar-la a l’usuari. Això ens hauria de fer pensar que l’utilització d’estàndards hauria de ser habitual? però no és així.</p>
<p>Els llocs web estan programats de forma no estàndard i els navegadors han interpretat l’HTML de forma no estàndard. Això només s’ha pogut sostenir per un monopoli de l’Internet Explorer. En un moment que això està canviant, és evident que només ens podrem refiar dels estàndards i no fer-ho serà evidentment un error estratègic.</p>
<h2 id="més-info">Més info</h2>
<ul>
<li><a href="http://www.webstandards.org/" title="The Web Standards Project">The Web Standards Project</a></li>
<li><a href="http://www.w3.org/" title="World Wide Web Consortium">World Wide Web Consortium</a></li>
<li><a href="http://webstandardsgroup.org/" title="Web Standards Group">Web Standards Group</a></li>
<li><a href="http://www.webstandardsawards.com/" title="Web Standards Awards">Web Standards Awards</a></li>
</ul>
Els estàndards web: qualitat del codi2006-02-16T11:48:19+00:00http://www.oxygen.cat/els-estandards-web-qualitat-del-codi<h2 id="utilització-dun-doctype-correcte">Utilització d’un Doctype correcte</h2>
<p>Per als estàndards <strong>HTML</strong> i <strong>XHTML</strong>, la declaració de tipus de document, DOCTYPE informa al validador de quina versió de (X)HTML esteu utilitzant. Ha d’aparèixer com a principi de qualsevol pàgina i són un component clau per a que les pàgines compleixin amb els estàndards; per exemple que es validin els CSS. Són essencials per tal que les pàgines web funcionin i es vegin correctament amb browsers com Mozilla, IE5/Mac, and IE6/Win.</p>
<p>Utilitzar un <a href="http://www.w3.org/QA/2002/04/Web-Quality" title="W3C QA - How to achieve Web standards and quality on your Web site?">DOCTYPE</a> incorrecte o incomplet o no utilitzar-ne, fa que aquests browsers passin a utilitzar el mode <strong>“Quirks”</strong>, on assumeixen que esteu utilitzant un codi invàlid i intentarà “parsejar” les pàgines i els CSS tal i com s’haurien visialitzat en navegadors antics com l’IE4 o el Netscape6.</p>
<h2 id="utilització-dun-joc-de-caràcters">Utilització d’un joc de caràcters.</h2>
<p>Els documents transmesos amb HTTP que són de tipus text, com per exemple text/html, text/plain, etc.. han de tenir el paràmetre charset establert per tal d’especificar la codificació de caracters del document.</p>
<p>És molt important etiquetar els documents web de forma explícita. L’<strong>HTTP 1.1</strong> especifica que el charset per defecte és l’ <strong>ISO-8859-1</strong>. El que passa és que els navegadors utilitzen la codificació seleccionada per l’usuari en la configuració quan el document no està etiquetat.</p>
<p>En les capceleres HTTP, normalment hi està especificat de la forma següent:</p>
<ul>
<li>Content-Type: text/html; charset=iso-8859-1</li>
</ul>
<p>En teoria, es pot utilitzar qualsevol codificació que ha estat registrada per l’<a href="http://www.iana.org/assignments/character-sets/character-sets.xhtml" title="Character Sets">IANA</a>, però no hi ha cap navegador3 que els tingui tots inclosos.</p>
<p>Per a l’XML i l’HTML 4.0, el charset és Unicode (aka ISO 10646). Això vol dir que els navegadors HTML i els processadors XML, s’han de comportar com si utilitzessin internament Unicode. Però això no vol dir forçosament que els documents hagin estat transmesos utilitzant Unicode.</p>
<p>És molt important que la codificació de caràcters estigui fixada a tots els documents XML o (X)HTML i es pot fer d’una de les maneres següents:</p>
<ol>
<li>Utilitzar el paràmetre ‘charset’ a la capçalera Content-Type de l’HTTP. Content-Type: text/html; charset=EUC-JP</li>
<li>Pera l’XML, utilitzar un atribut a la decleració d’XML a l’inic del document:<?xml version="1.0" encoding="iso-8859-1" ?></li>
<li>Pe-r a l’HTML utilitzar un tage <meta /> a l’interior del <head>. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></li>
<li>Per a XHTML: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></li>
</ol>
<p>Amb aquesta informació, els clients podran mapejar fàcilment aquesta codificació a Unicode. A la pràctica molt poques codificacions es poden utilitzar: UTF-8 , ISO-8859-1 (Latin-1), US-ASCII, UTF-16, i altres codificacions a les sèries ISO-8859, iso-2022-jp, euc-kr.</p>
<h2 id="utilització-dun-xhtml-vàlid">Utilització d’un (X)HTML vàlid</h2>
<p>Podem utilitzar bàsicament dos tipus d’HTML:</p>
<ul>
<li>
<p><strong>HTML 4</strong>: Es pot definir l’HTML 4 com una aplicació de l’<strong>SGML</strong> (Standard Generalized Markup Language) un estàndar internacional: ISO 8879 i és plenament reconegut com l’estàndard per a la publicació de pàgines a la web. L’SGML és un llenguatge per a descriure i intercanviar electrònicament documents, l’HTML és un exemple d’un llenguatge definit en <strong>SGML</strong>. L’SGML, definit a mitjans dels 80, és molt flexible i s’ha matingut molt estable; aquesta flexibilitat, ens fa pagar el preu que s’ha arribat a un nivell de complexitat en els documents en el moment que s’ha adoptat en entorns com la web. L’HTML va ser concebut per a l’intercanvi de documents científics, simplificant l’SGML amb un subconjunt de “tags” semàntics molt útils per a crear documents molt símples i afegint suport per a l’hipertext (enllaç simbòlic entre documents).</p>
<p>En molt poc temps, l’HTML s’ha popularitzat molt i ha superat el seu propòsit inicial, adoptant funcions multimèdia i molts elements molt especialitzats. Tots aquests nous elements, ha portat a molts problemes d’interoperatibilitat per a documents entre plataformes diferents.</p>
</li>
<li>
<p><strong>XHTML</strong>: XHTML és un una reformulació molt més estricte de l’HTML4 basat en XML, per tant, els documents XHTML poden ser visualitzat, editats i validats utilitzant totes les eines XML. També, els documents XHTML es poden escriure per a que operin tant bé o millor amb els navegadors pensats per a HTML 4 com a nous navegadors ja pensats per a XHTML. Amb una sintaxi més esticta però amb les mateixes possibilitats d’expresió que l’HTML, permet que els documents siguin tractats amb les llibreries estàndards de XML; un “parser” molt més senzill que els de l’HTML que han de ser específics. L’XHTML 1.0 és un estàndard del World Wide Web Consortium4 (W3C), des del 26 de gener de l’any 2000.</p>
</li>
</ul>
<h2 id="més-info">Més info</h2>
<ul>
<li><a href="http://www.webstandards.org/" title="The Web Standards Project">The Web Standards Project</a></li>
<li><a href="http://www.w3.org/" title="World Wide Web Consortium">World Wide Web Consortium</a></li>
<li><a href="http://webstandardsgroup.org/" title="Web Standards Group">Web Standards Group</a></li>
<li><a href="http://www.webstandardsawards.com/" title="Web Standards Awards">Web Standards Awards</a></li>
</ul>
PageRank i posicionament web en cercadors, una aferrissada carrera de fons2005-08-05T11:48:19+00:00http://www.oxygen.cat/pagerank-i-posicionament-web-en-cercadors<p>Qui no ha pensat mai “per què quan poso aquesta o aquella paraula a Google la gent de… surten en primera posició? <strong>Com ho fan per ser els primers?”</strong> I el que és pitjor, d’altres ens preguntem, <strong>“per què quan poso aquesta o aquella paraula a Google nosaltres no surtim en primera posició?</strong> I finalment aquells altres que ja hem pres consciència de l’enorme importància no només d’estar a Internet sinó també de saber-hi estar, ens preguntem “quan poso aquesta o aquella paraula a Google nosaltres <strong>podrem arribar mai a la primera posició?”</strong></p>
<h2 id="pagerank-i-posicionament-web-conceptes-bàsics">PageRank i posicionament web, conceptes bàsics</h2>
<p>Abans de començar aquesta lloable competició per la primera posició de la “marató Google”, <strong>una miqueta de teoria i algunes dades bàsiques</strong> que ens ajudaran a estar en plena forma per a quan sentim el tret de sortida.</p>
<ul>
<li><strong>Posicionament natural</strong>: aquell que els cercadors et donen per ser qui ets.</li>
<li><strong>Posicionament induït</strong>: aquell que els cercadors et donen com a resultat de contractar un espai associat a un criteri de cerca.</li>
<li><strong>PageRank</strong>: és una famàlia d’algorismes utilitzats per a assignar de forma numèrica la rellevància dels documents (o pàgines web) indexats per un motor de cerca. Va ser inventat pels fundadors de Google i classifica les planes de 0 a 10.</li>
</ul>
<h2 id="pagerank-i-posicionament-web-el-gran-èxit-de-google">PageRank i posicionament web, el gran èxit de Google</h2>
<p>Aquest concepte patentat per Larry Page i Sergey Brin és el responsable de què avui en dia Google sigui la referència mundial. <strong>Genera entorn del 85% de tot el tràfic procedent de cercadors</strong>, per tant arribar als llocs de referència constitueix la diferència entre comptar o no comptar a Internet. La resta de cercadors s’alimenten totalment o parcial d’ell. Només Yahoo i MSN estan perfeccionant els seus sistemes i serveis per apropar-se al gegant [cliqueu <a href="https://www.google.com/search?hl=en&q=battle+search&btnG=Google+Search" title="fes clic aquí per veure els resultats de la cerca 'battle+search'">aquí</a> per fer-vos una lleugera idea de la “batalla”].</p>
<p>PageRank confia en la naturalesa democràtica de la web utilitzant la seva vasta estructura d’enllaços com un indicador del valor d’una pàgina en concret. <strong>Google interpreta un enllaç d’una pàgina A a una pàgina B com un vot</strong>, de la pàgina A, per a la pàgina B. Però Google mira més enllà del volum de vots, o enllaços que una pàgina rep; també analitza la pàgina que emet el vot. <strong>Els vots emesos per les pàgines considerades “importants” valen més</strong>, i ajuden a fer a altres pàgines “importants”.</p>
<p>En altres paraules, <strong>el lloc d’una pàgina és el resultat d’una “votació” entre totes les altres pàgines de la World Wide Web sobre el nivell d’importància que té aquesta pàgina</strong>. Un hiperenlaç a una pàgina compta com un vot de suport. El PageRank d’una pàgina es defineix recursivament i depèn del nombre i PageRank de totes les pàgines que l’enllacen. Una pàgina que està enllaçada per moltes pàgines amb un PageRank alt aconsegueix també un PageRank alt. Si no hi ha enllaços a una pàgina web, no hi ha suport a aquesta pàgina específica.</p>
<p>Tot plegat sembla ser una escala logarítmica, però els detalls exactes d’aquesta escala són un dels secrets més grans dels nostres dies.</p>
<h2 id="pagerank-i-posicionament-web-lestratègia-a-seguir">PageRank i posicionament web, l’estratègia a seguir</h2>
<p>Els <a href="http://www.eyetools.com/inpage/research_google_eyetracking_heatmap.htm" title="fes clic aquí per veure els resultats de la tècnica eyetrack">darrers estudis</a> demostren que <strong>els tres primers resultats de Google són llegits per la pràctica totalitat de les persones</strong> que fan una recerca, seguint la resta de resultats de la primera pàgina en efectivitat. Aquesta efectivitat decau ràpidament i <strong>són menys d’un 10% els usuaris que exploren més enllà de la tercera pàgina de resultats</strong>. O el que és el mateix, si no apareixem en els primers trenta llocs, les probabilitats de, per exemple, contactar amb “clients” potencials és gairebé nul·la. Trenta places, deu d’elles d’autèntic privilegi, per a totes les empreses del món.</p>
<p><strong>Els canvis de PageRank són una carrera de fons</strong>. Es calcula que hi ha uns 8 mil milions de planes web i aquesta xifra creix exponencialment cada dia (l’any 2000 s’estimaren uns 2 mil milions). I es calcula que hi ha més de 700 milions d’usuaris d’Internet (dades 2003). Per tant la competició és molt dura.</p>
<p>Què cal fer doncs?, <strong>descobrir aquelles pàgines que Google té “reservades” per a NOSALTRES</strong>. Aquelles en les que podem ser l’estrella i aquell grapat més en les que estarem als llocs de dalt, en aferrisada rivalitat amb els més propers competidors.</p>
<p>La competició, doncs, és qualitativa. I aquí és on l’experiència d’empreses com <a href="/">Oxygen.cat</a> entrem a jugar fort dissenyant una estratègia que en essència persegueix:</p>
<ul>
<li>Identificar clarament el nínxol de mercat.</li>
<li>Identificar els conceptes claus.</li>
<li>Optimitzar el website.</li>
</ul>
<p>En gran mesura aquest darrer punt passa pel desenvolupament web basat en <strong>estàndards. Si voleu estar en les millor condicions per a la competició, cada pàgina del vostre web ha d’estar creada sense errors de codi XHTML i ser semànticament correcta</strong>.</p>
<p>Una “sana” carrera de fons ha començat!.</p>
L'accessibilitat web2004-10-01T11:48:19+00:00http://www.oxygen.cat/l-accessibilitat-web<p>Aquesta perspectiva pretén fixar d’una manera simplificada quines tipologies d’usuaris considerem a Oxygen quan creem un web i quines són les seves especificitats.</p>
<p>Oxygen.cat utilitza i recomana aquesta filosofia i metodologia de desenvolupament web. Els funciona als nostres clients i ens funciona a nosaltres mateixos. És la manera de fer el web ben fet, amb qualitat i professionalitat.</p>
<p>L’accessibilitat dels contiguts web té una doble vessant: la lligada a la tecnologia i la lligada a l’usuari. Tenint això en compte, organitzem la problemàtica de la següent manera:</p>
<ul>
<li>Tecnologies
<ul>
<li>Connectivitat</li>
<li>JavaScript</li>
<li>PDA i aparells mòbils</li>
<li>WebTV</li>
</ul>
</li>
<li>Usuaris amb minusvalies
<ul>
<li>Cecs</li>
<li>Visió parcial o molt reduïda</li>
<li>Ceguesa de color</li>
<li>Sords</li>
<li>Usuaris amb navegació per teclat o veu</li>
<li>Altres dificultats</li>
</ul>
</li>
</ul>
<h2 id="tecnologies">Tecnologies</h2>
<h3 id="connectivitat">Connectivitat</h3>
<p>La Banda Ampla no està ni molt menys tant estesa com de vegades pensem per l’abús de la publicitat. Aquest usuaris sovint no poden accedir simplement per una tema de pes de la informació. Aproximadament un 4% de les llars espanyoles diposen de banda ampla.</p>
<h3 id="javascript">JavaScript</h3>
<p>Aproximadament un 7% dels usuaris d’Internet naveguen sense suportar JavaScript ja sigui per raons de seguretat, ja sigui per emprar navegadors de només text.</p>
<h3 id="pda-i-aparells-mòbils">PDA i aparells mòbils</h3>
<p>El nombre d’usuaris que accedeixen a Internet amb aquest tipus de dispositius augmenten a passes agigantades. La majoria d’aquests dispositius no suporten ni grans imatges, ni JavaSript, ni Flash ni fins i tot sovint CSS.</p>
<h3 id="webtv">WebTV</h3>
<p>El màxim que suporta és 575 pixels d’amplada i el “scrolling” horitzontal és impossible.</p>
<h2 id="usuaris-amb-minusvalies">Usuaris amb minusvalies</h2>
<h3 id="cecs">Cecs</h3>
<p>Acostumen a emprar lectors de pantalla (tipus JAWS o IBM homepage reader), un tipus de programari que es situa entre l’usuari i el navegador, examina amb cura l’HTML i desxifra que cal pronunciar amb claredat i que cal ignorar. Una bona experiència és obrir aquest software, anar a la nostra plana preferida, apagar el monitor i provar de navegar-hi.
Visió parcial o molt reduïda</p>
<p>Acostumen a treure el màxim de profit de les opcions que suporten la majoria de navegadors actuals sobre la grandària del text. De tota manera cal tenir-los en compte i desenvolupar en termes d’unitats relatives (% o em). Una altra alternativa per a aquests usuaris són els magnificadors de pantalla.</p>
<h3 id="ceguesa-de-color">Ceguesa de color</h3>
<p>S’estima que 1 de cada 12 homes i 1 de cada 200 dones tenen algun tipus de ceguesa de color.</p>
<h3 id="sords">Sords</h3>
<p>Els sords tenen una experiència pràcticament idèntica a la dels usuaris sense minusvalies exceptuant el contingut basat en àudio, per tant cal donar almenys sempre transcripcions escrites.</p>
<h3 id="usuaris-amb-navegació-per-teclat-o-veu">Usuaris amb navegació per teclat o veu</h3>
<p>Algunes minusvalies poden impedir un ús òptim del ratolí per tant cal navegar per teclat o en casos extrems per veu.</p>
<h3 id="altres-usuaris-amb-dificultats">Altres usuaris amb dificultats</h3>
<ul>
<li>Epilèptics (pampallugues de pantalla entre 2 i 55 hz, sinó pot induir atacs d’epilèpsia).</li>
<li>Usuaris no propis d’un sector o àrea de coneixement acostumen a no entendre res per causa de l’abús d’acrònim o argot.</li>
<li>En general, usuaris amb certes deficiències de comprensió textual (abús de llenguatge massa complex a Intenet).</li>
</ul>
<h2 id="per-saber-ne-més">Per saber-ne més</h2>
<ul>
<li><a href="http://joeclark.org/book/sashay/serialization/" title="Building accessible websites">Joe Clark</a></li>
<li><a href="http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html" title="Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0">W3C</a></li>
<li><a href="http://www.sidar.org/#goto_a11yhoy" title="SIDAR: Accesibilidad y adaptabilidad en la Red. Principal">sidar.org</a></li>
</ul>