Administration af hkkbhbest.dk Guide til brug ved kursus onsdag den 16. februar 2011

Farveforklaring 1 2 3 Generel information Forklaring og gennemgang Om kurset, indholdet og øvrigt. 2 Forklaring og gennemgang Gennemgang og præsentation af systemet. Systemet i praksis 3 Løsninger af praktiske opgaver i forbindelse med sitet. Farveforklaring | Guide til administration af website

Hvad er Umbraco? CMS: [Control Management System] Umbraco CMS Umbraco CMS er et open source CMS baseret på .NET-teknologien. Umbraco CMS kom til verden i Danmark i 2004 og har siden udviklet sig til i dag at være blandt de 15 mest anvendte open source .NET-applikationer. En af Umbracos primære egenskaber er den simple og intuitive brugerfalde som sikrer webredaktøren et lettilgængeligt CMS. CMS: [Control Management System] Umbraco | Guide til administration af website

Start af Umbraco? Umbraco – et online værktøj Umbraco CMS ligger på den server/webhotel, der er tilknyttet domænet. Det er tilgængeligt fra alle kilder med internet. PC’er, PDA’er, mobiltelefoner og andre produkter med adgang til internettet. Det eneste du behøver at vide er adressen på administrationsdelen. Umbraco | Guide til administration af website

Umbraco Login Sidens adresse er: hkkbhbest.dk/umbraco/default

hkkbhbest.dk/umbraco/default Adgangskode hkbhtorp11 Brugernavn admin Logininformationer | Guide til administration af website

Hvordan er Umbraco? [hkkbhbest.dk/umbraco/default] Om Umbracos opbygning Umbraco CMS er opbygget på en måde, der minder lidt om de styresystemer vi kender fra vores egne computere. – En stifinder til filnavigation og ikoner, der hver symboliserer forskellige områder [hkkbhbest.dk/umbraco/default] Umbraco | Guide til administration af website

Umbraco Opbygning Værktøjer Indhold Sider/Filer Sektioner

Sektioner Om Umbracos sektioner Gennem Umbraco er det muligt at tilgå alle dele af hjemmesiden. Det gælder både den tekniske del, hvorfra sideskabeloner og dokumenttyper kan editeres og alle indhold kan redigeres og opdateres. Ligesom det er muligt at ændre alle designrelaterede dele af hjemmesiden og styre adgang og rettigheder til respektive brugere af systemet. Forklaring af Sektioner | Guide til administration af website

Sider/Filer Om Umbracos Sider/Filer De fleste, der har arbejdet med styrestystemer kender denne form for filnavigation. Umbracos system er et bygget på samme principper som tifinder og ligendende. Med overliggende mapper med underliggende mapper med filer osv. Disse kan slås helt ud, så det totale overblik opnås over indholdet af den enkelte mappe/side. Forklaringer af Sider/Filer | Guide til administration af website

Indhold Om Umbracos indholdssektion Den del, der vedrører selve indholdet på siderne ligger i denne sektion. Indholdet er opdelt efter sideskabelonens områder. Topbillede Venstremenu Indhold Højreside Værktøjslinien er i øvrigt tilgængelig og kan bruges i forbindelse med opsætning af tekst, links og billeder. Forklaring af indholdsdelen | Guide til administration af website

Hvad er formålet? Umbraco = Total kontrol Formålet med Umbraco Med et øget behov for at kunne styre mere eller mindre alt på et website følger en række krav til opbygningen. Umbraco gør det muligt at lave underliggende områder, der styres af enkeltpersoner med egne behov. Alt er tilgængeligt for alle online – og sitet kan administreres af flere på samme tid. Med et hav af øvrige muligheder og features er sitet som udgangspunkt sikret i forhold til ændringer, fremtidige ønsker og brugere. Umbraco = Total kontrol Formålet med Umbraco | Guide til administration af website

Hvad skal vi? [Bliv tryg ved at bruge systemet] Efter kurset Med dette dagskursus bliver hver enkelt bruger i stand til at ændre, oprette filer og sider. Uploade og linke dokumenter. Formatere tekst og farver – adminstrere filer og billeder samt redigere standard HTML-kode. Altså alt, hvad der umiddelbart er behov for vedrørende administration af siderne på hkkbhbest.dk. [Bliv tryg ved at bruge systemet] Efter kurset | Guide til administration af website

Program [Ændringer kan forekomme ] 01 – Kort indledning og præsentation af systemet 02 – Support og adminside – tilgængeligt materiale 03 – Basisforløb – login, områder i Umbraco 04 – Opgaver 1-5 05 – Spørgsmål og svar 06 – Frokost 07 – Opsamling på basisforløb 08 – Avanceret forløb – HTML, navitaion med mere. 09 – Opgaver 6-10 10 – Pause 11 - Spørgsmål og svar 12 - Hjemmesidens anvendelse for den enkelte klub 13 - Foventninger og mål for de respektive sider - kortsigtet 14 - Ønsker, rettelser og andet. 15 - Afslutning med henvisninger til videoer, opgaveark og mine informationer. [Ændringer kan forekomme ] Program for onsdagen | Guide til administration af website

