Throughout this semester, you will be completing weekly projects and submitting them through Blueline. In particular, the second half of Thursday afternoon classes will be hands-on sessions, where you will complete exercises to practice basic skills and begin work on that week's project. This lab is designed to be an orientation session for future labs and projects. You will practice some of the basic skills that you will use throughout the semester.
It is expected that individuals will enter this class with various tech backgrounds. For some, the problem-solving and programming skills developed in this class will be familiar. For many, however, the methods and skills required to develop interactive Web pages will be new and challenging. To accommodate all backgrounds and learning styles, this class has a fairly open collaboration policy. Students are encouraged to work together to learn the material and complete projects. Sharing ideas and helping each other to develop and debug code are allowed and can be very effective in learning the skills needed to complete projects. It is important to note that the final project submitted by each student must be their own work, so files cannot be shared or copied.
EXERCISE 1: Take a couple minutes to meet the people sitting around you. Share your names, home towns and interests. Collaboration is encouraged during labs and when completing weekly projects, so the people around you may be great resources to help you figure things out when you get stuck. They might even turn out to be great friends outside of class.
As you will learn in this class, creating interactive Web pages does not require complex or specialized software tools - any text editor will do. We recommend the Brackets editor, which is free, simple, and available for both Mac and Windows computers. If you do not already have Brackets installed on your computer, download the appropriate installer from brackets.io. Then follow the steps for installing the editor on your computer.
EXERCISE 2: Once you have installed Brackets, open the editor and create a new document by selecting "New" under the "File" menu at the top. Before you even type anything in the document, name and save the file by selecting "Save" from the "File" menu. Be sure to save the file in an easily accessible location (e.g., the Desktop or a CSC121 folder that you created) and name it using your name and the .txt extension (e.g.,
DaveReed.txt).Type the following information into your document to serve as a profile of you and your interests. It is highly recommended that you number your answers to match the prompts below
- Your name (as you prefer to be called)
- Your preferred pronouns (e.g., he/she/they)
- Your class (e.g., freshman/sophomore/junior/senior/other)
- The town you call home
- Your favorite movie
- Your interests (e.g., books, sports, music)
- Something interesting/unique about you (we all have something!)
- A brief description of any past experience you have had with computers and/or programming (e.g., high school course, self-study). Don't worry if you haven't had any!
- Your expectations of this course
- The names of three people sitting near you
Be sure to save the document when you are done or, better yet, save periodically to make sure you don't accidentally lose any work.
As you learn to develop your own interactive Web pages, one of the skills that will be useful is being able to locate and download images from the Web. The first step in this process is locating the image file. This may be trickier than it sounds, since many Web sites (e.g., Shutterstock) display images in a gallery but hide the actual files from the user. If you right-click on an accessible image, one of the options should be "Save Image as..." or something equivalent (depending on your browser). Note: if you do not have right-click set up on your mouse, control-click on a Mac or shift-F10 on a Windows computer work as well.
To download the image once you find it, right-click and select the "Save Image as..." (or equivalent) option. A window will appear in which you can select the location and name for the file. Note: when downloading images from the Web, you must be careful not to violate copyrights or otherwise infringe upon the rights of the owner - unless explicitly stated otherwise, you should assume that any image on the Web is private property.
EXERCISE 3: Locate an image on the Web that somehow resonates with you. It may be a picture of you or a family member that has been previously uploaded to a Web site. It may be of a person you admire or a sports team that you follow. Or it may just be an image that you find beautiful or inspiring. Download that image to the same location as your document, also under your name, e.g.,
DaveReed.jpg. When renaming the file, be sure you do not change the file extension, as the extension (.jpg or .png or .gif) identifies the format of the file.Once you have downloaded the image file, add the following information to the bottom of your profile document:
- The Web address from which you downloaded this image (e.g., dave-reed.com/Images/csdj.png)
- A few sentences that describe the image and why you found it interesting/relevant/inspiring
Today's digital cameras are capable of taking incredibly high resolution images. For example, the Canon EOS 5DS can take photographs consisting of more than 50 million pixels (or picture elements). Depending on the file format used, a single image can require anywhere from 5 to 75 MB of storage. When displaying an image on Web page, images of this size are overkill, as computer screens are incapable of displaying that high of a resolution. Plus, the time that it takes to download even a 5 MB image over the Web is significant. A good rule of thumb, which we will enforce in this class, is that images embedded in Web pages should never exceed 500 KB in size. Most images you find on the Web are much smaller.
If you have an image that exceeds the 500 KB limit, there are many applications that you can use to reduce the size of the image file. Preview is a simple tool that is preinstalled on Macs, while Paint is a similar tool for Windows computers. In both programs, you can open an image file and adjust its dimensions (width and height) and/or resolution (pixels per square inch) to reduce the file size. In Preview, this is done by selecting "Change size" from the "Tools" menu; in Paint, you simply click on the "Resize" icon. You can also save or export the image using a different file format. For photographs, JPG tends to be the most compact file format, requiring only a fraction of the space that the equivalent GIF or PNG file would take.
EXERCISE 4: Determine the size of the image file that you downloaded in EXERCISE 3. You can do this by right-clicking on the image icon, and selecting "Get Info" on a Mac or "Properties" on a Windows computer. If the size of your image exceeds 500 KB, use a program such as Preview or Paint to reduce its size so that it is below the 500 KB threshold. If the image is stored using a format other than JPG, simply saving/exporting that image as a JPG file might suffice. If not, reduce the dimensions of the image and/or its resolution to reduce the file size. Note even high-end computer screens are incapable of displaying more than 96 pixels per square inch, so this is a safe lower bound for reducing the image resolution.
For both health and environmental reasons, this course will be paper-free. You will submit all assignments via Blueline and receive grades there as well. You should have received basic training with Blueline as part of your RSP course. In particular, it is assumed that you are familiar with the steps for submitting an assignment.
When you need to submit more than one file for a particular assignment, the best (and preferred) method for this class is to create a single ZIP file that encapsulates all the files. To create a ZIP file, you first select all the files you want to submit and right-click for options. On a Mac, you select "Compress # items", which creates a file named Archive.zip that encapsulates the selected files. On a Windows computer, you alternatively select "Send to" and then "Compressed (zipped) folder".
EXERCISE 5: Create a ZIP file that encapsulates your profile document and your downloaded (size optimized) image. Once you have done so, change the name of the zip file to match your name, e.g.,
DaveReed.zip. You should double check that this ZIP file is correct by double-clicking on the file. This will unzip its contents, creating a new folder that contains the two files.Once you have created, renamed, and verified that the ZIP file works correctly, submit that ZIP file under Lab 1 in Blueline.