UPPRIFJUNFYRIRLESTUR 24, 21. NÓVEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, KJARNI@GMAIL.COM

mailto:kjarni@gmail.com

HTML

TIM BERNERS-LEE

Feðraði vefinn hjá CERN 1989—1991

Tengdi saman HyperText, TCP og DNS

HTMLHyperText Markup Language

Kom fyrst fram á sjónarsviðið 1993

Útgáfur 1.0–4.01 byggðar á SGML

XHTML byggt á XML

HTML5 byggir ekki á SGML en er samhæft tilbaka(backwards compatible)

http://www.w3.org/community/webed/wiki/HTMLhttp://en.wikipedia.org/wiki/HTML

http://www.w3.org/community/webed/wiki/HTMLhttp://en.wikipedia.org/wiki/HTML

ELEMENTSEinstakur hluti af vefsíðu og býr til tré með öðrum hlutum

Inniheldur önnur element eða texta nóðu

Hvert element táknar merkingu, er semantic

Halló heimur

element sem skilgreinir setningu(paragraph) með texta nóðuna „Halló heimur“

TÖGElement byrja á tagi, t.d.

Element þurfa ekki, en ættu, að enda á loka tagi, t.d.

Ef element hefur skilgreind attribute eru þau sett ábyrjunar tagið

ATTRIBUTEHeiti-gildis par sem breytir elementi, t.d.

Gildið þarf ekki að vera umlukið gæsalöppum en það eræskilegt til gildið sé skýrt

Sum attribute þarf aðeins að skilgreina með heiti, t.d.

MERKINGARFRÆÐIÞað er sterklega mælst til þess að markup í HTML skjali séaðeins notað til að tjá merkingu en ekki framsetningu

Framsetning á gögnum er stýrt með CSS og fáum við þvíhreina skiptingu á milli efnis og útlits

Mörg element til sem skilgreina merkingu en annars erhægt að nota attributes

AFHVERJUMERKINGARFRÆÐI?

Aðskilnaður á milli merkingar og útlits gerir manniauðveldara að breyta öðru án þess að hafa áhrif á hitt

Einfaldar viðhald, breytingar eru dýrar

Góð merkingarfræði getur aukið aðgengi að vef

csszengarden.com

http://www.csszengarden.com/

SECTIONING – KAFLAR OGSVÆÐI skilgreinir hvar megin efni síðu er, einu sinni persíðu

er fyrir efni sem stendur sjálfstætt innan síðu,t.d. athugasemd

er fyrir efni sem er tengt efni í kringum element,t.d. úrdrátt sem gert er hærra undir höfði

heldur utan um leiðarkerfi fyrir síðu

skilgreinir kafla á síðu, heldur utan um svipaðefni, oftast með fyrirsögn

AFHVERJU AÐGENGI?Viljum ekki mismuna fólk vegna fötlunar

Lagasetning framtíðarinnar mun banna okkur aðmismuna fólki vegna fötlunar á vefnum

Getur verið mjög dýrt að gera aðgengilegt eftir á

Samlegðaráhrif! Vefurinn okkar verður betri fyrir alla

WCAG 2.0W3C staðall: Web Content Accessibility Guidelines 2.0

Listi af tilmælum til að gera vefi aðgengilegri, skiptist ífjögur prinsipp

Þrjár tegundir:

A, minnsta stig

AA

AAA, öll skilyrði uppfyllt

http://www.w3.org/TR/WCAG20/

http://www.w3.org/TR/WCAG20/

SPURNINGAR

Hvernig varð vefurinn til?

SPURNINGAR

Hvað er HTML?

SPURNINGARHver er munurinn á XHTML og HTML?

Afhverju klikkaði XHTML?

html, head og body

Hvað er það og hvernig tengist það?

Hvað fer hvert?

Merkingarfræði

Hvað er merkingarfræði?

Afhverju merkingarfræði?

SPURNINGARElement

Hver eru helstu sectioning elementin og hvenær eruþau notuð?

Fyrirsagnir og outline

Töflur

Form

SPURNINGARAðgengi

Afhverju aðgengi?

Hvað er WCAG?

Hver eru WCAG prinsippin?

Hvað er alt texti?

Hvernig getum við aukið aðgengi á formum?

Hvað er ARIA?

Hvað er SEO, leitarvélabestun?

Hvernig eru samlegðaráhrif með aðgengismálum og SEO?

CSS

HVAÐ ER CSS?Cascading Style Sheets

CSS er style sheet language sem lýsir framsetningu á skjaliskrifuðu í markup language, t.d. HTML, XHTML, XML ogSVG

Hannað til að aðskilja efni frá útliti

http://en.wikipedia.org/wiki/Stylesheet_languagehttp://en.wikipedia.org/wiki/Cascading_Style_Sheets

