Webbdesign

Webbdesignprototyp – gränssnitsdesign

Kort beskrivning och syfte.

Syfte:

Att tillämpa och fördjupa kunskaper inom webbdesign.

I denna uppgift ska du skapa en webbplats för ett musikband med en avgränsad målgrupp.

Genom uppgiften ska du få:

 

•                     en djupare kunskap i informationsarkitektur och webbdesign,

•                     en djupare kunskap i HTML/XHTML, CSS och JavaScript,

•                     erfarenhet i att skapa en större webbplats.

Vad täcker uppgiften:

• Innehållsstruktur -HTML
• Utseende - CSS
• Beteende - JavaScript,
• Multimedia för webben – Ljud och film
• Publicering- Överförings protokoll (FTP)

Uppgiftsbeskrivning

Innehållet på webbplatsen måste vara tillräckligt omfattande 8-10 webbsidor, för att du ska kunna skapa en relevant struktur. Det ska finnas konkret innehåll på samtliga sidor på webbplatsen. Alla länkar måste också gå till en existerande sida.

Webbplatsen ska vara baserad på den teknik som vi tagit upp i kursen: HTML, CSS och JavaScript.

Uppgiften är individuell, men du får gärna samarbeta med dina kurskamrater i vissa mindre delar av arbetet.

Uppdraget

Du har jobbat en hel med HTML, CSS och JavaScript och se dem i aktion, men de teoretiska exemplen har varit i ofta isolerad, var för sig. Nu är det dags att sätta dem alla tillsammans i en verklighetstrogen situation. I denna uppgift kommer du att bygga en webbplats från grunden, komplett med HTML, CSS, JavaScript och Multimedia.
 

Du är en lycklig webbdesigner. Du har blivit valt att utforma en webbplats för vad som är mycket möjligt det coolaste bandet på planeten: Flying planes! Okej, så det finns ingen sådan band. Men spela tillsammans med mig här. Vid tillämpning av detta kursmoment, låtsas inte bara att bandet finns, men att du faktiskt har blivit ombedd att designa bandets hemsida.

   

Webbplatsen, liksom bandet, måste se cool. Om du kan lägga till några fiffiga interaktiva funktioner, så kommer att gå bra. Emellertid behöver webbplatsen också vara tillgängliga och sökmotor -vänlig och användarvänlig.

Syftet med webbplatsen är att ge information om bandet. Oavsett vilket designskonstruktions beslut du tar, så måste detta vara det högsta prioritet.

  

Låt oss se hur du arbetar med webbplatsen.

 

Råmaterial

Kunden har gett dig byggstenarna för webbplatsen: inledande text om bandet, en lista över turnédatum och några bilder. Detta kommer inte att vara en stor webbplats. Det är i grunden en webbplatsbroschyr, som gör det ännu viktigare att det ger den rätta känslan.

 

Webbplatsens struktur

Baserat på råmaterialen som klienten har lämnat dig kan du skapa en ganska enkelt webbplats. Strukturen är inte så komplicerad. Du kan lagra alla sidor i en mapp.

  

Som en förberedelse för att bygga webbplatsen, skapa du en mapp som heter bilder för att hålla bildfilerna du kommer att använda samlat på en plats.

   

Skapa en annan mapp som heter stilar för att hålla dina CSS samlat. Skapa också en mapp som heter skript för att hålla din JavaScriptfiler samlat på samma ställe.

  

Gör likadant med dina multimedia filer.

 

Din katalogstruktur ser nu ut så här:

•        / bilder

•        / stilar

•        / skript

•        /multimedia

 

Du behöver skapa en sida att tillhandahålla all bakgrundsinformation om bandet. Du kan sätta foton tillsammans i ett bildgalleri på en annan sida. De turnédatum kommer också att få en egen sida. Du kommer att behöva skapa en kontakt sida där besökare kan komma i kontakt med bandet. Slutligen, en inledande hemsida kommer att sätta scenen och ge en kort beskrivning av vad som väntar besökaren på webbplatsen. Här är din lista över sidor för att arbeta med:

•        Home - hem

•        About – om oss

•        Photos - fotografier

•        Live dates - uppträdande

•        Contact – kontakt

•        Concert – koncerter

•        Music -musik

•        Forum

•        Timeline

 

 Du får denna lista till följande html-filer:

•        index.html

•        about.html

•        photos.html

•        live.html

•        contact.html

•        concert.html

•        forum.html

•        timeline.html

 

HTML	HTML	HTML	HTML	HTML
Home	About	Photos	Live	Contact m. m

 

Innehållet på varje sida kommer att vara olika, men varje sida kommer att använda samma grundläggande struktur, design och JavaScript. Det är dags att skapa en mall för dessa sidor.

Sidstruktur

Varje sida på webbplatsen kommer att delas i ett antal avsnitt.

•       Sidhuvudet kommer att innehålla varumärket för webbplatsen. Det är där logotypen kommer att gå. Du kommer att använda taggen <header> för sidhuvudet.
•       Navigeringen kommer att ha en lista med länkar till alla sidor. Du kommer att använda taggen <nav> för navigering. <nav>[navigation links]</nav>.
•       Innehållet kommer att innehålla kött och ben på varje sida. Du kommer att använda taggen <article> för innehållet.

Du kan skapa en sidmall som denna på ganska kort tid:

<html lang="en">

<head>

<meta charset="utf-8" />

<title> Flying planes! </title>

</head>

<body>

<header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="photos.html">Photos</a></li>

<li><a href="live.html">Live</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<article>

</article>

</body>

</html>

Spara denna som mall.html.

Nu när du har en struktur på plats, kan du börja sätta innehållet sida efter sida basis.

Men innan du gör det, låt oss ta en titt på den slutliga utformningen om webbplatsen.

Design

Du vet vilka strukturella element måste finnas på varje sida på webbplatsen.

Utrustad med denna kunskap, och de råvaror som tillhandahålls av klienten, kan du få börja arbeta med den visuella designen. Det är dags att dra igång Photoshop Fireworks, GIMP eller någon annan grafisk designsverktyg du vill. Skapa vilket form av design du vill. För att citera den bästa kändis kockar, "Här är en jag gjorde tidigare."

 

Krav för godkänt:

Webbplatsen måste uppfylla följande krav:

•        Anpassad till syfte och målgrupp.

•        Bra organisation och struktur som utgår från vad som tas upp i kursboken.

•        Väl genomtänkt navigationssystem.

•        Tydlig presentation av innehåll genom lämpliga val av media, layout och stil.

•        Krav på koden:

•        Huvudsakligen används (X)HTML för utformning av sidorna och CSS för stil och  
         layout.

•       JavaScript ska användas för att ge sidorna funktionalitet (t.ex. interaktivitet,   
         feedback, kontroll).

 

Krav för Väl godkänt:

Utöver ovanstående krav för godkänt, måste även följande vara uppfyllt för betyget VG.

•     En webbplats som inte bara är statisk, utan har en hel del dynamik och interaktivitet  genom användning av JavaScript.

•     HTML-dokument i extern stilmall.

•    Lägg till möjligheten att kunna ha ett tidsbaserat bildspel.

Krav för Mycket väl godkänt:

Utöver ovanstående krav för Väl godkänt, måste även följande vara uppfyllt för betyget MVG.

•         Väl utformad webbplats i avseende på tillgänglighet, användbarhet och sökmotors
           optimering.

•         Välgjord design, layout och navigation.

•         Ett gästboksformulär.

•         Webbplatsen ska vara konsistens och funktioner som liknar varandra ska fungera på
          samma sätt och ge   

           liknande resultat.

•         Ett appletprogram som visar något om bandet (se kap 14.)

•         Knappar och metaforer bör vara tydliga och fungera globalt.

•         Ljud och film.