1. Del - Karin. Undervisere: Peter, Karin, Jens og Gitte Hvem er Peter & Karin? Broadcast:

Præsentationer af emnet: "1. Del - Karin. Undervisere: Peter, Karin, Jens og Gitte Hvem er Peter & Karin? Broadcast:"— Præsentationens transcript:

1 1. Del - Karin

2 Undervisere: Peter, Karin, Jens og Gitte Hvem er Peter & Karin? Broadcast: http://join.me/webkursushttp://join.me/webkursus

3 Udvikling af websites Webdesign Dokumentation

4 Interaktion (12 dage) * Html * Css * Webstandarder * Javascript * jQuery * jQuery Mobile * Dokumentation Visualisering (½ dag) * Layout af websider * Navigation * Photoshop Mockup Kommunikation (1 dag) * Kommunikation og websider * Skriv godt til nettet * Usability * Personlig branding

5

6 Lav et portfolio-website hvor du præsenterer dit Photoshop- og Flash-arbejde over for en selvvalgt målgruppe…

7 I gang med dagen: * Internettet og Webbet - kort historie og lidt teknisk forklaring * HTTP, browsere og servere * Opmærkning af tekst * Meget grundlæggende HTML Første opgave * Download og installér Komodo Edit * Lav en simpel webside - gem den lokalt og vis den i browseren FTP og webhoteller Anden opgave * Download og installér FileZilla Client * Upload webside og billede til keaweb Grundigere præsentation af modulets opgave Inspiration - Eksempler på portfolio Afleveringsopgave

8 3. del

9

10

11

12

13

14

15 * Modulopgaven finder du på Fronter: 1.2_Modulopgave.pdf1.2_Modulopgave.pdf Eksempler på portfolioafleveringer fra sidste semester: * http://e2012m1weba04.keaweb.dk/final_website/Website1/start.html http://e2012m1weba04.keaweb.dk/final_website/Website1/start.html * http://e2012m1webc09.keaweb.dk/dag11/HP9/billed_menu.html http://e2012m1webc09.keaweb.dk/dag11/HP9/billed_menu.html * http://e2012m1webb14.keaweb.dk/version4/index.htm http://e2012m1webb14.keaweb.dk/version4/index.htm * http://e2012m1webb24.keaweb.dk/version4/AcrossWeb2.html http://e2012m1webb24.keaweb.dk/version4/AcrossWeb2.html * http://e2012m1webb21.keaweb.dk/version04/index.php http://e2012m1webb21.keaweb.dk/version04/index.php * http://e2012m1weba15.keaweb.dk/_dokumenter/hjemmeside_done/forside.html http://e2012m1weba15.keaweb.dk/_dokumenter/hjemmeside_done/forside.html * http://e2012m1weba13.keaweb.dk/Website%20done/Website%20-BeC%20-%20Done/forside.html http://e2012m1weba13.keaweb.dk/Website%20done/Website%20-BeC%20-%20Done/forside.html * http://e2012m1weba17.keaweb.dk/_hjemmeside/Vores%20hjemmeside/reza.html http://e2012m1weba17.keaweb.dk/_hjemmeside/Vores%20hjemmeside/reza.html

16 * Fotografisk: http://www.dbworks.pro/http://www.dbworks.pro/ * Typografisk: http://www.coullon.com/http://www.coullon.com/ * Animeret: http://thinkpixellab.com/http://thinkpixellab.com/ * Retro: http://twofishillustration.com/http://twofishillustration.com/ * Minimalistisk: http://thuytruc.me/http://thuytruc.me/

17 * http://simplebits.com/ (Dan Cederholm – Bulletproof serien) – minimalistisk http://simplebits.com/ * http://www.lukew.com/ (Luke Wroblewski – Mobile First) – animeret http://www.lukew.com/ * http://ethanmarcotte.com/ (Ethan Marcotte – Responsive Web Design) http://ethanmarcotte.com/ * http://happycog.com/ Jeffrey Zeldman (A List apart) - farverig http://happycog.com/ * http://chriscoyier.net/ og http://codepen.io/ Chris Coyier (css-tricks.com) http://chriscoyier.net/http://codepen.io/ * http://brightcreative.com/ Dave Shea (CSS Zen Garden) http://brightcreative.com/ * http://ethanmarcotte.com/ (Ethan Marcotte – Responsive Web Design) http://ethanmarcotte.com/ (Ethan Marcotte – Responsive Web Design) * http://happycog.com/ Jeffrey Zeldman (A List apart) - farverig http://happycog.com/ Jeffrey Zeldman (A List apart) - farverig * http://chriscoyier.net/ og http://codepen.io/ Chris Coyier (css-tricks.com) http://chriscoyier.net/ og http://codepen.io/ Chris Coyier (css-tricks.com) * http://brightcreative.com/ Dave Shea (CSS Zen Garden) http://brightcreative.com/ Dave Shea (CSS Zen Garden)

18 * http://www.behance.net/ http://www.behance.net/ * http://madeinschool.dk/ http://madeinschool.dk/ * http://ethanmarcotte.com/ (Ethan Marcotte – Responsive Web Design) http://ethanmarcotte.com/ (Ethan Marcotte – Responsive Web Design) * http://happycog.com/ Jeffrey Zeldman (A List apart) - farverig http://happycog.com/ Jeffrey Zeldman (A List apart) - farverig * http://chriscoyier.net/ og http://codepen.io/ Chris Coyier (css-tricks.com) http://chriscoyier.net/ og http://codepen.io/ Chris Coyier (css-tricks.com) * http://brightcreative.com/ Dave Shea (CSS Zen Garden) http://brightcreative.com/ Dave Shea (CSS Zen Garden)

19 Opret en ny webside, som viser en madopskrift. Opskriften skal indeholde: * En overskrift * Et billede * En ingrediensliste * En beskrivelse af fremgangsmåden * Et link til en mad/kokke-side efter eget valg Websiden skal uploades til dit eget domæne, og opgaven skal afleveres I Fronter som et link. Deadline: i aften kl. 23.59. Tip: hvis du bruger æ, ø, å i dine tekster, skal du indsætte følgende meta-tag I din kode: - ellers vises disse tegn forkert.

20 Inden torsdag skal du have installeret browserne Chrome, Firefox og Safari på din computer, hvis du ikke allerede har dem ;)