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-10-31 10:52] Mattias Hamberg [Instruktioner] |
mattias_02 [2021-11-19 08:44] Mattias Hamberg [Tips och tricks] |
||
---|---|---|---|
Line 7: | Line 7: | ||
==== 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. | + | 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:// |
- | - Minst två frågor | + | - Man ska skriva in sitt namn (används till en high-score-lista) |
+ | - Minst en fråga | ||
+ | - 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), | ||
- | - Använd gärna | + | - 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:// | ||
+ | - 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:// | ||
- | - Testa din frågesport | + | - Detta är ett exempel på hur du kan visa bara en fråga i taget och sedan, |
- | - Glöm inte bort att validera din kod | + | - [[https:// |
- | - Lämna in din färdiga frågesport på vklass | + | ==== Matris ==== |
+ | |||
+ | ^ Kriterie ^ E ^ C ^ A ^ | ||
+ | | Responsivitet | | Sidan ser bra ut även vid större | ||
+ | | 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 | | ||
+ | | Formulär | Sidan har ett fungerande formulär | Formuläret använder lämpliga fält-typer | | | ||
+ | | Intentering | Koden är indenterad | Koden är väl indenterad och läsvänlig | Koden är korrekt indenterad och lätt att förstå | | ||
+ | | Media | Bild och film visas korrekt och är komprimerade i ett lämpligt format | | Bild och film passar snyggt ihop med övrig design | | ||
+ | | Kursplanen: | ||
+ | | Kursplanen: media | Eleven bearbetar med viss säkerhet enkel text, bild och eventuell annan media så att de anpassas till produkten och vidtar begränsade åtgärder för att åstadkomma snabb överföring av bilder eller andra mediafiler | Eleven bearbetar med viss säkerhet och via flera moment text, bild och eventuell annan media, så att de anpassas till produkten och vidtar åtgärder för att åstadkomma snabb överföring av bilder och andra mediafiler | Eleven bearbetar med säkerhet och via flera moment text, bild och eventuell annan media så att de anpassas till produkten och vidtar omfattande åtgärder samt optimerar bilder eller andra mediafiler för att åstadkomma snabb överföring av dessa och för att reducera antalet överföringar per sida | |