Storyboard OT Morzine - OPI · 2019-12-19 · 0.2 05/08/2010 Draft Julien Trombert Inserting the new designs 0.3 20/08/2010 Draft Julien Trombert Updates following meeting with OT

CUSTOMER CONFIDENTIAL

© Procab Studio - All rights reserved. 1 (51)

Storyboard

OT Morzine

Document Owner : Julien Trombert

Function : Project Manager

Approver :

Document ID : Document ID

Version & Status : 0.8 / draft

Classification : Customer Confidential



Change History:

Version Date Status Author/Editor Comments 0.1 14/06/2010 Draft Julien Trombert Initial draft

0.2 05/08/2010 Draft Julien Trombert Inserting the new designs

0.3 20/08/2010 Draft Julien Trombert Updates following meeting with OT on 19th

.

0.4 01/09/2010 Draft Julien Trombert Added info received from Ingénie on hotels XML

0.5 06/09/2010 Draft Julien Trombert Inserted the iFrame code from Ingénie and new XML provided

0.6 20/09/2010 Draft Julien Trombert Added the newsletter and booking iFrame from Ingénie

0.7 27/09/2010 Draft Julien Trombert Inserted the SkiFrance data XML definition

0.8 08/10/2010 Draft Julien Trombert Minor changes following review with the client. Ingénie XML fields defined for accommodation inserted.

Client Approval: Approved by : Maud Chavanne

Function : OT Morzine Director

Date :



This document is intended for the use of Procab Studio customers only for the purposes of the agreement under which the document is submitted, and no part of it may be reproduced or transmitted in any form or means without the prior written permission of Procab Studio. Procab Studio welcomes customer comments as part of the process of continuous development and improvement of the documentation.

This document is considered protected by copyright according to the applicable laws.

Procab Studio logo is a trademark of Groupe Procab SA.

Other product names mentioned in this document may be trademarks of their respective companies, and they are mentioned for identification purposes only.

Copyright © Procab Studio 2010. All rights reserved.



Table of Contents

1. About this document .................................................................................................................... 7 2. References ................................................................................................................................... 7 3. Terms and abbreviations .............................................................................................................. 7

3.1 Terms .................................................................................................................................... 7 3.2 Abbreviations ......................................................................................................................... 7

4. Introduction .................................................................................................................................. 7 5. Operations and processes ........................................................................................................... 7

5.1 Work flow ............................................................................................................................... 7 5.1.1 Design ............................................................................................................................ 7 5.1.2 Storyboard ...................................................................................................................... 8 5.1.3 Development .................................................................................................................. 8 5.1.4 Testing ............................................................................................................................ 8 5.1.5 Customer acceptance ..................................................................................................... 8

5.2 Change management ............................................................................................................ 8 5.3 Interpretations ........................................................................................................................ 8 5.4 Design ................................................................................................................................... 8

6. System architecture ..................................................................................................................... 9 6.1 Technology ............................................................................................................................ 9 6.2 Hosting .................................................................................................................................. 9

7. Roles of the website users ........................................................................................................... 9 7.1 Visitor .................................................................................................................................... 9 7.2 Admin .................................................................................................................................... 9 7.3 Press Admin .......................................................................................................................... 9 7.4 Press User ............................................................................................................................. 9 7.5 Pro Admin .............................................................................................................................. 9 7.6 Pro User .............................................................................................................................. 10

8. Languages ................................................................................................................................. 10 9. Sitemap ...................................................................................................................................... 11 10. Storyboard ........................................................................................................................... 12

10.1 Navigation ........................................................................................................................ 12 10.1.1 Description .................................................................................................................... 12 10.1.2 Layout ........................................................................................................................... 12

10.2 Footer ............................................................................................................................... 13 10.2.1 Description .................................................................................................................... 13 10.2.2 Layout ........................................................................................................................... 14

10.3 Home page....................................................................................................................... 14 10.3.1 Description .................................................................................................................... 14 10.3.2 Layout ........................................................................................................................... 14

10.4 Inner page (Page type) ..................................................................................................... 18 10.4.1 Description .................................................................................................................... 18 10.4.2 Layout ........................................................................................................................... 20

10.5 Découvrez Morzine > Bars et Restaurants ....................................................................... 21 10.5.1 Description .................................................................................................................... 21 10.5.2 Layout ........................................................................................................................... 22

10.6 Découvrez Morzine > Annuaire ........................................................................................ 23 10.7 Découvrez Morzine > Gallery ........................................................................................... 24

10.7.1 Description .................................................................................................................... 24 10.7.2 Layout ........................................................................................................................... 24

10.8 Découvrez Morzine > Visite virtuelle ................................................................................. 25 10.8.1 Description .................................................................................................................... 25



10.8.2 Layout ........................................................................................................................... 25 10.9 Live > Webcams ............................................................................................................... 26

10.9.1 Description .................................................................................................................... 26 10.9.2 Layout ........................................................................................................................... 26

10.10 Live >Actualité > List ........................................................................................................ 27 10.10.1 Description ................................................................................................................ 27 10.10.2 Layout ....................................................................................................................... 28

10.11 Live >Actualité > One news .............................................................................................. 29 10.11.1 Description ................................................................................................................ 29 10.11.2 Layout ....................................................................................................................... 30

10.12 Live > Agenda > List ......................................................................................................... 30 10.12.1 Description ................................................................................................................ 30 10.12.2 Layout ....................................................................................................................... 32

10.13 Live > Agenda > Event ..................................................................................................... 33 10.13.1 Description ................................................................................................................ 33 10.13.2 Layout ....................................................................................................................... 33

