Skip to content

Latest commit

 

History

History
137 lines (96 loc) · 6.81 KB

les4.md

File metadata and controls

137 lines (96 loc) · 6.81 KB

#Les 4: You are the CSS to my HTML De tweede les vormgeving gaat over Selectors, Pseudo elements en Pseudo Classes. Krachtige methodes om je pagina dynamisch te stylen.
We gaan aan de slag met de Selectors, Pseudo classes, Hovers, Focus en Pseudo elements.

##Docenten David de Vries
Vasilis van Gemert
Joost Faber

##Lesdoelen

  • Begrip van selectors, pseudo classes, pseudo elements en deze toepassen
  • Gebruik en begrip van CSS3 transities (discussie)
  • Deeltoets 2 criteria uitleggen

##Programma (200 minuten)

  1. College (30)
  2. Discussie (30)
  3. Aan de slag - in groepjes van 4, 10 minuten (120)
  4. Herkansing Deeltoets 1
  5. Terugkijken / Deeltoets 2 uitleggen / Feedback so far (20)

###1 College - 30 minuten (30/200)

De tweede les vormgeving gaat over Selectors, Pseudo classes, Pseudo-elements. Krachtige methodes om je pagina dynamisch te stylen.
Een selector is de basis voor het stijlen van je pagina. In CSS zijn verschillende selectors waar je dynamisch mee kan vormgeven. In CSS 2 kon dit ook al, maar IE ondersteund dit niet.

Website met Selector voorbeelden:
http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/ http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/ http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ http://css-tricks.com/child-and-sibling-selectors/

Voorbeeld before - after ‘omdat het kan’
Trans-fi-nan-ci-eel http://transfinancieel.nl/

###2 Discussie - 30 minuten (60/200)

Artikelen:
Understanding CSS3 transitions by Dan Cederholm
How to use CSS3 Pseudo classes By Richard Shepherd

Vragen Artikel over CSS3 transitions is gebaseerd op het boekje CSS for webdesigners (dit boekje hebben we ook gebruikt voor de lessen over CSS3 en vormgeving)

We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. They certainly won’t replace existing technologies like Flash, JavaScript, or SVG CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute). Browser support: As I mentioned earlier, transitions were initially developed by WebKit, and have been in Safari and Chrome since version 3.2, but Opera supports them as well in version 10.5 and support has been promised in Firefox 4.0. Why not use JavaScript instead?: You might be wondering, with not all browsers supporting (or at least promising support for) CSS Transitions, why not use a JavaScript solution to handle the animation? Popular frameworks such as jQuery, Prototype, and script.aculo.us have enabled animations via JavaScript that work cross-browser for some time now.

What makes pseudo-classes so useful? that they allow you to style content dynamically. (CSS1 :link :visited :hover :active) A number of powerful new pseudo-selectors (16 are listed) enable us to select elements based on a range of new criteria. And they are broken down into four groups: structural pseudo-classes, pseudo-classes for the states of UI elements, a target pseudo-class and a negation pseudo-class.

  1. Structural Pseudo-Classes - E:ROOT E:NTH-CHILD(N) E:NTH-LAST-CHILD(N) :NTH-OF-TYPE(N) :NTH-LAST-OF-TYPE(N) :FIRST-OF-TYPE AND :LAST-OF-TYPE
  2. The Target Pseudo-Class - :TARGET
  3. The UI Element States Pseudo-Classes - :ENABLED AND :DISABLED, :CHECKED
  4. Negation Pseudo-Class - :NOT

Cross-Browser Compatibility: You had to ask, didn’t you! Unbelievably, Internet Explorer 8 (and earlier) doesn’t support any of these selectors, whereas the latest versions of Chrome, Opera, Safari and Firefox all do. Before your blood boils, consider the following solutions.

SO, SHOULD WE START USING CSS3 PSEUDO-SELECTORS TODAY?

###3 Aan de slag - 120 minuten (180/200)

Materiaal Laptop en internet
Opstelling Werkeilanden waar twee duo’s aan kunnen zitten

####Opdracht 1 - Artikel pagina met selectors - 60 minuten http://dabblet.com/gist/1864659

####Opdracht 2 - Formulier pagina met selectors - 60 minuten http://dabblet.com/gist/1865805

###4 Herkansing Deeltoets 1

###5 Terugkijken / Deeltoets 2 / Feedback - 20 minuten (200/200)

Terugkijken

Wat hebben we geleerd?

Lesdoelen behandelen en stof herhalen
Begrip van selectors, pseudo classes, pseudo elements en deze toepassen
child-, sibling-, en andere selectors
Gebruik en begrip van CSS3 transities (discussie)

Vorige week
Fonts gebruiken, Effecten, Opacity en Transparancy (aan de slag) border-radius, box- en text-shadow, transitions
transforms is optioneel voor deeltoets 2

Deeltoets 2

De artikelpagina moeten worden opgemaakt door gebruik te maken van (direct) child-, sibling-, en andere selectors (zonder classes en ID's). Voor de formulierpagina moeten onderdelen van het formulier worden opgemaakt met border-radius, box- en text-shadow, transitions, attribute-selectors en pseudo-elements. Transforms zijn optioneel maar mogen in allebei de documenten gebruikt worden.

Wat kan je verwachten?
Voorbeelden van pagina’s voor de volgende toets:
Artikelpagina
http://dabblet.com/gist/1864548
Formulier
http://dabblet.com/gist/1865228

Planning: Mondeling tijdens les 5 in duo’s

Resource over CSS3
https://developer.mozilla.org/en/CSS/CSS_Reference

Inspiratie (voor Typografie)
Font face
http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/
Fonts, schermen en leesbaarheid
http://www.informationarchitects.jp/en/100e2r/ http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/ http://www.google.com/webfonts http://webdesignledger.com/inspiration/21-examples-of-inspiring-typography-in-web-design

Hoe ver ben je nu met de eindopdracht?
2 pagina’s in Html > deeltoets 1
styling CSS3 > deeltoets 2
layout en interactie = responsive > eindopdracht

Feedback (sticky notes)

Feedback op werkwijze
Les programma, lesstructuur, discussiesessie, werkdruk?
Feedback op deeltoets 1
Mondeling duidelijk? Over de feedback?
Anders?
Honger? Dorst? none-of-the-above?