Skapa en hemsida med information till eleverna i Gemini

Det finns många fördelar med en egen hemsida. Framförallt är det du som äger koden. Förr tog det timmar, ibland dagar, att handknacka fram en snygg sida. Numera gör en AI jobbet på några sekunder.

Olika AI fungerar på olika sätt. I det här exemplet används Gemini. Claude fungerar ungefär likadant.

Innan du en börjar be Gemini om kod måste du fundera över hur sidan ska visas. Har du en egen domän, eller ska du använda Google Sites som oftast finns med i skolornas olika googlepaket?

1 Var finns exemplen?

Börja med att försöka hitta en gratis mall, eller "template", av den sida du är ute efter. Sökord kan vara: free HTML "single page" template. Det är viktigt att den är gratis eftersom företagen som skapar mallar bevakar internet svartsjukt. Det är också viktigt att den är baserad på HTML, eftersom du vill ha en enkel sida. För enkelhetens skull är det även bra om sidan är "single page" annars får du lätt fram en mall för flera sidor samtidigt och det vill du inte.

Jag gick in på https://freehtml5.co/ och letade upp mallen "Moon" som exempel: https://freehtml5.co/moon-free-minimal-multipurpose-bootstrap-template/ Den är baserad på "Bootstrap" som fungerar bra både på fristående sidor och i Google Sites. Det är visserligen en äldre version av Bootstrap, version 4, men för en enkel sida har det ingen större betydelse. Det finns en "live preview" på sidan så att du kan se hur den ter sig i verkligheten, det är vanligt bland företag som hanterar templates. Tyvärr fungerar inte preview på den här mallen...

Tryck på knappen för att ladda ner din template. Du blir ombedd att ange en e-mailadress. Sedan kan du ta hem mallen. Den kommer i en zip-fil (min heter moon.zip). Packa inte upp den, det gör Gemini åt dig. Om Windows packar upp den automatiskt får du markera alla filer i den när du laddar upp filer i Gemini. Det blir litet mer omständligt, men det går också bra.

Det fungerar ungefär likadant på alla mallsidor.

2 Skapa en testsida i Gemini

För att skapa sidor ska du ställa in "Canvas" i Gemini. Ladda sedan upp din zip-fil till Gemini, eller de filer som zip-filen innehöll om Windows packat upp den automatiskt.

Prompt

Använd den uppladdade mallen "moon".
Skapa en sida åt mig.
Den ska innehålla samma text  och samma bilder som som denna sida: https://www.grundskoleboken.se/wiki/F%C3%B6rsta_v%C3%A4rldskriget,_skottet_i_Sarajevo
Du får bara använda HTML, CSS, javascript och basmallen från Bootstrap 4.

Resultatet från Gemini är en sida med bra texter, men med helt egna bilder som inte har någonting alls med den sida som jag angav. Antagligen är Gemini rädd att bryta copyright. I övrigt blev sidan riktigt bra, och det är enkelt att gå in i koden och ändra bildlänkarna till något jag själv tycker passar bättre, när det redan finns inlagda bilder i koden.

3 Skapa en testsida för Google Sites

Då kan vi testa och se om det går att skapa en sida som ser likadan ut i Google Sites.

Prompt

Använd den uppladdade mallen "moon".
Skapa kod så att jag kan lägga in den i kodfönstret på en sida i Google Sites.
Innehållet som koden skapar i Google Sites ska innehålla samma text 
och samma bilder som som denna sida: https://www.grundskoleboken.se/wiki/F%C3%B6rsta_v%C3%A4rldskriget,_skottet_i_Sarajevo
Du ska länka in basmallen från Bootstrap 4.

Bilderna måste bytas ut. Istället för src="https://images.unsplash.com/photo-1513151233558-d860c5398176?auto=format&fit=crop&w=800&q=80" söker du upp en lämplig bild och ändrar koden. Till exempel src="https://www.hungarianconservative.com/wp-content/uploads/2023/06/sarajevo_assassination_illustration.jpg?auto=format&fit=crop&w=800&q=80". Gör likadant med alla bilderna.

Publicera sidan och se till att delningsalternativet är inställt på rätt sätt. Ska bara dina elever se sidan kan du ha kvar standardinställningen att bara de inom samma organisation kan se den. Annars måste du själv ställa in att sidan är offentlig.

Sida: https://sites.google.com/edu.stenungsund.se/skotten-i-sarajevo-med-moon/startsida