Description of the Project This Web Project Is for Sport Complex Where the Kadetten Handball Club Is Playing

Project owner Homepage address: www.bbcarena.ch

Project manager: Patrick Sassine Email: [email protected] Skype: moussepipi_sassine Mobile: 0041 79 240 90 61

Server information WP Adresse: www.bbcarena.com/wp-admin Login: ID: cisin team Pass: On-web-2015

FTP: bbcarena.com kadetten_042806 ar-web-2015

When the new website is finished, we will transfert the main url “bbcarena.ch” on the webserver.

Description of the project This web project is for sport complex where the Kadetten Handball club is playing

• Creating a Website to present the location and services from the BBC Arena. • The BBC Arena wants to Update the new homepage by them self. It is imperative that the content/navigation/page/picture/pdf of the homepage are easy to update, without HTML skills. • Responsive design for Mobile and Tablet Website • Multilingual page (actually German, new in English) • The homepage have to be programmed for SEO optimization • Fast loadingpage, Increase load speed of the website page in max 2 sec • New Design Templates http://www.bbcarena.com/design2/index.html • Implementing Google Virtuatour http://www.virtuelletour.ch/tourdash

1 Flowchart

2 Quick Overview CIS: CMS: Is allready installed on www.bbcarena.com/wp-admin Patrick Sassine: We will send you: PSD Screen Design for Web CIS: set the Plug-in like total cache CIS: creating responsive design for tablet and mobile CIS: creating functionality for update easily in Wordpress CIS: creating functionality for update easily the calendar on WP and Facebook, Twitter and Google+ CIS: creating CSS Templates for homepage, category page, calendar page and content page for web, tablet and mobile CIS: Implement CSS Templates for web, tablet and mobile CIS: Creating 78 pages corresponding to the flowchart Patrick Sassine: Creating content Patrick Sassine: Implement content CIS – Patrick Sassine: Test and Update

Detail description CMS Wordpress: Install CMS Wordpress on the Server www.behr.ch

System The Website should be be compatible for PC and Mac

Tablet System The Tablet optimized Website should be compatible on following System and upwards: - Ipad iOS Version: 5.0 - Android Version: 4.0 - Windows tablet: 8 -

Mobile System The Mobile optimized Website should be compatible on following System and upwards: - Iphone iOS Version: 4.3 - Android Version: 4.0 - Windows Phone: 7.10.8107.79

Web, Tablet The Website should be compatible on following Browser and and Mobile upwards: Browser Firefox from Version: 17.0 Explorer from Version: 10.0 Safari from Version: 6.0 Chrom from Version: 17.0 Opera from Version: 12.00 SeaMonkey from Version: 2.8 Maxthon from Version: 4.0 Lunascape from Version: 6.8.2 Iron from Version: 23.0

Install plug-In: 3 - XML sitemap - HTML sitemap - Form - BackUpWordpress - Language Field - Yoast WordPress SEO - Verify Google Webmaster Tools - Google Analytics for WordPress - Permalinks - Author

Plug-In Setting To install Install plug-In: - XML sitemap - HTML sitemap - BackUpWordpress - Verify Google Webmaster Tools - Google Analytics for WordPress - Permalinks - PDF Uploader - Change Background Image - Change or Implement Background movies All ready • Custom 404 Pro Installed to • Ultimate Coming Soon Page setup • Form (formcraft) • Picture gallery (NextGEN Gallery by Photocrati) • Rich Snippets WordPress Plugin by WP-Buddy • Author Google+ Author Information in Search Results (Free Version) • W3 Total Cache • Head slider / sponsor: Smooth Slider • SEO: Yoast WordPress • Tracking: Google Analytics by Yoast • Multilingual: WPML Multilingual CMS

Functionality CMS The main focus is this project that the CMS is easy to handle for the User. Those specifications are for Web, Tablet and Mobile. Those function are already build – you can use them from the Website – www.behr.ch

WP http://www.behr.ch/wp-admin/ user name: admin password: success1234

FTP user: psassine Pw: 2A4uvUJusApE

Database Name: CL24187_wordpress User: CL24187_wpdb Pw: JUMUhesY9ahe

