Skip to content

Commit

Permalink
Re-rolling the HTML
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvwilson
gvwilson committed Mar 28, 2015
1 parent 4cc593e commit e46ecfc
Show file tree
Hide file tree
Showing 17 changed files with 396 additions and 248 deletions.
12 changes: 5 additions & 7 deletions 00-setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="stylesheet" type="text/css" href="css/swc-workshop-and-lesson.css" />
<link rel="stylesheet" type="text/css" href="css/lesson.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
Expand All @@ -19,14 +17,14 @@
<![endif]-->
</head>
<body class="lesson">
<div class="container container-full-width card">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Databases and SQL</h1>
<h2 class="subtitle">Setting up</h2>
<h3 id="installation">Installation</h3>
Expand Down Expand Up @@ -85,6 +83,6 @@ <h4 id="ipython-notebook">IPython notebook</h4>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="http://software-carpentry.org/v5/js/jquery-1.9.1.min.js"></script>
<script src="http://software-carpentry.org/v5/js/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>
49 changes: 32 additions & 17 deletions 01-select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="stylesheet" type="text/css" href="css/swc-workshop-and-lesson.css" />
<link rel="stylesheet" type="text/css" href="css/lesson.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
Expand All @@ -19,29 +17,38 @@
<![endif]-->
</head>
<body class="lesson">
<div class="container container-full-width card">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Databases and SQL</h1>
<h2 class="subtitle">Selecting Data</h2>
<div id="learning-objectives" class="objectives">
<h2>Learning Objectives</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Explain the difference between a table, a record, and a field.</li>
<li>Explain the difference between a database and a database manager.</li>
<li>Write a query to select all values for specific fields from a single table.</li>
</ul>
</div>
</div>
<p>A <a href="reference.html#relational-database">relational database</a> is a way to store and manipulate information that is arranged as <a href="reference.html#table">tables</a>. Each table has columns (also known as <a href="reference.html#field">fields</a>) which describe the data, and rows (also known as <a href="reference.html#record">records</a>) which contain the data.</p>
<p>When we are using a spreadsheet, we put formulas into cells to calculate new values based on old ones. When we are using a database, we send commands (usually called <a href="reference.html#query">queries</a>) to a <a href="reference.html#database-manager">database manager</a>: a program that manipulates the database for us. The database manager does whatever lookups and calculations the query specifies, returning the results in a tabular form that we can then use as a starting point for further queries.</p>
<blockquote>
<div id="changing-database-managers" class="callout panel panel-info">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pushpin"></span>Changing database managers</h2>
</div>
<div class="panel-body">
<p>Every database manager --- Oracle, IBM DB2, PostgreSQL, MySQL, Microsoft Access, and SQLite --- stores data in a different way, so a database created with one cannot be used directly by another. However, every database manager can import and export data in a variety of formats, so it <em>is</em> possible to move information from one to another.</p>
</blockquote>
</div>
</div>
<p>Queries are written in a language called <a href="reference.html#sql">SQL</a>, which stands for &quot;Structured Query Language&quot;. SQL provides hundreds of different ways to analyze and recombine data; we will only look at a handful, but that handful accounts for most of what scientists do.</p>
<p>The tables below show the database we will use in our examples:</p>
<blockquote>
Expand Down Expand Up @@ -307,7 +314,7 @@ <h2>Learning Objectives</h2>
</tbody>
</table>
</blockquote>
<p>Notice that three entries --- one in the <code>Visited</code> table, and two in the <code>Survey</code> table --- don't contain any actual data, but instead have a special <code>-null-</code> entry: we'll return to these missing values <a href="05-null.html">later</a>. For now, let's write an SQL query that displays scientists' names. We do this using the SQL command <code>select</code>, giving it the names of the columns we want and the table we want them from. Our query and its output look like this:</p>
<p>Notice that three entries --- one in the <code>Visited</code> table, and two in the <code>Survey</code> table --- don't contain any actual data, but instead have a special <code>-null-</code> entry: we'll return to these missing values <a href="05-null.html">later</a>. For now, let's write an SQL query that displays scientists' names. We do this using the SQL command <code>SELECT</code>, giving it the names of the columns we want and the table we want them from. Our query and its output look like this:</p>
<pre class="sourceCode sql"><code class="sourceCode sql"><span class="kw">SELECT</span> family, personal <span class="kw">FROM</span> Person;</code></pre>
<table>
<thead>
Expand Down Expand Up @@ -371,7 +378,7 @@ <h2>Learning Objectives</h2>
</tr>
</tbody>
</table>
<p>Whatever casing convention you choose, please be consistent: complex queries are hard enough to read without the extra cognitive load of random capitalization. One convention is to use UPPER CASE for SQL statements, to distinguish them from tables and column names. This is the convention that we will use for this lesson.</p>
<p>You can use SQL's case insensitivity to your advantage. For instance, some people choose to write SQL keywords (such as <code>SELECT</code> and <code>FROM</code>) in capital letters and <strong>field</strong> and <strong>table</strong> names in lower case. This can make it easier to locate parts of an SQL statement. For instance, you can scan the statement, quickly locate the prominent <code>FROM</code> keyword and know the table name follows. Whatever casing convention you choose, please be consistent: complex queries are hard enough to read without the extra cognitive load of random capitalization. One convention is to use UPPER CASE for SQL statements, to distinguish them from tables and column names. This is the convention that we will use for this lesson.</p>
<p>Going back to our query, it's important to understand that the rows and columns in a database table aren't actually stored in any particular order. They will always be <em>displayed</em> in some order, but we can control that in various ways. For example, we could swap the columns in the output by writing our query as:</p>
<pre class="sourceCode sql"><code class="sourceCode sql"><span class="kw">SELECT</span> personal, family <span class="kw">FROM</span> Person;</code></pre>
<table>
Expand Down Expand Up @@ -480,17 +487,25 @@ <h2>Learning Objectives</h2>
</tr>
</tbody>
</table>
<div id="selecting-site-names" class="challenge">
<h2>Selecting Site Names</h2>
<div id="selecting-site-names" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Selecting Site Names</h2>
</div>
<div class="panel-body">
<p>Write a query that selects only site names from the <code>Site</code> table.</p>
</div>
<div id="query-style" class="challenge">
<h2>Query Style</h2>
</div>
<div id="query-style" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Query Style</h2>
</div>
<div class="panel-body">
<p>Many people format queries as:</p>
<pre><code>SELECT personal, family FROM person;</code></pre>
<p>or as:</p>
<pre><code>select Personal, Family from PERSON;</code></pre>
<p>What style do you find easiest to read, and why?</p>
</div>
</div>
</div>
</div>
Expand All @@ -503,6 +518,6 @@ <h2>Query Style</h2>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="http://software-carpentry.org/v5/js/jquery-1.9.1.min.js"></script>
<script src="http://software-carpentry.org/v5/js/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>
36 changes: 23 additions & 13 deletions 02-sort-dup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="stylesheet" type="text/css" href="css/swc-workshop-and-lesson.css" />
<link rel="stylesheet" type="text/css" href="css/lesson.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
Expand All @@ -19,23 +17,27 @@
<![endif]-->
</head>
<body class="lesson">
<div class="container container-full-width card">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Databases and SQL</h1>
<h2 class="subtitle">Sorting and Removing Duplicates</h2>
<div id="learning-objectives" class="objectives">
<h2>Learning Objectives</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Write queries that display results in a particular order.</li>
<li>Write queries that eliminate duplicate values from data.</li>
</ul>
</div>
</div>
<p>Data is often redundant, so queries often return redundant information. For example, if we select the quantitites that have been measured from the <code>survey</code> table, we get this:</p>
<pre class="sourceCode sql"><code class="sourceCode sql"><span class="kw">SELECT</span> quant <span class="kw">FROM</span> Survey;</code></pre>
<table>
Expand Down Expand Up @@ -456,13 +458,21 @@ <h2>Learning Objectives</h2>
</tr>
</tbody>
</table>
<div id="finding-distinct-dates" class="challenge">
<h2>Finding Distinct Dates</h2>
<div id="finding-distinct-dates" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Finding Distinct Dates</h2>
</div>
<div class="panel-body">
<p>Write a query that selects distinct dates from the <code>Visited</code> table.</p>
</div>
<div id="displaying-full-names" class="challenge">
<h2>Displaying Full Names</h2>
</div>
<div id="displaying-full-names" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Displaying Full Names</h2>
</div>
<div class="panel-body">
<p>Write a query that displays the full names of the scientists in the <code>Person</code> table, ordered by family name.</p>
</div>
</div>
</div>
</div>
Expand All @@ -475,6 +485,6 @@ <h2>Displaying Full Names</h2>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="http://software-carpentry.org/v5/js/jquery-1.9.1.min.js"></script>
<script src="http://software-carpentry.org/v5/js/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>
Loading

0 comments on commit e46ecfc

Please sign in to comment.