Webbredigering

Denna sida ger grunderna för redigering av ClubRunners webbsidor i den grafiska editorn.
 
Det praktiska om att anpassa webbplatsens navigeringsmeny finns pĂ„  supportsidan Webbmenyer.
 
Redigering av klubbens webbsidor krĂ€ver administratörsbehörighet (30) medan det rĂ€cker med den vanliga funktionĂ€rsbehörigheten 50 för att redigera artiklar och evenemang, se supportsidan Behörighet, sĂ€rskilt avsnittet om Hemsida och behörighet.

Vilka mÄlgrupper gör ni webben för?

Utforma klubbwebben sĂ„ att den stödjer klubbens kommunikationsmĂ„l! Innan du kastar dig in i webbredigeringen - börja dĂ€rför med att designa sidstruktur och navigering: se supportsidan Synlighet resp artikeln Hemsidan som skyltfönster. Designen ska ge svar pĂ„ vilken typ av innehĂ„ll som ska placeras var pĂ„ sidan. D2400 har bra handledningar om varumĂ€rke/igenkĂ€nning (se högerspalten).

ÖverskĂ„dlig, tydlig, intressevĂ€ckande Ă€r tre bra nyckelord.

MĂ„nga besökare anvĂ€nder mobilen. AnvĂ€nd gĂ€rna verktyget överst i mitten pĂ„ redigeringssidan (tre symboler: dator, lĂ€splatta, mobil) för att kolla hur din sida ser ut med olika skĂ€rmstorlek.

Webbsidorna bör byggas sÄ att innehÄll som klubbens övriga funktionÀrer producerar - framförallt artiklar och evenemang - automatiskt publiceras pÄ webbsidorna och att webbsidorna i sig inte behöver löpande underhÄll utan hÄlls levande genom ett innehÄllsflöde som hela funktionÀrsteamet bidrar till. Artikelflöde frÄn RI kan ocksÄ bidra till en levande sida.

Utbildningsfilm

Distriktets utbildningsfilm (43 minuter) om webbredigering och webbmenyer:
  • Webbredigering 27 minuter
  • Menyer 11 minuter
  • Webbdesign och innehĂ„llsflöde 5 minuter.
 
 
AnvÀnd helskÀrmslÀge eller öppna filmen i Youtube.
 
En bra utbildningsfilm finns ocksĂ„ i D2390:s funktions-webbinarier om ClubRunner.

Att bygga webbsidor i ClubRunner

Bilden visar en tom mall i redigeringslĂ€get. Layouten kan Ă€ndras med knappen Layouter (uppe till höger). Börja alltid redigeringen med att ge sidan ett unikt namn i Egenskaper.
 
 
Sidan byggs upp med att dra in widgets (byggblocken till höger) i mallen till valfritt omrĂ„de "Drop here" och slĂ€ppa nĂ€r rĂ€tt plats lyser grön. I varje omrĂ„de Ă€r det valfritt att lĂ€gga ingen, en eller flera widgets. Widgetar fylls med innehĂ„ll - text, bilder, lĂ€nkar - i olika layouter eller hĂ€mtar innehĂ„ll, beroende pĂ„ vilken widget du vĂ€ljer att anvĂ€nda.
 
Översta omrĂ„det Band 1 Ă€r avsett för en "banner", dvs en portalbild för sidan. Band 1 skiljer sig frĂ„n sidans övriga omrĂ„den genom att gĂ„ Ă€nda ut till sidans kanter - om du Ă€ndrar widgetens instĂ€llning (kugghjulet) genom att ta bort Visa kant. För att en bannerbild inte ska ta onödigt stor del av bildytan innan vi behöver scrolla ner bör den vara i brevlĂ„deformat t ex 1600x550 px eller gĂ€rna lĂ€gre, ner till typ 350 px. 
 
