X1: Development Basics

 

This text is designed to provide a balanced coverage of computer technology and its impacts. The Concept chapters (C1-C12) focus on understanding important concepts in computing, such as how computers work, the history of the Internet and Web, and how computers and artificial intelligence are impacting society. The Exploration chapters (X1-X10) provide hands-on experience using a computer to create interactive Web pages. By experiencing the process of designing, implementing and debugging programs in a Web setting, you will gain a deeper understanding of the power and potential pitfalls of software. This chapter introduces to some of the development tools you will use throughout the text.

      Interactive Exercises

The Exploration chapters encourage developing programming skills using a tutorial format. That is, the introduction of new concepts and techniques are interleaved with interactive examples and exercises that demonstrate and reinforce those concepts and techniques. The interactive examples follow a common format, as shown in EXAMPLE 1.1 below:

To the right of the example is an editable box that contains the example code. In this example, there is just the simple sentence "My name is Dave Reed." in the box. To the left is a blue box that contains a button labeled "See in Browser". When you click on the button, the content of the box is displayed in a separate Web browser window.

The blue box at the left of the example also includes a link labeled "Download". This feature will be useful when you want to save the contents of the box to your computer. For example, you might be in the middle of completing an exercise in the box but need to pause to grab dinner or attend a class. If you close the chapter and later return, your changes will be lost, and the example will revert to its original contents. To save your work, click on the "Download" link. For example, clicking on the "Download" link in EXAMPLE 1.1 will download the contents of the box to your computer under the file name example1-1.html.

    Opening a Page

if you just want to view the document that you downloaded without any further edits, you do not need to copy its contents back into the example box. Instead, you can open that file directly in the browser. If the document is saved with a .html extension, simply clicking on the file icon will automatically open it in your default browser (e.g., Chrome). Alternatively, you can open the browser and select "Open File" under the "File" command at the top of the browser window. This will open a navigation window that will enable you to find and select the desired file that you wish to view.

      Text Editors

The interactive examples in this book are a simple and convenient way to explore new Web page features as they are introduced. If you want to create a complex Web page, however, a more advanced editing tool is needed. A text editor is a program in which you can type and edit text, then save that text in a file. Common examples are NotePad, which comes free with Microsoft Windows, and TextEdit, which comes free on Apple computers. Many software companies also offer free or low-cost text editors that provide special features, such as automatic indentation, color coding and helpful error messages. Phoenix is an example of a simple and free text editor that is available for both Windows and Apple computers. Below, we describe the steps involved in creating, editing and saving documents in the Phoenix text editor.

    The Phoenix Editor

The Phoenix text editor has features that make creating and viewing Web pages simpler and so is ideal to accompany this text. It comes in both a desktop version (which must be installed on your computer) and an online version (which requires no installation). To access this online version of Phoenix, go to phcode.dev. The first time you visit this site, you will be prompted to create a Project (FIGURE 1).

A Project is just a folder on your computer where your documents will be stored. Since you will be creating HTML documents (i.e., Web pages) throughout this text, click on the HTML5 icon to create a Project customized for Web pages. This will open a box in which you will select the name and location of your Project (FIGURE 2).

Click on the "Please select a folder..." button and select the location for your project. The location should be somewhere easily accessible, such as the Desktop or your Documents folder. Once you have selected the location, click on the "New Folder" button to create and name the Project folder. For example, if you are using this text in a class, you might name the Project after the class (e.g., CSC121). After the Project folder is created and named, click the "Select" button to finalize its creation. At that point, you will receive a prompt to confirm that Phoenix has your permission to view files in that Project folder (FIGURE 3).

Click on the "View files" button to give the Phoenix editor permission. Then, click on the "Create Project" button to finalize the Project creation. You will receive yet another prompt to confirm that the Phoenix editor will have full access to files in the Project — click on the "save changes" button to confirm this (FIGURE 4).

At this point, you will see the development screen, which is divided into three panels (FIGURE 5). On the left, is a listing of Project files. The Project you just created should be listed there, with some files that are automatically created by Phoenix. You can ignore these. The middle panel is where you will create and edit files. The panel on the right is for viewing the files you create. Click on the "Trust & Execute Preview" button to enable file previewing.

Now that your project folder is fully set up and you have given Phoenix permission to access and edit files in that folder, you are ready to create a simple Web page. Click on the "File" command at the top of the middle panel and select the "New File" option. This will create a new file named "Untitled-1" in your project. You can change this by typing the desired name (e.g., info.html) in the box in the left pane (FIGURE 6). If you already hit enter before changing the name, you can always right-click on the file name and select "Rename" to rename the file as desired. Note: if you do not have right-click enabled on your mouse, control-click on a Mac or shift-F10 on a Windows computer work as well.

Once a file is created, you can enter text into the file (via the middle pane) and use common editing operations (backspace, delete, return, and arrows). FIGURE 7 shows the file named info.html with the text "This is a VERY crude Web page." typed in the file. You may note that there is a small circle to the left of the file name in the left panel, and also to the right of the file name at the top of the middle panel. This circle denotes that the file has been edited since it was last saved. When you save the file to your folder (by selecting "Save" under the "File" command), the circle will disappear. The pane on the right displays a preview of this page as it will appear in a Web browser. You may need to click on the lightning bolt icon at the top right of this pane to initiate the live preview. Each time you edit and save the file, the preview will update to display that document.

At this point, you may not be overly impressed with the live preview pane. It just displays the same text that was entered into the file, although it does perform line-wrap as needed to fit the pane. In the next chapter, when you learn to add non-trivial content to a Web page, the value of this preview will become apparent.

      Downloading an Image

As you learn to develop your own Web pages in subsequent chapters, 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 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.

Today's digital cameras can take incredibly high-resolution images. For example, the Fujifilm GFX 100 II can take photographs consisting of more than 100 million pixels (or picture elements). Depending on the file format used, a single image taken by that camera can require up to 150 MB (megabytes) of storage. When displaying an image on a 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 15 MB image over the Web can be significant. A good rule of thumb is that images embedded in Web pages should never exceed 500 KB in size. Most images you find on the Web are much smaller.

Determinnig the size of a dowlnoaded image is easy: right click on the image file and select either "Get Info" (on a Mac) or "Properties" (on Windows). Information about the file, including its size, will be displayed in a small window. 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.

---

      Chapter Summary

• Interactive examples, which are embedded in upcoming Exploration chapters, demonstrate and reinforce concepts and techniques as they are introduced.
• Each example has a box that contains example code. By clicking on the "See in Browser" button, you can view the example in a separate browser window.
• Since the box is editable, you can make changes or additions to sample code and view the results in a browser window.
• You can download the contents of an example box to your computer by clicking on the "Download" link.
• If a document is stored in a file with a .html extension, double-clicking on its file icon will open that document in your default browser.
• A text editor is a program in which you can type, edit and save documents.
• Phoenix is a free, multi-platform text editor that is available in both desktop and online versions.
• The Phoenix editor has multiple features that are optimized for editing Web pages and so is ideal for accompanying this text.
• To download an image from the Web, you must first locate the image file and then right-click and select "Save Image as..." or something equivalent (depending on your browser).
• If you rename an image file, you should NOT change its extension (e.g., .jpg, .png or .gif) as this identifies the format of the file.
• Image files on the Web should not exceed 500 KB (kilobytes) in size, as larger files can take significant time to download, and screens are incapable of displaying high resolutions. Applications such as Preview (for Macs) and Paint (for Windows) can be used to reduce the size of image files.

---

      Projects