Drumbeat/p2pu/Open Web Competency Map/dot file

graph G {

// First version .dot file for Map of the open web
// This is based on Chris Blizzard's sketch
// Version 0.1 - 5 July 2010 (Philipp Schmidt)

  e [shape=ellipse, label="HTML", style=bold];
  f [shape=ellipse, label="What is markup?"];
  g [shape=ellipse, label="Basics of Layout"];
  h [shape=ellipse, label="Document order vs. display order"];
  e -- f; 
  e -- h;

  ff1 [shape=ellipse, label="Plugins", style=bold];
  e -- ff1;
  ff2 [shape=ellipse, label="Flash"];
  ff3 [shape=ellipse, label="Silverlight"];
  ff1 -- ff2;
  ff1 -- ff3;

  gg3 [shape=ellipse, label="DOCTYPE"];
  gg4 [shape=ellipse, label="<header>"];
  e -- gg3;
  e -- gg4;

  g [shape=ellipse, label="Basics of Layout"];
  e -- g; 
  gg2 [shape=ellipse, label="body = page"];
  gg5 [shape=ellipse, label="<table>"];
  gg6 [shape=ellipse, label="<h1>"];
  gg7 [shape=ellipse, label="<div>"];
  gg8 [shape=ellipse, label="<a>"];
  gg9 [shape=ellipse, label="<img>"];
  gg10 [shape=ellipse, label="<form>"];
  g -- gg2;
  g -- gg5;
  g -- gg6;
  g -- gg7;
  g -- gg8;
  g -- gg9;
  g -- gg10;

  gg11 [shape=ellipse, label="HTML5"];
  e -- gg11;

  gg12 [shape=ellipse, label="Canvas (drawing, interacting with control)"];
  gg13 [shape=ellipse, label="WebGL (OMG Complex)"];
  gg11 -- gg12;
  gg11 -- gg13;

i [shape=ellipse, label="Box & Inline"];

  e -- i;

j [shape=ellipse, label="Display types"];
k [shape=ellipse, label="Float"];
l [shape=ellipse, label="Flow"];

  i -- j;
  i -- k;
  i -- l;

m [shape=ellipse, label="Box Model"];

  i -- m;

n [shape=ellipse, label="Padding"];
o [shape=ellipse, label="Margin"];
p [shape=ellipse, label="Etc"];

  m -- n;
  m -- o;
  m -- p;

q [shape=ellipse, label="CSS", style=bold];

  q -- m;

r [shape=ellipse, label="Z-index"];
s [shape=ellipse, label="overflow"];
t [shape=ellipse, label="color"];
u [shape=ellipse, label="pseudotypes, selectors"];
v [shape=ellipse, label="id"];
w [shape=ellipse, label="class"];
x [shape=ellipse, label="browser specific (css + namespaces)"];
y [shape=ellipse, label="inheritance"];
z [shape=ellipse, label="manipulating style"];

  q -- r;
  q -- s;
  q -- t;
  q -- u;
  q -- v;
  q -- w;
  q -- x;
  q -- y;
  q -- z;

aa1 [shape=ellipse, label="Standards", style=bold];

  aa1 -- q [label = "CSS 1,2,3+"];
  aa1 -- e [label = "HTML 3,4,5, XHTML"];
  aa1 -- c1 [label = "ECMA Script"];

c1 [shape=ellipse, label="JavaScript", style=bold];
d1 [shape=ellipse, label="Loops & flow control"];
e1 [shape=ellipse, label="JavaScript Libraries"];
ee1 [shape=ellipse, label="XHR (content types)"];
ee2 [shape=ellipse, label="objects/ prototypes"];
ee3 [shape=ellipse, label="callbacks"];
ee4 [shape=ellipse, label="local storate"];

  c1 -- d1;
  c1 -- e1;
  c1 -- ee1;
  c1 -- ee2;
  c1 -- ee3;
  c1 -- ee4;

f1 [shape=ellipse, label="jQuery (plugins, use cases)"];
i1 [shape=ellipse, label="clojo (use cases)"];
k1 [shape=ellipse, label="YUI (animation + CSS)"];

  e1 -- f1;
  e1 -- i1;
  e1 -- k1;

cc1 [shape=ellipse, label="DOM"];
  c1 -- cc1;

cc2 [shape=ellipse, label="Manipulating content"];
cc3 [shape=ellipse, label="elements"];
cc4 [shape=ellipse, label="trees"];
cc5 [shape=ellipse, label="loading content"];
cc6 [shape=ellipse, label="form data"];
  cc1 -- cc2;
  cc1 -- cc3;
  cc1 -- cc4;
  cc1 -- cc5;
  cc1 -- cc6;



m1 [shape=ellipse, label="What is a web page", style=bold];

n1 [shape=ellipse, label="What is a URL?"];
  m1 -- n1;

o1 [shape=ellipse, label="How is a web page downloaded?"];
  n1 -- o1;

p1 [shape=ellipse, label="Images"];
r1 [shape=ellipse, label="stylesheet"];
s1 [shape=ellipse, label="script"];

  o1 -- p1;
  o1 -- e;
  o1 -- r1;
  o1 -- s1;

t1 [shape=ellipse, label="Server"];
  m1 -- t1;
  o1 -- t1;
  t1 -- j2;

u1 [shape=ellipse, label="When can you force a download"];
v1 [shape=ellipse, label="When are things downloaded for you?"];
  t1 -- u1;
  t1 -- v1;

w1 [shape=ellipse, label="Caching of resources"];
x1 [shape=ellipse, label="IndexDB"];
y1 [shape=ellipse, label="Localstorage"];
z1 [shape=ellipse, label="HTML5 AppCache + manifest"];
  v1 -- w1;
  v1 -- x1;
  v1 -- y1;
  v1 -- z1;

a2 [shape=ellipse, label="Events for online/offline (JS)"];
  z1 -- a2;

b2 [shape=ellipse, label="View Source (important practice)"];
  m1 -- b2;

d2 [shape=ellipse, label="How does source map to what is displayed on the page?"];
e2 [shape=ellipse, label="Firebug demo"];
f2 [shape=ellipse, label="How do I change a page?"];
g2 [shape=ellipse, label="Local hacks (Greasemonkey, Jetpacks)"];
  d2 -- e2;
  d2 -- f2;
  d2 -- g2;
  o1 -- d2; 

n2 [shape=ellipse, label="Practical tasks and questions", style=bold];
j2 [shape=ellipse, label="How do I set up a server?"];
jj1 [shape=ellipse, label="Wordpress"];
jj2 [shape=ellipse, label="Drupal"];
  j2 -- jj1;
  j2 -- jj2;
l2 [shape=ellipse, label="How do I set up a database"];
m2 [shape=ellipse, label="How do you create a mashup?"];
mm1 [shape=ellipse, label="What is a canvas?"];
mm2 [shape=ellipse, label="What's a video?"];

l2 -- n2;
m2 -- n2;
mm2 -- n2;
mm1 -- n2;
n2 -- j2;

hh2 [shape=ellipse, label="Browser Extensions", style=bold];
hh3 [shape=ellipse, label="Chrome Extensions"];
hh4 [shape=ellipse, label="Firefox Extensions"];
hh5 [shape=ellipse, label="Add-ons"];
hh6 [shape=ellipse, label="Jetpacks"];
  hh2 -- hh3;
  hh2 -- hh4;
  hh4 -- hh5;
  hh4 -- hh6;

}