10.14 Live > Newsletter .............................................................................................................. 34 10.14.1 Description ................................................................................................................ 34 10.14.2 Layout ....................................................................................................................... 34

10.15 Contact ............................................................................................................................. 34 10.15.1 Description ................................................................................................................ 34 10.15.2 Layout ....................................................................................................................... 35

10.16 Accès ............................................................................................................................... 36 10.16.1 Description ................................................................................................................ 36 10.16.2 Layout ....................................................................................................................... 36

10.17 Organisez votre séjour > Hébergements .......................................................................... 37 10.17.1 Hôtels ........................................................................................................................ 37 10.17.2 Résidences de tourisme ............................................................................................ 38 10.17.3 Chalets et appartements ........................................................................................... 38 10.17.4 Chambres d’hôtes ..................................................................................................... 39 10.17.5 Villages vacances ..................................................................................................... 40 10.17.6 Spécial enfants .......................................................................................................... 40 10.17.7 Hébergements collectifs ............................................................................................ 41 10.17.8 Châlets avec service hôtelier ..................................................................................... 41 10.17.9 Agences immobilières ............................................................................................... 42 10.17.10 Layout .................................................................................................................... 42

10.18 Organisez votre séjour > Remontées mécaniques ........................................................... 45 10.19 Organisez votre séjour > Documentations ........................................................................ 45

10.19.1 Description ................................................................................................................ 45 10.19.2 Layout ....................................................................................................................... 46

10.20 Organisez votre > Idées de séjour .................................................................................... 46 10.20.1 Description ................................................................................................................ 46 10.20.2 Layout ....................................................................................................................... 47

10.21 Organisez votre > Idées de séjour > One particular idea .................................................. 47 10.21.1 Description ................................................................................................................ 47 10.21.2 Layout ....................................................................................................................... 48

10.22 Activités > Activités sportives ........................................................................................... 49 10.22.1 Description ................................................................................................................ 49 10.22.2 Layout ....................................................................................................................... 49

10.23 Activités > Activités sportives > Activity page ................................................................... 50 10.23.1 Description ................................................................................................................ 50 10.23.2 Layout ....................................................................................................................... 50

10.24 Espace presse ................................................................................................................. 51



10.24.1 Description ................................................................................................................ 51 10.24.2 Features .................................................................................................................... 51

10.25 Espace pro ....................................................................................................................... 51 10.25.1 Description ................................................................................................................ 51 10.25.2 Features .................................................................................................................... 51



1. ABOUT THIS DOCUMENT

This document specifies the content of the website to be created, including the site map, the layout and functionalities.

It is used to clarify the client’s requirements so that those are properly implemented by the designers and developers.

2. REFERENCES

Brief site Internet, Offre Internet OT Morzine, Bon pour accord, Workshops and minutes of workshops.

3. TERMS AND ABBREVIATIONS

3.1 Terms

Content Management System

Solution allowing the client to change part of the content of the site without the need to contact Procab Studio.

3.2 Abbreviations

CMS Content Management System DNS Domain Name Server OT Office de tourisme

4. INTRODUCTION

The tourist office in Morzine would like to renew their website at the same time they are updating their marketing identity. The new website has to be simple to use and manage, and reflect the resort positioning. The objectives of the site are to promote the resort, and facilitate the booking of rentals.

5. OPERATIONS AND PROCESSES

The complexity to develop code for new technologies requires a clear process, where the exact functionality of the site has to been frozen before coding it. Therefore, it is nearly impossible to do changes to the requirements while the development is ongoing.

To ensure the quality of our deliverables, we are following a standard procedure described below.

5.1 Work flow

5.1.1 Design

Following the initial preview of the design, we collect comments and do the required modifications. We then deliver an updated version of the design. Additional revisions might be required until the final version approved by the client.



5.1.2 Storyboard

The storyboard, like the design, requires a couple of revisisons to clearly map the requirements of the client and ensure no grey areas are left out. Once the document is finalized it is approved by the client.

5.1.3 Development

During the development phase, a staging server is used and a special URL is given to the client to follow the progress. At the end of that phase, the site is ready for testing.

5.1.4 Testing

Procab executes a complete testing of the site. After that, the client is able to test the site as well and may provide a list of anomalies found based on the approved storyboard. No changes or improvements not defined in the storyboard can be accepted in this phase. When possible errors have been fixed, the site is ready for validation.

5.1.5 Customer acceptance

The client shall verify that the site is working accordingly to the storyboard and approve the delivery.

The client can then request to move the site « live » or to initiate a new project based on changes and new requirements.

5.2 Change management

Once the storyboard is validated by the client, no changes will be possible during the development process. Any change request will be handled at the end of the development phase and those may be invoiced accordingly once agreed by the client.

5.3 Interpretations

Since a particular functionality can be understood differently and because developers are sometimes unable to reverse a technology path taken, it is important that :

- All elements in this document are clearly explained

- In case of a doubt, the client requests the Project Manager to clarify any elements as required

In case of litigation, the developer’s understanding will prevail (within common sense).

5.4 Design

The storyboard is not supposed to contain the graphical design of each page. In fact, it should focus more on defining the functionalities and the layout of each element.

As part of the project team, a web designer will be working on the graphical design of each page of the storyboard, mapping as closely as possible the design validated in the Design phase. The client should contact the Project Manager if he thinks that one element designed is not abiding to the validated design.

Procab Studio is required to make the « Home page » as well as the « Inner page » as close as possible to the design validated by the client.



