Information Visualization – NOTES 20150926

  1. NOTES FROM Lazaris, Louis. “Object-oriented CSS.” 2011. Accessed August 20.
  2. NOTES FROM Lazaris Haverbeke, Marijn. The Document Object Model. In Eloquent Javascript. Retrieved from http:// (Go to the notes of the second reading)

Object-oriented CSS

How can we improve the user experience?

  • By CSS – overlooked
  • Javascript and other areas

The Principles of OOCSS

PURPOSE: to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

It’s based in two main principles:

Separation of Structure From Skin Link

Simplifying styles separating the properties that are different, and joining the ones that are the same in only one class (“skin”=). It would mean less code and a possibility for further reuse.

Separation of Containers and Content

Try not to use styles that are dependent on other elements (ei. #footer h3), and make different classes so that the same styles are reusable in different parts of the document.

The Media Object

It can contain a media element of any size, and the media object itself has common base styles that help avoid needless repetition.

The Benefits Of OOCSS

Faster websites

Less styles repeated in the CSS file, means smaller file sizes, and thus faster downloading of those resources. Although the HTML file may be larger.

Everytime you reuse something of the CSS file, you’re creating new styled elements with zero lines of CSS code

Maintainable stylesheets

With OOCSS, there will be easy to maintain set of modules, where the natural cascade plays an important role. You will be working in existing styles, and extending those styles based on existing rule sets. The new CSS wil be minimal (easier to understand if a new developer enters in the project).

Points Worth Noting

You can still use IDs

  • Just don’t use IDs in selectors
  • Use them in your HTML for JavaScript hooks and fragment identifiers

Some Guidelines For Implementation

  • Avoid the descendent selector (i.e. don’t use .sidebar h3)
  • Avoid IDs as styling hooks
  • Avoid attaching classes to elements in your stylesheet (i.e. don’t do header or h1.title)
  • Except in some rare cases, avoid using !important
  • Use CSS Lint to check your CSS (and know that it has options and method to its madness)
  • Use CSS grids


Eloquent JavaScript: A Modern Introduction to Programming

The Document Object Model

Normal structure: DOM


Data have a tree structure when it has a branching structure. Trees are used to maintain sorted sets of data because elements are easier to read or find in a sorted tree than in a sorted array.

A typical tree has different kinds of nodes:

  • Variables, values and application nodes. Application nodes always have children, whereas variables and values are leaves, or nodes without children.
  • The same goes for the nodes: each DOM node object has a nodeType property, which contains a numeric code that identifies the type of node.
    • Regular elements: value 1. Document.ELEMENT_NODE
    • Text nodes: value 3. Document.TEXT_NODE
    • Comments: value 8. Document.COMMENT_NODE

The leaves are text nodes, and the arrows indicate parent-child relationships between nodes.

The standard

The DOM wasn’t designed for JavaScript, it tries to define a language-neutral interface that can be used in other systems as well—not just HTML but also XML, which is a generic data format with an HTML-like syntax.

While with DOM you need to write one by one each element (and their values), JavaScript allows us to create our own abstractions. In fact, they’re easier to write, and clearer to read.

Moving through the tree

DOM nodes contain a wealth of links to other nearby nodes. The following diagram illustrates these:

  • Every node has a parentNode property that points to its containing node
  • Every element node (node type 1) has a childNode property that points to an array-like object holding its children

In theory, you could move anywhere in the tree using just these parent and child links. But JavaScript also gives you access to a number of additional convenience links.

  • The firstChild and lastChild properties point to the first and last child elements or have the value null for nodes without children. leaves
  • Similarly, previousSibling and nextSibling point to adjacent nodes, which are nodes with the same parent that appear immediately before or after the node itself.
    • For a first child, previousSibling will be null (there is nothing before it), and for a last child, nextSibling will be null (there is nothing after it).

Finding elements

  • Careful with document.body because the program makes the assumption of how the structure of the document is (a structure that may change)
  • Text nodes are created even for the whitespaces between nodes.
  • ElementsByTagName
    • All element nodes have a getElementsByTagName method, which collects all elements with the given tag name that are descendants (direct or indirect children) of the given node and returns them as an array-like object.

var link = document.body.getElementsByTagName(“a”)[0];



/*variable link, collect elements in body of the document with tag ‘a’ (link) + WHY HREF, is it not enough with “a”??*/


  • getElementById
    • To find a specific single node, you can give it an id attribute and use getElementById instead.

<p>My ostrich Gertrude:</p>

<p><img id=”gertrude” src=”img/ostrich.png”></p>


var ostrich = document.getElementById(“gertrude”);



/*variable ostrich, collect elements that has the ID “Gertrude”


  • getElementsByClassName
    • searches through the contents of an element node and retrieves all elements that have the given string in their class

Changing the document

Almost everything about the DOM data structure can be changed. Methods:

  • removeChild – it removes the given child node from the document
  • appendChild – To add a child, it puts it at the end of the list of children
  • insertBefore – it inserts the node given as the first argument before the node given as the second argument.
  • replaceChild – used to replace a child node with another one. It takes as arguments two nodes: a new node and the node to be replaced. The replaced node must be a child of the element the method is called on. Note that both replaceChild and insertBefore expect the new node as their first argument.





var paragraphs = document.body.getElementsByTagName(“p”);

document.body.insertBefore(paragraphs[2], paragraphs[0]);


/*variable paragraphs, collect elements in the body of the document that are a “p”; INSERT PARAGRAPH 3 [2] BEFORE PARAGRAPH 1 [0]???/

Creating nodes

  • createTextNode – gives us a type 3 DOM node (a text node), which we can insert into the document to make it show up on the screen.

The node list returned by a method like getElementsByTagName (or a property like childNodes) is live. It is updated as the document changes.

  • Elt – creates an element node and treats the rest of its arguments as children to that node.

function elt(type) {

var node = document.createElement(type);

for (var i = 1; i

/*Problems reading – why for? What I =1; i< arguments.length; 1++* mean/


When calling an attribute, HTML ones can be used, but sometimes it is necessary to make your own attribute names and use getAttribute and setAttribute methods

<p data-classified=”secret”>The launch code is 00000000.</p>

<p data-classified=”unclassified”>I have two feet.</p>


var paras = document.body.getElementsByTagName(“p”);, function(para) {

if (para.getAttribute(“data-classified”) == “secret”)




There is one commonly used attribute, class, which is a reserved word in the JavaScript language. For historical reasons—some old JavaScript implementations could not handle property names that matched keywords or reserved words—the property used to access this attribute is called className. You can also access it under its real name, “class”, by using the getAttribute and setAttribute methods.


The layout is used to draw the document

Block elements: p, h1… that take up the whole width of the document

Inline elements: a, strong…

  • offsetWidth and offsetHeight – give you the space the element takes up in pixels.
  • clientWidth and clientHeight – give you the size of the space inside the element, ignoring border width
  • getBoundingClientRect – to find the precise position of an element on the screen. It returns an object with top, bottom, left, and right properties, indicating the pixel positions of the sides of the element relative to the top left of the screen.
    • If you want them relative to the whole document, you must add the current scroll position, found under the global pageXOffset and pageYOffset variables.

Laying out a document in Javascript can be quite a lot of work, making the page run really slow.


A style attribute may contain one or more declarations, which are a property (such as color) followed by a colon and a value (such as green). When there is more than one declaration, they must be separated by semicolons, as in “color: red; border: none”.

  • The block tag will end up on its own line since block elements are not displayed inline with the text around them.
  • The last tag is not displayed at all—display: none prevents an element from showing up on the screen.

JavaScript code can directly manipulate the style of an element through the node’s style property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to in order to change a particular aspect of the element’s style.

<p id=”para” style=”color: purple”>

Pretty text



var para = document.getElementById(“para”);

console.log(; = “magenta”;


/*Variable PARA, get element with ID “para” and change color to magenta1*/

In Javascript, there are no dashes, font-family –> style.fontFamily

Cascading styles

It is possible to target things other than tag names in CSS rules. A rule for .abc applies to all elements with “abc” in their class attributes. A rule for #xyz applies to the element with an id attribute of “xyz” (which should be unique within the document).

Query selectors

The querySelectorAll method, which is defined both on the document object and on element nodes, takes a selector string and returns an array-like object containing all the elements that it matches.

  • the object returned by querySelectorAll is not It won’t change when you change the document.

<p>And if you go chasing

<span class=”animal”>rabbits</span></p>

<p>And you know you’re going to fall</p>

<p>Tell ‘em a <span class=”character”>hookah smoking

<span class=”animal”>caterpillar</span></span></p>

<p>Has given you the call</p>


function count(selector) {

return document.querySelectorAll(selector).length;


console.log(count(“p”));           // All


// → 4

console.log(count(“.animal”));     // Class animal

// → 2

console.log(count(“p .animal”));   // Animal inside of

// → 2

console.log(count(“p > .animal”)); // Direct child of

// → 1

/*Variable COUNT, get length of the selector… */

  • querySelector method (without the All part) works in a similar way – This one is useful if you want a specific, single element. It will return only the first matching element or null if no elements match.

Positioning and animating


Math.cos and Math.sin are useful for finding points that lie on a circle around point (0,0) with a radius of one unit. Both functions interpret their argument as the position on this circle, with zero denoting the point on the far right of the circle, going clockwise until 2π (about 6.28) has taken us around the whole circle. Math.cos tells you the x-coordinate of the point that corresponds to the given position around the circle, while Math.sin yields the y-coordinate. Positions (or angles) greater than 2π or less than 0 are valid—the rotation repeats so that a+2π refers to the same angle as a.




Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s