Oprettelse og vedligeholdelse af ejendomsmæglers egen hjemmeside Før du går igang ................................................................................................................................................. 2 Sådan kommer du ind i cms-systemet. ......................................................................................................... 2 Princippet i at arbejde i et cms ...................................................................................................................... 3 Upload og administration de billeder, du vil bruge på hjemmesiden ........................................................... 4 Forklaring af ”Content” ..................................................................................................................................... 7 Gem og offentliggør side ............................................................................................................................... 7 Fanen Tekst.................................................................................................................................................... 8 Fanen SEO ...................................................................................................................................................... 8 Fanen Menuvisning ....................................................................................................................................... 9 Fanen egenskaber.......................................................................................................................................... 9 Rediger din forside ........................................................................................................................................ 9 Indsæt billedet på hjemmesiden ................................................................................................................. 10 Indsætte Youtube og andre multimedier. ................................................................................................... 11 Oprettelse af undersider ................................................................................................................................. 12 Skabelon: MaeglerForside ........................................................................................................................... 15 Skabelon: MaeglerStandardSide (Uden Navihide) ...................................................................................... 16 Skabelon: MaeglerEjendomme ................................................................................................................... 18 Skabelon: MaeglerMedarbejdere................................................................................................................ 19 Skabelon: MæglerBlog................................................................................................................................. 20 Skabelon: MæglerBlogUdenBillede ............................................................................................................. 22 Skabelon: MaeglerStandardSide (Med Navihide) ....................................................................................... 24 Eksempel: Oprettelse af Blogs – f.eks. Medarbejdere, samarbejdspartnere m.m. ........................................ 25 Sidst opdateret 8. oktober 2012 Side 1 Før du går igang På den nye hjemmeside foregår al redigering af hjemmesiden i et cmssystem. Sekretariatet har opsat cms’et så det videst muligt tilgodeser dine behov for at redigere hjemmesiden. Inden du kan oprette din hjemmeside skal du være oprettet som bruger i cms-systemet. Det gør vi her fra sekretariatet. Derudover skal du være oprettet som bruger på infosiden. Følgende oplysninger kan dog pt. ikke rettes i cms’et: • • • Firmanavn, adresse, telefonnummer, email. Revirområde. Adressekoordinat på krakkort. Sådan kommer du ind i cms-systemet. • • Afhængig af om du kommer fra BoligOne eller RealMæglerne skal du gå ind på websiden og tilføje /umbraco/ til adressen. F.eks: http://demo.realmaeglerne.dk/umbraco/ Indtil offentliggørelsen er der tilføjet ”demo.” foran adressen. Indtast det udleverede brugernavn og adgangskode: ’ Side 2 • Du skulle derefter se følgende side: Du kan herfra: - Oprette, redigere og slette sider inden for dit eget butiksnummer - Oprette og slette billeder inden for dit eget butiksnummer. Billeder bliver automatisk komprimeret og systemet har også visse billedehåndteringsværktøjer, således at du skal foretage dig minimalt arbejde for at sætte et billede ind. Princippet i at arbejde i et cms Måske er det første gang du arbejder i et cms-system. CMS står for ”Content management System”. Oversat til dansk: ”Indholds-styrings-system” Dine sider vil være baseret på nogle skabeloner. Skabelonerne er designede her fra sekretariatet. Du har på hver side som udgangspunkt mulighed for at indsætte: overskrift, tekst og evt. billeder. Som udgangspunkt skal du undgå at arbejde for meget med skrifttyper, da de er defineret på forhånd i layoutet. Der er også sat en del begrænsninger for hvad du må. Tekstredigeringen foregår i en WYSIWYG (What you see is what you get) editor. På “menneskesprog” er tale om et redigeringsprogram som har stor lighed med MS-Word, som du sikkert kender i forvejen. Kender du andre CMS-systemer vil du genkende redigeringsprogrammet. Det anvendes i mange andre systemer. F.eks. Joomla. Sidestrukturen minder lidt om at arbejde i en stifinder. Og denne struktur afspejler sig i menustrukturen. Systemet er forberedt med nogle specielle skabeloner som du ikke kan redigere. F.eks. funktionen som viser dine ejendomme. Side 3 Målet er at vi fra sekretariatet forbereder din første side. Herefter vil du selv kunne redigere denne samt oprette undersider manuelt. Upload og administration de billeder, du vil bruge på hjemmesiden Håndteringen af billeder i umbraco foregår ved først at uploade billeder til en tildelt billedemappe i systemet. Herfra kan billederne anvendes til forskellige formål, f.eks.: • • • Stort billede i toppen. Billede over overskrift. Billede inkluderet i tekstområdet. Dette er på mange måder den måde du har arbejdet på i det tidligere cms i ”databasen”. Ved upload af billede bliver der automatisk foretaget en indledende skalering og komprimering af billedet, således at de ikke kommer til at fylde for meget på hjemmesiden. Samtidig findes en speciel facilitet som tilretter billedet til en bestemt størrelse. Find et billede der skal uploades Måske har du nogle billeder på den gamle hjemmside, som du vil genbruge. (med mindre du har billeder liggende i originalformat på din computer) Dette gøres på følgende måde: • • • Højreklik på billede I genvejsmenuen vælger du ”gem billede som” Vælg / opret en passende mappe at gemme billedet i. Upload billede til mediamappen. For at uploade et billedet ind i cmssystemet vælge funktion Media Højreklik på mappen Mediearkiv og klik på ”Opret”. Side 4 • • Vælg folder hvis du vil oprette en undermappe til billeder. Vælg Image, hvis du vil opret et billedeelement. Der skal altid oprettes et billedeelement før billedet uploades. Hvis du vælger ”Image” oprettes et billedeelement som her vist – en tom skuffe, klar til at du kan lægge et billede ned i den. I dette billede kan du klikke på gennemse og vælge det ønskede billede. Klik på disketten for at Gemme/Uploade det valgte billede. Her har jeg uploadet et billede. Når et billedet bliver brugt på hjemmesiden i forskellige højre / brede formater, vil Umbraco forsøge at beskære billedet for dig. Men for at sikre at billedet bliver beskåret så hensigtsmæssigt som muligt, kan du sætte ”Den røde næse”. Formålet med denne røde prik er at fortælle Umbraco, hvad der er det vigtigste i billedet, og dermed, hvad der helst ikke må blive beskåret væk. Træk den røde prik hen, så den er oven på dét, der er fokus i billedet. På nogle sider vil billedet blive automatisk beskåret, og den røde prik angiver et ”centrum” for, hvad der er ”interessant” på billedet. I dette eksempel, er billedet i ”bredformat” og den ”Røde næse” her sat ved husets venstre kvist. Side 5 Når billedet bliver brugt på hjemmesiden, har det følgende konsekvenser: Forsidefoto (4:3 format) Eftersom jeg med den røde prik har ”prioriteret” kvisten, forsøger Umbraco at få mest muligt at kvisten med. Bemærk, at kvisten dog ikke er centreret. Endnu mere tydeligt bliver det, når billedet skal bruges som protrætfoto. Her ses tydeligt, at kvisten er valgt, som det vigtigste i billedet. I nederste del ser du billedet, du netop har uploadet sammen med en rød prik. Meningen er at du på meget let måde kan indsætte og anvendet et billede i systemet. Som standard forsøger systemet at få billedet til at fylde hele billederammen. For at gemme billedet med den røde pril, skal du klikke på igen. Sletning af billeder Undgå at slette billeder i mediasektionen, med mindre du er helt sikker på at billedet ikke bruges nogen steder. Formålet med anvendelse af mediabiblioteket er også at et billedet kan genbruges. Evt i flere dimmensioner. Hvad må du ikke? Der er to ting, vi har set et par mæglere ”lege” med, men som du ikke bør pille ved: Side 6 Lad være med at omdøbe din forside Dit butiksnummer er ”navnet” på din forside. Dette må du ikke ændrer, da man i givent fald ikke kan finde din butik f.eks. på kortet, og vi kan ikke lave henvisninger til dine sager. Boliger til salg (Og erhverv, og leje…) Disse sider er kædestandarder, og du bør ikke ændrer på dem! Forklaring af ”Content” Gem og offentliggør side Husk at gemme!! Som rådet også lyder i MS-Word skal du huske at gemme. Der er 3 vigtige knapper du skal kende i værktøjslinjen. Vis side. Virker også før offentliggørelse, dog vises enkelte detaljer ikke korrekt, f.eks. dit navn, adresse, åbningstider og revirområder. Gem og offentliggør side. Gem side. Siden gemmes, men rettelserne offentliggøres ikke. Side 7 Du må MEGET GERNE allerede nu offentliggøre dine sider – de vil først blive fanget af Google, når vi offentliggøre siderne. Fanen Tekst Fanen ser ens ud i alle skabeloner, men det er ikke alle felter, der bliver vist i alle skabeloner. • • • • Top billede: Her kan du indsætte billeder, der vises øverst på siden (Se mere om upload af billeder herover). Billede 1: Her kan også indsættes billeder. Ikke alle skabeloner viser de cmsOverskrift 1: Overskriften på siden. cmsText1: Brødteksten skrives her. Dvs. teksten du vil have på forsiden. Du bør vides muligt undgå at laver overskrifter i tekstfeltet, da vi dermed sikrer at overskriften kommer til at stå korrekt på siden. Fanen SEO Alle sider du laver bør være søgemaskineoptimerede. I korte træk går det ud på at du har skrevet i feltet title og description. Men det har også noget at gøre med hvordan du skriver teksten. Mere om det senere. • • seoTitle: Bør indeholde noget der søges på. Et eksempel kunne være ”Ejendomsmægler i Brøndby. RealMæglerne Peter Petersen”. Title bør maks. Være på ca. 60 tegn. Det første ord i title har størst betydning for googlesøgninger. seoDescription: Ofte når du laver en søgning i Google ser du et udsnit fra description i søgeresultatet. Specielt hvis brugeren har søgt på noget der står i title-linjen. F.eks. ”Ejendomsmægler Brøndby”. Undlader du at skrive i description risikerer du at søgeresultatet Side 8 indeholder underlige fragmenter fra menuen o.l. Kort sagt: seoDescription skal udfyldes med et resume af indholdet på siden. max. Ca.250 tegn. Men det vigtigste er at der står noget fornuftigt i feltet. Fanen Menuvisning Dette faneblad styrer, hvordan siden ”opfører sig”, når den bliver vist på nettet. • • • umbracoNaviHide: Bruges til at ”skjule” en underside fra menuen i venstre side. Dette kan f.eks. være formålstjenstligt, hvis en side består af flere elementer – f.eks. når én side skal vise alle medarbejderne. umbracoBlog: Angiver, at dette er en del af den overordnede hjemmeside. F.eks. at denne blog vedrører en bestemt medarbejder. I dette eksempel, er ”Hanne” og ”Martin” f.eks. oprettet i hver sin umbracoBlog. umbracoBlogLink: Bruges ikke noget. Fanen egenskaber Angiver nogle ”baggrundsoplysninger” om siden. Ikke alt er relevant at gennemgå her, så jeg vil nøjes med at nævne: • • • Navn: Giver siden et navn. Dette punkt bliver også brugt, hvis der ikke er sat flueben i ”Navihide”, således at ”Navn” vil fremgå af menuen i venstre side. Skabelon: En skabelon er et forud defineret sidelayout som vi har lavet på sekretariatet. Der kommer sikkert flere med tiden. Læs en detaljeret gennemgang af skabelonerne og hvordan de bruges under ”Oprettelse af undersider”, side 12. Udgivelses- og nedtagningsdato: Kan især bruges, hvis du f.eks. kører en kampagne i en periode. Selvom du offentliggør siden, vil den ikke blive vist, før udgivelsesdatoen, og tilsvarende behøver du ikke huske at nedtage den, når kampagnen er overstået. Rediger din forside En god ”øvelse” for lige at komme i gang, er at tilrette din forside. Din forside side er allerede oprettet. Den har dit butiksnummer som navn. Hvis du klikker på ”Content” i menuen til venstre, og Side 9 vælger butiksnummeret i venstre side skulle du se følgende. Her vil vi gennemgå nogle af de muligheder, du har med din forside. Forsiden kræver et billede. Der er indlæst et standardbillede fra start, indtil du selv får fundet bedre billeder som passer til din side. Indsæt billedet på hjemmesiden Gå ind på den ønskede side. I toppen er der 2 felter til billeder • • Topbillede: Er det ”store” billede oven over teksten. Billede1: Bliver vist sammen med teksten nede i ”indholdet” på siden (Bemærk: Billede1 anvendes ikke på forsiden). Topbillede, er det billede, der anvendes på forsiden samt over overskriften. • • Klik på vælg ud for topbillede. Vælg det ønskede billede i billedevælgeren. • På CMS-siden kan du se at der er valgt et billede Side 10 Afsluttende skal du blot gemme og offentliggøre. Så er siden klar. Slette billede fra hjemmesiden Vil du slette billedet igen skal du blot klikke på slet. Nogle steder erstattes billeder med standardbilleder, meden billedesektionen andre steder fjernes komplet. Indsætte Youtube og andre multimedier. Der er oprettet en funktion i editoren hvor du kan indsætte YouTube og andre multimedier. Funktionen understøtter dog ikke flash. Til dette formål bliver der senere udviklet en anden funktion. Princippet i anvendelse af YouTube. Når du eller en leverandør gemmer en video i YouTube gemmes data på en ekstern server et sted i verden. Dette system er specialiseret i håndtering af de meget store mænger data dom en videofilm kræver. Vil du have YouTube på din hjemmeside skal du således blot referere til den adresse som videoen har på YouTube. Når du har fundet videoen skal du klikke på knappen [Del] lige under videoen. Dette gør, at du får et link frem, som du kan kopiere. I Umbraco vælger du under ”Content” den side, hvor videoen skal sættes ind, og sætter markøren dér, hvor videoen skal vises. Side 11 Derefter klikker du på makroknappen. En dialogboks kommer frem. Vælg ”[uTube] Classic Player” og klik på OK. Udfyld følgende parametre. Width: Max 420 – 420 er nemlig sidebredden for to spalter. Video Id: Den del af linket fra før, som står efter første skråstreg. Var linket f.eks. http://youtu.be/zFF_cPtlY78, skal du derfor kun skrive: zFF_cPtlY78. Video Hight: For ”Widescreen”, angiv ”236” sin højde. Udfylder du ikke noget, bliver videoen automatisk vist i 4:3 format. Gem og offentliggør siden. Oprettelse af undersider Vil du oprette en underside skal du under funktionen Content højreklikke på dit butiksnummer og vælge ”Opret”. Du ser nu en dialogboks. Dokumenttypen skal, med mindre andet er anvist, altid være Mæglerhjemmeside. Navnet på siden vil blive identisk med Side 12 navnet i menustrukturen. Du kan altid rette navnet senere. Et navn på en menu har også en smule indflydelse på placering i Google. (Søgemaskineoptimering) men frem for alt skal menunavnet være sigende. Klik på [opret] og du vil se en ny side i din sidestruktur: Den orange stjerne angiver at siden endnu ikke er offentliggjort. Juster indstillinger på undersiden Inden du skriver indholdet på siden skal du foretage lidt justeringer. Fanen ”Egenskaber”, Valg af skabelon: Oftest skal du blot bruge MaeglerStandardSide, som er brugt i dette eksempel (læs dog mere om Skabelonerne i afsnittet ”Fanen egenskaber”på side 9). Fanen ”SEO”, Udfyld med ”Titel” og ”Description” (Læs mere om CEO i afsnittet Fanen SEO, side 8) På fanen ”Tekst”, udfyld nu selve indholdet: • • • Evt. billede Overskrift Tekst Side 13 Hvad der skal udfyldes, afhænger lidt af skabelonen – læs mere om dem herunder. Side 14 Skabelon: MaeglerForside Denne skabelon skal som udgangspunkt kun bruges på din forside. Visse ting er foruddefineret og kan ikke ændres af dig selv. Andre ting har du selv indflydelse på. Foruddefineret: Firmanavn, adresse, kontaktdata, åbningstider og kort. Topbillede: Stort billede i toppen af siden. Hvis du ikke selv indsætter et billede, indsætter skabelonen et standardbillede for dig. Billedet genbruges over dine kontaktdata. Billede1: Bruges ikke i denne skabelong Overskrift: Kort tekst, der vil blive skrevet med fed skrift. Text: Indholdstekst. Du kan selv sætte fed og kursiv, men skabelonen definerer skrifttypen. Side 15 Skabelon: MaeglerStandardSide (Uden Navihide) Det vil næsten altid være denne skabelon, der skal bruges, når du opretter sider. Bemærk, at ”NaviHide” ikke indgår i skabelonens navn, men er ind indstilling under fanebladet ”Menuvisning”. Hvis du sætter dette flueben, vil siden i stedet være et ”Blogindlæg” til den overordnede side - se afsnittet ” Side 16 Skabelon: MaeglerStandardSide (Med Navihide)”, side 24. Foruddefineret: Firmanavn, adresse, kontaktdata og åbningstider (I forhold til forsiden, er kortet fjernet). Topbillede: Stort billede i toppen af siden. Hvis du ikke selv indsætter et billede, indsætter skabelonen et standardbillede for dig. Billedet genbruges over dine kontaktdata. Billede1: Bruges ikke i denne skabelong Overskrift: Kort tekst, der vil blive skrevet med fed skrift. Text: Indholdstekst. Du kan selv sætte fed og kursiv, men skabelonen definerer skrifttypen. Side 17 Skabelon: MaeglerEjendomme Dine ejendomme vælges også som en skabelon. Denne er oprettet fra start af, og det anbefales ikke at redigere for meget i denne. Der kommer flere skabeloner til Erhverv og leje senere. Til denne type skabeloner skal du ikke udfylde data, da de genereres automatisk af systemet. Resultet vil f.eks. være følgende: Side 18 Skabelon: MaeglerMedarbejdere Hvis du vil oprette en præsentation af medarbejderne, anbefaler vi at du bruger ”Blog” funktionen. Dette gør nemlig, at du kan redigere hver enkelt medarbejder uafhængigt af de øvrige, samt ændre rækkefølge osv. på en enkelt og elegant måde. Medarbejdersiden består af to dele: • • Overordnede skabelon Blogs Foruddefineret: Firmanavn, adresse, kontaktdata og åbningstider (I forhold til forsiden, er kortet fjernet). Medarbejderne vil blive vist med foto i Portrætformat og teksten til hver medarbejder vil stå til højre for billedet. Topbillede: Stort billede i toppen af siden. Hvis du ikke selv indsætter et billede, indsætter skabelonen et standardbillede for dig. Billedet genbruges over dine kontaktdata. Billede1: Bruges ikke i denne skabelong Overskrift: Kort tekst, der vil blive skrevet med fed skrift. Text: Indholdstekst. Du kan selv sætte fed og kursiv, men skabelonen definerer skrifttypen. Blogs: ” Bemærk, at underpunkterne – blogs – er oprettet som individuelle sider! Læs mere i afsnittet Side 19 Skabelon: MaeglerStandardSide (Med Navihide)”, side 24. Skabelon: MæglerBlog Denne skabelon kan bruges til f.eks. samarbejdspartnere eller anbefalinger fra dine kunder. Hvert billede bliver fulgt af en tekst, der stør til højre for billedet. Denne funktion er f.eks. velegnet til anbefalinger og hilsner fra tilfredse kunder. Foruddefineret: Firmanavn (Kontaktoplysninger er fjernet). Blogs vil blive vist med billeder i liggende format og teksten til hvert billede vil stå til højre for billedet. Topbillede: Stort billede i toppen af siden. Hvis du ikke selv indsætter et billede, indsætter skabelonen et standardbillede for dig. Billedet genbruges over dine kontaktdata. Billede1: Bruges ikke i denne skabelong Overskrift: Kort tekst, der vil blive skrevet med fed skrift. Text: Indholdstekst. Du kan selv sætte fed og kursiv, men skabelonen definerer skrifttypen. Blogs: afsnittet ” Bemærk, at indholdspunkterne – blogs – er oprettet som individuelle sider! Læs mere i Side 20 Skabelon: MaeglerStandardSide (Med Navihide)”, side 24. Side 21 Skabelon: MæglerBlogUdenBillede Er opbygget på samme måde som MæglerBlog, men – som navn et antyder, er billedet blot fjernet. Blogs: afsnittet ” Bemærk, at indholdspunkterne – blogs – er oprettet som individuelle sider! Læs mere i Side 22 Skabelon: MaeglerStandardSide (Med Navihide)”, side 24. Side 23 Skabelon: MaeglerStandardSide (Med Navihide) Bruges, når du vil oprette et blogindlæg – f.eks. medarbejdere, referencer, samarbejdspartnere osv. Når du opretter en blog, skal du under fanebladet ”Menuvisning” sætte flueben i ”NaviHide”. Giver mulighed for at oprette underpunkter, der kan sorteres, rettes og slettes individuelt. Er f.eks. velegnet til beskrivelse af samarbejdspartnere. Foruddefineret: Firmanavn. Forsidebillede, indledende overskrift og tekst er arvet fra den overordnede side – i dette eksempel ”Glade Kunder”, oprettet med skabelonen ”MæglerBlog”. Topbillede: Bruges ikke i denne skabelon. Billede1: Det er den overordnede skabelon, der afgør, om billede 1 bliver brugt. I dette eksempel med skabelonenen ”MæglerBlog” kommer teksten til at stå til højre for billedet. Overskrift: Kort tekst, der vil blive skrevet med fed skrift til højre for billedet, forudsat at den overordnede skabelon indeholder et billede. Text: Indholdstekst. Du kan selv sætte fed og kursiv, men skabelonen definerer skrifttypen. Teksten kommer til højre for billedet, forudsat at den overordnede skabelon. Side 24 Eksempel: Oprettelse af Blogs – f.eks. Medarbejdere, samarbejdspartnere m.m. Hvordan dine Blogs kommer til at se ud, afhænger af hvilken skabelon, der er valgt på den overordnede side. I dette eksempel går jeg ud fra, at den overordnede side benytter skabelonen ”MaeglerMedarbejder”. • Under ” Content”, skal du højreklikke på dit butiksnummer og vælge ”Opret”. • Du ser nu en dialogboks. Navngiv den ny side ”Medarbejdere” • Dokumenttypen skal, med mindre andet er anvist, altid være Mæglerhjemmeside. Navnet på siden vil blive identisk med navnet i menustrukturen. Du kan altid rette navnet senere. Et navn på en menu har også en smule indflydelse på placering i Google. (Søgemaskineoptimering) men frem for alt skal menunavnet være sigende. • • • • Klik på [opret] og du vil se en ny side i din sidestruktur: Den orange stjerne angiver at siden endnu ikke er offentliggjort. Vælg nu fanebladet ”Egenskaber” og vælg skabelonen ”MæglerMedarbejder”, kan du begynde at oprette hver enkelt medarbejder. Udfyld under ”Tekst” efter ønske. Klik på ”Gem” Nå har du oprettet den overordnede side, og er klar til at oprette de enkelte medarbejdere i hver sin Blog. • • Højreklik i menuen til venstre på ”Medarbejder”, og vælg ”Opret” Navngiv den ny side med navnet på medarbejderen, og vælg ”MaeglerHjemmeside”. Tilpas Indstillingerne: • • • Vælg fanebladet ”Egenskaber” og vælg ”MæglerStandardside” Vælg fanebladet ”Menuvisning”, og sæt flueben i ”umbracoNaviHide”. Dette sikrer, at dette medarbejderen ikke fremstår som separat punkt i menuen til venstre. Vælg fanebladet ”Tekst” og upload ”Billede1”, angiv en overskrift (F.eks. Navn og / eller arbejdstitel), og skriv din beskrivelse af medarbejderen i tekstfeltet. Side 25 • • Afslut med at klikke på ”Gem” Forsæt med at oprette flere kolleger under siden ”Medarbejdere”. Sorter rækkefølgen af medarbejderne Når du har oprettet alle medarbejderne, vil du måske gerne have byttet lidt rundt på rækkefølgen. Dette klares nemt ved i menuen til venstre, at højreklikke på ”Medarbejdere” og vælge ”Sorter”. Her kan du enkelt og med ”træk og slip” flytte rundt på undersiderne, og afslutte med ”Gem”. Side 26