0350 slutuppgift
I korthet går uppgiften ut på att du ska göra en webbplats till en kund. Om inget annat sägs spelar läraren kundens roll. Därtill ska du göra en planerings och redovisningssida. För att få E ställs vissa grundkrav. För högre betyg ställs ytterligare. Mer om det senare.
Webbplatsen kan vara för en idrottsförening, för en e-butik, marknadsföring av dina kompetenser, o.s.v. Diskutera din idé med läraren.
Arbetsgång
1. Bestäm mål
Bestäm mål för hemsidan. Vem är den till för? Vad ska besökarna använda sida till? Hur ska de använda sidan? Diskutera med kunden.
2. Gör skisser
Gör skisser av webbplatsens olika sidor, med hjälp av papper och penna. Visa för kunden. När kunden är nöjd är det dags för nästa steg.
3. Gör wireframe
Gör en wireframe för varje sida på webbplatsen. Wireframen är digital. Måttsätt sidornas olika delar. Visa för kunden.
Dokumentera annat som kan vara av intresse.
För C eller mer även
- tydliga mål
- mått
- typsnitt
- färg
- länkträd
- Berätta om de åtgärder som ska vidtas för att tester ska klaras. T.ex. läsbarhet.
4. Gör planerings- och redovisningssida
Ovanstående redovisas på en egen webbplats. Den har en meny som visas på samtliga sidor. På menyn finns:
Länk till hemsidan.
Mål
Skiss
Wireframe
Redovisning
Ladda upp på webbhotellet. Dela länken med din lärare.
Koden ska validera HTML5 och CSS3.
För C eller mer även
Längst ner på sidan finns länkar för validering. Klick på länkarna ger svar på om sidan validerar.
HTML5 ...
CSS3 ...
i18n ...
Länkar ...
Källkod ...
Följande uppgift löser de fyra första punkterna.
5. Gör hemsidan
Stäm av med kunden under arbetets gång.
Detaljerade instruktioner kommer längre ner.
6. Redovisning
Resultatet ska analyseras och redovisas på planerings och redovinsningssidan. Detaljerade instruktioner finns på denna länk.
Hemsida - för E
Vi tänker oss att det är en webbplats för en idrottsförening. Motsvarande innhåll kan fås på ett annat tema.
Webbplatsen har en meny som är gemensam för alla sidor. Från menyn kan man komma till alla sidor. Mer om de olika sidorna följer.
Koden ska validera enligt HTML5 och CSS. ...
Startsida
Text och bild.
Text om klubben och dess verksamhet visas. En eller flera trevliga bilder som kan representera klubbens verksamhet syns.
Sida med nyheter
På sidan visas ett nyhetsflöde. Varje nyhet har rubrik, text, författare och publiceringsdatum.
Resultat
Tabell
Serietabell visas.
Använder:
<
table>,
Inloggning
Formulär för inloggnig.
Gör ett formulär för inloggning. Ni behöver inte ta hand om det som skickas då formuläret postas.
Chat
Formulär med textinmatning.
Tanken är att inloggade medlemmar kan chatta. Gör den grafiska layouten. Använd formulär-element för inmatning. Ge exempel på hur chatten kan se ut.
Använder:
<
form> attribut: action, method
Ytterligare krav
Kommentarer finns i HTML- och CSS-kod.
CSS-koden har konsekvent indrag.
Hemsida - för C
Förutom kraven för E gäller följande.
Tabell
Använder:
,
Validering
Länkar till validering längst ner på sidorna. Sidorna ska validera.
HTML5 ...
CSS3 ...
i18n ...
Länkar ...
Följande uppgift löser de fyra första punkterna.
God semantik för HTML-koden. Använder:
<
nav>,
<
article>,
<
header>,
<
footer>
Länk till källkod
Gör länkad uppgift för att kunna visa källkod via en länk på sidan.
Webbhotell.
Webbplatsen ligger på ett webbhotell. Dela länken med din lärare.
Typsnitt
Använder @font-face
inställningar
Den som är inloggad kan göra inställningar i ett formulär.
Förnamn
Efternamn
e-post
telefonnummer
född dag
Formulär
Använder:
<
fieldset> med
<
legend>,
type= number, search, color, range (bäst stöd i Opera) eller fyra valfria hidden, tel, sms, url, file, email, date, datetime, datetime-local, time, week, month, image"
Sida med filmer
Sida med filmklipp för inloggade medlemmar.
sida med bilder
Javascript i till exempel bildspel.
Laget
Vertikal meny med spelarnas namn. En sida för varje spelare med bild på spelaren samt information om spelaren.
Sida där du visar vad du kan göra med CSS
Transformationer och transitioner eller gradienter.
Mer:
Hemsida - krav för A
Text i två eller tre spalter.
Using CSS multi-column layouts, MDN
Tabell
Använder:
Varannan rad har t.ex. annan färg.
formulär
Använder:
attributen: min, max, step
Mobilsida
Gör en version av webbplatsen som är anpassad för mobila enheter. Använd media-queries.
Validering
Semantik
Korrekt semantik. Använder semantiska HTML-element då det finns och på avsett vis. Använder t.ex.
<
article> och
<
section>
på avsett vis.
Wave
Wave hos WebAIM. Sidan som ska valideras måste ligga på webbhotellet.
Konstrasttest
Color Contrast Checker, WebAIM
WebAIM
Screen readers
Testa en screen reader på din hemsida. Använd till exempel NVDA eller JAWS. Mer om dem nedan. Hur låter din sida. Är den tillgänglig? Kan du göra din sida mer tillgänglig? Gör det.
Screen Reader User Survey #6 Results, WebAIM
Using NVDA to Evaluate Web Accessibility, WebAIM
Using JAWS to Evaluate Web Accessibility, WebAIM
Bildoptimering
PngCrush
PngCrush kan användas för att minska png-filer. Gör det med dina bilder. Redovisa resultaten (komprimeringsgraden).
CSS-sprit
Test hur man kan göra. Använd på din sida.
Extrapoäng
php, MySQL