http://en.wikipedia.org/wiki/Stylesheet_languagehttp://en.wikipedia.org/wiki/Cascading_Style_Sheets

LENGDIRNákvæmum einingum: in, cm, mm, pt, pc, px

Hlutfallslegum einingum:

em – 1 em = skilgreind breidd í pt (t.d. 12pt) á letri nemaþegar stærð leturs er skilgreint, þá stærð foreldris

ex – 1 ex = hæðin á x í leturgerð

CSS3 skilgreinir rem (relative em) sem er alltaf m.v. rót enekki foreldri

http://www.w3.org/TR/css3-values/#font-relative-lengths

http://www.w3.org/TR/css3-values/#font-relative-lengths

DÆMI* öll element

div öll div

div p öllu p sem eru afkomendur p

div > p öll p sem eru börn div

p + p öll p sem eiga p sem fyrra systkyni

div.foo öllu div með class foo

a:hover öll a sem er verið að hovera á

div#foo öll div með id foo

div[foo="bar"] öll div með attribute foo = bar

SPECIFICITY – SÉRTÆKNIFyrir hvern selector er reiknað sértækni gildi sem er áforminu (a,b,c,d) þar sem:

a = 1 ef style á elementi en ekki í reglu, annars 0

b = fjöldi id skilgreininga

c = fjöldi annara attribute‘a og gervi-klasa

d = fjöldi elementa og gervi-elementa

Gildinu er svo skeytt saman í tölu sem er sértækni

!important skeytt aftan við yfirlýsingu hefur líka áhrif

