Page 1

Site redesign DHP Architecten

dotProjects - 2011

Functionele Analyse DHP Architecten site redesign Opgemaakt door: Frank De Graeve, Projectmanager 8 februari 2011

1


Site redesign DHP Architecten

Contactgegevens Bij vragen... Bij mogelijke vragen contacteer: Frank De Graeve Woodrow Wilsonplein 7 9000, Gent T 0032 476 866 270 frank.degraeve@dotprojects.be http://www.dotprojects.be

2

dotProjects - 2011


Site redesign DHP Architecten

dotProjects - 2011

Revisiehistoriek Versie 0.1

3

Datum 08-02-2011

Auteur Frank De Graeve

Opmerkingen Eerste draft versie


Site redesign DHP Architecten

dotProjects - 2011

Inhoudstafel Functionele Analyse DHP Architecten site redesign Doelstelling

5

Belangrijke informatie.

5

In scope

5

Out of scope

5

Functionaliteit Algemeen Ondersteunde browsers

7 7 7

Talen

8

Beheer menu’s

8

Grafisch ontwerp - templates - templatetype

9

De site bevat volgende schermen:

9

Beheer taxonomieĂŤn

19

Clean URL's

19

Media

19

Beelden

Openstaande vragen Contact formulieren

4

5

19 20 20


Site redesign DHP Architecten

dotProjects - 2011