We welcome the creativity. Hence, if the client would like to modify a graphical element that is however matching the overall site design validated, he can make a change request to the Project Manager to get a quote for it.

6. SYSTEM ARCHITECTURE

6.1 Technology

Platform Apache MySQL PHP Javascript Flash

CMS OpenSource CMS (Drupal) for the website OpenSource CMS (Drupal) for the Press and Pro areas

Front-end Microsoft Internet Explorer 7.x and more Firefox 3.x and more Safari 5.x and more Optimised creen resolution, 1280x1024

6.2 Hosting

The website www.morzine-avoriaz.com will be hosted by Procab Studio.

The tourist office is controlling the domain name and its DNS.

7. ROLES OF THE WEBSITE USERS

7.1 Visitor

A visitor is somone browsing the web pages of the site without any privileges on those.

7.2 Admin

The admin of the website is able to manage the content of the website pages. There is only one admin. He cannot manage the Pro and Press areas though.

7.3 Press Admin

The Press Admin is managing the Press CMS of the website. The Admin is the only one able to upload or edit the content of those pages.

7.4 Press User

A Press User has registered for the press room area and has a login name and password to be authenticated. Once logged in, he is able to access the content inside the Press area in read-only.

A press user account doesn’t need to be approved by the admin before he can use it.

7.5 Pro Admin

The Pro Admin is managing the Pro CMS of the website. The Admin is the only one able to upload or edit the content of those pages.



7.6 Pro User

A Pro User has registered for the pro room area and has a login name and password to be authenticated. Once logged in, he is able to access the content inside the Pro area in read-only.

The Pro user has to be approved by the Pro admin before his account is activated.

8. LANGUAGES

The site will have 2 languages, French and English, french being the default one.

There will be 5 more languages, which content will not be fully translated compared to the main languages. Those are Russian, Dutch, German, Italian and Spanish.

There might be more languages in the future.



9. SITEMAP



10. STORYBOARD

This chapter describes the various pages of the sitemap.

10.1 Navigation

10.1.1 Description

The navigation menu is at the top of the page, providing an easy access to the content of the website.

10.1.2 Layout

1 Logo The logo is acting as a link to go back to the homepage in the current language.

2 Social icons There are few social icons available. Facebook, Morzine account name is http://www.facebook.com/pages/Morzine-Avoriaz/136545666382257 Twitter, Morzine account name is http://twitter.com/morzine_avoriaz YouTube, Morzine account name is http://www.youtube.com/user/OTMorzineAvoriaz RSS, the feed of the news created on this site (Actualité) http://www.morzine-avoriaz.com/news.rss Email, a script to email the page to a friend

3 Search engine This search box is looking for pages on the website containing the words entered

4 Language switcher To switch between the available languages. By default, set to French.

1

6

2 3 4 5

7 8

9

http://www.facebook.com/pages/Morzine-Avoriaz/136545666382257

http://twitter.com/morzine_avoriaz

http://www.youtube.com/user/OTMorzineAvoriaz

http://www.morzine-avoriaz.com/news.rss



5 Season switcher To switch between the winter and summer themes of the site. The homepage will exist in 2 themes, summer and winter. The content of the page will be the same for both seasons.

CMS: The default starting season will be defined in the back-end so that the admin can change it manually.

6 Top menu The top menu is the level 1 of the navigation as defined in the sitemap. When moving the mouse over the menu, the sub-menu appears. CMS: Its content cannot be edited by the admin.

7 Sub-menu The list of entries in the sub-menu, meaning the level 2 of navigation as defined in the sitemap. When the user clicks on a sub-menu entry, he is taken to that page. CMS: Its content cannot be edited by the admin

8 Sub-menu content For each entry of the sub-menu, an image and short description is displayed. When the user clicks on the image or text, he is taken to that page. CMS: The rich menu cannot be edited by the admin.

9 Booking sub-menu The sub-menu of the booking menu (réservez) opens a form provided by Ingénie. Upon validating the form, the user will be taken to the Ingénie booking website. The iFrame for this Ingénie module is http://www.resa-morzine.com/moteur_recherche_resa.php

10.2 Footer

10.2.1 Description

The footer is common to all pages and contains some general links and information.



10.2.2 Layout

1 Footer The footer contains the copyrights and some shortcuts to pages in the website. Logo Morzine-Avoriaz -> link to http://www.morzine.com Logo Portes du Soleil -> link to http://www.portesdusoleil.com Plan du site -> link to the sitemap Partenaires station -> link to the resort partners page Press - > link to the Press and Media extranet Pro -> link to the Pro extranet Mentions légales -> link to the Terms of the site Website by procabstudio -> link to http://www.procab.ch

10.3 Home page

10.3.1 Description

The homepage contains some dynamic content with links to particular areas of the website.

There are 2 versions, one for each season, though the content is mostly the same.

10.3.2 Layout

1 Background The background image is spécifique to the season theme.

1

2 3

4

5 6 7

1

http://www.morzine.com/

http://www.portesdusoleil.com/



There is one for the summer and one for the winter. It shall be big enough to fill the whole screen on high display resolution

2 Video The video on the homepage auto-start on page load. There are 5 possible videos for the summer and 5 for the winter. On each page load, a random video for that season is played. The flash player allows the user to pause or mute the video. CMS : The admin is able to add/edit/remove the videos to play for each season.

3 Live info When moving the mouse over those tabs, a box appears revealing the info related to that topic. That info is updated daily at http://www.skifrance.org/XML/stations/distri_Neige_2010_740028.xml (french data) http://www.skifrance.org/XML/stations/distri_Neige_2010_740028_a.xml (english data)

