OVERVIEW:

NASA has a website where they post all the pictures they take and information about space exploration. We are going to create a mini site using some of their images as inspiration.

NOTE: you may NOT use a template nor may you use existing html code (but you can use html code that YOU created while doing your labs) nor may you use website building software (do not use tools such as Kompozer, Dreamweaver, BlueGriéon, Wix, etc.) to create this website. You       may only use html5-editor.net, Brackets/Notepad/TextEdit (simple text editor) and css to create the site. If the site was not made using just     those tools you will receive a 25% deduction!

PLEASE NOTE: All the material needed to help you êgure out how to complete this assignment can be found in:

To create the banner - Labs 2 and 3 (export as .jpg)

To create the web pages - Labs 4, 5 and 6 and any of the Week 6 Lecture Videos that start with HTML

BEFORE YOU BEGIN YOUR ASSIGNMENT - IMPORTANT! PERFORM THE FOLLOWING STEPS:

First create a folder called webassign on the desktop of the machine where you intend to work on the assignment (or on the memory stick you plan to use, but be careful --> losing the memory stick is not a grounds for an extension)

Create a subfolder inside the webassign folder called images.

Anytime you find or create an image to be included in this website, move the image into the webassign/images folder

Make backups often and on DIFFERENT devices. Use online (cloud) storage as well like OneDrive or Google Drive. We have had several            complaints about Western USB sticks corrupting files. You may want to buy a second USB if you are currently using a Western USB drive. Losing your USB stick or your laptop/USB stick breaking down will NOT be grounds for an extension, make sure you back up your work occasionally.

CRITERIA:

Build a website to include ALL OF THE FOLLOWING things:

1. A banner for your website made with Aìnity Photo

   Size of banner must be roughly 1000 pixels wide (no more than 1050 pixels and no less than 950pixels).

   You can use any images you find on the Internet but try to use ones from nasa.gov (Remember that best practices are to pick images with no

copyright issues but this will not be checked. We would prefer you pick free images but this is up to you) and that will add appeal to the banner but remember you need to save the URLs for the images used on your banner in order to include them on your References page.

   The banner MUST include the words "Space - The Final Frontier"

   Create a banner that is professional, appealing, and appropriate for the content

