====== Web Development ======
Good web application development separates the three //S//s: structure, style, and scripting. See this [[webdev:intro]].

Helpful Bookmarklets
  * [[http://dojotoolkit.org/~david/recss.html|ReCSS]]
  * [[http://slayeroffice.com/tools/modi/v2.0/modi_help.html|DOM Inspector (DOMI)]]
  * View Names and IDs



====== Information (Structure)======

  * [[webdev:wart|Web Arcana Research Tool (WART)]]---Bookmarklet to upload web content to a wiki as research notes.

====== Presentation (Style) ======
The [[http://www.w3.org/TR/REC-CSS2|Cascading Style Sheets, level 2 (CSS2) Specification]] is where you'll find most of the technical information you need.  I usually find the CSS2 property index the best quick reference.

  * CSS2 [[http://www.w3.org/TR/REC-CSS2/propidx.html|Property Index]]


===== Colors =====
Although there are a few helpful color scheme applications, they all seem to emphasize choosing hues without paying attention to necessary contrasts in saturation and value.

  * [[http://www.colorjack.com/sphere/|ColorJack Sphere]]
  * [[http://kuler.adobe.com/|kuler]]
  * [[http://wellstyled.com/tools/colorscheme2/index-en.html|[ws] Color Scheme Generator 2]]

Also, stick with web-safe colors.

















































====== Behavior (Scripting) ======

Flowcharts

  * http://phpflow.berlios.de/phpflow/doc/manual.html

Graphs

  * Try this: {{chartfiles.zip|Zipped files from}} http://www.onlinegolfstats.org/graphs/ 

Test jpgraph format plugin:  //(Currently disabled.)//

<format jpgraph_line>
// Create the graph. These two calls are always required
$graph = new Graph(320,200,"auto");
$graph->SetScale("textlin");
// Some data
$ydata = array(10,3,8,9,5,1,9,13,5,7);

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor("blue"); 

// Add the plot to the graph
$graph->Add($lineplot);
</format>


<format jpgraph_line>
include "/hsphere/local/home/waggy/jpgraph/src/jpgraph_scatter.php";
include "/hsphere/local/home/waggy/jpgraph/src/jpgraph_regstat.php";

// Original data points
$xdata = array(1,3,5,7,9,12,15,17.1);
$ydata = array(5,1,9,6,4,3,19,12);

// Get the interpolated values by creating
// a new Spline object.
$spline = new Spline($xdata,$ydata);

// For the new data set we want 40 points to
// get a smooth curve.
list($newx,$newy) = $spline->Get(50);

// Create the graph
$graph = new Graph(320,200);
$graph->SetMargin(30,20,40,30);
$graph->title->Set("Natural cubic splines");
//$graph->title->SetFont(FF_ARIAL,FS_NORMAL,12);
$graph->subtitle->Set('(Control points shown in red)');
$graph->subtitle->SetColor('darkred');
$graph ->SetMarginColor('lightblue');

//$graph->img->SetAntiAliasing();

// We need a linlin scale since we provide both
// x and y coordinates for the data points.
$graph->SetScale('linlin');

// We want 1 decimal for the X-label
$graph->xaxis->SetLabelFormat('%1.1f');

// We use a scatterplot to illustrate the original
// contro points.
$splot = new ScatterPlot($ydata,$xdata);

// 
$splot->mark->SetFillColor('red@0.3');
$splot->mark->SetColor('red@0.5');

// And a line plot to stroke the smooth curve we got
// from the original control points
$lplot = new LinePlot($newy,$newx);
$lplot->SetColor('navy');

// Add the plots to the graph and stroke
$graph ->Add($lplot);
$graph ->Add($splot);
</format>

<format jpgraph_line>
include ("/hsphere/local/home/waggy/jpgraph/src/jpgraph_scatter.php");

$numpoints=52;
$k=0.05;

// Create some data points
for($i=-$numpoints+1; $i<0; ++$i) {
    $datay[$i+$numpoints-1]=exp($k*$i)*cos(2*M_PI/10*$i)*14;
    $datayenv[$i+$numpoints-1]=exp($k*$i)*14;
    $datax[$i+$numpoints-1]=$i;
}

for($i=0; $i<$numpoints; ++$i) {
    $datay[$i+$numpoints-1]=exp(-$k*$i)*cos(2*M_PI/10*$i)*14;
    $datayenv[$i+$numpoints-1]=exp(-$k*$i)*14;
    $datax[$i+$numpoints-1]=$i;
}

// Setup the basic parameters for the graph
$graph = new Graph(640,200,"auto");
$graph->SetScale("intlin");

$graph->SetShadow();
$graph->SetBox();
$graph->title->Set("Impulse Example 4");
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// Set some other color then the boring default
$graph->SetColor("lightyellow");
$graph->SetMarginColor("khaki");

// Set legend box specification
$graph->legend->SetFillColor("white");
$graph->legend->SetLineWeight(2);

// Set X-axis at the minimum value of Y-axis (default will be at 0)
$graph->xaxis->SetPos("min");    // "min" will position the x-axis at the minimum value of the Y-axis

// Extend the margin for the labels on the Y-axis and reverse the direction
// of the ticks on the Y-axis
$graph->yaxis->SetLabelMargin(12);
$graph->xaxis->SetLabelMargin(6);
$graph->yaxis->SetTickSide(SIDE_LEFT);
$graph->xaxis->SetTickSide(SIDE_DOWN);

// Add mark graph with static lines
$line = new PlotLine(HORIZONTAL,0,"black",2);
$graph->AddLine($line);

// Create a new impuls type scatter plot
$sp1 = new ScatterPlot($datay,$datax);
$sp1->mark->SetType(MARK_SQUARE);
$sp1->mark->SetFillColor("red");
$sp1->mark->SetWidth(3);

$sp1->SetImpuls();
$sp1->SetColor("blue");
$sp1->SetWeight(1);
$sp1->SetLegend("Non-causal signal");

$graph->Add($sp1);

// Create the envelope plot
$ep1 = new LinePlot($datayenv,$datax);
$ep1->SetStyle("dotted");
$ep1->SetLegend("Positive envelope");

$graph->Add($ep1);
</format>