Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beautifying Code #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Beautifying Code #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

/**
* Module dependencies.
*/
Expand All @@ -17,8 +16,8 @@ var project = require('./routes/project');
// Connect to the Mongo database, whether locally or on Heroku
// MAKE SURE TO CHANGE THE NAME FROM 'lab7' TO ... IN OTHER PROJECTS
var local_database_name = 'lab7';
var local_database_uri = 'mongodb://localhost/' + local_database_name
var database_uri = process.env.MONGOLAB_URI || local_database_uri
var local_database_uri = 'mongodb://localhost/' + local_database_name;
var database_uri = process.env.MONGOLAB_URI || local_database_uri;
mongoose.connect(database_uri);

var app = express();
Expand All @@ -40,7 +39,7 @@ app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
app.use(express.errorHandler());
}

// Add routes here
Expand All @@ -51,6 +50,6 @@ app.post('/project/:id/delete', project.deleteProject);
// Example route
// app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
http.createServer(app).listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});
58 changes: 28 additions & 30 deletions initDB.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

/*
This script will initialize a local Mongo database
on your machine so you can do development work.
Expand All @@ -12,13 +11,13 @@
*/

var mongoose = require('mongoose');
var models = require('./models');
var models = require('./models');

// Connect to the Mongo database, whether locally or on Heroku
// MAKE SURE TO CHANGE THE NAME FROM 'lab7' TO ... IN OTHER PROJECTS
var local_database_name = 'lab7';
var local_database_uri = 'mongodb://localhost/' + local_database_name
var database_uri = process.env.MONGOLAB_URI || local_database_uri
var local_database_uri = 'mongodb://localhost/' + local_database_name;
var database_uri = process.env.MONGOLAB_URI || local_database_uri;
mongoose.connect(database_uri);


Expand All @@ -29,33 +28,32 @@ var projects_json = require('./projects.json');

// Step 2: Remove all existing documents
models.Project
.find()
.remove()
.exec(onceClear); // callback to continue at
.find()
.remove()
.exec(onceClear); // callback to continue at

// Step 3: load the data from the JSON file
function onceClear(err) {
if(err) console.log(err);

// loop over the projects, construct and save an object from each one
// Note that we don't care what order these saves are happening in...
var to_save_count = projects_json.length;
for(var i=0; i<projects_json.length; i++) {
var json = projects_json[i];
var proj = new models.Project(json);

proj.save(function(err, proj) {
if(err) console.log(err);

to_save_count--;
console.log(to_save_count + ' left to save');
if(to_save_count <= 0) {
console.log('DONE');
// The script won't terminate until the
// connection to the database is closed
mongoose.connection.close()
}
});
}
if (err) console.log(err);

// loop over the projects, construct and save an object from each one
// Note that we don't care what order these saves are happening in...
var to_save_count = projects_json.length;
for (var i = 0; i < projects_json.length; i++) {
var json = projects_json[i];
var proj = new models.Project(json);

proj.save(function(err, proj) {
if (err) console.log(err);

to_save_count--;
console.log(to_save_count + ' left to save');
if (to_save_count <= 0) {
console.log('DONE');
// The script won't terminate until the
// connection to the database is closed
mongoose.connection.close();
}
});
}
}

5 changes: 1 addition & 4 deletions models.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@

var Mongoose = require('mongoose');


var ProjectSchema = new Mongoose.Schema({
// fields are defined here
// fields are defined here
});

exports.Project = Mongoose.model('Project', ProjectSchema);


