Difference between revisions of "Karma/Layout Converted Squeak Lessons"
| (2 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
Your background image should 1200px by 900px | Your background image should 1200px by 900px | ||
The best way to designate the background image is in your css/lesson.css file | The best way to designate the background image is in your css/lesson.css file | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | body { | ||
| + | background-image: url(./path/to/file.png); | ||
| + | } | ||
==Header== | ==Header== | ||
| Line 34: | Line 32: | ||
Start button (position to the left of play again button) | Start button (position to the left of play again button) | ||
Play again button (right aligned) | Play again button (right aligned) | ||
| − | + | ||
| − | Page | + | ==Feedback== |
| − | + | ||
| + | TODO | ||
| + | |||
| + | ==Help== | ||
| + | |||
| + | TODO | ||
| + | |||
| + | ==Page Navigation== | ||
| + | |||
| + | The next page button should be positioned just above the footer bar to the right of the screen. | ||
| + | |||
Previous page button should be positioned just above the footer bar to the left of the screen | Previous page button should be positioned just above the footer bar to the left of the screen | ||
| − | Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page) | + | Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page). To the left and right of the lesson area for back and next respectively, vertically centered to the page. |
| − | To the left and right of the lesson area for back and next respectively, vertically centered to the page. | ||
| − | Text | + | ==Text== |
| − | Size – Big enough so that its clearly readable on a XO screen | + | |
| − | Color – Contrasting from the background so that its distinctly visible | + | * Size – Big enough so that its clearly readable on a XO screen |
| + | * Color – Contrasting from the background so that its distinctly visible | ||
Latest revision as of 02:53, 26 January 2010
Overrall Considerations
We are converting the Squeak lessons for the XO, which has peculiar display characteristics
- 96 DPI (dots per inch) instead of the usual 126 or 134
- 1200x900 screen resolution
The header and footer both use 75 pixels of vertical space.
Your working area is roughly (0, 75px) to (1200px, 1125px).
We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.
Background Image
Your background image should 1200px by 900px The best way to designate the background image is in your css/lesson.css file
body {
background-image: url(./path/to/file.png);
}
Header
The following items are on the header bar from left to right:
- Back button - returns to the lessons list (left aligned)
- Activity title (position to the right of back button)
- OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)
- Help button – help text appears (right aligned)
The following items should appear on the footer bar from left to right: Score board (left aligned) Level indicator – if required (position to the right score board) Start button (position to the left of play again button) Play again button (right aligned)
Feedback
TODO
Help
TODO
The next page button should be positioned just above the footer bar to the right of the screen.
Previous page button should be positioned just above the footer bar to the left of the screen
Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page). To the left and right of the lesson area for back and next respectively, vertically centered to the page.
Text
- Size – Big enough so that its clearly readable on a XO screen
- Color – Contrasting from the background so that its distinctly visible