Forberedelse

• Læs kapitel 18 om SEO
• Læs/genlæs indledningen til kapitel 6 Digital markedsføring samt afsnit 6.2 Owned media. Du finder kapitel 6 under del 1, og du har måske tidligere læst kapitlet i grundforløbet.

Formål

• Lære om SEO, dvs søgemaskineoptimering
• Se perspektiver på hjemmesidekodning hos W3schools
• Lave et site

Fælles gennemgang

Fra sidst

• Forklar, hvad CSS er
• Hvordan får man CSS til at virke på HTML
• Hvorfor er det en god idé at placere CSS i en fil for sig

SEO: Historien om Google Prinsessen (Klodshans version 2.0)

Der var engang en prinsesse. For ca. 25 år siden var hun en lille prinsesse i et lille kongerige, der hed Google. Der var andre lignende kongeriger, f.eks. Yahoo, som var større, men kongens datter havde planer, så en dag hun ind til sin far. “Far, jeg vil være verdens mest ombejlede prinsesse. Jeg elsker, når andre bejler til mig, og når de kommer med gaver. Jeg vil ranke millionvis af bejlere i et system, som vil gøre den kinesiske regering år 2022 grøn af misundelse, og jeg vil være verdens mægtigste prinsesse.

Hendes far kikkede på hende med åben mund. De havde da godt nok snakket om det i kongerigets øverste råd, men hendes planer lød alligevel ret vidtløftige.

Hun ivrede videre. “Ja far, kan du huske historien om Klodshans. Prinsessen fra dengang havde hundredevis af bejlere fra hele landet, og hun kunne vælge og vrage. Sådan vil jeg også have det, men vi er i internettets tidsalder nu, og jeg vil have millionvis af bejlere fra hele verden, som jeg kan vælge og vrage imellem”.

Hendes far var en god far og en dygtig konge, nogle ville endda kalde ham en god forretningsmand. Hvor andre piger vil have heste, tøj, biograf-, by- og cafeture med veninderne, Gucci-tasker,   kunstige negle, fri shopping i Milano med fars kreditkort, fast ugentlig tid hos byens dyreste frisør,  mascara samt kørekort og en lyserød Fiat 500 med soltag, så ville hans datter have bejlere bare for at have bejlere. “Ikke helt dumt”, tænke han, og sagde så: “Ok min datter. Om 10 – 20 år lover jeg dig, at du har millionvis af bejlere, og du får lov til at styre dem alle. Du skal endda få lov til at bo i et af verdens rigeste kongeriger, for bejlerne skal naturligvis komme med masser gaver til dig. Jeg lover dig endda, at du ikke skal gifte dig med dem, du skal bruge alt din arbejdstid på at vælge og vrage. Resten af tiden skal du dase og bruge alle dine penge på, lige hvad du har lyst til. Du bliver så rig og mægtig, at du slet ikke kan forestille dig det”.

Hans datter sluttede af: “For resten far, jeg vil også have et større og noget mere moderne slot”. Faren svarede: Selvfølgelig min datter, om 20 år bygger vi det her til dig og til alle dine tjenere i Californien”. For selvfølgelig skal du bo i Californien.

Hendes far holdte ord. Google-prinsessen har millioner af bejlere, der alle kæmper om hendes gunst. Millioner af mennesker tænker på hende hver dag og gør deres bedste for at opfylde hendes mindste ønske. Dyre bureauer praler, hvis deres bejlen giver resultater, og overalt i verden viskes der tricks om, hvordan man fanger hendes gunst. Ud over det hader Google prinsessen lige som prinsessen i Klodshans, når folk kopierer. Hellere en god original end en dårlig kopi.

Vi kalder den globale bejlen til Google-prinsessen for “søgemaskineoptimering” eller SEO. De ord, som Google sælger for at komme øverst i Google ved søgninger, kalder vi for Google Ads, tidligere Google AdWords. I 2019 havde Google en fortjeneste på ca. 1.400 mia kr., næsten alt sammen stammede fra salg af ord til søgemasminerne. Meta med Facebook og Instagram “nøjedes” med et overskud på ca. 660 mia. kr.

Dagens oplæg

• Regler for SEO og google prinsessen. SEO angår kun owned media

Opgaver

