CIS375 Internet Programming I

Blackboard Course: CIS375
Time and Place: Online
Classroom: Online
Office Hours: To be arranged
Instructor: James R. Gerland, Sr.
Email: (The best way to reach me)
US Mail Drop:
  Buffalo State College
  224 Technology Building
  Buffalo, NY 14222

Description

Students apply HTML 5, CSS, and JavaScript to create web sites employing the principles of usability engineering and information architecture. Topics include creation of web page features, FTP, accessibility, usability, information design, and the graphic design of web pages. The course also includes introductions to cascading style sheets (CSS), HTML 5, and JavaScript.

Student BSC web site files can be accessed using public domain software. The Windows software used includes a text editor (such as NotePad++), an SFTP program (such as FileZilla), and an HTML 5 compliant browser (IE 9, Chrome, or FireFox). Macintosh software includes a text editor (such as TextWrangler, an SFTP program (such as Fetch) and an HTML 5 compliant browser (such as Chrome or Safari).

Students do not need to purchase software because all software can be downloaded either from the Internet.

Objectives

Upon successful completion of this course, students:

  • At the end of this course the student will have a basic understanding of programming concepts and using HTML5, CSS (Cascading Style Sheets) and JavaScript to create interactive web pages.
  • No prior programming knowledge is required.
  • Students should be able to surf the Internet and have basic computer keyboarding and mouse-use skills.

Since tis is an online course, a substantial amount of outside work will be necessary to complete some of the assignments..

The course will be conducted in an oline format with an applied group-oriented undergraduate research approach. E-Mail, and BlackboardLearn will be utilized as a means to address project based discussion.

Class Schedule

Note: All project are due by Midnight Saturday morning of the week they are listed as being due!

Week OfTextbook Reading ChapterProjects
Jan 23 Getting Started with HTML
Integrating Images
Krug 1
Jasma 1, & 2
Create Your Home Page
Brief Introduction Due
Jan 30 Using Hyperlinks to Connect Content
Presenting Lists
Krug 2
Jasma 3 & 4
Feb 6 Styling Content Using Cascading Style Sheets Krug 3
Jasma 7
Create a CSS Page
Home Page Due
Feb 13 Formatting Content with Tables Krug 4
Jasma 5
Create Table Page
CSS Page Due
Feb 20 Getting User Input with Forms Krug 5
Jasma 6
Create a Form Page
Table Page Due
Feb 27 Advanced CSS Krug 6
Jasma 8
Create an HTML5/CSS Page
Special Effects
Mar 6 Creating Page Divisions Krug 7
Jasma 9
HTML5/CSS Page Due
What Makes a Good Website Due
Mar 13 The Need for HTML 5
Integrating Audio and Video
Krug 8
Jasma 17 & 18
Create Multimedia Pages
Special Effects Page Due
Mar 20 No Classes - Spring Recess
Mar 27 JavaScript
Using the Document Object Module
Krug 9
Jasma 10 & 11
Form Page Due
Apr 3 Unleashing JavaScript Using JQuery
Communicating with AJAX
Krug 10
Jasma 12 & 13
Create a JavaScript Page
Multimedia Page Due
Apr 10 Processing JavaScript Object Notation (JSON)
Web Page Optimization
Krug 11
Jasma 14 & 15
Use JavaScript Validation
JavaScript Page Due
Apr 17 Search Engine Optimization
Document Structure and Semantics
Krug 12
Jasma 16 & 19
JavaScript Validation Page Due
Apr 24 Creating SVG Graphics
Introducing the HTML 5 Canvas
Jasma 20 & 21 Final - Wow Me (HTML5)
Krug Essay/Presentation
May 1 Advanced Canvas Programming
CSS Transformations and Rotations
Jasma 22 & 23
May 8 Performing CSS Transitions and Animations
Drag and Drop Processing
Jasma 24 & 27 HTML5 Wow Me and Krug Essay/Presentation Due
May 11 Last Day of class All Work Due By 11:59 PM tonight

Chapters 25 (Utilizing Web Storage), 26 (Creating Location-Aware Web Pages Using Geolocation), 28 (Integrating Web Workers), 29 (Communicating via Web Sockets), 30 (HTML Forms Processing), and 31 (Browser Identification) are advanced topics and left for the student to explore.

Grading

Students will be graded on:

  • A Brief Introduction worth one (1) points.
  • Students will be graded on a nine (9) assignments, each worth 10 points. These projects will utilize the PHP programming language, the MySQL database language, the HTML web markup language, CSS for styling web pages, and JavaScript.
  • There will be one (1) final assignment worth 10 points.
  • In-class and Discussion Forums participation, 0-5 points extra credit

Final grades will be based on total points (105 available).
The final letter grades be based on the following table:

Grade Range   Grade Range
A 100 - 95 C+ 79 - 77
A- 94 - 90 C 76 - 74
B+ 89 - 87 C- 73 - 70
B 86 - 84 D 69 - 60
B- 83 - 80 F 59 - 0

Textbook/Matrerial

Book cover Teach Yourself HTML/CSS/JavaScript Sams Teach Yourself: HTML, CSS and JavaScript All in One

Julie C. Meloni
ISBN: 9780672337147
Publisher: Sams Publishing
Copyright: 2015
Edition: 2nd
Format: Paper; 704 pp
Book is recommended (any good HTML5, CSS3, and JavaScript textbook will suffice).

Data files are available on our CIS375 Teach Yourself web page.

DMMT

Don't Make Me Think!
A Common Sense Approach to Web Usability
Steve Krug / New Riders / 2005 (2nd Edition) / 216 pages
ISBN-10: 0321344758
ISBN-13: 978-0321344755

or DMMT Revisited

Don't Make Me Think Revisited
A Common Sense Approach to Web Usability
Steve Krug / Pearson Education / 2013 / 216 pages
ISBN-10: 0321965515
ISBN-13: 9780321965516

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.

Back to Assignments

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:

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").

Back to Assignments

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:

  1. Three (3) new web pages, for example called inline.html, external.html, and embedded.html
  2. 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:

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").

Back to Assignments

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:

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").

Back to Assignments

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:

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").

Back to Assignments

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:

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").

Back to Assignments

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:

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").

Back to Assignments

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.

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").

Back to Assignments

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").

Back to Assignments

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:

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").

Back to Assignments

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").

Back to Assignments

Krug Book Essay/Presentation (Extra Credit)

For this Assignment you should have already read 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.

Back to Assignments

Richard Arnaud Jr. Justin Bausili Ryan Brown Alex Chmurzynski
Brittany Colvin Michael Corrao Victor Darlington Vu Doan
Matthew Edson Antoine Griffin Mitchell Hawke Alexander Hummel
Jaspal Mathon Andrew Mc Cumber James Milks Daniel Navarro
Amanda Smith Ryan Van Hise Corey Vollmer Amanda Winkowski
Dercen Zhang

Communication

This is a hybrid course which will have in-class meetings for discussions and also utilize Blackboard Learn for chapter-based discussions and tests. Students are expected to login at minimum multiple times each week for course announcements, assignments, quizzes, discussions,etc.

Faculty/Instructor: I can be reached by email with questions or for guidance that are concerned with this course. You should expect that I will reply to your message within 1-2 business days. Specific course-related questions (textbook, tests, discussions, etc.) should be posted in Blackboard Learn so everyone can benefit from the questions and answers.

Students: If you have multiple email accounts, please be sure that you access (or forward) your Buffalo State email. Your Buffalo State email is the account I will use to send course-related materials.

Netiquette

About Cell Phones, IPhones and IStuff ("HANDS OFF POLICY")
Before entering the classroom, turn off all cell phones, SmartPhones, IStuff, and other electronic devices. These devices are disruptive and their use during a lecture is rude to the class and instructor.

  1. No electronic devices should be in your hands during class. This means no fiddling with your phones, reading/sending text messages, etc.
  2. If you are expecting an important phone call or are compelled to play with Apps, do not attend class.
  3. If you feel you have a legitimate reason to use an electronic device in the classroom, see me to obtain explicit permission.

This course utilizes BlackboardLearn to facilitate online communication between course participants. Please keep in mind the following "Rules of Netiquette" when communicating online.

Policy Regarding Absences, Attendance, Assignments, Exams, etc.