Design och konstruktion av grafiska gränssnitt
|
|
- Jonas Ström
- för 6 år sedan
- Visningar:
Transkript
1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1
2 Idag Menyer och verktygsfält Organizing the page Kod bakom lab 1? Observera Text om menyer kommer att dyka upp på hemsidan Dröj inte med lab 2 Kräver sannolikt mer tid än den som finns i schemat Projektstart måndag 7/2 Väldigt viktigt att alla kommer då Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop 2
3 MENYER OCH TOOLBARS Menyer & Toolbars Två vanliga sätt att utföra handlingar Kompletterar varandra Menyer äldre än GUI Toolbars slog igenom typ 1989 I princip 2 handlingar Något sker direkt En dialogruta visas 3
4 Menyer Fungerar som en karta över alla funktioner i programmet Man kan vandra runt och få en uppfattning om vad som finns Bör inte ha mer än 1 nivå Behövs mer kan man visa en dialog Beståndsdelar Namn Tillräckligt långa Kortkommando Ctrl-C Se till att de som förväntas finns Mnemonic Komplett Ikon Koppla samman knapp o meny Disable Standardmenyer De vanligaste menyerna ungefär samma på vanliga plattformar Kolla specifika guidelines om man designar för viss plattform File/Arkiv Öppna stänga etc Överväg Document, Song istället för File Edit/Redigera Cut, Copy, Paste etc. Ibland behövs en Format-meny också Window/Fönster Arrangera om fönster (krävs fler än ett för att bli intressant) Help/Hjälp Om programnamn Olika hjälpalternativ Cooper förespråkar ett alternativ Shortcuts/Genvägar 4
5 Andra vanliga menyer View/Visa ( Mac: Innehåll ) Hur man betraktar innehåll/data kontroll av toolbars etc, dvs vilka delar som syns Insert/Infoga Infoga nya saker i ett dokument, tabeller, bilder, ljud, Format/Format Formattering, typ font, stil, storlek, justering Tools/Verktyg Större kraftfulla funktioner, t ex Stavning, synonymer, brevguiden Hard-hat items Funktioner som bara är för power-users Använd de konventioner som finns i guidelines för enskilda items Exempel 5
6 Toolbars Antagande alla vet vad det är + pratat om det förut Använder butcons kombination av icon och button Ger erfarna användare snabb åtkomst till vanliga funktioner Meny karta över alla funktioner Skilj logiska grupper med en separator Ha alltid tooltip Disabla när de inte gäller Kan innehålla menyer mm också NetBeans Meny + verktygsfält görs enkelt med GUI-editor och actions 6
7 Layout of page elements ORGANIZING THE PAGE Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Lista objekt, handlingar, verktyg, kategorier Tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation Navigationsmönster clear entry points, global navigation Summan av detta saker att utgå från i en top-down process Härnäst Organizing the page 7
8 Visuell Hierarki Det viktigaste ska vara mest markant Det minst viktiga minst markant Layouten ska spegla informationens innehåll Du är bjuden till Kalles stora födelsedagskalas Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses Förbättra med lite tomrum Du är bjuden till Visuell Hierarki Kalles stora födelsedagskalas Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses 8
9 Visuell Hierarki Du är bjuden till Kalles stora födelsedagskalas Kom klädd som du tycker passar bäst för tillfället. Barn är välkomna. Middag serveras, om du vill ta med mat ring Beata på När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Beata senast 1 februari. Vi ses Några faktorer Övre vänstra hörnet Tomrum Kontrasterande fonter Kontrasterande förgrund/bakgrundsfärg Positionering Justering/alignment Indentering Det som är indenterat alltid mindre viktigt Grupperingar med linjer boxar, staplar etc 9
10 Visual Flow Ta hänsyn till hur man tenderar att ta in en sida Uppifrån o ner & vänster till höger T ex inte viktiga saker längst ner Jmfr Chalmers hemsida Focal points ställen öga dras till Ha inte många Starkare till svagare Grouping and Alignment Gestalt-psykologi Det finns vissa funktioner inbyggda i hur vi ser saker Tänker man på dessa så får man bättre GUI:n Hjärnan skapar större delar av mindre Boxar kan hjälpa men bara om layouten är logisk ändå 10
11 Proximity Saker som är nära varandra uppfattas som att de hör ihop Similarity Saker som har samma form, färg, storlek eller orientering, uppfattas som att de hör ihop 11
12 Continuity Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Closure Vi grupperar saker i enkla slutna former som rektanglar även om de inte finns explicit representerade. Grupper uppfattas som slutna enheter. 12
13 Alla på en gång Sidospår Dagens designproblem Navigeringsexempel i NetBeans Global Sequence Map Color Coded 13
14 Några mönster Allmänt Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade (32) visual framework 14
15 (32) visual framework Vad Designa varje sida med samma grundläggande layout, färg, stil. När Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför Konsistent design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Bidrar till branding också. Hur Skapa en genomgående look-and-feel för alla sidor i applikationen Färger, fonter, stil på text Navigation Layout-grid Exempel 15
16 forts (33) center stage 16
17 (33) center stage Vad Placera den viktigaste delen i den största delen av fönstret. Placera sekundära verktyg och innehåll runt om i mindre paneler. När Det finns en huvuduppgift som användaren jobbar med, redigera dokument, utföra en uppgift etc. Kan användas i de flesta program och webbsidor. Varför Led direkt användaren till den viktigaste delen av sidan. Sedan är det enklare att ta in vad som finns runtomkring. Hur Center stage-delen bör vara åtminstone dubbelt så bred och hög som något annat. Huvuddelen måste inte vara i mitten, bara den är stor nog Exempel 17
18 forts (34) titled sections 18
19 (34) titled sections Vad Skapa olika grupper av innehåll genom att förse dem med en visuellt tydliga titel och sen placera alla på samma sida När Det finns en massa innehåll på en sida och man vill göra det tydligare att förstå genom att gruppera det. Varför Tydliga sektioner gör innehållet lättare att ta in. Visuellt tydliga titlar gör det också enklare att snabbt se det viktigaste. Hur Se först till att få rätt indelning och ge dem bra namn. Sen väljer man representation boxar, titlar med särskilda färger, stor font, avgränsning med tomrum Exempel 19
20 (35) card stack (35) card stack Vad Placera innehåll på ett antal kort. Placera dem på varandra så bara ett syns. Använd t ex tabbar för att komma åt de olika delarna. När Det finns för mycket material på en sida och det går att göra en uppdelning där det räcker att se en del åt gången. Varför Uppdelningen i olika kort gör att varje enskilt kort kan göras enkelt att hantera. Tabbar är en vanlig konvention för användarna. Hur Dela upp informationen i lämpliga delar. Se till att man inte måste byta fram & tillbaka. Välj lämpliga namn för varje sektion. Välj en presentation t ex tabbar, vänsterkolumn med val 20
21 Exempel forts 21
22 (38) right/left alignment (38) right/left alignment Vad Vid design av en 2-kolumners form eller tabell, högerjustera labels i vänsterkolumnen och vänsterjustera objekten i högerkolumnen När Design av något där man har en kolumn med text-labels till vänster som leder till objekt till höger Varför Detta ger en mycket tydligare gruppering än om vänsterkolumnen vänsterjusteras pga närhet (proximity). Skapar också en tydlig linje i mitten (continuity). Oftast tydligare o snyggare. Hur Placera vänster- & högerkolumn nära varandra. Det funkar vanligen att vänsterkanten blir ojämn, Överväg att låta objekten i högerkolumnen vara lika breda, 22
23 Exempel (43) liquid layout 23
24 (43) liquid layout Vad Anpassa innehållet när sidans storlek ändras så att det tillgängliga utrymmet alltid fylls. När Närhelst man har en sida man kan tänka sig att man vill ändra storlek på, ofta för att kunna se mer information Varför För de flesta program kan man inte förutsäga hur stor yta de kommer att uppta pga olika fönsterstorlekar, andra fönster på skärmen etc. Därför bör programmet anpassa sig elegant. Hur Fundera ut hur fönstret bör anpassas. I center stage är det t ex lämpligt att huvudytan blir större och annat behåller sin storlek. När ytan blir för liten kan man ha scroll-bars. Java har rätt bra stöd. Exempel 24
25 Läs också 36 closable panels 37 movable panels 41 responsive disclosure 42 responsive enabling Vad har vi? Användarstudier Mentala modeller, Personas Platform & Posture sovereign, transient Typiska kategorier intermediate, expert, novice Organisera innehåll Lista objekt, handlingar, verktyg, kategorier Tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, card stack Summan av detta saker att utgå från i en top-down process Mer kommer 25
26 Att göra Titta igenom alla Swing-komponenter Veta vad som finns och vad de gör, Swing-tutorial på nätet Läsa Preface och kapitel 1 i Tidwell Läsa kapitel 2 i Tidwell Kan hoppa över mönster 19 & 20 Läsa Cooper om Personas, Mental Models & Posture Läsa kapitel 3 i Tidwell Kan hoppa över mönster 23, 25 & 30 tills vidare Förstå Actions Läsa Cooper om menyer och verktygsfält Läsa kapitel 4 i Tidwell Kan hoppa över 39, 40 tills vidare Nästa gång: fler designmönster & lite mer Swing Labkod Lab 1 en slags model-view-presenter Vy-klasser innehåller ett absolut minimum av logik och egen kod Skillnad: presenter har referenser till både modell och vy och synkar dessa. MVC presenteras på en massa olika sätt, även detta Klasser i backend Contact Model Presenter De 2 första vet inget om GUI:t och skulle kunna användas i annat sammanhang Diskutera varianter för lab 2 26
27 Presenter package se.chalmers.cse.dat215.lab1; import javax.swing.jlist; import javax.swing.jtextfield; public class Presenter { private static Presenter instance = null; protected Presenter() { // Exists only to defeat instantiation. model = Model.getInstance(); } public static Presenter getinstance() { } if (instance == null) { instance = new Presenter(); } return instance; forts public void init() { contactslist.setmodel(model.getlistmodel()); contactslist.setselectedindex(0); } public void setcontactslist(jlist l) { contactslist = l; } public void setnametextfield(jtextfield t) { nametextfield = t; } public void setlastnametextfield(jtextfield t) { lastnametextfield = t; } 27
28 forts public void newcontact() { Contact c = model.newcontact(); contactslist.setselectedvalue(c, true); } public void contactslistchanged() { if (contactslist.getselectedindex() = -1) { Contact c = (Contact) contactslist.getselectedvalue(); model.setselectedcontact(c); presentcontact(c); } } private void presentcontact(contact c) { nametextfield.settext(c.getfirstname()); lastnametextfield.settext(c.getlastname()); phonetextfield.settext(c.getphone()); textfield.settext(c.get ()); forts public void textfieldfocusgained(java.awt.event.focusevent evt) { JTextField t = (JTextField) evt.getsource(); t.selectall(); } public void textfieldfocuslost(java.awt.event.focusevent evt) { JTextField t = (JTextField) evt.getsource(); } if (t.equals(nametextfield) t.equals(lastnametextfield)) { nametextfieldfocuslost(evt); } else { contactedited(); } 28
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Sjuk Kortföreläsning Idag Torsdag intro till projekt Kom då! 1 MENYER OCH TOOLBARS
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Menyer och verktygsfält Swing Application Framework & Actions Organizing
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Organisera innehåll forts, Getting round Lite demo Interaktionsdesignspraxis
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Organisera innehåll forts, Getting round Swing Application Framework &
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Lab1 kod Doing things Golden rules Heuristics Intro usability
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Fortsatt om användare Mentala modeller vs implementationsmodeller Personas
Layout och Navigation
Layout och Navigation Layout Layout Det är tre saker som definierar formen på ett GUI Gruppering av element Balans Grid & alignment (dvs hur komponenter är utlagda på ett osynligt rutnät) och som sagt,
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kursutvärdering Organizing content Tidwell kap 2 Menyer verktygsfält Doing
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Lite av varje Doing things Golden rules Heuristics Intro usability Tenta
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Pappersprototyper Kapitel 7 i Tidwell NetBeans-exempel Tenta
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Lite av varje Projekt Kapitel 7 i Tidwell Kapitel 6 nästa gång Tenta
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Fortsatt om användare Mentala modeller vs implementationsmodeller Personas
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Några gyllene regler Doing Things Projektintro Idag Övningarna start 9.00 Vi
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Pappersprototyper Designexempel Listor (Tidwell kap.5, List of Things)
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 DAG: 14 mars, 2011 TID: 8.30 12.30 SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för tillämpad informationsteknologi.
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Lite av varje LayoutManagers Sista Tidwell Backend projekt (Små skärmar)
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Exempeldesign Paper prototyping Idag CHARM ingen övning
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Paper Prototyping Lite kodtips Lists of Things Designexempel Onsdag övning
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Resten av Tidwell Små skärmar Kodtips för projekt Tenta Hjälpmedel
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Information Projekt Projektplanering in 11/2 Projekthandledning Möjlighet till
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Armin Nezirevic Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Vad utmärker ett bra användargränssnitt? Kort kursinfo
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Information om projekt och rapport Exempel på tentafrågor En del från
Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU
Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kort kursinfo Lab info Föreläsning - Vad utmärker ett bra användargränssnitt?
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag DAG: 8 mars, 2010 TID: 8.30 12.30 SAL: V-huset Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för data- och informationsteknik.
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Missad övning 5? Kontakta mig på peter.borjesson@ait.gu.se för att få en kompletteringsuppgift.
Model View Controller. Objekt-orienterad programmering och design (DIT952) Niklas Broberg, 2016
Model View Controller Objekt-orienterad programmering och design (DIT952) Niklas Broberg, 2016 Model View Controller Model View Controller (MVC) är ett design pattern (architectural pattern) som är väldigt
Föreläsnings 11 - GUI, Händelsestyrda program, MVC
Föreläsnings 11 - GUI, Händelsestyrda program, MVC Josef Svenningsson Tisdag 20/11 Boken Denna föreläsning går igenom följande sektioner i boken: 10.1 och 10.2 11.1 Notera att kapitel 11 inte finns i boken
Swing. MER Java Foundation Classes (JFC) Vad är farorna. Hur lära sig? LayoutManagers. Exempel på några av komponenterna
MER Java Foundation Classes (JFC) Swing Swing Många klasser" Vettigt att lära sig dem utantill" - Tror inte det" -... men det kan vara bra att ha en liten överblick över vad som finns" - Idag (och med
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare
Den här veckan Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare Kom ihåg att boka tiden för handledning på fredag när doodles kommer upp. Handledning
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Läsanvisningar Finns på kurshemsidan under resurser Kommer att förklaras
Objektorienterad Programkonstruktion. Föreläsning 6 23 nov 2015
Objektorienterad Programkonstruktion Föreläsning 6 23 nov 2015 Designmönster Färdiga "recept" för att lösa (del-)problem i struktureringen av ens program Mönster kan beskriva små komponenter eller stora
Objektorienterad Programkonstruktion. Föreläsning 3 9 nov 2015
Objektorienterad Programkonstruktion Föreläsning 3 9 nov 2015 Kursnämnd Namn kommer... UML: Klassdiagram UML: Relationer Ärver från superklass Implementerar gränssnitt Dubbelriktad eller oriktad relation
Objektorienterad Programkonstruktion. Föreläsning 3 7 nov 2016
Objektorienterad Programkonstruktion Föreläsning 3 7 nov 2016 Klass/instans Med hjälp av nyckelordet static kan vi bestämma att en metod eller ett fält ska tillhöra själva klassen i stället för en specifik
Vad utmärker ett bra användargränssnitt?
Vad utmärker ett bra användargränssnitt? Att kommunicera med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphic User Interface GUI = Graphic User Interface GUIn, eller grafiska gränssnitt
Grafiska användargränssnitt i Java
TDDD78, TDDE30, 729A85 jonas.kvarnstrom@liu.se 2018 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Stora delar har
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Exempel på tentafrågor En del från tidigare tentor men också lite andra
Swing. MER Java Foundation Classes (JFC) Hur lära sig? Vad är farorna. LayoutManagers. Exempel på några av komponenterna
MER Java Foundation Classes (JFC) Swing Swing Många klasser Vettigt att lära sig dem utantill - Tror inte det -... men det kan vara bra att ha en liten överblick över vad som finns - Idag (och med fortsättning
Föreläsning 15 (16) Historik (java.awt) Historik (javax.swing) Introduktion till Swing
Föreläsning 15 (16) Introduktion till Swing Historik (java.awt) JDK 1.0 AWT (Abstract Window Toolkit) Paket för gränssnittsprogrammering Har en del nackdelar: Använder s.k. native code Stödjer endast komponenter
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1! Idag! Swings GUI-komponenter! Om användare Upplägg! Föreläsningar! Obligatoriska
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091 DAG: 5 mars, 2012 TID: 8.30 12.30 SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för tillämpad informationsteknologi.
Grundläggande programmering, STS 1, VT Sven Sandberg. Föreläsning 18
Grundläggande programmering, STS 1, VT 2007. Sven Sandberg Föreläsning 18 Igår: Genomgång av dugga Rekursion Idag och på måndag: Om essän Lite, lite teori om konstanter Grafiska användargränssnitt Grundläggande
Om användare och designprocessen
Om användare och designprocessen Målorienterad design. Olika typer av användare. Mentala modeller, metaforer med mera. Att designa The interaction framework. Förra veckan. Gör så här Men inte så Förra
Laboration 3 GUI-programmering
Laboration 3 GUI-programmering Syfte Erbjuder studenterna en möjlighet att lära sig grunderna i gränssnittsprogrammering i Java. Genomförande Genomförs individuellt eller i grupp om 2 personer. Uppskattad
ITK:P1 Föreläsning 4. Grafiska gränssnitt i Java. AWT-komponenter
ITK:P1 Föreläsning 4 Grafiska gränssnitt och händelsehantering 1 DSV Peter Mozelius Grafiska gränssnitt i Java Efterfrågan på program med grafiskt gränssnitt har ökat avsevärt de senaste åren I Java finns
Grafiska användargränssnitt i Java
jonas.kvarnstrom@liu.se 2017 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Till stor del ersatt av Swing: Mer omfattande,
Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag
Den här veckan Kapitel 7 och 11 Kom ihåg att boka tiden för handledning på fredag Uppsamling av missade övningar på onsdag Making it look good Visuell design Färger Typografi Exempel och patterns Komplex
Anvä ndärguide Nyä Expeditionsresor
Anvä ndärguide Nyä Expeditionsresor Hjälpguide för att använda Wordpress och Nya Expeditionsresor.se 2014-08-10 Innehållsförteckning Logga in till Wordpress-panelen... 3 Skapa bildspel... 4 Färgkoder...
Grafiska användargränssnitt
Grafiska användargränssnitt VT-10 GUI - VT10 Martin Blom 1 Kursens upplägg Teori Principer och koncept Föreläsningar Fönstersystem Konstruktion av GUI Design av GUI Praktik Göra på riktigt Laborationer
TDDE10 m.fl. Objektorienterad programmering i Java Föreläsning 7 Erik Nilsson, Institutionen för Datavetenskap, LiU
TDDE10 m.fl. Objektorienterad programmering i Java Föreläsning 7 Erik Nilsson, Institutionen för Datavetenskap, LiU På denna föreläsning: Grafiskt användargränssnitt, Swing Layout och komponenter Göra
Vad utmärker ett bra gränssnitt?
Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphical User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I
Macromedia. Flash 8 Grundkurs. www.databok.se
Macromedia Flash 8 Grundkurs www.databok.se Innehållsförteckning 1 Börja arbeta med Flash 8...1 Användningsområden...1 Bekanta dig med arbetsytan...2 Scen och tidslinje...3 Lager...3 Bibliotek...4 Verktygsfältet
Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.
Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu
Windows Forms Winstrand Development
2013-01-23 1 Winstrand Development Användargränssnitt Hittills har vi skapat program för kommandoraden. Den bakomliggande koden fungerar som den ska, men vi upptäcker snabbt att programmen är begränsade
1 Grafiska komponenter
1 Grafiska komponenter Vi har sett exempel på hur vi kan arbeta med enkla dialogrutor med klasser JOptionPane och hur vi kan rita med en rityta, Graphics instans, i en Java applet. Att skapa ett grafiskt
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Armin Nezirevic Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Denna vecka Onsdag Uppsamling av missade övningar Torsdag projektredovisning
NYHETER I AUTOCAD 2005
NYHETER I AUTOCAD 2005 Nedan följer en kort beskrivning av nyheter och förbättringar i AutoCAD 2005, jämfört med AutoCAD 2004. Nyheterna är inte ordnade i speciell ordning. UTÖKADE HJÄLPFUNKTIONER Rullgardinsmenyn
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Exempel på tentafrågor En del från tidigare tentor men också lite andra
Beskrivning av gesällprov RMI Chat Mikael Rydmark
Beskrivning av gesällprov RMI Chat Mikael Rydmark rydmark@kth.se Mikael Rydmark 1(8) 12-06-06 Innehållsförteckning Inledning...3 Server...3 Klient... 3 Ansluta till servern...3 Huvudchat...4 Privat kommunikation...5
MVC med Javascript och Ajax. Filip Ekberg
MVC med Javascript och Ajax Filip Ekberg MVC med Javascript och Ajax Lektion 7 ASP.NET MVC mail@filipekberg.se Veckans mål ASP.NET MVC Repetition & Diskussion Vad är MVC? Vad är ASP.NET MVC? Hur skapar
Vilken version av Dreamweaver använder du?
Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kursinfo Kort GUI-historia Människa-datorinteraktion/Interaktionsdesign
Malmö högskola 2007/2008 Teknik och samhälle
Laboration 13 Avsikten med denna laboration är att du ska använda ett par nya grafiska komponenter. Dessutom ska du göra designen utan hjälp av en layout-manager (enklare). Börja med att skapa paketet
Grafiska användargränssnitt i Java
TDDD78, TDDE30, 729A85 jonas.kvarnstrom@liu.se 2019 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Stora delar har
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Kort GUI-historia Swings komponenter Idag Lab 1 glöm inte att lämna in i PingPong
Rapport Projekt 1 Från material till webb
IT-Universitetet Grafiska gränssnitt, 6 p Göteborg 2003-09-19 Rapport Projekt 1 Från material till webb Grupp 1: Vilhelm Bergman Hanna Friberg Björn Nord Ulrika Olsson Marlene Sjöberg Innehållsförteckning
On-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle
3.5 Visuell programmering
3.5 Visuell programmering Alla våra program hittills har varit C# Console Applications (sid 41) inkl. programmet MessageBox fast det genererade en grafisk meddelanderuta. Nu vill vi utnyttja grafikens
Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I. Rune Körnefors. Medieteknik Rune Körnefors
Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken ÖvningsuppgiC A Arkitektur, struktur
Objektorienterad programmering med Java Swing. Programexempel. Swing och AWT AWT. = Abstract windowing toolkit
Swing och AWT Objektorienterad programmering med Java Swing Sven-Olof Nyström Uppsala Universitet March 14, 2006 Skansholm: Kapitel 6 AWT = Abstract windowing toolkit använder värddatorns fönstersystem
Java: Utvecklingsverktyg, datatyper, kontrollstrukturer
Java: Utvecklingsverktyg, datatyper, kontrollstrukturer Sven-Olof Nyström Uppsala Universitet 13 juni 2005 1 Utvecklingsverktyg för Java Vi rekommenderar Suns utvecklingsverktyg (SDK, tidigare JDK), se
Arg-administratörens guide till Umbraco v 1.2.1
Arg-administratörens guide till Umbraco v 1.2.1 Logga in 1. Öppna en webbläsare och gå till inloggningssidan: https://www.sfog.se/umbraco/ 2. Skriv in följande användarnam & lösenord : 3. Klicka på Logga
Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.
Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför
LÄR DIG ANVÄNDA DIN MAC. från grunden! Nu med Mac OS X Leopard! Harry Peronius
Harry Peronius LÄR DIG ANVÄNDA Nu med Mac OS X Leopard! DIN MAC från grunden! Del 1 GRUNDFUNKTIONER 4. Finder... 6 5. Dock... 34 6. Hjälp... 36 7. Mappar och filer... 38 8. Time Machine... 4 9. Systeminställningar...
Inställningstips. Visuella anpassningar Windows 10 2015-08-06
Inställningstips Visuella anpassningar Windows 10 2015-08-06 Innehåll Inledning... 3 Anpassa bildskärmen... 4 Ändra storlek för text, appar och andra objekt... 4 Ändra muspekare och markör... 6 Egenskaper
Att arbeta med. Müfit Kiper
Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.
Gränssnitt för FakeGranska. Lars Mattsson
Gränssnitt för FakeGranska av Lars Mattsson (larsmatt@kth.se) Innehållsförteckning 1 Introduktion...3 2 Genomförande:...3 3 Användning...5 4 Kända buggar:...6 5 Källförteckning...6 2 1 Introduktion Taken
Skärmtangentbordet som är enkelt att använda både med mus, touchskärmar och interaktiva whiteboards
Skärmtangentbordet som är enkelt att använda både med mus, touchskärmar och interaktiva whiteboards Tel: 031-769 00 60 info@frolundadata.se www.frolundadata.se Introduktion WizKeys är flexibelt och kostnadseffektivt
725G61 - Laboration 8 Ett enkelt GUI. Sahand Sadjadee och Johan Falkenjack
725G61 - Laboration 8 Ett enkelt GUI Sahand Sadjadee och Johan Falkenjack December 20, 2013 1 Inledning I de tidigare labbarna har ni fått lära er grundläggande programmering och objektorientering samt
Föreläsning 7. Grafiska användargränssnitt
Föreläsning 7 Grafiska användargränssnitt För att göra grafiska användargränssnitt: Måste man veta hur man skapar komponenterna i ett GUI och vilka det finns. Till lab 3 räcker det med att känna till de
Programmeringsteknik II - HT18. Föreläsning 6: Grafik och händelsestyrda program med användargränssnitt (och Java-interface) Johan Öfverstedt
Programmeringsteknik II - HT18 Föreläsning 6: Grafik och händelsestyrda program med användargränssnitt (och Java-interface) Johan Öfverstedt 18-09-28 1 Förra gången: Arv och klasshierarkier Vi såg hur
DI-institutionen Sid 1 av 6 Hans-Edy Mårtensson Sten Sundin
DI-institutionen Sid 1 av 6 Hans-Edy Mårtensson Sten Sundin TENTAMEN I IKB007 INTERNETPROGRAMMERING MED JAVA för SY2 1999-03-17, kl 14.00-18.00 Hjälpmedel: En lärobok i Java programmering Återlämningstillfälle:
OBJEKTORIENTERAD PROGRAMVARUUTVECKLING. Övningstentamen 1
Institutionen för Data- och informationsteknik JSk TENTAMEN OBJEKTORIENTERAD PROGRAMVARUUTVECKLING Övningstentamen 1 OBS! Det kan finnas kurser med samma eller liknande namn på olika utbildningslinjer.
Allt du behöver för crowdsourcing
GUIDE Allt du behöver för crowdsourcing DEL 2: Så här följer och visar du resultatet i en dashboard Allt du behöver för crowdsourcing den kompletta guiden steg för steg, del 2 För att utföra uppgifterna
Uppgift 18 Eget programval 2010 02 02
Prezi lathund Vi skall skapa en presentation med hjälp av Prezi. För att använda Prezi behöver man logga in, dvs. skapa ett konto hos Prezi. När man sedan loggat in kan man skapa en ny Prezi. Det första
Malmö högskola 2007/2008 Teknik och samhälle
Laboration 12 Avsikten med denna laboration är att du ska göra några grafiska program. Börja med att skapa paketet laboration 12. Grundläggande uppgift Uppgift 12a Uppgiften går ut på att göra en enkel
Installationsanvisning för Su Officemallar 2007 För PC Word och PowerPoint
1 (13) INSTALLATIONSANVISNING MS Office 2007 - Windows 2011-07-06 Installationsanvisning för Su Officemallar 2007 För PC Word och PowerPoint Innehållsförteckning Var hittar jag Su Officemallar?... 2 Är
DUGGA: Objektorienterade applikationer. Läs detta! Uppgifterna är inte avsiktligt ordnade efter svårighetsgrad.
1 (8) DUGGA: Objektorienterade applikationer Läs detta! Uppgifterna är inte avsiktligt ordnade efter svårighetsgrad. Skriv ditt namn, personnummer och e-postadress på försättsbladet. Skriv rent dina svar.
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Några gyllene regler Projektintro Idag 1 GETTING INPUT
Föreläsning 10: Gränssnitt och webbdesign
Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar
Grunderna i PowerPoint
Grunderna i PowerPoint Pow erpoint är ett effektivt presentationsprogram, men för att kunna använda det på bästa sätt måste du först förstå grunderna. I de här självstudierna beskrivs vissa av de aktiviteter
Grafiskt användargränssnitt (GUI-Graphical User Interface) intro Komponenter
Grafiskt användargränssnitt (GUI-Graphical User Interface) intro Komponenter De komponenter som vi ska titta lite närmare på den här gången är paneler (JPanel), knappar (JButton), textfält (JTextField).
Två designmönster, MVC och Observer/Observable. Objektorienterad programvaruutveckling GU (DIT011)
Institutionen för Datavetenskap Göteborgs universitet HT2009 DIT011 Objektorienterad programvaruutveckling GU (DIT011) Innehåll Föreläsning 8 Två designmönster, MVC och Observer/Observable. Designrekommendation
Java-concept och Swing. Swing low, sweet chariot
Java-concept och Swing Swing low, sweet chariot Javas Swing-API En del av Javas standard-api API - application programming interface Ett klassbibiliotek som följer med Java Är designat med många OO-concept
Excel kortkommando. Infoga rad, kolumn eller cell Ta bort rad, kolumn eller cell
Excel kortkommando Kommando Allmänt F10 Ctrl + B eller Skift + F5 Ctrl + G Ctrl + H Ctrl + i F1 Ctrl + N Ctrl + O Ctrl + P Ctrl + S F12 eller Alt + F2 Ctrl + W eller Alt + F4 Skift + F1 Skift + F10 Ctrl
OBJEKTORIENTERAD PROGRAMVARUUTVECKLING. Övningstentamen 2
Institutionen för Data- och informationsteknik JSk TENTAMEN OBJEKTORIENTERAD PROGRAMVARUUTVECKLING Övningstentamen 2 TID: 4 timmar Ansvarig: Betygsgränser: Hjälpmedel: Jan Skansholm Sammanlagt maximalt