• Lav grupper på max 4 personer. Brug evt. makkerskabsgrupperne. Alle opgaverne er gruppeopgaver undtagen 27.2 og den sidste del af 27.4

27.1 Forskellen på owned, paid og earned media

• Forklar de 3 udtryk: Owned, paid og earned media. Du skal nok google udtrykkene

En ung kvinde har mange følgere på hendes instagram. Så mange, at hun kan tjene penge som influencer.

• Set med hendes øjne: Hvad slags medie er hendes instagram-konto: Owned, paid eller earned media
• Set med dem, der sender varer til hende, som hun så viser på instagram: Hvilken type medie er hendes medie: Owned, paid eller earned?
• En af hendes veninder fortæller en anden veninde, at “hun har en fed instagram og er dygtigt til at fortælle om produkterne”. Hvad er det for en slags media
• Giv yderligere eksempler på owned, paid og earned media

27.2 SEO optimering

I opgaven her skal du arbejde individuelt inde i Repl.it

• Tag fat i dit site fra opgavesæt 26 eller en anden hjemmeside, du har lavet
• Find 2 – 3 søgeord, som du vil findes på i søgemaskinerne. Hvis dit site handler om AGF, så kunne søgeord være: AGF, fodbold, superliga.
• Lav SEO, så du kan ranke højere i søgemaskinerne. Tip: Brug de guidelines, der står lige over opgaverne

Et par regler til SEO, som du kan bruge.

• Alle sider skal have en titel
• Kun 1 <h1> overskrift pr side, men lige så mange <h2> og <h3>, som man har lyst til
• Du skal sætte meta-tags ind i <head> området, se https://www.w3schools.com/tags/tag_meta.asp. Du skal som mimimum have en description. Keywords er frivillige (Google Prinsessen vægter det ikke mere), men hvis du allerede nu er en selvfed CSS-haj lige som mig (og det håber jeg, at du er), så sæt også en author-meta tag ind med dit navn
• Både <title>, metatags og <h1> skal helst indeholde de søgeord, du vil findes på

27.3 Opsummering på HTML

Gruppeopgave: Svar på følgende spørgsmål. For hvert spørgsmål skal du indsætte kode og forklare, hvordan det virker. Jeg har hjulpet dig lidt:

SPØRGSMÅL	SVAR	SKÆRMKLIP FRA REPL
Hvad skal start-html dokumentet på et site hedde	index.html
Hvilken kode skal som minimum være på en HTML side
Hvad kan vi bruge koderne herunder til, og kunne det t være en god idé at inkludere dem i den kode, der som minimum skal være på en side? <meta charset=”UTF-8″>   <meta name=”description” content=”Free Web tutorials”>   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>		Skærmklip ikke nødvendigt
Hvad er segmantiske tags, hvilke segmantiske tags bruger vi, og hvad bruger vi dem til
Hvordan linker man fra den ene side til den anden
Hvordan indsætter man et billede
Hvordan indsætter man en video fra Youtube
Hvordan laver du et link “ud af huset”, f.eks. til www.dr.dk. Tip: Kik på w3schools under HTML > Link
Hvordan får man styling til at virke på en side

27.4 Udvikling og projektledelse

Forklar følgende begreber

• Kravspecifikation
• Agil udvikling
• Prototyper
• Målgrupper/brugergrupper
• User stories
• Strukturdiagrammer

Besvar følgende spørgsmål:

• Hvad er sammenhængen mellem prototyper og strukturdiagrammer
• Hvordan giver user stories dig målgrupperne/brugergrupperne
• Hvad er sammenhængen mellem user stories og kravspecifikation
• Hvad er sammenhængen mellem user stories og agil udvikling
• Hvorfor er det ikke nogen katastrofe, hvis ikke alle user stories bliver implementeret inden app’en/hjemmesiden sættes i drift?
• Hvad kan du gøre for at gøre din brugerflade mere brugervenlig? Giv eksempler
• Hvordan vil du bære dig ad med at teste dit site

Tip: Ud over at søge i bogens del 1, så brug gerne min oversigt over fagbegreber, som du finder under bliv-klogere.ibc.dk > Repetition og dokumentationsopgave > Oversigt over fagbegreber

27.5 Større site

Del 1. Projektledelse og samspillet med kunden

Den første del af opgaven er en gruppeopgave

