Webbprogrammering - 725G54
HTML/CSS Foreläsning I
Om föreläsaren Sahand Sadjadee, Universitetsadjunkt
[email protected] Web, Android, Enterprise Apps, Computer-Human Interaction, Security, Developing Pedagogical Apps, Social Networks, Software Testing.
Agenda ● ● ● ● ● ●
Kursmål och -upplägg HTML/CSS Teckenkodning Validering Lab 1.
Kursmål ● ● ● ● ●
exemplifiera problem och möjligheter med att använda en webbaserad applikation förklara fördelarna med att separera strukturbeskrivning (HTML) och layout (CSS) för dokument vid publicering på WWW implementera en fungerande databasdriven webbplats genom att använda HTML, CSS samt grundläggande funktioner i PHP och SQL (MySQL) utveckla och dokumentera ett mindre PHP-program designa ER-modeller för en enkel databas.
Kursinnehåll ● ● ● ● ●
allmänt om Internet och webben grundläggande databaser: ER-modellering, datatabeller, SQL (MySQL). HTML, CSS, layout, och formulär grundläggande webbprogrammering i PHP: datatyper, funktioner, filer, databaskoppling
Kursupplägg 7,5 hp ≈ 5 veckor
Laborationer, 5 hp, U/G
heltidsstudier ≈ 200 h
• Parvis, ~125 h
Föreläsningar, 6 + 2 st HTML, CSS, PHP, ERD, jQuery, Bootstrap, MySQL, RWD
1. 2. 3. 4. 5. 6.
Enkel webbplats Quiz Fotoalbum ERD Gästbok/klotterplank Filmdatabas
• Projekt, 2,5 hp, U/G/VG Individuellt, ~65 h Egen Databasdriven webbplats
Laborationsgrupper ● ● ● ●
Två studenter per grupp. Anmäl er via WebReg - https://www.ida.liu.se/webreg3/725G54-2015-1/LAB Grupper om tre studenter är generellt inte ok. Ensamlabbare ok i enstaka fall.
Kurslitteratur ●
Webbutveckling med PHP och MySQL av Montathar Faraon. Studentlitteratur.
●
Niederst Robbins, J. (2012). Learning Web
Design. O'Reilly. ●
Padron-McCarthy, T., Risch, T. (2005).
Databasteknik. Studentlitteratur.
Lab 1 ● ● ● ●
Webbplats om något - TV-serie, författare, sportlag. Design som tydligt passar för innehåll. Lägg in innehåll, bilder. Idag fixa så att allt funkar - redigera och publicera.
Camedin
Camedin
http://www.camedin.com/live/cc7fcb6254924d00a5df39ef3422ba3a
HTML ( Hyper Text Markup Language ) ●
●
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
HTML
HTML5 ● ● ● ● ● ● ●
Ersätter HTML4 (från 1997) Recommended från 2014 Separerar innehåll från presentation Semantiskt korrekt taggning Sökmotorsvänligt med hjälp av Semantic Elements Bra för tillgänglighet Bra för att utveckla för olika plattformar.
HTML och design ● ● ●
Innehåll separat från presentation Ger inte så snygga webbsidor - Man kan/bör inte skriva in styling i HTML-koden Använder CSS för presentation (färg, form,layout)
Block- & inline-element ● ● ● ●
Block - delar upp innehåll (en eller flera rader) - p, h1, h2, div Inline - del av rad med text. - a, img, em, span Inline måste stå innanför ett block Block får för det mesta inte stå innanför annat block.
Block- & inline-element
https://www.ida.liu.se/codela/as/725g54/lecture01playout
Teckenkodning ● ● ● ● ●
Finns olika sätt lagra tecken digitalt charset, encoding Vanligast (funkar bäst): utf-8 Spara i samma teckenkodning som ni angett i filen att den är skriven som (eller vice versa) .
Teckenkodning
http://www.w3schools.com/html/html_charset.asp
Validering ● ● ● ● ● ●
http://validator.w3.org För laborationerna gäller 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.
CSS ● ● ●
Cascading Style Sheet Hur innehåll presenteras: färg, layout, typsnitt, design Cascade ≈ ärver och skriver över.
Syntax för CSS ● ●
selector { property: value; } T ex: ○
●
p { color: #f00; }
/* Kommentar */
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
Färger ● ● ● ● ● ● ●
RGB - Röd Grön Blå Additativ färgblandning Hexadecimala 0123456789ABCDEF #FFFFFF & #FFF #000000 & #000 #F00
● ● ● ● ● ●
#0FF #999 #693 #063 #F0C RGB(255, 0, 221).
Färger
Färger
http://yizzle.com/whatthehex/
Boxmodellen
Visad bredd = width + padding + margin + border
Enheter i CSS ● ●
em, ex, px, pt, pc, in, mm, cm, % De vanligaste: ○ ○ ○ ○
px - pixel em - M (1em ≈ 10px) ex - x (1ex ≈ 6px) %
CSS Demo
https://www.ida.liu.se/codela/as/725g54
Separation av innehåll och presentation ●
Enklare skapa, underhålla och återanvända ○
●
Speciellt när man börjar bygga dynamiska webbplatser
Laddningstider blir kortare.
Validering av CSS ● ●
http://jigsaw.w3.org/css-validator/ Kolla även hur det ser ut i olika fönsterstorlekar, webbläsare och operativsystem.
class vs id ● ● ●
Båda används för att peka ut element Id kan/får bara finnas ett element Class kan vara samma för flera olika element.
CSS3 ● ● ●
● ●
Stöds till stor del av nyare webbläsare Fungerar dåligt eller inte alls i äldre webbläsare. Experimentella CSS-koder används även av olika webbläsare. ○ -moz ○ -webkit ○ -o För kursen är CSS3 och experimentella kommandon ok Labbar och projekt ska fortfarande se ok ut i webbläsare som ej stöder CSS3.
Text - tips ● ● ● ● ● ● ●
65 tecken per rad är bra riktmärke för läsbarhet Brödtext på 10-13px Tänk på kontrast och färger Blanda inte för många typsnitt Radhöjd på 1,2-1,5 ger ofta bra resultat Vänsterjusterad text är lättast att läsa Marginaljusterad blir ofta snyggast.
Layout ● ● ● ●
●
Lättare att förstå Layout Känns bra att titta på (medvetet/omedvetet) Säljer Grid ○ Horisontella och vertikala linjer (synliga eller tänkta) ○ Upprepa samma mått Gyllene snittet, Rule of thirds, med flera.
Färgseende ● ●
●
För design använd inte lika färger för att särskilja Enkel kontroll är att se om design funkar som svart-vitt (gråskalor) Då visar det sig också om det är tillräcklig kontrast i allmänhet.
Sökmotorsoptimering ● ● ● ● ● ●
Det bästa är att ha ett bra innehåll som andra är intresserade av Länkar från andra webbplatser avgör väldigt mycket Taggar som ger mycket “poäng” att ha sökord inom: , ..., Sökord tidigt ger mer än sökord långt ner Rena webbadresser ger mer poäng bättre att sluta på / än ?x=123124&page=qwerty www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf
Sökmotorsoptimering
Viktigast för SEO
Skapa något som andra vill länka till.
Inför nästa föreläsning
Gör klart labb 1!
Tack och lycka till!
