The new website of Pro Loco Sovicille

17 October 2019

Projects

3 min.

41

Questo articolo è disponibile in italiano

In recent months I have been working on the design and implementation of a new site for the Pro Loco of Sovicille, a non-profit association that aims to enhance the places, traditions and resources of the territory of the municipality of Sovicille, Siena (Italy), promoting initiatives among the locals and welcoming tourists.

In a first phase of study of the old site, which I had already have the opportunity to take a look at for Nice Places, I immediately noticed a large amount of content: in-depth descriptions of the places in the area, products and a database with many accommodation facilities.

Content organization

Being by definition a static site that does not provide for interaction with the user, I thought that the best way to optimize this information was to study the composition of URLs to uniquely identify each page. In addition, this would lead to better indexing on search engines and easier sharing on social media.

All URLs of the site have the form:

www.prolocosovicille.it/lang/section/[subsection/]resource

without any numerical indexes or parameters, so as to be as human-readable as possible.

Informations and translations have been organized in a MySQL database.

Articles publication

A CMS (Content Management System) was needed to enable the Pro Loco to publish news and communications about new events. Without any doubt I chose WordPress for various reasons:

• I know it pretty well because I use it for both this blog and the Nice Places blog;
• is written in PHP, my favorite server-side language that I always use;
• is a tool supported by thousands of people, from my point of view (and not only) the best existing CMS.

The only thing I was worried about was writing scripts that would allow me to integrate the articles in the layout of the site, as a sort of ad-hoc theme.

Responsiveness

Internet traffic from mobile has exceeded computer traffic a few years ago, making it mandatory for any site to be mobile-ready.
Using Bootstrap is all easier and only a few tweaks were necessary, but the framework gives me the certainty of having a site that fits every type of screen.

Social sharing

In my opinion, a site that aims both to disseminate historical information and to promote a territory goes very well with the possibility of creating pages optimized for sharing on social networks.

In the meta tags the information on the page has been inserted according to the guidelines of Open Graph, while for the sharing buttons I have relied on AddThis.

Translations management

The site has been translated into four languages: Italian, English, French and German.
Obviously it was unthinkable to create four files for a single page, so I thought of using a simple function

function t(slug){...}

that returned the right translation for the input slug identifier, retrieved from a dictionary. In this way in the source code I only had to write

<?php echo t("slug-parola") ?>

so I only have to make one file for all four versions.

Parallax

I like the parallax effect very much because a three-dimensional aspect flows into a web page, so I decided to implement it in all those pages that have photos accompanied by a description, as is the case for places or accommodation facilities.

Mappa stilizzata

On the homepage there is a map of the places of interest around Sovicille that I made with the HTML5 drawing tools.
It was very challenging to make that map because the only reference I could use was the geographical point, expressed by latitude and longitude, for each single place. I couldn’t use these numbers without any adaptation, since we go from terrestrial coordinates expressed in degrees to terrestrial coordinates expressed in pixels.

The conversion that came out of it was very interesting: I had never faced a similar problem before.

Conclusions

The creation of the new site of the Pro Loco of Sovicille was a long and not easy job, but it gave me the opportunity to better express my vision for this type of websites, where I could make use of all my skills.

Hours of work: about 150.

Here is an introduction article for the new site (in Italian).