Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision Both sides next revision
mattias_02 [2019-10-31 10:45]
Mattias Hamberg [Instruktioner] 		mattias_02 [2019-10-31 10:52]
Mattias Hamberg [Instruktioner]
Line 6: Line 6:
   * Lär dig skapa formulär: [[https://www.w3schools.com/html/html_forms.asp/]]   * Lär dig skapa formulär: [[https://www.w3schools.com/html/html_forms.asp/]]
 ==== Instruktioner ==== ==== 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 Programmeringskursen.
 +
   - Läs på om internets historia på [[https://www.internetmuseum.se/|]] eller den gemensamma presentationen   - Läs på om internets historia på [[https://www.internetmuseum.se/|]] eller den gemensamma presentationen
   - Utifrån informationen ska du skapa en frågesport med minst 15 centrala fakta.   - 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://www.w3schools.com/html/html_forms.asp/]].   - 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://www.w3schools.com/html/html_forms.asp/]].
   - Minst två frågor ska ha en tillhörande bild.   - Minst två frågor ska ha en tillhörande bild.
-  - Formge din frågesport med hjälp av CSS. En god formgivning ska bland annat ha följande kvaliteter:+  - 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.     - **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 håll dig till det och tänk på kontrasten mellan bakgrunden och texten.+    - **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.     - **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), effektiv (kort), och ha logiskt namngivna element, id:n och klasser. 
   - Använd gärna ett bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:   - Använd gärna ett bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:
     - [[https://www.cssscript.com/material-design-checkbox-radio-button-icheck/|]]     - [[https://www.cssscript.com/material-design-checkbox-radio-button-icheck/|]]
     - [[https://www.cssscript.com/beautiful-checkbox-and-radio-button-replacement-with-pure-css-magic-check/|]]     - [[https://www.cssscript.com/beautiful-checkbox-and-radio-button-replacement-with-pure-css-magic-check/|]]
     - [[https://vitalcss.com/]]     - [[https://vitalcss.com/]]
 +  - 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   - Lämna in din färdiga frågesport på vklass