Lad os lave den hjemmeside vi alle ønsker! [Defination af indhold til klubsider] Efter kurset | Guide til administration af website

Inden vi starter gå til hkkbhbest.dk/support og download testfilerne. [www.hkkbhbest.dk/support] Opgave 1 af 5 – Redingering og publicering| Guide til administration af website

hkkbhbest.dk/umbraco/default Adgangskode 3030 Brugernavn BIF Logininformationer | Guide til administration af website

1/8 Redigering og publicering Find og klik på klubbens side med navnet „Om klubben“ Du finder den i sektionen til venstre. Forside/Klubberne/(Din Klub)/Om klubben Skriv indholdet til siden. Beskriv klubben som du ønsker det i teksten. Markér overskriften og vælg ”Typografier” i værktøjslinien. Vælg formatet ”Overskrift”. Gem og publicér siden. Når du er tilfreds med indholdet klikkes på knappen ”Gem og publicér” symboliseret med en diskette og jordklode. Kontrol af den nye version. Vælg fanen ”Egenskaber” over værktøjslinien. Klik på linket med titlen ”Alternative links”. Tryk eventuel F5, hvis ændringerne ikke vises i første omgang. Find og klik på klubbens side med navnet „Medlemmer“ Du finder den i sektionen til venstre. Forside/Klubberne/(Din Klub)/Medlemmer Skriv indholdet til siden. Læg informationer om jer selv i tabellen. Markér navnene enkeltvis og vælg ”B”, så en bliver fede. Gem siden. Når du er tilfreds med indholdet klikkes på knappen ”Gem” symboliseret med en diskette. Nu er indholdet og siden gemt – men ikke publiceret online endnu. Kontrol af den nye version. Klik på knappen ”Se siden” i værktøjslinien – symboliseret med et dokument med et forstørrelsesglas på. Opgave 1 af 5 – Redingering og publicering| Guide til administration af website

2/8 Upload af filer Find og klik på sektionen med navnet „Media“ Du finder den til venstre i bunden af siden. Den er angivet med et ikon og teksten ”Media”. Opret mappe. Højreklik på mappen med dit klubnavn. Vælg ”Opret”. Skriv ”dokumenter” som navn. Sørg for der står ”Folder” som mediearkiv. Tryk ”Opret”. Opret fil i mappen Højreklik på mappen du netop har oprettet. Vælg ”Opret”. Skriv ”Testdokument” som navn. Sørg for der står ”File” som mediearkiv. Tryk ”Opret”. Upload din fil Klik på knappen ”Vælg arkiv”og find filen ”Testdokument”. Klik herefter på ”Gem” i form af diskettesymbolet i topppen. Højreklik på klubmappen og vælg ”Genindlæs elementer”. Kopier dokumentet Gentag processen endnu en gang. Sletning For at slette din kopi af dokumentet skal du højreklikke på filen og vælge ”Slet” og efterfølgende OK. Markér navnene enkeltvis og vælg ”B”, så en bliver fede. Ændring af navn Klik på din fil. Vælg fanen ”Egenskaber” og indtast dit nye filnavn. Tryk herefter på ”Gem” for at foretage ændringen. Dette har IKKE indflydelse på allerede eksisterende links til dette dokument! Kontrol af link til dokument. Under ”Egenskaber” kan du ligeledes tjekke om linket og dokumentet fungere korrekt ved at klikke på linket vist med blå tekst. Dokumentet hentes i et nyt vindue. Opgave 1 af 5 – Redingering og publicering| Guide til administration af website

