Skip navigation

Figura i retrat. Jekyll, Polymer i Schema metadata



per |   Temps estimat de lectura, 3.04 minuts

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>— Arnau Puig</footer>

La Fundació Iluro

La Fundació Iluro 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.

És en aquest sentit que s’emmarca el nou web de l’exposició Figura i Retrat.

Figura i Retrat

figurairetrat.fundacioiluro.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 d’esdeveniments artístics.

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 i Schema metadata!

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

En aquest projecte no fem ús de la RESTful API 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 YAML. Una altra forma de crear un sistema “automatitzat” per a l’emplenat de dades.

Millor difusió a xarxes socials i millor SEO

Des del punt de vista tècnic, el web figuraitretrat.fundacioiluro.cat presenta tres detalls interessants que faciliten la seva difusió a les xarxes socials i un millor posicionament SEO:

  • Ús de metadades og tant a les obres com als esdeveniments, 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”) tant a les obres com als esdeveniments, que generen de manera automàtica resums ampliats en forma de tarjeta als tuits sobre l’exposició.
  • Ús d’Schema Metadata (Organization, IndividualProduct i Event) per facilitar la indexació dels contiguts a Google, facilitar el poscionament i donar millors resultats de cerca.

A Oxygen.cat tenim la voluntat d’anar un pas per endavant!