Inline vs. Block Elements

HTML elements are described as either inline or block, depending upon how they are arranged on the web page (Table 1-2). Inline elements fall into a series from left to right, like letters or words on a page (in a Western literary tradition)—like print elements with spaces in between. Block elements arrange themselves vertically on the page, like page elements with paragraph returns after them.

HTML, CSS, and JavaScript

1. Within the tag, or inline, such as <p style=”text-align: left”>
2. In the head of the document, or embedded, and enclosed with <style></style> tags and enclosed by braces {} after a selector that designates what tag the specifications are applied to
3. In a separate document of filetype .css

Text

Self-closing Tags

• The break <br /> tag, which creates extra vertical space between elements
• The horizontal rule <hr /> tag, which draws a horizontal line across the page
• The image <img /> tag, which inserts an image

CSS Selectors

• Tag selectors, such as body, div, p, h1, or any other tag, written by itself
• IDs, named elements that are used only once on the page, indicated by a hash or number symbol (#)
• Classes, for multiple use, indicated by a period (.) before the name of the class

CSS Style Declarations

Comments

• HTML comments are enclosed in tags starting with an exclamation point and two dashes, and ended with two dashes:

  <!-- HTML Comment -->

• CSS and JavaScript comments start with a forward slash and asterisk, and end with an asterisk and forward slash:

  /* CSS Comment */

JavaScript

Chapter 2 - Files and Links

Chapter 4 - The Semantic Web

Chapter 5 - Styles and CSS

Chapter 6 - Image Optimization for the Web

Chapter 8 - Animation

Chapter 9 - Javascript

Chapter 13 - eBook Production

Chapter 14 - Digital Photography for Web and Cross-media

Chapter 15 - Photoshop for Web and Cross-media

Chapter 16 - Apps for iOS

Book Cover Image

• inline or local styles are written right in the HTML tag and take precedence over other styles. Example: <p style="font-family: Arial; color: dimgray">. The advantages of the inline/local style are that it is easy to write, easy to understand its effect on the corresponding tag, and overrides other styles. The disadvantage is that writing the same style for multiple tags could be laborious.

• embedded or global styles are written in the head of the document and apply to the entire document. Embedded styles are overridden by inline/local style sheets but not by external CSS files. Embedded/global styles are written inside opening and closing <style> tags, and the specifications are enclosed in braces {}. The advantage of the embedded/global style is that it is easy to write and see the effect of the specifications since the style is at the top of the same document it controls. The disadvantage would be that the global/inline style statement would need to be copied to all pages that use the same styles.

• external CSS  files are files of type .css that are linked to a document using the link tag (e.g., <link href="styles.css" rel="stylesheet" type="text/css">. External CSS do not need a <style> tag and simply include the styles enclosed in braces. External CSS files are overridden by both embedded/global styles in the document head and inline/local styles in the tags. The advantage of the external CSS file is that it can be linked to and set the styles for more than one page.

Styling Specifications

How to Write Styles

1. Inside a tag, such as a paragraph, <p>, write style="", placing the style specifications inside the quotation marks. (Use vertical quotation marks rather than left- and right-handed quotation marks.)
2. Follow each attribute with a colon, and end the specification with a semicolon.
3. Example: <p style=“font-family: Arial, Helvetica, sans-serif; font-size: 12pt;”>

1. In the head of the document, place opening and closing <style> tags.
2. Inside the style tags, write selectors (the names of tags, without the less-than and greater-than symbols), open a brace {, write the attribute with a colon and the style specification ending in a semicolon, then close the brace }.
3. Designers customarily begin the next selector tag with the closing brace from the previous tag and then open the succeeding brace, so the tag looks like it is surrounded by backward braces. This makes the style specifications easier to read.

Selectors—Tags, IDs, and Classes

• Tags—To use a tag as a selector in global/embedded or external CSS, simply type the tag inside the <style> statement in the head or in the external .css file, followed by the style specifications enclosed in braces. Tag selectors apply to all tags in the page, unless overridden by an ID, class, local/inline style, or “!important” specification.
• ID—To assign an ID, add ID="name" inside the tag. An ID can only be used once in a page. Select the class in CSS using “#name.”
• Class—To assign a class, add class="name" inside a tag, then select in CSS using a period before the name, e.g., “.name.”

Colour in CSS

• name refers to the 140 named colours on the web, such as aliceblue, dimgray, or chartreuse. Examples: color: dimgray; background: aliceblue;

• RGB refers to red, green, and blue values on a scale of 0–255, where 0 is black, or no colour, and 255 is maximum colour. Example: color: rgb(127,127,127) would be grey.

• RGBA includes an additional specification for opacity, on a scale of 0 to 1, with two-decimal accuracy. Example: color: rgba(127,127,127,0.50).
• hexadecimal includes colour values designated with six characters on a scale of 0 to 16. Digits above 9 are represented by letters A–F. Example: 0000FF is blue.

• hexadecimal short uses six characters to designate colours. Example 00F is blue.

Float and Clear

Spacing

• One value means spacing is the same on all sides.
• Two values represent top/bottom and left/right.
• Four values specify space from the top in a clockwise direction (top, right, bottom, left).

Position

• sticky—the element stays in place. This is used for menus and other references that the designer wants to remain visible to users after scrolling.
• absolute—the element remains in the same location relative to a container that it’s in.
• fixed—the element remains in a set location, defined by coordinates from the top or bottom and left or right of the window. This is useful for creating anchors that for example allow readers to return to the top of the page.

Pseudoclasses for Interactivity

• :link—defines the appearance of a tag when it has not yet been clicked. E.g., the default appearance of links <a> is blue type with an underline.
• :hover—appearance of the tag when readers hover the mouse over it. This pseudoclass is valuable in providing feedback that the user is in the correct location to click a link.
• :active—appearance of the tag when clicked. Again this could be a followup to the :hover pseudoclass by providing feedback that the link has actually been clicked and some action should follow.
• :visited—appearance of the tag after it has been clicked. Again, the default appearance of links that have been visited is purple text with underlining.

“Child” Pseudoselectors

Creative Effects in CSS

• Gradient—CSS can include gradient backgrounds (Figure 5-3). The gradient can be linear or radial, include two or more colours, and have a direction specified in terms of right/left, top/bottom or at an angle.

• Drop shadows—These can be applied to text (text-shadow) or to rectangular items (box-shadow, Figure 5-4). Specifications include the horizontal offset, vertical offset, blend distance, and shadow colour. Example: text-shadow: 3px 3px 6px gray; [caption id="attachment_181" align="aligncenter" width="400"] Figure 5-4. Two examples of drop shadows, one applied to text (text-shadow) and another to the paragraph (box-shadow). Image Richard Adams. Image licensed under CC BY 4.0. [/caption]
• Flexible box layout—The “display: flex” and accompanying style specifications can be used to determine the distribution of multiple objects on a page. A common use is to center items horizontally and/or vertically (Figure 5-5).

• Viewport width (vw) and viewport height (vh) measurements—These scalable measurements (Figure 5-6) take the place of fixed measurements like pixels (px) and are great for responsive design. One vw is equivalent to 1% of the viewport width. The vw and vh units can be used to size tags, type, leading, margin, and padding.

• Drop caps—Large first initials (Figure 5-7) can be created by selecting the first letter of a paragraph, either by using a <span> tag around the letter or by using the pseudo-element ::first-letter (e.g., p::first-letter). Then specify font size in percent or em, line-height to get the desired vertical position, colour, and margin.

Variations in Web Browsers

 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 4s;

File Organization

• Going down: If you place an image, “image.jpg,” that resides in a folder, “images,” then you must specify <img src=“images/image.jpg”>, including the folder followed by a forward slash in the file specification.
• Going up: If in another page of your site, that’s contained in a folder, “HTML,” you want to use the same image, you must first specify an upward path from the “HTML” folder into the root folder, <img src=“../images/image.jpg”>. The two periods and slash tell the browser to go up one folder and then down into the “images” folder.

• Relative hyperlinks are to pages on the same server, such as “page2.html” in Figure 2-2. Example of a relative link: <a href=“html/page2.html”>Page 2</a>.
• Absolute hyperlinks go to a link on a different server, usually someone else’s page on the web. An absolute link: <a href=“http://www.ryerson.ca”>Ryerson University</a>.

Dreamweaver’s Site Manager

Site Maps

Web vs. Print

Web Image Formats

Working with Images

Animation Concepts

• Stage. The screen, or drawing board, or pasteboard, are represented as a “stage” for the moving objects.
• Drawing. Users must be able to draw objects, including points, lines, curves, fills, and strokes.
• Timeline. To make objects move on the stage at the desired speed, users must have a timeline, measured in frames/sec., and in the total number of frames. Commonly used frame rates are 20, 24, and 30 fps. Round numbers facilitate calculating the total number of frames needed for an animation of a specified time.
• Keyframes. A concept borrowed from film animation, keyframes identify transition points in the action. The program “fills in the blanks” in between user-drawn keyframes through the process of tweening.
• Layers. To organize and work easily with multiple moving objects, it is convenient to place each object on a separate layer.
• Scripting language. A control language enables users to control and interact with the animation. Interactions include starting and stopping the animation, or moving to specified points in the timeline.

Methods of Animation

CSS Animate

User Interaction

Animation with jQuery

Syntax: (selector).animate({styles},speed,easing,callback)

• selector is the ID or class of the item to animate
• styles is a list of styles to be animated
• speed is the duration of the animation, specified in milliseconds or as "fast" or "slow"
• easing is the relative speed at the beginning and end (linear or swing)

Animation with Tumult Hype

Constructing a Web Page

The Four “Ws” of Web Design

1. Design for Width. Although the web designer does not know the width of the user’s browser window, he or she can design for numerous possibilities by specifying width as percent and by implementing “responsive design” through the use of media queries (see Chapter 5). Whatever the width of the browser window, users can scroll to access the page’s height dimension.
2. Who. Although target audiences can be defined and/or assumed, we never know who will be viewing our web pages. Regardless, we want to welcome all appropriate readers and enable them to conveniently read the information on our site.
3. What. We do not know what equipment the user has, e.g., Macintosh or Windows computer, tablet, or smart phone; screen size; browser; installed fonts; internet connection speed; and other factors. Still, we try to create designs that look good on the widest variety of devices.
4. Where. We do not necessarily know where our readers came from, but we still want them to find our site appropriately and not to lose the link to our site. For example, when linking to another site, using the target="_blank" specification will cause the linked site to open in a new tab or window, thus preserving the reader’s access to our site.

Links

• local or relative links—These go to other pages in a site. Format: <a href="filename.html">. The complete path to the file must be written in the tag. E.g., the above tag assumes that "filename.html" is present in the same folder as the current file. If it was in a folder called “pages,” the tag should read <a href="pages/filename.html">
• anchors—Anchors to go to another location in the same page. The destination is represented by a tag with an ID, and the ID is cited in the anchor. E.g., <a href="para1">. Anchors are often used to allow readers to conveniently navigate back to the top of the page or to an area further down on the page.
• global or absolute links—These go to other sites, e.g., <a href="http://www.ryerson.ca">. Again, specifying target="_blank" will open the linked site in a new browser tab or window, preventing readers from losing our site.

Forms

Video Programs

• deleting scenes that you don’t want
• splicing scenes you do want into a continuous sequence
• adding transitions between scenes
• adding titles
• creating special effects, such as time-lapse
• deleting sound and adding a voiceover (narration)

Video Tags

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

Apple iMovie

Opening a Movie

1. Transfer your unedited movie from your camera to your computer.
2. Open iMovie and select one of the readymade themes (or No Theme).
3. Select Import Media and open your unedited movie, which will come into the Clips window.
4. In iMovie, select the entire clip and move to the editing window.

Deleting Unwanted Footage

1. In the editing window, place the play head where you want to cut the clip. Placing a marker (M) is a convenient way to evaluate a starting and stopping point. Then select Split Clip (B).
2. After splitting the clip you can select and delete the sections you don’t want.

Adding Transitions

1. From the Content Library, select Transitions.
2. Find the transition you want and drag it in between two clips, or at the end of a clip. In the example, a Fade to Black transition was added to the beginning and end of the movie. The length of the transition can be set in seconds and tenths.

Adding Titles

1. From the Content Library, select Titles.
2. Find the title you want and drag to the location where you want it to appear—at the beginning or end of the clip, or in the middle. None of these locations add time to the movie. The title can be placed before the start or after the end of the clip, which lengthens the movie.

Lowering or Deleting Sound and Adding Voiceover

1. To lower the volume in a clip, select the clip and, using the Volume Adjust control above the play window, reduce the volume 100% to the level you want. The volume can also be faded in and out by dragging the dot above the volume level line in the sound window.
2. To delete sound, select the clip and then choose Modify > Detach Audio. The audio will appear below the clip as a green line. Select this line and delete.
3. To add a voiceover, select the clip and move the playhead to the location where you want to start the narration.
4. Choose Window > Record Voiceover. The microphone icon will appear below the play window.
5. Click the start button, speak into the microphone, and click stop when finished. The narration will be added to the clip.

Exporting

1. To export your edited video, click the Share button (or File > Share), then select File.
2.  The dialog box offers a choice of resolutions for output, along with an estimate of the file size. Note that file sizes are proportionally larger with HD-720 and HD-1080 than with SD.

ePub

• The “KISS” principle (keep it super simple) works best for ePubs — one text box, one photo/diagram, and one caption per page.
• All page items (text, photos, illustrations, etc.) must be inline in a single text box. Inline means the objects are pasted into the text box using the Text tool.
• All text needs to be styled, such as Body, Header, Caption, etc., especially when the Table of Contents Styles feature will be used.
• Don’t build a table of contents because the eBook reader will make it. However, do make a Table of Contents Style because the export dialog box needs this to create the table of contents file for the ePub.
• Don’t worry about automatic page numbers because pages will be numbered by the eBook reader app.
• Save the cover as a JPEG image file and added to the ePub in the export dialog box.

iBook

• photos and diagrams
• image galleries with multiple, related photos
• 3D objects in Google Collada (.dae) format
• 360° rotatable views of objects
• panoramic views of scenery that stretches across multiple photos
• video and audio
• encapsulated web pages and sites

Wordpress Pressbooks

Questions to Consider when Writing an eBook for Class

Audience

• Will the audience be using primarily an iPad tablet, Android tablet, eReader, Mac computer, or Windows computer to read the book? Keep in mind that only iPads and Mac computers can read iBooks.
• Will the book consist mostly of text or also include photos, videos, animations, and other media? Media works best in iBooks.

Subject

• Are you teaching a technology that’s relatively new and for which there are relatively few textbooks?
• Are existing textbooks expensive and/or heavy or bulky?
• Do existing textbooks include a lot of information that’s not relevant to your class?

 Distribution

• Do you use a distance learning program to distribute information for your class? Keep in mind that eBooks—especially those with many photos and media—can be rather large files.

1. To lay out the chapter in iBooks Author, open a new document and select Import > Chapter from Word or Pages.
2. Drag-and-drop photos into the appropriate places on pages. The photos will automatically create a photo “widget,” or interactive element, which can include a sequential number, title, and caption, along with a background and border. Photos can be anchored to specific locations or to text.
3. Drag-and-drop the video into the page. iBooks Author will optimize the video and create a widget as it would for a photo.
4. Let’s say that the author wants to include an animation of the inkjet printing mechanism. The easiest way to include this in the iBook would be to do the animation in Tumult Hype, which can export animations as widgets.
5. To export the iBooks Author file to an .ibooks file, select File > Export > iBook.

Adobe InDesign

1. To create an ePub in InDesign, the authors recommend starting with a new document for Electronic Publishing at half the resolution of an iPad (512×386 pixels). The page layouts in InDesign (Figure 13-1) will look approximately as they will in the finished ePub.
2. Again, the chapter on Large-Format Printing (see above) can be imported into InDesign.
3. All page elements for ePubs need to be laid out “inline,” which means the page can only contain one text box (e.g., not separate text boxes for the body, picture captions, and sidebars). “Inline” means that photos need to be placed outside the page, then cut and placed with the i-beam tool as text.
4. Keep in mind that ePubs were designed to facilitate reading of text-heavy documents, not for complex page layouts with multiple, related graphics and captions. In other words, each page will look best if it includes only one graphic and related caption.
5. Videos can be placed but will only show up when the ePub is output as fixed-layout (FXL). Likewise, an animation would need to be saved as an animated GIF and therefore could not include interactivity (i.e., no start/stop buttons).
6. All text should be specified using Paragraph Styles in InDesign. Appropriate styles may include Body Text, Heading Text, Caption Text, and Figures (since inline photos behave as text).
7. If an automated Table of Contents Style is set up and specified upon output, it will create a table of contents that can be accessed on the eBook reader.
8. The cover should be created as a separate document, saved as a graphic (e.g., JPEG, PNG, GIF) and identified upon output.
9. To output the ePub from InDesign, select Export > ePub (Reflowable).

Wordpress Pressbooks

1. To lay out the Pressbook, go to Pressbooks.com and set up a new account.
2. Open a new document and place the text file containing the chapter.
3. Media can be added similar to iBooks Author and InDesign (Figure 13-2).

1. Before mounting the camera, familiarize yourself with the controls for exposure mode, ISO, aperture, shutter speed, white balance, and auto/manual focus.
2. Turn autofocus on. It’s often more accurate than the eye. But prepare to turn off for the gray card.
3. Set ISO to 200. (Higher is more light-sensitive but also more grainy.)
4. Mount the camera on the tripod or copy stand.
5. Turn on and position the studio or copy stand lights.
6. Choose an aperture for the depth of field you want—e.g., f/8 for portrait or copy work, f/16 or higher for 3D objects.
7. Compose your photo with a flat subject on the copy stand, a 3D subject on a product photography stage or illumination tent, or portrait against a backdrop.
8. Show the camera an 18% gray card, turn off autofocus, and set the exposure to get EV of 0. (Autofocus won’t work if it can’t detect edges.)
9. Set white balance on the gray card.
10. Bracket your exposures. Adjust the shutter speed ±0.3, 0.5, and/or 1 EV. Bracketing only takes a few seconds and will give you a range of exposures from which to choose on a large-screen display and with the help of levels or dot area measurements.

Camera Models

• Professional point-and-shoot cameras may be slightly larger and heavier than pocket cameras, but offer the ability to set exposure, aperture, and white balance manually. They can also capture images in camera raw format.
• Mirrorless cameras offer the same controls as DSLR cameras, but lack optical viewfinders, which saves space and weight. This type of camera is especially useful for photographers who have gotten used to composing images on-screen rather than by peering through a viewfinder.
• DSLR cameras are based on film cameras and include a traditional viewfinder. The term “single-lens reflex” comes from the camera’s use of a single lens (rather than a separate viewing lens, as in rangefinder cameras). A mirror directs light from the lens to the viewfinder and flips up, or “reflexes,” when an exposure is made, allowing light to reach the sensor.

Camera Settings

Mounting and Lighting Equipment

Camera Accessories

File Types

Adobe DNG Converter

1. Copy proprietary Camera Raw images from your camera’s SD card to a folder on your computer.
2. Start DNG Converter and browse to the input folder.
3. Designate a folder to contain the converted DNG files.

“Toning” Images

Making Transparent PNG Files

Saving Images for Web

Non-Destructive Editing

1. Preserving the original. Since non-destructive editing preserves the original pixels, you can always go back to the original image if you don’t like the results of your edit.
2. Making a record. Non-destructive edits provide a step-by-step record of changes, so that you can later go back to them. This could be useful when editing for a client, to show what edits were made and justify the time spent making them.
3. Working faster. Editing via layers and masks allows you to organize your edits, see what you are doing, and work faster and more efficiently.

Tools for Non-Destructive Editing

Tips for Non-Destructive Editing

10. Duplicate a Layer. Let’s say you open a digital photo in Photoshop and want to make some edits. The fastest way to edit non-destructively is to duplicate the Background Layer into which the photo is opened. Simply drag the layer to the New Layer icon in the Layers palette to duplicate it. Or select the layer and choose Duplicate Layer from the Layers menu or the upper-right popup menu in the Layers palette.
11. Retouch through a Layer. When retouching defects, artifacts, or undesirable features of an image, the Clone Stamp, Healing Brush, and Spot Healing Brush tools can be applied through a Layer (Table 15-2). Simply check “Sample All Layers” or choose “Current and Below” from the popup in the Properties menu. (Not all tools work through layers, see Table 15-3. In this case, duplicate the layer before retouching it.)

10. Use an Adjustment Layer to Change Tone or Colour. To improve contrast, brightness, highlight, shadow, gray balance, selective colour correction, and other adjustments, apply an Adjustment Layer to make these changes non-destructive.
11. Apply a Layer Effect. Layer Effects make it easy to add a colour blend, metallic effect, drop shadow, and many others in a non-destructive manner.
12. Use a Layer Mask. A Layer Mask hides, shows, or alters the appearance of its associated layer. Example: If you apply a colour fill to a layer, the colour can be selectively applied using a Layer Mask. Painting or filling with black negates the effect of the associated layer, while painting with white or the Eraser Tool reestablishes the effect.
13. Use a Smart Layer for Filters. Photoshop features dozens of filters that can add noise, sharpen, smooth, and otherwise alter the appearance of images. Applying them as Smart Filters to a Smart Object preserves the original appearance of the object or layer.

10. Place Smart Objects for Resizing. When another file, such as a logo, is placed into an existing file as a Smart Object and resized, Photoshop retains all the pixels in the original. This enables the size to be readjusted without loss of information.
11. Use Content-Aware Scale to Resize. One of several content-aware features, Content-Aware Scale uses artificial intelligence to resize images while retaining the original scene objects.
12. Use Content-Aware Fill to Remove. This feature is useful for removing objects from scenes, such as people on a beach. Select the object(s) with one of the selection tools, then apply Edit > Fill > Content-Aware.
13. Use Content-Aware Move to Move. If you want to relocate an object instead of deleting it, the Content-Aware Move tool examines surrounding pixels near the source and destination to make the moved object(s) blend in with the new background.

User #1

• Visually impaired
• Relies on a screen reader to consume content
• Uses a keyboard to navigate page links

User #2

• Colour blind
• Uses a retina display with a resolution of 2,880 pixels by 1,800 pixels
• Connects using a high-speed (over 10-megabit) connection

User #3

• No vision problems
• Uses a screen with a resolution of 1,280 pixels by 720 pixels
• Connects to the internet using a dial-up connection

User #4

• No vision problems
• Uses their mobile device, a resolution of 800 pixels by 600 pixels
• Has 3G speeds, but finds data costly

1. Organize your text in a document
2. Apply semantic HTML tags
3. Add images and create links as needed
4. Ensure images and links are described using alt and title attributes
5. Apply styles to text and format content
6. Use styles to position content
7. Integrate JavaScript for interactivity and changing browser behaviour

Semantic Code Example

Navigation: Home, About, Contact
Heading: Our First Page 
Body: Building an accessible website is as easy as structuring content with the appropriate tags.

<nav>Home, About, Contact</nav>
<header>Our First Page</header>
<p>Building an accessible website is as easy as structuring content with the appropriate tags.</p>
<img src="images/sample.jpg">

<nav>
  <ul>
    <li><a href="index.html" title="Head to homepage">Home</a></li>
    <li><a href="about.html" title="About this website">About</a></li>
    <li><a href="index.html" title="How to contact us">Contact</a></li>
  </ul>
</nav>
<article>
  <header>
    <h1>Our First Page</h1>
  </header>
  <p>Building an accessible website is as easy as structuring content with the appropriate tags.</p>
  <img src="images/sample.jpg" alt="Image of an accessible web page">
</article>

Comments on Flash and Similar Technologies

Responsive Design

• Specifying width in % rather than px, which enables the objects to be resized according to the width of the reader's browser window.
• Using a media query like “@ media only screen and (max-width: 500px) {}” to specify styles for the smaller screen(s).

Checklist for Responsive Design

• Menu and buttons
  • menu position, e.g., horizontal on large screen, vertical on small screen
  • :hover — change style when mouse is over tag
  • :active — change style when tag is clicked
• Page layout
  • change image display from text wrap (float) to block
• Change colour (color, background)
• Change contrast
• Change font
  • size (font-size)
  • leading (line-height)
  • bold
  • contrast
  • black/white vs. white/black
• Alt tag — use to describe images

Viewing Your Responsive Design

Search Engine Optimization

• Correct any spelling errors in the text.
• Add a title in the head of each page, <title>Title Goes Here</title>
• Add a meta tag with a description of the site, <meta name="description" content="description goes here">.
• Add a meta tag with keywords, <meta name="keywords" content="keywords go here">.
• Add “alt” tags describing all the images, <img src=”image.jpg” alt=”description goes here” />.
• Rename the html pages (and rewrite links) with a descriptive URL.
• Add some headings <h1>  that describe the text.
• Emphasize important words (that you want the web crawler to pick up) with emphasis <em> and bold <strong> tags.

What You Will Need

• A computer, preferably with a large-screen display, for each student
• An HTML-editing program, such as Adobe Dreamweaver
• An image-editing program, such as Adobe Photoshop.
• An animation program, like Adobe Flash or Edge, Tumult Hype, or similar. If using Flash, Google’s free “Swiffy” plugin enables exporting HTML5 that will work on iOS devices.
• Optionally, a server where students’ work can be uploaded to and viewed on the web. In this case, a file-transfer utility like “FileZilla” may also be useful.

Acknowledgments

About the Authors

Richard Adams is Associate Professor in Ryerson’s School of Graphic Communications Management, where he teaches document design, web design, and color management. After completing his Ph.D. at Cornell University and working with scientific publications, he later returned for an M.S. in Printing Technology at Rochester Institute of Technology. He has taught at several universities and was a research scientist at the Graphic Arts Technical Foundation (now the Printing Industries of America). At Ryerson he completed the Certificate in Web Design from the Chang School of Continuing Education.

Ahmed (Am) Sagarwala is Manager of Industry Relations at Ryerson’s Master of Digital Media, where he works with students in the graduate program. As an instructor, he teaches courses on digital literacy, design, and programming. He is also the president of Artform, a web technologies firm located in the Greater Toronto Area. He has his bachelor’s degree from Ryerson University’s School of Graphic Communications Management and a Master’s in Digital Media. He is currently researching and developing a web energy disaggregation platform and loves ASCII art.

1. Make a “gold master” folder on your desktop, such as “site,” and place final files in it.
2. Place the required .html, .css, and image files for your site into the folder.
3. Follow naming conventions for convenience:
   • Use all lowercase letters.
   • No spaces in file or folder names — use hyphen (-) or underscore (_) to separate words.
   • No absolute links to images, .css, .js, or other files (e.g., “file///MacintoshHD/images/image.jpg”) in your documents.
4. Make sure your home page is called “index.html” so the file will load automatically when the folder is entered.
5. If placing image, .css, and other files in folders, be sure to cite the folder name in the link. E.g., “images/image1.jpg”
6. If placing .html files in a folder, remember you will have to go up one directory level to get to the index file and other folders. Use “../” before the folder name.
7. Test the files to make sure all links work.

Orientation to Xcode

Program Example

Design the Interface

1. First we recommend designing the app’s interface by sketching it on paper or using a free mockup site such as Balsamiq.
2. After designing the interface, make a list of all the text fields, labels, and buttons that you will need. Each will require a unique name in the program. Thinking of names of more than a few object variables can be confusing, especially when they need to be paired with data variables.
3. In the list of objects, include the variables that you plan to use to store numbers and text for calculation or output.

Place Objects on the Storyboard

1. Place objects on the Storyboard, including labels for the app title, field labels, and output fields where numbers and text will be displayed; text fields for user input and buttons to initiate actions.
2. Right-click and connect all labels by drawing a line from the Storyboard to the ViewController. Assign variable names to all labels and text fields, and function names to all buttons.
3. In the ViewController, declare variables that will be used to hold data entered into text fields and calculations made by functions. Variables can be one of four types—string, integer, floating point, or double precision (Table 16-2). Each variable needs to have its type declared and be set to zero or blank.

Write Code

1. Inside the function, write code to store the text field numbers entered by readers into variables of type "String." Note that the text fields are converted to integer variables by adding the type Int to the front of the statement. Also both variables need to be “unwrapped” using an exclamation point.

    numberOfApples = Int(applesTextField.text!)!
   
    numberOfOranges = Int(orangesTextField.text!)!

2. Write a statement to add the numbers of apples and oranges:

    numberOfFruits = numberOfApples + numberOfOranges

3. Write a statement to output the number of fruits to the label field:

    answerLabel.text = String(numberOfFruits)

   Again the variable type must be converted from integer to string before being written to a label because labels can contain only string variables.

Debug and Test

1. Xcode has a live debugger. If the program finds errors in the code, it shows a red stop sign icon with an explanation. All errors must be fixed before the program can run.
2. Hit the Run button in the upper left corner of the screen to launch the Simulator and run the program. If the program has errors that have not been detected by the live debugger, the program could crash. A common source of crashes is multiple connections from one Storyboard object to the ViewController. In this case check the Connections Inspector (right-facing arrow at the top right of the screen) to make sure each object has only one connection.

Create an Icon

Install

1. Programmers who sign up for the free version of the Apple Developer Program can install apps on an iPhone or iPad connected to the Macintosh computer via a USB cable. However the app will expire after 7 days.
2. Users who sign up for the paid version of the developer program can install apps as above with no expiration date and also distribute them to beta testers.

Making a Web Portal App

• The author should have access to a web site with responsive design.
• The web site should accept secure login (https).
• A web portal can be written with only two lines of code. (Readers are referred to Apple documentation or one of the many available videos for the most up-to-date code.)
• In the info.plist file, the programmer should set the App Transport Security Settings > Allow Arbitrary Loads in Web Content (Boolean variable) to “YES.”

For Further Information

List of JavaScript Frameworks

• Ember
• Angular (Google)
• React (Facebook)

List of JavaScript Libraries

• jQuery
• Vue.js
• Prototype
• MooTools

Getting Started with a JavaScript Library

Content Delivery Networks (CDN)

jQuery

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>Button Toggle</title></head>
<body>

  <button>Click on me</button>
  <p>This text will appear and disappear when you click the button</p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $('button').click(
      function() {
        $('p').toggle();
      }
    );
  </script>

</body>
</html>

jQuery Counter

<button id="add">+</button>
<button onclick="subtract()">-</button>
<p id="output">Number appears here</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
 // Setup the variable and output it
 counter = 0;
 $('#output').html(counter);

 // Adds 1 when the button with id='add' is clicked
 $('#add').click(
   function() {
     counter++; // same as counter = counter + 1;
     $('#output').html(counter);
   }
 );
 // Subtracts 1 when the button with the onclick="subtract()" is clicked
 function subtract() {
   counter--; // same as counter = counter - 1;
   $('#output').html(counter);
 }
</script>

Vue.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

Hello Name Example

<div id="example">
  <input type="text" placeholder="Enter your name" v-model="username">
  <h1>Hello <span v-html="username">Sample Name</span>!</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript">
new Vue({
  el: '#example',
  data: { username: '' }
})
</script>

Vue.js Counter

<div id="counter">
  <button v-on:click="number++">+</button>
  <button v-on:click="number--">-</button>
  <p v-html="number">Number appears here</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript">
new Vue({
  el: '#counter',
  data: { number: 0 }
})
</script>

Writing Your First Script

<html>
<body>
  <h1>Your First Script</h1>
  <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Capturing and Outputting Content

<input id="sometext" value="enter anything">
<button type="button" onclick="outputText()">Click</button>
<p id="output"></p>

<script>
function outputText() {
  document.getElementById('output').innerHTML = document.getElementById('sometext').value;
}
</script>

How JavaScript Works: the DOM

Mouse Location Example

<!DOCTYPE html>
<html onmousemove="showXY(event)">
<body>
<p>XY
  (<span id="location">0,0</span>)
</p>
<script>
  function showXY(event) {
    var coords = event.clientX + "," + event.clientY; // Setup a variable called coords
    document.getElementById("location").innerHTML = coords; // Output the value in #location
  } 
</script>
</body>
</html>