Week 1

Unit 1: Homework

Part I: Getting Started: Creating and Analyzing Web Sites

General Directions

·         Overview

·         Web Editors

·         Homework Expectations & Cheating

·         Late Assignments

Overview

The homework for this course is divided into 8 parts. Each week you will have something new to create on your web site. The textbook readings this week will give you an introduction the technology. There are 8 homework assignments and 8 discussions.

In order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

1.      Demonstrate creativity and problem-solving skills.

2.      Analyze web programs in order to test, debug, and improve them. (Discussion only)

3.      Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

4.      Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

To help develop your creativity and problem solving skills, you will have challenging homework and discussion activities each week. The discussions and homework assignments are not directly related but they may cover the same topics from the readings.

There can be many solutions to the homework. You are not graded on the ‘correct’ solution but rather these 4 learning outcomes. For example, some programmers use <p> tags with line breaks and others may use multiple <p> tags. There is a slight difference in the line height between the content areas, but they are both acceptable HTML elements. There is a right and wrong answer. A <li> tag for example could be used to display content but a list item and paragraph are very different concepts.

Therefore these homework assignments will prove challenging and require planning as well as attention to detail. We will not walk you through step by step through these activities. We expect that part of your time will be trying to apply what you learned in the readings. Chapters 3, 4 and 5 just provide an overview of the technologies that we'll cover in more depth in the book. There are some basic concepts that you'll need to remember. You will also want to explore other web sites that are helpful to new web developers.

Web Editors

You may use an editor in this course. The only editor that is supported is Visual Studio. It free to all students via DreamSpark. (See the Course Information for information on how to access DreamSpark) There are many of editors. Yes, the Komodo mentioned in the book is a good one. Many web developers also use Adobe Dreamweaver because it's also packaged with Photoshop and other Adobe software programs. However, for this course we'll use Visual Studio. One of the benefits is that you will also learn how to use it now before you take an ASP class. You will want to be able to test your pages in Google Chrome and one other browser, such as Mozilla Firefox.

Homework Expectations & Cheating

Each week you will create a Word document, with your responses, code, and screen shots of your web pages. It is imperative that you follow the directions to receive full credit. Provide your answers in the homework sheet provided.

Expectations

This course is a 300-level course, and is going to require you to take time to complete the homework and readings. Plan to study throughout the week. Remember, each week there are 2 parts. In a traditional course, you have 1 week for each part. In this accelerated course you have only 1 week to complete both parts. Some of you will take longer than other students to complete the work.

It is critical that students understand that cheating will not be tolerated on any assignment or exam in this course. Other faculty may review your homework in order to help identify any issues with plaigairism. Any copying code from other students, textbooks or web sites is considered plaigairism and will result in a 0 for the assignment.  

Late Assignments

In order to be able to provide feedback to students on a timely basis the faculty cannot accept the assignments late. You need to submit the assignments on time.

Problem 1

Web site topic: Your boss has asked you to create a web site for: a local community non-profit organization that sells rummage sale items. This week, they have asked you to set up 1 page to show what the site will look like.

Learning Outcomes:

·         Demonstrate creativity and problem-solving skills.

·         Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

·         Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create your web site structure

Being organized will be important for your web site to be successful. For each week you will need multiple web pages. Create the folders and files.

Create the folders

1.      No other folder structure is allowed.

2.      Create a folder named CS240_LastName, to put all of your folders and files. Inside create the subfolders. All folders and file names should be in lower case and never any spaces!

3.      Create a pages folder to store all your html pages.

4.      Create the other folders. Images belong in an images folder, javascripts in a js folder, style sheets in a css folder, fonts in a fonts folder.

5.      Create an additional folder called homework to store your solution files.

Create your placeholder web pages. 

1.      Create a web page called home.html. You may use Notepad, Visual Studio or any other basic text editor or web editor

2.      For each week, create 2 web pages.

3.      Each web page will be numbers using the following pattern: week1-1.html, week1-2.html, week2-1.html, and so on. If a third page is used it will be announced in the homework for that week.

4.      Save your web pages in the pages folder.

Step 2. Create your content

1.      Modify the week1-1.html web page. This page displays information about your product and company. This year, one of the items you are selling at your web site: pens.

2.      Write up a short description about your product.