Widgets finns i olika kategorier, bl a:
  • Widgetar för text och bilder fylls av redaktören med innehĂ„ll (text, bilder, lĂ€nkar).
  • Widgetar som visar information, Evenemang, Nyhetsbrev & PR hĂ€mtar fĂ€rdigt innehĂ„ll frĂ„n annat stĂ€lle i CR, tex artiklar eller kommande evenemang.
  • Fritextwidgets (sidspecifika) fylls med eget innehĂ„ll och ger möjlighet bl a att Ă€ndra i HTML-koden.
  • Fritextwidgeter (globala) fylls ocksĂ„ med eget innehĂ„ll och kan anvĂ€ndas pĂ„ flera sidor. Ändringar av sĂ„dan widget behöver bara göras pĂ„ en av de sidor som den anvĂ€nds pĂ„.
Vi kan granska hur sidan visas pĂ„ lĂ€splatta eller i telefon med hjĂ€lp av ikonerna högst upp i mitten pĂ„ redigeringssidan.
 
Klubbwebben levereras med en hemsida som exempel med nĂ„gra av de komponenter som vi kan anvĂ€nda för att bygga upp en webbsida.

Gör sÄ hÀr

Designrekommendation

För att distriktets klubbar ska visa en enhetlig grafisk profil rekommenderar distriktet följande instĂ€llningar: 

  • GĂ„ till Webbplatsen (ny, beta) -> Webbplatsdesigner.
  • Klicka pĂ„ Teman
  • Leta upp och markera tema Millennium (Next Gen – No Banner)
  • VĂ€lj fĂ€rgschema vid röda pilen.
     
  • Klicka pĂ„ Layouter och vĂ€lj Full Width Top Band above Three Columns.
  • Klicka Publicera.

Hur ser webbsidan ut pÄ mobil?

60-70 procent av besökarna lĂ€ser i mobilen. TĂ€nk pĂ„ hur sidan anpassas för liten skĂ€rm. Pröva pĂ„ datorn att dra ihop webblĂ€sarfönstret och se vad som hĂ€nder med webbsidan. Den rekommenderade layouten ovan visas pĂ„ liten skĂ€rm i följande ordning: 1) Överdelen med "Full width top band" 2) mittspalten 3) vĂ€nsterspalten 4) högerspalten 5) "Full width bottom band".
 
Ordningsföljden vid mobilvisning bör styra hur vi placerar innehĂ„ll i olika delar av sidan. Exempelvis bör kommande program ligga i vĂ€nsterspalten för att visas utan alltför lĂ„ngt scrollande, och innehĂ„ll med lĂ€gre prio kan ligga i högerspalten.
 