44 changes: 22 additions & 22 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
{
"name": "IntroHCI",
"version": "0.0.1",
"author": "Intro HCI Staff",
"name": "IntroHCI",
"version": "0.0.1",
"author": "Intro HCI Staff",

"repository": {
"type": "git",
"url": "https://github.com/IntroHCI/lab4"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/IntroHCI/lab4"
},
"license": "MIT",

"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.x",
"express3-handlebars": "*",
"mongodb": "*",
"mongoose": "*"
},
"engines": {
"node": "0.10.x"
}
}
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.x",
"express3-handlebars": "*",
"mongodb": "*",
"mongoose": "*"
},
"engines": {
"node": "0.10.x"
}
}
91 changes: 41 additions & 50 deletions projects.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,41 @@
[
{
"title": "Waiting in Line",
"date": "January 9, 2014",
"summary": "<p>Think about some of the designs that you consider to be great innovations. Quite likely, they came about because the design team was able to see a new problem or opportunity, or reframe things in a new way. As the light bulb joke illustrates, an important strategy of successful designers is to reframe things so that... we can see things in a new light. This first week's exercise is intended to work your perception and reframing 'muscles'. How creative can you be? (Later exercises will work different 'muscles'.)</p> <p>Any questions about this assignment should be posed to the forums and will be answered promptly by the staff. </p> <p>For this first project, <b>your mission is to redesign the experience of waiting in line</b>.</p> <p>An important part of the designer's role is to come up with a point of view. For example, your point of view might be that standing in line is intrinsic, but being bored is not.</p> <p>What can we do with our time that is more productive, more interesting, or more entertaining than just wait? Maybe it's reading the news, playing a game, or preempt the parents by giving them a surprise call? Alternatively, your point of view might be to eliminate the line by preordering, or hire people to act as placeholders in the line? Or maybe this is precious time for us to do nothing? A few minutes to space out, or quickly center ourselves. No matter what you come up with, it should be something that <b>improves the experience of standing in line</b>. For one jumping off point, <a href='http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&amp;_r=1&amp;''>here's a few thoughts from the New York Times</a>.</p> <p>This assignment will introduce iterative design so that during the main course project, the steps of the design process will be more familiar. For further explanations about the design process, have a look at the <b>d.school Bootcamp Bootleg</b> <a href='http://dschool.stanford.edu/use-our-methods/'>here</a>.</p>",
"image": "http://upload.wikimedia.org/wikipedia/commons/3/3b/Bowery_men_waiting_for_bread_in_bread_line,_New_York_City,_Bain_Collection.jpg"
},
{
"title": "Needfinding",
"date": "January 16, 2014",
"summary": "<p>As Yogi Berra said, you can observe a lot just by watching. Watching how people do things is a great way to learn their goals and values, and come up with design insight. We call this <b>needfinding</b>. This assignment helps you train your eyes and ears to come up with design ideas. Your goal is to uncover user needs, breakdowns, clever hacks, and opportunities for improvement.</p>",
"image": "http://developertodesigner.files.wordpress.com/2012/11/observing.jpg"
},
{
"title": "Prototyping",
"date": "January 23, 2014",
"summary": "<p>This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll flesh out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes. These are the blueprints for the mobile web application you'll make.</p>",
"image": "http://www.google.com/think/images/prototyping-for-success_articles_lg.jpg"
},
{
"title": "Heuristic Evaluation",
"date": "January 30, 2014",
"summary": "<p>As Carolyn Snyder writes, 'Paper prototyping is a variation of usability testing where the representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person 'playing computer' who doesn't explain how the interface is intended to work.' In this assignment, your group will conduct heuristic evaluations (HEs) of your paper prototypes and you will individually help out other groups by evaluating theirs. This will complete the prototyping phase of the project, providing you with the feedback you need to begin implementing.</p>",
"image": "http://searchwide.com/wp-content/uploads/2013/11/evaluation.jpg"
},
{
"title": "Skeleton and a Plan",
"date": "February 6, 2014",
"summary": "<p>Review the feedback you got last week from the Heuristic Evaluations of your prototypes. Distill the HE results into a list of concrete changes you want to make to your prototype. Use what worked, and improve what didn't. If you haven't already, make a decision about the prototype you are going with. This could be one of the two you tested or a combination of them. Again, take the time you need. This is what you will be working on for the rest of the course, so make sure you will feel invested in it.</p>",
"image": "http://www.quality-wars.com/wp-content/uploads/Gantt-Chart-Example-2-NO-LETTERS1.jpg"
},
{
"title": "Meat on the Bones",
"date": "February 13, 2014",
"summary": "<p>Functionality functionality functionality! Continue developing your interactive prototypes in accordance with your development plan. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up. The goal is for you to complete the interaction flow this week.</p>",
"image": "http://regmedia.co.uk/2011/03/01/node_code.png"
},
{
"title": "Ready for Testing",
"date": "February 20, 2014",
"summary": "<p>Crunch time! Your interactive prototypes have to be <b>ready for user testing</b> by the end of this week.</p>",
"image": "http://torontopubliclibrary.typepad.com/.a/6a00e5509ea6a18834019b00ff4518970b-800wi"
},
{
"title": "User Test Results and Online Test Proposal",
"date": "February 27, 2014",
"summary": "<p>The goal of this assignment is to launch a user test. To get the kinks out of your application, first test it with a couple of in-person users.</p><p>Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.</p>",
"image": "http://unbounce.com/photos/ab-testing.png"
}
]
[{
"title": "Waiting in Line",
"date": "January 9, 2014",
"summary": "<p>Think about some of the designs that you consider to be great innovations. Quite likely, they came about because the design team was able to see a new problem or opportunity, or reframe things in a new way. As the light bulb joke illustrates, an important strategy of successful designers is to reframe things so that... we can see things in a new light. This first week's exercise is intended to work your perception and reframing 'muscles'. How creative can you be? (Later exercises will work different 'muscles'.)</p> <p>Any questions about this assignment should be posed to the forums and will be answered promptly by the staff. </p> <p>For this first project, <b>your mission is to redesign the experience of waiting in line</b>.</p> <p>An important part of the designer's role is to come up with a point of view. For example, your point of view might be that standing in line is intrinsic, but being bored is not.</p> <p>What can we do with our time that is more productive, more interesting, or more entertaining than just wait? Maybe it's reading the news, playing a game, or preempt the parents by giving them a surprise call? Alternatively, your point of view might be to eliminate the line by preordering, or hire people to act as placeholders in the line? Or maybe this is precious time for us to do nothing? A few minutes to space out, or quickly center ourselves. No matter what you come up with, it should be something that <b>improves the experience of standing in line</b>. For one jumping off point, <a href='http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&amp;_r=1&amp;''>here's a few thoughts from the New York Times</a>.</p> <p>This assignment will introduce iterative design so that during the main course project, the steps of the design process will be more familiar. For further explanations about the design process, have a look at the <b>d.school Bootcamp Bootleg</b> <a href='http://dschool.stanford.edu/use-our-methods/'>here</a>.</p>",
"image": "http://upload.wikimedia.org/wikipedia/commons/3/3b/Bowery_men_waiting_for_bread_in_bread_line,_New_York_City,_Bain_Collection.jpg"
}, {
"title": "Needfinding",
"date": "January 16, 2014",
"summary": "<p>As Yogi Berra said, you can observe a lot just by watching. Watching how people do things is a great way to learn their goals and values, and come up with design insight. We call this <b>needfinding</b>. This assignment helps you train your eyes and ears to come up with design ideas. Your goal is to uncover user needs, breakdowns, clever hacks, and opportunities for improvement.</p>",
"image": "http://developertodesigner.files.wordpress.com/2012/11/observing.jpg"
}, {
"title": "Prototyping",
"date": "January 23, 2014",
"summary": "<p>This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll flesh out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes. These are the blueprints for the mobile web application you'll make.</p>",
"image": "http://www.google.com/think/images/prototyping-for-success_articles_lg.jpg"
}, {
"title": "Heuristic Evaluation",
"date": "January 30, 2014",
"summary": "<p>As Carolyn Snyder writes, 'Paper prototyping is a variation of usability testing where the representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person 'playing computer' who doesn't explain how the interface is intended to work.' In this assignment, your group will conduct heuristic evaluations (HEs) of your paper prototypes and you will individually help out other groups by evaluating theirs. This will complete the prototyping phase of the project, providing you with the feedback you need to begin implementing.</p>",
"image": "http://searchwide.com/wp-content/uploads/2013/11/evaluation.jpg"
}, {
"title": "Skeleton and a Plan",
"date": "February 6, 2014",
"summary": "<p>Review the feedback you got last week from the Heuristic Evaluations of your prototypes. Distill the HE results into a list of concrete changes you want to make to your prototype. Use what worked, and improve what didn't. If you haven't already, make a decision about the prototype you are going with. This could be one of the two you tested or a combination of them. Again, take the time you need. This is what you will be working on for the rest of the course, so make sure you will feel invested in it.</p>",
"image": "http://www.quality-wars.com/wp-content/uploads/Gantt-Chart-Example-2-NO-LETTERS1.jpg"
}, {
"title": "Meat on the Bones",
"date": "February 13, 2014",
"summary": "<p>Functionality functionality functionality! Continue developing your interactive prototypes in accordance with your development plan. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up. The goal is for you to complete the interaction flow this week.</p>",
"image": "http://regmedia.co.uk/2011/03/01/node_code.png"
}, {
"title": "Ready for Testing",
"date": "February 20, 2014",
"summary": "<p>Crunch time! Your interactive prototypes have to be <b>ready for user testing</b> by the end of this week.</p>",
"image": "http://torontopubliclibrary.typepad.com/.a/6a00e5509ea6a18834019b00ff4518970b-800wi"
}, {
"title": "User Test Results and Online Test Proposal",
"date": "February 27, 2014",
"summary": "<p>The goal of this assignment is to launch a user test. To get the kinks out of your application, first test it with a couple of in-person users.</p><p>Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.</p>",
"image": "http://unbounce.com/photos/ab-testing.png"
}]
56 changes: 25 additions & 31 deletions public/css/introHCI.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,47 @@
/* applies to anything of class "example-class-selector" */

.example-class-selector {
margin-top: 2em;
margin-top: 2em;
}

/* applies to any <p> descendants of an element of class "example-class-selector" */

.example-class-selector p {
/* Colors are in hexadecimal: http://www.colorpicker.com/ */
color: #CC00AA;
/* Colors are in hexadecimal: http://www.colorpicker.com/ */
color: #CC00AA;
}

.jumbotron {
position: relative;
background: none;
position: relative;
background: none;
}

.jumbotron:after {
content:"";
background: url("../images/lorempixel.jumbotron.jpeg");
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
content: "";
background: url("../images/lorempixel.jumbotron.jpeg");
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

.jumbotron p {
color: #6e6e6e;
color: #6e6e6e;
}

.project a {
text-align: center;
text-align: center;
}

.project .details {
overflow: hidden;
overflow: hidden;
}

.project .details .detailsImage {
width: 200px;
margin: 10px 10px 10px 0px;
float: left;
width: 200px;
margin: 10px 10px 10px 0px;
float: left;
}

body > div.container {
margin-bottom: 20px;
margin-bottom: 20px;
}

.project-img {
max-height: 300px;
}
max-height: 300px;
}
Loading