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>— TRAMdisseny</footer>

TRAM

TRAM é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.

Des de TRAM volen posar en marxa la seva línia de merxandatge. És en aquest sentit que s’emmarca el nou web del concurs TRAMdisseny.

TRAMdisseny

www.tramdisseny.cat s’ha realitzat amb llenguatge HTML5 i l’aplicació del disseny web responsiu (en anglès: responsive web design). Oxygen ha plantejat i realitzat un projecte innovador aplicant les últimes novetats en programació i disseny web, creant una veritable webapp per a la recollida i gestió de les propostes del concurs.

CMS-free

A Oxygen apostem de totes totes per la construcció de webs CMS-free. 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.

Tornar al bàsic

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.

La fórmula amb Jekyll, Prose, Webcompoents, Service Worker i formularis de Google customitzats

• Jekyll per a plantilles de pàgina i la generació d’arxius estàtics
• Fitxers HTML, CSS i Javascript
• El servidor de pàgines estàtiques GitHub
• APIs externes quan cal
• Prose.io, un editor de continguts web específicament dissenyat per treballar amb Jekyll

En aquest projecte seguim apostant pels web components, una veritable revolució en el desenvolupament web, per mitjà de Polymer, l’“opinionated framework” creat per Google.

  <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>
  

Des del punt de vista tècnic, el web tramdisseny.cat fa ús també del “service worker”. Amb aquesta implementació, ara sí, el web es comporta com una veritable app ja que funciona 100% offline sense els maldecaps de l’appcache! Aquesta funcionalitat es troba encara en una fase força experimental de l’HTML5 però de ben segur que aquest és el futur de les web apps.

Formularis de Google customitzats

Per a la recollida de dades dels participants al Concurs TRAMdisseny, 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 un seguiment en temps real de totes les dades dels participants.

Millor difusió a xarxes socials i millor SEO

tramdisseny.cat presenta quatre detalls interessants que faciliten la seva difusió a les xarxes socials i un millor posicionament SEO:

• Ús de metadades og que generen de manera automàtica millors posts a Facebook i a Goolge Plus.

• Ús de [Twitter Cards](https://dev.twitter.com/cards/overview “Twitter Cards

  Twitter Developers”) que generen de manera automàtica resums ampliats en forma de tarjeta als tuits sobre el Concurs.

• Ús d’Schema Metadata (Organization i Article) per facilitar la indexació dels contiguts a Google, facilitar el poscionament i donar millors resultats de cerca.
• SSL gràcies a Cloudflare. Google aposta dedicidament per una Internet més segura i per tant ha decidit premiar aquells webs que corrin sota https!

A Oxygen.cat tenim la voluntat d’intentar anar un pas per endavant, oferint allò que els nostres clients es mereixen: bon servei i millor innovació!