1. No category

DYNAMISK WEBDESIGN
Intro
1
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
1
Præsentationer
3
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Tess Gaston
Mellem mennesker og teknologi
Udvikler hos Delc
(nu Mingoville A/S)
Forskningsassistent
DPU
Udvikler hos
MOCH A/S
2010
2011
Projektleder hos
Gyldendal
Uddannelse
Cand.IT i
Softwareudvikling
BA i pædagogik
1995
Bang Bang Done
(eget firma)
1999
2002
2003-2008
???
2012
4
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
2
Hvad menes med Dynamisk webdesign?
6
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Hvad betyder ‘dynamisk’ ?
Interaktivt?
Modulært?
dynamisk
=
Tilpasset?
Opdateret?
7
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
“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 http://en.wikipedia.org/wiki/Dynamic_web_page juni 2010
8
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Hvad gør denne side dynamisk?
Dynamisk tilpasning af copy
Dynamisk genereret liste af
anbefalinger
source:
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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: http://en.wikipedia.org/wiki/Dynamic_web_page
10
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Kategorier af data på DR
menuer
_________
_________
_________
genveje
_________
_________
_________
featured _________
__________________
_________
_________
_________
historier
_________ lister
__________________
statistisk gen. lister
__________________
breaking news
_________
_________
_________
_________
_________ _________
_________
_________
_________
_________
_________
11
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
16
source:http://www.dr.dk/
12
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
genveje
_________
_________
_________
_________
menu
featured
_________
_________
_________
_________
breaking news
_________
_________
_________
_________
historier
_________
_________
_________
_________
ny type !
_________
_________
_________
_________
13
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Bag skabelonerne...
dat
a
skabeloner
n
o
i
t
a
t
en
s
Præ
historier
menuer
_________
_________
lister
_________
_________
_________
_________
_________
_________
_________
_________
_________
genveje
breaking news
_________
_________
_________
_________
_________
_________ featured _________
statistisk gen. lister
_________ __________________
_________
_________
_________
_________
_________
_________
_________
14
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Hvorfor dynamisk ?
statisk vs. dynamisk - ulemper og fordele
dynamisk
statisk
ulemper
• Langsommere at udvikle
• Dyrere at udvikle
• Sværere at udvikle
• Dyrere hosting
fordele
• Mere funktionelt
• Lettere at opdatere
• Billigt at udvikle
• Flere besøg
• Billigt at hoste
• Lettere at samarbejde om
15
• Svært at opdatere
• Mindre anvendeligt
• Stagnation i indholdet
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Mere anvendeligt, mere opdaterbart
Modulær
opbygning
Anvendelighed
Elementernes
autonomi = kan
redigeres i relativ
uafhængighed
Indholdet er oftere relevant:
nyt / personaliseret
16
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Client - server arkitektur
PHP
Request
Request
Result
html
html
Result
(
css
18
js
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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 http://www.alistapart.com/articles/dao/
19
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
DYNAMISK WEBDESIGN
HTML5 : Fra én
gæsteforelæsning
til fuldt fokus
Navnet på et kursus der har kørt siden E2009
Fra ingen JavaScript
til scriptskole
Fra kun database til
også XML, JSON,
webservices
Fra rapport til eportefolio
2009
2012
20
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
3
Hvem er I?
21
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
1995
23
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
programmering
teknologi
design
koncept
kommunikation
ingen eller lidt erfaring
en del eller nogen
erfaring
ingen eller lidt erfaring
Fokus på design og at
fuldføre script-skole.
•
•
Scriptskole
Design deliverables
Fokus på design og
process
•
•
Fokus på kode,
teknologier
og process.
35
•
•
en del eller nogen erfaring
Scriptskole
Dom scripting, load af dynamisk data, design af database.
Fokus på et originalt
koncept og et helstøbt
produkt.
•
•
•
24
Design Deliverables
Interface Design
Samspillet mellem anvendelsesperspektiver og mediets tekniske
muligheder.
Grundigere domænemodellering
Research & Development (fx. into future web standards)
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
4
Kursus - indhold
25
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Dynamisk web: en tværfaglig disciplin
Design
koncept
problem-løsningstrategi
+
Teknologi
=
website
muligheder og
begrænsninger
Service
funktionalitet
Aktivitetsanalyse,
flow design, usability
javaScript, PHP
Features
struktur
Hieraki, organisering
HTML, CSS
Layout
Font, farver,
textures, ikoner
CSS, javaScript
Stemning, identitet
Datamodellering,
datarelationer,
navngivning
MySQL, XML, JSON
udseende
data
26
Sektioner, kategorier, copy
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Jesse James Garret
Emnerne i forhold til Garrets “elements of UX”
data
funktionalitet
struktur
udseende
koncept
27
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
“A blueprint is just good
thinking written down”
Christina Wodke
28
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Deliverables
problem-løsning-strategi
koncept
model
Aktivitetsanalyse
Prioritised
Featurelist
Hieraki, organisering
UX design
Flow
diagram
Wireframes
ER-diagram
Mock-ups
Font, farver,
textures, ikoner
datamodellering,
datarelationer
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
caption
Deliverables er
centrale i samarbejdet
med kunden
source: http://www.simplesquare.com/
30
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Scripting er mere end kode
Det indebærer brug af redskaber, services, biblioteker og frameworks
MySQL, XML, JSON
phpMyAdmin
javaScript, PHP
Google API’s, Flickr API,
mm.
lokal webserver
Google Chromes
Developer Tool,
Firebug,
jsHint
HTML, CSS
jQuery, H5 boilerplate,
modernizr, css grid system
CSS, javaScript
mediets muligheder og
begrænsninger
RequireJS
GitHub
31
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Litteraturen
scannede kapitler, online artikler, bøger...
Teknologi
Design
32
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Password til pdf dokumenter
‘oneweb’
Du får en invitation til en dropbox folder
med størstedelen af pensum fra Frederik
33
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
5
Semesterplan
34
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
deliverables
semesterplan
data lagring
scripting
ion
kt
Le
2-6
1
7-9
14
10 - 13
r
ne
m
E
HTML5
CSS3
semantic elements,
font embed,
shaddow, animation
canvas, video, graphics, forms
koncept/
analyse
CSS
HTML
responsive
design, fluid
grid framework
html5 boilerplate
AOF, UX goals
JavaScript
intro
XML
scriptskole 1-4, dom scripting
JSON
process
MySQL
webteknologier
HTML, CSS,
javaScript, PHP,
MySQL,
normalization
dev tools
debugger, editor, local webserver
design
webgenrer/web historie
social, service, infospace, mash-up
project theme:
the app showcase site
wireframe
mock-up
ER-diagram
project
PHP
sql queries, data formating
JavaScript
working with libraries (jQuery), AJAX
35
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
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
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
6
Projekt emne
37
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
noget med mobil...
Showcase
Mobile Websites
eller:
for eksempel:
Byg en mobil version af
et (kendt) website
Byg et site der
præsenterer/supplerer en
mobil app
38
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Alle har fokus på formidling
Opret en blog til at formidle jeres arbejde i løbet af semesteret
1995
1
Samlingssted for
arbejdsdokumenter
2
Kommunikationsværktøj
3
AFLEVERING
-i gruppen
-mellem gruppen og os
39
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Bloggen dokumenterer jeres
arbejde med projektet
Og indeholder:
- design deliverables
- centrale kode ‘snippets’ med forklaringer
- reflektioner, begrundelser og overvejelser
40
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
B4 Eksamen
12/12/12
07/01/13 -10/01/13
Gruppe aflevering af CD med
- export af jeres blog
- export af database
- det implementerede som kildekode.
Individuel mundtlig eksamen
41
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
...mere inspiration
Et site
dediceret til
at vise app
websites
Her peges på noget specifikt
Her peges på noget
specifikt
source:http://www.appsites.com/
42
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
...tjek også
•
Kritisk gennemgang af typiske fejl. Matt Gemmel
http://mattgemmell.com/2010/06/20/your-apps-website-sucks/
Endnu flere top-x lister
• http://mattgemmell.com/2010/06/20/your-apps-website-sucks/
http://www.macstories.net/roundups/100-awesome-iphone-appswebsites/
http://www.awwwards.com/30-beautiful-app-websites.html
• http://www.macstories.net/roundups/100-awesome-iphone-apps-websites/
43
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Super Best Practice
Youtube.com for mobil,
bliver ofte brugt som
eksempel på best practice
for touch interface design
source: m.youtube.com
44
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Om mobile websites
•
Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/
Mobile Web Best Practice: http://mobilewebbestpractices.com/
• http://mattgemmell.com/2010/06/20/your-apps-website-sucks/
http://www.macstories.net/roundups/100-awesome-iphone-apps-websites/
45
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON
Request
(
)
Result
46
“Dynamisk Webdesign” E2012, IT universitetet i København v. TESS GASTON