Week Ten (MGDP2050)

Week Ten of Web Design and Development II (MGDP2050).

See also Week Nine (MGDP2050) - Week Eleven (MGDP2050).

Project

Your semester project website can use whatever technologies you need to meet your own goals.

The project does not need to include everything from the weekly exercises.

• The weekly exercises are designed to introduce students to a wide range of topics, only some of which will be relevant to your project.

For example, you probably don't want to use Backbone.js for your project:

• A website that uses Backbone.js is built entirely around Backbone (thus the name).
• Learning Backbone.js would take too much time -- an entire semester.

Similarly, don't use jQuery unless you really need jQuery.

The only technology (beyond HTML and CSS) to which we are committed is Bootstrap, because it is widely used for responsive web design.

Lecture notes

See Week Ten lecture notes (MGDP2050).

Exercises: in class

Goal

Create a web page which demonstrates Backbone.js and Ajax.

Similar to this example page.

Create week10 folder and web pages

Create a new folder named week10, and a new web page named index.html, with the usual exercise styles, title, etc.

Add content for Backbone.js

Add web page content for Backbone.js to your exercise page.

You can use View Source and copy the code from the example page, or copy the code below:

<script type="text/template" id="itemlist_template">
 <li><%= item_name %></li>
</script>

<ol id="items">
</ol>

Two things to note about the above code example:

• The script element plays a special role here, as an Underscore template.
• The ol element is where the Backbone will render (display) content.

In both cases, the id attribute is essential. (Why?)

Save local copies of Underscore.js and Backbone.js

Save local copies of the Underscore.js and Backbone.js files in your 'scripts folder.

Upload them to your class web server -- you will need them online, later in the exercise.

Easy way

Browse the Content Delivery Network, and save the files to your scripts folder:

• http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js
• http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js

More technical way

Browse the web sites, and download from there, etc.:

• http://underscorejs.org/
• http://backbonejs.org/

Add script elements for Underscore.js and Backbone.js

You can use View Source and copy the code from the example page, or copy the code below:

<!--- Underscore.js --->
<script src="../scripts/underscore-min.js"></script>
	
<!--- Backbone.js --->
<script src="../scripts/backbone-min.js"></script>

Create a custom JavaScript file

Create a file named week10.js in your exercise folder.

Add JavaScript to custom JavaScript file

You can use View Source and copy the code from the example page, or copy the code below:

// JavaScript for Backbone and Ajax example

$(function(){
	
	var Item = Backbone.Model.extend();
	
	var ItemList = Backbone.Collection.extend({
  model: Item,
  url: '/week10/data.json'
});

var ItemsView = Backbone.View.extend({
  template: _.template($('#itemlist_template').html()),
  render: function(eventName) {
    _.each(this.model.models, function(item){
      var lItemName = item.attributes['item_name'];
      var lTemplate = this.template(item.toJSON());

      $(this.el).append(lTemplate);
    }, this);
    return this;
  }
});

var lItems = new ItemList;


var AppView = Backbone.View.extend({
  el: "body",

  render: function(){
    var lItemsView = new ItemsView({model:lItems});
    var lHtml = lItemsView.render().el;
    $('#items').html(lHtml);
  },

  initialize: function(){
    var lOptions = {};
    lOptions.success = this.render;
    lItems.fetch(lOptions);
  }
});

  var App = new AppView;
});

Note: do not modify any of the above code. Use it as-is.

• Extra credit: do modify the above code.
• This is a substantial challenge for aspiring JavaScript programmers only.

Add script element for custom JavaScript file

In your exercise page, add a script element for your custom JavaScript.

You can use View Source and copy the code from the example page, or copy the code below:

<!--- Custom script for this exercise --->
<script src="week10.js"></script>

Note that the src attribute points to your custom external JavaScript file.

Create a JSON file, and change the data

Create a JSON file named data.json, similar to this example:

• http://mgdp2050.htcwebcreative.com/week10/data.json

Save the JSON file in your week10 folder.

Change the item names ("Solid Gold Submarine", etc.) to names of your choice, related to your project topic.

Upload work to server, and test

Note that you must test this exercise online -- it will not work locally. The JSON data must be served by a web server.

• Alternative: use MAMP or XAMPP, which are web servers you run on your local computer.

Make link from Home page to exercise page

Make link from your Home page to your exercise page.

Upload your Home page, and test the link to your exercise.

Update your home page

On your Home page, make a link to this exercise.

For next week

Work on your project.

Questions to ask yourself

• What are my goals?
• Have I defined my project to my satisfaction?
• Do I know what I really want to accomplish?
• Do I have a wireframe? Does it reflect my goals?
• Does the wireframe show three layouts, for three device sizes?
• About the device sizes ...
  • Do I know how to make columns and rows in Bootstrap?
  • Do I want to hide some information in smaller devices?
  • Are my images responsive, and appropriate for different device sizes?
  • Does my navigation bar work, and make sense?
  • Will users be able to find what they are looking for?

And:

• What questions do I need to answer next? What is the critical path for my project?
• Can I answer them for myself?
• Should I ask the instructor?

Yes, you should feel free to ask the instructor about your project.

I am happy to help you with anything -- answer questions, help you write HTML and CSS, and so on.

Take action

• Write HTML.
• Write CSS.
• Write text copy, or use lorem ipsum, or both.
• Create (or obtain) images.
  • Resize images as needed.
• Upload your work to your class web server.