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:45] Mattias Hamberg [Instruktioner] |
mattias_02 [2021-11-19 13:44] Mattias Hamberg [Tips och tricks] |
||
---|---|---|---|
Line 6: | Line 6: | ||
* Lär dig skapa formulär: [[https:// | * Lär dig skapa formulär: [[https:// | ||
==== 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 Programmering 1 där de olika kurserna kommer att titta på olika aspekter av din kod. | ||
+ | |||
+ | | ||
- 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) |
- | - Formge din frågesport med hjälp av CSS. En god formgivning ska bland annat ha följande kvaliteter: | + | - 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: | ||
- **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 | + | - **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. |
- | - Använd gärna | + | - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad), |
+ | - 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:// | ||
- | - Lämna in din färdiga frågesport | + | - Detta är ett exempel |
+ | - [[https:// | ||
+ | ==== Matris ==== | ||
+ | |||
+ | ^ 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 | | ||
+ | | 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: kod | I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och omfattar någon av de grundläggande teknikerna för märkspråk och stilmallar | I arbetet utvecklar eleven kod som med tillfredsställande resultat följer standarder och som omfattar några av de grundläggande teknikerna för märkspråk och stilmallar | I arbetet utvecklar eleven kod som med gott resultat följer standarder och som omfattar flera av de grundläggande teknikerna för märkspråk och stilmallar | | ||
+ | | 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 | |