SPECIFICITY – DÆMIli.foo {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

#foo {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

CASCADE – „FLÓÐIГ1. Allar skilgreiningar fyrir element fundnar og raðað eftir:

1. Skilgreiningum user agents (yfirleitt vafri)

2. Skilgreiningum notanda

3. Skilgreiningum höfundar (yfirleitt vefs)

4. Skilgreiningum höfundar merktar með !important

5. Skilgreiningum notanda merktar með !important

6. Raðað eftir sértækni

7. Raðað eftir skilgreiningar röð þar sem seinna skilgreintvinnur

GILDI REIKNUÐSkilgreint gildi

Ef „flóðið“ gefur okkur gildi, notum það

Annars, erft gildi

Annars, upphafs

Reiknað gildi – reiknað úr hlutfallslegum gildum

Notað gildi – reiknað eins langt og hægt er án þess aðbirta, t.d. hlutfallsleg breidd m.v. foreldri

Raun gildi – gildi notað við birtingu, t.d. þarf að rúna tölurað einhverjum aukastaf

BOX MODEL

http://www.w3.org/TR/CSS2/box.html

http://www.w3.org/TR/CSS2/box.html

BOXIÐGetum skilgreint breidd og hæð með width og height

Vídd boxs er: Vídd + left&right margin + left&right border+ left&right padding

Getur leitt til vandræða þar sem útlit notar hlutfallslegarstærðir og absolute stærðir, sérstaklega í border

CSS3 skilgreinir box-sizing: border-box; þar sem aðeinsmargin er tekið með í reikninginn

Hugsum um lang flest í CSS sem box!

Dæmi

http://localhost:8000/examples/04.css/box-model.html

NORMAL FLOW – EÐLILEGTFLÆÐI

Block – element sem eru sniðin sjónrænt sem blokkir (t.d.málsgreinar) sem fylla upp í breidd foreldris

Inline – element sem forma ekki blokkir heldur er efnidreift í línur

Display eigindi stillir hvernig element hegðar sér:

block, inline, inline-block (blokk dreift í línu), list-item,none

STAÐSETNINGPosition eigindi stillir hvernig element hegðar sér:

static – eðlilegt flæði

relative – hlutfallslegt í eðlilegu flæði

absolute – skilgreinum algjörlega hvar box birtist

fixed – skilgreinum útfrá glugga hvar box er fast

Offset eigindi skilgreina staðsetningu ef position er ekkifixed.

top, bottom, left eða right

Neikvæð gildi leyfð

FLOATSSkilgreint með float: left, right eða none

Ekki í eðlilegu flæði, heldur er boxi „fleytt“ til hægri eðavinstri m.v. línu sem það er í

Ef það er ekki nóg lárétt pláss er boxi ýtt niður þar til þaðkemst fyrir

ÞRIÐJA VÍDDINBox eru ekki aðeins staðsett í tvívíðu rúmi, þau liggja líka áz-ás

Staðsetning á z-ás ræðst af stacking order

Getum átt við með z-index: n; sem setur stacking ordereftir okkar höfði

http://www.w3.org/TR/CSS2/visuren.html#z-index

Dæmi

http://www.w3.org/TR/CSS2/visuren.html#z-indexhttp://localhost:8000/examples/05.css/zindex.html

#1 SVEIGJANLEGT UMBROT,BYGGT Á GRIND

#2 SVEIGJANLEGAR MYNDIROG MIÐLAR

#3 CSS MEDIA QUERIES

SVEIGJANLEG GRINDNotum hlutfallsleg gildi, ekki nákvæm

Ef umgjörð minnkar, þá minnkar allt hlutfallslega innanhennar

Getum fest umgjörðina til að festa allt innihald

Notum yfirleitt max-width á umgjörð til að setjahámarksbreidd

Dæmi

http://localhost:8000/examples/responsive/rwd-grid.html

SVEIGJANLEGAR MYNDIR OGMIÐLAR

Getum fest við umgjörð þeirra og látið skalast

Getum bæði minnkað/stækkað eða kroppaðar

Hægt að gera fyrir flest allt efni

nýtt element sem auðveldar notkun ámyndum

Dæmi http://embedresponsively.com/

http://responsiveimages.org/

http://localhost:8000/examples/responsive/rwd-media.htmlhttp://embedresponsively.com/http://responsiveimages.org/

MEDIA QUERIESÁkveðum „brotpunkta“ í hönnun og breytum flæði

Stillum media query á

max-width – skilgreinum reglur upp að þeirri vídd

min-width – skilgreinum reglur frá þeirri vídd

min-pixel-ratio – útfrá upplausn

orientation – skilgreinum reglur útfrá stöðu skjás

Hægt að and-a saman

Dæmi

http://localhost:8000/examples/responsive/rwd-mq.html

MOBILE FIRSTByrjum á upplifun í minni tækjum

Neyðir þig til að taka ákvarðanir

Þegar þú ferð „upp” á við – allt plássið í heiminum!

PROGRESSIVEENHANCEMENT

Byrjum á frábæru efni

Setjum fallegt útlit ofan á

Bætum virkni við einsog stuðningur er til staðar

PROGRESSIVEENHANCEMENT

SHIM, POLYFILL & FALLBACKShim (eða shiv) er virkni sem „stungið“ er inn og veitirvirkni frá nýju API í gömlu umhverfi

Polyfill er kóði eða plugin sem veitir þér aðgang að virknisem þú gerir ráð fyrir að vafrinn bjóði upp á. Þ.e.a.s. shimfyrir vafra API

Fallback er þegar við skilgreinum gildi sem við erum vissum að allir styðji en yfirskrifum síðan

CSS3CSS3 þróað í einingum

CSS3 eru allar viðbætur og breytingar á CSS eftir CSS2.1

Verður aldrei CSS4

SPURNINGARHvað er CSS?

Hver staðlar CSS?

Hvernig viljum við tengja CSS og HTML?

Hvernig lítur CSS út, hvernig er syntaxinn?

Hvað er shorthand í CSS?

Hvernig vinnum við með liti í CSS?

Hvernig vinnum við með lengdir í CSS?

Fastar lengdir

Hlutfallslegar lengdir og leturstærð

SPURNINGARHvað eru CSS selectors

Geta lesið

Geta lesið úr og sagt til um við hvað þeir eiga

Hvernig tengjum við saman (" ", ">", "+")

Gervi element

Gervi klasar

Attribute selectorar

Hvað er sértækni, specificity?

Hvað er cascade í CSS og hvernig virkar það?

SPURNINGARHvernig vinnum við með letur?

Hvernig breytum við bakgrunni?

Box model

Hvað er box modelið?

Hvernig reiknum við box modelið?

Hvað eru margin, padding og border?

Hvaða áhrif hefur box-sizing: border-box?

SPURNINGARVisual formatting model

Hvað eru block og inline box?

Hvað er eðlilegt flæði?

Hvernig virka position static, relative, absolute og fixed?

Hvað er containing box?

Hvernig virka floats?

Hvernig virkar z-index?

Hvernig virkar overflow?

SPURNINGARResponsive

Á hverju byggir responsive web design?

Hvað er grind?

Hvað er sveigjanleg grind?

Hvað eru CSS media queries?

Hvernig gildi notum við?

Hvernig vinnum við með myndir og miðla?

Hvernig er að prófa responsive vefi?

SPURNINGARHvað eru shim, polyfill og fallback?

Hvað eru vafraforskeyti og hvað gera þau?

Hvað er CSS3?

Hvernig er CSS3 unnið?

Hvernig vinnum við með transitions?

Hvaða nýjir selectorar eru í CSS3?

Hvað er flexbox?

SPURNINGARHvað er CSS reset?

Hvað er mobile first?

Hvað eru CSS preprocessorar?

Hvað eru CSS frameworks?

Hvað eru style guides & pattern libraries?