CIS375 Internet Programming I
Email:
(The best way to reach me)
Office Hours: 7:30 - 7:55 AM Tu/Th 244 Tech (Virtual via MS Teams)
US Mail Drop:
Buffalo State College
224 Technology Building
Buffalo, NY 14222
Note: All assignments are due by 11:59 PM on the Thursday they are listed as being due!
Each Online Test is only available for seven (7) days after the Test is listed!
Tests are based on the chapters from the Carey textbook.
| Week Module | Date | Textbook Reading(s) | Chapter(s) | Assignments & Tests Announced | Assignment Due |
|---|---|---|---|---|---|
| 1 | Feb 2 | Getting Started with HTML5: Creating a Website for a Food Vendor Don't Make Me Think!: Krug's First Law of Usability |
Carey 1 Krug 1 |
Test 1 Available Brief Introduction Create Your Home Page |
|
| Feb 4 | Getting Started with HTML5: Creating a Website for a Food Vendor (cont.) | Carey 1 (cont.) | |||
| 2 | Feb 9 | Getting Started with CSS: Designing a Website for a Fitness Club How we really use the Web: Scanning, satisficing, and muddling through |
Carey 2 Krug 2 |
Test 2 Available | |
| Feb 11 | Getting Started with CSS: Designing a Website for a Fitness Club (cont.) | Carey 2 (cont.) | Brief Introduction Due | ||
| 3 | Feb 16 | Designing a Page Layout: Creating a Website for a Chocolatier Billboard Design 101: Designing for scanning, not reading |
Carey 3 Krug 3 |
Test 3 Available Create a CSS Page |
|
| Feb 18 | Designing a Page Layout: Creating a Website for a Chocolatier (cont.) | Carey 3 (cont.) | Home Page Due | ||
| 4 | Feb 23 | Graphic Design with CSS: Creating a Graphic Design for a Genealogy Website Animal, Vegetable, or Mineral?: Why users like mindless choices |
Carey 4 Krug 4 |
Test 4 Available Modify Your Home Page to Use DIVs |
|
| Feb 25 | Graphic Design with CSS: Creating a Graphic Design for a Genealogy Website (cont.) | Carey 4 (cont.) | CSS Page Due | ||
| 5 | Mar 2 | Designing for the Mobile Web: Creating a Mobile Website for a Daycare Center Omit needless words: The art of not writing for the Web |
Carey 5 Krug 5) |
Test 5 Available Create an HTML5/CSS Page |
|
| Mar 4 | Designing for the Mobile Web: Creating a Mobile Website for a Daycare Center (cont.) | Carey 5 (cont.) | Modify Home Page Using Divs Due | ||
| 6 | Mar 9 | Working with Tables and Columns: Creating a Program Schedule for a Radio Station Street signs and Breadcrumbs: Designing navigation |
Carey 6 Krug 6 |
Test 6 Available Create a CSS-style Table Page |
|
| Mar 11 | Working with Tables and Columns: Creating a Program Schedule for a Radio Station (cont.) | Carey 6 (cont.) | HTML5/CSS Page Due | ||
| 7 | Mar 16 | Designing a Web Form: Creating a Survey Form The Big Bang Theory of Web Design: The importance of getting people off on the right foot |
Carey 7 Krug 7 |
Test 7 Available Create an Advanced (Special Effects) CSS Page |
|
| Mar 18 | Designing a Web Form: Creating a Survey Form (cont.) | Carey 7 (cont.) Create a Form Page |
What Makes a Good Website Due | ||
| 8 | Mar 23 | Enhancing a Website with Multimedia: Working with Sound, Video, and Animation "The Farmer and the Cowman Should Be Friends": Why most arguments about usability are a waste of time, and how to avoid them |
Carey 8 Krug 8 |
Test 8 Available Create a set of Multimedia Pages |
|
| Mar 25 | Enhancing a Website with Multimedia: Working with Sound, Video, and Animation (cont.) | Carey 8 (cont.) | CSS-styled Table Page Due | ||
| 9 | Mar 30 | Getting Started with JavaScript: Creating a Countdown Clock Usability testing on 10 cents a day: Keeping testing simple—so you do enough of it |
Carey 9 Krug 9 |
Test 9 Available Create a JavaScript Page |
|
| Apr 1 | Getting Started with JavaScript: Creating a Countdown Clock (cont.) | Carey 9 (cont.) | Create an Advanced (Special Effects) CSS Page Due | ||
| 10 | Apr 6 | Exploring Arrays, Loops, and Conditional Statements: Creating a Monthly Calendar Mobile: It’s not just a city in Alabama anymore: Welcome to the 21st Century. You may experience a slight sense of vertigo |
Carey 10 Krug 10 |
Test 10 Available | |
| Apr 8 | Exploring Arrays, Loops, and Conditional Statements: Creating a Monthly Calendar (cont.) | Carey 10 (cont.) | Multimedia Web Site Due | ||
| 11 | Apr 13 | Working with Events and Styles: Designing an Interactive Puzzle Usability as common courtesy: Why your Web site should be a mensch |
Carey 11 Krug 11 |
Test 11 Available | |
| Apr 15 | Working with Events and Styles: Designing an Interactive Puzzle (cont.) | Carey 11 (cont.) | Form Page Due | ||
| 12 | Apr 20 | Working with Document Nodes and Style Sheets: Creating a Dynamic Document Outline Accessibility and you: Just when you think you’re done, a cat floats by with buttered toast strapped to its back |
Carey 12 Krug 12 |
Test 12 Available Use JavaScript Validation |
|
| Apr 22 | Working with Document Nodes and Style Sheets: Creating a Dynamic Document Outline (cont.) | Carey 12 (cont.) | JavaScript Page Due | ||
| 13 | Apr 27 | Programming for Web Forms: Creating Forms for Orders and Payments Guide for the perplexed: Making usability happen where you live |
Carey 13 Krug 13 |
Test 13 Available Wow Me! Final |
|
| Apr 29 | Programming for Web Forms: Creating Forms for Orders and Payments (cont.) | Carey 13 (cont.) | JavaScript Validation Page Due | ||
| 14 | May 4 | Exploring Object-Based Programming: Designing an Online Poker Game | Carey 14 | Test 14 Available | |
| May 6 | Exploring Object-Based Programming: Designing an Online Poker Game (cont.) | Carey 14 (cont.) | Final "Wow Me!' Due Extra Credit - Krug Web Site Due |
||
| May 7 | Last Day of classes | All Work Due By 11:59 PM tonight | |||
New Perspectives on HTML5, CSS3, and JavaScript
Patrick M. Carey
ISBN: 9781305503922 (print) (9781337516358 eText)
eText is a lot cheaper!
Publisher: Cengage Publishing
Copyright: 2015
Edition: 6th
I've made the code available from my textbook web site.
Book is recommended (online tests are from this textbook).
Don’t Make Me Think! |
or | 
Don't Make Me Think Revisited |
| Either edition is required. | ||
Assignments
Introduction | Home Page |
CSS Pages | Table Page | HTML5 Page | CSS Effects
Form Page | Multimedia Pages | JavaScript Page |
Form Validation | Wow Me | Final
Brief Introduction (1 Point)
For this assignment you will login to your Blackboard account and post a brief (75-100 words) introduction about yourself to the Brief Introduction Discussion forum for this course. Use the Add New Thread button and make the Subject line your name. Also, include any relevant course(s) you've taken that might help you in this course. This will give me a better idea of where each of us are in our understanding and experience with electronic commerce concepts and design. Please include a photo of yourself so we can get to know each other.
Create Your bscacad3.buffalostate.edu Home Page (10 Points)
For this Assignment you will first read the appropriate chapters in the textbook and then create a web page called index.html in your bscacad3.buffalostate.edu account web space which will be used as the starting page for the rest of your Assignments for this course. Your web page should:
- Utilize the following HTML tags and include the following:
-
- Appropriate
<!doctype html>,<html>, and<head>tags. - A
<title>tag to give your page a title that describes your page. - Appropriate
<meta>tags to provide keywords for SEO on your page. - A
<body>tag. - An
<h1>tag that contains your name. - A
<p>tag that encloses a brief paragraph about yourself. - An
<img>tag with appropriatesrcandaltelement values that insert a graphic image on your page. Use CSS to define the width, and height values and other styling. I would prefer that it was an image of yourself so we can get to "know" each other. However, it doesn't matter at this time what the graphic is as long as it is legal and moral. - An
<ol>tag that contains enough<li>tags that list the remaining Assignments for this course (see list in navigation bar above). - At least one of each of these tags:
<hr />,<br>.
- Appropriate
- Use CSS in place of any
<b>(<b>) or<em>(<i>) tags. - Use a linked CSS styles file to control and enhance the look and feel of your web page. Your page should have easy to use navigation and be easy to read using appropriate styles.
- Use JavaScript code to display the current Date and time and a JavaScript function that reads an array to display the ordered list (
<ol>tag above) for the remaining assignments.
Your web URL to view your web page is: http://bscacad3.buffalostate.edu/~your-userid/
You will add a link to this page that allows the user (and me) to view your work.
Your username and password for the bscacad3.buffalostate.edu machine is the same as your Buffalo State network username and password you used to log into this Blackboard account.
Now, whenever you login to your bscacad3.buffalostate.edu account you need to issue the command cd public_html to change to the sub-directory where you can create and maintain the files for your Assignments and Assignments.
You can use ssh to login to your bscacad3.buffalostate.edu account and then use either vi or Emacs to maintain your files or you can edit them on your PC and use an SFTP client (FileZilla for Windows or Fetch for a Mac) to move them from your PC to your bscacad3.buffalostate.edu account. For Windows it is even better to use Notepad++ for your editor since it has a built-in SFTP client. For Mac the better choice is TextWrangler which also has a built-in SFTP client.
When you have this Assignment ready for me to view and grade you should post a note in the
Home Page Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new
browser window (target="_blank").
Create Cccading StyleSheets (CSS) Pages
For this Assignment you will first read the appropriate chapters in the textbook and then create four (4) new files:
- Three (3) new web pages, for example called inline.html, external.html, and embedded.html
- Another file for your external styles, for example called cis375.css
in your bscacad3.buffalostate.edu account just as you did in previous Assignments. One of your Assignment 2 web pages should use inline styles; the second web page should use embedded styles; and the third web page should use a linked style sheet. These web pages should change the default look for the following HTML tags:
- h1, h2, h3, h4, h5, & h6
- p
- font color, family, and size
- b (style="font-weight: bold")
- table, th, tr, td
Each of these pages should also have a link back to your Assignment 1 web page.
You should then add Three (3) <a> (anchor) tags to your Home Page web page that opens your CSS web pages.
When you have this Assignment ready for me to view and grade you should post a note in the CSS Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a Table Web Page
For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your bscacad3.buffalostate.edu account just as you did in Home Page Assignment. Your new web page should utilize the following HTML tags and include the following:
- A body tag that uses an appropriate style value to change the background color of the web page.
- Appropriate table, tr, th, and td tags to create a table that has three (3) columns (Font Faces, Font Sizes, Colors) and (5) five rows (different font faces, font sizes, and color codes in their appropriate face, size, and color). Use the th tag to create the headings for each column the background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row. Use the background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page.
- Appropriate style values that change the font, font size, and font color.
This page should also have a link back to your Assignment 1 web page.
You should then add an <a> (anchor) tag to your Home Page web page entry for this assignment that opens your Table web page.
When you have this Assignment ready for me to view and grade you should post a note in the Table Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create an HTML5/CSS Compliant Web Page
For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for example called html5.html, in your bscacad3.buffalostate.edu account just as you did in previous assignments. Copy your current CSS Embedded web page (embedded.html) to a new html5.html web page. Your index.html new web page link should open up a new web page that utilizes your HTML5 and CSS to include the following:
- A correct DOCTYPE tag for HTML5
- Convert any of your tags that are not compliant
- Correct any of your CSS that is not valid
You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.
This web page should also have a link back to your Home Page web page.
You should then add an <a> (anchor) tag to your Home Page web page that opens your HTML5 web page.
When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Add Special Effects to Your Web Page Using Cascading Style Sheets
For this assignment you will first read the appropriate chapters in the textbook. Then copy your Web Page (index.html) to create a new web page (cssse.html). Then modify your new cssse.html and your original cis375.css file to add these features to your new cssse.html web page:
For this assignment you will first read the appropriate chapters in the textbook. Then copy your Web Page (index.html) to create a new web page (cssse.html). Then modify your new cssse.html and your original cis375.css file to add these features to your new cssse.html web page:- Use a style to change your graphic to be 50px wide by 50px tall (your picture will look scrunched, but that's OK)
- Change the display font for your introductory paragraph to Verdana, serif
- Float your graphic so it is on the right of your introductory paragraph and your introductory paragraph wraps around your image
- Change your list of Assignment links to be an unordered list
- Add a table similar to your Assignment 3 that displays with no borders around any of the cells
- Add appropriate
@media printstyles so that when your page is printed (you can use the Print Preview feature of your web browser to see the different look):- Your home page graphic does not print
- Your list of Assignment links are green
- Your list of Assignments links is an unordered list
- The font for your introductory paragraph is Arial, sans-serif
- Your table prints with a borders around every cell
You should then add an <a> (anchor) tag to your Home Page that opens your CSS Advanced web page and add a link to your CSS Advanced web page that goes back to your Home Page web page.
When you have this Assignment ready for me to view and grade you should post a note in the CSS Advanced Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a Form Web Page
For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for example called form.html, in your bscacad3.buffalostate.edu account just as you did in previous assignments. This web page should utilize the following HTML tags and include the following:
- A form tag that has an action value of mailto:your-email-address so that the results of what the user enters gets sent to your email address when it gets submitted.
- input tags that allow the user to enter their:
- First Name
- Last Name
- Address
- City
- State/Province (this should use a select tag with option tags for each state name and state abbreviation
- Zip/Postal Code
- Phone
- Email Address
- An input tag that creates a submit button that says: OK Send My Data
- Use appropriate
fieldsetandlabeltags - Use appropriate styles to give your form a nice look (color, alignment, organization, etc.)
You should utilize the new HTML5 form tag features. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for
+html5 +form
to find lots of helpful information.
This web page should also have a link back to your Home Page web page.
You should then add an <a> (anchor) tag to your Home Page web page that opens your Form web page.
When you have this Assignment ready for me to view and grade you should post a note in the Form Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a Multimedia Web Site
For this Assignment you will first read the appropriate chapters in the textbook and then create a new web site of four (4) pages, for example multimedia.html, audio.html, video.html, and scrolling.html in your bscacad3.buffalostate.edu account just as you did in previous Assignments. Your Multimedia Assignment new web site should open up a new web page that utilizes hypertext links to allow me to visit your three (3) web pages.
- use your
cis375.cssandcssse.cssfiles to "enhance" the look and feel of each page - create one (1) page that uses an
<a href ...>tag to link to a sound clip *and* an<audio>tag to link to a sound clip - create one (1) page that uses an
<a href ...>tag to link to a video clip *and* an<video>tag to link to a video clip *and* an<iframe>tag to play a video hosted on a remote server (for example, YouTube) - create one (1) page that uses JavaScript to display a scrolling text message or some other animated text. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for this JavaScript routine.
- the current date
- the current time
- uses an
ifconstruct to print out either:
how many days are left until this Assignment is due
or
how many days have past since this Assignment was due - a table that has 12 rows and 3 columns which is created using a
forloop to read through a set of JavaScript arrays that contain the names of the months and the number of days in each month. The table should look similar to this:Month
NumberMonth
NameDays in
Month1 January 31 2 February 28/29 3 March 31 - uses the JavaScript
modoperator (%) to highlight every other row of the above table with a different color to make it easier to read.Hint: if you use
%to divide the loop counter by 2 and there is no remainder that means the loop counter is an even number and so you need to highlight that row.
The sounds and audio clips can be either uploaded to your bscacad3.buffalostate.edu account or you can link to clips that exist somewhere on the Internet as long as you respect copyright laws and the clips are ethical and moral.
This web page should also have a link back to your Assignment 1 web page.
You should then add an <a> (anchor) tag to your Home Page web page that opens your Multimedia web page.
When you have this Assignment ready for me to view and grade you should post a note in the Multimedia Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a JavaScript Web Page
For this assignment you will first read the appropriate chapters in the textbook and then create a new web page file, for example called javascript.html, in your bscacad3.buffalostate.edu account just as you did in previous assignments. This web page should use JavaScript functions to include the following:
This web page should also have a link back to your Home Page web page.
You should then add an <a> (anchor) tag to your Home Page web page that opens your JavaScript web page.
When you have this Assignment ready for me to view and grade you should post a note in the JavaScript Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Add JavaScript Validation to Your Web Form Page
For this assignment you should first read the appropriate chapters in the textbook and also the Form Validation with JavaScript web page listed in the Useful Links section and also search the Internet using your favorite search engine site (Bing, Google, MSN, Yahoo, whatever) for:
+javascript +form +validation
and then create a new web page file, for example called validation.html, in your bscacad3.buffalostate.edu account just as you did in previous assignments. This web page should build on your Web Page Form Assignment and use JavaScript functions to include the following:
- display the current date and time
- display a set of radio buttons that allow the user to change the background color and the text color of the web page by clicking on the desired radio button
- advise the user filling out your form with a sentence above the form noting that certain fields are required and using CSS to either make those fields red or placing a CSS styled bold red asterisk (*) next to each required field
- validate the form fields according to these validation rules:pops up a JavaScript alert window advising the user exactly what field did not pass the validation checks
- First Name and Last Name are not empty
- Zip Code is either:
only 5 numbers
or
in the format 99999-9999 - Phone Number is either:
only 10 numbers
or
in the format (999) 999-9999 - Email has one and only one
@character, has at least one character before the@character, and has at least one character and a dot and at least 2 characters after the@sign.
valid:gerlanjr@buffalostate.edu
not valid:gerlanjr.buffalostate.edu
not valid:gerlanjr@buffalostateedu
not valid:@buffalostate.edu
- places the cursor back in the invalid field after the user clicks the OK button on the alert window if there is a validation problem.
This web page should also have a link back to your Home Page web page.
You should then add an <a> (anchor) tag to your Home Page web page that opens your Form Validation web page.
When you have this assignment ready for me to view and grade you should post a note in the Form Validation Discussion Folder with the URL of your Home web page so I can click on that link and open your assignments in a new browser window (target="_blank").
HTML5 Wow Me
For this Assignment you will first read the appropriate chapters in the textbook and then create a new set of web pages in your bscacad3.buffalostate.edu account with with appropriate additions to your cis375.css file just as you did in previous Assignments. This set of web pages will show off what you may have learned about HTML5, CSS3, and JavaScript outside of this course (kind of what I would have covered in the second semester of this course if it existed). Things like the <canvas> tag with corresponding JavaScript code to draw on that canvas. Or advanced <form> features or HTML5 Geo-location or Drag and Drop or Math or other "cool things" that can be demonstrated with HTML5, CSS3 and JavaScript, such as animation, etc.
Each of these pages should also have a navigation section that links to each of the other pages in this assignment and back also to your Assignment 1 web page. You should utilize everything you learned from the Krug Don't Make Me Think book.
You should then add an <a> (anchor) tags to your Home Page web page that opens your HTML5 Final Assignment web pages.
When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Final Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Krug Book Essay/Presentation (Extra Credit)
For this Assignment you should finished reading Steve Krug's book, Don't Make Me Think. You will write an Essay summarizing the guiding principles in that book. Your essay will be developed in Microsoft Word and contain a cover page along with your 500 word essay. You will also create a PowerPoint presentation with a welcome slide, at least 5 additional slides covering the guiding principles of the book and a final slide with your contact information. You will create a web page that follows the guiding principles of Don't Make Me Think. This we page will contain a well designed navigation to your home page and each of the other Assignments. This page will also contain links to your Essay Word document and Presentation PowerPoint slide show.
You should then add an <a> (anchor) tag to your Home Page web page that opens your Essay web page.
When you have this Assignment ready for me to view and grade you should post a note in the Essay Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
You only need to do this assignment if you need the extra credit to help you get to the next highest letter grade.
Good Luck!
Jim...
View Jim Gerland's
profile