Weather forecast

Using an accordéon effect, the weather for the current day and the next day is displayed. The information displayed are:

Name XML field

A weather icon based on the text value in the file (small next to date and big in the details section)

<Observation>

Temperature at bottom Wind at the bottom and direction

<TempBas> <VitVentBas> <DirVentBas>

Temperature at the top Wind at the top and direction

<TempHaut> <VitVentHaut> <DirVentHaut>

Temperature at midday <TempPrevueMidi>

Measured at <TemperatureEtVent Heure="HH:MM">

Weather icon for the next day based on the text value

<Tendance>

Webcams

http://www.skifrance.org/XML/stations/distri_Neige_2010_740028.xml

http://www.skifrance.org/XML/stations/distri_Neige_2010_740028_a.xml



Using an accordéon effect, the available live webcams are displayed. A live webcam is a picture located on a remote server and refreshed regularly. Clicking on a webcam image or name is opening it in full size in a layer. The webcams and their names are: Grand Pré, http://www.pleney.com/webcam/grandpre.jpg Nyon Haut, http://www.pleney.com/webcam/nyonhaut.jpg Pléney Haut, http://www.pleney.com/webcam/pleneyhaut.jpg Pléney Bas, http://www.pleney.com/webcam/pleneybas.jpg “Toutes les webcams” is a link to go to the webcams page. Snow and domain reports The data are provided also in the SkiFrance XML file.

Using an accordéon effect, the “bulletin neige” (snow report) or “ouverture des pistes” (domain report) are displayed. Bulletin neige (snow conditions) is only in the winter theme and contains the following data:

Name XML field

Snow at top <HauteurHaut>

Snow at bottom <HauteurBas>

http://www.pleney.com/webcam/grandpre.jpg

http://www.pleney.com/webcam/nyonhaut.jpg

http://www.pleney.com/webcam/pleneyhaut.jpg

http://www.pleney.com/webcam/pleneybas.jpg



Latest snow fall <DerniereChute>

Ouverture des pistes contains the following data:

Name XML field

Opened lifts / Total lifts <Ouvertes> / <Totales>

Opened slopes / Total slopes <OuvertesTotal> / <TotalPistes>

Green slopes Blue slopes Red slopes Black slopes

<OuvertesVertes> <OuvertesBleues> <OuvertesRouges> <OuvertesNoires>

Snowparks <SnowparksOuverts> /<TotalSnowparks>

Liaison Portes du Soleil <LiaisonDomaine>

KM prepared for nordic skiing (classic) <KmPistesOuverts>

KM prepared for nordic skiing (freestyle) <KmSkatingOuverts>

KM prepared for pedestrians <kmPietonsOuverts>/<kmPietons>

KM prepared for snowshoe walking <kmRaquettesOuverts>/ <kmRaquettes>

Access conditions The data are also provided inside the SkiFrance XML file.

This box contains a text about the road conditions and a link to the Access page.

Name XML field

Road conditions <EtatRoutes>

4 Banner This banner is an image slide show where each image links to the associated “Idées de séjour” (vacation ideas) pages. There is one version of that slide show for the winter and one version for the summer. CMS: The slideshow is dynamic and based on the vacation ideas created for that season.

5 Latest news The latest news box is automatically sliding over the latest 5 news. It is possible for the visitor to manually go forward and backward too using the arrows. When clicking the image or text, the user will be taken to that particular news.



CMS: The content is dynamic and based on the latest news created.

6 Latest deals The latest deals box is automatically sliding over the existing deals. It is possible for the visitor to manually go forward and backward too using the arrows. When clicking the image or text, the user will be taken to the associated URL. CMS: The admin is able to add/edit/delete deals. For each deal, the admin will enter an image, a short text and an URL.

7 Accommodations When moving the mouse over the “Accommodations” box (Hébergement), the box will expand.

When clicking on one of those links inside the box (e.g. hotels), the user will be taken to the accommodation search page, with the accommodation type filter set to the clicked one. The content of that box cannot be edited by the admin.

10.4 Inner page (Page type)

10.4.1 Description

This page is a typical inner page of the website.

It is the standard design used for most of the pages on the site.

Pages based on this template are:

o Découvrez Morzine > Village

o Découvrez Morzine > Avoriaz

o Découvrez Morzine > Partenaires

o Découvrez Morzine > Labels

o Live > Newsletter

o Live > Jeu-Concours

o Plan du site

o Mentions légales

o Organisez votre séjour > Morzine reservation



o Organisez votre séjour > Handitourisme

o Organisez votre séjour > Séminaires

o Organisez votre séjour > Remontées mécaniques

o Prestataires d’activités

o Activités en hiver > Activités en famille

o Activités en hiver > Activités en famille > Tout-petits

o Activités en hiver > Activités en famille > Enfants

o Activités en hiver > Activités en famille > Ados

o Activités en hiver > Activités en famille > Familles

o Activités en hiver > Visites et découvertes

o Activités en hiver > Bien-être

o Activités en hiver > Cinémas

o Activités en été > Multipass

o Activités en été > Activités en famille

o Activités en été > Activités en famille > Tout-petits

o Activités en été > Activités en famille > Enfants

o Activités en été > Activités en famille > Ados

o Activités en été > Activités en famille > Familles

o Activités en été > Visites et découvertes

o Activités en été > Bien-être

o Activités en été > Cinémas



10.4.2 Layout

1 Image The image is specifique to the page. The image size is NxN pixels. CMS: the admin is able to specify an image for each page of the site (both standard and special pages).

