CSCI-1080 Intro To CS: World Wide WebSaint Louis University
|
| Grade from Peer review | 20 |
| Goals/Content/Scope | 5 |
| Design | 5 |
| Functionality | 5 |
| Overall | 5 |
| Grade from Instructor | 80 |
| Website organization | 12 |
| Website content | 15 |
| Website design | 15 |
| Website use of tools | 12 |
| Website testing | 6 |
| Web Project Write-up | 20 |
To build your website, you may not use any online website building platforms that do not require coding, e.g., but not limited to, Wix, Weebly or Squarespace. One of the objectives of this class is to learn the basics of (web) development. To do so, students should gain some coding experience. Using platforms that allow you to build a website without coding is hence not very useful, although the design could be, in some case, beautiful and the effort to build a website could be lower. These platforms often allow users to insert HTML, CSS and JavaScript code snippets, but the learning experience of organizing information, modifying templates, designing, testing and debugging code would be lost.
If you use an existing (responsive) CSS template, you are required to print the existing CSS code before your submission, and highlight your changes with respect to the existing template. This is a semester long project and hence changes need to reflect such length. A lack of details that indicate how your version is different than the template may result in significant score reductions. A suggestion is simply highlight with a different color in your report your changes on the HTML, CSS and Javascript.
More details on deliverables and grading are below.
Each student will have 3.5-4 minutes to present his/her website in class. The presentation should focus on website design and functionality. Attendance is required. Those attending will evaluate each website as it is being presented, using criteria very similar to prior online peer evaluations. The scores will be averaged for each website and the results will count toward the project grade according to the weighting above.
Organization of site appearance. (E.g., Prioritization of contents, home page accessibility; each page stands alone and does not present too much information)
Organization of site artifacts. (E.g., appropriate use of file names, folders, subdirectories, and web-hosting services if used.)
Organization of the navigability (e.g. the navigation bar is not hidden, users do not have to struggle to find it, it exists and it is consistent on every webpage. Users do not have to use the “go back” button of the browser while navigating on your website.)
Relevant reading: Web Style Guide: Site Structure
The goal of the website is immediately clear (within a few seconds).
Your website must stand on its own without any unfinished links or “under construction” apologies.
Proper attribution must be given to all sources (i.e., respect terms of use and/or Creative Commons licenses of your sources).
Amount of content, organization, and design must be commensurate with a semester-long project especially if you use a CSS template or any other template. A single web-page (without additional sub-pages) or a few minor changes from a downloaded template do NOT meet this standard.
The website shall contain at least 4 pages worth of good content (not including pages required to create frames) and the template eventually used must reflect the goal of your site.
A blog counts as one page (no matter how many posts), provided that the blog is well-integrated with the project as a whole. An account you have on some other service flickr, for example, may be an important part of your project but probably does not count toward the 4 pages requirement, unless you can demonstrate sufficient work under the hood that you have done to customize your flickr account so that it is well-integrated with your project.
Appropriate use of design grids, layout, colors, fonts, images, etc. An art page must have creative design where as a professional page must be free of cheesy displays.
Relevant reading:
Your site must include at least 3 of these 6 toolsets:
CSS (e.g., adapting a template)
Javascript
Jemdoc. If you use Jemdoc, please include a link to your source.jemdoc file in your submission.
PHP (e.g., adapting WordPress or similar). Note that merely installing Wordpress does not meet the PHP requirement. You need to do at least a little under the hood work customizing your Wordpress site.
React. A JavaScript Library for building user interfaces https:reactjs.org/
Forms
Forms do NOT count for two toolsets: e.g. a form that uses PHP (or JavaScript) does NOT count as requirement for PHP and forms. Also, if your websites includes two forms in PHP (or Javascript), you still have covered only one out of five toolsets.
Does your site work on the browser(s) that you support?
Do all links work?
Do all images load in a reasonable time?
use GIMP to reduce their size to a web-friendly format (see this GIMP tutorial )
Did you test it using a mobile framework?
With the Chrome inspector tool you can do that
The Web Project Write-Up is due the same day of the project presentation and it is worth 20 points. These 20 points are added to your final project grade. They are not droppable like HWs are.
Write a concise structured essay with the 5 sections described below. For ease of grading, please make clear when you are addressing section 1, 2, 3, etc.; also be sure to actually write your answer and not just list a bunch of bullet points.
Please type your submission and save in one of the following formats: MS Word (doc, docx, txt or Adobe PDF).
Please name your file with the following format: Last_First_Project_Writeup_MM_DD_YYYY.pdf, for example Smith_John_Project_Writeup_12_01_2017.pdf
Please email the final copy of your submission to the instructor
You must include title to your sections and subsections. Name the Sections and the Subsections as they are named in these guidelines below.
Concise and current project specification that reflects your final website, including
Subsection 1.1: Summary of site and its most important goals
Subsection 1.2: Primary audience for the Web site.
Is your site built from scratch or based on an existing site?
Subsection 1.3: Site organization:
List & description of pages, including which pages link to which other pages
List & description of artifacts (e.g., images, audio, video)
What kind(s) of web-hosting does your site use? (E.g., slu.edu, or commercial web-hosting). If your site uses several different hosts, clarify the purpose of each.
Subsection 1.4: Tools
Which Web programming tools did you use? (E.g., CSS, Javascript and Forms.) If you used PHP, be sure to provide relevant excerpts of your PHP code, highlighting edits you made, crediting your sources, etc. Recall that we cannot see your PHP code and give you credit for it unless you show us your PHP as part of your write-up.
What other tools, templates, and/or utilities did you use to build your site (e.g., CSS templates, Javascript utilities, etc.) If your site uses a blogging platform or some other external service (flickr, etc), please be sure that is described in the hosting section above, in addition to any description you add here.
Subsection 1.5: Licence
What Creative Commons license or other license did you use and how?
Did you use only images found using the Creative Common Image Search Engine or you used your own photos?
Subsection 1.6: Browser(s)
What browser(s) does your site support?
Is the site content clear also within mobile devices?
Briefly explain the history of your project. If you added to a pre-existing website, make very clear (with links as appropriate) what existed before and what was added as a result of your project. Describe how your project evolved over the semester, focusing on significant changes from your plan and significant milestones in the actual development.
Explain why you organized your web site the way you did. (See “Website organization” under Web project guidelines for more about what we mean by organization).
Explain briefly how you performed the testing of your site. Be sure to test your website with at least 2 different browsers and describe the results of your testing. Here you can find a list of the most popular browsers.
Discuss the main lessons you learned during the course of the project. Be sure to consider both:
Subsection 5.1: Web programming
lessons that apply directly to your web-programming now, and
Subsection 5.2: New Resources
lessons that apply to discovering new resources & approaches to develop your web-programming skills in the future.
The contect of this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.