Difference between revisions of "Module 1"

From CSE330 Wiki
Jump to: navigation, search
(Grading)
(Validation)
 
(81 intermediate revisions by 9 users not shown)
Line 1: Line 1:
In Module 1, you will learn about Linux System Administration, and you will set up a web server on Amazon Web Services.
+
__NOTOC__
 +
Module 1 introduces the fundamentals of HTML and CSS.  You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search.  This module is worth 50 points.
  
This article contains your assignments for Module 1.
+
== Reading ==
  
== Assignments ==
+
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
  
=== Learn About Linux ===
+
* [[Git]]
 +
* [[HTML and CSS]]
 +
* [[HTML Forms]]
 +
* [[VS Code]]
 +
* [[FAQ - Mod 1]]
  
Linux is an open-source operating system based on UNIX. Linux is highly versatile and is used in a wide range of applications.
+
== Assignments ==
  
If you are not a Linux guru, read the Linux guide to get started: [[Linux]]
+
=== Write a Birthday Card ===
  
=== Create an AWS EC2 Instance ===
+
'''Write a birthday card to a friend or family member using HTML and CSS.'''  Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance.  Some ideas:
  
Once you understand [[Linux]], you need to set up your Amazon EC2 Instance.  Use the AWS article to guide you through the process: [[Amazon Web Services]]
+
* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
 +
* Make the text big and include pictures of hearts
 +
* Use a font with text shadows (more advanced)
  
=== Add your Own User Account ===
+
Use this opportunity to experiment with the plethora of CSS properties.  Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly.  The main thing is that you learn HTML and CSS and use them appropriately.
  
On your EC2 instance, set up your own personal account.
+
==== How to Edit Your File ====
  