3.      Create a hyperlink to the week1-2.html page (refer to listing 3-6)

4.      Insert a hyperlink to an external web site about your product.

Step 3. Create your form

1.      Modify the week1-2.html web page.

2.      This page allows the user to order the item. For now you will be creating just a basic form.

3.      Create a link back to the week1-1.html page.

4.      Create the form using the html input elements. Refer to listing 3-25 for example of inserting a form and input element.

·         Create 3 textboxes using the input tag to collect the users name, location and number of items that they want to order. (customerName, deliveryDate, numberItems) If you deviate from the naming conventions they need to be descriptive.

·         Make sure to create a submit button using the input tag input tag (with type set to submit as shown in listing 3-25) or button (refer to listing 3-20)

·         Make sure to include the form tags (as refer to listing 3-25)

Problem 2

You are asked to show how you could process the form using basic JavaScript, and to improve the appearance of the form with CSS. For now, you have just the introductory content to get you started with CSS and JavaScript. We don’t expect advanced programming at this stage. However, you will become familiar with the basic process of how to insert css rules and scripts in the page.

Learning Outcomes:

·         Demonstrate creativity and problem-solving skills.

·         Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

·         Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Being organized will be important for your web site to be successful. This activity wil be basic, in that you will just retrieve values and send the values back to the web page.

Step 4. Create a program to process your form with JavaScript

Create an embedded JavaScript program.

Retrieve the form values, performs a calculation and displays the results to the user

1.      Modify the week1-2.html web page to process the form.

2.      Modify the submit button so that when you click on the button it calls the JavaScript program.

3.      Modify the button tag to call the function and not submit the form. 

onclick="calculateTotal(); return false;"

