kursus 2 modul 1 & 2 - privatlektion...ved martin juhl andersen / privatlektion.dk / ©2019...

VED MARTIN JUHL ANDERSEN / PRIVATLEKTION.DK / ©2019

KURSUS 2 MODUL 1 & 2 - IDA

ved Martin Juhl Andersen // privatlektion.dk 2019

http://privatlektion.dk



INTRODUKTION• Min baggrund

• Hvem er I

• Forventninger



PROGRAMIDA KURSUS 2 MODUL 1

• Introduktion

• Opsætning af testside til kurset

• Wrap-up kursus 1 (kort gennemgang)

• Valg af tema + opgave

• Page builders

• Struktur og layout globalt og på specifikke sider




• Opgave: Planlægning og design af header, footer, og andre globale elementer

• Shortcodes

• Opgave: Design landing page, kontakt og om



KLARGØRING AF TESTSIDE• Installation af WordPress på host

• Deaktivér plugins og aktivér andre

• Indstillinger - Permalinkstruktur - Post name/navn på indlæg

• Opsætning af primære sider, indstil landing page og opret hovedmenu

• Valg af tema

• Opret childtheme

• Opret projektmappe



WRAP-UPKURSUS 1

Gennemgang af backend interface med udgangspunkt i kursus 1 materiale - herunder

Gutenberg

Menustruktur, forskel på sider og indlæg, mediebibliotek, globale indstillinger


https://privatlektion.dk/wp-content/uploads/2019/09/Kursus-del-1-og-2-IDA.pdf


TEMAER OG OPGAVE 1• Skriv ned hvilken designprofil du tænker dit website skal have -

farvekoder i forhold til formål. Find gerne inspiration fra andre websites - Gem i projektmappe

• Lav en liste over hvilke funktioner dit website skal have. Igen, find inspiration fra lignende websites - Gem i projektmappe

• Vælg et tema der opfylder behovet for projektet - ellers lightweight

• Gå i ‘udseende’ - ‘tilpas’ og gennemgå muligheder for globale indstillinger

• Yderligere info om temaer - se slides fra kursus 1



PAGE BUILDERSTEMASPECIFIKKE PAGE BUILDERS

• DIVI

• Avada

UNIVERSELLE PAGE BUILDERS• Elementor - import af demo-content

• Visual Composer

• WPbakery

• Beaver Builder



STRUKTUR & LAYOUT

• Globalt layout - herunder footer, header, blog (se tilpas tema, og ‘udseende’ - ‘widgets’)

• Forskel på indhold (content) og layout på specifikke sider - afhængigt af hvilken page builder men principper er ens - vi bruger elementor i dag



SHORTCODES / KORTKODER

Kortkoder anvendes til at aktivere et plugin, ved at placere en kode direkte på en side eller i en tekst widget.

• Plugin - amr shortcode any widget

• Shortcodes Ultimate

• Eksempler med shortcodes - Contact Form 7, WPforms



KONTAKTFORMULARER

• Contact Form 7 (gratis)

• WPforms (gratis med mulighed for opgradering)

• Gravity forms (betalingsplugin)



OPGAVE 2

1. Opsæt på baggrund af opgave 1 temaets designprofil i tilpasfunktionen, se opgave 1

2. Design header med logo og menu - valgfrit emne

3. Design footer - find inspiration fra andre websites

4. Design landing page, kontakt og om



TEST SIDEN UNDERVEJS• Sværhedsgrad - Hvor nemt er det at udføre de basale opgaver i

designet?

• Effektivitet - Hvor hurtigt er det for brugeren at løse ‘opgaven’ på dit site?

• Udenadslære - Hvor nemt er det at huske proceduren på siden?

• Fejl - Hvor mange ‘fejl’ laver brugerne og hvor alvorlige er de?

• Tilfredsstillelse - Hvor tilfredse er brugerne efter oplevelsen?



ET PAR RÅD• Få venner og bekendte, samt potentielle købere til at teste jeres side. I vil blive overrasket

over deres ‘fund’.

• Keep it simple

• Vi er visuelle (især på skærm) - overvej læsevenlighed

• CTA - Call to action knapper. (Åbenlyst hvad der skal klikkes på)

• Vi læser ikke sider på internettet – vi scanner dem (Z)

• Intet vigtigt, bør være mere end 2 klik væk

• Tal dine brugeres sprog

• Logisk opbygning


VED MARTIN JUHL ANDERSEN / PRIVATLEKTION.DK / ©2019VED MARTIN JUHL ANDERSEN / PRIVATLEKTION.DK / ©2019

MODUL 21. Opsummering modul og spørgsmål ift. det?

