Throughout this semester, you will be completing weekly projects and submitting them through Blueline. In particular, Thursday afternoon class periods will be online lab sessions, where you can either review course concepts with the instructor or work on that week's project with the assistance of a TA. This lab is designed to be an orientation session for future lab sessions. You will meet your peer group and practice some of the basic skills that you will use throughout the semester.
Each Thursday afternoon, you will have the option of working on your project in a Zoom breakout room with 10-20 students and a TA moderator. You should have your Zoom camera active while working (with the microphone muted, by default). This will allow you to speak to your group, raising questions that may arise as you work. Helping and learning from each other is strongly encouraged. Screen sharing will be enabled, so that students can display their work and receive feedback/advice from peers or the room moderator. In addition, you may find it useful to schedule times outside of class to meet and work with students from your group. That is up to you.
EXERCISE 1:Briefly get acquainted with the students (and room moderator) in your group. These are people you will be working with throughout the semester and will be a great resource for help and ideas.
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). Type the following information into this document to serve as a profile of you and your interests:
- 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
Save your document on the Desktop of your computer using your name and the .txt extension (e.g.,
DaveReed.txt). Double check to make sure all 9 items listed above are included in your file!
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 your Desktop 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 file, add the following information to the bottom of your profile document:
- The Web address from which you downloaded this image
- 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 (and 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.