Title H1 The title in this area will be the page title and H1 title. The H1 should be filled once for the Web in the CMS. The CMS has to adapt automatically the title/layout for the Tablet and Mobile

Navigation The Navigation should be modified once for the Web in the CMS. The CMS has to adapt automatically the navigation for the Tablet and Mobile

When you create a new page, in the area “Attribut”, I would like to have a checkbox to chose following option: - Keine Zuweisung = Original position (The page is not assign in the navigation, footer, html sitemap – is visible in the xml sitemap) - Navigation (Page should be visible in the navigation, html sitemap and xml sitemap)

5 - Footer (Page should be visible in the footer, html sitemap and the xml sitemap) - Link (insert a url in a form. Link the user to a other page with target=”_blank”) - Angezeigter Name (insert the name of the navigation). - HTML Attribut (put a form to write the “alt” and “title” tag of the navigation)

Functionality

- Keine Zuweisung = Original position: (the checkbox, Navigation, Footer and Link is deactivated)

- When the checkbox “Navigation” or “Footer” is activated (the checkbox, Keine Zuweisung and Link is deactivated)

- When the checkbox “Navigation” and “Footer” can be activated together (the checkbox, Keine Zuweisung and Link is deactivated)

- Link (If the checkbox Link is activated, you have to choose if you want the Link in the Navigation or Footer or both. “Keine Zuweisung” is deactivated)

- Name, put a name for the new navigation (the insertion of a name is only possible when the “Navigation” checkbox is activated)

- HTML Attribut (the function “HTML Attribut” is not related to the checkbox Navigation, Footer, Link)

This functionality is related to the Page Menüs (Design>Menüs). The modification should be possible on the “new page” and in the on the page “Menüs”. When the user delete the page the navigation will delete automatically in the web and in the CMS.

Title H2 and Content We will have two main template: - home - content page (Page)

Each Template will have a pattern for H2 title, Text Content, Picture, Link, PDF Download (take a look on the Design)

The Template content should be filled/modified once for the Web in the CMS. The CMS has to adapt automatically the content/layout for the Tablet and Mobile

Picture & PDF Each picture or pdf have to be uploaded into the Wordpress CMS “Medien” befor usig it.

Home & Page template Each picture on the page has to be integrated from “Medien” area. Click on the picture in the template> search for your picture in the Wordpress picture upload (Medien)> confirm the picture > click “ok” and your picture is in the template. (Not through html coding)

Each pdf on the page has to be integrated from “Medien” area. Choose your text snippet > Click on it> search for your pdf in the Wordpress upload (Medien)> confirm the pdf > click “ok” and your pdf can be downloaded online. (Not through html coding)

The picture and pdf as to be integrated once for the Web in the CMS. The CMS has to adapt automatically the Picture and PDF for the Tablet and Mobile

Automatically language detection The website have to be able to recognize the browser language auf the visitor and show him the right language.

Language change If the user change during the visit the language of the website, the user have to stay on the same page.

Form On each “content page” we must have the possibility to create a form

8 General Navigation The top navigation as 7 main point + a link for the English version (not in the mockup). The top navigation has a roll-over from black to red. Mocup: http://www.bbcarena.com/design2/Kategorie-Seite.html

The Submenu open when the user touch the navigation with the mouse and disappear with the rollout. Each submenu have a Roll- over from black to red

When the user is on the page in a the top navigation and submenu stay in red

Logo The main Logo on the page have a Link to the homepage

Sitemap There is 2 Sitemap - XML sitemap - HTML sitemap

Internal Search On each page they have a search Field. When you search a name Engine you can click on the icon or press return to activate the search

For the results you have a own overview page.

Each result you have: • 1 Titel h2 • Content • Link to the page

Mocup: http://www.bbcarena.com/design2/Suchresultaten.html

Background Each page must have the possibility to add a background image Image Background Each page must have the possibility to add a background movie movie Page 404 The 404 page must be in a same layout like a page Mocup: http://www.bbcarena.com/design2/404-page.html Look if we can use the Pluhin “Custom 404 Pro”

Footer The footer have: - A button to go up to the page - 3 social media Icons - 3 columns with the most important links - Copyright text an a link

