Line 1: |
Line 1: |
| <div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"> | | <div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;"> |
− | <noinclude>{{Translations}}</noinclude> | + | <noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude> |
| {{hig-subnav-intra|p_page=Zoom Metaphor|c_section=The Laptop Experience|c_page=The Frame|n_page=Bulletin Boards}} | | {{hig-subnav-intra|p_page=Zoom Metaphor|c_section=The Laptop Experience|c_page=The Frame|n_page=Bulletin Boards}} |
− | | + | {{TOCright}} |
| ===The Frame=== | | ===The Frame=== |
| : See [[Design Team/Designs/Frame | Frame]] for new design images. | | : See [[Design Team/Designs/Frame | Frame]] for new design images. |
− | [[Image:frame.jpg|right|thumb|240px|The Frame: The left, top, and right sides of the frame represents nouns: persons, places, and things. The bottom of the frame represents those elements that require action: activities, invitations, and notifications.]] | + | [[Image:frame.jpg|left|thumb|240px|The Frame: The left, top, and right sides of the frame represents nouns: persons, places, and things. The bottom of the frame represents those elements that require action: activities, invitations, and notifications.]] |
| | | |
| ====Always Available on the Periphery==== | | ====Always Available on the Periphery==== |
Line 11: |
Line 11: |
| | | |
| When [[#Activation_Methods|activated]], the Frame slides in atop the currently visible view, providing access to needed functionality, yet quickly retracting from view once the task for which the child invoked it ends. Although these transitions happen quickly, a forgiveness parameter prevents unintentional Frame retraction in hopes of making interaction with this interface element completely natural. | | When [[#Activation_Methods|activated]], the Frame slides in atop the currently visible view, providing access to needed functionality, yet quickly retracting from view once the task for which the child invoked it ends. Although these transitions happen quickly, a forgiveness parameter prevents unintentional Frame retraction in hopes of making interaction with this interface element completely natural. |
| + | |
| | | |
| ====Frame Components & Organization==== | | ====Frame Components & Organization==== |
− | {|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
| |
− | !style="background:#D6784C"|API Reference
| |
− | |-
| |
− | |[[Sugar Architecture/API/sugar.shell.view.frame|Package sugar.shell.view.frame]]
| |
− | |}
| |
| | | |
| [[Image:Frame components.png|320px|left|thumb|The Frame is organized into distinct logical groups.]] | | [[Image:Frame components.png|320px|left|thumb|The Frame is organized into distinct logical groups.]] |
Line 24: |
Line 20: |
| | | |
| =====People===== | | =====People===== |
− | {|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" | + | {|border=1 cellpadding=1 cellspacing=0 style="float: right; margin: .5em 0 .5em 1.4em; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
| !style="background:#D6784C"|API Reference | | !style="background:#D6784C"|API Reference |
| + | |- |
| + | |[[Sugar Architecture/API/sugar.shell.view.frame|Package sugar.shell.view.frame]] |
| |- | | |- |
| |[[Sugar Architecture/API/sugar.shell.view.frame.FriendsBox|Module: ...frame.FriendsBox]] | | |[[Sugar Architecture/API/sugar.shell.view.frame.FriendsBox|Module: ...frame.FriendsBox]] |
Line 31: |
Line 29: |
| |[[Sugar Architecture/API/sugar.shell.model.BuddyModel|Module: sugar.shell.model.BuddyModel]] | | |[[Sugar Architecture/API/sugar.shell.model.BuddyModel|Module: sugar.shell.model.BuddyModel]] |
| |} | | |} |
| + | As previously mentioned, the presence of others on the mesh defines much of the laptop experience. In order to surface this at all times in the interface, the right-hand edge of the Frame provides an easily accessible list of all the individuals a child is collaborating with in the currently active activity, represented by their colored [[Design Team/Human Interface Guidelines/The Sugar Interface/Icons#The XO|XOs]]. This has a number of benefits. First, it provides a quick reference of the people the child is working with, which updates as new people join and others leave. As new people arrive, they appear in the upper right corner, and as they leave they simply vacate their current location. Additionally, the secondary rollovers for these XO objects reveal biographical information about them: name, age, class, interests, and even a small photo. This makes the frame a great resource for meeting new friends, for what better place to meet them than in the activity shared with them? |
| | | |
− | As previously mentioned, the presence of others on the mesh defines much of the laptop experience. In order to surface this at all times in the interface, the right-hand edge of the Frame provides an easily accessible list of all the individuals a child is collaborating with in the currently active activity, represented by their colored [[Design Team/Human Interface Guidelines/The Sugar Interface/Icons#The XO|XOs]]. This has a number of benefits. First, it provides a quick reference of the people the child is working with, which updates as new people join and others leave. As new people arrive, they appear in the upper right corner, and as they leave they simply vacate their current location. Additionally, the secondary rollovers for these XO objects reveal biographical information about them: name, age, class, interests, and even a small photo. This makes the frame a great resource for meeting new friends, for what better place to meet them than in the activity shared with them?
| |
| | | |
| =====Places===== | | =====Places===== |
− | {|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" | + | {|border=1 cellpadding=1 cellspacing=0 style="float: right; margin: .5em 0 .5em 1.4em; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
| !style="background:#D6784C"|API Reference | | !style="background:#D6784C"|API Reference |
| |- | | |- |