Forberedelse

• Læs kapitel 17 og se den tilhørende video

Formål

• Lære SEO
• Lave en gennemgående opgave

Fælles gennemgang

Fra sidst

• Hvad er CSS
• Hvad kan vi bruge det til
• Hvilke 3 steder kan vi lægge vores CSS
• Hvad er et eksternt stylesheet og hvorfor er det mere professionelt

Lektien til denne gang

• Giv inspiration til opgaven på https://www.w3schools.com/howto/default.asp
• Det er sidste “almindelige” lektion, så derfor skal I have en historie læst højt.

Historien om Google Prinsessen (Klodshans version 3.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 2020 grøn af misundelse, og jeg vil være verdens mægtigste prinsesse.”

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 2020 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å, 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.

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 AdWords. I 2019 solgte Google for ca. 134.810.000.000 dollar AdWords, i øvrigt en stigning på ca. 20 mia dollar pr år siden 2016.

Dagens spørgsmål:

• Hvad er SEO
• Giv eksempler på, hvordan vi kan gøre Google Prinsessen glad
• Hvorfor skal vi overhovedet bekymre os om Google Prinsessen
  

Øvelser

26.1 Meta tags og SEO

• Indsæt meta tags for charset, name=”description” og name=”keywords” for alle 3 sider på dit website om Sydfyn. Du kan få lidt hjælp her: https://www.w3schools.com/tags/tag_meta.asp
• Begrund, hvad du skriver i dine meta tags. Du skal kunne vise det til klassen
• Kom med et par råd om, hvordan du bejler til Google Prinsessen

26.2. Større opgave: Lav dit eget site

Inden du går i gang med selve opgaven.

Jeg har lavet en lille vejledning til dig, hvor du kan se et eksempel på en god opgave. Se Vejledning 5. Den gode opgave.

Selve opgaven

Du skal nu lave dit eget site. Du må hjertens gerne snakke sammen med andre, men du skal kode det selv.

Vælg mellem følgende emner:

• Kageopskrifter
• Tøj
• En fanside for den første popstjerne, som du blev helt vild med
• Biler
• Sport
• En site for en feriedestination, f.eks. Ærø, København for unge, hvor du selv godt kunne tænke dig at tage hen på miniferie.
• Selvvalgt emne, hvis du har noget, du brænder for. F.eks. AGF, AGF, AGF eller AGF.  :-).

Krav til din løsning. I skal kode hver jeres løsning. Hvis Atom ikke virker, så kontakt mig!

• Du skal lave en sitemappe
• Du skal have mindst 1 forside, 2 undersider og en side med kontaktoplysninger
• Du skal have farver på siderne
• Der skal være et billede på hver side + alt–atributten
• Man skal kunne navigere mellem alle siderne
• Du skal have mindst 1 video fra YouTube indsat
• På en af siderne skal du lave en tabel med en oversigt over, hvornår du svarer på telefonopkald. Du skal gøre det i en tabel, som skal se sådan ud:

Ugedag	Åbningstider
Mandag – fredag	8:00 – 16:00
Lørdag	9:00 – 13:00
Søn- og helligdage	Lukket

• På kontaktsiden skal du have 3 links til relevante websider. Links’ne skal være i en liste
• Du skal vise, at du forstår at bruge styles i et eksternt stylesheet
• Der må ikke være styling andre steder end i det eksterne stylesheet
• Til sidst: Pluk et eller andet fra w3schools.com og brug det, f.eks. en særlig styling af teksten. Det giver pluspoint at kunne bruge HTML og CSS kode, som jeg ikke har undervist dig i, men som du alligevel kan anvende
• For de meget ambitiøse: Her er noget super god inspiration hos W3schools: Gå ind under MORE > HTML and CSS, How to: https://www.w3schools.com/howto/default.asp. Men vent indtil de andre ting er på plads 🙂

Slutproduktet er sådan her

• Du skal aflevere et Word dokument, hvor du gør rede for følgende:
  • Skærmfotos af dine resultater i en browser
  • Hvordan har du arbejdet med typografier, farvelære og gestaltlove
  • Skærmfotos/skærmdump af din kode plus kommentarer til koden. Hvad har du gjort
  • Skærmfoto af din struktur. Jeg vil se, at du har separate mapper til billeder (images) og css (styles)
  • Forslag til forbedringer i forhold til udseende. Brug din viden om brugbarhed og det grafiske puslespil.
  • Forslag til udvidelser

Arbejdsform: Opgaven afleveres individuelt. I må naturligvis gerne snakke sammen i grupper, men I skal kode individuelt og skrive individuelt.