Redigering av hjemmesider med WYSIWYG

Easy CMS kommer med flere forskjellige WYSIWYG (rik tekst) editorer man kan velge blandt, men et verktøy kan fordt bli tungvint å bruke om man ikke vet hvordan man skal bruke det. I denne artikkelen vil vi komme med forslag på hvordan du best mulig vedlikeholder og oppretter nye sider med en WYSIWYG editor, hva du bør gjøre og hva du ikke bør gjøre.

En hjemmeside er bygget med HTML - hva er egentlig dette?

En WYSIWYG editor gjør at du kan redigere HTML kode, basisen som alle websider er bygget på. HTML er kort fortalt et språk som lar deg beskrive hvordan tekst og bilder skal se ut, eller snarere gir dem betydning. Eksempler på betydning er overskrifter, paragrafer, fotnoter etc. Man kan i tillegg sette utseendet på elementer (eks. en tekst, et ord, en paragraf) i form av skrifttyper, farger størrelser etc.

Hvordan fungerer en WYSIWYG editor?

Fordelen med en WYSIWYG editor er at du slipper å se selve HTML koden (også kalt markup), men redigerer siden din slik den faktisk ser ut i nettleseren din. Det er mye enklere for dem fleste å forholde seg til en tekst som faktisk er fet fremfor en HTML kode som spesifiserer at teksten du ser skal være fet i nettleseren - ikke alle har Matrix blikket, :)

Vi kan ta for oss et eksempel :

Denne teksten er fet.

I HTML (eller markup) er dette skrevet slik :

<strong>Denne teksten er fet.</strong>

Som du ser er det mye mer behagelig å se teksten som fet direkte på skjermen, fremfor å måtte skjønne at den er fet. Det samme gjelder for kursiv tekst, farger, skrifttyper etc.

Hva er ulempen med en WYSIWYG editor?

Problemet er hva du ikke ser. Om vi tar for oss eksempelet over og endret det til dette :

Slik ser den ut på siden :
Denne teksten er fet.

Slik ser den ut i HTML :
<strong><strong><strong><strong>Denne teksten er fet.</strong></strong></strong></strong>

Denne teksten er mao ikke noe fetere fordi at fet kommandoen er satt 4 ganger, men det er åpenbart at det er helt meningsløst å definere fet så mange ganger. Problemet er bare at man ser dette først når man ser på selve kildekoden, dette er hva som på folkemunnet kalles "bloated code".

Bloated code er problematisk for en WYSIWYG editor i enkelte tilfeller da det forkludrer redigeringen din, eks prøver du å ta bort fet på teksten mens den fortsatt er akkurat like fet? Fra eksempelet over er ikke det så merkelig da det fortsatt er 3 ganger med fet igjen, du må faktisk fjerne fet 3 ganger til før det endelig går bort.

Avhengig av hvilken WYSIWYG editor man benytter produserer man forskjellig grad av "bloated code", men oftest er det ikke her problemet ligger. Mest bloated code får man når man klipper og limer fra andre steder og inn i WYSIWYG editoren, spesiellt er Microsoft producter som Word og Excel de største syndebukkene.

"Bloated Code" - Og hvorfor man ikke skal lime fra Microsoft Word?

Med HTML er det definert en rekke beskrivelser og egenskaper man kan gi en tekst, men man kan også legge til egendefinert egenskaper og beskrivelser. Det som ikke er dekket av HTML blir riktignok ignorert, men det gjør ingen skade av å ligge der. Dvs, det gjør ingen teoretisk skade. I praksis resulterer dette i en webside som er altfor kompleks og at den blir unødvendig stor, noe som resulterer i økte kostnader for båndbredde og lengre tid for kunden å laste ned siden din. Når det gjelder kompleksiteten er dette også viktig, ettersom en WYSIWYG editor som arbeider opp mot HTML koden hele tiden må ta hensyn til alle formatteringer og beskrivelser som ligger der, og jo mere å tenke på jo tregere går det.

Sjefen over alle sjefer når det gjelder unødvendige tagger (beskrivelser) er Microsoft Word. Når man klipper en tekst fra et Word dokument og limer inn i en WYSIWYG editor drar man med seg all formattering og beskrivelser fra Word inn i WYSIWYG editoren. Det som gjør det til et problem er at Word har så mye formattering og beskrivelser i tilegg til en mengde som ikke engang er definert i HTML. Resultatet er at du kommer til å få problemer med å redigere siden i ettertid grunnet dette.

Slik limer du fra Microsoft Word

Om du allikevel har et dokument i Word som du ønsker å legge over på websiden, er det håp. Enkelte WYSIWYG editorer har løst problemet med en egen innlimingsfunksjon for nettopp Word. Løsningen er at det åpnes opp et rent tekstfelt som man limer inn i, her fjernes all formattering fra Word slik at man sitter bare igjen med ren tekst og må formattere teksten på nytt fra WYSIWYG editoren. Dette høres kanskje tungvint ut, men resultatet blir en lett og ryddig kode som er lett å redigere fra WYSIWYG editoren, og den er rask å laste for besøkende på websiden og det byr heller ikke på problemer i andre nettlesere. Mao - det er slik det skal være.

Datamaskiner har blitt veldig brukervennlige de siste årene, men ikke alltid er utviklingen en fordel. Klipping og liming programmer imellom er et godt eksempel på dette, det er fullt mulig, men man gjør seg selv en solid bjørnetjeneste.

Tegnsetting med WYSIWYG - hvordan redigere teksten effektivt

Om man ser på aviser og tidsskrifter er det en ganske sammenfallende typografi som går igjen. Kort fortalt kan man koke dette raskt ned til at en webside trenger følgende :

•  Tittel
•  Stikk tittel
•  Ingress
•  Brødtekst

Tegnsettingen på disse er oftest definert av dem som designet siden, slik at brukeren av WYSIWYG editoren ikke skal tenke på dette. Du som redigerer websiden skal i prinsippet ikke være opptatt av hvilken skrifttype du skal bruke, hvor stor den skal være eller hvilken farge den skal ha. Gjør du dette ender du over tid opp med en webside som kan se ut som et sirkus, men sprudlende regnbueoverskrifter og rulletekster.

Den enkleste måten å holde typografien ren på dine sider (altså lik på alle sider) er å bruke funksjonaliteten i WYSIWYG editoren som er for dette. En overskrift på siden din markerer du som en overskrift, en stikktittel setter du til å være en stikktittel (I WYSIWYG editoren vil dette være overskrift 2). En ingress vil ofte være tilstrekkelig med fet skrift.

Ved å holde disse rettningslinjene ivaretar du ryddige sider som er enkle å redigere i WYSIWYG editoren, i tillegg til at de ser bra ut på siden. Siden du leser nå er bygget etter dette prinsippet.