1.Functionele Analyse DHP Architecten site redesign Doelstelling Dit document omschrijft de functionaliteit en structuur van de nieuwe website van DHP Architecten (http://www.dhparchitecten.be/). De huidige website draait op Flash. Doel van dit project is het omzetten van de website naar HTML. Dit maakt de site eenvoudiger beheerbaar en bevordert ook de “vindbaarheid” van de website in zoekmotoren zoals Google en MSN Search. Het aantal animaties van de website dient dan wel te verminderen, dat kan echter zonder aan het dynamische concept van de site te raken.

Belangrijke informatie. • De huidige site bevat Flash animatie. Het overzetten naar Drupal dient te verlopen met respect voor de huidige layout van de site, maar een aantal van de animaties zullen niet overneembaar zijn naar een Drupal omgeving.

In scope • Overzetten van de huidige webiste naar een Drupal omgeving • Optimaliseren van de site naar hedendaagse schermafmetingen (herwerken naar een schermgrootte 1024 px breed) • Google Analytics integreren • Voorzien van multi language functionaliteit (3 talen, NL, EN, FR, met optie om bij lancering de talen te verbergen waarvoor de inhoud nog niet afgewerkt is. • Herschikking van het detailscherm van een project: • Herschikking met het oog op langere project-beschrijving. • Lightboxfunctionaliteit bij het klikken op de grote foto. De grote foto wordt tevens voorzien van een vergrootglas icoontje om deze functionaliteit aan te kondigen aan de bezoeker. • Kaartje met de ligging van het kantoor: Google maps representatie en link naar Google maps toevoegen ipv Mappy. • Opleiding en korte handleiding over het gebruik van het CMS

Out of scope • Totale overname van alle animaties. Bepaalde animaties zullen niet overgenomen worden in de Drupal site. In deze FA wordt beschreven wat wel en niet animeert. • Nieuwe functionaliteiten t.o.v. de bestaande website • Nieuwe ontwikkelingen in Flash • Nieuwe grafische vormgeving • Overzetten van de bestaande inhoud van de huidige site naar de nieuwe • Hosting van de website (een oplossing kan worden voorzien aan 500€ excl BTW per jaar) 5


Site redesign DHP Architecten

• Schrijven of vertalen van teksten • Aankoop van beelden of videomateriaal voor de website

6

dotProjects - 2011


Site redesign DHP Architecten

dotProjects - 2011

Functionaliteit 1. Algemeen Ondersteunde browsers Voor al onze projecten voorzien we een compatibiliteit van zowel de front-end (zichtbaar deel van de site voor bezoekers) als van de back-end (beheer module voor webmasters en redacteurs van de site) voor alle A-Grade browsers op het moment van oplevering van de website. Indien er gekozen wordt voor een implementatie naar Drupal 7 dan wordt IE6 als ‘deprecated’ beschouwd voor de back-end functionaliteit. Met het oog op de animaties zal ook IE6 geen volledige ondersteuning genieten. Een overzicht van de A-Grade browsers.

Win XP Firefox 3.0.†

A-grade

Firefox 3.6.†

A-grade

Win 7

Mac 10.5.†

A-grade

Mac 10.6.†

A-grade

Chrome 4.0.† A-grade IE 8.0

A-grade

IE 7.0

A-grade

IE 6.0

A-grade

Safari 4.0.†

A-grade

A-grade

A-grade

Deze lijst is gebaseerd op deze van Yahoo (http://developer.yahoo.com/yui/articles/gbs/).

7


Site redesign DHP Architecten

dotProjects - 2011

2. Talen • De site is 3-talig (NL, FR, EN) met een enkele domein en een taalprefix. De bezoeker komt op de NL versie van de site bij een eerste bezoek. • http://www.dhp-architecten.be/nl • http://www.dhp-architecten.be/fr • http://www.dhp-architecten.be/en • Veranderen van taal linkt naar de overeenkomstige pagina in de andere taal. Bij het ontbreken van die pagina wordt de bezoeker naar de frontpage gebracht. • De bezoeker kan ten allen tijde veranderen van taal dmv de taalkeuze in de footer.

3. Beheer menu’s Gebruikers met de nodige rechten kunnen bij het aanmaken van nieuwe inhoud aanduiden of er een menu item moet worden aangemaakt. Het hoofdmenu blijft zijn vaste menu-items behouden (Publiek, wonen, kantoor, wedstrijd, info). Geen van deze hoofdmenu’s leiden naar een ‘inhoudspagina’. Ze brengen de bezoeker naar een overzicht van andere pagina’s. Bv. Menu-item ‘Publiek’ brengt de bezoeker naar een pagina met daarop een overzicht met o.a. ‘beursschouwburg’, ‘Canada’,... Klikken op deze items brengt de bezoeker naar de gerelateerde inhoudspagina. Volgende functionaliteiten zijn mogelijk bij menu’s: • Nieuwe menu-items toevoegen (al dan niet interne pagina's). • Bestaande items aanpassen. • Menu items tijdelijk uitschakelen of verwijderen. • Volgorde van items herschikken. • Menu’s dienen vertaalbaar te zijn. dotProjects zal het hoofdmenu volledig opstellen. Enkele submenu’s met bijhorende pagina worden toegevoegd ter demonstratie van de functionaliteit.

8


Site redesign DHP Architecten

dotProjects - 2011

4. Grafisch ontwerp - templates - templatetype Het grafisch ontwerp van de huidige site wordt volledig overgenomen. We passen echter wel de breedte van de inhoudspagina’s aan zodat meer tekst (bredere tekstkolom) mogelijk is en de site beter oogt op grotere schermen. Maximale breedte voor de inhoud van de site is 980 pix. Maximale hoogte voor de inhoud van de site is 520 px De site wordt horizontaal en verticaal steeds gecentreerd getoond.

De site bevat volgende schermen: • Frontpage • Overzichtspagina • Project pagina • Contact overzichtspagina met • Adrespagina • Contactformulier Route pagina • • Personeelsoverzichtspagina • Personeelspagina

9


Site redesign DHP Architecten

dotProjects - 2011

Frontpage

De frontpage bestaat uit • de taalwissel. We stellen voor om dezelfde wissel als nu te behouden maar twee regels te tonen ipv 1: “english version”, en daaronder “version francaise”. Indien Engels gekozen wordt dit natuurlijk “nederlandse versie” en daaronder “version francaise”. • Het logo • de 5 hoofdmenu-items: Publiek, Wonen, Kantoor, Wedstrijd, Info. Hier zullen we een ‘hover’ status voorzien bij elk van de menu-items.

• Bij het aanklikken van een van deze items wordt de bezoeker naar een van de overzichtspagina’s gebracht. Dit verloopt zonder de animatie zoals die nu is.

10


Site redesign DHP Architecten

dotProjects - 2011

overzichtspagina

Een overzichtspagina bevat links naar Projectpagina’s, de Personeeloverzicht pagina enz... die bij dit onderdeel van de site horen. Animatiegewijs verandert hier niet zo veel. De links scrollen naar boven en naar onder op dezelfde wijze als op de huidige site. Op de achtergrond blijven de hoofdmenu-items echter wel vast staan (in tegenstelling tot de huidige site waar deze ietwat mee ‘hoveren’. In bovenstaande beschrijving vermeldden we wel reeds dat er geen animatie is die de overgang weergeeft (het verbreden van de site). De bezoeker komt dus meteen op een pagina terecht die de juiste breedte reeds heeft. • Alle items (zowel die van het hoofdmenu als de links naar de pagina’s) hebben een ‘hover’ state. 11


Site redesign DHP Architecten

dotProjects - 2011

• De links in het hoofdmenu blijven werken. • Klikken op een van de items in een overzichtspagina brengt de bezoeker naar de betreffende pagina/overzicht. • Ook hier wordt geen animatie-overgang voorzien naar de ‘onderliggende’ pagina’s/overzichten. • De volgorde van de verschillende items in zo’n overzichtspagina is te regelen door de administrator van de site.

12


Site redesign DHP Architecten

dotProjects - 2011

Projectpagina Een projectpagina wordt doorheen de site gebruikt om de verschillende projecten voor te stellen aan de bezoekers. Projectpagina’s hebben een menu-item dat zich onder een van de hoofdmenu-items bevind. De volgorde van deze menuitems is regelbaar door een administrator van de site. Alle projectpagina’s zijn rechtstreeks aanspreekbaar via een link in een overzichtspagina. Ze worden opgedeeld onder 4 hoofdmenu-items: • Publiek • Wonen • Kantoor • Wedstrijd De administrator heeft de mogelijkheid extra items toe te voegen. Een projectpagina toont:

1

2

1.

3

4

De blok waaronder het project zichtbaar was in de overzichtspagina. Klikken op deze blok brengt de bezoeker terug naar de overzichtspagina.

2.

De inhoud van het desbetreffende project. Dit veld dienen we te verbreden zodat de klant meer plaats heeft voor bijkomende inhoud in te geven. De breedte mag wel niet meer zijn dan wat de max breedte van de site toelaat. M.a.w. Nagaan hoeveel ruimte er overblijft ifv het huidige aantal menu-items in het hoofdmenu :

13

1.

Project titel (tekstregel)

2.

Project omschrijving (tektveld, geen tekstformattering mogelijk)

3.

Project ontwerpjaar (tekstregel)

4.

Project uitvoerjaar (tekstregel)

5.

Bouwheer (tekstregel met ‘Bouwheer’ als label boven het veld)

6.

Architect (tekstregel met ‘Architect’ als label boven het veld)

7.

Website (url met ‘Website’ als label boven het veld, formattering zonder ‘http’ zichtbaar)


Site redesign DHP Architecten

3.

dotProjects - 2011

Afbeeldingskader. Deze toont eerste afbeelding die bij het project hoort. Aan elk project kunnen meerdere afbeeldingen toegevoegd worden door middel van een upload veld. Er wordt weliswaar geen ‘bulk’ upload voor afbeeldingen voorzien. Elke afbeelding zal apart via de upload functionaliteit van Drupal toegevoegd moeten worden. Elke afbeelding wordt automatisch geschaald naar een vaste breedte. De hoogte schaalt automatisch mee.

4.

Afbeeldingenoverzichtsbalk: in deze balk krijgt de bezoeker een overzicht te zien van alle afbeeldingen. De afbeeldingen scrollen naar boven en onder op dezelfde wijze als op de huidige webiste. Klikken op een van de afbeeldingen zorgt voor het veranderen van de grote afbeelding. Hier wordt elke afbeelding automatisch geschaald naar een passend formaat waar vervolgens automatisch een uitsnijding op toegepast wordt (centraal in de afbeelding) om steeds met eenzelfde formfactor van afbeelding te komen.

14


Site redesign DHP Architecten

dotProjects - 2011

Contactoverzichtspagina De contactoverzichtspagina geeft een overzicht over twee ‘inhoudspagina’s’ (‘Adres’ en ‘Online’). De pagina wordt opgebouwd als volgt:

1

3

2

1.

De blok waaronder het project zichtbaar was in de overzichtspagina. Klikken op deze blok brengt de bezoeker terug naar de overzichtspagina onder ‘info’.

2.

De inhoud van de desbetreffende ‘inhoudspagina’ dit kan een pagina met tekst zijn, of een webformulier.: 1.

Indien het een tekstpagina is verschijnt hier de het inhoudsveld (hier de ‘Adrespagina’). De H2 tags worden gestyled net zoals de labelvelden in de projectpagina’s. Dit is dus een tekstveld (meerdere rijen mogelijk) waar de auteur de mogelijkheid heeft om zelf formattering toe te passen.

2.

Indien het een webform is worden de labels van de form gestyled zoals de labels van een projectpagina. Verder nemen we de huidige look and feel zo goed mogelijk over.

3.

contactoverzichtsbalk: in deze balk krijgt de bezoeker een overzicht te zien van alle inhoudspagina’s en webforms in de contact sectie. De animatie is dezelfde als de foto’s bij een projectpagina, maar grafisch zijn ze groter en breder qua vorm. Ook hier blijft het mouse-over effect bestaan.

15


Site redesign DHP Architecten

dotProjects - 2011

Routepagina De Routepagina is grafisch bijna identiek aan een projectpagina. De structurtele opbouw is weliswaar anders. In tegenstelling tot de statische afbeelding op de huidige site wil men hier een Google Maps representatie van de locatie van DHP Architecten. Een routepagina toont:

1

2

1.

4 3

De blok waaronder het project zichtbaar was in de overzichtspagina. Klikken op deze blok brengt de bezoeker terug naar de overzichtspagina (info)

2.

De inhoud van de routepagina: Inhoudsveld: De H2 tags worden gestyled net zoals de labelvelden in de projectpagina’s. Dit is dus een tekstveld (meerdere rijen mogelijk) waar de auteur de mogelijkheid heeft om zelf formattering toe te passen.

3.

Google maps kader: hier verschijnt een Google maps weergave met daarop de Google maps bedrijfsgegevens. We tonen hier de gegevens zoals Google Maps deze weergeeft. Het is aan DHP Architects om via Google maps deze weergave indien gewenst aan te passen (bv. Logo van het bedrijf toevoegen in Google maps account).

4.

Afbeeldingenoverzichtsbalk: in deze balk krijgt de bezoeker een kleine weergave te zien van de bovenvermeldde kaart-afbeelding. Bij de ‘Routepagina’ wordt dus een upload veld voorzien om deze afbeelding mee in te geven. Ook deze afbeelding wordt automatisch geschaald naar een passend formaat waar vervolgens automatisch een uitsnijding op toegepast wordt (centraal in de afbeelding) om steeds met eenzelfde formfactor van afbeelding te komen.

16


Site redesign DHP Architecten

dotProjects - 2011

Personeelsoverzichtspagina en personeelspagina Een personeelsoverzichtspagina pagina wordt gebruikt om een overzicht te stonen van alle personeelspagina’s. De personeelsoverzichtspagina heeft een menu-item dat zich onder een van de hoofdmenu-items bevind (onder info). Op de personeelsoverzichtspagina kan een bezoeker scrollen doorheen de afbeeldingenoverzichtsbalk die een kleine versie van de foto van het personeelslid toont. De grafische uitwerking is hier dezelfde als bij projectpagina’s. Ook hier dienen we extra ruimte te voorzien voor mogelijke tekst. Structureel fungeren de kleine afbeeldingen hier wel niet als selector voor het veranderen van een centrale afbeelding, maar eerder als een selector voor de verschillende personeelspagina’s. Een personeelspagina toont:

1 3

4

2

1.

De blok waaronder de personeelsoverzichtspagina zichtbaar was in de algemene overzichtspagina (Architecten). Klikken op deze blok brengt de bezoeker terug naar de overzichtspagina (met daarin ‘contact’, ‘route’, ‘architecten’).

2.

De inhoud van de desbetreffende personeelspagina. Dit veld dienen we te verbreden zodat de klant meer plaats heeft voor bijkomende inhoud in te geven. De breedte mag wel niet meer zijn dan wat de max breedte van de site toelaat. M.a.w. Nagaan hoeveel ruimte er overblijft ifv het huidige aantal menu-items in het hoofdmenu : 1.

Personeelslid naam (titel van de personeelslid pagina)

2.

Personeelslid studies (tektveld met meerdere rijen, geen tekstformattering mogelijk, met ‘Studies’ als label boven het veld)

3.

Contact tektveld met meerdere rijen, wel tekstformattering mogelijk zodat de auteur het mailadres kan voorzien van een ‘mailto:’ functionaliteit, met ‘Contact’ als label boven het veld)

3.

Afbeeldingskader. Deze toont de foto die bij het personeelslid hoort. Aan elk personeelspagina kan één afbeelding toegevoegd worden door middel van een upload veld. Er wordt weliswaar geen ‘bulk’ upload voor afbeeldingen voorzien. Elke afbeelding zal apart via de upload functionaliteit van Drupal toegevoegd moeten worden. Elke afbeelding wordt automatisch geschaald naar een vaste breedte. De hoogte schaalt automatisch mee.

17


Site redesign DHP Architecten

4.

dotProjects - 2011

Afbeeldingenoverzichtsbalk: in deze balk krijgt de bezoeker een overzicht te zien van alle afbeeldingen van elke personeelspagina. De afbeeldingen scrollen naar boven en onder op dezelfde wijze als op de huidige webiste. Klikken op een van de afbeeldingen zorgt voor het openen van de personeelspagina die bij deze foto hoort. Hier wordt elke afbeelding automatisch geschaald naar een passend formaat waar vervolgens automatisch een uitsnijding op toegepast wordt (centraal in de afbeelding) om steeds met eenzelfde formfactor van afbeelding te komen.

18


Site redesign DHP Architecten

dotProjects - 2011

5. Beheer taxonomieën Gebruikers met de juiste rechten kunnen taxonomieën beheren dit kan nodig zijn ifv de opbouw van het site menu. Dit kan nog wijzigen ifv de technische analyse.: • Bestaande woordenschat beheren. • Nieuwe termen toevoegen. • Bestaande termen aanpassen.

6. Clean URL's Alle pagina's krijgen propere URL's Algemene overzichtspagina’s: • www.dhp-architecten.be/publiek • www.dhp-architecten.be/wonen • ... Projectpagina’s: • www.dhp-architecten.be/project/wedstrijd/botanic-building • www.dhp-architecten.be/project/kantoor/airport-garden-nv Pagina’s onder info: • www.dhp-architecten.be/contact • www.dhp-architecten.be/info/contact/adres • www.dhp-architecten.be/info/contact/online • www.dhp-architecten.be/info/route Pagina’s onder architecten: • www.dhp-architecten.be/info/team/teamnaam

7. Media Beelden Gezien de strakke, minimalistische opbouw van de site wordt er geen grote functionaliteit toegevoegd aan de WYSIWYG editor. We laten de administratoir toe om bepaalde header tags te kiezen en links te leggen, maar geen inline afbeeldingen en dergelijke. Alle afbeeldingen worden op structurele wijze toegevoegd via de daarvoor bestemde upload velden.

19


Site redesign DHP Architecten

Openstaande vragen Contact formulieren Graag aangeven naar welk mailadres de reacties via het contactformulier mogen verstuurd worden.

20

dotProjects - 2011

test  

dit is een test