At SFC, we aim to learn the skills to identify and solve problems. Be conscious of the following methodology when you work on a porject.
- Generate as many ideas as possible, discuss, set a goal.
- Find out knowledge and skill necessary to achieve the goal.
- Create something. Inspect if your goal is achieved or not.
- You must make mutiple pages connected by links.
- Make it accessible via
http://web.sfc.keio.ac.jp/~(your login ID)/info1/final.html.
Hints on Choosing a Topic
- Shopping site
- Show images and descriptions of products. Users put an amount and click ‘Buy’ button, then the total is displayed. You may add features such as delivery charge and discount.
- Moving picture book, Game book
- If users click a sentence or a picture, something happens. Users can select an action of the hero to change the story after that.
- Personality test, Fortunetelling
- Users are requested to answer some questions. Then something is displayed.
- Game whose progress is driven by mouse clicking. For example, concentration, treasure hunting (sample in Japanese). It is possible to make a whack-a-mole if utilizing timer events (fairly difficult, though).
How to Implement
- Draw a rough sketch of the screen.
- In case of a shopping site, layout of product pictures, descriptions, fields for amount, fields for total, etc. is necessary.
- Decide flows of ‘Input -> Process -> Output’
- For example, Input is amounts and ‘Buy’ button, Process is calculation of total and Output is displaying the total.
- It may be complicated if ‘Buy’ button put a product into the shopping cart, and the total is calculated afterward.
- Make a screen with HTML and CSS. In this step, fixed parts and the initial stage of variable parts are concerned.
- Course materials are only starting points. Be active to search for knowledge.
- If you want to do something, searching for ‘HTML something’ or ‘CSS something’ on Internet will probably bring some results. If you cannnot understand them, ask the teacher or TA/SA.
- Note that some information is obsolete or applicable only to a specific browser.
- Make a function for each flow of ‘Input -> Process -> Output’.
- If it does not work, or works oddly:
jsfile with debugger to confirm the program is accessible. Wrong file name? Different directory? Missing
scriptelement? Forget to save after editing?
- Set a breakpoint with debugger. If it does not stop at the breakpoint, you fail to call the function. Wrong function name? Wrong event handler (such as
- If it stops at the breakpoint, check the values of variables.
How to Write Reports
It is important not only what you made but also to explain how you made it. So, you need to write a report about the project. You had better make memo or draft while working because details are easily forgotten.
Structure of the report is roughly as follows:
- Introduction: Motivation or background why you wanted to make it.
- Design: Explanation about your plan. It may be different from the end result. It is a good idea to explain turned-down plans as well as the adopted plan.
- Evaluation: Was the project achieved as planned? If not, why? Are you satisfied with the result? Any idea to improve it?
- Reference: See SFC Guide p.55-56.
- Acknowledgements: Acknowledge your friends who kindly give you advices.