Multimusen.dk

Per's Multimedia Tutorials

Per Thykjaer Jensen

  • Håndkodet SEO

    Håndkodet SEO

    Du kan tilføje SEO som tilpasset HTML. Fordelen ved denne metode er, at du ikke er afhængig af plugins med gumpetung kode. Håndkodet SEO er både en enkel og meget effektiv metode.

    Sådan kan du tilføje meta-tags til SEO med “Simple Custom CSS and JavaScript” plugin’et.
    • Åbn “Simple Custom …”
    • Lav en ny HTML
    • Marker at koden skal sættes ind i “Header” (hvilket er lidt ulogisk, eftersom koden bliver sat ind i <head>)
    • Opdater
    • Tjek om dine SEO-tags kommer ind i koden.

    Her er en SEO-tag generator:

    SEO Generator

    Denne manuelle metode er ikke nær så grundig som det du ville få ud af at bruge plugins, som Yoast og lignende. Men det er godt nok til at passere en Lighthouse test.

    Hvis du har mulighed for det, så kunne Open Graph Tools tilføje noget ekstra i forhold til SEO og SoMe.

    Open Graph

    Med Open Graph kan du generere links, der ser omtrent sådan ud, når du indsætter linket i en SoMe eller lignende:

    Open Graph Tags
    Open Graph tags – formatterer hvordan links tager sig ud på SoMe. Derfor er dette billede kun en antydning af, hvordan det kan tage sig ud i de sociale medier. I sidste ende bestemmer SoMe udseendet.

    Du kan skabe de nødvendige OG-tags med knappen herunder:

    Open Graph Generator

    Kode fra min header:

    <!-- PETJ manuel SEO -->

<!-- SEO stuff -->
<meta name="title" content="Woo Garagesalg">
<meta name="description" content="Testshop for multimediedesignere. Viser hvordan du kan sætte en eShop op med Woo. ">
<meta name="keywords" content="Multimediedesigner, e-commerce, woo, woocommerce, eShop, ">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="7 days">
<meta name="author" content="Per Thykjær Jensen, MA IT, interactionDesign and Multimedia">

<!-- Open Graph Stuff -->
<meta property="og:title" content="Woo Testshop">
<meta property="og:description" content="Testshop for Multimedia Designers. A class about Woo.">
<meta property="og:image" content="https://woo.thoth.dk/wp-content/uploads/2024/09/8c2df8a4-0f76-4a92-94f8-5f26d7591227-e1727429387594.jpeg">
<meta property="og:url" content="https://woo.thoth.dk">
<meta property="og:type" content="website">

