Tech Tuesday

HK – Tech Tirsdag

Velkommen til alle sammen!
Start med at downloade Local og opgavepakke med det samme.

Hvem er Jes?

  • Midaldrende mand
  • Mange interesser
  • Dyrket mange forskellige sports, spillet ishockey i 12 år
  • I dag løb
  • Studeret medicin og videre over i IT og senere undervisning
  • Uddannet Datamatiker, har undervist i webudvikling og udviklet hjemmesider i mange år
  • Altid været glad for teknik og mad

Aller først

Fejltagelser

En ekspert er en der har lavet alle fejltagelser indenfor et bestemt område.

Niels Bohr



Målet i dag er: -> at plante et frø af interesse.

Baggrundsforståelse – Internettet, hvad er det?

  • Hvad bruges det til?
    • Fortælle en historie
    • Vise data og information
    • Brande sig og synliggøre sig
    • Sælge fysiske eller digitale varer
  • Forskel og lighed mellem webservers / personlige computers PC
  • Lej en webserver => webhotel
    • Webhotel? -> Rabatkode til Simply.com (+3 mdr. gratis = ZTXF5D)
  • URL (webadresse) IP => bogstaver (domæne = URL)
  • CMS / håndkodede sites
    • Håndkodet site = HTML + CSS + JS
      • HTML – HyperText Markup Language (byggestenene til indholdet)
      • CSS – Cascading Style Sheets (placering og design/smuksering)
      • JS – JavaScript (lav interaktive effekter i browseren)
    • CMS = Content Management System
    • Fremtiden?
      Alt går mod -> højere abstraktionsniveau og NoCode????
  • WordPress
    • Økonomi for Automatic
      • WordPress.com / wordpress.org
      • 200+ fuldtidsansatte
    • Største CMS
      • 65% af markedet for CMSer (nr.2 har under 4,6%!)
      • 43% af alle websites er WordPress
      • 60.000+ gratis plugins
      • 10.000+ gratis themes

    • WordPress Market Share Statistics (2011-2022) – Kinsta®

    CMS Market Share Trends: Top 10 Content Management Systems In 2022 (searchenginejournal.com)

    Usage Statistics and Market Share of WordPress, September 2022 (w3techs.com)

    CMS Market Share Analysis July 2022 • joost.blog

    IT Crowd introduces the internet

    OVERBLIK og KØREPLAN

    1. Installer WordPress lokalt
    2. Opgaver og intro til WordPress
    3. Tools og inspiration
    4. Mosh up! Giv den gas og jeg hjælper. Gå rundt og kig og hjælp? Sidst tag et kig på hinandens sites?

    1. Installer WordPress lokalt med Local

    Local – installer WordPress lokalt på din PC

    Download Local fra localwp
    Signup til Local (navn -> email -> ingen telefonnummer)
    Installer og åben Local
    Lav et WordPress site på Local
    – ‘Create a new site’
    – Giv sitet et navn (nemt at ændre senere)
    – Vælg ‘Preferred setup’
    – Lav en administrator, en bruger, med et navn, password og din email (glem ikke dette info!)
    – Tryk ‘Add site’
    – Klik admin / view site

    Sådan starter du Local og dit WordPress site op næste gang:

    Så har du en komplet WordPress installation (plus Apache + PHP + MySQL) kørende lokalt på din maskine.
    Se video om installation og eksport af WordPress (indtast navn, email, men ikke tlf.)
    OBS: Ældre computere skal have BIOS settings opdateret til at acceptere virtual machines

    2. Opgaver og intro til WordPress

    Først skal vi logge ind og gøre det nye WordPress site klar til brug.

    WordPress 1 – Kom igang

    Intro – et hurtigt overblik over WordPress

    Post / pages eller på dansk indlæg / sider (statisk / dynamisk indhold)
    Blocks (Gutenberg editor – ikke mere Word interface, men ‘blocks’)
    Altid 3C (Container, column og content // beholder, kolonne og indhold)

    Column

    Die hard 3Cs


    Alle WordPress builders bruger 3C (Elementor, Beaver, Divi, Spectra, Gutenberg osv.)
    Themes (bestemmer udseende og layout)
    Plugins (tilføjer ekstra funktionalitet)

    Vores mission:


    Side om chokolade.
    Vis slutresultatet først – målstregen

    Vi skal i den her retning
    Vores WordPress Fundament
    • Installer theme
    • Installer plugins
      • Kadence Blocks (alternative Builders Spectra/Elementer/BeaverBuilder osv.)
    • Hent ressourcer
      • Download samlet pakke af tekst og billeder til opgaven

    WordPress 2 – Fundamentet

    Setup af vores fundament

    Interfacet (Dashboard – gammel bil instrumentbord)
    Gennemgå Settings for WordPress (general, reading – discourage Search engines, User profile)
    Gennemgå Appearance -> Customizer (Kadence specifikt under tilpas – Kadence Global Colours)
    Kadence colors import:

    [{"color":"#7c1909"},{"color":"#c92107"},{"color":"#1A202C"},{"color":"#2D3748"},{"color":"#4A5568"},{"color":"#718096"},{"color":"#EDF2F7"},{"color":"#F7FAFC"},{"color":"#ffffff"}]
    Accents til highlighting, contrast til tekster, base til baggrunde

    Opgaver

    Opret en side (page) og kald den ‘forside’.

    Indhold

    Content sektion – Hero sektion

    Content sektion – Info bokse (info box, galleri, tekstafsnit og overskrifter og lister og white space)

    Content sektion – Galleri (Husk Appearance->Customizer->General->Performance->Enable Lightbox)

    Content sektion – Tekst, links og video

    Content sektion – Call to action / Kontakt

    Content sektion – Medarbejder sektion med billeder (3 medarbejdere)



    Smukser
    Page settings (Page title: disable / Page layout: normal / Content vertical padding: Bottom only)
    Smukser og placer indholdet på din side. (farver, tekst, afstande, gradienter, baggrunde og runde hjørner på billeder osv.)

    Struktur

    Tilføj sider og lav navigationsmenu

    Ekstra opgaver og ideer
    + Appearance Kadence – Branding / Typografi / colours / Header layout / Page layout / Footer layout
    + Appearance Kadence – Getting started med video
    + Lottie files
    + Font pairings
    + Tablet view og mobile view
    + Design Library + Kadence starter themes (husk at tilpasse til resten af dit site)
    + Exporter site med All-in-one WP Migrate plugin

    3. Tools og inspiration


    Tools 2023:

    via GIPHY

    WebDesign trends 2022

  • Lokalitet
  • Scroll invitation
  • Scroll invitation
  • Big typography
  • Big typography
  • Less HERO images
  • Big scrolling typography
  • Split screening
  • Fuldt smæk på
  • Alegria ‘Joy’
  • Alegria
  • Split screen æstetik
  • Layering effekt


    • Links videre:

    Kadence Deep Dive
    How To Make a WordPress Website – 2022 – 1 hour!