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 		Previous revision
Next revision Both sides next revision
mattias_02 [2019-10-31 10:42]
Mattias Hamberg [Instruktioner] 		mattias_02 [2019-10-31 10:52]
Mattias Hamberg [Instruktioner]
Line 1: Line 1:
 ====== Frågesport om webbens historia ====== ====== Frågesport om webbens historia ======
 +
 +==== Länkar ====
  
   * Internetmuseum: [[https://www.internetmuseum.se/|]]   * Internetmuseum: [[https://www.internetmuseum.se/|]]
   * 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/]]
-  * Skapa pseudoelement med Font Awesome [[https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements]] 
- 
 ==== Instruktioner ==== ==== Instruktioner ====
-  - Läs på om internets historia på [[https://www.internetmuseum.se/|]] eller via den gemensamma presentationen + 
-  - Utifrån informationen ska du skapa en frågesport med minst 20 centrala fakta.+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 
 +  - 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/]].
-  - Formge din frågesport med hjälp av CSS. En god formgivning ska bland annat ha följande kvaliteter:+  - Minst två frågor ska ha en tillhörande bild. 
 +  - 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