4.      In the book they inserted the onclick attribute inside the input/button tag. ((Review listing 3-20) However in this case we want to write some content back to the page. So for now we have to stop the form from submitting the values to the web server (return=false;).

Create the JavaScript program to process the form.

1.      Insert the script tags in the head section.

2.      Inside the script tags, create the function called calculateTotal.

3.      Inside the function, retrieve the user name, location, and number of items that the user typed in the textbox. (Refer to listing 3-20 on how to use the getElementById method.)

4.      Create an object called myData. (Refer to listing 5-13)

5.      Set the customer name (cusName) the value the user entered.

6.      Set the delivery date (delDate) the value the user entered.

7.      Set the number of items (numItems) to the value the user entered

8.      The price is $4.25 per item. The tax rate is 7%. Shipping rate is 2%.

9.      Calculate the total for the product, tax, shipping and order.

Format the data

The values returned are real values. Ending 0’s may be cut off. So $10.40 would look like $10.4 to the user. This is just like in other languages. JavaScript has functions to help you format the numbers and string variables.

1.      Go to http://www.w3schools.com/jsref/jsref_obj_number.asp (Links to an external site.)Links to an external site..

2.      Review the number methods (Read about toFixed).

3.      Then, for each of the values returned from the calculations, form them with the toFixed method.

Display the results

Monetary values should show the two decimals. Use line breaks inside your message to make the message look better.

1.      When the user clicks on the submit button, write a message to the user.

2.      Display the same message on the web page using document.write Make sure to put in the correct values. M

3.      Make sure to convert the data types to strings before you display them.

Here is a sample of what the output should look like:

Thank you John Smith for your order. 
You will receive 10 items delivered to you on December 1. 
You price of your items is $42.50.
The tax charge is $2.98.
The shipping charge is $0.85.
Your total is $46.33.

Step 5. Format your content with HTML

Use HTML tags to format the content and enhance the appearance of your page. * Note that a variery means that you are showing us you are able to use the tags and attributes. The more you use, the more you learn. (For full points, use all of the tags and attributes to enhance your page appearance.)

Modify the week1-1.html and week1-2.html pages using HTML

1.      Use a variety of html tags in your web page to enhance your content.

2.      DocType, html, head, title, body (Use HTML 5)

3.      Comment (<!-- comment -->)

4.      Headings (h1, h2, h3)

5.      Hyperlink (a)

6.      Line break, paragraph, code, span

7.      Non-breaking space and the copyright symbol

8.      Horizontal rule (line)

9.      Input, textarea, form, label, button

10.  Any other html elements you would like to add.

11.  Use a variety of html attributes in your web page to enhance your content.

12.  Height, width, href, lang attributes

13.  Class, style, id, title, hidden

14.  Tabindex, accesskey

15.  Type (for the input tag) and onclick for the button.

16.  Any other html attributes you would like to add. 

Step 6. Format your content with CSS

Format the content using CSS style rules. The more you use, the more you learn.

1.      Modify the week1-1.html and week1-2.html pages using CSS.

2.      Create inline style rules with the style attribute for at least 3 HTML elements

3.      Create embedded style rules for at least 3 HTML elements.

4.      Create style rules for at least 2 classes.

Format the content using CSS style rules

Use a variety of styles in your web page with either your embedded or inline styles. (For full-points, use all of the elements to enhance your page appearance.)

1.      Font-color, font-size, font-family, font-decoration, font-style, font-weight, text-align, text-decoration

2.      Border-collapse, border-width, border-style, border-color

3.      Padding and margin

4.      Color, background-color (use hexadecimal values)

Any other style rules you would like to add.

Step 7 Documentation

Document your program. *

* This means all HTML, CSS and JavaScript programs!

1.      Use proper nesting and indentation for all code

2.      User proper naming conventions for the IDs and names of elements, names of classes used in all code

3.      Include comments in the all code files (name, date, purpose of code, functions, variables)

4.      Save this file as Homework1_LastName.docx. Add this to your web site in the homework folder after you have completed both problems

Provide a screen shot showing your folders and files. (Place the screen shots in these placeholders)

Include a screen shot of all of our code, showing your indentation and nesting of the elements.

Include a screen shot of both web pages in the browser showing that your programs ‘worked’. (ie. showing the message after you filled out the form)

SmartExpert

(118)

Status NEW Posted 11 Nov 2017 09:11 PM My Price 15.00

Wee-----------k 1----------- Un-----------it -----------1: -----------Hom-----------ewo-----------rk -----------Par-----------t I-----------: G-----------ett-----------ing----------- St-----------art-----------ed:----------- Cr-----------eat-----------ing----------- an-----------d A-----------nal-----------yzi-----------ng -----------Web----------- Si-----------tes-----------

Attachments

file 1510434860-Homework1_Castilleja.docx preview (1161 words )

H-----------ome-----------wor-----------k1_-----------Cas-----------til-----------lej-----------a ----------- ----------- ----------- �-----------��w-----------eek-----------1-1-----------.ht-----------ml�-----------�� ----------- -----------“-----------wee-----------k1------------2.h-----------tml-----------”----------- &-----------amp-----------;lt-----------;!-------------Th-----------is -----------pag-----------e t-----------ake-----------s o-----------rde-----------r a-----------nd -----------pro-----------ces-----------ses----------- it-------------&-----------amp-----------;gt-----------; -----------&am-----------p;l-----------t;!-----------DOC-----------TYP-----------E h-----------tml-----------&am-----------p;g-----------t; ----------- &a-----------mp;-----------lt;-----------htm-----------l&a-----------mp;-----------gt;----------- &-----------amp-----------;lt-----------;he-----------ad&-----------amp-----------;gt-----------; ----------- ----------- &a-----------mp;-----------lt;-----------tit-----------le&-----------amp-----------;gt-----------;Or-----------der----------- - -----------New----------- Be-----------rli-----------n P-----------en -----------Com-----------pan-----------y&a-----------mp;-----------lt;-----------/ti-----------tle-----------&am-----------p;g-----------t; ----------- ----------- &-----------amp-----------;lt-----------;sc-----------rip-----------t t-----------ype-----------=&q-----------uot-----------;te-----------xt/-----------jav-----------asc-----------rip-----------t&q-----------uot-----------;&a-----------mp;-----------gt;----------- ----------- ----------- ----------- fu-----------nct-----------ion----------- ca-----------lcu-----------lat-----------eTo-----------tal-----------() -----------{ ----------- ----------- ----------- ----------- -----------// -----------get-----------s v-----------alu-----------es ----------- ----------- ----------- ----------- ----------- va-----------r n-----------ame----------- = -----------doc-----------ume-----------nt.-----------get-----------Ele-----------men-----------tBy-----------Id(-----------'cu-----------sto-----------mer-----------Nam-----------e')-----------.va-----------lue-----------;

Not Rated(0)

• Buy Answer