DYNAMISK WEBDESIGN Intro

Transkript

1 DYNAMISK WEBDESIGN Intro 1

2 PLAN... Mød din kursusansvarlige: Tess Gaston Mød din hjælpelærer: Frederik Wordensjold Hvad er DYNAMISK webdesign? Indhold Semesterplan Hvem ER I? (graf) Hvad KAN I? (pull) Projekt emne Scriptskole 2

3 1 Præsentationer 3

4 Tess Gaston Mellem mennesker og teknologi Forskningsassistent DPU Udvikler hos Delc (nu Mingoville A/S) Bang Bang Done (eget firma) Udvikler hos MOCH A/S Projektleder hos Gyldendal Uddannelse BA i pædagogik Cand.IT i Softwareudvikling ???

5 Disclaimer eller: 5 ting du bør vide om mig Jeg er ingen web guru - jeg er en web lærer Jeg hjælper jer med at lære om web. Jeg er ikke HTML ekspert - det meste af det jeg har lavet er Flash- baseret. - tilgengæld er Frederik indfødt ;) Scripting og programmering er ikke kommet naturligt til mig - jeg forstår hvor svært det er at lære det! Og jeg ved det nok skal lykkes. Jeg er holist/generalist/pragmatiker: hellere vide nok til at få NOGET meningsfuldt op at køre, frem for at blive låst fast i en detalje. Jeg er stor fan af folk med kreativ drivkraft, som de kan koble med en god portion nørderi. 5

6 2 Hvad menes med Dynamisk webdesign? 6

7 Hvad betyder dynamisk? Interaktivt? dynamisk = Modulært? Tilpasset? Opdateret? 7

8 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. source: slettet fra juni

9 Hvad gør denne side dynamisk? Dynamisk tilpasning af copy Dynamisk genereret liste af anbefalinger source:

10 Dynamic web pages are web sites that are generated at the time of access by a user or change as a result of interaction with the user. Dynamic Text web pages are a fundamental part of Web 2.0 which facilitates information sharing across multiple websites. source: 10

11 Kategorier af data på DR menuer genveje featured historier lister statistisk gen. lister breaking news 11

12 16 source: 12

13 genveje breaking news historier 13 menu featured ny type!

14 Bag skabelonerne... data skabeloner menuer genveje historier lister breaking news featured statistisk gen. lister Præsentation 14

15 Hvorfor dynamisk? statisk vs. dynamisk - ulemper og fordele dynamisk statisk ulemper Langsommere at udvikle Dyrere at udvikle Sværere at udvikle Dyrere hosting Svært at opdatere Mindre anvendeligt Stagnation i indholdet fordele Mere funktionelt Lettere at opdatere Flere besøg Lettere at samarbejde om Billigt at udvikle Billigt at hoste 15

16 Mere anvendeligt, mere opdaterbart Modulær opbygning Anvendelighed Elementernes autonomi = kan redigeres i relativ uafhængighed Indholdet er oftere relevant: nyt / personaliseret 16

17 Langsommere, dyrere, sværere at udvikle Programmering Planlægning Værdier repræsenteres kun abstrakt i kildekoden og kendes først når koden eksekveres Det hævede abstraktionsniveau kræver design og planlægning. 17

