...
- Bert Bos, W3C Style Activity Lead and
- Eva Kasal, Freelancer (Ranskalainen CSS-opettaja ja kehittäjä)
klo 10.00 tutoriali alkaa
Kalvot online: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/
Esitys aloittaa stabilseista nykyjuttuista ja etenee yhä kokeellisempiin uusin CSS-esimerkkeihin.
(Puhujat mumisevat vahvalla aksentilla, ovat selvästi ns. "koodarinörttejä".)
Tutoriali taitaa painottua koodin kokeilemiseen, joka ei välity hirveän hyvin raporttiin.
Koodiesimerkki 1: Useita päällekkäisiä taustakuvia sivulla tai elementillä, jolloin toista niistä voi venyttää ja toista ei. Taustoja voi nyt myös määritellä erilaiseksi eri div-elementteihin, tai vaikka table-määreeseen n:th-child määreellä. Tai toinen tausta voi skrollata yhden alueen (divin) mukana ja toinen pysyy paikallaan.
Edelliset taustaesimerkkikoodit joita kokeilla: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-backgrounds.html
Osa esimerkkikoodeista toimivat vain uusimmalla Opera-versiolla (kuten esim. "nth-child"in background-position), sanovat vetäjät. Omat aikaisemmat kokemukseni taas suosittelisi mozillan nightly buildin asentamista kokeilua varten: http://nightly.mozilla.org/ (joka yö laitetaanuusin kehitysversio ladattaviin tuolta.)
Tässä huoneessa vajaa 50 kuuntelijaa, ja huone aika täynnä. Koodia näytetään ja selitettän ja ihmiset kokeilevat niitä läppäreillään, etenevät kuitenkin niin nopeasti ettei ns. varsinaista kokeilua / oppimista voi täällä tehdä.
Tärkeä huhu: kaikki selaimet aikovat luopua "browser prefix":stä, eli esim. -webkit- -koodi kokeellisen CSS-määreen edessä. Jatkossa hyvin pian tuettaisiin vain varsinaista CSS-koodimuotoa.
(Mental note itselle: nämä kaikki esimerkit päätyvät syksyn Merkkauskielet-kurssille.)
Reunat, eli Border-kokeilua. Koodit tutustumista & kokeilua varten täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-borders.html
Venytettävät kehyskuvat ovat hienoja, mutta vaatii kyllä myös esim. kykyä osata suunnitella kuva jota venytetään kehykseksi (jos haluaa saada hyvännäköistä aikaiseksi). Sen sijaan border-radius esimerkki tuolla on todella hieno, kannattaa tutustua miten eri kulmamääreillä saa hienoa aikaiseksi.
Sarakkeita, eli Multi-column
Sarakkeiden välit voi määritellä omilla määreillään, esim. eri värisiksi kuin muu sivu. Sarakkeita voi täyttää eri tavoin, esim. eka sarake täyttyy alas asti, mutta muut ei. Uusia ominaisuuksia suunnitteilla, mutta on teknisesti vaikea toteuttaa esim. kahdelle ensimmäiselle sarakkeelle ja viimeiselle eri määritykset kuin muille sarakkeille. Parhaiten sarake-säännöt toimivat tällä hetkellä Opera -selaimessa versiosta 11 lähtien.
Mediakyselyt, Media Queries
Tarkoitettu sivun muokkaamiseen erilaiseksi eri alustoille, esim. kännykälle ja pöytäkoneelle erilaiset tyylimääreet. Esimerkkinä toiminnasta voi katsoa esim: http://bostonglobe.com/ ja pienentää / suurentaa ikkunaa, sivun ulkoasu reagoi siihen. Esimerkit täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-media-queries.html Myös esityksen kalvot käyttävät mediakyselyjä, presentation mode käyttää eri tyylimääreitä kuin tavallien sivun katsominen.
Mielenkiintoinen pointit miten iPhone hajoitti "handheld" -määreen kännyköille, se nimittäin väittää olevansa pöytäkone ("screen") eikä mobiililaite ("handheld"). Siksi html-koodiin pitää iphoneja varten lisätä:
<meta name=viewport content="width=device-width">
jonka jälkee myös ne seuraavat medikyselyjä. (Oisko tuo riittävä koodipätkä? Pitää kokeilla puhelimella myöhemmin.)
"Valitsimet", eli Selectors
Näillä kohdistetaan tyylimääreet mahdollisimman tarkkaan tiettyyn kohtaan, mutta samalla tarvittaessa myös yleisesti koko sivulle. Koodiesimerkit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-selectors.html
Hyödyllinen on esim. koodiesimerkki jolla saadaan sivun kaikki linkit muotoiltua erinäköiseksi kuin muu sivu / muu teksti. Lisätkää tähän vaikka kuva alkuun (12px padding vasempaan reunaan ja 10pix kokoinen kuva sinne.)
Värit
Värejä voi nykyään määritellä myös HSL:n avulla (rgb:n, hexan ja keywordin lisäksi.) HSL liittyy väriympyrään. HSL:ään voidaan lisätä myös alpha, jolloin se ottaa neljä arvoa: väri, saturaatio, luminance ja alpha, esim: hsla(20, 90%, 50%, 0.3)
Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-color.html
Color Scheme Designer palvelua kehuttiin ja kokeiltiin esimerkissä, tällä saa koko sivun vääriskaalan helposti ja hyvännäköiseksi määriteltyä: http://colorschemedesigner.com/
Fontit
Tähän kuuluu myös varjostukset esim. tekstiin tai laatikoihin. Jos lisäät eksoottisia fontteja sivullesi, toistaiseksi se pitää lisätä useassa eri formaatissa, näissä.
- eot microsoftin tukema
- woff firefoxille, avoin w3c standardi joka toivottavasti kohta toimii kaikissa selaimissa
- svg iphone ja ipadille (ne ei tue mitään muita fonttiformaatteja)
Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-box-text-shadow-fontface.html
Yleisökysymys:
Voiko kirjainten sisälle vaikuttaa, vastaus: ei, et voi lisätä esim. keltaista kirjaimen sisälle.
Lyhyt kagvitauko, 5min.
Ekan päivän perusteella, ei pelkästään kahvitauko vaan muutenkin, niin aikataulut kusee täällä. Eivät ole ihan yhtä "pro" organisojia kuin jenkit olivat vuonna 2010.
Transforms
Tällä voidaan väännellä ja muokata 2d ja 3d -onjekteja (lähinnä kai kuvia) sivulla. Tähän kuuluu Translate, scale, rotate ja skew -määreet. 3D muunnokset lisää yhden ulottuvuuden muokkauksiin, tätä varten pitää määritellä sivulla jokin vanhempi (parent) jonka suhteen elementtiä sivulla voi 3d-vääntää. Parent voi olla esim taustalla oleva kuva.
Jotta esimerkkikoodit toimisivat, tarvitsee tosiaan Operan uusimman version, joskus jopa kehitysversion, esimerkit:
http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transform-2d.html Muista demoissa klikata ylhäältä oikea transformaatio päälle. Katsoka esim. näyttävää perspektiivi esimerkkiä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_perspective_origin.html
Tai katsokaa tätä kuvaa:http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/images/cadrillage_rubick_cube.png
tuolla yhdellä pienellä kuvalla on rakennettu aika vähällä koodilla tämä:http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_cube.html
huh-huh, vaikuttavaa!
CSS Transitions
Transitions eli muutokset mahdollistavat esim. liikkeen, väri- tai muun muutoksen sivulla. Muutokset liittyvät usein johonkin tapahtumaan sivulla, kuten esim. että vie hiiren johonkin kohtaan sivua.
Demoja & esimerkkikoodia: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transitions.html
Animaatio, Animation
Animaation avulla voi määritellä muutoksen/liikkeen elementille. Tarvitaan keyframeja ja muutoksia. Nämä esimerkit toimivat vain webkit-selaimissa (Safari tai Chrome).http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-animations.html
"Taittaminen CSS:llä. Grid Template Layout
Tähän satsataan / tätä kehitetään tällä hetkellä. Voidaan määritellä ulkoasupohja sivun ulkoasulle (sisältäen sarakkeet, menut, ja muut layoutit). Tällä hetkellä kun määritellään gridi, niin ei voi käyttää semanttisesti merkityksellisiä nimiä, vaan jokainen eri alue pitää määritellä vain omalla kirjaimellaan (kaikki a-alueet ovat samantapaisia keskenään ja b:t myös keskenään.) Piste tarkoittaa että kyseinen alue gridissä pysyy aina tyhjänä.
Esimerkkejä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-grid-template.html
Alueita, Regions
Kun on gridin märitellyt, niin jokaiselle alueelle voi määritellä oman tyylinsä. Täten region (alue) on esim sivulla oleva yksi tietty sarake, laatikko sivulla, tai jokin muu alue sivulla. (Kokeellista, kaikki tämä ei toimi vielä.) Nämä alueet tuntuvat olevan uusi tapa muotoilla eri alueet sivulla omanlaisikseen. Eiköhän tästäkin ole hyötyä kunhan kehittyy lisää. Tämä tarkoitus on tukea varsinkin (webbi)kirjojen julkaisua tulevaisuudessa.http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-regions.html
Yleisesti: tällä hetkellä kehitteillä ja keskeneräisenä vaikuttaisi olevan juuri taittamiseen liittyviä CSS-juttuja.
Flexbox
Graafinen taitto / graafinen layoutti sivulle. Tätä on kehitetty varsinkin käyttöliittymien suunnittelua ajatellen. Tästä on olemassa vasta luonnos, eli selainvalmistajat eivät ole implementoineet tätä vielä millään tapaa, mutta FireFix tukee täkä omassa XUL -kielessään. Tällä voidaan määritellä esim. sivun rautalankimallin osien käyttäytymistä sivulla, esim: kaikki napit pysyy paikallaan, mutta niiden alla oleva kuva saa joustaa sivun koon mukaan.http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-flexbox.html
Muuta
- Muotoja, Shapes
Perinteien sivun laatikkomalli perustuu juuri laatikoihin, tulevaisuudessa muodon voi kenties määritellä itse (pallo, kolmio, jne.) - Tekstin sijoittuinen sivulle ja katkaisu on myös työn alla.
Jos yllä olevia haluaa testata pitää ladata koneelleen Adoben JavaScript demot, ne ei toimi verkon yli.
Kalvot: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-exclusions.html
Muiden työn alla olevien ehdotuksien joukkoon kuuluu mm. verkkonopeuteen perustuva mediakysely.
LOPPU / FIN