Webflex voor Webdesigners Kinetiek Webtechnologie - Handelstraat 14-6815 CW Arnhem - http://kinetiek.com Webflex voor webdesigners blz. 1 9-1-2013 17:09
Inhoudsopgave 1 Inleiding... 3 1.1 Menu s... 4 1.1.1 Voorbeelden van menu s... 4 1.2 Zone s... 6 1.2.1 Statische en dynamische zones... 6 1.2.2 Semi-dynamische zones... 6 1.2.3 Voorbeelden van zone s... 7 1.3 Items... 9 Webflex voor webdesigners blz. 2 9-1-2013 17:09
1 Inleiding Kinetiek heeft een eigen Content Managements Systeem ontwikkeld: Webflex. Dit CMS is opvallend gebruiksvriendelijk en responsief door toepassing van modernste technieken (jquery, Ajax). Ook is het zeer flexibel in vormgevings mogelijkheden: praktisch elk webdesign kan met Webflex CMS worden gerealiseerd: pixelnauwkeurig! Dit document informeert webdesigners over de vier belangrijkste kenmerken van Webflex die relevant zijn bij het webdesign: 1. Menu s De menu s bevatten de links naar de pagina s van de website. Doel: ontwikkel voor elk niveau het menu. 2. Zone s Pagina s zijn opgedeeld in rechthoekige zone s. Doel: ontwikkel 1, 2 of meer zone s op de pagina. 3. Items Content wordt gepresenteerd in item s met een selecteerbare opmaak (en afmeting). Doel: ontwikkel 1 of meer item opmaken die goed aansluiten bij het geheel. Varieer met vormen, gradienten, patronen en kleuren. 4. Typgrafie Opmaak van de teksten: lettertype, kleuren, marges maar ook inline styling. Doel: ontwikkel opmaken voor Kopregels, alineas en overige inline styling. Denk aan lettertypes, lettergrootte, letterafstand, marges, kleuren en achtergronden. Voor meer info over het CMS verwijs ik je graag naar mijn website: http://kinetiek.com/16.html. Bekijk ook de websites die al gerealiseerd zijn met de CMS op de website: http://kinetiek.com/17.html Webflex voor webdesigners blz. 3 9-1-2013 17:09
1.1 Menu s De menu s bevatten de links naar de pagina s van de website. In Webflex zijn pagina s hiërarchisch: een pagina kan één of meer subpagina s hebben. De paginahiërarchie bestaat meestal uit twee of drie niveaus. Meer niveaus (maximaal negen) zijn mogelijk, maar een platte website (één niveau) ook. In Webflex krijgt elk niveau zijn eigen menu. Ook mogelijk is om niveaus samen te voegen tot een genest menu. Voor webdesigner: Geef het volgende in het webdesign aan: De positie van het menu op de pagina; De uitlijning van de menu items: horizontaal (naast elkaar) of verticaal (onder elkaar); De vorm van de menu items: links, tabbladen, afbeeldingen etc; De opmaak voor het geselecteerde menu item; Bij geneste menu s: Duidelijk aangeven dat een menu item subitems heeft. 1.1.1 Voorbeelden van menu s 1.1.1.1 http://www.kinetiek.com: Elk niveau zijn eigen menu. 1. Hoofdmenu: horizontale witte tekst in blauwe balk: geselecteerd is onderstreept (Producten en diensten). 2. Submenu: horizontale tabbladen: geselecteerd tabblad licht op en verliest onderrand (Webflex CMS). 3. Subsubmenu: verticale items: geslecteerd wordt vet. Webflex voor webdesigners blz. 4 9-1-2013 17:09
1.1.1.2 http://www.marvis.nu: Elk niveau zijn eigen menu. 1. Hoofdmenu: verticale lila items: geslecteerd wordt paars (diensten). 2. Submenu: willekeurig geplaatste lila en paarse sterren: geselecteerde ster wordt geel (huisstijlen). 3. Subsubmenu: horizontale items: geslecteerd wordt vet (Mijn pagina s). 1.1.1.3 http://www.jo-bos-en-co.nl: Niveau twee en drie zijn genest. 1. Hoofdmenu: verticale items: geselecteerd wordt oranje en groen driekhoekje (Werkvelden & activiteiten). 2. Genest submenu van niveau 2 en 3: a. Niveau 2: verticale items: geselecteerd item wordt wit met wit driekhoekje. (Organisatieontwikkeling) b. Niveau 3: verticale items direct onder het geselecteerde item van niveau 2: geselecteerd item wordt wit (Procesbegeleiding). Webflex voor webdesigners blz. 5 9-1-2013 17:09
1.2 Zone s Onderdelen van een website zoals logo's, menu's krijgen vaste plaatsen op de website. De website wordt als het ware opgedeeld in een grid van rechthoekige zones. Deze zones zijn niet alleen esthetisch belangrijk, maar helpen bezoekers ook bij het vinden van hun weg op uw website. 1.2.1 Statische en dynamische zones Wissel je op een website van pagina, dan wordt de content op de pagina ververst. Vaak zie je dat een bepaald deel van de pagina niet wordt ververst, bijvoorbeeld het deel met het bedrijfslogo en het menu. De pagina is als het ware opgedeeld in twee type zones: statisch: zones met statische content. dynamisch: zones met dynamische content die ververst bij elke paginawissel. 1.2.2 Semi-dynamische zones Webflex heeft een uniek derde type zone: semi-dynamisch. De content in deze zones ververst alleen bij een paginawissel op bijvoorbeeld het 1 e niveau (hoofdmenu), maar niet bij een paginawissel op lagere niveau's. 1.2.3 Opmerking Webflex websites hebben altijd exact één volledig dynamische zone, en nul of meer semidynamische en/of statische zone s. Voor webdesigner: Geef het volgende in het webdesign aan: Overleg met de klant welke zone s van de website statisch zijn en welke dynamisch; Overleg met de klant of deze gebruik wil maken van semi-dynamische zone s. Webflex voor webdesigners blz. 6 9-1-2013 17:09
1.2.4 Voorbeelden van zone s 1.2.4.1 http://www.kinetiek.com Dynamische zone (rode kader) De content in deze zone wijzigt bij elke pagina wisseling, dus zowel in het hoofdmenu, als het submenu als het subsubmenu. Semi-dynamische zone (rode kader) De content in deze zone wijzigt alleen bij een pagina wisseling in het hoofdmenu. Webflex voor webdesigners blz. 7 9-1-2013 17:09
1.2.4.2 http://www.ondernemenderwijs.nl Dynamische zone (rode kader) De content in deze zone wijzigt bij elke pagina wisseling, dus zowel in het hoofdmenu, als het submenu als het subsubmenu. Semi-dynamische zone (rode kader) De content in deze zone wijzigt alleen bij een pagina wisseling in het hoofdmenu. Webflex voor webdesigners blz. 8 9-1-2013 17:09
1.3 Items Webflex slaat content op in items. Alle items samen vormen de itembibliotheek en van hieruit voegt de gebruiker items toe aan de zone s van zijn pagina's. Items kunnen op verschillende pagina s worden hergebruikt. Als een item in de zone wordt geplaatst kan de gebruiker voor het item: Een opmaak selecteren De afmeting van het item opgeven (breedte en hoogte) De positite van het item in de zone opgeven (XY-coordinaten) De uitlijning opgeven (links, rechts, midden) Voor webdesigner: indien de klant dit wenst, design verschillende opmaken voor items. Hieronder een voorbeeld van een zone met zes items: alle zes hebben verschillende opmaken. 5 items hebben gelijke breedtes behalve het rode item. Alle items zijn links uitgelijnt. Webflex voor webdesigners blz. 9 9-1-2013 17:09
1.4 Typografie Geef het webdesign voor de verschillende typografie, zoals: Kopregel 1 en 2 (In HTML <h1> en <h2>) Alineas (In HTML <p>) Geordende en ongeordende lijsten Tabellen o Tabel headings (in HTML <th>) o Tabel data (in HTML <td>) Inline stijlen zoals bijvoorbeeld quotes of waarschuwing Voorbeeld: Webflex voor webdesigners blz. 10 9-1-2013 17:09