Week 9: Debugging +
Embedded Media
COMD 2451
Spring 2024
Announcements
Wednesday Class
117%
Everybody gets
6/6
Correct on board
5/6
Lowest
Learning: check each other’s answers at end; others can catch something you missed!
Section I
15/10 correct on board.
14
Lowest
13.5 if got < 13.5,
Thursday class
118%
Everybody gets
100%
Section I
13.5 correct on board.
12
Lowest
+1
Bonus for teamwork and first time.
13.5 if got < 13.5,
Week 9: What we will Learn Today
Debugging
What is Debugging?
Debugging is the process of finding and fixing errors in the source code of any software.
Why is it called debugging ?
While working on a Mark II computer at Harvard in the ‘40s, Admiral Grace Hopper discovered a moth stuck in a relay impeding its operation. She remarked that they were working on “debugging the system.” The terminology stuck and is used to this day in programming.
Grace Hopper’s notes about the incident
The actual bug
Grace Hopper
Tech pioneer and general badass
What is Debugging in the context of our class?
In coding html and css, we use debugging to refer to the process of removing errors and any other impediments to our code working as intended on a browser. This can include:
How to Debug HTML and CSS
Define the Problem: In your own words, what exactly is wrong?
Step Through the Code: Do a line-by-line scan to step through your code, looking for errors, incorrect links to other files, missing elements, missing semicolons, incorrect quotation marks or missing angle brackets, etc.
Selective Removal: Remove lines that you suspect are causing the error to isolate sections that have problems. Add them back as you make adjustments. (Use comments to “comment out” the line of code) �HTML comment syntax: <!-- COMMENT -->
CSS comment syntax: /* COMMENT */
Test Often: Each time you make a change, test how it looks in a browser. This will let you know if the change worked or not. You can also use the inspector to change values, check whether or how CSS properties are applied, and many more things.
Debugging Tools
Your Own Eyes/Instincts: First, have a look at the code and try to identify any errors. Your own instincts will improve over time!
Markup Editor: Use a tool like VS Code that displays errors in red.
Developer Tools: Use the developer tools (Inspector) available in your browser to view source, inspect elements,look at the box model, etc.
Validator: Use the Validator tools available at W3C: https://validator.w3.org/
Tips for Efficient Debugging
Use Version Control: Before you start debugging, Upload the current version to GitHub (or save a copy of the folder) so you have a snapshot of your code BEFORE you make changes. This way, you can always go back.
Start Small, Test Often: To avoid confusion, make only one small change at a time, then test to see its effect in the browser. This saves lots of time.
Collaborate: No developer is an island. Reach out to other students, developers or online communities for help when you’re stuck. A fresh perspective can help you find the problem more quickly.
Take a Step Back from the Problem: If you find yourself frustrated, take a step away for a while. Go for a walk, chat with a friend, work on something else. Sometimes the solution magically appears when you stop thinking about the problem. And even if not, working on it when feeling refreshed brings the answer much faster.
HTML Debugging Checklist (a.k.a. Types of Bugs)
Syntax errors: things like spelling, punctuation, capitalization, and forgetting things like closing brackets, semicolons or spaces. Easy to fix when familiar with the language’s syntax. Examples:
Placement errors: When things are coded correctly, but they’re in the wrong place in the code. Examples:
Compatibility errors:
Great Resource
CSS Debugging Checklist
Linking: Is the CSS sheet linked correctly? Check to make sure the file name and the file path match the code.
Syntax: spelling, punctuation, capitalization, and using the correct symbols (such as {} and ; )
CSS Specificity: If a style you apply is not appearing, sometimes there is another property overriding it. An easy way to find this out is by using the inspector to see what’s controlling this. To remedy it, use a more specific CSS selector or change the property overriding the style you want.
Are the property and value supported by your browser? Check the property in MDN’s CSS reference.
Great Resource
Quiz #2
Embedded Media
Embedding Media in a Web Page
Common Media File Types
Images: .JPG, .JPEG, .GIF, .PNG, .SVG, .WEBP
Audio/Lossless: .WAV, .FLAC, .AIFF, .ALAC
Audio/Lossy: .OGG, .MP2, .MP3, .AAC, .AMR, .WMA
Video/Compressed: M4V, .MP4, .OGG, .OGV, .WEBM
Video/Uncompressed: .AVI, .MOV, .MP4, .MPEG, .MPG, .WMV, .OGG, .OGV
A compressed or lossy file is any file that is smaller than their original file size. These files make downloading from the web faster, easier and allow more data to be stored on removable media, such as a thumb drive.
HTML5 Media Elements
<audio>: Defines sound content
<embed>: Defines a container for an external (non-HTML) application
<video>: Defines video or movie
<source>: Defines multiple media resources for media elements (<video> and <audio>)
<track>: Defines text tracks for media elements (<video> and <audio>)
Source: https://www.w3schools.com/html/html_media.asp
HTML5 Media Elements
<object>: This is an HTML 4.10 element that can be used for any external media type. (Some of the older attributes are no longer supported).
Source: https://www.w3schools.com/html/html_object.asp
HTML5 Audio
<audio controls>
<source src="assets/horse.ogg" type="audio/ogg">
<source src="assets/horse.mp3" type="audio/mpeg">
</audio>
Attributes: autoplay, controls, loop, muted, src, preload
preload requires a value: auto, metadata, none
Supported Formats: MP3, WAV, and OGG
HTML5 Video
<video width="320" height="240" controls autoplay muted>
<source src="assets/movie.mp4" type="video/mp4">
<source src="assets/movie.ogg" type="video/ogg">
</video>
Attributes: autoplay, controls, height, loop, muted, poster, src, width, preload (preload requires a value: auto, metadata, none)
Supported Formats: MP4, WEBM, and OGG
HTML5 Embed
<embed> allows you to display any number of media types.
<embed src="helloworld.swf">
Attributes: height, src, type, width
List of supported media types is available at http://www.iana.org/assignments/media-types/
Source: https://www.w3schools.com/tags/tag_embed.asp
Embed with Iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/yTvC2HSfitE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<iframe> is a common way of embedding content into a webpage. It creates a window, or inline frame, within the browser window.
Source: https://www.w3schools.com/tags/tag_iframe.asp
HTML Object
<embed type="video/webm" src="/media/examples/flower.mp4" width="250" height="200">
It is also possible to use HTML5 <EMBED> or <OBJECT> elements to embed media without creating an inline frame.
Attributes: align, archive, border, classid, codebase, codetype, data, declare, form, height, hspace, name, standby, type, usemap, width
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
YouTube Video
YouTube videos can be added using <iframe>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
To add properties like autoplay, controls or loop, append the YouTube URL with ? followed by the property and a value of 1 for each property.
src="https://www.youtube.com/embed/tgbNymZ7vqY?&autoplay=1&mute=1"
src="https://www.youtube.com/embed/tgbNymZ7vqY?&controls=1&loop=1"
Source: https://www.w3schools.com/html/html_youtube.asp
Using Rich Media
What is Rich Media?
Rich media is a digital advertising term for an ad that includes advanced features like video, audio, or other elements that encourage viewers to interact and engage with the content.
While text ads sell with words, and display ads sell with pictures, rich media ads offer more ways to involve an audience with an ad.
When we aren’t talking about ads, we tend to use multimedia or just media to describe the different forms it may take. See examples on article below.
https://www.nytimes.com/2019/11/20/arts/music/grammy-awards-nominees.html?action=click&module=Top%20Stories&pgtype=Homepage
Rich Media Resources
Google Studio has guidelines for rich media production and is a good source for learning more about rich media advertisements.
What is rich media? - Studio Help (google.com)
Google Rich Media Gallery has inspiration and offers a Google Skillshop tutorial where you can create a rich media ad:
http://www.richmediagallery.com/
Creatopia Tutorial (easy): How to create rich media ads - 9 simple steps
Adform (expert): Intro to Building with HTML5 Studio | Adform Help
Lab: Embedding Media
Lab: Embedding Media
1. Group into pairs.
2. Create an HTML document (index.html) in a folder called [yournames]-media
3. Look for a youtube video to embed in your media file.
4. With your partner, create an audio recording with your phone discussing the youtube video. No more than a minute or two.
https://www.wikihow.com/Record-Audio-on-a-Mobile-Phone
5. Export the audio recording to Google Drive or other media storage (or email to yourself).
6. Embed your conversation and a youtube video into your media web page using the <audio> and <embed> HTML5 elements discussed in this deck. You can also use the Embed code provided by Youtube.
7. Upload the index.html, assets folder and files to a repository on GitHub. Copy the link to your github and submit it.
Submit your files to: Blackboard in the Assignments Page for Week 9.
Putting Together
Final Project
Final Project Requirements: Both parts required
● Cover page
● Project Proposal - Week 3 In Class
● Mood Board - HW
● Style Guide - HW
● CSS Stylesheet, HTML file - in progress
● Supporting images/sketches - HW�(Sketches of your website. You can show multiple sketches to show how your concept got clearer over time as you worked on your website and got more concrete idea on what you wanted it to look like. These can be photos of drawings on paper; they don't have to be formal.)
● “Thank you” page with your portfolio URL and email address
Format:
Can use Powerpoint, Google Slides, Keynote, etc.
2) Portfolio Website
● Home page - in progress
● Portfolio pages
● Image Gallery - HW
● Portfolio samples and description
● Resume Page (write your resume in HTML)
● Contact Form
Format:
Must be a working website at your personal domain
Refresher: Github!
What is Github?
Why Github?
We will host our websites here -- for FREE!
Github is used by developers everywhere
It does version control
We can share with each other
You can keep your Github account forever!
Github is where the LIVE version of your website will live.
Your Files
Your LOCAL Environment
Your Computer or Cloud (OneDrive, Google Drive, or Dropbox)
Create and Edit Your Files Here
Your Live Environment�Github
HTML
The live version of your files lives here
CSS
Images
UPLOAD
OMG it looks complicated. What do I do?
I know, right?
This tool is used by devs at all levels so it has lots of advanced features and lingo we won’t use.
Don’t worry. Follow these instructions, step by step!
Create an Account
Write your password somewhere you will remember it!
Create a Repository
Upload Your Files
Upload your files in the same structure we talked about.
Upload Your Files: Steps
Share With Me And Each Other
Add me as a collaborator.
Homework:
Project 1 Restaurant Page
Project 1: One-Page Design Restaurant Web Page
Each student will design and hand-code a web page for a restaurant cuisine of their choice. The restaurant web page must be for the menu section of the restaurant website.
The primary focus is on learning layout design for the purpose of using only HTML and CSS for screen presentation.
Assignment Objective:
The purpose of this assignment is to help students gain a better understanding of markup language and get comfortable with hand coding. Only HTML and external CSS are allowed.
Menu page must consist of the following:
● Full navigation
● Welcome section
● About section
● Contact section
● Menu section:
○ a minimum of 3 courses (e.g. breakfast, lunch, dinner)
○ 3-5 items for each course: each item must have a price and description
Restaurant Web Page: Examples