Prototyper används för att

Skapa en prototyp

Prototyper används för att Demonstrera ett koncept i ett tidigt stadium Testa detaljer i ett senare stadium Som en specifikation för den färdiga produkten Lo-fi Prototyp: pappers prototyp Hi-fi Prototyp: ser ut och känns som den slutliga produkten

Low fidelity prototyper (low-fi) [3] - wireframes och papers prototype. [2] Låg kostnad Lo-fi Prototyper Flera utföranden kan enkelt presenteras och utvärderas Det kan vara lättare för användaren att ge återkoppling eller kritik när det inte ser så färdigt ut Paper prototyping the fast and easy way of designing and refine user interfaces, Carolyn Snyder [1] Papper och penna Balsamique : http://balsamiq.com/ Skapa konto. Använd webbade varianten eller ladda hem en trail-version. [1] C. Snyder, Paper Prototyping: The fast and easy way to design and refine user interface, San Francisco: Morgan Kaufmann Publishers, 2003. [2] J. Lazar, J. H. Feng och H. Hochheiser, Research methods in human-computer interaction, West Sussex: John Wiley & Sons Ltd, 2010. [3] J. Dumas och J. Fox, Usability testing. Current practice and future directions., i The Human Computer Interactoion Handbook, New York, Lawrence Erlbaum Associates, 2007, pp. 1129-1149.

Lo-fi med papper och penna

Lo-fi med Balsamique

Flödesschema http://www.spiderwebsitedesign.com/services/websiteplan.htm 2014-11-18

Från http://ryanquick.wordpress.com/2008/12/03/flow-diagram-for-website-navigation-links/ 2014-11-18

Olika typer av prototyper inom Full: full funktionalitet hi-fi och lo-fi Horisontell: går över hela systemet men har bara topp nivå funktioner Vertikal: har alla funktioner uppifrån och ner, men bara på några få ställen (Vanligt med en kombination av Horisontell och Vertikal.) 20steps to wireframing: http://blog.teamtreehouse.com/20-steps-to-betterwireframing

index.html kurser.html larare.html utrustning.html

Responsive design http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation

Samlade länkar om Lo-fi [1] C. Snyder, Paper Prototyping: The fast and easy way to design and refine user interface, San Francisco: Morgan Kaufmann Publishers, 2003. [2] J. Lazar, J. H. Feng och H. Hochheiser, Research methods in human-computer interaction, West Sussex: John Wiley & Sons Ltd, 2010. [3] J. Dumas och J. Fox, Usability testing. Current practice and future directions., i The Human Computer Interactoion Handbook, New York, Lawrence Erlbaum Associates, 2007, pp. 1129-1149. http://balsamiq.com/ http://blog.teamtreehouse.com/20-steps-to-better-wireframing

html och css

Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod

Webbläsare Chrome Firefox Internet Explorer Safari Opera

Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) http://www.cssdesk.com/ (webbat-verktyg)

HTML Hyper Text Markup Language Taggbaserat språk: <html>, <h1>, <p>, Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C www.w3.org ; www.w3c.se Firefox, Crome följer W3C-standarden http://www.w3schools.com/html/html5_browsers.asp http://www.w3schools.com/default.asp

En avskalad sida <html> <head> <title>medieproducent utbildningen</title> </head> <body> <h1>medieproducent</h1>  <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href= http://www.umu.se"> Umeå universitet</a> > </body> </html>

Doctype HTML 4.01 => XHTML 1.0 => HTML 5 Lägg in följande för HTML5: <!DOCTYPE html> lang= en <meta charset= utf-8 > Andra språk-koder: lang= sv http://www.w3schools.com/tags/ref_language_codes.asp

<!DOCTYPE html > <html lang= sv > <head> En avskalad sida <title>medieproducent utbildningen</title> <meta charset= utf-8 > </head> <body> <h1>medieproducent</h1>  <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href="http://www.umu.se"> Umeå universitet</a> > </body> </html>

HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> <br /> Osynliga kommentarer :

