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
mattias_02 [2019-11-05 13:33]
Mattias Hamberg [Instruktioner]
mattias_02 [2019-11-18 13:21] (current)
Mattias Hamberg [Instruktioner]
Line 11: Line 11:
   - 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), range eller checkboxar. Läs mer om HTML5-formulär via följande sida [[https://​www.w3schools.com/​html/​html_forms.asp/​]].
   - Man ska skriva in sitt namn (används till en high-score-lista)   - 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 bild.
   - Minst en fråga ska ha en tillhörande video.   - Minst en fråga ska ha en tillhörande video.
 +  - Det ska finnas en highscore-lista där du listar de som fått flest poäng
   - 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:   - 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 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 på mobiltelefonen.
     - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad),​ effektiv (kort), och ha logiskt namngivna element, id:n och klasser. ​     - **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:+  - Testa din frågesport via mobilen, samt minst två webbläsare och kontrollera så att allt fungerar och ser ut som det ska. 
 +  - Glöm inte bort att validera din kod. Varningar kan vara okej, men direkta fel får inte förekomma. 
 +  - Lämna in din färdiga frågesport på vklass. 
 + 
 +==== Tips och tricks === 
 +  - Detta är ett exempel på hur du kan göra radio-knappar till vanliga knappar: 
 +    - [[https://​jsfiddle.net/​hambern/​196o5fkj/​12/​]] 
 +  - Du får också använda något slags 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 
- 
 ==== Matris ==== ==== Matris ====
  
 ^ Kriterie ^ E ^ C ^ A ^  ^ Kriterie ^ E ^ C ^ A ^ 
 | Responsivitet | | Sidan ser bra ut även vid större och mindre textstorlekar och är tydlig och lättillgänglig | Sidan ser bra ut även i mobilvy och är tydlig och lättillgänglig | | Responsivitet | | Sidan ser bra ut även vid större och mindre textstorlekar och är tydlig och lättillgänglig | Sidan ser bra ut även i mobilvy och är tydlig och lättillgänglig |
-| Validering | | Sidan validerar till övervägande del CSS och HTML korrekt | Sidan validerar CSS och HTML korrekt utan varningar ​|+| Validering | | Sidan validerar till övervägande del CSS och HTML korrekt | Sidan validerar CSS och HTML korrekt utan allvarliga ​|
 | Element och selektorer | Koden använder fungerande element och selektorer | Koden använder lämpliga element och selektorer | Koden använder elementen och selektorerna på ett effektivt sätt | | Element och selektorer | Koden använder fungerande element och selektorer | Koden använder lämpliga element och selektorer | Koden använder elementen och selektorerna på ett effektivt sätt |
 | Formulär | Sidan har ett fungerande formulär | Formuläret använder lämpliga fält-typer | | | Formulär | Sidan har ett fungerande formulär | Formuläret använder lämpliga fält-typer | |