Agenda

Introductions

Course Overview

Learn more about the course to help you determine if this is the right class for you.

Review the COMP1950 resources available to help you with this course.

Orientation: Sharefile

BCIT lab computers are re-imaged each day. Files you save on the local C: drive of a lab computer will be erased after the computer power is cycled.

Options For Saving Files:

Orientation: Course Materials

COMP 1950 homework assignments, quizzes, in class exercises and example code can be accessed via Desire 2 Learn (D2L). Use your BCIT student number and password to access D2L. Course materials will become avilable as the course progresses. It is your responsibility to log in and download files as they become available.

If you have difficulty gaining access, consult the D2L help documentation, or contact BCIT Tech help desk at 604-412-7444 (Toll free: 1-800-351-5533).

Orientation: Web space

Each student will get a personal webspace where you will publish your homework assignments. This is not a continuation of your COMP1850 site (if you had one). This site is primarily for you to house your exercises, assignments and group work. Make it a site that is usable and functional.

Connect to your bcitcomp.ca account via FTP

Use Filezilla, or any FTP client to connect to bcitcomp.ca. The bcitcomp.ca server provides you with a space on the internet where you can publish your homework and assignments.

  1. Choose: File->SiteManager->New Site, then describe the FTP server, eg "bcitcomp.ca"
  2. Host: bcitcomp.ca
  3. Port: 21
  4. User: {yourBCITStudentNumber}@bcitcomp.ca (use an uppercase A when typing your BCIT student number)
  5. Password: ???
  6. Servertype: FTP File Transfer Protocol
  7. LogonType: Normal
  8. Click: Connect
  9. If you experience connectivity problems, re-check your input, or ask your instructor for assistance.
Filezilla FTP login screenshot

Tools: Visual Studio Code

There are several development tools to choose from. In COMP 1950 we will use the open source Integrated Devlopment Environment (IDE) from Microsoft called Visual Studio Code (VS Code). This is more than a simple text editor, it provides robust code editing, maintenance and testing features, as well as supporting plugins to further increase it's capabilities.

Lab Computers

VS Code should already be installed on COMP1950 lab computers. The executable is found at C:/Program Files/Microsoft VS Code/Code.exe

Laptop / Home Desktop

Download VS Code for Windows, Mac or Linux.

Exploring VS Code

Your instructor will demonstrate some of it's capabilities in class. On your own time, you may wish to review the help documentation 'Get Started' section to give yourself a better understanding of some of the basic features and functions provided by VS Code.

Tools: Browser-based development

There are three major web browser platforms to consider:

Remember to test your work in as many browsers as you can! BrowserShots allows you to do basic testing for earlier versions of Chrome, Firefox, Safari, and Opera. If you need to test for early iterations of IE, try: Netrenderer

Tools: Extensions

Extensions can add more functionality and features to your development browser.

The Web Developer Toolbar is available for Chrome, Firefox and Opera. Some useful features include:

Search online to see what is available for your development browser:

Browser Based Diagnostic Tools

As web pages get more complex, it can become difficult figuring out what is going on. For example, CSS rules that override other CSS rules, if spread across several files, can be challenge to make sense of. Having a diagnostic tool to assist in developing will make it easier to examine every detail of web pages.

Most modern browsers have some kind of development environment that can be turned on or triggered via extensions and/or plug-ins.

Web Browser Tools

Get familiar with using one of these tools. They are invaluable for understanding code and for finding, diagnosing, and fixing problems with code. You will be required to use them in the classes ahead. Practice adding/editing/removing both HTML and CSS using your development browser's built in tools.

Typical Features

NOTE: changes you make with the tool are client based, and do not affect the server side HTML/CSS files. Client side changes made with this tool are temporary (they will be lost upon page refresh).

The capabilities of these browser tools go well beyond outlining, examining and editing. They provide deep troubleshooting capabilities of the HTTP network, javascript and even XHR (XMLHttpRequest).

Standards: W3C

Just as those who manufacture physical goods are expected to follow the International Organization for Standards (ISO), web developers are expected to adhere to the standards described by the World Wide Web Consortium (W3C)

W3C: World Wide Web Consortium

W3C Goals

  1. Universal Access: To make the Web accessible to all by promoting technologies that take into account the vast differences in culture, languages, education, ability, material resources, access devices, and physical limitations of users on all continents;
  2. Semantic Web: To develop a software environment that permits each user to make the best use of the resources available on the Web;
  3. Web of Trust: To guide the Web's development with careful consideration for the novel legal, commercial, and social issues raised by this technology.

Why web developers should follow W3C standards:

Discussion:

Learn more abou the W3C and standards based devlopment from the Web Standards Project.

Standards: Web Development

Three goals of standards-driven web development:

  1. Compatibility (creating web pages that work well in all browsers)
  2. Portability (writing code that works well in any computing environment/operating system)
  3. Accessibility (produce web pages that are optimized for search engines, screen readers, etc)

Requirements

Standards: File and Folder Naming

HTTP urls cannot contain certain characters, and certain characters will cause unwanted effects and behaviours when used in a url. Follow best practices for all file and folder names:

Standards: File Management

Standards: Code Style and Organization

In COMP1950 students are expected to present a readable, well organized code style:

Semantic Markup

Highly semantic HTML content is crucial for usability, accessibilty and search engine optimization.

What is Semantic Markup?

Building Content Relationships

Logical vs. Physical Styles

Logical Styling

Key Advantages Of Semantic Content

To Do

...and yes, there will be a practical, open book quiz at the start of session #2! (hint: practice using a browser based diagnostic tool)