ckportfolio.com - AJAX-based Microsite: Placeholders

AJAX-based Microsite: Placeholders

Connection

We can make the connection to the server via "Open Connection." In this window, make sure that you have "SFTP (SSH File Transfer Protocol)" selected, and populate the fields using the following information:

  • Server: ocad.ckprototype.com
  • Port: 22 (Must select SFTP from the dropdown menu)
  • Username: ocad
  • Password: 100mccaulst

Placeholders

You can leave the rest of fields blank. Click "Connect," and you should be able to see the list of folders upon successful connection. In this particular hierarchy level, make a new folder by right-click (control + click on Mac) and selecting "New Folder." You can name this folder after your own name (ex. chris).

In order to ensure that you are not editing somebody else's files, double click into the folder that you have just created. In this folder, let us create a very simple HTML file via "New File" command located in the aforementioned context menu. Set "index.html" as your filename.

We can edit this new (but empty) file via "Edit." Select the file, and click the icon that says "Edit." You should be able to see the Sublime Text icon above the text. Otherwise, make the connection between Cyberduck and Sublime Text again.

You should see an empty document, which you can populate and save. Upon saving, this temporary file will be immediately committed to the FTP server. While volatile and far from error-proof, this approach is relevant for an exercise like this. You can access this file via the following URL:

http://ocad.ckprototype.com/public/[YOUR FOLDER NAME]/index.html

Replace [YOUR FOLDER NAME] with your folder name, and you should be able to see a very simple document that you have just populated via Sublime and Cyberduck. Now we can proceed with the actual development process. We can no longer use jsFiddle's quadrants or options to easily implement JavaScript and CSS changes. Instead, these connections must be made explicitly and manually.

Instead of tackling them individually, I created an archive containing a number of files that will bring you up to speed. Please download the ZIP file named "Week 3 Materials" in Week 3 Module, extract its contents, and upload the resultant files and folders to your current FTP folder. You can feel free to overwrite the original index.html.

You should see that your folder now contains a number of documents: numerous image files, one HTML file, and another CSS file. Going forward, we want to create a few more files here:

Folder

  • js

Files

  • script.js (under js folder)
  • about.html (root directory)
  • contact.html (root directory)
  • home.html(root directory)

Our script.js file will hold all our JavaScript code (previously as written in the JS quadrant in jsFiddle), and the three HTML files are responsible for editorial content.

Screencast Recording

https://drive.google.com/open?id=14Zms3mPoeFNr14l69g_xKwC0ScpP56kD

Fin