With the exponential growth of new technologies, the real world is

experiencing a strong virtualization: from the cafeteria to the barber’s

shop, everything has a webpage.

We have tried to imagine how the internet of the future will likely be,

starting from the look of a normal website to build something new,

closer to reality. Here is how we tried.

• Overview
• Support
• Design
• Technologies
  • Development dependencies
  • Dependencies
• Development cycle
• Our mission is to make the world part of the web
• Join the team

<p align="center" height="50%" width="100%">

  <img src="src/assets/README.gif">

The project was aimed at producing a site that uses the third dimension

to create a realistic effect.

Opening the site, we will find three-dimensional models on the screen

that represent the main monuments of the workers' village of Crespi

d’Adda.

Moving the mouse or a finger over the models, a container will appear at

the bottom of the screen, above which is written the name of the

monument plus a short description.

Clicking on the container, shows a page with 360° photos and some

information about the monument.

In the top right corner, there is a button with the icon "?". Here, you

can find some information about the project.

The development of the application started in October 2018. From the

outset, we have been decided to produce a free application that could

run on any device. And for this purpose, what could be better than the

web?

Infact, unlike classic applications (eg PowerPoint for Windows),

websites work the same way, on any device, directly from the browser,

without requiring the installation of additional content.

To build a modern application has been one of the project goals.

Inspired by the rounded frames of the new mobile devices, the site has

circular buttons and text boxes without edges; the design of the site

uses a white background, to provide a visually light user experience.

It was thought to enhance a fundamental, often overlooked, feature of

today's sites: typography.

The choice of the character fell on the sans serif interface Helvetica

Neue. Iconic and widely used in the web, Helvetica is a font with modern

lines, a feature that makes it easily readable and adaptable to any

situation.

The strength of the project are the technologies used. We have selected

among the most modern and fast, to produce a latest generation product.

Here is a brief description of how dependencies work.

- Git and Github: version control system.

- Node.js: package manager and code executor on the local platform;

- Webpack;

- Eslint: validates the correct code formatting;

- Babel: translates the developed code into a version supported by all

devices;

- Prettier: format the code before saving;

- Travis CI: continuous integration system;

- React;

- Redux;

- Three.js;

- Styled-Components;

The tools that stood out in the development process were certainly the

version control system (Git and Github) and the continuous integration

system (Travis CI).

Git has permitted to keep us track of the code development along the

project course.

This tool has the role of executing the code in a remote machine in

order to verify the correct code behavior.

Dependency management was entrusted to Node.js which, in addition to

downloading and managing development dependencies, was responsible for

executing the code.

The project, during the development phase, is compressed by Webpack:

this component compacts the contents of the project files, to create a

single file.

To meet the needs of each browser, Babel.js was used to compile the

code; in fact, Babel carries out a fundamental task in the development

of React: without it, it would not be possible to read the syntax of the

Jsx tags.

The entire project is based on React, the framework used to write Html,

in javascript files. Besides the possibility of interacting with the

Html coding, using the logical constructs of a programming language,

React allows to build the entire project on a single page (unlike normal

sites), this speeds up the application behavior, as the content to be

displayed is dynamically loaded based on the request provided by the

user.

At a higher level, you can find Three.js, a webgl based library, api

that allows you to interact with browser graphics.

The role of this component is to provide and manage the visualization of

three-dimensional models.

Working on the development of the application made it possible to learn

new technologies by providing new tools and points of view farther from

the school environment: alike as the search for online documentation and

the importance of community support (eg Medium, Stackoverflow).

Nevertheless, learning programming topics was not the ultimate goal of

the project.

Infact, projects like this are where the entrepreneurial attitudes of

the individual emerge, to encourage individual creativity and to support

the group.

To bring the project to its final stage it was necessary to coordinate

and interact with different groups (photos and videos, modellers, texts,

to name a few).

Finding the right technologies and being able to apply them has required

the ability to select sources, in an environment full of information

such as the internet.

All this has been shaped by a vision aimed at offering a product

destined to involve young generations, through a new and bilateral

method, similar to the interaction with a real object, a missing

sensation in today's Internet.

Making the world part of the web is the leitmotiv of the project.

We have ventured into this difficult but exciting adventure, to allow

anyone the opportunity to visit, from the comfort of the home’s sofa, a

UNESCO site of undoubted interest.

git clone https://github.com/visionn/crespi
yarn
yarn start