Difference between revisions of "Courses/Design & Technique-Essential Web Design/04"

From Publication Station
Line 1: Line 1:
<slidy theme="a" />


==styling links==
 
=styling links=
css uses a pseudo-class for the different states of a link
css uses a pseudo-class for the different states of a link


Line 10: Line 10:
For each of them, normally a rule is written.
For each of them, normally a rule is written.


=CSS position, display, float=
==position==
==position==
'''important'''
'''IN PROGRESS'''


(leaving for next class)
CSS property <code>position</code> decides how to position elements.
CSS property position chooses alternative forms to for position elements.


The most common are
The most common are
* static - the default
* relative - the position is determined in relation to its neighbors  
* relative - the position is determined in relation to its neighbors  
* absolute - the position is determined in relation to its ancestors elements or html page body, if has no parent elements.
* absolute - the position is determined in relation to its ancestors elements or html page body, if has no parent elements.
Line 22: Line 25:


See square examples in https://developer.mozilla.org/en-US/docs/Web/CSS/position
See square examples in https://developer.mozilla.org/en-US/docs/Web/CSS/position
==centering elements==
http://www.w3.org/Style/Examples/007/center.en.html






==css for typography==
== Display ==
@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block


==essential typography properties==
* none / hidden - turns to '''none''' (hides) the display of the element.
* font-size:  ''body in pt, rest of elements in em''
* inline - horizontal line of elements, but width and hide will be define by its content.
* font-height: regular or bold
* block - vertical stack of elements.
* font-style
* inline-block - horizontal line of elements, but they can have a width and height.
* font-family
* color
* text-align
* line-height
* letter-spacing: increases or decreases the space between characters( negative values are allowed)
* text-shadow


https://developer.mozilla.org/en-US/docs/Web/CSS/display


==Using fonts==  
==centering elements==
{| class="wikitable" border="1"
http://www.w3.org/Style/Examples/007/center.en.html
|-
! '''system fonts'''
! '''custom fonts'''
|-
| ready to use
| need to load or upload
|-
| limited set
| broad range
|-
| change slightly in each user's computer
| remain the same to all users
|-
| too familiar
| fresh
|}
 
==system fonts==
System fonts are generic fonts.
* Sans­serif
* Serif
* Monospace
* Cursive
 
==system fonts example==
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
body {
  font-size: 10pt;
}
 
p {font-family: cursive;
  font-size: 3em;
}
 
p.other {font-family: sansserif}
 
span.yetanother {font-family: monospace}
    </style>
  </head>
  <body>
    <p>Cursive generict font</p>
    <p class="other">Testig another generic font.  
      <span class="yetanother">And yet another one</span>
    </p>
  </body>
</html>
</source>
 
 
==custom fonts==
''The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.'' [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @font-face]
 
==Web fonts formats==
Different font formats exist:
* Web Open Font Format (.woff)
* TrueType/OpenType (.ttf/.otf)
* Scalable Vector Graphics Fonts (.svg)
 
Currently, most browsers support these font formats, with the exception of .svg, that is only supported by Firefox. See [https://en.wikipedia.org/wiki/Web_typography#File_formats Wikipidia article] on Web fonts.
 
== use a custom font ==
To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site).
 
You can download a sample of display fonts from: http://publicationstation.wdka.hro.nl/displayfonts.zip
Containing:Amatic-Bold.ttf, AmaticSC-Regular.ttf, GrandHotel-Regular.otf, Pacifico.ttf
 
try changing the following example with other custom font
<source lang="html4strict">
<html>
<head>
  <style type="text/css">
 
    @font-face {
      font-family: "Pacifico";
      src: url("fonts/Pacifico.ttf");
    }
   
    h1 { font-family: "Pacifico", serif;
    font-weight: normal;
    }
  </style>
</head>
<body>
  <h1>This is a custom font.</h1>
</body>
</html>
</source>
==fonts and licenses==
We can use this fonts and even make a commercial (for which we receive money) website, using that font, without paying for the font.
 
It is not because the font is free (of charge), but because they are '''open'''.
 
They are released under a '''SIL Open Font License''' (OPF).
 
==SIL license==
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
 
License:
* allows fonts to be '''used, studied, modified and redistributed freely'''.
* fonts, including any derivative works, can be bundled, embedded,
redistributed and/or '''sold with any software'''.
* fonts and derivatives, however, '''cannot be released under any other type of license'''.
* requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
 
== Apache license==
http://www.fontsquirrel.com/fonts/sinkin-sans
 
==open fonts libraries==
* https://fontlibrary.org
* http://fontsquirrel.com/ 
 
==remote custom fonts==
It is possible to use custom fonts, that are not stored locally, and instead "live" in a service like Google Fonts or Open Font Library.
 
This method is:
* convenient
* easier
but, on the down-side:
* it takes more time to load the page
* the font can be removed at any point by the service 


==remote custom font example==
Using the font https://fontlibrary.org/en/font/barrio and following the "Use this font" instructions:


<source lang="html4strict">
<html>
<head>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/barrio" type="text/css"/>


  <style type="text/css">
   
    h1 {  font-family: 'BarrioRegular';
          font-weight: normal;
          font-style: normal;
    font-size: 3em;
    }
  </style>
</head>
<body>
  <h1>This is a remote custom font.</h1>
</body>
</html>
</source>




== Assignment ==
* find a text or several that you consider interesting;
* place it on a webpage.
* type-set it with CSS, so that the style either illustrates, contradicts, or is in dialog with the content.


'''Rules:'''
------
* use at least a custom font
* make use of CSS [[Courses/Design_%26_Technique-Essential_Web_Design/04#css_for_typography|essential typography properties]]
* be bold, be extreme: you can go from a legible and soothing style, to total illegible and cryptic. Most important is that the style responds to the text content. And that you have fun and find out new things while doing it.


'''Example:''' http://publicationstation.wdka.hro.nl/go/Alice.html
Book Scapes: http://www.julienlevesque.net/books-scapes/index2.html (advanced, maybe to when introduce CSS position )


==References==
* [https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/beautiful fonts with @font-face]
@andre: study and explain CSS position in next class
* [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @fontface]
https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
http://learn.shayhowe.com/html-css/positioning-content/

Revision as of 16:29, 12 September 2016


styling links

css uses a pseudo-class for the different states of a link

a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

For each of them, normally a rule is written.


CSS position, display, float

position

IN PROGRESS

CSS property position decides how to position elements.

The most common are

  • static - the default
  • relative - the position is determined in relation to its neighbors
  • absolute - the position is determined in relation to its ancestors elements or html page body, if has no parent elements.
  • fixed - like absolute, but often used to create a floating element that stays in the same position even after scrolling the page

See square examples in https://developer.mozilla.org/en-US/docs/Web/CSS/position


Display

@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block
  • none / hidden - turns to none (hides) the display of the element.
  • inline - horizontal line of elements, but width and hide will be define by its content.
  • block - vertical stack of elements.
  • inline-block - horizontal line of elements, but they can have a width and height.

https://developer.mozilla.org/en-US/docs/Web/CSS/display

centering elements

http://www.w3.org/Style/Examples/007/center.en.html




Book Scapes: http://www.julienlevesque.net/books-scapes/index2.html (advanced, maybe to when introduce CSS position ) 


@andre: study and explain CSS position in next class
https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
http://learn.shayhowe.com/html-css/positioning-content/
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/04&oldid=3537’