2. Content for the web pages: (read carefully)

   The document [https://www.csd.uwo.ca/~lreid2/cs1033/assignment2/fall2022space/content.txt]  contains the content to be used for

creating the web pages. This is provided so that you don't have to come up with the content. Your job is to lay out the content in an           appealing and professional manner. Note: The content êle is a text êle with no formatting so that you can copy and paste the information into your website and work with the layout and the attributes as you choose. Your assignment will be marked on how nicely the                 information has been presented. Add at least one image to every web page (Exception: you are not required to add images to the             references page) in order to give each page more visual appeal but, remember to reference all images used, even if we supplied the          image. Include references for any images you put on your banner and buttons. Replace hyphens for lists with the numbered or bulleted   (structured) list.

3. Number of Web pages: For your website you must create 5 web pages in total: Home, The Moon, Solar System, Image of the Day, and  References. Every page must have your banner along the top before any other content is shown. You then need to create a navigational menu structure at the top or along the side of each webpage containing 5 links (buttons or text links), each linking to one of the 5 web   pages. The text for the 5 web pages is contained in the  [ [ [content document] ] ]  . Every page in the website must have a properly

formatted property title as shown in lecture and in labs. The êle names for the 5 web pages should be lower case, descriptive, and not contain spaces.

Listed below are guidelines for each of the 5 web pages:

1. Home --> Text for this webpage is included in the  [content document]

   Spotlight (make bigger or bolder, do something to make it stand out) the first line: "Space - The Final Frontier"

   Convert the words at the bottom of this page: "Click here to find out more about the history of Canada in space" to a working, clickable link

that opens this website when clicked: https://www.asc-csa.gc.ca/eng/history-of-canada-in-space.asp

   Give the 6 quotes all the same formatting.

   Include the following picture of Chris Hadêeld anywhere on this home page:

https://www.nasa.gov/sites/default/êles/styles/full_width_feature/public/images/714994main_exp_34_crew_ready_full_full.jpg (NOTE: you may resize/crop this picture to make it êt in with your design but be careful not to skew it)

   Convert the email address at the bottom of this page into a working, clickable email link that will pull up Outlook or some other email

reader. Note: it is just a fake email so don't worry if the email bounces if you attempt to send something to it.

2. Moon--> Text for this webpage is included in the [content document]

   Neatly format the given content on this page.

   Create a link on the êrst occurrence of the word Earth in the êrst paragraph of the content for this page that jumps to the

anchor/bookmark you created for the Earth section of your Solar System page.

   Find an animated gif that is somehow related to our moon and add it to this page.

3. Solar System--> Text for this webpage is included in the content document    Create a link from the word "visualize" on this page to this

website:  https://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html

   Do something to the phrase: My Very Educated Mother Just Served Us Nachos! to make it stand out a bit.

   Turn the hyphenated list of 8 planets into a bulleted or numbered list, and convert each of those 8 list items into bookmark links that

jump down to the corresponding planet heading in the sections below.

   From EACH of the 8 sections have a "Back to Top" link that jumps back to the top of the Solar System page (just below your menu)

   Neatly format the list and headers for each planet to look clean and professional.

4. Image of the Day --> Text for this webpage is included in the content document      Make the words "Image of the Day" in the content for this page link to this

site: https://www.nasa.gov/multimedia/imagegallery/iotd.html

   Pick 3 of the previous images of the day pictures, it can be any picture that you ênd exciting or appealing. You can either download

the images if you need to crop them, or you can link directly to the NASA image.  Select a title for each image.

   Bold/Highlight each title.

   Add 2 or 3 sentences to explain what the picture represents. If you use the words given by NASA make sure you put them in quotes

and put something like: According to Nasa, this picture represents "..." (put their description in the quotes) OR you can put their description into your own words.

   Make a link from the image directly to the NASA description for this image.  For example, if this was one of the images you

selected: https://www.nasa.gov/sites/default/êles/styles/full_width_feature/public/thumbnails/image/52017483234_50468627ed_o.jpeg, then when a user clicks on the image in your site, it should link to this page:  https://www.nasa.gov/image-feature/returning-from-the-

spacex-crew-4-dress-rehearsal

   Neatly format this page.

5. References --> This webpage must contain the URLs for EVERY image you obtained from the Internet (even the NASA ones!) and used within your website.  Make sure this page is neatly laid out and organized. You no longer have to place your image references in the kritik.io box under your link since they are now listed on this web page. References do not have to be in MLA, APA, or any other official citation format. If you use a picture you took yourself, and don't have a URL for it, you MUST still include something like: Picture of Cat - Taken by me.  Even for image(s)     that we gave you, you MUST include a reference in your references page.

4. A Table to achieve clean edges and strong alignment: Use a table(s) with êxed 1000 pixels width to control your overall website layout. You can also use nested tables, additional tables, rows, and columns to achieve your layout.

5. A Navigational structure: Create your menu links as button images, or as text to each of the 5 pages. NOTE: If you decide to create button images, you MUST use Aìnity Photo to create your buttons, you may not use button generating software. Navigational buttons/links that    are very professional looking will get more marks than plain text links. *IMPORTANT* Make sure your links all work from each page to every other page. Test this AFTER uploading it to the server to ensure it wasn't just working on your local PC only.

6. Appropriate Images: Appropriate images MUST be embedded in each of your webpages (except for the References page) to make the      pages interesting. All images used must be cited in your "References" webpage. You can ênd lots of free images to use in your site from     here: https://pixabay.com/. You can also purchase images if you want from online stock photo companies such as                                            http://www.bigstockphoto.com/, http://www.istockphoto.com/ We encourage you to follow best practices by using free images but this will not be checked and no marks will be deduced if you use copyrighted images, but either way, free or copyrighted, you MUST include a          reference (the URL) for every image you use in your references page EVEN FOR PICTURES THAT WE SUPPLIED YOU WITH!

7. Colour creativity: The colours used in your entire website (background colour, font colours, banner colours, button colours, etc.) should co- ordinate with each other and work well with the overall look of your pages

8. Clean Neat Layout: Aim for neatly laid out pages as opposed to cluttered, crowded pages.

9. Links: You need an instance of each of the following link type in your website:    e-mail link

   link(s) pointing to another area within the same page (bookmark/anchor links) and link(s) that allow the user to return to the top of the

current page (Back to Top links on long pages).

   link(s) pointing to outside website(s) on the Internet

10. Structured List (ordered OR unordered): You must have some sort of bulleted list or numbered list in one of your pages using the list tool in html5-editor.net (there should be no hyphens used as bullets for lists).

11. Well balanced text formatting. We will be looking for:

   Appropriate size - headings, body of text, balance, did you use headings appropriately to make titles stand out, etc    Text emphasis - use bold/italics as you see êt. There must be at least one example of both.

   Layout within each page - should not be cluttered, should be easy to read, should have clean alignment (use what is appropriate: Left,

Right or Centered Alignment)

12. A well organized File/Folder structure to hold all your html êles and images. Marks will be given based on how well you follow the      instructions given in lectures and lab, how/where you stored your webpages in your folder and how/where you stored your images in your website folder/directory.

13. An uppermost folder called webassign. You must keep your index.html home page in the upper most folder (the upper most folder must be called webassign). You will be given marks for appropriate êle names and folder names as indicated in class lectures and labs. The home

page called index.html MUST be located in the webassign folder and NOT in a sub-folder of webassign. Thus, this is correct:                     webassign/index.html and this is incorrect: webassign/pages/index.html. The incorrect way will NOT display your home page initially so make sure you put index.html inside folder webassign NOT in a sub-folder of webassign.

14. Read the "FinalTips" table at the bottom. Some requirements are explained down there only so make sure you read it and follow it while building your website.

FINALLY - Make sure you watch this entire video (it is 1.5 hours but it will help you get a good mark and you can watch it at double speed to shorten the length of time it take to watch). Please watch the ENTIRE video!

HANDING IN THE SECOND ASSIGNMENT:

STEP 1: SFTPing YOUR WEBSITE TO THE INTERNET

As long as you have your website sitting in a folder called webassign on the GAUL server, then anyone will be able to see your assignment

simply by using the URL address, for example:

You will still be using WinSCP or Filezilla to upload your êles but a few things will be diéerent:

1. When you run WinSCP or Filezilla use the following information:

1. Host Name: cs1033.gaul.csd.uwo.ca

1. NOTE: if you are using Filezilla, you will need to put sftp:/cs1033.gaul.csd.uwo.ca

2. Username: Your Western Username, for example jsmit27

3. Password: Your Western Password

4. Port: 1033

5. File Protocol: This SHOULD, by default, be SFTP, but if it is FTP, change it to SFTP

2. You will be put right in the directory where you will upload your webassign folder.

3. Drag your webassign folder from your machine (on the left) up to cs1033.gaul.csd.uwo.ca (on the right)

4. You no longer need to set permissions, they should be set automatically but you should still double check this by going to your website and checking that your links work.

5. YOU MUST CHECK THAT YOUR WEBSITE WORKS, please follow the instructions below.

STEP 2: TESTING TO SEE IF YOUR WEBSITE IS VIEWABLE FROM THE INTERNET

WARNING: If you want to check if your website is working (all the links are correct and none of the images are broken), you SHOULD check it     from an account/machine that was NOT used to make assignment (or use your phone to check the link that you will submit to kritik.io). Thus, if you made your assignment on a home machine/laptop machine, then ênd another machine on campus to test the ALL the links OR have a        friend test the links for you on their machine OR test the links using your phone.  It may appear that everything is correct but when your peers go to look at your website, the links may be broken or the images may not appear if you don't check all your webpages and links and images     carefully in a browser.

To double check, open a browser and type the following web address:

 

and change youruserid above to whatever your Western userid is. This should bring up your home page called index.html. If it doesn't, you    have done something wrong, try again or visit a TA during the posted consulting times. If your links or images are not working, this means you are not referencing them correctly in your web page and should check the following troubleshooting tips:

1. You should look at where you stored the page/image and how you linked it to êgure out what went wrong.

2. Sometimes deleting it and re-uploading it will êx it.

3. Make sure that all your images and web pages are within the website, i.e. within the folder webassign.

4. Make sure that your images are named exactly the same in your êle directory panel as the link in your .html êle. For example: Cat.jpg is not the same as cat.jpg thus the case is very important in a êlename..

5. Make sure that the subfolder containing your picture êles has the same case as you typed into html5-editor.net (e.g. make sure, if you typed in images/cat.jpg into html5-editor.net, that you named your subfolder images and NOT Images)

STEP 3: SUBMITTING YOUR ASSIGNMENT TO KRITIK AND PEER MARKING

1. CREATION STAGE - You  MUST submit a link to your website via kritik.io See below for the details of how to do this.

   Go to Kritik.io and paste in the link to your website.  This is the ONLY thing you have to put into the kritik.io text box. It should look like

this (remember to TEST your link AFTER you have pasted it in kritik.io. You get a mark for pasting in the CORRECT link so double check your link in kritik.io. If you don't double check your link your peers might not ênd your site):

 

2. EVALUATION STAGE (PEER MARKING) - After the late period for submitting ênishes, you will get THREE days to mark 5 or 6 of your peers.   10% of your mark will be based on how well you mark your êve peers. You will get a better mark the more carefully you mark, so do not be  too easy and do not be too hard, just be fair and careful and correct when marking. 5% of your mark will be based on the written comments you leave. Try to explain GENTLY why you removed marks and any issues you had with the student's website AND  try to ênd something to   be positive about the submission since people hopefully have worked hard on the website so your comments should be respectful.  THIS      STAGE CANNOT BE LATE - you MUST do your peer marking during these 3 days.

3. FEEDBACK ON FEEDBACK STAGE (Reviewing the feedback given to you) - The last stage, the feedback on feedback stage, is worth 5%, after  the peer marking evaluation stage is done. You only get ONE day to complete this stage.  Read over the comments you received from the 5  people who marked you and then, using a sliding scale, rank them as motivational AND as helpful. Remember that students will be graded   on the value you give them on the sliding scales, so please be thoughtful when doing the rankings. For each of the 5 markers that you rank,  you get 1 mark up to a total of 5. If only 4 people marked your assignment, then it will be taken out of 4 and converted to a mark out of 5      (you won't lose any marks since that was not your fault). THIS STAGE CANNOT BE LATE - you MUST read over the comments your peers gave you and rank them during this ONE day.

4. DISPUTES - If you feel like you were marked incorrectly on any of the non-subjective rubric items, you have 4 days, including the one day you get to do the Feedback on Feedback stage, to click on the dispute button in kritik.io to indicate what was marked incorrectly. Identify the        incorrectly marked item(s) by using the giving the row numbers for the items where you feel like you were marked incorrectly, put those        numbers in the dispute box and submit your dispute. A t.a. or your professor will check those items for you. After the professor ênalizes the assignment, no more disputes will be accepted. You may also ëag comments that were oéensive. Note though that comments you disagree  with are NOT oéensive, only comments containing swearing or derogatory remarks should be ëagged. Also note that any êles

changed/reuploaded AFTER the due date are no longer eligible for disputes.

The web server will be VERY busy with 800 students trying to upload their assignment all at the same time. NO          extensions will be given because a student couldn't upload their êles before the due time. Thus we STRONGLY           recommend you try to hand the assignment in the day before it is due, do NOT leave it till the ênal day. Also note    that NO extensions will be given due to lost memory sticks or broken/stolen laptops so make sure you back up your work often.

Late Policy

Any assignment received after 11:55pm on Friday due date but before 11:55pm on Saturday will lose 15%

Any assignment received after 11:55pm on Saturday, but before 11:55pm on Sunday will lose 30%.

Any assignment received after 11:55pm on Sunday, but before 11:55pm on Monday will lose 45%.

No assignments submitted after 11:55pm on êrst Monday that followed the Friday due date will be accepted and a grade of ZERO will be     given                                                                                                                                                                                                                                            NO extensions will be given for computer technical problems, wireless/network issues or Owl connectivity issues.  If your machine is having problems, you MUST ênd another computer to use to complete the assignment. This is a Computer Science course so working                       laptops/machines are expected and required!