2 Breadcrumb The breadcrumb indicates to the visitor, where he currently is in the site. Its structure is “home > level 1 > … >page title” The page title is blue in the winter and green in the summer.

3 Content The content can be composed of paragraph headers, emphasized text, colored text, basically formatted text. CMS: the admin is able to edit the content of the page with a WYSIWYG editor. The key formatting (e.g. header) are defined.

1

2

3 4

5



4 1st box (optional) A box is composed of a title and some texts. The box is only displayed if the content for it is defined. CMS: as part of the page management, the admin is able to add/edit/remove for it: - a title - a limited formatted text

5 2nd box (optional) A box is composed of a title and some texts. The box is only displayed if the content for it is defined. CMS: as part of the page management, the admin is able to add/edit/remove for it: - a title - a limited formatted text

10.5 Découvrez Morzine > Bars et Restaurants

10.5.1 Description

This is a search page, with parameters to filter the list of bars and restaurants and their location. It is possible to see the results on a map.

The list of bars and restaurants will be imported as an XML file. Geo-coordinates will be based on Google Maps coordinates (lat., long.).

The XML file is provided by Ingénie and is stored at http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=T

The XML file is imported everyday at 6am into our local database.

XML definition:

Description Name of the field

Summer picture URL

Winter picture URL

Name <descriptif langue="FR"><libelle>

Short description

Phone number <telephone>

Email address <email>

Website URL <siteweb>

Is a bar

Is a restaurant

http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=T

http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=T



Is in the resort

Is in altitude

Lattitude <latitude>

Longitude <longitude>

10.5.2 Layout

1

2 3

4



1 Map Google Map displaying the results of the list The map can be collapsed to maximize the space of the results below.

2 Search engine The search engine allows filtering of the results. The user can select: - Bars and/or restaurants - In the resort and/or in the mountain Or the user can search for a particular place by name with a text search field. That search box can be collapsed to see better the map.

3 Pointer The pointer indicates the position of a place on the map. Clicking on it will display an info bubble. That bubble contains a link to take the user down to that establishment in the list (same as for accommodations).

4 Results The results are listed in a random order.

A Picture There is one version for the winter theme and one for the summer theme

B Name The name of the place

C Short description A short text.

D Contact details A phone number and an email address

E Icons To indicate if it is a bar, a restaurant or both.

F View on map When clicking this button, the user is taken to the map, where the window for that place is opened and the marker highlighted (same as on hotels page)

G Link URL of the website, appears only if defined.

10.6 Découvrez Morzine > Annuaire

This page is based on the standard page template.

This page contains a directory file downloadable as a PDF or browsable online inside a PDF viewer.

