Hjemmesiden – Web Design
Heisann!
I sommer har jeg hatt et halvt års pause fra foreningsarbeid og Hjemmeside WebDev. Nå er høsten her og da kryper jeg inn bak tastaturet og går inn i en vidunderlig virtuell verden av muligheter. Hensikten med denne artikkelen er gjøre opp en status for hjemmesiden og si litt om det arbeidet som gjøres i skrivende stund. Jeg fokuserer etter hvert på den praktiske delen av Web Design og håper å pirre nysgjerrigheten til kreative sjeler i foreningen. Å boltre seg i en digital sandkasse er faktisk skikkelig moro. Jeg er jo på feil side av 50 års-bursdagen, så innspill og deltakelse fra yngre medlemmer tror jeg er bra for FKS.
Tiden flyr!
6 måneder er en evighet i IT verden, så nå ser jeg igjennom det siste nye for WordPress og designerverktøyet vårt, Elementor Pro. Det er mye nytt på gang. Heidi og Britt-Inger jobber også med hjemmesida og ser ut til å kose seg. Med litt mer læring så kan de kanskje se for seg å designe nye klær til hele portalen. Jeg liker egentlig best å designe programvare arkitektur, skrive kildekode og utvikle IT systemer.
Muligheter
Da jeg i 2019 begynte å jobbe med hjemmesida så var hovedmålet å få den gamle portalen over på WordPress formatet. Underveis har jeg lagt vekt på det funksjonelle. Noen nye komponenter og litt ny grafikk har det blitt, men jeg har ikke forsøkt å vinne design konkurranser. Slik hjemmesida står i dag, er det en moderne WordPress portal med massevis av potensiale som bare venter på å bli utnyttet.
Med funksjonelt potensiale så tenker jeg for eksempel på å utvide portalen med en nettbutikk. Her er det mange valgmuligheter. En av de mest populære løsningene er WooCommerce.
Jeg ser også et stort informativt potensial, med flere muligheter til å få fart på produksjon av artikler og lesestoff. Dette vil gjøre underverker for portalen, Glimt og selvfølgelig for foreningen. Skal vi utvikle oss så må vi tenke annerledes, gjøre nye ting, knuse noen egg, kaste skallet, investere i ny energi og lage en heidundrende omelett. Hele tematikken med ubrukte muligheter vil jeg gjerne komme tilbake til ved en senere anledning. Resten av artikkelen er om WebDev.
Energi
Funksjonalitet og strøm av informasjon er vitalt for en portal, men hva betyr utseendet? Her er det mange meninger. Jeg får flere meldinger fra personer som ønsker å være med på å endre designet, spesielt på forsiden. Altså, her er det energi og engasjement, akkurat det foreningen trenger. Kan vi få noe av energien til å krystallisere seg i portalen vår, så blir jeg super happy. Alle som har jobbet med design vet at det er umulig å lage noe som alle er 100% fornøyd med. Men, forandring fryder, så jeg tenker at å slippe løs kreative krefter i kontrollerte former kan løfte designet på hjemmesiden.
Verktøy til design av web portal
For å være med på å designe hjemmesiden vår, så må du lære å bruke designerverktøyet som vi benytter oss av, nemlig Elementor Pro Page Builder. Elementor er en av de mest populære verktøyene på markedet, spesielt for grafikkintensiv design. Før vi går videre med Elementor så skal jeg klargjøre noe som skaper forvirring hos helt uerfarne Web utviklere.
Designerverktøy eller standard verktøy??
Når man installerer WordPress så følger det med et standard verktøy for å lage enkle sider, artikler og komponenter. Web utviklere med ambisjoner installerer selvfølgelig et skikkelig designerverktøy til å bygge portalen med, for eksempel Elementor Pro. Men, standard verktøyet blir ikke fjernet. Begge verktøyene er tilgjengelige i WordPress, og kan derfor skape forvirring og problemer for uerfarne utviklere under opplæring. Årsaken er at standard verktøyet ikke er kompatibelt med komponenter som er laget med designerverktøyet. Men, designerverktøyet er som regel kompatibelt med komponenter laget med standard verktøyet. Så, helt i starten så må uerfarne webutviklere holde tunga rett i munnen og passe på å bruke rett verktøy, nemlig Elementor. Her er en analogi:
Når man installerer Windows på en PC så følger det med et standard verktøy til å lage notater, nemlig Notepad. PC brukere med ambisjoner installerer selvfølgelig et skikkelig verktøy til å holde styr på dokumentene sine, for eksempel MS Office. Men, Notepad blir ikke fjernet. Begge verktøyene blir tilgjengelige i Windows, og kan derfor skape forvirring og problemer for helt uerfarne PC brukere. Årsaken er at Notepad ikke er kompatibel med dokumenter som er laget med MS Office. Men, MS Office klarer som regel å åpne notater laget med Notepad.
Opplæring – Publisere artikler
WordPress har en helt trygg arena hvor man kan prøve, feile, teste og lære å designe med Elementor, uten å måtte være redd for å ødelegge noen ting som helst. Den trygge arenaen heter «Post», også kjent som artikkel eller innlegg. Det eneste som kan gå galt er at artikkelen din blir seende litt molefonken ut, men det går fort å rette opp. Du kan til og med la være å bruke Elementor, og i stedet bruke standard verktøyet i WordPress. Men, da lærer du ikke å designe med Elementor. Å lage en enkel artikkel med designerverktøyet er ikke vanskelig. Jobben er grafisk, og går ut på å plassere komponenter som tittel, bilder, tekst, grafikk, linker med mer. Du finner fort ut om dette er noe for deg. Det er ikke behov for å kunne kode html, css eller JavaScript. I julen 2020 lagde jeg en instruksjonsvideo som viser hvordan du går fram for å lage en artikkel med Elementor. Den er her.
Jeg oppfordrer Heidi, Britt-Inger og egentlig alle interesserte til å utforske designerverktøyet. Lag noe fancy og gøy, for eksempel en ufo som flyr over sentralstyret med spionkamera! Tipps: Bruk «Lottie» widget’n i PageBuilder.
«Oups! Noen av artiklene som ble publisert i sommer var laget med standard verktøyet i WordPress. Jeg har nettopp konvertert de over til Elementor.»
Redigere eksisterende sider eller artikler laget med designerverktøyet
(Beklager antydning til spaghetti-forklaring i dette avsnittet…med litt erfaring så vil du se at å redigere en eksisterende side egentlig er piece of cake…eller pasta)
Når du logger inn i WordPress så kommer du inn i kontrollpanelet, eller WordPress «back end» som det kalles. Bruk litt tid på å bli kjent med menyene, se deg litt rundt. På hovedmenyen helt til venstre så kan du klikke på «Innlegg» og få listet opp alle innlegg som er laget, tilsvarende for «Sider». Når du skal redigere et innlegg, så beveger du musepekeren over tittelen på innlegget. Da vil det dukke opp en meny med flere valg. 2 av valgene er aktuelle, det er «Rediger» og «Rediger med Elementor». Klikker du på «Rediger med Elementor», så vil WordPress starte opp Elementor og gå i designer modus. Klikker du på «Rediger», så vil du komme inn i WordPress sin «Rediger Fane» for det aktuelle innlegget. Her kan du manipulere viktig informasjon om innlegget ditt. Du kan for eksempel bestemme «fremhevet bilde» eller skrive et «utdrag» av innlegget ditt. Husk å lagre endringer! Både «fremhevet bilde» og «utdrag» blir synlig på forsiden av portalen. På forsiden er det en Elementor komponent som lister opp de nyeste innleggene som er publisert. «Fremhevet bilde» bør være i bredde:høyde format 3:2. Bildeformatet kan selvfølgelig endres i Elementor komponenten på forsiden, men fortiden er formatet 3:2.
Dersom du ikke finner «Fremhevet bilde» eller «utdrag» i «Rediger Fanen», så klikker du på «Visningsinnstillinger». Du finner «Visningsinnstillinger» helt oppe til høyre i «Rediger Fanen». Da får du opp et panel hvor du kan tilpasse hva som skal vises i din WordPress «Rediger fane».
Er du i «Rediger Fanen» og ønsker å gå i designer modus med Elementor, så trykker du på den store blå knappen med følgende tekst: «Rediger med Elementor».
I «Rediger Fanen» så finner du også en stor grå knapp med teksten «<- Tilbake til WordPress redigering». Har du lite erfaring med WordPress, så bør du holde deg unna denne knappen. Trykker du på knappen så går WordPress tilbake til «standard verktøyet» for det aktuelle innlegget. Standard verktøyet er som nevnt ikke kompatibelt med Elementor. Trykker du på knappen ved en feil, så bør du trykke på «Tilbake knappen» i browseren din og ikke lagre endringer. Får du problemer så send meg en mail.
Skifte klær og pynte seg
Når du redigerer en av sidene på portalen, så vil du se at det er områder på siden du ikke får tilgang til. Områdene er gjerne rammet inn med en tynn oransje ramme, og har en egen tittel. Dette er maler. For å endre designet på hele hjemmesiden så kan man redigere malene som er i bruk. En bedre løsning er å lage et nytt sett med maler og teste de ut på en intern side som ikke er online. Når man er fornøyd med designet så kan man gå online med de nye malene og samtidig ta vare på de gamle.
Bruke maler som andre har laget
I løpet av de 2 årene jeg har drevet med utvikling av hjemmeside i WordPress med Elementor, så har det skjedd veldig mye nytt på fagfeltet. Divi er en av konkurrentene til Elementor. Den koster litt mer penger, og har inntil nå hatt et bedre tilbud av ferdig designa maler som kan lastes ned og raskt implementeres på en portal. Nå i sommer så ser jeg at Elementor har begynt å spise opp forspranget til Divi. Massevis av ferdig designa web maler er tilgjengelige. Her er en video som viser hvordan man laster ned et nytt sett med maler. Link her. I tillegg kan man laste ned Elementor maler i fra portalen https://templately.com/
Elementor Theme Builder og Page Builder
Elementor Page Builder brukes til å lage komponenter som header, footer, sider, innlegg, seksjoner, menyer, popup-vinduer, arkiv, feilmeldingssider, søkeresultat-sider og maler for alle respektive komponenter. For å holde styr på alle komponentene og malene som lages, utvikles eller lastes ned så bruker vi Elementor Theme Builder. Med Theme Builder så styrer vi også hvilke maler som skal brukes hvor. Så nøkkelen til å prøve seg som web designer er å lære seg å bruke Page Builder. Blir du oppegående nok, så kan jeg opprette et fullt sett med maler og noen sider som du kan boltre deg med. Hver lokal avdeling kan utmerket godt ha sin egen header, footer, forside og utseende. Med Elementor er alt mulig. Sist vinter måtte jeg i all hast flytte portalen «barnehodepine.no» inn under vår portal. Med Elementor så lagde jeg et nytt sett med maler til «barnehodepine», kopierte all informasjon og publiserte en egen side med undersider. Jeg skal ikke skryte av designet, men jobben ble i hvert fall gjort. Her er en link:
Tiden står vinkelrett på evigheten
Det tar tid å komme i mål med et nytt design, alle maler og komponenter må fungere like bra på mobil, pc og nettbrett. Nerder vet at å holde på med dette er vanedannende. Når den ene mestringsfølelsen erstatter den andre, så er man hekta, og hva gjør man da?
«Jo, da er det bare å gønne på!» At tiden går merker man ikke fordi man lever i nuet og har det gøy.
Forandring fryder. Jo mer action og baluba vi klarer å stelle i stand på hjemmesiden jo bedre!
JavaScript
Ved å programmere i JavaScript så er det mulig å ta full kontroll over grafikken og hendelser i en nettside. Fra gammelt av, da jeg var i jobb, så husker jeg JavaScript som et umodent script språk som seriøse utviklere ikke ville ta i. I forbindelse med foreningsarbeid og utvikling av hjemmeside så har jeg i dag fått et helt nytt forhold til JavaScript. Språket har blitt sofistikert og det er nå mulig å bruke objektorienterte programmeringsteknikker som jeg husker i fra programmeringsspråkene C++ og C#.net. Hvem hadde trodd det? Visual Studio Code fra Microsoft er det mest populære utviklingsverktøyet for Web kode utvikling, og det er gratis – tidene forandres. Artikkelen om ryggmargsstimulator bruker mye objektorientert JavaScript og CSS sammen med Elementor for å styre grafikken. JavaScript danner i dag grunnlaget for nye, raske, grafikkorienterte og modulbaserte utviklings bibliotek for å lage flotte brukergrensesnitt til nettsider og mobilapplikasjoner. Et eksempel er React som brukes til å lage brukergrensesnittet til Zoom nett møter. React er fritt tilgjengelig for alle som vil lære. Søk på YouTube.
JavaScript i Visual Studio Code
Informasjonsteknologi - Smertemestring
Det skjer masse nytt hele tiden, så det er umulig å få med seg alt. Men, klarer man å fokusere på noen utvalgte områder, så tror jeg alle er i stand til å oppleve mestringsfølelse innen IT.
For å lære og holde seg oppdatert med alt som har med IT å gjøre så kommer man ikke utenom YouTube. Du bør skaffe deg en gratis YouTube konto og organisere ditt eget bibliotek med videoer som er nyttige for deg. Gjør du dette så, vil YouTube foreslå nye videoer som belyser de aktuelle temaene fra flere sider. Her er det også veldig fort gjort å bli hekta. Og ja, det går an å bli rusa på kunnskap, innsikt og forståelse. Informasjonsteknologi er en viktig del av min smertemestringsstrategi.
Elementor har sin egen YouTube kanal:
https://www.youtube.com/c/Elementor
En YouTuber som har lært meg MASSE om Elementor, WordPress og CSS grafikk er «Oooh Boi» fra Kroatia:
https://www.youtube.com/c/OoohBoi/videos
En pedagogisk og helt uunnværlig referanse og kunnskaps portal for WebDev er W3Schools :
En tilsvarende portal for de litt mer viderekommende er «MDN Web Docs»:
https://developer.mozilla.org/en-US/
Jeg har trukket meg fra sentralstyret, men brenner fortsatt for foreningen. På prosjektbasis deltar jeg gjerne i foreningsarbeid, såfremt jeg er enig i prosjektets formål og bruk av ressurser.
Vel, vel, håper jeg ikke har klart å skremme vekk noen vordende Web Designere. Ingen må nøle med å ta kontakt, foreningen trenger flere IT ressurser!