Rekommendationer för att skriva HTML Endast gemener (små bokstäver) Alltid sluttaggar om man vill kunna XML-kompatibelt <p> text text </p> <br /> Citationstecken runt attributvärden <html lang= sv >

En länk kan länka till: Länkar o Ett annat dokument o (Ett ankare i samma dokument) o (Ett ankare i ett annat dokument) Se till att ha ordning på html-sidorna och bilderna <a href="http://www.umu.se">umeå universitet</a> URL= Uniform Resource Locator <a href= mailto: karin.fahlquist@umu.se > En maillänk till Karin </a>

Absoluta & relativa länkar http://www.umu.se/medieproducent medieproducent Länk från sid index till sida2: sidor/sida2.html http://www.umu.se/medieproducent/sidor/sida2.html bilder sidor index.html bild1.jpg bild2.jpg bild3.jpg Länk från sida1 till - sida 2: sida2.html - bild 1:../bilder/bild1.jpg sida1.html sida2.html sida3.html

Bilder JPEG/JPG, GIF, PNG Bildstorlek, filstorlek Länka till bilder Bakgrundsbilder

Infoga en bild i body: <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/>

Listor Oordnande listor Ordnade listor Definitionslistor Oordnade listor - används ofta i menyer

Oordnande listor <ul type="circle"> <li>kurser</li> <li>lärare</li> <li>utrustning</li>+ </ul> ( html-kod ) ( webläsaren )

Ordnande listor <ol type="1"> <li>kurser</li> <li>lärare</li> <li>utrustning</li> </ol> ( html-kod ) ( webläsaren )

Definitionslistor <dl> <dt>måndag</dt> <dd>läsa bok</dd> <dd>göra arbetsuppgift</dd> <dt>tisdag</dt> <dd>skriva rapport</dd> <dd>skicka in rapporten</dd> </dl> ( html-kod ) ( webläsaren )

Tabeller <table border="1" > <tr> <th>antal</th> <th>utrustning</th> </tr> <tr> <td>3</td> <td>digitalkameror</td> </tr> <tr> <td>7</td> <td>videokameror</td> </tr> <tr> <td>4</td> <td>ljudutrustning</td> </tr> </table> tr = tabell rad th = tabellrubrik td = tabellcell

Tabeller <table border="1" > <tr> <th colspan="2">utrustning</th> </tr> <tr> <td>3</td> <td>digitalkameror</td> </tr> <tr> <td>7</td> <td>videokameror</td> </tr> <tr> <td>4</td> <td>ljudutrustning</td> </tr> </table> th colspan = rubrikspänner över kolumner td colspan = cellen spänner över kolumner td rowspan = cell över rader

Utseende & Sidlayout Skilj på innehåll och utseende på en websida Innehållet på en websida: i HTML-dokumentet Websidans utseende och form: i stilmallar, så kallade CSS-dokument

Stilmallar - CSS Presenterar form (utseende) Textformatering Sidformatering/Positionering Globala stilmallar/extern stilmall (Inbäddade stilmallar & Inline stilmallar) Bli inspirerad: http://www.csszengarden.com/ http://www.w3schools.com/css/default.asp

webbläseren (default-stilmall) Hur websidans utseende bestäms Extern stilmall Inbäddad stilmall Inline stilmall HTML attribute

Fonter & fontval Fonters storlekar i pixlar: px, em, % Rubriker : går att använda med & utan seriffer Georgia Verdana Brödtext : använda utan seriffer: Verdana Arial Web säkra fonter: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Färger & färgval RGB färger på webben (färgblandning av Röd, Grön, Gul) Ange färger i stilmallar: Hexadecimal form (00 00 00 till FF FF FF) 00 00 00 = svart FF FF FF = vitt 22 FF 55 kan skrivas som 2F5 I stilmallen skrivs färgen med # framför det hexadecimala talet: #2F5 Eller med färgnamn: black white Undvik komplementfärger (pga färgblindhet ): röd-grön & gul-blå Färgvärden: http://www.w3schools.com/cssref/css_colors.asp

Stilmall