Widgets

  • Widget-kontrollerna:
  • Om widgeten har rubrik redigeras rubriktexten via kugghjulet. Om rubriken inte har bakgrundsfĂ€rg bör en grĂ„ remsa sĂ€ttas dit: fĂ€rgkod #ECECEC.
  • Egenskaper stĂ€lls in via kugghjulet, t ex i artikel-widget och kommande-evenemang-widget stĂ€lls in hur mĂ„nga objekt som ska visas.
  • Om widgeten har penn-symbol klickar du pĂ„ den för att redigera innehĂ„llet.
  • Widget som visar innehĂ„ll har istĂ€llet symbol för att redigera vad som hĂ€mtas. Klicka dĂ€r och dĂ„ öppnas sidan för uppgiften, t ex artikelbiblioteket. NĂ€r du Ă€r klar med det, klicka pĂ„ GĂ„ tillbaka och vi kommer tillbaka till redigeringslĂ€get.
  • Varje omrĂ„de Drop Here rymmer flera widgets, om sĂ„ önskas. Den andra widgeten kan placeras antingen över eller under den första widgeten. Dra den andra widgeten uppĂ„t och nedĂ„t Ă¶ver den första, tills du ser att ett grönt landningsomrĂ„de tĂ€nds dĂ€r du vill ha den, dĂ„ slĂ€pper du widgeten.
  • Tips pĂ„ nĂ„gra bra widgets:
    • För arbete med egen text och bilder klarar vi oss lĂ„ngt med bara dessa tvĂ„ frĂ„n gruppen Widgetar för text och bilder: Endast text, TvĂ„ textkolumner. I dessa gĂ„r det nĂ€mligen utmĂ€rkt att blanda text och bilder.
    • Carousels -> Dynamic Carousel (bildspelet överst pĂ„ hemsidan).
    • Widgetar som visar information -> Webbplatsartiklar. HĂ€mtar och visar senaste artiklarna: viktig del av informationsflödets automatisering! StĂ€ll in i egenskaper (kugghjulet) hur mĂ„nga artiklar som ska visas.
    • Widgetar som visar information -> Nyheter pĂ„ webbplatsen: HĂ€mtar och visar utvalda artiklar, dvs en statisk publicering. VĂ€lj artiklar genom att klicka pĂ„ widgeten och lĂ€gga till artiklar frĂ„n Artikelbiblioteket, eller ta bort artiklar frĂ„n widgeten.
    • Widgetar som visar information -> Contact us (en inbyggd sida (Built-in Page) med kontaktformulĂ€r).
      LĂ€s CR:s Instruktion för att redigera mottagare, dvs vem inom klubben som ska fĂ„ de mail som formulĂ€ret skickar.
    • Evenemang -> Kommande evenemang. StĂ€ll in i egenskaper (kugghjulet) hur mĂ„nga evenemang som ska visas. Obs att i sjĂ€lva evenemanget finns ocksĂ„ instĂ€llningar för visning, t ex att det inte ska visas pĂ„ hemsidan eller i kalendern.
    • Nyhetsbrev & PR -> Prenumerera pĂ„ nyhetsbrev (leder till prenumerationsformulĂ€r för icke-medlemmar).
    • Fritextwidget (global). Samma widget finns tillgĂ€nglig för alla sidor. Redigeras den pĂ„ en sida, dĂ„ Ă€ndras den samtidigt pĂ„ andra sidor dĂ€r den ingĂ„r. Perfekt för t ex info om klubben, mötestid etc som vi vill anvĂ€nda pĂ„ mĂ„nga sidor.
    • Fritextwidget (sidspecifik). Ger möjlighet till avancerad redigering (HTML-kod m m). En erfaren webbredaktör kan anvĂ€nda dessa genomgĂ„ende istĂ€llet för de enkla textwidgetarna.
       
  • VARNING för Artikel med bild till vĂ€nster/höger: Detta Ă€r ett format med fasta element (rubrik, ingress, bild, brödtext, lĂ€nkknapp) för ett statiskt innehĂ„ll. Formatet kan vara helt OK att anvĂ€nda för t ex en kampanj, men det blir inte en Artikel ("Story"), sĂ„ widgetens namn kan dĂ€rför leda till förvirring. 
Avancerad redigering
Fritextwidgets har en Redigera-symbol till vÀnster om kugghjulet. Den leder till en sida med avancerade redigeringsmöjligheter av widgeten, bl a kÀllkod (HTML).
 
För att bĂ€dda in t ex en Youtube-film anvĂ€nd fritextwidget och se CR supportsida (engelska).
 