For information on how to add a user account, see the Linux guide: [[Linux#User Management]]
+
Throughout this course we '''highly''' recommend using VS Code https://code.visualstudio.com/download, and have included tips for each module specific to VS Code.
 +
Visit the wiki page [[VS Code]] and check out the Module 1 section
  
You need to do the following things once you've created your account:
+
'''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work.  You need a plain text editor.
  
# '''Add your account to the Sudoers list.'''  Instructions are in the Linux guide.
+
==== How to View Your HTML Document ====
# '''Allow your user to log in via SSH.'''  Instructions are in the Web Server Configuration guide: [[Web Server Configuration]]
 
  
From now on, you should log into your EC2 instance using only your own username and not the default username that Amazon gives you (''ec2-user'' or ''ubuntu'').
+
Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox).  For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox.  When the file opens, it should be under the file:/// protocol.
  
=== Set the Timezone ===
+
In Module 2, we will install a web server that serves up pages on the http:// and https:// protocols.
  
'''Set your server to use US Central time.'''  Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]
+
==== Validation ====
  
=== Set Up the Apache Web Server ===
+
'''Your birthday card and search portal pages must pass the W3C Validators for both HTML and CSS with no errors or warnings.'''  You can upload your HTML to [https://validator.w3.org/ the HTML validator] and your CSS to [https://jigsaw.w3.org/css-validator/ the CSS validator].
  
You need to '''install the Apache web server on your EC2 instance'''.  Instructions are in the Web Server Configuration guide: [[Web Server Configuration#Apache]]
+
For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]]
  
In order for your web server to be accessible, you need to '''open up Port 80 on your EC2 instance'''.  Instructions are in the AWS guide: [[Amazon Web Services#Enabling Web Access to your EC2 Instance]]
+
=== Make a Portal to a DuckDuckGo Search ===
  
'''Enable the UserDir module in Apache.'''  Instructions are in the Web Server Configuration guide: [[Web Server Configuration#Enabling the UserDir Module]]
+
'''Write an HTML document containing a form that searches DuckDuckGo's web site.'''  You should be able to type in a search term and have your form load the DuckDuckGo search page. In this HTML document you must also include this course's regrade policy to ensure that you have read it and understand it. [https://www.arl.wustl.edu/~todd/cse330/info.html Regrade Policy]
  
'''Remap the UserDir module to .html''' Instructions are also in the Web Server Configuration guide in the same section as above.
+
# Visit [https://www.duckduckgo.com/ www.duckduckgo.com].  Search for something easy to spot in the URL, like "QUERY".
 +
# Look at the URL of the search page.  What is the script URL?  What is the query variable?
 +
# Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.
  
=== Set Up Subversion ===
+
- Additionally, we want you to copy/paste this course's regrade policy somewhere into this html document to ensure your familiarity.
  
You need to '''set up subversion on your EC2 instance as well as your desktop'''.
+
== Grading ==
  
'''This semester's Subversion repository is: <nowiki> https://shell.cec.wustl.edu:8443/cse330_fl12/svn/Lastname-studentid </nowiki>'''
+
We will be grading the following aspects of your work. There are 50 points total.
* Replace Lastname with your last name (capitalize the first letter in the last name) and studentid with your student ID
 
* Do not forget the underscore between cse330 and fl12 (NOT A SPACE)
 
  
Instructions for configuring Subversion are in the Web Server Configuration guide: [[Web Server Configuration#Subversion]]
 
 
== Grading ==
 
  
<span style="font-size:2em; line-height:2em;">'''Due Date: Sept 10th 2012 by 1 PM'''</span>
+
'''Assignments (including code) must be committed to GitHub by the end of class on the due date. Commit early and often. Failing to commit by the end of class on the due date will result in a 0.
  
Make sure to read the Web Server wiki for specific instructions:  [[Web Server Configuration]]
 
  
You will be asked to do the following:
+
# '''Birthday Card (30 Points):'''
 +
#* Correct usage of HTML and CSS in your birthday card (10 points).
 +
#*: ''Make sure that you use HTML for "content" and CSS for "appearance."  Don't write inline styles: use a separate stylesheet and link your HTML file to it.''
 +
#* Experimenting with at least 5 different CSS properties in your birthday card (10 points).
 +
#* Birthday card and search portal pages pass the W3C validation for HTML 5 and CSS. (10 points).
 +
# '''Search Portal (10 Points):'''
 +
#* DuckDuckGo search portal is functional (9 points).
 +
#* Your search portal page includes the text of this course's regrade policy (1 point).
 +
# '''Account Creation and Version Control (10 Points):'''
 +
#* GitHub account created (2 Points)
 +
#* Module 1 repo created using the link provided on Piazza (2 Points)
 +
#* Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to GitHub. (4 Points)
 +
#* Files pushed to repo on GitHub using Git (2 Points)
  
# Connect to your ec2 instance
 
# Display the current time on your ec2 instance
 
# Show the test file at http://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/~yourUserName/hello.txt  (note that ~yourUserName cannot be ec2-user!)
 
# Show the test helloFromThe___.txt files connected to your subversion repository.  You will be asked to make and commit changes in front of the TA.
 
  
{|
 
!Assignment
 
!Points
 
|-
 
|Creating your VM
 
|1
 
|-
 
|Working SSH
 
|1
 
|-
 
|Working user account
 
|1
 
|-
 
|Working NTP (correct time zone)
 
|1
 
|-
 
|Remap userdir
 
|1
 
|-
 
|Apache Setup
 
|1
 
|-
 
|SVN setup on Amazon Instance
 
|1
 
|-
 
|SVN setup on Eclipse
 
|1
 
|}
 
  
 
[[Category:Module 1]]
 
[[Category:Module 1]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 12:44, 13 June 2022

Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search. This module is worth 50 points.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignment.

Assignments

Write a Birthday Card

Write a birthday card to a friend or family member using HTML and CSS. Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:

  • Make the background-color of the page baby blue and use purple ink to write a card to a little boy
  • Make the text big and include pictures of hearts
  • Use a font with text shadows (more advanced)

Use this opportunity to experiment with the plethora of CSS properties. Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.

How to Edit Your File

Throughout this course we highly recommend using VS Code https://code.visualstudio.com/download, and have included tips for each module specific to VS Code. Visit the wiki page VS Code and check out the Module 1 section

Important Note: Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will not work. You need a plain text editor.

How to View Your HTML Document

Once you have birthday.html, you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.

In Module 2, we will install a web server that serves up pages on the http:// and https:// protocols.

Validation

Your birthday card and search portal pages must pass the W3C Validators for both HTML and CSS with no errors or warnings. You can upload your HTML to the HTML validator and your CSS to the CSS validator.

For more information on validation, see the HTML and CSS guide: HTML and CSS#Validation

Make a Portal to a DuckDuckGo Search

Write an HTML document containing a form that searches DuckDuckGo's web site. You should be able to type in a search term and have your form load the DuckDuckGo search page. In this HTML document you must also include this course's regrade policy to ensure that you have read it and understand it. Regrade Policy

  1. Visit www.duckduckgo.com. Search for something easy to spot in the URL, like "QUERY".
  2. Look at the URL of the search page. What is the script URL? What is the query variable?
  3. Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.

- Additionally, we want you to copy/paste this course's regrade policy somewhere into this html document to ensure your familiarity.

Grading

We will be grading the following aspects of your work. There are 50 points total.


Assignments (including code) must be committed to GitHub by the end of class on the due date. Commit early and often. Failing to commit by the end of class on the due date will result in a 0.


  1. Birthday Card (30 Points):
    • Correct usage of HTML and CSS in your birthday card (10 points).
      Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a separate stylesheet and link your HTML file to it.
    • Experimenting with at least 5 different CSS properties in your birthday card (10 points).
    • Birthday card and search portal pages pass the W3C validation for HTML 5 and CSS. (10 points).
  2. Search Portal (10 Points):
    • DuckDuckGo search portal is functional (9 points).
    • Your search portal page includes the text of this course's regrade policy (1 point).
  3. Account Creation and Version Control (10 Points):
    • GitHub account created (2 Points)
    • Module 1 repo created using the link provided on Piazza (2 Points)
    • Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to GitHub. (4 Points)
    • Files pushed to repo on GitHub using Git (2 Points)