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-11-28 13:28]
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 Programmering 1 där de olika kurserna kommer att titta på olika aspekter av din kod. 
-  - 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:+  - 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), 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) 
 +  - Minst en fråga ska ha en tillhörande bild. 
 +  - Minst en fråga ska ha en tillhörande video. 
 +  - Det ska finnas en "tack för att du genomförde min frågesport"-sida där du visar resultatet 
 +  - 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 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 på mobiltelefonen. 
-  - Använd gärna ett bibliotek för att göra knapparna elegantare. Kolla t.ex. på följande:+    - **Kodkvalitet**. Tänk på att koden ska vara lättläst (indenterad), effektiv (kort), och ha logiskt namngivna element, id:n och klasser.  
 +  - 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/]]
-  - Lämna in din färdiga frågesport på vklass+==== 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 |