Stilmall h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; } p{ color:#666; font-family:verdana, Geneva, sans-serif; font-size:13px; } a{ color:#06f; font-family:tahoma, Geneva, sans-serif; } http://www.w3schools.com/css/css_link.asp

Stilmallen måste kopplas till html sidan. Inbäddad stilmall skriv stilmallen direkt i html sidan. Global stilmall stilmallen är ett eget dokument (.css) som kopplas ihop med html sidan (.html)

Inbäddad stilmall Skrivs i html sidans head och gäller bara för den sidan: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <style> h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; } </style> </head> <body>...

Global stilmall Kopplingen mellan html sidan och global stilmall görs med en länk i html sidans head: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <link rel="stylesheet" href="stilmall.css type="text/css > </head> <body> <h1>medieproducent</h1> <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/> <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href="http://www.umu.se">umeå universitet</a> </body> </html>

En global stilmall kan användas av flera html sidor sida1.html stilmall.css sida2.html sida3.html

Stilmall för skärm & utskrift I stilmallen definierar man vilket media man vill åt med @media: @media screen { p { font-family: verdana,sans-serif; font-size: 14px; color: gray; } } @media print { p { font-family: garamond, times new roman, serif; font-size: 12px; color: black; } }

Stilmall för skärm & utskrift I stilmall för skärm I stilmall för utskrift typsnitt San-seriff (ex, Verdana) Seriff (ex. Times) typsnittsstorlek Pixlar, px Punkter, pt, ex.vis 10pt bilder Ta bort bakgrundsbild länkar Ta bort meny Ta bort display: none;

Klasser i stilmallar Använda stilmall för att förändra delar om utseendet av en text. I stilmall:.centrerad{ text-align:center; } I html sida: <h1 class="centrerad"> Medieproducent</h1> I detta fall gäller bara för just denna h1, inte för alla h1 på sidan. Denna klass kan användas på fler ställen för att centrera andra texter.

id i stilmallar I stilmall: #centrerad{ text-align:center; } I html sida: <h1 id="centrerad"> Medieproducent</h1> I detta fall gäller bara för just denna h1, och kan INTE användas någon annan stans på sidan..

