2: Administrative details
- Client name: Laura Orem
- Contact person: Ina P. Sum
Our (imaginary) client is a researcher in Lorem Ipsum at the Dolor Sit Amet Institute in Trondheim. Laura has spent considerable time investigating and learning about this language, but has come to a halt. She has requested that we make a website that demonstrates the peculiar aspects of this language, with the hope that this may raise awareness and aid her research.
3: Purpose and goals
The purpose will be to make a website that is accessible by Lorem Ipsum researches, as well as ressurected Romans who wants to access texts in their own language.
We aim to create tools that will translate to and from Pig Latin in order to meet the needs of the Romans in order to let the communicate more efficiently. This will also help future Lorem researcher to become proficient in the language.
The website will also contain a vast library of old Lorem Ipsum documents, as we aim to restore and preserve them for posterity. Laura has also asked us to include the ability to make the pages printable.
We will make an effort to enable a responsive design, so that researchers can access their data on their desktop, as well as on the fly on their phones. We will prioritize desktops, being the fallback design.
4: Navigation structure
The site will include a header with a navigation menu containing links to every page, so the website become a complete graph (maximal clique). Every page will then be a single click away, and no page will be hidden behind another page.
Because the website is so small, this should not be an issue. However, if the website is to be expanded upon, it might be desirable to isolate certain parts of the website.
The header should collapse on mobile devices, which will introduce a second click, but the structure will be the same.
5: Page layout and appearance
The generic webpage which contains the elements that are the same for all sub pages, is intended to look like this:
The following fonts, colors, and sizes have been chosen for the different elements on our page:
- background color: 0xFF_8F_00
- middle-background color: 0xFE_BD_48
- header color: 0xFF_DC_9F
- text color(header): 0x70_70_70
- text color(resten): svart (#000000)
- active button border: 0x05_8A_FF, 68% opacity
- font-size (header-buttons): 25px
- header-font: Arial Narrow, Helvetica, Sans-Serif
- font-family: Helvetica, Sans-Serif
- button-padding: 1em
- box width: 10vw
- alternatively: let all the buttons fill a reasonably large part of the screen shared horizontally.
- picture margin (Monty-python-dude): 0.5em
- middle-background box: 10% margin on the sides
- Header-width: 75% av view-width
- Header-height: Ca. 10vh
- text box width: Ca. 60vw
- The text itself is centered.
- Text box and header and different javascript apps are centered at middle of the page.
6: Content
Front page
This should be the landing page and should contain a sitemap leading users deeper into the Lorem Ipsum universe. It also contains some sort of text to fill the page which can be interestion to the reader.
The goal of this page is to encourage new visitors to enter the libraries of Lorem Ipsum, and to inspire them to become part of the ever-expanding research project.
Quiz page
This should contain questions which lets the user select and submit answers. The user types the answers into the white text box underneath the questions. Pressing enter submits the answer. If pressing enter proves to be unintuitive for the user, we can implement a submit button at the bottom of the quiz. The quiz app should have some more narrow margin than the normal text with in the other pages.
This page will let users know how far they have come along in understanding Lorem Ipsum.
Translator page
This page translates input text (some normal language like english), and translates it into pig latin. The top box is where the user types the input text. After pressing the translate button, the translated text appears in the bottom box.
This fulfills the goal of letting romans and researchers alike to better understand texts in English or Latin by letting them translate to their own language.
Article generator
This should contain a page creating a randomized lorem ipsum article. The user selects the amount of paragraphs he/she desires, and the article appears in the white text box below.
This will fulfill the goal of creating a vast library of Lorem articles.
Info
This page contains more details of what lorem ipsum is.
This should clarify users who stumble upon the webpage about its purpose, and persuade them to stay.
About
This should contain information about the project. i.e. Authors, deadlines, etc.
This page should inform users of who created the page.
7: Minimum requirements (Javascript programs)
Pig Latin translator
Hauk-morten will be implementing a javascript application which translates
normal language to pig latin language. Words starting with a consonant will have the first letter shifted to the end,
and ay will be appended. E.g. bee -> eebay. If the first letter is a vowel,
no letter will be shifted and only ay will be appended. E.g. ease -> easeay.
o avoid ambiguous translations, such as eat -> eatay and tea -> eatay
, a zero-width space will be inserted before ay; eat -> ea​ay.
This will ensure a one-to-one correspondence between plaintext and translations.
Quiz program
Stine will be implementing the Quiz application. This will be a quiz containing a set of questions about Lorem Ipsum. The aim is to test person of their knowledge of the language. The quiz will consist of a form, which is read by the program and assigns weights to each answer. The result should be displayed on the page as the user finishes the quiz, and should notify the user of missing questions. (The latter will be done in pure html.)
Article generator
Kasper will be creating the javascript application, Article Generator. This program will new articles from a predefined set of words load randomized articles of lorem ipsum.
This will make use of the randomly selected words to create sentences, which create paragraphs, which create articles.
Base loader
Eiving will be creating the base loader. This program will ensure that the header and footer is the same on all site pages, by loading them from a single source. This enables a modular design.
This will use fetch API to load and inject the header and footer when the page loads.
8: Plan
Organizational scheme
Lorem/
index.html
quiz.html
translator.html
library.html
about.html
info.html
template/
header.html
footer.html
image/
icon.png
monty_python_dude.png
script/
translator_en-pig-Latin.js
translator_pigLatin-en.js
quiz.js
article_generator.js
base_loader.js
style/
base.css
| Filename | Description | Assignee | Deadline |
|---|---|---|---|
index.html |
The front page | Hauk-Morten | Nov-01 |
quiz.html |
The quiz page | Stine | Nov-01 |
translator.html |
The Pig Latin translator | Andreas | Nov-01 |
library.html |
The Lorem Library | Kasper | Nov-01 |
about.html |
Site info | Eivind | Nov-01 |
info.html |
Lorem info | Stine | Nov-01 |
header.html |
Header module | Eivind | Nov-01 |
footer.html |
Footer module | Eivind | Nov-01 |
monty_python_dude.png |
Logo | Kasper | Nov-01 |
icon.ico |
Site icon | TBD | Nov-01 |
image.html |
Header image | Kasper | Nov-01 |
translator_en-pig-Latin.js |
Translator program part 1 | Hauk-Morten | Nov-01 |
translator_pig-Latin-en.js |
Translator program part 2 | Andreas | Nov-01 |
quiz.js |
Quiz program | Stine | Nov-01 |
article_generator.js |
Program to generate Lorem articles | Kasper | Nov-01 |
base_loader.js |
Program to load header and footer dynamically | Eivind | Nov-01 |
base.css |
Base css | Hauk-Morten | Nov-01 |
Deadlines are subject to change.