Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Tim's contribution to the project

  • Loading branch information...
commit c82bd3ce314c3d4c9405c87472fd55bc4d2ee3df 1 parent 056fd63
timhayes authored
View
281 css/screen copy.css
@@ -0,0 +1,281 @@
+/* screen.css: Screen Styles */
+
+/* Base Styles */
+
+/* Bold on headings, b, and strong */
+h1,h2,h3,h4,h5,h6,b,strong { font-weight: bold; }
+/* Italic on i, em, and cite: */
+i,em,cite { font-style: italic; }
+/* Dotted border and help cursor to abbr and acronym: */
+abbr,acronym { border-bottom: 1px dotted; cursor: help; }
+/* Bold on headings, b, and strong */
+
+/* Body */
+body,html { background-color: #EEE; }
+body {
+ font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
+ font-size: small;
+}
+h1,h2,h3,h4,h5,h6 { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; }
+
+/* Major Divisions */
+
+/* Whole Page */
+div#page {
+ background-color: #FFF;
+ width: 660px;
+ padding: 20px;
+ margin: 20px;
+}
+
+/* Header */
+div#header {
+ border-bottom: 1px dotted black;
+ padding-bottom: 1em;
+}
+div#header h1 {
+ font-size: 200%;
+}
+div#header h1 a {
+ color: black;
+ text-decoration: none;
+}
+div#header p.tagline {
+ color: #900;
+}
+div#header ul.accessibility {
+ position: absolute;
+ left: -10000px;
+}
+
+/* Content */
+div#content {
+ padding: 1em 0em 2em 0em;
+ font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+div#main {
+}
+
+div#supporting {
+}
+
+/* Footer */
+div#footer {
+ clear: both;
+ border-top: 1px dotted black;
+ padding-top: 1em;
+ padding-bottom: 1em;
+}
+div#footer * { font-size: x-small; }
+div#footer p.copyright {
+ position: relative;
+ width: 500px;
+ padding-right: 160px;
+ padding-bottom: 2em;
+}
+div#footer a.cc-badge {
+display: block;
+position: absolute;
+top: 0px;
+right: 0px;
+}
+div#footer p.project-information { position: absolute; }
+div#footer ul.validators {
+}
+div#footer ul.validators li {
+ float: right;
+ margin-left: 1ex;
+}
+
+/*Navigation*/
+ul#navigation {
+ position: absolute;
+ top: 10px;
+ left: 465px
+}
+
+ul#navigation li {
+ width: 75px;
+ margin-right: 5px;
+ line-height: 1;
+ float: left;
+}
+
+ul#navigation li a {
+ background-color: #CCC;
+ text-align: center;
+ text-decoration: none;
+ color: white;
+ display: block;
+ padding: .5em;
+}
+
+ul#navigation li a:visited {
+}
+
+ul#navigation li a:hover,
+ul#navigation li a:focus {
+}
+
+/*Content Typography: Shared*/
+div#content p,
+div#content ul,
+div#content ol {
+ font-size: medium;
+ line-height: 1.5;
+ padding-bottom: 1em;
+}
+div#content ul li,
+div#content ol li {
+ margin-bottom: .5em;
+}
+div#content ul li {
+ list-style-type: disc;
+ margin-left: 4ex;
+}
+div#content ol li {
+ list-style-type: decimal;
+ margin-left: 4ex;
+}
+div#content blockquote {
+ font-style: italic;
+}
+div#content blockquote > * {
+ margin-left: 2ex;
+}
+/*Content Typography: Headings*/
+div#content h2 {
+ font-size: 180%;
+ margin-top: 1em;
+ margin-bottom: .5em;
+}
+
+div#content h3 {
+ font-size: 160%;
+ border-top: 5px solid #666;
+ border-bottom: 1px solid #666;
+ padding-top: .2em;
+ padding-bottom: .3em;
+ margin-top: 1em;
+ margin-bottom: .5em;
+}
+div#content h4 {
+ font-size: 160%;
+ margin-top: 1em;
+ margin-bottom: .5em;
+}
+div#content h5 {
+}
+div#content h6 {
+}
+
+/*Shared Typography*/
+div#content p,
+div#content ul,
+div#content ol,
+div#content pre {
+ font-size: medium;
+}
+
+/*Content Typography: Paragraphs*/
+div#content p {
+}
+
+/*Content Typography: Unordered Lists*/
+div#content ul {
+}
+div#content ul li {
+}
+/*Nested*/
+div#content * li ul {
+}
+div#content * li ul li {
+}
+
+/*Content Typography: Ordered Lists*/
+div#content ol {
+}
+div#content ol li {
+}
+/*Nested*/
+div#content * li ol {
+}
+div#content * li ol li {
+}
+
+/*Content Typography: Links*/
+div#content a {
+}
+div#content a:visited {
+}
+div#content a:hover,
+div#content a:focus {
+}
+
+/*Home Page*/
+.home div#content h3 {
+ font-size: 130%;
+ border-top: 0px;
+ border-bottom: 1px solid black;
+ margin: 0px;
+ padding: 0px;
+}
+.home div#content h4 {
+ font-size: 100%;
+ margin: 0px;
+ padding: .5em 0 .5em 0em;
+}
+div#content ul#project-overview li {
+ list-style-type: none;
+ margin-left: 0;
+ margin-top: 0;
+}
+
+li#alone,
+li#wherever,
+li#together {
+ width: 210px;
+ padding: 5px;
+ float: left;
+ background-color: #CCDDFF;
+}
+li#wherever { background-color: #FFF; }
+li.concepts,
+li.hands-on,
+li.scenarios {
+ min-height: 300px;
+}
+
+/*Style Guide*/
+.example-rendering {
+ padding: .5em;
+ border: 1px solid #666;
+ margin-bottom: 1em;
+}
+
+/*Git*/
+samp,pre,kbd,code {
+ font-family: Monaco, "Lucida Console", "Courier New", Courier, mono;
+ font-size: 80%;
+ padding: .2em;
+ background-color: black;
+ color: white;
+}
+pre {
+ margin: 0em 0em 1.5em 0em;
+ overflow: auto;
+}
+li pre { margin-top: .5em; }
+code {
+ background-color: #EEE;
+ color: black;
+}
+pre {
+ line-height: 1.4;
+ padding: 1em;
+ background-color: black;
+ color: white;
+}
+.warn { color: red; }
+.good { color: green; }
View
497 js/lightbox.js
@@ -0,0 +1,497 @@
+// -----------------------------------------------------------------------------------
+//
+// Lightbox v2.04
+// by Lokesh Dhakar - http://www.lokeshdhakar.com
+// Last Modification: 2/9/08
+//
+// For more information, visit:
+// http://lokeshdhakar.com/projects/lightbox2/
+//
+// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
+// - Free for use in both personal and commercial projects
+// - Attribution requires leaving author name, author link, and the license info intact.
+//
+// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
+// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
+//
+// -----------------------------------------------------------------------------------
+/*
+
+ Table of Contents
+ -----------------
+ Configuration
+
+ Lightbox Class Declaration
+ - initialize()
+ - updateImageList()
+ - start()
+ - changeImage()
+ - resizeImageContainer()
+ - showImage()
+ - updateDetails()
+ - updateNav()
+ - enableKeyboardNav()
+ - disableKeyboardNav()
+ - keyboardAction()
+ - preloadNeighborImages()
+ - end()
+
+ Function Calls
+ - document.observe()
+
+*/
+// -----------------------------------------------------------------------------------
+
+//
+// Configurationl
+//
+LightboxOptions = Object.extend({
+ fileLoadingImage: 'images/loading.gif',
+ fileBottomNavCloseImage: 'images/closelabel.gif',
+
+ overlayOpacity: 0.8, // controls transparency of shadow overlay
+
+ animate: true, // toggles resizing animations
+ resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
+
+ borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
+
+ // When grouping images this is used to write: Image # of #.
+ // Change it for non-english localization
+ labelImage: "Image",
+ labelOf: "of"
+}, window.LightboxOptions || {});
+
+// -----------------------------------------------------------------------------------
+
+var Lightbox = Class.create();
+
+Lightbox.prototype = {
+ imageArray: [],
+ activeImage: undefined,
+
+ // initialize()
+ // Constructor runs on completion of the DOM loading. Calls updateImageList and then
+ // the function inserts html at the bottom of the page which is used to display the shadow
+ // overlay and the image container.
+ //
+ initialize: function() {
+
+ this.updateImageList();
+
+ this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
+
+ if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
+ if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
+
+ this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
+ this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
+
+ // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
+ // If animations are turned off, it will be hidden as to prevent a flicker of a
+ // white 250 by 250 box.
+ var size = (LightboxOptions.animate ? 250 : 1) + 'px';
+
+
+ // Code inserts html at the bottom of the page that looks similar to this:
+ //
+ // <div id="overlay"></div>
+ // <div id="lightbox">
+ // <div id="outerImageContainer">
+ // <div id="imageContainer">
+ // <img id="lightboxImage">
+ // <div style="" id="hoverNav">
+ // <a href="#" id="prevLink"></a>
+ // <a href="#" id="nextLink"></a>
+ // </div>
+ // <div id="loading">
+ // <a href="#" id="loadingLink">
+ // <img src="images/loading.gif">
+ // </a>
+ // </div>
+ // </div>
+ // </div>
+ // <div id="imageDataContainer">
+ // <div id="imageData">
+ // <div id="imageDetails">
+ // <span id="caption"></span>
+ // <span id="numberDisplay"></span>
+ // </div>
+ // <div id="bottomNav">
+ // <a href="#" id="bottomNavClose">
+ // <img src="images/close.gif">
+ // </a>
+ // </div>
+ // </div>
+ // </div>
+ // </div>
+
+
+ var objBody = $$('body')[0];
+
+ objBody.appendChild(Builder.node('div',{id:'overlay'}));
+
+ objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
+ Builder.node('div',{id:'outerImageContainer'},
+ Builder.node('div',{id:'imageContainer'}, [
+ Builder.node('img',{id:'lightboxImage'}),
+ Builder.node('div',{id:'hoverNav'}, [
+ Builder.node('a',{id:'prevLink', href: '#' }),
+ Builder.node('a',{id:'nextLink', href: '#' })
+ ]),
+ Builder.node('div',{id:'loading'},
+ Builder.node('a',{id:'loadingLink', href: '#' },
+ Builder.node('img', {src: LightboxOptions.fileLoadingImage})
+ )
+ )
+ ])
+ ),
+ Builder.node('div', {id:'imageDataContainer'},
+ Builder.node('div',{id:'imageData'}, [
+ Builder.node('div',{id:'imageDetails'}, [
+ Builder.node('span',{id:'caption'}),
+ Builder.node('span',{id:'numberDisplay'})
+ ]),
+ Builder.node('div',{id:'bottomNav'},
+ Builder.node('a',{id:'bottomNavClose', href: '#' },
+ Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
+ )
+ )
+ ])
+ )
+ ]));
+
+
+ $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
+ $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
+ $('outerImageContainer').setStyle({ width: size, height: size });
+ $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
+ $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
+ $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
+ $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
+
+ var th = this;
+ (function(){
+ var ids =
+ 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
+ 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
+ $w(ids).each(function(id){ th[id] = $(id); });
+ }).defer();
+ },
+
+ //
+ // updateImageList()
+ // Loops through anchor tags looking for 'lightbox' references and applies onclick
+ // events to appropriate links. You can rerun after dynamically adding images w/ajax.
+ //
+ updateImageList: function() {
+ this.updateImageList = Prototype.emptyFunction;
+
+ document.observe('click', (function(event){
+ var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
+ if (target) {
+ event.stop();
+ this.start(target);
+ }
+ }).bind(this));
+ },
+
+ //
+ // start()
+ // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
+ //
+ start: function(imageLink) {
+
+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
+
+ // stretch overlay to fill page and fade in
+ var arrayPageSize = this.getPageSize();
+ $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
+
+ new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
+
+ this.imageArray = [];
+ var imageNum = 0;
+
+ if ((imageLink.rel == 'lightbox')){
+ // if image is NOT part of a set, add single image to imageArray
+ this.imageArray.push([imageLink.href, imageLink.title]);
+ } else {
+ // if image is part of a set..
+ this.imageArray =
+ $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
+ collect(function(anchor){ return [anchor.href, anchor.title]; }).
+ uniq();
+
+ while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
+ }
+
+ // calculate top and left offset for the lightbox
+ var arrayPageScroll = document.viewport.getScrollOffsets();
+ var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
+ var lightboxLeft = arrayPageScroll[0];
+ this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
+
+ this.changeImage(imageNum);
+ },
+
+ //
+ // changeImage()
+ // Hide most elements and preload image in preparation for resizing image container.
+ //
+ changeImage: function(imageNum) {
+
+ this.activeImage = imageNum; // update global var
+
+ // hide elements during transition
+ if (LightboxOptions.animate) this.loading.show();
+ this.lightboxImage.hide();
+ this.hoverNav.hide();
+ this.prevLink.hide();
+ this.nextLink.hide();
+ // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
+ this.imageDataContainer.setStyle({opacity: .0001});
+ this.numberDisplay.hide();
+
+ var imgPreloader = new Image();
+
+ // once image is preloaded, resize image container
+
+
+ imgPreloader.onload = (function(){
+ this.lightboxImage.src = this.imageArray[this.activeImage][0];
+ this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
+ }).bind(this);
+ imgPreloader.src = this.imageArray[this.activeImage][0];
+ },
+
+ //
+ // resizeImageContainer()
+ //
+ resizeImageContainer: function(imgWidth, imgHeight) {
+
+ // get current width and height
+ var widthCurrent = this.outerImageContainer.getWidth();
+ var heightCurrent = this.outerImageContainer.getHeight();
+
+ // get new width and height
+ var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
+ var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
+
+ // scalars based on change from old to new
+ var xScale = (widthNew / widthCurrent) * 100;
+ var yScale = (heightNew / heightCurrent) * 100;
+
+ // calculate size difference between new and old image, and resize if necessary
+ var wDiff = widthCurrent - widthNew;
+ var hDiff = heightCurrent - heightNew;
+
+ if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
+ if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
+
+ // if new and old image are same size and no scaling transition is necessary,
+ // do a quick pause to prevent image flicker.
+ var timeout = 0;
+ if ((hDiff == 0) && (wDiff == 0)){
+ timeout = 100;
+ if (Prototype.Browser.IE) timeout = 250;
+ }
+
+ (function(){
+ this.prevLink.setStyle({ height: imgHeight + 'px' });
+ this.nextLink.setStyle({ height: imgHeight + 'px' });
+ this.imageDataContainer.setStyle({ width: widthNew + 'px' });
+
+ this.showImage();
+ }).bind(this).delay(timeout / 1000);
+ },
+
+ //
+ // showImage()
+ // Display image and begin preloading neighbors.
+ //
+ showImage: function(){
+ this.loading.hide();
+ new Effect.Appear(this.lightboxImage, {
+ duration: this.resizeDuration,
+ queue: 'end',
+ afterFinish: (function(){ this.updateDetails(); }).bind(this)
+ });
+ this.preloadNeighborImages();
+ },
+
+ //
+ // updateDetails()
+ // Display caption, image number, and bottom nav.
+ //
+ updateDetails: function() {
+
+ // if caption is not null
+ if (this.imageArray[this.activeImage][1] != ""){
+ this.caption.update(this.imageArray[this.activeImage][1]).show();
+ }
+
+ // if image is part of set display 'Image x of x'
+ if (this.imageArray.length > 1){
+ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
+ }
+
+ new Effect.Parallel(
+ [
+ new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
+ new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
+ ],
+ {
+ duration: this.resizeDuration,
+ afterFinish: (function() {
+ // update overlay size and update nav
+ var arrayPageSize = this.getPageSize();
+ this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
+ this.updateNav();
+ }).bind(this)
+ }
+ );
+ },
+
+ //
+ // updateNav()
+ // Display appropriate previous and next hover navigation.
+ //
+ updateNav: function() {
+
+ this.hoverNav.show();
+
+ // if not first image in set, display prev image button
+ if (this.activeImage > 0) this.prevLink.show();
+
+ // if not last image in set, display next image button
+ if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
+
+ this.enableKeyboardNav();
+ },
+
+ //
+ // enableKeyboardNav()
+ //
+ enableKeyboardNav: function() {
+ document.observe('keydown', this.keyboardAction);
+ },
+
+ //
+ // disableKeyboardNav()
+ //
+ disableKeyboardNav: function() {
+ document.stopObserving('keydown', this.keyboardAction);
+ },
+
+ //
+ // keyboardAction()
+ //
+ keyboardAction: function(event) {
+ var keycode = event.keyCode;
+
+ var escapeKey;
+ if (event.DOM_VK_ESCAPE) { // mozilla
+ escapeKey = event.DOM_VK_ESCAPE;
+ } else { // ie
+ escapeKey = 27;
+ }
+
+ var key = String.fromCharCode(keycode).toLowerCase();
+
+ if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
+ this.end();
+ } else if ((key == 'p') || (keycode == 37)){ // display previous image
+ if (this.activeImage != 0){
+ this.disableKeyboardNav();
+ this.changeImage(this.activeImage - 1);
+ }
+ } else if ((key == 'n') || (keycode == 39)){ // display next image
+ if (this.activeImage != (this.imageArray.length - 1)){
+ this.disableKeyboardNav();
+ this.changeImage(this.activeImage + 1);
+ }
+ }
+ },
+
+ //
+ // preloadNeighborImages()
+ // Preload previous and next images.
+ //
+ preloadNeighborImages: function(){
+ var preloadNextImage, preloadPrevImage;
+ if (this.imageArray.length > this.activeImage + 1){
+ preloadNextImage = new Image();
+ preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
+ }
+ if (this.activeImage > 0){
+ preloadPrevImage = new Image();
+ preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
+ }
+
+ },
+
+ //
+ // end()
+ //
+ end: function() {
+ this.disableKeyboardNav();
+ this.lightbox.hide();
+ new Effect.Fade(this.overlay, { duration: this.overlayDuration });
+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
+ },
+
+ //
+ // getPageSize()
+ //
+ getPageSize: function() {
+
+ var xScroll, yScroll;
+
+ if (window.innerHeight && window.scrollMaxY) {
+ xScroll = window.innerWidth + window.scrollMaxX;
+ yScroll = window.innerHeight + window.scrollMaxY;
+ } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
+ xScroll = document.body.scrollWidth;
+ yScroll = document.body.scrollHeight;
+ } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
+ xScroll = document.body.offsetWidth;
+ yScroll = document.body.offsetHeight;
+ }
+
+ var windowWidth, windowHeight;
+
+ if (self.innerHeight) { // all except Explorer
+ if(document.documentElement.clientWidth){
+ windowWidth = document.documentElement.clientWidth;
+ } else {
+ windowWidth = self.innerWidth;
+ }
+ windowHeight = self.innerHeight;
+ } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+ windowWidth = document.documentElement.clientWidth;
+ windowHeight = document.documentElement.clientHeight;
+ } else if (document.body) { // other Explorers
+ windowWidth = document.body.clientWidth;
+ windowHeight = document.body.clientHeight;
+ }
+
+ // for small pages with total height less then height of the viewport
+ if(yScroll < windowHeight){
+ pageHeight = windowHeight;
+ } else {
+ pageHeight = yScroll;
+ }
+
+ // for small pages with total width less then width of the viewport
+ if(xScroll < windowWidth){
+ pageWidth = xScroll;
+ } else {
+ pageWidth = windowWidth;
+ }
+
+ return [pageWidth,pageHeight];
+ }
+}
+
+document.observe('dom:loaded', function () { new Lightbox(); });
View
BIN  media/img/timeline.pdf
Binary file not shown
View
BIN  media/img/timeline.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/timeline_1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/timeline_2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/timeline_3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/timeline_f.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
144 process.htm
@@ -0,0 +1,144 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="mysite-com">
+
+<head>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Git Process for Publishers</title>
+
+ <link rel="stylesheet" type="text/css" media="screen, print" href="css/reset.css" />
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
+ <!--[if lte IE 7>
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen-ie.css" />
+ <![endif]-->
+ <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
+
+ <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="style" charset="utf-8"/>
+
+
+<!--REMOVE COMMENT TAGS TO USE FACEBOOK SHARE METADATA:-->
+
+<!--
+ <meta name="title" content="Match this with the content of the title tag above." />
+ <meta name="description" content="A short description of this page." />
+ <link rel="image_src" href="http://example.com/media/share/thumbnail.jpg" />
+-->
+
+<!--REMOVE COMMENT TAGS TO USE FAVICON LINKS:-->
+
+<!--
+ <link rel="icon" href="" type="image/png" />
+ <link rel="shortcut icon" href="" type="image/png" />
+-->
+
+ <script type="text/javascript" src="js/mootools/mootools-core.js"></script>
+ <script type="text/javascript" src="js/site.js"></script>
+ <script type="text/javascript" src="js/lightbox.js"></script>
+
+</head>
+
+<body>
+
+<div id="page">
+
+ <div id="header">
+
+ <h1><a href="http://gewga.ws/git-for-writers/" rel="home">Git Process for Publishers</a></h1>
+
+ <p class="tagline">
+ A guide to version tracking, revision, and collaboration for open-source writing.
+ </p>
+
+ <ul class="accessibility">
+ <li><a href="#navigation">Jump to Navigation</a></li>
+ <li><a href="#content">Jump to Content</a></li>
+ </ul>
+
+ </div>
+
+ <ul id="sub-navigation">
+ <li><a href="process.htm">Start</a></li>
+ <li><a href="process2.htm">Edit</a></li>
+ <li><a href="process3.htm">Produce</a></li>
+ </ul>
+
+ <div id="content">
+
+<br>
+<br>
+ <p>In this scenario, an exercise is presented that will help pull together the concepts discussed previously and allow for hands-on practice. This project will be most effective if a team of four is formed. For the purposes of this exercise, you will need to refer to previous documentation, for greater detail specific to github commands. </p>
+
+<p>Although there is strong support for non-linear development within Git (through rapid branching and merging), this project follows a rather straightforward publishing process with a managing editor controlling the various stages of editorial development.</p>
+
+
+ <img src="media/img/timeline_1.png" alt="timeline_1" height="610" width="534" />
+
+ <div id="main">
+
+ <h4>Legend for Chart</h4>
+
+
+
+<p><b>Step 1.</b> The scenario involves a linear publishing process whereby a team of four individuals are working independently to create an XHTML tagged text file that any writer could download and start writing within. A CSS template file also needs to be created so that none of the writers worry about the formatting of their content.</p>
+
+<p>A managing editor will oversee the entire process, but will rely on the three writers to create the content and load into the Git repository within Github. The editor will then pull the content down once he/she approves of the version for others to access and further revise.</p>
+
+<p>Three chapters need to be written by separate writers: 1) a marketing chapter with a purpose narrative on why writers should utilize the Git technology and their proposed workflow process; 2) a chapter on GitHub commands specific to the publishing industry; and, 3) a setting up Github (for the first steps in the process) which include basic navigational commands: push/pull, merge, revision history, etc.</p>
+
+<p>As the chapters are written, marketing’s narrative is validated and the commands are practiced by the writers as they execute what they write. The writers and managing editor will ensure quality control is in place as they work through the process of creating this content for electronic publication.</p>
+
+<p><b>Step 2</b>.
+Each individual participating in this exercise should setup a Github account. Follow the instructions within the tutorial and access Github at http://github.com. Don’t forget to provide Git your name and email address so your future commits are associated with your name and email.</p>
+
+<p>The project member selected to be the managing editor should create the Github repository. In addition to the tutorial within the documentation preceding this project, another reference is the Git Community Book: The open Git resource pulled together by the whole community, “Chapter 3: Basic Usage” for information on how to obtain a Git repository. </p>
+
+<p>You can either clone a repository or initialize one. Don’t forget to review “git init” and “git clone” commands.</p>
+
+<p><b>Step 3. </b>Once everyone has an account and a repository is in place. Each writer should begin researching and writing their topic. An XHTML tagged text file should be used by everyone within the project to ensure common format structure.</p>
+
+<p>Each writer will need to commit their changes to the repository in at least two intervals: referred to as 1st Pass and 2nd Pass in the graphic accompanying these instructions.</p>
+
+<p>Writers will either add a new file or stage an existing file and then commit (“git add” versus “git commit” commands). Refer to earlier documentation for instructions on how to Stage a file for a Commit.</p>
+
+</p>
+ </div>
+
+ <div id="supporting">
+ </div>
+
+ </div>
+
+ <ul id="navigation">
+ <li><a href="index.htm">Home</a></li>
+ <li><a href="resources.htm">Resources</a></li>
+ <li><a href="process.htm">Process</a></li>
+ <li><a href="about.htm">About</a></li>
+ </ul>
+
+ <div id="footer">
+ <p class="copyright">
+ © 2010 by Gewgaws Lab. Some rights reserved. Content licensed under a
+ <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ Creative Commons Attribution-Share Alike 3.0 United States License
+ </a>.
+ <a class="cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ <img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" />
+ </a>
+ </p>
+ <p class="project-information">
+ <a href="http://github.com/gewgaws/git-for-writers">Git for Writers repository</a>
+ hosted at <a href="http://github.com">GitHub</a>. Learn <a href="participate.htm">how to
+ contribute</a> to Git for Writers.
+ </p>
+ <ul class="validators">
+ <li><a href="http://validator.w3.org/check?uri=referer" title="Validate this page's XHTML">XHTML</a></li>
+ <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this page's CSS">CSS</a></li>
+ </ul>
+ </div>
+
+</div>
+
+</body>
+
+</html>
+
View
142 process2.htm
@@ -0,0 +1,142 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="mysite-com">
+
+<head>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Git Process for Publishers</title>
+
+ <link rel="stylesheet" type="text/css" media="screen, print" href="css/reset.css" />
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
+ <!--[if lte IE 7>
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen-ie.css" />
+ <![endif]-->
+ <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
+
+ <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="style" charset="utf-8"/>
+
+
+<!--REMOVE COMMENT TAGS TO USE FACEBOOK SHARE METADATA:-->
+
+<!--
+ <meta name="title" content="Match this with the content of the title tag above." />
+ <meta name="description" content="A short description of this page." />
+ <link rel="image_src" href="http://example.com/media/share/thumbnail.jpg" />
+-->
+
+<!--REMOVE COMMENT TAGS TO USE FAVICON LINKS:-->
+
+<!--
+ <link rel="icon" href="" type="image/png" />
+ <link rel="shortcut icon" href="" type="image/png" />
+-->
+
+ <script type="text/javascript" src="js/mootools/mootools-core.js"></script>
+ <script type="text/javascript" src="js/site.js"></script>
+
+</head>
+
+<body>
+
+<div id="page">
+
+ <div id="header">
+
+ <h1><a href="http://gewga.ws/git-for-writers/" rel="home">Git Process for Publishers</a></h1>
+
+ <p class="tagline">
+ A guide to version tracking, revision, and collaboration for open-source writing.
+ </p>
+
+ <ul class="accessibility">
+ <li><a href="#navigation">Jump to Navigation</a></li>
+ <li><a href="#content">Jump to Content</a></li>
+ </ul>
+
+ </div>
+
+ <ul id="sub-navigation">
+ <li><a href="process.htm">Start</a></li>
+ <li><a href="process2.htm">Edit</a></li>
+ <li><a href="process3.htm">Produce</a></li>
+ </ul>
+
+ <div id="content">
+ <br>
+<br>
+
+
+ <img src="media/img/timeline_2.png" alt="timeline_2" height="591" width="513" />
+
+ <div id="main">
+
+ <h4>Legend for Chart</h4>
+
+
+
+<p><b>Step 4.</b>
+The managing editor will also need to look out for Pull requests from each of the writers after they have Pushed changes to the fork of the project. Recall that changes are Pushed from the working repository to the master repository by the writers.</p>
+
+<p>It is up to the managing editor to Pull the changes from all the writers into the master repository and review any messages accompanying these requests.</p>
+
+<p>Writers may also find that they want to Push experimental content to fellow writers on an arbitrary branch in order to share content prior to making Pull requests of the managing editor. (Recall: “git pull” and “git push” commands.)</p>
+
+<p>Writers: remember to type in a message with your Pull request.</p>
+
+<p><b>Step 5.</b>
+The managing editor will need to review all the files. The command “git log” will allow him or her to see the list of changes to the project.</p>
+
+<p>First time Pull requests will need to be fetched with the “git remote add” command. Afterwards, the managing editor need only fetch again.</p>
+
+<p>Decisions will need to be made whether to merge the changed done. Don’t forget to use the “$ git checkout master” command.</p>
+
+<p>Also, the managing editor at this stage should be opening the “index.htm” file in a web browser to view how the content is displaying. Edits to the XHTML and CSS files may need to be made at this stage to save time later.</p>
+
+<p><b>Step 6.</b>
+The chapters will now be ready for a “2nd Pass” review and revisions. Each writer will need to Fork the latest repository to their Github account.</p>
+
+<p>Practice with the “git log” command to show lists of commits and thus review the history of the changes.</p>
+
+<p>Each writer will repeat steps described above as they review their current chapter, along with edits made from other writers and the managing editor. The “2nd Pass” of this project involves much more than simply revising your chapter. Indeed, it involves working on your chapter along with the chapters others have submitted. Writers will continually need to Push their content and then make Pull requests of the managing editor.</p>
+
+ </div>
+
+ <div id="supporting">
+ </div>
+
+ </div>
+
+ <ul id="navigation">
+ <li><a href="index.htm">Home</a></li>
+ <li><a href="resources.htm">Resources</a></li>
+ <li><a href="process.htm">Process</a></li>
+ <li><a href="about.htm">About</a></li>
+ </ul>
+
+ <div id="footer">
+ <p class="copyright">
+ © 2010 by Gewgaws Lab. Some rights reserved. Content licensed under a
+ <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ Creative Commons Attribution-Share Alike 3.0 United States License
+ </a>.
+ <a class="cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ <img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" />
+ </a>
+ </p>
+ <p class="project-information">
+ <a href="http://github.com/gewgaws/git-for-writers">Git for Writers repository</a>
+ hosted at <a href="http://github.com">GitHub</a>. Learn <a href="participate.htm">how to
+ contribute</a> to Git for Writers.
+ </p>
+ <ul class="validators">
+ <li><a href="http://validator.w3.org/check?uri=referer" title="Validate this page's XHTML">XHTML</a></li>
+ <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this page's CSS">CSS</a></li>
+ </ul>
+ </div>
+
+</div>
+
+</body>
+
+</html>
+
View
140 process3.htm
@@ -0,0 +1,140 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="mysite-com">
+
+<head>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Git Process for Publishers</title>
+
+ <link rel="stylesheet" type="text/css" media="screen, print" href="css/reset.css" />
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
+ <!--[if lte IE 7>
+ <link rel="stylesheet" type="text/css" media="screen" href="css/screen-ie.css" />
+ <![endif]-->
+ <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
+
+ <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="style" charset="utf-8"/>
+
+
+<!--REMOVE COMMENT TAGS TO USE FACEBOOK SHARE METADATA:-->
+
+<!--
+ <meta name="title" content="Match this with the content of the title tag above." />
+ <meta name="description" content="A short description of this page." />
+ <link rel="image_src" href="http://example.com/media/share/thumbnail.jpg" />
+-->
+
+<!--REMOVE COMMENT TAGS TO USE FAVICON LINKS:-->
+
+<!--
+ <link rel="icon" href="" type="image/png" />
+ <link rel="shortcut icon" href="" type="image/png" />
+-->
+
+ <script type="text/javascript" src="js/mootools/mootools-core.js"></script>
+ <script type="text/javascript" src="js/site.js"></script>
+
+</head>
+
+<body>
+
+<div id="page">
+
+ <div id="header">
+
+ <h1><a href="http://gewga.ws/git-for-writers/" rel="home">Git Process for Publishers</a></h1>
+
+ <p class="tagline">
+ A guide to version tracking, revision, and collaboration for open-source writing.
+ </p>
+
+ <ul class="accessibility">
+ <li><a href="#navigation">Jump to Navigation</a></li>
+ <li><a href="#content">Jump to Content</a></li>
+ </ul>
+
+ </div>
+ <ul id="sub-navigation">
+ <li><a href="process.htm">Start</a></li>
+ <li><a href="process2.htm">Edit</a></li>
+ <li><a href="process3.htm">Produce</a></li>
+ </ul>
+ <div id="content">
+<br>
+<br>
+
+
+
+ <img src="media/img/timeline_3.png" alt="timeline_3" height="486" width="500" />
+
+ <div id="main">
+
+ <h4>Legend for Chart</h4>
+
+
+
+<p><b>Step 7</b>
+Work that is viewed as complete can be merged from the work branch onto the master.</p>
+
+<p>Writers should remember to check out the branch they want to merge their changes into. </p>
+
+<p>Remember, changes will also need to be merged into the master. Don’t forget to check out the master branch and then perform the merge.</p>
+
+<p><b>Step 8.</b>
+The managing editor will need to review all the files for the final time. Remember, the command “git log” will allow him or her to see the list of changes to the project. Decisions will need to be made whether to merge the changes completed: that’s why a managing editor is needed.</p>
+
+<p>During the writing process, there will probably be conflicts between the writers that need to be resolved. The “git merge” and “git pull” commands continue merging content even when conflicts exist. Chapters may need to be cleaned up manually thus requiring conflict markers being removed from view.
+
+<p>Another option for dealing with conflicts may be to restart from the start of the chapter by undoing a merge and returning to the previous state of the branch.</p>
+
+<p>These decisions will need to be made by the managing editor.</p>
+
+<p><b>Step 9.</b>
+Once all three chapters are complete and the managing editor is pleased with the work, everything can be merged. Afterwards, the managing editor should open up the index.htm file in a web browser to view the completed product as the end-users will experience the content.</p>
+
+<p>Remember to use “$ git checkout master” and “$ git merge work” commands.</p>
+
+<p>A 3-chapter electronic document, fully formatted and reviewed by multiple parties, is now available for distribution on the web.</p>
+
+<p>Everything was completed online in a virtual paperless setting.</p>
+ </div>
+
+ <div id="supporting">
+ </div>
+
+ </div>
+
+ <ul id="navigation">
+ <li><a href="index.htm">Home</a></li>
+ <li><a href="resources.htm">Resources</a></li>
+ <li><a href="process.htm">Process</a></li>
+ <li><a href="about.htm">About</a></li>
+ </ul>
+
+ <div id="footer">
+ <p class="copyright">
+ © 2010 by Gewgaws Lab. Some rights reserved. Content licensed under a
+ <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ Creative Commons Attribution-Share Alike 3.0 United States License
+ </a>.
+ <a class="cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">
+ <img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" />
+ </a>
+ </p>
+ <p class="project-information">
+ <a href="http://github.com/gewgaws/git-for-writers">Git for Writers repository</a>
+ hosted at <a href="http://github.com">GitHub</a>. Learn <a href="participate.htm">how to
+ contribute</a> to Git for Writers.
+ </p>
+ <ul class="validators">
+ <li><a href="http://validator.w3.org/check?uri=referer" title="Validate this page's XHTML">XHTML</a></li>
+ <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this page's CSS">CSS</a></li>
+ </ul>
+ </div>
+
+</div>
+
+</body>
+
+</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.