3/8 Links internt og eksternt Find og klik på sektionen med navnet „Content“ Du finder den til venstre i bunden af siden. Den er angivet med et ikon og teksten ”Content”. Navigér frem til siden „medlemmer“ under din klubside. Her er siden med dine ændringer fra sidst. Markér klubnavnet i teksten og vælg ”B” i værktøjslinien. Nu er teksten fremhævet. Link til tekstdokumentet. Markér teksten ”Excel-dokument” og tryk på knappen ”Indsæt/redigér link”. Symboliseret med en lænke. Vælg fanen ”Mediearkiv” og navigér frem til dit netop oprettede dokument.” Klik på filen. Opret linket. Indtast navn på filen. Vælg ”Åben i nyt vindue” ved ”Target”. Tryk herefter på knappen ”Indsæt” i bunden af vinduet. Gem og publicér siden og kontrollér som tidligere. Link til andre sider på hkkbhbest.dk Marker teksten ” Indsæt link til forsiden.” i bunden under tabellen. Skriv ”Gå til forside.” Marker ordet ”forside”. Tryk på ”Opret/redigér link”-ikonet i værktøjslinien. Find den ønskede side. Navigér frem til din klubforside under ”Klubberne” og klik på den. Sørg for at der står ”Åben i dette vindue/ramme” under ”Target”. Klik på indsæt. Link til eksterne sider/filer Marker teksten ” Indsæt link til HK’s hjemmeside.” i bunden under tabellen. Skriv ”Gå til HK Kommunal.” Marker ordet ”HK Kommunal”. Tryk på ”Opret/redigér link”-ikonet i værktøjslinien. Indsæt linket/URL‘en. Indtast eller sæt URL’en ind. Navngiv linket. Vælg hvordan siden skal åbnes og tryk indsæt. Herefter publiceres og kontrolleres. Opgave 3 af 5 – Links internt og eksternt| Guide til administration af website

4/8 Opret og kopiér sider Find og klik på klubbens forside. Højreklik og tryk ”Opret”. Skriv ”Dokumenter” og lad der stå ”Content” under dokumenttype. Tryk ”Opret”. Siden er nu oprettet. Indhold til siden. Kopiér alt fra siden ”medlemmer”. Først banner, så venstremenu, indhold og til sidst højreside. Brug Ctrl+A for at vælge alt, Ctrl+C for at kopiere og Ctrl+V for at indsætte. Gem efter hver del. Skjul i menuen. Alle sider kan skjules. Det vil sige at de ikke er synlige i sidemenuen. (Den sorte menu i toppen). Vælg fanen ”Egenskaber” og sæt hak ved ”Ja” ved punktet ”umbracoNaviHide” i bunden. Slet siden. Højreklik på siden og tryk ”Slet” – og OK. Kopiér hele sider. Mange gange er det nemmere bare at kopiere en eksisterende side. På den måde får du både banner, venstremenu, indhold og højreside med på én gang. Derefter kan siden redigeres efter behov. Start med at vælge den side du vil kopiere. Højreklik og vælg ”Kopiér”. Vælg den side den skal ligge under, som i dette tilfælde er klubforsiden og tryk OK. Luk vinduet. Ændring af navn Vælg fanen ”Egenskaber” og angiv det nye navn. Gem herefter og vælg fanen ”Indhold”. Og siden er nu klar til redigering og eventuel publicering. Opgave 4 af 5 – Opret og kopiér sider| Guide til administration af website

5/8 Billeder og ankerpunkter Find og klik på sektionen med navnet „Media“ Du finder den til venstre i bunden af siden. Den er angivet med et ikon og teksten ”Media”. Opret mappe. Højreklik på mappen med dit klubnavn. Vælg ”Opret”. Skriv ”Billeder” som navn. Sørg for der står ”Folder” som mediearkiv. Tryk ”Opret”. Opret fil i mappen Højreklik på mappen du netop har oprettet. Vælg ”Opret”. Skriv ”Testbillede” som navn. Sørg for der står ”Image” som mediearkiv. Tryk ”Opret”. Upload din fil Klik på knappen ”Vælg arkiv”og find filen ”Testbillede”. Klik herefter på ”Gem” i form af diskettesymbolet i topppen. Højreklik på klubmappen og vælg ”Genindlæs elementer”. Navigér frem til klubforsiden. På denne side er der allerede oprettet en nyhed. Denne kan redigeres som ønsket. Skriv en billedtekst ”Mit testbillede” og gem siden. Indsæt billede Sæt cursoren under billedteksten og tryk på knappen ”Indsæt/redigér billede”. Symboliseret med et lille foto. Navigér frem til dit netop oprettede billede.” Klik på filen. Angiv eventuelt en titel til billedet og tryk ”Indsæt”. Indsæt anker Sæt cursoren ved den nederste nyheds titel og klik på værktøjet ”Indsæt/redigér anker”. Navngiv ankerpunktet ”Testanker”. Nu kan du se at der er indsat et anker på siden ved titlen. Opret linket. Markér billedet og tryk på link-værktøjet. Vælg siden og vælg ankerpunktet og tryk indsæt. Publicér og test. Ankerpunkter kan også være på alle andre sider på hkkbhbest.dk Opgave 5 af 5 – Billeder og ankerpunkter| Guide til administration af website

Spørgsmål og svar [Spørgsmål vedrørende opgave 1-5] Spørgsmål og svar| Guide til administration af website

Uden mad og drikke… [Frokost]

Opsamling Basisfunktioner i Umbraco. Spørgsmål og svar| Guide til administration af website

