FOLKUNIVERSITETETT KOMPLETTERANDE UTBILDNINGAR Kravspecifikation 2010.10.14 Er referens: Peter Mikulic Vår referens: Fredrik Suter Version 3.0 Ringvägen 100 SE 118 60 Stockholm Tel +46 (0)8 501 103 00 www.ottoboni.se 1 (34)
Innehåll Introduktion... 4 Sidtyper... 5 Layout... 6 Förklaring av trådskiss... 7 Generellt... 8 Startsidan...10 Toppytan (valfri)...11 Innehållskolumnen...11 Högerkolumnen (dessa moduler ska kunna läggas till på vilken informationssida som helst)...11 Lightbox...11 Informationssida...12 Toppytan (valfri)...13 Innehållskolumnen...13 Högerkolumnen...13 Kursutbud...14 Toppytan (valfri visas ej på bilden ovan)...14 Innehållskolumnen...14 Högerkolumnen...14 Bildtext...14 Kurskategori...15 Toppytan (valfri visas ej på bilden ovan)...15 Innehållskolumnen...16 Högerkolumnen...16 En kurs som går att boka...17 Toppytan (valfri visas ej på bilden ovan)...17 Innehållskolumnen...17 Högerkolumnen...17 Bokning...18 Toppytan (valfri visas ej på bilden ovan)...19 Innehållskolumnen...19 Betalningsprocessen...19 Kurs/utbildning med anmälningsformulär...20 Toppytan (valfri visas ej på bilden ovan)...20 Innehållskolumnen...21 Högerkolumnen...21 Nyheter...22 Toppytan (valfri visas ej på bilden ovan)...22 Innehållskolumnen...22 Högerkolumnen...22 Sökresultat...23 Innehållskolumnen...23 Högerkolumnen...23 Personalsida...24 2 (34)
Toppytan (valfri visas ej på bilden ovan)...24 Innehållskolumnen...24 Högerkolumnen...25 Lärarbeskrivning...26 Toppytan (valfri)...27 Innehållskolumnen...27 Högerkolumnen...27 Bildgalleri...29 Toppytan (valfri visas ej på bilden ovan)...29 Innehållskolumnen...29 Högerkolumnen...29 Hantering av bildgallerier...30 Kontaktuppgifter...31 Innehåll...31 Moduler (i högerkolumnen)...32 Bildmodul...32 Valfritt html innehåll modul...32 Twitter modul...33 Flickr modul...33 Länkmodul...34 Bokningsmodul...34 Nyhetsbrevsmodul...34 3 (34)
Introduktion Den här specifikationen har uppdaterats och informationstät och visuell mall har slagits samman till en mall, som ger möjlighet att både kunna ha en informationstät hemsidan med djup struktur samtidigt som det går att göra en strukturmässigt grund sida med stora bilder och mycket grafik. Varje skola kommer att skapa en design enligt sin respektive grafiska profil, men struktur och layout/ytor kommer vara densamma för alla skolor. 4 (34)
Sidtyper En sida webbsajt som har ett visst informationsinnehåll upplagd/layoutat på ett vist sätt kallas en sidtyp. Nedan finns alla olika typer av sidor beskrivna i både utseende (en skärmbild från trådskissen/wireframen) och innehåll/funktionalitet. 5 (34)
Layout Sidtyperna har en layout bestående av två kolumner (innehållskolumn och högerkolumn) samt ett sidhuvud, en toppdel och en sidfot. Det är innehållet i kolumnerna som gör varje sidtyp unik medan sidhuvud och sidfoten ser likadan ut för hela sajten (varje skola har givetvis ett unikt utseende och innehåll på sidhuvud och sidfot). Nedan är en bild av layouten. I sidtyperna som gås igenom nedan har vi tagit bort sidhuvud och sidfot för att ge mer utrymme åt innehålls och högerkolumn (sidhuvud och sidfoten kommer ingå i sidtypen i den färdiga sajten. Sidhuvud (logotyp, huvudmeny, sökfunktion, brödsmulor) Denna yta är ändringsbar i höjdled. Toppdel (bild/bildspel/flash) Denna yta är ändringsbar i höjdled. Innehållskolumn Högerkolumn (undermenyer, moduler) Sidfot 6 (34)
Förklaring av trådskiss En trådskiss, även kallad wireframe, är till för att ge en översiktlig bild över hur en hemsidedesign kan se ut och hur den hänger ihop med andra delar/sidor av designen. En trådskiss är ofta väldigt enkelt designadd (grå/svarta/vita rutor och texter) och saknar det grafiska manéret som en designskiss har. Detta för att man snabbt ska kunna diskutera, få feedback och göra om utan att ha lagt någon tid på själva grafiken/bilderna eller implementation. Fokus för en trådskiss ligger på att fastställa funktionalitet och hur användaren sedan ska interagera med hemsidans olika informationer. I denna trådskiss används ibland mycket få färger (gråskalaa + någon markeringsfärg). Rosa färg på trådskisser i gråskala är till för att förklara vad ytan är till för. När ni tittar på trådskissen så finns det till vänster finns en meny (orange pil) för att kunna navigera mellan de olika sidtyperna. Under trådskissen av sidtypen finns också ett fält där namnet på sidtypen visas (blå pil). Varken vänstermenyn eller fältet under kommer synass i själva lösningen. Trådskissen hittar du här: http: //clients.ottoboni.se/folkuniversitetet/wireframes_kompletterande/v2/index.html 7 (34)
Generellt Avdelningen Generellt är ny för version 3 av specifikationen. Menydjup För undermenyer/ /högermeny finns det ett maximalt djup på 4 steg. 1. Steg ett 1.1. Steg två 1.1.1. Steg tre 1.1.1.1. Steg fyra Kontaktformulär Kontaktformulär som finns på folkuniversitetet.se ska kunna användas på informationssidor. Textfältetska inte vara begränsat (rimlig gräns finns dock så klart). Verktygsfält Verktygsfältet går att välja om det ska döljas eller visas på de flesta sidor utom speciella sidor som ej kräver verktygsfältet, tex: startsidan, sökresultatssidan, bokningssidan, betalningssidan. (verktygsfältet taget ur trådskissen) Brödsmulor/breadcrumbs Brödsmulor går attt slå av/på för hela sajten. (exempel på brödsmulor från folkuniversitetet.se) Kommentarsfält Kommentarsfältet (Disqus) kommer finnas möjlighet att ha som modul i högerkolumnen. 8 (34)
Skinning funktionalitet Precis som för mallen för Folkuniversitetets gymnasieskolor så kommer det finnas möjlighet att ändra vissa färger för olika element i designen i EPiServer. Det går även att välja bildbakgrund om så önskas, se exempel: 9 (34)
Startsidan 10 (34)
Toppytan (valfri) 1. Stor bild/bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen Följande modulers funktionalitet och innehåll beskrivs i detalj nedan. Alla moduler kan tändas/släckas efter behov. 1. Bild/bildspel/flash modul Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se. Bildspelsmodulen kan ersättas med en Flash modul 2. Innehållsmodul Denna modul innehåller en vanlig informationssida, dvs redaktören har möjlighet att lägga in precis vilket text och bildinnehåll som helst. Det kan vara en välkomsttext eller något annat. 3. Nyhetsmodul Nyhetsmodulen visar de X valda nyheter från nyhetsarkivet. Den skulle även kunna visa de X senast skapade nyheterna. Nyheterna består av en rubrik, en ingress och en bild. Klickar man på rubriken/ingressen eller bilden så kommer man till den fullständiga nyheten (som ligger i nyhetsarkivet). Under sista nyheten finns även en länk för att gå till nyhetsarkivet. 4. Elever berättar modul Denna modul innehåller en rubrik, en ingress samt tre bilder med tillhörande rubrik och ingress, förslagsvis Namn och beskrivning av personen. Klickar man på bilden så kommer man till hela intervjun. Samma funktionalitet som den befintliga modulen på www.folkuniversitetet.se Högerkolumnen (dessa moduler ska kunna läggas till på vilken informationssida som helst) 1. Snabblänksmodul Här kan redaktören lägga till länkar till interna sidor eller externa sajter. 2. Bildmodul Bild med en dynamiskt editerbar bildtext som länkar till valfri sida (intern eller extern). 3. Valfritt html innehållsmodul. Valfritt html innehåll kan läggas till här. I exemplet ovan är det en bild tagen ur en film. Bilden länkar till en informationssida där filmen finns inlagd. Filmen är externt inlänkad från filmtjänster som tex Vimeo eller Youtube. 4. Twitterflödesmodul Denna modul plockar in ett RSS flöde från Twitter och visar upp 4 stycken poster. 5. Flickrflödesmodul Denna modul plockar in ett bildflöde från Flickr (antingen från det egna kontot eller vilken grupp eller tag som helst). Lightbox På startsidan ska det finnas möjlighet att lägga en lightbox ovanpå själva startsidan. I den ska man kunna lägga en bild eller en flash film. 11 (34)
Informationssida 12 (34)
Toppytan (valfri) 1. Stor bild/bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodul med samma funktionalitet som bildspelet på www.folkuniversitetet.se) 2. Rubrik 3. Ingress 4. Brödtext/innehåll 5. Facebook/Twitter/maila/skriv ut länkar (precis som på www.folkuniversitetet.se) Det finns även möjlighet att lägga till ett kontaktformulär i innehållskolumnen på en informationssida, precis som på folkuniversitetet.se, se Generellt ovan. Högerkolumnen 1. Undermenyn för aktuell sektion/sida 2. Alla moduler som visas i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 13 (34)
Kursutbud Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 4. Brödtext/ /innehåll 5. Facebook/Twitter/maila/skriv ut länkar (precis som på www.folkuniversitetet.se) Högerkolumnenn 1. Undermenyn där kursutbudets kategorier visas. 2. Alla moduler som visass i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). Bildtext 1. Bilden för sidan kan ha bildtext. Där kan man tex skriva eventuell by line. 14 4 (34)
Kurskategori Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film 15 5 (34)
(från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 4. Brödtext/innehåll 5. Facebook/Twitter/maila/skriv ut länkar (precis som på www.folkuniversitetet.se) 6. Lista med kurserna för just denna kurskategori. Kolumnerna går att sortera på genom att klicka på rubrikerna som är blåmarkerade i trådskissen. Efter 20 kurser i listan så är det en paginering/sidnumrering för att göra sidan lagom lång. Listan med kurser ska kunna vara med eller utan bild. Listan kan sorteras på kategorierna (arrangemang, datum, plats och pris). Sorteringsordningen som är default (dvs när man går till listningssidan) kan sättas i EPiServer. Det går även att göra en manuell sorteringsordning som default sortering. Högerkolumnen 1. Undermenyn där kursutbudets kategorier visas. 2. Alla moduler som visas i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 16 (34)
En kurs som går att boka Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 4. Brödtext/ /innehåll 5. Facebook/Twitter/maila/skriv ut länkar (precis som på www.folkuniversitetet.se) Högerkolumnenn 1. Bokningsmodul med fakta/prisuppgifter. 2. Alla moduler som visass i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 17 7 (34)
Bokning 18 (34)
Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Rubrik 2. Ingress 3. Brödtext/ /innehåll 4. Formulär med personuppgifter och val för betalning Betalningsprocessen Betalning likt det förfarande som finns idag på www.folkuniversitetet.se: 19 9 (34)
Kurs/utbildning med anmälningsformulär Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film 20 0 (34)
(från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparentt platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 4. Brödtext/ /innehåll 5. Facebook/Twitter/maila/skriv ut länkar (precis som på www.folkuniversitetet.se) 6. Anmälningsformulär, där du kan välja rubriktext för fritextfält (och ha upp tilll tre stycken) samt bifoga obegränsat antal med filer genom att klicka på knapp för att lägga till ytterligare fil. Högerkolumnenn 1. Undermenyn där kursutbudets kategorier visas 2. Alla moduler som visass i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 21 1 (34)
Nyheter Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Lista med nyheterna för vald kategori (se högerkolumnen), där visas: Rubrik, ingress och miniatyrbild, samt en läs mer länk. Klickar man på någon av ovanstående så kommer man till den fullständiga nyheten (som är vanlig informationssida, se förklaring av den sidtypen ovan). Högerkolumnenn 1. Undermenyn för aktuell sektion/ /sida beroende på hur man vill kategorisera sina nyheter. 2. Alla moduler som visas i startsidans högerkolumn kan visass här efter behov (se beskrivning av startsidan). 22 2 (34)
Sökresultat Innehållskolumnen 1. Rubrik 2. Sökfält + knapp 3. Antalet resultat som sökningen gav 4. Lista med sökresultaten, där varje sökresultatt har följande: Rubriken på sidan, ingressen, publiceringsdatum/uppdateringsdatum, sökvägen. 5. Efter 20 resultat visas en paginering/sidnumrering. Högerkolumnenn 1. Inget innehåll i högerkolumnen 23 3 (34)
Personalsida Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 24 (34)
4. Brödtext/innehåll 5. Lista med personer, där varje person har följande: Bild, namn, beskrivning/titel (och valfritt: telefonnummer, mailadress, visas ej i bilden ovan). 6. Klickar man på namnet så går man vidare till en specifik persons presentation. Den sidan är av sidtypen informationssida, se ovan beskrivning av den sidtypen. Högerkolumnen 1. Aktuell undermeny för sektionen (i det här fallet olika kategoriseringar av personalen). 2. Alla moduler som visas i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 25 (34)
Lärarbeskrivning Eller exempel med liten bild: 26 (34)
Toppytan (valfri) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Bild med bildtext på halvtransparent platta (alternativt bildspelsmodulen som finns på startsidan) 2. Rubrik 3. Ingress 4. Brödtext/innehåll 5. Facebook/Twitter/ /maila/skriv ut länkar (precis som på www.folkuniversitetet.se) Högerkolumnenn 1. Aktuell undermeny för sektionen (i det här fallet olika kategoriseringar av personalen) ). 27 7 (34)
2. Alla moduler som visas i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). 28 (34)
Bildgalleri Toppytan (valfri visas ej på bilden ovan) 1. Stor bild/ bildspel/flash Man kan antingen välja att ha en stor statisk bild, ett bildspel, en flash film eller inbäddad film (från extern sajt). Denna del är valfri för varje sidtyp och kan tändas/släckas efter behov. Bildspelet har samma funktionalitet som bildspelet på www.folkuniversitetet.se Innehållskolumnen 1. Rubrik 2. Ingress 3. Innehåll 4. Rutnät/lista med gallerier, där varje galleri har en text/beskrivning under. 5. Klickar man på ett galleris tumnagel går man till ett galleri på Flickr (se Hantering av bildgallerier nedan) Högerkolumnenn 1. Aktuell undermeny för sektionen (i det här fallet olika kategoriseringar av personalen) ). 29 9 (34)
2. Alla moduler som visas i startsidans högerkolumn kan visas här efter behov (se beskrivning av startsidan). Hantering av bildgallerier För bilder som ska presenteras i bildgallerier och inte som enstaka bilder på sidor rekommenderar vi att varje skola använder ett eget Flickr konto där de publicerar sina bildgallerier. Fördelen är att det är enkelt att publicera bilder och göra dem tillgängliga online via mobil och dator. Flickr är speciellt anpassat för publicering av bilder med många smidiga funktioner och gör det enkelt att göra bildgallerierna tillgängliga via den egna webbplatsen (från Bildgalleri sidan). En instruktion ställs samman som en del av projektet hur respektive skola ska gå tillväga. 30 (34)
Kontaktuppgifter Innehåll 1. Rubrik 2. Innehåll (valfritt, men rekommenderat är textinnehåll, dvs adressuppgifterna). 3. Kartaa (google maps) 31 1 (34)
Moduler (i högerkolumnen) Bildmodul 1. Bild klickbar som leder till valfri sida/fil. 2. Bildtext Dynamisk/editerbar 3. Läs mer länk (valfri) Valfritt html innehåll modul 1. Valfritt html innehåll kan läggas till här. I exemplet ovan är det en bild tagen ur en film. Bilden länkar till en informationssida där filmen finns inlagd. Filmen är externt inlänkad från filmtjänster som tex Vimeo eller Youtube. 2. Bildtext Dynamisk/editerbar. 3. Läs mer länk (valfri) 32 2 (34)
Twitter modul 1. Denna modul plockar in ett RSS flöde från Twitter och visar upp 4 stycken poster. 2. Läs mer länk (valfri) Flickr modul 1. Denna modul plockar in ett bildflöde från Flickr (antingen från det egna kontot eller vilken gruppp eller tag som helst). 2. Läs mer länk (valfri) 33 3 (34)
Länkmodul 1. Här kan valfria länkar läggas in Bokningsmodul 1. Samma funktionalitet och innehåll som på www.folkuniversitetet.se Nyhetsbrevsmodul 1. Samma funktionalitet och innehåll som den nyhetsbrevsmodul som släpps i och med release 1.2 för www.folkuniversitetet.see 34 4 (34)