Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
mattias_02 [2019-11-14 12:02] Mattias Hamberg [Instruktioner] |
mattias_02 [2021-11-19 13:45] Mattias Hamberg [Tips och tricks] |
||
---|---|---|---|
Line 9: | Line 9: | ||
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. | 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:// | + | - Läs på om internets historia på [[https:// |
- 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:// | + | - 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:// |
- 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 "tack för att du genomförde min frågesport" | ||
+ | - 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), | - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad), | ||
- | - Testa din frågesport via mobilen och kontrollera så att allt fungerar och ser ut som det ska | + | - Testa din frågesport via mobilen, samt minst två webbläsare |
- | - Glöm inte bort att validera din kod | + | - 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 | + | - Lämna in din färdiga frågesport på vklass. |
==== Tips och tricks === | ==== Tips och tricks === | ||
- Detta är ett exempel på hur du kan göra radio-knappar till vanliga knappar: | - Detta är ett exempel på hur du kan göra radio-knappar till vanliga knappar: | ||
- | - [[https:// | + | - [[https:// |
- Du får också använda något slags bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande: | - Du får också använda något slags bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande: | ||
- [[https:// | - [[https:// | ||
- [[https:// | - [[https:// | ||
- [[https:// | - [[https:// | ||
+ | - Detta är ett exempel på hur du kan visa bara en fråga i taget och sedan, via en knapp, kan visa nästa fråga: | ||
+ | - [[https:// | ||
==== 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 | | |