Differences
This shows you the differences between two versions of the page.
mattias_02 [2019-11-05 13:02] Mattias Hamberg [Instruktioner] |
mattias_02 [2022-07-18 13:20] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Frågesport om webbens historia ====== | ||
- | |||
- | ==== Länkar ==== | ||
- | |||
- | * Internetmuseum: | ||
- | * Lär dig skapa formulär: [[https:// | ||
- | ==== Instruktioner ==== | ||
- | |||
- | I denna uppgift ska du skapa en frågesport på centrala fakta från internets historia, så som den presenteras på internetmuseum.se eller via vår gemensamma presentation i klassrummet. Denna uppgift ska testa utveckla och testa såväl dina kunskaper i HTML och CSS som i PHP. Det är alltså ett samarbetsprojekt mellan Webbutvecklings-kursen och Programmering 1 där de olika kurserna kommer att titta på olika aspekter av din kod. | ||
- | |||
- | - Läs på om internets historia på [[https:// | ||
- | - Utifrån informationen ska du skapa en frågesport med minst 15 centrala fakta. | ||
- | - Svarsalternativen ska vara märkta med antingen flervalsfält (select), radioknappar (radio) eller checkboxar. Läs mer om HTML5-formulär via följande sida [[https:// | ||
- | - Man ska skriva in sitt namn (används till en high-score-lista) | ||
- | - Minst en fråga ska ha en tillhörande bild. | ||
- | - Minst en fråga ska ha en tillhörande video. | ||
- | - Formge din frågesport med hjälp av CSS. Denna gång är utformningen väldigt fri. Men en god formgivning ska bland annat ha följande kvaliteter: | ||
- | - **Tydlighet**. Man bör enkelt se vad som ska göras och hur man ska göra det. | ||
- | - **Tillgänglighet**. Även synskadade bör kunna läsa dina frågor. Välj ett lättläst typsnitt och tänk på kontrasten mellan bakgrunden och texten. | ||
- | - **Responsivitet**. Det blir allt vanligare att surfa med mobilen. Kontrollera så att sidan också ser bra ut med en mycket smal skärm. | ||
- | - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad), | ||
- | - Använd gärna ett bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande: | ||
- | - [[https:// | ||
- | - [[https:// | ||
- | - [[https:// | ||
- | - Testa din frågesport via mobilen och kontrollera så att allt fungerar och ser ut som det ska | ||
- | - Glöm inte bort att validera din kod | ||
- | - Lämna in din färdiga frågesport på vklass | ||
- | |||