Bildhantering

  • Ladda upp grundbilder till Image Library (vĂ€nsternavigeringen Webbplatsen -> Webbplatsens innehĂ„ll ->Bibliotek -> Image Library -> My Images).
  • Notera mapparna som redan finns med CR-bilder, Rotaryloggor och Rotarybilder! Rotarybilderna i CR:s Image Library och de som finns i MyRotary Brand Center kan anvĂ€ndas fritt i alla Rotarysammanhang, Ă€ven om lokalt prĂ€glade bilder Ă€r att föredra.
  • Missa inte "Branding" av bilderna - ladda bilden med Rotarybudskap.  En mycket anvĂ€ndbar webb-app för att lĂ€gga Rotaryloggor – People of Action-teman m m – pĂ„ bilder (Ă€ven egna bilder) Ă€r app.poaphotos.com Rekommenderas!
  • Bilder till artiklar, program osv kan laddas upp löpande under redigeringsarbetet.
    Tips: strukturera redan frĂ„n början bildfilerna i olika mappar under My Images, bl a eftersom de troligen kommer att anvĂ€ndas av flera av klubbens funktionĂ€rer under mĂ„nga Ă„r. 
  • Bildfilerna till Karusell-funktionen (redigera genom att klicka pĂ„ Karusell-widgeten pĂ„ hemsidan) laddas upp till den Karusellens redigeringssida (inte via My Images). För en snygg karusell gör alla bilder lika stora (t ex 1600 x 300 till 550 px).
    AnvÀnd nya Dynamic Carousel-widgeten, den har mÄnga anvÀndbara instÀllningsmöjligheter.
  • Klubblogga för webben (klubbnamnet till höger om hjulet) kan tillverkas pĂ„ https://brandcenter.rotary.org/en-GB/App/Approval/AdrenalineTemplate/Details/19 lĂ€nken mĂ„ste klistras in i webblĂ€saren (eller gĂ„ vidare till Logos -> Template).
  • LĂ€s mer om loggor och verktyg för att ta fram dessa i handledningen Grafik för Rotary.
  • Gör gĂ€rna ett klubbprojekt för att fĂ„ fram bra lokala bilder som lĂ€mpar sig för "brevlĂ„deformatet" och har bra upplösning för webbvisning. Dessutom ska klubben ha rĂ€tt att anvĂ€nda bilderna (fotografens upphovsrĂ€tt) och personerna pĂ„ bilderna ska medge det (GDPR). Se fina bilder hos rotary2390.se och deras klubbar!
Tips: se nedan om upphovsrÀtt!
 

Att göra nya sidor

Inbyggda fÀrdiga sidor
Bekanta dig med Built-in Pages, det finns mĂ„nga anvĂ€ndbara - vi behöver bara lĂ€nka en menypunkt till en Built-in Page, vips har vi en fĂ€rdig sida med bra information som hĂ€mtas frĂ„n sĂ„dant som redan finns i klubbens ClubRunner. 
 
I hemsidan som kom med CR-leveransen finns menypunkten Evenemang som visar just en inbyggd kalendersida med klubbens kommande evenemang. Se mer info om Built-in Pages pĂ„ supportsidan Webbmenyer.
 
Egna sidor
För att göra Custom Pages, börja med att skapa en egen sidmall (visas i filmen ovan) med en grundlayout utan widgets. DĂ„ blir den generellt enkel och snabb att göra nya sidor med.
 
En bra grundlayout pĂ„ en egen webbsida Ă€r den variant som har tvĂ„ spalter: smal till vĂ€nster och bred till höger.

Den globala widgeten för klubbinformation (VĂ€lkommen till oss) platsar i mallen (t ex i smala vĂ€nsterspalten) eftersom vi troligen vill ha den pĂ„ flera webbsidor, men lĂ„t i övrigt mallen vara tom.
 
ArbetsgÄngen för ny sida Àr
  • Skapa ny sida frĂ„n mall.
  • Ge sidan sitt unika namn i Egenskaper. HĂ€r kan du ocksĂ„ vĂ€lja om sidan ska vara publik eller krĂ€va inloggning.
  • Ändra vid behov layout.
  • Dra in lĂ€mplig widget och slĂ€pp pĂ„ ett landningsomrĂ„de.
  • Fyll widgeten med innehĂ„ll (text, bilder, lĂ€nkar), eller stĂ€ll in widgetens hĂ€mtning av innehĂ„ll.
NÀr sidan Àr skapad gÄr den att anvÀnda i menyer.
AlltsÄ: först sida, sen menypunkt.