6/8 HTML kode og redigering Navigér frem til siden „medlemmer“ under din klubside. Her er siden med dine ændringer fra sidst. Stil cursoren i tabellen et vilkårligt sted. Klik på værktøjet ”Redigér HTML-kilde” symboliseret med HTML i værktøjslinien. Slet en række fra tabellen Scroll helt ned. Her ser du følgende: <tr> <td><span class="standard05">Navn Efternavn</span></td> <td><span class="standard05">Funktion</span></td> <td><span class="standard05">Område</span></td> <td><span class="standard05">T 9999 9999</span></td> </tr> Marker hele sektionen med musen og slet. Tryk herefter på opdatér. Vil du tilføje endnu en række markeres og kopieres sektionen, hvorefter den indsættes efter det sidste </tr>. Tryk ”Opdatér” og rækken kan redigeres. Du kan indsætte forkellige HTML-tags i koden. Her finder du de mest anvendte koder. <TAG>En sætning</TAG> Eksempel på en HTML-tag start og slut. Eksempler – forsøg at indsætte nogle af dem. <b> - Fed tekst <i> - Kursiv <u> - understreget <center> - Centreret <font color=”Red”> - Rød tekst <font face=”Georgia”> - Georgia skrift <s> - Overstreget tekst Se mere på www.html.dk Opgave 1 af 5 – Redingering og publicering| Guide til administration af website

7/8 Venstremenu Find siden „Om klubben“. Scroll ned til området med venstremenuen. Her er der allerede defineret tre knapper. Du skal nu tilføje en knap via HTML. Opret knap. Stil cursoren et vilkårligt sted i vinduet. Vælg ”HTML”-værktøjet. Marker nedenstående: <li class="purple"><a href="/{localLink:1265}" title="Dokumenter">Dokumenter</a></li> (Dette er den nederste knap i HTML-kode.) Kopiér og sæt ind efter det sidste </li>. Nu kan du ændre farven og teksten på knappen. Pink, Purple, Green, Blue, Orange og Brown er pt. tilgængelige. Teksten er omringet af >Tekst<. Klik på ”Opdater”, tjek ændringer med ”Se siden” i værktøjslinien. Slet knap. Marker den linie HTML-tekst, der svar til den knap du vil slette og fjern den. Opdatér herefter. Link på knappen Marker teksten på selve knappen. Brug herefter link-værktøjet til at finde den ønskede side som knappen skal pege på. Opgave 1 af 5 – Redingering og publicering| Guide til administration af website

8/8 Redigér i canvas og emaillink Find og klik på sektionen med navnet „Content“ Du finder den til venstre i bunden af siden. Den er angivet med et ikon og teksten ”Content”. Navigér frem til siden „medlemmer“ under din klubside. Her er siden som du har set nogle gange efterhånden. Højreklik på siden i navigationen og vælg ”Redigér i canvas”. Redigér siden med det fulde overblik. Nu kan du ved at dobbeltklikke på områderne redigére direkte på siden. Det kan være en fordel, hvis man ønsker at se resultaterne med det samme og samtidig vil have det fulde overblik over siden. Knapperne Det røde kryds betyder IKKE luk vinduet! – Det betyder ”Slet siden”. ”Gem” eller ”Gem og publicér” eller vælg blot at lukke hele vinduet på traditionel manér hvis du ikke har ændringer. Link til emailadresse Marker et navn under ”medlemssiden”. Tryk på ”Opret/redigér link”-ikonet i værktøjslinien. Indtast adresse. Skriv følgende: mailto:navn@email.dk i feltet URL. Sørg for at der står ”Åben i dette vindue/ramme” under ”Target”. Klik på indsæt. Publicér og test. Det er ikke anbefalet at skrive selve adressen på et website, da internetrobotter kan opsamle disse til spam eller anden form for misbrug. Hvis man ikke ønsker at åbne brugerens emailklient er det naturligvis nødvendigt at skrive adressen, men det kan i så fald gøres således: navn[snabel-a]email.dk eller navn[at]email.dk Opgave 3 af 5 – Links internt og eksternt| Guide til administration af website

Pause… [Frisk luft til de trængende]

Opsamling Basisfunktioner i Umbraco. Spørgsmål og svar| Guide til administration af website

Spørgsmål og svar [Spørgsmål vedrørende opgave 6-8] Spørgsmål og svar| Guide til administration af website

Forventninger og mål? [Hjemmesiden om en måned?]

Ønsker og rettelser? [Hjemmesiden i morgen?]

Support og vejledning? [www.hkkbhbest.dk/support]

Videohjælp Vejledning Om hjælpevideoer Der er produceret hjælpevideoer, som viser i praksis hvordan forskellige opgaver løses i forbindelse med administration af sitet. De er ikke med speak – men der er en vejledende tekst i bunden af videoen. Videoerne vil være tilgængelige på hjemmesiden på adressen: hkkbhbest.dk/support Vejledning Hjælpevideoer | Guide til administration af website