Dynamisk Webdesign F2010 Præsentationer Læringsmål Emnet: teknologi, koncept, design og process Projekt Semesterplan
Jeres underviser: Tess Gaston Cand.it, software udvikling (ITU) og ba. pædagogik (KU) Applikationsdesign/spildidaktisk design for DELC. Flash udvikling: Flash IDE, ActionScript, Flex. Wordpress hacking.
Hjælpelærer: Søren Laursen
Forklare arkitekturen bag en dynamisk webløsning. Karakterisere vigtige teknologier der anvendes i dynamisk webudvikling. Anvende analyse-/design-metoder til at skitsere, planlægge, kommunikere og dokumentere en dynamisk webdesignløsning. Delvist implementere en dynamisk webløsning. Læringsmål Følge (simple) instruktioner til at ændre og videreudvikle eksisterende kode. Organisere den dynamiske udviklingsprocess. Teoretisere betydningen af de designmæssige, grafiske og teknologiske valg der er truffet i forbindelse med uformningen af egen løsning. Eksamen: B4 (Rapport/Mundtligt forsvar).
dynamisk? A dynamic web page is a hypertext document rendered to a World Wide Web user presenting content that has been customized or actualized for each individual viewing or rendition or that continually updates information as the page is displayed to the user. Hi Tess! It s 9:32am
Dynamisk web arkitektur server side client side Request Result Hi Tess! it s 9:32am
Web teknologier XHTML - struktur CSS - præsentation JavaScript - client side scripting. PHP MySQL - server side scripting. - data lagring, data filtrering.
Redskaber Browsers: Safari, Firefox, Opera, Internet Explorer, Chrome Debugging: Firebug Tekst editor: Textwrangler, notepad++, skedit, mm. Lokal web platform: WAMP for windows og MAMP for mac. Grafik: Gimp/Photoshop, 960.gs skabeloner. Animation/Rich Content: Flash, Silverlight, mootools (Ajax)
Dette er IKKE et programmeringskursus! DW er et videregående konstruktionsfag, hvor viden om web teknologier, interfacedesign og medieteori kommer i spil, under udformningen af en konkret webløsning.
Dynamisk webdesign - en tværfaglig disciplin Koncept At tænke originalt i udnyttelsen af mediets potentiale Funktionalitet At kende de teknologiske rammer. Design At kende konventioner for brugervenlighed og anvende grafiske virkemidler. Process At kunne strukturere arbejdet.
Eksperter programmører konceptudviklere informationsarkitekter interfacedesignere interaktionsdesignere
Koncept Et koncept er den overordnede idé bag løsningen af et problem. Et godt koncept, tager udgangspunkt i et interessant problem og repræsenterer en orignal løsning. Et godt koncept demonstrer kendskab til andre koncepter.
Analyse/Forundersøgelse Aktivitetsbaseret anlyse vs brugercentreret analyse - med analyse metoden AOF (activities, objects, features) juxtapositionering af relaterede sites. proof-of-concept kodning. Fra Wiktionary. Juxta position: A placing or being placed in nearness or contiguity, or side by side, often done in order to compare/contrast the two, to show similarities or differences.
Design Design af brugergrænsefladen - grafisk og funktionelt design Design af løsningen - systemarkitektur
Synergi mellem kode, indhold og design? Afhænger af udviklingsteamets evne til at kommunikere og samtænke ideer på tværs af fagområderne.
Deliverables Wireframe Blueprint Mock-up Funktionsdiagram Domænemodel Dataflow diagram Kode kommentarer ER diagram A blueprint is just good thinking written down Christina R. Wodtke
Implementation Praktisk arbejde med programmeringssprog, redskaber og frameworks. +
Projekt Design og delvis implementering af dynamisk website. Der afleveres en rapport der indeholder: - en præsentation af løsningens koncept og design. - dokumentation af processen og de implementerede dele.
Eksempler fra sidste semester E2009 Tema kulturliv
F2010 Tema Politik?
Projektet vælg et fokusområde Data visulisering, digital kunst, visuel kommunikation OPLEVELSE INFORMATION Findability, organisering, informationsdesign Usability, applikationsdesign, interaktionsdesign HANDLING
Findability, organisering, informationsdesign Data visulisering, digital kunst, visuel kommunikation INFORMATION http://tenbyten.org/10x10.html http://www.aok.dk/ OPLEVELSE http://www.blprnt.com/plumage/ http://www.big.dk/ HANDLING http://www.twitter.com/ http://www.nike.com/nikeos/p/nike/en_emea/ Usability, applikationsdesign, interaktionsdesign http://maps.google.dk
Udviklingsprocess Semesterplanen simulerer en iterativ udviklingsprocess http://en.wikipedia.org/wiki/rapid_application_development
Semesterplan INTRO: Dynamisk Webdesign 1.iteration Webmediets begreber og genrer. Intro til webteknologier Analyseredskaber Designredskaber: Prototyping/deliverables Præsentationer 2. iteration Lagring og load af data fra extern kilde: XML, MySQL Interfacedesign og usability Grafiske virkemidler. Præsentationer 3.iteration Webservices Advanced CSS and dynamic HTML (XHTML) AJAX/Flash/actionscript evt / Project evt / Project
Dan grupper Max. 4 - min. 2 deltagere pr. gruppe. Opret gruppeblog - få feedback. Pas på med at danne homogene grupper.
Næste forelæsning Web 2.0 - før og efter Konceptafgrænsning