The online PDF viewer solution from Google, Issuu (http://issuu.com/) or Scribd (http://www.scribd.com/) will be used.

A B

C F

E

D G



10.7 Découvrez Morzine > Gallery

10.7.1 Description

The gallery is a photo viewer.

There are 2 versions of the picture. There is one visible in the viewer and one downloadable. The concept is that the one in the viewer might contain some marketing text, while the downloadable one would be clean and in a higher resolution.

The pictures in the viewer are moving like a slideshow but the user is able to change those manually too.

There is a share script to quickly post the clean image onto a Facebook or Twitter account.

10.7.2 Layout

1 Viewer The image is displayed into the viewer in the right size (NxN pixels). When bringing the mouse over the viewer, the share script is triggered. CMS: the admin can add/edit/delete the images available in the viewer. For each image, the admin shall enter: - An image for the viewer (in the right dimension)

1

2 3

4 4



- A downloadable image file (optional)

2 Visual counter Indicates which one of the images the user is currently viewing.

3 Download button This button is visible only if there is a downloadable version of the image available. With this button, the user can download the associated image.

4 Back and forward To go back and forth in the viewer.

10.8 Découvrez Morzine > Visite virtuelle

10.8.1 Description

This page contains an existing flash application to view 2 landscapes in an interactive way. The flash applications are re-used as such.

There will be one version of the page for the summer and one version for the winter, where only the flash applications displayed will be different.

10.8.2 Layout

1 1st flash application This flash application presents the ski domain For the summer version, the flash application can be taken from http://www.valleedaulps.com/gigapixel-ressachaux.html

1

2



2 2nd flash application This flash application presents the village

10.9 Live > Webcams

10.9.1 Description

This page is showing the webcams available.

10.9.2 Layout

1 Standard webcams There are 4 webcams (already explained in the home page chapter). On each webcam live picture, there is an overlay with the name of the webcam. When the user clicks on a webcam, that image opens in full size in a layer.

1

2



CMS: It is possible to edit the name and the URL of those webcams from the backend.

2 360° webcams The 360° webcams are located on a different website and therefore open in a different window. The overlay is part of the image, which is static. The URL of those webcams are: - Portes du soleil, http://portesdusoleil.livecam360.com/ - Avoriaz, http://livecam.avoriaz.com/ CMS: The admin is able to edit the image, the text and the URL associated to those images.

10.10 Live >Actualité > List

10.10.1 Description

This page contains the latest news published by the admin. This is a dynamic list, ordered with the latest news at the top.

When clicking on a piece of news in particular, the user is taken to the full story.

The RSS icon, in the navigation menu at the top, allows a visitor to register to that news feed.

CMS : the admin is able to add/edit/delete news. For all news, he shall enter the following details:

- A picture (will be saved in 2 sizes for the news page and the home page)

- A title

- A short text (for the listing page)

- A very short text (for the home page)

- A full story text (using a simple WYSIWYG editor)

http://portesdusoleil.livecam360.com/

http://livecam.avoriaz.com/



10.10.2 Layout

1 Image This is the main picture of the news. The day and the month of the publication date is added into a bubble over it. Clicking on the image takes the user to the full story.

2 Title and short story The title and a short intro to the news. It is a plain text. Clicking on the title or the text will take the user to the full story.

3 Share The share button allows the visitor to publish this news on the main social networks. It is using the ShareThis script from http://sharethis.com/

4 Archives The archive is grouping the news based on the publication dates. There is one archive per month.

5 Newsletter This is an introduction text to the newsletter with a field to enter its email address.

1

2 3

4

5



The newsletter solution is based on Ingénie tool. An example code from Ingénie is: <form method="post" name="pre_form_newsletter" action="http://form.resa-morzine.com/formulaire_newsletter.php"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><input onfocus="this.value=''" value="e-mail" name="mel" type="text"></td> <td><input name="Submit" value="Je m'inscris" type="submit"></td> </tr> </table> </form>

After entering an email and pressing the “ok” button, the user is taken to the newsletter registration page, which is an iFrame provided by Ingénie. Ingénie will give us the “post” command to use to pass on the email address between the registration field and the form. Upon registration, the user is added in Ingénie newsletter solution.

10.11 Live >Actualité > One news

10.11.1 Description

News can contain text, images, flash videos (from your YouTube Channel e.g.) or PDF files.



10.11.2 Layout

1 Full story The full story is a rich text and can contain links, images, videos, …

2 Back button To return to the list of news

10.12 Live > Agenda > List

10.12.1 Description

The agenda is the list of upcoming events in the resort.

It is based on a search engine to retrieve a list of events. It is then possible to open an event to see all its details by clicking on its title or the “plus d’infos”.

1

2



The events are imported in our local database from the Ingénie system based on a daily import. The pictures are stored on the Ingénie server and called from the website.

http://genius2morzine.ingenie.fr/webservices/informations/prestations/export.php?organisme=63 &type_prestataire=Y& publiable=O&date_ouverture=a_venir

XML definition:

Description Name of the field

Start date

End date (optional)

Name of the event

Short description

Long description

Free or not

Category

Image (optional)

Highlight box title (optional)

Highlight box text (optional)



10.12.2 Layout

1 Search engine The search engine is used to filter the list of upcoming events. It is possible to select a category to filter the list. There is also a date filter to define the periode to display. By default, Categories are set to “all” and the date is set from today till D+14 days. The categories are: - …

2 List of events All the events returned are displayed in chronological order (i.e. first upcoming event at the top). If there are no events returned, display a notification text “There are no events for those dates”.

For each event, the user will see: - a name - a date - a short description

1

2

3



- an indication if the event is free or not

3 Main events The main events are featured as a slide show. It is possible to control the show with the < and > buttons. When the user clicks on an event, he is directed to the associated URL (can be an external URL or the URL of the event full details page). Size of an image is NxN CMS: The admin is able to add/edit/delete the main events to promote in this boxe. For all events, he enters an image and an associated URL to point to.

10.13 Live > Agenda > Event

10.13.1 Description

This is the page with all the details for an event. The user will see this page when clicking to see more details on an event in the list or on a promoted event banner.

10.13.2 Layout

1 Event details Include all the details related to that event. It can contain rich text with links or downloadable PDF files.

1 2

3



2 Image (optional) This is an image related to the event. The width is fixed by the design.

3 Box (optional) This box is used to highlight some important elements of the event. It might contain rich text.

10.14 Live > Newsletter

10.14.1 Description

The newsletter page is an iFrame connected to Ingénie newsletter solution.

There is an introduction text before the iFrame.

The iFrame is http://form.resa-morzine.com/formulaire_newsletter.php

CMS: The introduction text can be edited by the admin.

10.14.2 Layout

The layout is a standard page template that contains an introduction text followed by the iFrame.

10.15 Contact

10.15.1 Description

The contact form is based on an iFrame of the Ingénie CRM solution

http://form.resa-morzine.com/formulaire_documentation.php?langue=FR

or

http://form.resa-morzine.com/formulaire_documentation.php?langue=UK

http://form.resa-morzine.com/formulaire_documentation.php?langue=FR



10.15.2 Layout

1 Details The operating and contact details. CMS: This can be edited by the admin.

2 Map A google map image indicating the location of the Tourist office in Morzine. Clicking on it will open Google Map for this location in a new tab.

3 Form The Ingenie iFrame links to their CRM solution.

1 2

3



10.16 Accès

10.16.1 Description

The access page describes the various ways to get to Morzine (car, plane, train) and related information.

The access “By Car” should include a box to enter the starting point and upon submission will open a Google Map page with the itinary.

10.16.2 Layout

1 Access Map (optional) This map is a picture describing the way to get to Morzine with that particular kind of transport. CMS: It is possible to edit or remove the image.

2 Details This is the detailed explanation on how to get to Morzine. It might contain links to public transport websites e.g. CMS: This rich text can be edited

3 Highlight (optional box) This box is used to put forward some important information, such as the list of local

1

2

3

4



taxis. CMS: It is possible to enter a title and a basic formatted text for that box.

4 Itinerary (By car access only) This form allows the user to get the Google Map itinerary from his entered location. He enters his starting place and upon validation a new window opens from Google Map giving the direction from that starting point all the way to Morzine. E.g. http://maps.google.com/maps?f=d&source=s_d&saddr=Paris&daddr=Morzine&hl=en

10.17 Organisez votre séjour > Hébergements

This page is a search engine to find accommodations based on some criteria.

The accommodations are imported daily in our local database from an XML provided by Ingénie. The images of those accommodations remain on the Ingénie server.

10.17.1 Hôtels

The XML file for hotels is located on Ingénie server at http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=H&publiable=O

Description XML field

Category <code-critere>CATEG</code-critere><code-valeur-critere>

00E -> Sans Étoile

0E -> Non homologué

1E -> 1 star

2E -> 2 stars

3E -> 3 stars

Summer picture URL <media type="Image"> <theme>ETE</theme><url>

Winter picture URL <media type="Image"> <theme>HIVER</theme><url>


Short description <descriptif langue="FR"><pave num="1"><contenu>

Phone number <telephone>

Email <email>

Website URL <siteweb>

Booking URL

Google Map <latitude> and <longitude>

http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=H&publiable=O

http://genius2morzine.ingenie.fr/webservices/informations/prestataires/export.php?organisme=63&type_prestataire=H&publiable=O



Services See table below

Services

Chambre + Petit déjeuner

<code-critere>EQUIP</code-critere><code-valeur-critere>CHPD

Coin cuisine <code-critere>EQUIP</code-critere><code-valeur-critere>CHCC

Restaurant <code-critere>EQUIP</code-critere><code-valeur-critere>RESTA

TV <code-critere>EQUIP</code-critere><code-valeur-critere>TVCH

Ascenseur <code-critere>EQUIP</code-critere><code-valeur-critere>ASCEN

Piscine <code-critere>EQUIP</code-critere><code-valeur-critere>PISCIN

Piscine couverte <code-critere>EQUIP</code-critere><code-valeur-critere>PISCOU

Remise en forme / Massage

<code-critere>EQUIP</code-critere><code-valeur-critere>MASS

Salle de culture physique

<code-critere>EQUIP</code-critere><code-valeur-critere>CULPHY

Jacuzzi <code-critere>EQUIP</code-critere><code-valeur-critere>JACCUZ

Sauna / Hammam <code-critere>EQUIP</code-critere><code-valeur-critere>SAUNA OR <code-critere>EQUIP</code-critere><code-valeur-critere>HAMMAN

Tennis <code-critere>EQUIP</code-critere><code-valeur-critere>TENNIS

Squash <code-critere>EQUIP</code-critere><code-valeur-critere>SQUASH

Equitation <code-critere>EQUIP</code-critere><code-valeur-critere>EQUITA

Bowling <code-critere>EQUIP</code-critere><code-valeur-critere>BOWL

Accès Handicapé <code-critere>EQUIP</code-critere><code-valeur-critere>HANDIC

Wifi <code-critere>EQUIP</code-critere><code-valeur-critere>WIFI

Animaux non acceptés

<code-critere>ANIMAU</code-critere><code-valeur-critere>NACCEP

Garage <code-critere>PARKIN</code-critere><code-valeur-critere>PGA

Multi Pass <code-critere>MPPDSH</code-critere><code-valeur-critere>MP…

10.17.2 Résidences de tourisme

The XML file for residences is located on Ingénie server at

The same data as for hotels are available.

10.17.3 Chalets et appartements

The XML file for accommodations is located on Ingénie server at http://genius2morzine.ingenie.fr/webservices/informations/prestations/export.php?organisme=63 &type_prestataire=G&publiable=O


Category <code-critere>CATEGG</code-critere><code-valeur-critere>

G1E -> 1 star

G2E -> 2 stars



G3E -> 3 stars

G4E -> 4 stars

G5E -> 5 stars

Summer picture URL

Winter picture URL


Short description <descriptif langue="FR"><pave num="1"><contenu>

Phone number

Email

Website URL

Booking URL

Google Map <latitude> and <longitude>

10.17.4 Chambres d’hôtes

The XML file for guest houses is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Booking URL

Multi Pass

Google Map



10.17.5 Villages vacances

The XML file for holiday clubs is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Booking URL

Multi Pass

Google Map

10.17.6 Spécial enfants

The XML file for Special for kids is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Booking URL

Multi Pass

Google Map



10.17.7 Hébergements collectifs

The XML file for Collectivity accommodations is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Booking URL

Multi Pass

Google Map

10.17.8 Châlets avec service hôtelier

The XML file for Catered chalets is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Booking URL

Multi Pass

Google Map



10.17.9 Agences immobilières

The XML file for real estate agency is located on Ingénie server at


Summer picture URL

Winter picture URL

Name

Short description

Phone number

Email

Website URL

Google Map coordinates

10.17.10 Layout

Below is the layout for hotels.

A similar layout will be used for other accommodation types, though less details will be displayed.



1 Search engine The search engine allows a filtering of the list of accommodations both on the map and in the listing below. Type field The first field is the type of accommodation. While no type has been selected, no accommodations are displayed. Instead a text is inviting the user to select some parameters. The options are:

- Hotels - Châlets et appartements - Agences immobilières - Chambres d’hôtes - Résidences de tourisme - Villages vacances - Spécial enfants - Hébergements collectifs - Châlet avec service hotelier

If the user clicked on one particular type from the accommodations box on the

2

1

3



homepage, it will be preset in the filter here. Category field The second field is the accommodation category. It only applies to the “hôtels”, “châlets et appartements” and “résidences de tourisme” types. It will not be displayed for the other accommodations type. The options for hotels and residences are:

- 3 étoiles - 2 étoiles - 1 étoile - Sans étoile - Non homologue - Tous

The options for chalets and appartements are:

- 5 étoiles - 4 étoiles - 3 étoiles - 2 étoiles - 1 étoile - Tous

It is set by default to “Tous”. Text field There is a text field to make a search based on the accommodation name. Multi Pass switch If set to “Non” (No), accommodations with and without this service are shown. If set to “Oui” (Yes), only accommodations with this service are shown. By default, it is set to “No”. A click on the “-“ button will collapse the search box.

2 Map of results The map is displaying the results of the accommodations matching the search criteria based on their Google Map coordinates. When a pin is clicked on the map, the associated accommodation bubble appears. A link in the bubble takes the user to that accommodation in the list below. It is possible to minimize the map.

3 List of results The list of results is ordered randomly. When clicking the “view on the map” button, the name or the picture of an accommodation, the user is taken to the map where the associated pin gets opened. If the map was collapsed, it is opened again. For each entry in the list, is displayed: - an image (there is one for the summer and one for the winter) - a name - a short description (in the correct language) - a phone number (optional) - an email (optional) - a website button (not shown if URL empty) - a booking button (not shown if URL empty) - a list of icons to describe the services provided with a mouse-over tooltip (for



hotels and residences only)

10.18 Organisez votre séjour > Remontées mécaniques

This page is using the standard page templage.

However, the content of the page is contextual as different in the winter and in the summer themes.

CMS: the admin is able to edit the content for the summer and the winter pages.

10.19 Organisez votre séjour > Documentations

10.19.1 Description

This page allows the user to browse, download or order various documentations.

The content of the page is an iFrame from the Ingénie solution.

http://form.resa-morzine.com/formulaire_contact.php?langue=FR

or

http://form.resa-morzine.com/formulaire_contact.php?langue=UK



10.19.2 Layout

1 iFrame for documentation The iFrame provided by Ingénie.

10.20 Organisez votre > Idées de séjour

10.20.1 Description

This page is presenting some holiday suggestions.

There is one version of the page for the summer and one version for the winter.

1



10.20.2 Layout

1 Ideas The dynamic list of ideas available for that season

2 Text An introduction texte for that page. CMS: The admin can edit this text.

3 Links to ideas The dynamic list of ideas available for that season as thumbnails

10.21 Organisez votre > Idées de séjour > One particular idea

10.21.1 Description

When the user has selected a particular idea, either from the left list or from the thumbnails list, he is taken to that particular idea page.

1

2

3



10.21.2 Layout

1 Title and description text The title of the idea and a description text for it.

2 Image An image to illustrate that idea. The width is fixed by the design of the page.

3 Links to activities Each thumbnail has an associated link to an activity page or an external page.

CMS : The admin from the back-end is able to add /edit /delete holiday ideas.

For each idea, the admin defines:

- The season it applies to (can be summer or winter)

- The banner for it to be used in the homepage animation (See homepage chapter)

- The thumbnail to be used in the list of ideas page (see previous chapter)

- A title

- A description text

- An image

- One or many thumbnails with associated link (can be internal or external links)

1 2

3



10.22 Activités > Activités sportives

10.22.1 Description

There is one page for the summer activities and one page for the winter activities, but both are visible no matter the activated season theme.

On this page, the user can see the list of possible sports activities either from the left list or from the thumbnails list.

Some activities contain some sub-pages, e.g. VTT.

10.22.2 Layout

1 Activities list Dynamic list of existing activities. When clicking on a parent, the group expands and the content of the parent page is displayed. It is then possible to click on the child pages inside that group. The activity groups for now are: - Summer: VTT, Randonnées - Winter: Ski and Snowboard, Ski de fond

2 Thumbnails of activities The dynamic list of thumbnails for the activities. In case of a group of activities, only

1

2



the thumbnail of the parent is used and clicking it will display the content of that parent page.

10.23 Activités > Activités sportives > Activity page

10.23.1 Description

This page is used to describe a particular activity.

10.23.2 Layout

1 Title and description The name of the activity and a description text for it.

2 Image slideshow There can be multiple images visible as a slideshow.

3 Key points (optional) The admin can choose to display a box with key points. It has a title and a basic formatted text.

CMS : The admin is able to add/edit/delete activities from the back-end.

There are different activities for the summer and for the winter.

For an activity, the admin shall enter the following details:

1 2

3



- The season it applies to (can be summer or winter)

- The thumbnail for it to be used in the list of activities page (see previous chapter)

- A title

- A description text

- Up to 8 images to be used as a slideshow

- Optionally a box title and formatted text

It is possible to define the order of the activities in the list.

10.24 Espace presse

10.24.1 Description

The Press area is using a separate CMS to manage the content available to the press people.

10.24.2 Features

To access the press area, the visitor has to register first and validate his email to activate his account. After that he is able to browse that extranet.

There will be one homepage with intro text and contact details.

There will be a gallery page that can contain many albums and inside that album either images or PDF files.

10.25 Espace pro

10.25.1 Description

The Pro area is using a separate CMS to manage the content available to the industry professional.

10.25.2 Features

To access the press area, the visitor has to register first. Then the pro admin will review the account and activate it. After that he is able to browse that extranet.

There will be one homepage with intro text and contact details.

There will be a gallery page that can contain many albums and inside an album either images or PDF files.

There will be a “Tarif” page with downloadable documents related to prices.

Documents

Storyboard OT Morzine - OPI · 2019-12-19 · 0.2 05/08/2010 Draft Julien Trombert Inserting the new designs 0.3 20/08/2010 Draft Julien Trombert Updates following meeting with OT