Dynamisk Webdesign F2010

Transkript

1 Dynamisk Webdesign F2010 Præsentationer Læringsmål Emnet: teknologi, koncept, design og process Projekt Semesterplan

2 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.

3 Hjælpelærer: Søren Laursen

4 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).

5 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

6 Dynamisk web arkitektur server side client side Request Result Hi Tess! it s 9:32am

7 Web teknologier XHTML - struktur CSS - præsentation JavaScript - client side scripting. PHP MySQL - server side scripting. - data lagring, data filtrering.

8 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)

9 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.

10 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.

11 Eksperter programmører konceptudviklere informationsarkitekter interfacedesignere interaktionsdesignere

12 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.

13 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.

14 Design Design af brugergrænsefladen - grafisk og funktionelt design Design af løsningen - systemarkitektur

15 Synergi mellem kode, indhold og design? Afhænger af udviklingsteamets evne til at kommunikere og samtænke ideer på tværs af fagområderne.

16 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

17 Implementation Praktisk arbejde med programmeringssprog, redskaber og frameworks. +

18 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.

19 Eksempler fra sidste semester E2009 Tema kulturliv

20 F2010 Tema Politik?

21 Projektet vælg et fokusområde Data visulisering, digital kunst, visuel kommunikation OPLEVELSE INFORMATION Findability, organisering, informationsdesign Usability, applikationsdesign, interaktionsdesign HANDLING

22 Findability, organisering, informationsdesign Data visulisering, digital kunst, visuel kommunikation INFORMATION OPLEVELSE HANDLING Usability, applikationsdesign, interaktionsdesign

23 Udviklingsprocess Semesterplanen simulerer en iterativ udviklingsprocess

24 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

25

26 Dan grupper Max. 4 - min. 2 deltagere pr. gruppe. Opret gruppeblog - få feedback. Pas på med at danne homogene grupper.

27 Næste forelæsning Web før og efter Konceptafgrænsning