18 Client - server arkitektur PHP Request Request html html Result Result ( css js 18

19 John Allsopp It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible. source: A Dao of Web Design 19

20 DYNAMISK WEBDESIGN Navnet på et kursus der har kørt siden E2009 HTML5 : Fra én gæsteforelæsning til fuldt fokus Fra ingen JavaScript til scriptskole Fra kun database til også XML, JSON, webservices Fra rapport til e- portefolio

21 3 Hvem er I? 21

22 programmering teknologi design koncept kommunikation ingen eller lidt erfaring en del eller nogen erfaring ingen eller lidt erfaring 1995 en del eller nogen erfaring 35 22

23

24 programmering teknologi design koncept kommunikation ingen eller lidt erfaring ingen eller lidt erfaring Fokus på design og at fuldføre script-skole. Scriptskole Design deliverables en del eller nogen erfaring Fokus på design og process Design Deliverables Interface Design en del eller nogen erfaring Fokus på kode, teknologier og process. 35 Scriptskole Dom scripting, load af dynamisk data, design af database. 24 Fokus på et originalt koncept og et helstøbt produkt. Samspillet mellem anvendelsesperspektiver og mediets tekniske muligheder. Grundigere domænemodellering Research & Development (fx. into future web standards)

25 4 Kursus - indhold 25

26 Dynamisk web: en tværfaglig disciplin Design + Teknologi = website koncept problem-løsningstrategi muligheder og begrænsninger Service funktionalitet Aktivitetsanalyse, flow design, usability javascript, PHP Features struktur Hieraki, organisering HTML, CSS Layout udseende Font, farver, textures, ikoner CSS, javascript Stemning, identitet data Datamodellering, datarelationer, navngivning MySQL, XML, JSON Sektioner, kategorier, copy 26

27 Jesse James Garret Emnerne i forhold til Garrets elements of UX data funktionalitet struktur udseende koncept 27

28 A blueprint is just good thinking written down Christina Wodke 28

29 Deliverables koncept model problem-løsning-strategi Prioritised Featurelist Aktivitetsanalyse UX design Hieraki, organisering Flow diagram Wireframes Mock-ups Font, farver, textures, ikoner ER-diagram datamodellering, datarelationer

30 caption Deliverables er centrale i samarbejdet med kunden source: 30

31 Scripting er mere end kode Det indebærer brug af redskaber, services, biblioteker og frameworks phpmyadmin MySQL, XML, JSON Google API s, Flickr API, mm. javascript, PHP lokal webserver HTML, CSS Google Chromes Developer Tool, Firebug, jshint jquery, H5 boilerplate, modernizr, css grid system RequireJS GitHub CSS, javascript mediets muligheder og begrænsninger 31

32 Litteraturen scannede kapitler, online artikler, bøger... Teknologi Design 32

33 Password til pdf dokumenter oneweb Du får en invitation til en dropbox folder med størstedelen af pensum fra Frederik 33

34 5 Semesterplan 34

35 semesterplan deliverables data lagring scripting Lektion Emner intro HTML5 semantic elements, canvas, video, graphics, forms MySQL normalization webteknologier HTML, CSS, javascript, PHP, MySQL, JavaScript scriptskole 1-4, dom scripting CSS3 font embed, shaddow, animation dev tools debugger, editor, local webserver webgenrer/web historie social, service, infospace, mash-up project theme: the app showcase site koncept/ analyse AOF, UX goals design wireframe mock-up ER-diagram HTML html5 boilerplate XML JSON CSS responsive design, fluid grid framework process PHP sql queries, data formating JavaScript working with libraries (jquery), AJAX project 35

36 Semesterplan 1. Course introduction 2. Intro to Web Technologies 3. Basic programming concepts w. JavaScript 4. Web history, present, future, (character and genres) 5. HTML5, Semantic HTML 6. CSS3 + Student presentations of HTML5 elements 7. Defining UX goals and Activity centered analyzis 8. Design deliverables: wireframes, mock-ups 9. mock-up session 10. Using libraries and frameworks 11. Dynamic Data 1: XML, JSON, Webservices 12. Dynamic Data 2: Database design 13. Dynamic Data 3: Database queries (PHP) 36

37 6 Projekt emne 37

38 noget med mobil... Showcase Mobile Websites for eksempel: eller: Byg en mobil version af et (kendt) website Byg et site der præsenterer/supplerer en mobil app 38

39 Alle har fokus på formidling Opret en blog til at formidle jeres arbejde i løbet af semesteret Samlingssted for arbejdsdokumenter Kommunikationsværktøj -i gruppen -mellem gruppen og os AFLEVERING 39

40 Bloggen dokumenterer jeres arbejde med projektet Og indeholder: - design deliverables - centrale kode snippets med forklaringer - reflektioner, begrundelser og overvejelser 40

41 B4 Eksamen 12/12/12 Gruppe aflevering af CD med - export af jeres blog - export af database - det implementerede som kildekode. 07/01/13-10/01/13 Individuel mundtlig eksamen 41

42 ...mere inspiration Et site dediceret til at vise app websites Her peges på noget specifikt Her peges på noget specifikt source: 42

43 ...tjek også Kritisk gennemgang af typiske fejl. Matt Gemmel Endnu flere top-x lister

44 Super Best Practice Youtube.com for mobil, bliver ofte brugt som eksempel på best practice for touch interface design source: m.youtube.com 44

45 Om mobile websites Mobile Web Best Practices: Mobile Web Best Practice:

46 Request ( ) Result 46