• I skal arbejde i grupper på 3 – 4 personer, på det samme site, men I skal gennemføre kodningen individuelt og have et produkt på hver jeres skærme
• Du skal lave et site til en restaurant. Restauranten skal enten henvende sig til blå, grøn eller folk med smag for det traditionelle (minerva-modellen). Du må ikke tage navne fra restauranter, som findes i forvejen
• Diskuter, hvordan du vil indkredse udseende, målgruppe og funktioner for hjemmesiden. Diskuter også en model for projektledelsen. Tip: Læs afsnit 6.5 https://bliv-klogere.ibc.dk/index.php/laerebog-til-del-1-introduktion/#65_Opsummering_omkring_appudvikling
• Lav en prototype, et strukturdiagram og user stories for hjemmesiden.
  • Du bestemmer selv, om prototypen skal være tegnet (elever hos Jane har tegnet) eller i PowerPoint (elever hos mig har lavet PowerPoints). Du skal ikke lave prototyper i Repl, Repl bruger vi til selve kodningen.
  • Du skal mindst have 8 user stories, gerne 10
  • Husk at prioritere dine user stories
• Jeg skal godkende jeres prototype, strukturdiagram og user stories inden, at I går videre

Del 2. Kodning

Denne del er individuel. I skal alle kode jeres egen løsning. Løsningerne må godt ligne hinanden, men I skal kode individuelt.

Inden du starter: Få de formelle krav på plads først. Når det er i orden, så er det tid til at prøve nye løsninger af.

De formelle krav er:

• Minimum 3 sider (plus en ekstra, men den står nederst)
• Kodning skal foregå i Repl.it
• Du skal kunne navigere mellem alle siderne fra alle sider (= svarer til at have en menu)
• Der skal være min 1 tabel, 1 liste og 1 video
• Du skal søgemaskineoptimere på alle siderne. Dvs. udvælge søgeord for de enkelte sider. Genbrug er tilladt men ikke 100% genbrug for alle sider
• Du skal bruge CSS på alle siderne herunder styling af baggrunden
• Ud over ovenstående skal du også have en side, hvor du kort viser kravspecifikation og user stories. Kald siden”Til underviseren”. Siden skal indeholde:Kravspecifikation
  • User stories. User stories vil nok være den samme for alle i gruppen, men I skal alligevel have den på hver jeres side
  • Hvad du har gjort for at gøre siden brugervenlig. Tip: Der står noget om brugervenlighed i lærebogens del 1. Det er tilladt at skrive, hvad du havde tænkt dig at gøre, hvis det, du vil, ikke lykkes i forhold til kodningen
• Alle siderne skal søgemaskineoptimeres med undtagelse af siden “Til underviseren”

Hvis du har glemt basis kodning, så se videoen her:

Så det ekstra

• Prøv ting af, du henter fx fra W3schools: Ok hvis det ikke virker 100%, men prøv
• Du kan få inspiration til nye løsninger her: Frontend kode i udbrud. (larsljungqvist.repl.co). Du kan se koden bag sitet her: https://replit.com/join/lhashmmsjh-larsljungqvist (hvis det ikke virker, så prøv https://replit.com/join/cmtfoitvvt-larsljungqvist
• Med andre ord: Til til at vise, at du) kan og tør lege med HTML og CSS

Du får en karakter for din præstation.

• Denne side skal ikke søgemaskineoptimeres

Bemærk: Du får en karakter for din præstation. Hvis du “kun lige” opfylder minimumskravene, skal du ikke regne med nogen speciel god karakter. Karakteren indgår i din årskarakter.

Ideer til udfordringer

Inspiration “Frontend kode i udbrud”: https://Demo-fedt-website.larsljungqvist.repl.co. Se koden bagved her https://replit.com/join/kbizjrzaak-larsljungqvist. Du må naturligvis planke alt det kode fra mig, som du har lyst til.

W3Schools har nogle fede kodestumper, som man kan stjæle som man vil. De findes under https://www.w3schools.com/howto/default.asp. Der er f.eks. sliders på forsiden, fald-ned menuer https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav, responsivt design der gør, at din kan se forskellig ud alt efter, om den vises på en mobil (smal skærm) eller en computer (bred skærm) og alt muligt andet. Nok til at holde dig beskæftiget et par år, hvis du kan lide CSS.

Alt, hvad du f.eks. har lavet i Wix, er lavet med HTML og CSS.