On-line produktion TDDC61
Hej! Jakob Bandelin jakob.bandelin@liu.se Kognitionsvetenskap, interaktionsdesign, webbdesign On-line produktion (GDK), Elektronisk publicering (MT), Webbprogrammering (SVP), Webbpublicering, iphoneprogrammering.
Kursupplägg Kursvärdering 2014 HTML CSS Teckenkodning FTP. Agenda
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.
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.
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
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
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.
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.
Frågor? Önskemål? bild från
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
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.
HTML och design HTML5 ger inte så snygga webbsidor HTML5 handlar om innehåll Använder CSS för presentation.
HTML DEMO
Teckenkodning Finns olika sätt lagra tecken digitalt charset, encoding Vanligast: iso-8859-1 och utf-8 Spara i samma teckenkodning som ni angett i filen att den är skriven som (eller vice versa) <meta charset="utf-8">.
Validering http://validator.w3.org 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.
Färger RGB - Röd Grön Blå Additativ färgblandning Hexadecimala 0 1 2 3 4 5 6 7 8 9 A B C D E F #FFFFFF & #FFF #000000 & #000 #F00 #0FF #999 #693 #063 #F0C RGB(255, 0, 221).
Färger http://yizzle.com/whatthehex/
CSS Cascading Style Sheet Hur innehåll presenteras Cascade ärver och skriver över Bild från http://www.flickr.com/photos/_at/
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 http://www.flickr.com/photos/_at/
Boxmodellen Innehåll på webbsidor är uppbyggda av boxar (i boxar) Varje element/tagg har egen box. Bild från http://www.flickr.com/photos/_at/
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 http://www.flickr.com/photos/_at/
Syntax för CSS selector { property: value; } T ex p{ color: #f00; } /* Kommentar */ Bild från http://www.flickr.com/photos/_at/
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 http://www.flickr.com/photos/_at/
Demo Bild från http://www.flickr.com/photos/_at/
FTP File Transfer Protocol remote-und.ida.liu.se SFTP, port 22 katalog: www-pub http://www-und.ida.liu.se/~abcde123/
Cyberduck DEMO
Labbgrupper Halvklass (A och B). Laborationer görs i grupper om två studenter. Anmäl er grupp i WebReg: https://www.ida.liu.se/webreg3/tddc61-2015-1/lab1 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 10-12 och grupp B 13-15.
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.)
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.
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 www.apple.com/safari
Tack och lycka till! bild från