Difference between revisions of "Week Ten (MGDP2050)"

Revision as of 10:42, 12 April 2016

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 is playing a special role, as an Underscore template.
• The ol element is where the Backbone will render (display) content.

In both cases, the id attribute is essential.

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 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.

Make link from Home page to exercise page

Make link from Home page to 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.