HTML5 ja CSS 3 designereille

Hyvää huomenta! - Agenda

• HTML5 uudet komennot pähkinänkuoressa • Parempi semantiikka - parempi hakukonenäkyvyys • Käyttöliittymän taittamisen uusia keinoja

• Teuvo Väisänen • valmentaja / kouluttaja / Web-asiantuntija • Tieturilla 1998

29.4.2013

Web standardit - HTML

• HTML:n tehtävä on kuvata dokumentin rakennetta ja kertoa sisällön semantiikka eli merkitys

• HTML eli HyperText Markup Language • http://www.w3.,g/html/

29.4.2013

HTML 2.0 v. 1995

HTML 4.01 v. 1999

XHTML 1.0 v. 2000

HTML5 v. 2004 2014

Web standardit - CSS

• CSS:n rooli on huolehtia dokumentin ulkoasusta

• CSS eli Cascading Style Sheets • http://www.w3.,g/Style/CSS/

29.4.2013

CSS 1 v. 1996

CSS 2 v. 1998

CSS 2.1 v. 2007

CSS 3 tekeillä v. 2005

Web standardit - JavaScript

• JavaScriptin rooli on käyttöliittymän toiminnallisuus ja käyttökokemuksen parantaminen

• JavaScript • https://wiki.mozilla.,g/JavaScript:Home_Page

• ECMAScript (ECMA 262) • http://www.ecma-international.,g/publications/standards/Ecma-

262.htm

29.4.2013

JavaScript v. 1995

ECMAScript v. 1997

ECMA 262 3rd rev. v. 1999

ECMA 262 5th rev. V. 2009

Web standardit yhteistoiminnassa

29.4.2013

Progressiivinen parantaminen Progressive Enhancement

Armelias heikentyminen Merciful Degradation

HTML sisältö - content

CSS ulkoasu - presentation

JavaScript käyttäytyminen - behaviour

Mitä HTML5 tuo tullessaan designerille?

• Yksinkertaisempi syntaksi vähemmän kirjoitettavaa ;)

• Uusia tageja, uusia attribuuteja lisää semantiikkaa

• Uudestisyntyneitä "vanhoja" tageja

• Poistuneita komentoja ja attribuutteja

• Koodin validointi! http://www.w3.org/TR/html5-diff/#new-elements

29.4.2013

Poimintoja HTML5:stä - Section komennot • section

represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

• article represents an independent piece of content of a document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly related to the rest of the page.

• hgroup represents the header of a section.

• header represents a group of introductory or navigational aids.

• footer represents a footer for a section and can contain information about the author, copyright information, etc.

• nav represents a section of the document intended for navigation.

29.4.2013

Nykytilanne taitossa

<div id=”wrapper”> </div>

29.4.2013

<div id=”header”></div>

<div id=”footer”></div>

<div id=”content”>

</div>

<div id=”nav”>

</div>

HTML5 taitossa

<div id=”wrapper”> </div>

29.4.2013

<header></header>

<footer></footer>

<div id=”content”>

</div>

<nav>

</nav>

Lisää semantiikkaa koodiin - Microdata

• Wikipedia: "Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and Microformats."

• Suurimpien hakukoneiden tukema sanasto http://schema.org/

• Google näyttää hyvin koodatun sisällön visuaalisemmin hakutulossivuilla, Rich Snippets!

29.4.2013

Yhä vaan lisää semantiikkaa - WAI-ARIA

• Lähde W3C "WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities."

• WAI-ARIA roles http://www.w3.org/TR/wai-aria/appendices#quickref

• Toteutettu mm. jQueryUI:ssa esim. http://jqueryui.com/tabs/

29.4.2013

Käyttöliittymän taittaminen

• Web-sivuston ulkoasun hallintaa vuosien on saatossa tehty monin eri tavoin

• Ulkoasu - selaimen tehdasasetukset määräävät alkutilanteen ulkoasussa • Aivan alussa selaimen asetuksista voitiin määrittää HTML:n ulkoasua,

tekstin kokoa, fonttia ja väriä • HTML taulukko

• Sitten tuli CSS - ulkoasukieli • CSS 2.1 asettelutekniikat

• block layout, designed for laying out documents • inline layout, designed for laying out text • table layout, designed for laying out 2D data in a tabular format • positioned layout, designed for very explicit positioning without much

regard for other elements in the document

29.4.2013

CSS asettelun kikat - hackit • Box Model

• margin, border, padding • negative margins jne.

• Float

• clear • clearfix

• Position relative/absolute/static

• CSS table

• display

• CSS 3 Media Queries • Responsive Design

29.4.2013

"Oikea" asettelu tulossa CSS 3:ssa

• CSS Flexible Box Layout Module Editor's Draft, 11 April 2013

• CSS Grid Layout Editor's Draft, 25 April 2013

• CSS Regions Module Level 3 Editor's Draft 22 April 2013

• CSS Exclusions and Shapes Module Level 3 W3C Working Draft 3 May 2012

29.4.2013

Flexible Box

• lähde: W3C - http://www.w3.org/TR/css3-flexbox/

29.4.2013

Flexible Box demo

• http://localhost/tieturi-html-css-ui/flexbox-demo/3col-start2.htm

• Opera.com artikkelit: • http://dev.opera.com/articles/view/flexbox-basics/ • http://dev.opera.com/articles/view/advanced-cross-browser-

flexbox/ • http://dev.opera.com/articles/view/animating-flexboxes-the-

lowdown/ • http://dev.opera.com/static/articles/2013/animating-flexboxes/flexbox-

transition-js/flexbox-transition-javascript.html

29.4.2013

CSS Grid

• "CSS Grid Layout provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors"

• Lähde: W3C http://dev.w3.org/csswg/css-grid/

29.4.2013

CSS Regions Module Level 3

• CSS Regions Module Level 3 Editor's Draft 22 April 2013 http://www.w3.org/TR/css3-regions/

• Adobe:

• http://html.adobe.com/webplatform/layout/regions/

29.4.2013

CSS Exclusions and Shapes Module Level 3

• CSS Exclusions and Shapes Module Level 3 W3C Working Draft 3 May 2012 http://www.w3.org/TR/css3-exclusions/

• Adobe: • http://html.adobe.com/webplatform/layout/exclusions/

29.4.2013

Kiitos! Poimintoja Tieturin kursseista • HTML ja CSS

(Perusteet haltuun, täällä opetellaan jo suoraan HTML5:ttä) http://bit.ly/154B284

• HTML ja CSS - käyttöliittymän taittaminen (Käyttöliittymän toteuttamisen eri tekniikat plus hieman kuvankäsittelyä) http://bit.ly/ZZfdhq

• HTML5 ja CSS 3 (Tiedon ja taidon päivityspaketti, mitä uutta olemassa/tulossa) http://bit.ly/15UMjHq

• JavaScript -ohjelmointi

(Perusteet haltuun) http://bit.ly/17ttusS

• JavaScript -ohjelmoinnin jatkokurssi http://bit.ly/13GuOqa

• jQuery - helpompaa JavaScript -ohjelmointia (Maailman käytetyimmän JavaScript -kirjaston perusteet haltuun) http://bit.ly/18fskQm

29.4.2013