9 Homepage Function The homepage ist the main overview page on the website. Mocup: http://www.bbcarena.com/design2/home.html

The homepage should have the function like this page: - http://www.annularspace.com/ - Logo and navigation stay on the top - When you scroll down the logo and navigation is all the time visible. The background picture should visible between the white areas. - On the background picture between the white area you have a title h3.

On the white areas you have: - Title h2, content, link and picture. The content and picture must be easy to change - Picture Tabs o Rollover on the picture (fadeout) title get bold o Every time you load the page the picture change (picture and size of the picture change)

We must have the possibility to add or delete a white area.

Box, H1 Title - H1Title - Text Content - Link to Google virtual tour (example: click here)

Box calendar You will find in this box the newest event from the bbcarena. Only (Veranstaltung those with picture will be displayed on the homepage. H2 Title) - The link go’s the calendar overview - When you click on the red button “Kalender” the system set you directly a appointment/event in in your personal calendar (outlook, Mac calendar, …) - The picture must be automatically linked like the text link

Box Zimmer, This is a carrousel that keeps turning slowly. When you make a Seminare rollover on the boxes from the carrousel stops. You can click on (H2 Title) the link for more information - The picture must be automatically linked like the text link

10 Category page Function Each top navigation have a category page When you rollover on the top navigation the submenue opens. When you click on the top navigation (Veranstaltung, Seminar, Hallen; Sportlager, Zimmer, Kontakt) you go on a category page. Mocup: http://www.bbcarena.com/design2/Kategorie-Seite.html

Box, H1 Title - H1Title - Text Content - Link to Google virtual tour (example: click here)

Boxes You can insert max. 12 boxes on each pages. Create a new post and choose the category to display it. On each Box you have: - Title H2 - Picture - Text content. The number of text is limited to keep the boxes in the same size. - Link

Calendar page Function We would like to have a online calendar that can be managed like a blog Mocup: http://www.bbcarena.com/design2/Kalender-Seite.html Mocup: http://www.bbcarena.com/design2/Kalender-Seite- detail.html