<!-- /PETJ -->
  • Menu og html

    Menu og html

  • Mega Menu

    Mega Menu

    By pure HTML, CSS and JavaScript

  • Woo: Produktfotografi

    Woo: Produktfotografi

    Produktfotografering

    Her er nogle øvelser, som kan hjælpe en klasse med at lære at fotografere produkter til WooCommerce:

    Øvelse 1: Grundlæggende produktfotograferingsteknikker

    Mål: Forstå de grundlæggende principper for lys, vinkler og baggrund.

    1. Materialer: Enkle produkter (som kopper, bøger, tøj), smartphone eller kamera.
    2. Øvelse:
    • Placer produktet på en ren, neutral baggrund (f.eks. et hvidt bord eller en hvid væg).
    • Prøv at tage billeder fra forskellige vinkler: forfra, fra siden, ovenfra.
    • Eksperimenter med naturligt lys og brug evt. lamper for at eliminere skygger.
    • Diskuter i gruppen, hvilke vinkler der fremhæver produktet bedst.

    Øvelse 2: Opsætning af et lysboks-studio

    Mål: Lær at opsætte et mini-studio for professionelle billeder.

    1. Materialer: Lysboks (kan være DIY med hvidt papir), lamper, små produkter.
    2. Øvelse:
    • Opsæt en lysboks med en ensartet baggrund og belysning fra flere sider for at reducere skygger.
    • Tag billeder af små produkter (som smykker eller elektronik) fra forskellige vinkler i lysboksen.
    • Rediger billederne let for at justere lysstyrke og kontrast.

    Øvelse 3: Styling af produktet

    Mål: Forstå hvordan styling påvirker præsentationen af produktet.

    1. Materialer: Tøj, sko, eller andre større produkter; rekvisitter til styling (som stof, blade, magasiner).
    2. Øvelse:
    • Vælg et produkt og find matchende rekvisitter, der supplerer produktet uden at tage opmærksomheden fra det.
    • Eksperimenter med at arrangere rekvisitterne omkring produktet og tag billeder fra forskellige vinkler.
    • Diskuter, hvordan styling ændrer opfattelsen af produktet.

    Øvelse 4: Skabelse af konsistente billeder til WooCommerce

    Mål: Opret ensartede billeder til webshoppen.

    1. Materialer: Forskellige produkter fra samme kategori (f.eks. sko eller tasker), lysopsætning.
    2. Øvelse:
    • Tag billeder af produkterne fra samme vinkel og under samme lysforhold, så de ser ens ud på WooCommerce-siden.
    • Lær at beskære billederne til samme størrelse og format (fx kvadratiske billeder).
    • Diskuter vigtigheden af konsistens på en webshop for at skabe en professionel følelse.

    Øvelse 5: Redigering af produktbilleder

    Mål: Lær grundlæggende redigering for webshops.

    1. Materialer: Billedredigeringsprogram (som GIMP, Photoshop eller online værktøjer).
    2. Øvelse:
    • Importer billeder fra tidligere øvelser og lær at justere lysstyrke, kontrast, og beskæring.
    • Brug værktøjer til at fjerne baggrunde, så billeder kan have en ren, hvid baggrund.
    • Eksportér billeder i de korrekte formater og størrelser til WooCommerce.

    Øvelse 6: Mobilfotografering og optimering til web

    Mål: Tag billeder med en smartphone og optimer dem til web.

    1. Materialer: Smartphone, produkter, billedoptimeringsværktøjer (som TinyPNG eller ImageOptim).
    2. Øvelse:
    • Brug en smartphone til at tage billeder af produkterne.
    • Diskuter, hvordan man optimerer billeder til web uden at miste kvalitet.
    • Lær at komprimere billeder for hurtigere indlæsning på WooCommerce.

    Disse øvelser kan give eleverne praktiske færdigheder i produktfotografering, som er afgørende for at skabe professionelle billeder til en WooCommerce-butik.

  • How to build a website with Elementor

    How to build a website with Elementor

    YouTube tutorial by Elementor

    Use the video above to get started, if you want to the alternative editor Elementor.

  • Rubric on Canvas

    Rubric on Canvas

    How to use Rubric as a feedback method on the Canvas LMS.

    Video by the makers of Canvas.

    How to add a Rubric

    There’s more in depth info in the article, click the button:

    Read article
  • Github – how to syncronize a fork

    Github – how to syncronize a fork

    On Github

    On the webpage you’ll see that your fork is behind what’s happening on the original branch:

    Now click “Sync fork”.

    Then click on “Update branch”. After a while your repo is updated.

    Open Github Desktop

    However, you still need to sync your local files. Here you have to “Fetch origin” in Github Desktop (or a similar app).

    Now you’ll see this:

    Then click “Pull origin”.

    Then your local files will be updated, after a while.

    Related video: Solve Merge Conflict

    How to solve a merge conflict by Github Deskop.
  • Grid Blokken

    Grid Blokken

    DALL·E-2024-09-10-08.25.53-A-dynamic-manga-style-illustration-featuring-a-witch-with-flowing-robes-and-a-pointed-hat-standing-on-an-anchor.-A-page-from-a-magical-book-is-seen-l

    Grid Blokken

    Grid blokken giver nye muligheder for layout med et CSS-agtigt grid.

    Grid Block

    Medie og tekst blok

    • Solution: Git disallow error

      If you can’t push to git you can try to increase the git buffer like this in your terminal, and press enter: If this does not work, test whether git is installed on your system. Try this in the terminal, and press enter: If you get an answer like this: If you get an error,… Read more: Solution: Git disallow error

    • Tutorial Block Patterns

      Denne tutorial viser, hvordan du kan oprette blokgrupper (dvs. “patterns”), som kan genbruges overalt på dit site. Blokgrupperne minder lidt om CCS-variabler, hvor du genbruger nogen settings og redigerer dem fra ét sted.
    • WP 6.7 screendump

      WordPress 6.7 er klar

      Den nye version af WP kommer selvfølgelig med en ny version af standardtemaet, som præsenterer de nyeste muligheder med WP. Uanset om du bruger standardtemaet eller noget andet, så er det altid en god ide at sætte sig ind i nyhederne.
  • try.new

    try.new

    Try.new is an alternative to WP Playground. It will create a WP instance that will last for half an hour or so. Enough to try out new features.

    When you test, try the WP Beta Test plugin.

    try.new

    Review: Try something else

    To be honest try.new is just an attempt to monetize WP Playground. Why use it – when you can get the same options for free with no time limit?

    Other Posts About WP

  • WP Speed Build Contest

    WP Speed Build Contest

    In this video Jamie Marsland present a contest.Two designers battle.

    In just 30 minutes they have to build a complete website in WordPress.

    Video by Jamie Marsland
  • Hvordan laver man “margin” omkring en gruppe?

    Hvordan laver man “margin” omkring en gruppe?

    Løsning:

    Prøv at sætte en bred border på gruppen – og giv denne border samme farve som sitets baggrund!

  • Onepager princippet

    Onepager princippet

    Onepager klik demo

    I princippet handler onepagers om at navigere fra et link til et “anker” (anchor) på en webside. Onepagers gør dette på en ekstrem måde. Som regel er ankeret en id i et element.

    Du kan tilføje et anchor ved at:

    • marker blokken i Dokumentpanelet
    • under “Blok” skal du klikke på “Avanceret”
    • her kan du tilføje en “anker”

    Når du vil navigere til et anker skal du lave et link. Du kan linke fra mange elementer, fx knapper, billeder, nogle markerede ord etc.

    Lad os sige, at du kalder dit html anker hobbies. Da skal det link du laver pege på det sådan:

    Relative eller Absolutte links?

    Linket herover er relativt, dvs. en kort form. Hvis din WP-løsning har flere sider, så virker det relative link ikke fra andre sider eller indlæg. Derfor vil jeg anbefale, at du bruger absolutte links i stedet for. Et absolut link er hele URL’en til siden eller indlægget med tilføjelse af #hobbies, fx sådan:

    https://thoth.dk/index.php/background-image/#hobbies

    Fordi at WP-løsninger sjældent er rene onepagers, vil jeg anbefale, at du vælger de absolutte links frem for de relavite.

    Knappen øverst i denne artikel peger på et anker over billedet.

    Knappens link ser sådan ud:

    https://thoth.dk/index.php/2024/09/10/onepager/#gruOgGys
Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close