2. Har alle et testmiljø?

3. Opret Google-konto





• Sikkerhed inkl SSL og installation af sikkerhedsplugin

• Forbind med tredjepart API og iFrame

• iFrame integration

• SoMe

• Mailchimp

• Pop-up

• Medlemsportal Buddypress/Paid Membership Pro

• WooCommerce - opsætning af webshop og subscribers

• Google Analytics & Search Console




• Optimer hastighed på website

• Filemanager på host

• FTP (File Transfer Protocol)

• Database

• Backup og migration

• YOAST SEO - introduktion til søgemaskineoptimering



SIKKERHED• SSL certifikat - Secure Socket Layer

• En krypteret forbindelse mellem server (website) og besøgendes browser

• Installation af SSL - Let’s encrypt - Undersøg med udbyder

• Plugins - All in one WP security & firewall, WordFence

• Brute force - ændre wp-admin for at minimere chance for hack

• Akismet antispam - undgå at blive spammet



FORBIND MED TREDJEPART

• iFrame - et html-dokument der typisk indsættes i et andet html-dokument. Visning af indhold fra andre websites direkte på eget website. F.eks. YouTube.

• API-key - en ‘hemmelig nøgle’ til at forbinde f.eks. en webservice med dit website



SOME (SOCIALE MEDIER)

• Instagram feed - https://instagram.pixelunion.net

• Facebook - Formål - Diverse SoMe plugins


https://instagram.pixelunion.net


OPRET EN KONTO• Emailhåndteringssystem• Gratis op til 2000 subscribers og én liste• Drag & drop design af skabeloner• Installér Mailchimp plugin og forbind med API


http://mailchimp.com


POP-UP

• Konverterer de? Ja, hvis det bliver gjort rigtigt.

• Hvordan virker de? Midt på skærm, efter % læst, efter tid på siden, slide in, sticky.

• Opsæt pop-up med f.eks. Boxzilla og med tilmelding til nyhedsbrev



BUDDYPRESS

• Medlemsforum hvor registrerede brugere kan kommunikere med hinanden

• Installer Paid Membership Pro, for lukket forum



WOOCOMMERCE• Opsæt webshop på få minutter

• Vær’ opmærksom på om tema er optimeret til WooCommerce

• Standardindstillinger - oprettede sider og oversigt over produkter

• Varekategorier defineres

• Varebilleder

• Indløsningsaftale - PayPal, Klarna, PensoPay, NETS

• Forbind med plugin i WordPress

• Vilkår og betingelser samt hvilke betalingsmuligheder skal ‘vises’



ANALYTICS OG SEARCH CONSOLE

• Gå på analytics.google.com - opret og forbind med website - f.eks. MonsterInsights, eller Google Analytics Dashboard

• Gå på search.google.com - tilføj ejendom. Anvendes af Google til at ‘crawle’ website


http://analytics.google.com

http://search.google.com


PAGE SPEED

• Optimér billeder - Smush, tinypng.com, EWWW Image Optimizer

• Cache plugin - f.eks. wp-rocket eller wp super cache


http://tinypng.com


FILEMANAGERwp-config.php

• Databaseoplysninger

• define('DISALLOW_FILE_EDIT', true);

• define( 'WP_DEBUG', false );

wp-content

• Uploads - Primært billeder og evt. backups

• Plugins - oversigt over alle installerede plugins. Deaktivér ved at omdøbe når fejl

• Temaer



FTP-KLIENT

• FTP (File Transfer Protocol) - kæver et program. F.eks. Filezilla eller Cyperduck

• Oplysningerne om host, bruger, password og port findes under SSH & FTP hos din udbyder.

• FTP er en fjernforbindelse til filer på dit domæne



DATABASE

• Her gemmes al data f.eks. indlæg, sider, brugere, kommentarer og mm.

• Tilgå database (MySQL) via webhotel

• Info om database for website kan også findes i config.php



BACKUP/GENDANNELSE/FLYT• Hvordan laver vi backup - manuelt og vha. plugins

• Automatisk backup

• Hvad gør jeg hvis min side bliver hacket?

• Gendan fra tidligere backup

• Flyt fra et testdomæne til hoveddomæne (flyt vha. FTP/filemanager og database fra backup)

• Search and replace

• Redirection ved nyt domæne



INTRODUKTION TIL SEO• Organisk (SEO) vs betalt

• Page Rank

• On-page & off-page

• Redirection

• Søgeordsanalyse - keyword planner

• YOAST - værktøj til SEO på website


kursus 2 modul 1 & 2 - privatlektion...ved martin juhl andersen / privatlektion.dk / ©2019...

Documents