Använda <span> i html Använda stilmall för att förändra delar om utseendet. Ändra bara ex.vis några ord i en text. I stilmall:.red{ color:#900; font-weight:bold; } I html sida: <p>under <span class="red">två år</span> läser du kurser med en produktionsteknisk inriktning.</p>

Global stilmall för sidformatering & positionering

Samma upplägg för alla sidor på hemsidan.

Samma upplägg för alla sidor på hemsidan. container header nav article Blocken: container header nav article footer footer Dessa delar/block ska nu in i html sidorna. I stilmallen ska vi beskrivas hur dessa delar ska placeras på webbsida och hur de ska se ut.

Skapa sidans block med <div> & id I body delen i html skapar vi nu dessa block m.h.a. <div> & id samt html5 s block taggar id gör att det blir ett unikt namn som bara kan användas en gång på ett ställe. container header menu article footer <div id= container > </div> <header> </header> <nav> </nav> <article> </article> <footer> </footer>

<body> <h1>medieproducent</h1> <p>meny</p> <ul> <li>kurser</li> <li>lärare</li> <li>utrustning</li> </ul> <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/> <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href="http://www.umu.se">umeå universitet</a> </body>

<body> <div id="container"> <header> <h1>medieproducent</h1> </header> <nav> <p>meny</p> <ul> <li>kurser</li> <li>lärare</li> <li>utrustning</li> </ul> </nav> <article> <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/> <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> </article> <footer> <p>en utbildning i Umeå</p> <a href="http://www.umu.se">umeå universitet</a> </footer> </div> </body>

I stilmallen i html-dokumentet: i stilmallen: container <div id= container > </div> #container{ } header <header> </header> header{ } nav <nav> </nav> nav{ } article <aricle> </aricle> aricle{ } footer <footer> </footer> footer{ }

I stilmallen: #container{ } header{ } nav{ } article{ } footer{ } ex. i stilmallen: header{ background-color:#6c3; }

Box modellen Detta gäller alla html-element: <h1> <a> <p> <img> <div> osv. Box modellens olika delar definieras och beskrivs i stilmallen. http://www.w3schools.com/css/css_boxmodel.asp

Box modellen height width width:250px; padding:10px; border:5px solid gray; margin:10px; Bredden blir: width+(padding*2)+(border*2)+(margin*2) = 250+(10*2)+(5*2)+(10*2) = 250+20+10+20 = 300px

Ingen definierad padding padding:10px;

#container{ background-color:#666; padding:10px; } Så här ser det ut i stilmallen (obs! hela stilmallen syns inte här). header{ } nav{ } background-color:#6c3; padding:10px; background-color:#c03; padding:10px; article{ background-color:#09f; padding:10px; } footer{ } background-color:#fc3; padding:10px;

Placera ut blocken enligt vår skiss: Följande vill vi göra och ska tänka på för våra block: container bestämma bredd i px och centrera i webbläsaren header placeras högst upp & ta hela bredden container header nav article nav bredd och längst till vänster article till höger om menyn får ta det utrymme som är kvar på bredden footer footer längst ner & ta hela bredden

Positionering static defaultläget, ordningen som det är i html-dokumentet. relativ relativt var den skulle ha varit om den följd html flödet absolute relativt dokumentet fixed relativt webbläsaren, dvs kommer inte flytta på sig om sidan scrollas. Z-index - lägga saker på och under (tänk lager) Testa på: http://www.w3schools.com/css/css_positioning.asp

float Block element i html kan man få att flyta till höger eller vänster om andra blockelement. Viktigt att ha bredd på elementen för att de ska flyta bra. Ex på blockelement: <div>,<p>,<img>,<header>,<footer>,<nav> osv float:left flyter vänster (om det finns plats) float:rigth flyter höger (om det finns plats) clear:both bryter flytandet http://www.w3schools.com/css/css_float.asp

I stilmallen: container bestämma bredd i px #container{width:1000px; margin-left:auto; margin rigth:auto;} header placeras högst upp & ta hela bredden nav längst till vänster och bredd article till höger om menyn får ta det utrymme som är kvar på bredden footer längst ner & ta hela bredden nav{float:left; width:200px;} article{float:left; width:600px;} footer{clear:both;}

lägga till mer text; nya divar: textblock & foto1; i html-dokumentet: i stilmallen: textblock <div id= textblock > </div> #textblock{ } foto1 <div id= foto1 > </div> #foto1{ } container header nav article textblock foto1 footer

I html-dok: <div id="textblock"> <p>vill du... </p> </div> <img id="foto1" src="bilder/medieproduce ntbild.jpg" alt="två medieproducenter" width="500" height="350"/> </div> I stilmallen: #textblock{ width:230px; float:left; } #foto1{ margin-left:10px; margin-top:11px; float:left; }

I html-dok: <header> <h1 class="center"> Medieproducent</h1> <img id="logga" src="bilder/umu_logo.gif" width="67" height="67" alt="umu logga"> </header> I stilmallen: header { position:relative; padding:10px; border:1px solid; /*för att synliggöra taggarnas block*/ #logga{ position:absolute; right:10px; bottom:10px }

Filnamn Hemsidans första html-sida: index.html eller default.html http://www.umu.se/index.html det räcker att skriva http://www.umu.se/ Stilmallar: stilmall.css Filer på Linux-server: o o o Inga å, ä, ö i filnamn Bara små bokstäver i filnamn Inga mellanrum i filnamn

FileZilla FTP klient Används för att ladda upp webplatsen på server. Ip-adress:130.239.115.172 Användare och Lösenord får var och en. https://filezilla-project.org

Er arbetsgång av hemsida: Fixa webserver (vi erbjuder en server som ni sedan ska använda till Word Press) Skissa upp sidan på papper Välj färgkombination: https://kuler.adobe.com/explore/newest/ Fundera ut text för sidorna Hitta bilder och fixa till storlek Skapa html och stilmallar (denna del kommer ta mest tid) Lägg upp sidorna på en webserver