On-line produktion TDDC61

Transkript

1 On-line produktion TDDC61

2 Hej! Jakob Bandelin Kognitionsvetenskap, interaktionsdesign, webbdesign On-line produktion (GDK), Elektronisk publicering (MT), Webbprogrammering (SVP), Webbpublicering, iphoneprogrammering.

3 Kursupplägg Kursvärdering 2014 HTML CSS Teckenkodning FTP. Agenda

4 Kursmål identifiera de processförutsättningar som on-line projekt bedrivs under välja och argumentera för interaktiva kommunikationssätt i en on-line produktion summera och jämföra möjligheter hos olika kanaler i ett multikanalprojekt bedöma och beställa teknikproduktion genomföra viss teknikutveckling.

5 Kursupplägg 5 föreläsningar (en per vecka) Fö #3 kommer vara video 5 laborationer (U, G), 4 hp, grupper om två Projektuppgifter (U, 3, 4, 5), 2 hp, individuella.

6 Laborationer 1. Enkel Webbsida (HTML, CSS) 2. Webbplats (CSS3, RWD, SEO) 3. Animation (CSS3, JS) 4. Quiz (PHP) 5. Fotoalbum (jquery, bildoptimering) 4 hp 100 h 20 h per laboration

7 Inlämningsuppgifter Portfolio (2hp 50 h) Förberedelser: förebildsanalys, målgruppsanalys, persona Design: skisser, wireframe, moodboard Implementation: HTML, CSS, PHP, jquery Utvärdering: Argumentation, reflektion

8 Litteratur Niederst-Robbins, Learning Web Design (2012) Litteratur ej obligatorisk Många gillar den - en del tycker den är onödig Länkar i anslutning till uppgifter och föreläsningar.

9 Kursvärdering 2014 (och andra ändringar) Bättre labbhandledning Rättningsmall och snabbare återkoppling Bättre/mer/tidigare info om projektupplägg Lägger till mer CSS3 och webbdesign Lite högre tempo från start (större lab 1) Vissa ändringar i labbserien.

10 Frågor? Önskemål? bild från

11 HTML HyperTextMarkupLanguage ett språk för att märka upp en text med taggar (etiketter) om vad det är för sorts innehåll hyperlänkar till andra dokument - www

12 HTML5 Ersätter HTML4 (från 1997) Rekommenderas från 2014 Separerar innehåll från presentation Semantiskt korrekt taggning Sökmotorsvänligt Tillgänglighet Bra för utveckla för olika plattformar.

13 HTML och design HTML5 ger inte så snygga webbsidor HTML5 handlar om innehåll Använder CSS för presentation.

14 HTML DEMO

15 Teckenkodning Finns olika sätt lagra tecken digitalt charset, encoding Vanligast: iso och utf-8 Spara i samma teckenkodning som ni angett i filen att den är skriven som (eller vice versa) <meta charset="utf-8">.

16 Validering För denna kurs HTML5 Börja överst med första felet Läs felmeddelanden Rätta ett fel i taget Ibland skapar ett tidigt fel flera fel senare i koden.

17 Färger RGB - Röd Grön Blå Additativ färgblandning Hexadecimala A B C D E F #FFFFFF & #FFF # & #000 #F00 #0FF #999 #693 #063 #F0C RGB(255, 0, 221).

18 Färger

19 CSS Cascading Style Sheet Hur innehåll presenteras Cascade ärver och skriver över Bild från

20 Boxmodellen border margin height padding Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. width Visad bredd = width + padding + margin + border Bild från

21 Boxmodellen Innehåll på webbsidor är uppbyggda av boxar (i boxar) Varje element/tagg har egen box. Bild från

22 Enheter i CSS em, ex, px, pt, pc, in, mm, cm, % De vanligaste: px - pixel em - M (1em 10px) ex - x (1ex 6px) % Bild från

23 Syntax för CSS selector { property: value; } T ex p{ color: #f00; } /* Kommentar */ Bild från

24 Ordning för Cascade Senare gäller över tidigare kommandon Mer specifika gäller över allmänna Om inte annat sägs så ärvs styling från de som ligger utanför/ovanför Parent - child Bild från

25 Demo Bild från

26 FTP File Transfer Protocol remote-und.ida.liu.se SFTP, port 22 katalog: www-pub

27 Cyberduck DEMO

28 Labbgrupper Halvklass (A och B). Laborationer görs i grupper om två studenter. Anmäl er grupp i WebReg: Pass märkta med A eller B är med handledare (1-2 st) och är halvklass. Endast den gruppen på de passen - för studiemiljö (luft och ljud) och tid med handledare Övriga tider först till kvarn. En dator per grupp. Om det är handledare kommer stå i schemat. Idag är det grupp A och grupp B

29 Lab 1 Gör en webbsida om ett land eller en stad eller annat ämne Använd HTML-taggar för innehållet Rubriker, listor, tabell, med flera Använd CSS för att få en design som passar Färg, layout, typsnitt Validera koden Publicera på webbserver (Ok att hämta text om land/stad från t ex Wikipedia.)

30 Inför nästa föreläsning Läs om HTML och CSS i Learning Web Design eller motsvarande Kolla igenom kursupplägget och lämna önskemål Jobba med labb 1 Fixa så att FTP funkar för ditt konto.

31 www-allmänbildning youtube.com twitter.com tumblr.com pinterest.com vimeo.com startpage.com gogoduck.com opera.com google.com/chrome mozilla.com/firefox

32 Tack och lycka till! bild från