Backend For a new entry create a new post and: - Set the date, time, of the event (mandatory) - Set the date to display the post (mandatory) - Set the date to disable the post (mandatory) - Set the title (h2) (mandatory) - Choose the category (what kind of event in the main pull-down or put one in the form. (mandatory) - Set the organizer (Veranstalter) (mandatory) - Put some content Text content - Put a picture - Choose the link to by a ticket in the pull-down or put one in the form

- Link “Datum speichern” (save the date): when you set a date the link is automatically visible. There is possible to ad a title of the link

- Link “Match Ticket kaufen” (buy a ticket): when you put the link to buy a ticket the link automatically visible. There is possible to ad a title of the link

- Link “Mehr Details” (more details): when the amount of content is bigger than 3 lines (for example) the link is automatically visible. There is possible to ad a title of the link

- Each post should be automatically display on Facebook, Google+ and twitter. If that should not happen, it should have for each social media a checkbox to disable the post

- If the webmaster don’t fill up the “mandatory” fields the post can’t not be published.

Overview Mocup: http://www.bbcarena.com/design2/Kalender-Seite.html

In the overview the latest calendar Post is on the top. - H1 title - Content text

You have to scroll down to see the other post. You can choose how mutch post you want to display on the page (10, 30, 40), By 41. Post you have to go on a other page. The number to change the pages are at the beginning of the page (look a the design) and at the end of the page. We have 3 kind of button on the teaser:

- Link “Datum speichern” (save the date): when you click on the red button “Kalender” the system set you directly a appointment/event in in your personal calendar (outlook, Mac calendar, …)

- Link “Match Ticket kaufen” (buy a ticket): go to the right page to buy a ticket

- Link “Mehr Details” (more details): get more details

Details Mocup: http://www.bbcarena.com/design2/Kalender-Seite- detail.html

When you click on the link for more Details. A window open over the overview page. You can see all the content, picture and choose one of the 3 Links: - Link “Datum speichern” (save the date): when you click on the red button “Kalender” the system set you directly a appointment/event in in your personal calendar (outlook, Mac calendar, …)

- Link “Match Ticket kaufen” (buy a ticket): go to the right page to buy a ticket

- Link “close” close the window. When the user click beside of the window that should close to.

12 Page Layout with Vitualtour Function On those pages we will present the rooms and area to rent. Mocup: http://www.bbcarena.com/design2/Seite-virtualtour- USP.html

Head Picture In the head you can put a picture or with a Iframe insert the Virtualtour Virtualtour from google Content 1 - H1Title - H2Title - Text Content - Picture in the Text - Box Manager In the Backend you have to produce (HTML code) those Information box and choose the page to display them - H3Title - Picture - Insert Text Information - Insert Links

(Blue) USP Box For each page we have to manage separately the UPS Box - H2Title - Picture - Text Content

Box calendar You will find in this box the newest event from the bbcarena. Only (Veranstaltung those with picture will be displayed on the homepage. H3 Title) - The link go’s the calendar overview - When you click on the red button “Kalender” the system set you directly a appointment/event in in your personal calendar (outlook, Mac calendar, …)

Box Partner This is a carrousel that keeps turning slowly. The picture are gif, (H3 Title) jpg, png with links (_blank). You can manage this carrousel from the backend for all the pages.

13 Page Layout content Function On those pages we will have all content like: - Information - Picture gallery - Contact with google map Mocup: http://www.bbcarena.com/design2/Seite.html

Head Picture In the head you can put a picture Virtualtour Content 1 - H1Title - H2Title - Text Content - Picture in the Text

We must also have the possibility to insert something thumbnail (just like in the picture gallery) an when click on the thumbnail the picture open http://www.bbcarena.com/design2/Seite-bild- offen.html. Use please the plug-In picture gallery (NextGEN Gallery by Photocrati)

Box Manager In the Backend you have to produce (HTML code) those Information box and choose the page to display them - H3Title - Picture - Insert Text Information - Insert Links

Box Partner This is a carrousel that keeps turning slowly. The picture are gif, (H3 Title) jpg, png with links (_blank). You can manage this carrousel from the backend for all the pages.

14 SEO Plug-In Please install the Plug-In: - XML sitemap - HTML sitemap - Form - BackUpWordpress - Language Field - Yoast WordPress SEO - Verify Google Webmaster Tools - Google Analytics for WordPress - Permalinks - Author

Picture & Link Please make sure that all the links and picture can be taged Tags

Code Make sure that all the Meta information is available in the first 20 lines in the HTML code.

We will check and test the code to release the project white: - Code: http://validator.w3.org/ - Speed Web and Mobile: Webmaster tool - SEO Web and Mobile: Webmaster tool

Title Tag Each page must have a title tag on line 4 – example:

1- 2- 3- 4- Reisebüro webook.ch für ihre Reise, Ferien, Last Minute

Meta Each page must have a description Tag on line 5 – example: Description Tag 1- 2- 3- 4- Reisebüro webook.ch für ihre Reise, Ferien, Last Minute 5-

The Description Tag will be generated through the SEO Yoast Plug-In

Box Partner This is a carrousel that keeps turning slowly. The picture are gif, (H3 Title) jpg, png with links (_blank). You can manage this carrousel from the backend for all the pages.

Other Meta tag Other Meta tag like:

15 will be integrated through the Plug-In

Other Meta tag Other Meta tag like:

have to be integrated in the end of the meta list. Those Meta have to be updated on each page. Link Each link in the Browser have to be structured, example: construction www.bbcarena.com/ fr/ hotel/ rooms/

www.behr.ch/ fr/ hotel / rooms/

Main URL Language Category Page

richtext snippet Please put on the adresse à richtext snippet (look at for the adresse http://schema.org/ or on the page https://support.google.com/webmasters/answer/146750?hl=en for “kontakt” the right tag)

As a richtext snippet we would like to have: - The picture of mister - Name. Giorgio Behr - Adresse: Anglikerstrasse 99 - Postfach 1233b – 5612 Villmergen - Tel: +41 56 618 14 96 - Fax: +41 56 618 16 43

Sidemap Insert XML sitemap and HTML sitemap

16 Responsive Design

Template home design: http://www.bbcarena.com/design2/home.html Screen width 1600 pixel

Main Navigation Typo – HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Roll out - Color # 000000 Roll in - Color # e5192c

Title H1, H2 ,H3 Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Color: # e5192c

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

4 Top boxes Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # e5192c Text color: # 000000 Link color: # e5192c – roll-over color: # 1c5985

Date (calendar Box) Typo: HTML Text: Arial, Helvetica Century, Gill sans, Geneva, Verdana,

Text color: # 000000

Content in white area Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # e5192c Text color: # 000000 Link color: # e5192c – roll-over color: # 1c5985

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

Content on the Typo: HTML Text: Arial, Helvetica Century, Gill sans, picture between Geneva, Verdana, white area Titel color: # ffffff

Size: take a look on the psd file oder screenshot

17 http://www.bbcarena.com/design2/home.html

Footer Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # ffffff Text color: # ffffff Link color: # ffffff – roll-over color: # e5192c

Template category design: http://www.bbcarena.com/design2/Kategorie- Seite.html Screen width 1600 pixel

Title H1, H2 ,H3 Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Color: # e5192c

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

4 Top boxes Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # e5192c Text color: # 000000 Link color: # 000000 – roll-over color: # e5192c

Template calendar design: http://www.bbcarena.com/design2/Kalender- Seite.html Screen width 1600 pixel

Title H1, H2 ,H3 Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Color: # e5192c

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

Events Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

18 Titel color: # e5192c Text color: # 000000 Link color: # e5192c – roll-over color: # 1c5985

Date (calendar Box) Typo: HTML Text: Arial, Helvetica Century, Gill sans, Geneva, Verdana,

BG color: # c8c8c8 Number color: # 505050 Date color: # 0d2d44

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

Template calendar design: http://www.bbcarena.com/design2/Kalender- Seite.html Screen width 1600 pixel

Title H1, H2 ,H3 Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Color: # e5192c

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

Content Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # e5192c Text color: # 000000 Link color: # e5192c – roll-over color: # 1c5985

Size: take a look on the psd file oder screenshot http://www.bbcarena.com/design2/home.html

Contact box Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Titel color: # e5192c Text color: # 000000 Link color: # 000000 – roll-over color: # e5192c

Date (calendar Box) Typo: HTML Text: Arial, Helvetica Century, Gill sans, Geneva, Verdana,

19 BG link color 1: # 1b5884 BG link color 2: # 3ba936 BG link color 3: # 2c7b28 BG link color 4: # 2c7b28

USP Box Typo: HTML Text: ITC Avant Garde Gothic (or similar), Century, Gill sans, Geneva, Verdana, Arial, Helvetica

Text color: # ffffff BG link color 1: # 1b5884

Project timing Please confirm in your contract if you can meet the milestone and timeline

Milestone Detail Date to deliver Quote 29.5.2015 Project start 12.6.2015 CSS Template (Cisin) Homepage 23.6.2015 Category page Page 1 and 2 Calendar page

WP Setup (Cisin) All the Plug-In 23.6.2015 Functionality Calendar functionality

Implementation (Cisin) Template 16.7.2015 Navigation, Menu Calendar Sitemaps Bug Fixing (Cisin) 14.8.2015 Content implementation 18.9.2015 (BBCarena) Golife (Cisin) 15.10.2015

Quote Please send me a quote until 29.5.2015

Production of Homepage CSS template Category page for Web, Tablet Page 1 and 2 and Mobile Calendar page device.

Setup WP and WP on http://www.bbcarena.com/ (worldpress is allready installed) Plug-In and the missing Plug-In

Functionally Transfer the some Homepage functionality from the website behr.ch

Implement the calendar functionality Implement the boxes and pages functionality

Multilanguage Implement WPML Plugin and the English pages

SEO Implement Richtextsnippet and increase the page speed with the total cache Plug-In

Bug fixing Fix all the bugs according to our feedback and: - Code: http://validator.w3.org/ - Speed Web and Mobile: Webmaster tool - SEO Web and Mobile: Webmaster tool

Golife Change all to main URL from bbcarena.com to bbcarena.ch