Tips för nedladdningsfil

LĂ€nk till Link Type = Document Ă€r praktisk för att öppna ett dokument i webblĂ€saren (dvs en fil som finns bland ClubRunners dokument (Organisation/Dokument).
 
Men om klick pĂ„ lĂ€nken istĂ€llet ska utföra nedladdning av filen (t ex en medlemsansökan), dĂ„ mĂ„ste man justera HTML-koden. Gör sĂ„ hĂ€r:
  1. AnvÀnd en fritextwidget, sidspecifik (inte vanlig widget för text och bilder).
  2. LÀgg in lÀnken som vanligt.
  3. Klicka pĂ„ widgetens Redigera komponenten (se Widgets, Avancerad redigering ovan).
  4. Om du fĂ„r frĂ„gan Draft vs. Live: vĂ€lj Edit Draft version.
  5. Klicka knappen KĂ€lla (kĂ€llkodslĂ€ge). Leta upp lĂ€nken i HTML-koden och Ă€ndra den enligt syntaxen
    <a href="filnamn" download>

    Exempel: 
    Före Àndring
    <a href="documents/sv-se/9b44e4aa-fe18-4b26-a8b4-46054b874a84/1" target="_blank">Medlemsansökan</a>

    Efter Àndring
    <a href="documents/sv-se/9b44e4aa-fe18-4b26-a8b4-46054b874a84/1" download>Medlemsansökan</a>
  6. Klicka Save and publish och du Àr tillbaka i webbsides-editorn.
Widgetkoden kommer att flytta download-kommandot till före href, men Ă€ndring enligt ovan Ă€r enklast att göra.
 
OBS - var uppmĂ€rksam pĂ„ om det lĂ€nkade dokumentet krĂ€ver inloggning eller ej. Detta Ă€ndras vid behov genom att redigera dokumentets egenskaper i Organisation/Dokument.

Tips: övervĂ€g om minikalendern tillför nĂ„got för besökare till hemsidan. Om inte, lĂ„t nĂ„got mer informationsrikt innehĂ„ll anvĂ€nda den ytan!

Tips för kalendervy

Minikalendern gĂ„r inte att blĂ€ddra. Gör en lĂ€nk till den inbyggda sidan med kalendervy, vilken gĂ„r att blĂ€ddra och dĂ€r finns ocksĂ„ lĂ€nk för att prenumerera pĂ„ kalenderhĂ€ndelserna.
 
AnvÀnd en Fritextwidget (sidspecifik):
  • WidgetinstĂ€llningar
    • Visa inte kant
    • Visa inte rubrik
    • InnehĂ„ll Egenskaper/BakgrundsfĂ€rg: #ECECEC
  • Skriv in texten
  • Ändra till Font Arial, Fet
  • Infoga pilen i kĂ€llkodslĂ€ge (se Widgets, Avancerad redigering ovan) med HTML-kod &#8594;
  • LĂ€nka KALENDERVY till Built-in Page: Event Calendar
  • Stryk under KALENDERVY för att göra tydligt att det Ă€r en lĂ€nk
  • Ändra teckenfĂ€rg till #005DAA
  • Öka eventuellt Size pĂ„ pil och/eller text
 
MĂ„nga har "Kommande evenemang" eller "PĂ„ gĂ„ng" i sidmenyn, men dĂ„ ofta dĂ„ till Listvyn (Events List) med bilder. 
Ett modernt arbetsflöde
InnehĂ„llsflödet hĂ„lls igĂ„ng med artiklar och kommande program m m pĂ„ hemsidan utan att webbredaktören gör nĂ„gonting! Det rĂ€cker med behörighet 60 för att skriva och publicera artikel, man behöver inte vara administratör.
 
Arbetsfördelningen Àr att webbredaktören placerar widgetar för artiklar och evenemang samt stÀller in hur mÄnga objekt som ska visas. Andra funktionÀrer skapar innehÄll som automatiskt publiceras pÄ det sÀtt som webbredaktören har skapat förutsÀttningar för.
 
NĂ€r programkommittĂ©n publicerar program visas det i widgeten Kommande evenemang och nĂ€r andra funktionĂ€rer publicerar artiklar visas de i widgeten Artiklar, t ex pĂ„ hemsidan. Detta utan att webbredaktören behöver göra nĂ„got! Senaste artikeln puttar automatiskt ut artikeln som visas lĂ€ngst ner i listan och dĂ€rmed uppdateras webbsidans innehĂ„ll löpande (Ă€ldre artiklar visas fortfarande pĂ„ samlingssidan för artiklar, se supportsidan Artiklar).
 
ClubRunners potential som kommunikationsverktyg Àr mycket stor om klubbens webbplats har en genomtÀnkt struktur som förvaltas av webbredaktören, men att mÄnga funktionÀrer bidrar till innehÄllsflödet.
 
EXEMPEL pÄ hemsida med tre omrÄden som visar dynamiskt innehÄll, dvs hÀmtar innehÄll frÄn nÄgon annan funktion i ClubRunner, eller frÄn extern kÀlla:
 
 
  1. ARTIKLAR. Widgeten visar dynamiskt de senaste artiklarna. Publiceringen sker automatiskt nĂ€r ny artikel publiceras, t ex av sekreteraren. Om det instĂ€llda antalet artiklar Ă€r uppnĂ„tt, visas dĂ„ inte lĂ€ngre artikeln lĂ€ngst ner i spalten, men den fortsĂ€tter att visas pĂ„ samlingssidan för artiklar. 
    Behörighet för att skriva och publicera artikel: 60 eller högre.
     
  2. KOMMANDE EVENEMANG (program). Widgeten visar dynamiskt kommande evenemang. Publiceringen sker automatiskt nÀr nytt evenemang lÀggs in av t ex programansvarig och tas automatiskt bort frÄn visning nÀr evenemangsdagen har passerat.
    Behörighet för att lĂ€gga in evenemang: 60 eller högre.
     
  3. RI-nyheter (extern kĂ€lla). Widgeten hĂ€mtar nyhetsflödet frĂ„n RI och uppdateras automatiskt. Den kan t o m visa flera nyheter i en animerad horisontell scroll.
TÀnk pÄ upphovsrÀtten!

AnvĂ€nd bara bilder som klubben har rĂ€tt att publicera och sprida. Det finns juridiska tjĂ€nster som Ă€r specialiserade pĂ„ att krĂ€va ersĂ€ttning för bilder som publicerats utan tillstĂ„nd och det gĂ„r inte att bortförklara anvĂ€ndningen av en bild som publicerats pĂ„ klubbwebben och kanske ocksĂ„ delats i sociala media. 

Du kan leta licensfria bilder t ex pĂ„ "free clipart", "royalty-free", "free images" osv. NĂ€r du googlar fram bilder, filtrera licensformer m h a Verktyg/AnvĂ€ndningsrĂ€ttigheter.
Supportmeny ClubRunner

SUPPORTCENTER

(pÄ engelska)

Utnyttja gÀrna ClubRunners stora kunskapsbank.

DÀr finns bl a videoinstruktioner för mÄnga situationer och CR-funktioner.
 
PĂ„ svenska m h a Google Translate - men frĂ„gorna mĂ„ste skrivas pĂ„ engelska. 
FĂ€rgkoder

Rotary Leadership Colors enligt RI visual guidelines:

LjusblĂ„ (Sky Blue) #019FCB
MellanblĂ„ (Azure) #0050A2
MörkblĂ„ (Royal Blue) #0C3C7C
Guld (Gold) #F7A81B
 
Övrigt:
GrĂ„ bakgrund i widgetrubriker #ECECEC
Mer tips, Resurser on-line
Överkurs
AnvÀnd Bootstrap-kod för att avancerad layout