Administration af hkkbhbest.dk

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

2. Farveforklaring Om kurset, indholdet og øvrigt. Generel information 1 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

3. Hvad er Umbraco? UmbracoCMS 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

4. 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

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

6. hkkbhbest.dk/umbraco/default Adgangskode hkbhtorp11 Brugernavnadmin Logininformationer | Guide til administration af website

7. Hvordan er Umbraco? 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

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

9. 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

10. 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

11. 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

12. Hvad er formålet? 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

13. Hvad skal vi? 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

14. Program 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

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

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

17. hkkbhbest.dk/umbraco/default Adgangskode 3030 BrugernavnBIF Logininformationer | Guide til administration af website

18. 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

19. 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

20. 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

21. 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

22. 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

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

24. Uden mad og drikke… [Frokost]

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

26. 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

27. 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

28. 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

29. Pause… [Frisk luft til de trængende]

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

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

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

33. Ønsker og rettelser? [Hjemmesiden i morgen?]

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

35. Videohjælp 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