OLPC Human Interface Guidelines/The Sugar Interface/Colors/lang-es: Difference between revisions
m (spelling) |
m (fixing DIV anchors + Translated text) |
||
(2 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
<noinclude> |
<noinclude> |
||
{{OLPC}} |
|||
{{Translated Page |
|||
{{Translation | lang = es | source = OLPC Human Interface Guidelines/The Sugar Interface/Colors | version = 18291 | source_display = OLPC-HIG-Colors}} |
|||
| page_display = OLPC-HIG-Colors |
|||
| version_http = http://wiki.laptop.org/index.php?title=OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors&oldid=18291 |
|||
| diff_http = http://wiki.laptop.org/index.php?title=OLPC_Human_Interface_Guidelines%2FThe_Sugar_Interface%2FColors&diff=current&oldid=18291 |
|||
}} |
|||
</noinclude> |
</noinclude> |
||
<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%;"> |
||
Line 13: | Line 9: | ||
| n_page=Text and Fonts}} |
| n_page=Text and Fonts}} |
||
{{anchor|Colors}} |
|||
=== Colores === |
|||
<!--=== Colores ===--> |
|||
<font size="1"><span id="anchor_name">Colors</span></font> |
|||
=== {{:OLPC Human Interface Guidelines/The Sugar Interface/Colors/lang-es/title}} === |
|||
{{anchor|Imbuing Color with Meaning}} |
|||
====Dando Significado al Color==== |
====Dando Significado al Color==== |
||
<font size="1"><span id="anchor_name">Imbuing Color with Meaning</span></font> |
|||
Sugar maneja a los colores de manera diferente que un IU típica: los colores son usados en la interfaz para representar a los ''individuos'' con quienes se esta interactuando en la malla, no las actividades u objetos que son usados. Los chicos personalizan sus laptops y su presencia en la malla seleccionando un esquema bi-color. Todas las actividades, objetos y comentarios pertenecientes a un chico tomaran sus colores—aun cuando aparecen en las laptops de otros chicos en la malla—formando un identidad visual que se agrega al nombre y atributos. |
Sugar maneja a los colores de manera diferente que un IU típica: los colores son usados en la interfaz para representar a los ''individuos'' con quienes se esta interactuando en la malla, no las actividades u objetos que son usados. Los chicos personalizan sus laptops y su presencia en la malla seleccionando un esquema bi-color. Todas las actividades, objetos y comentarios pertenecientes a un chico tomaran sus colores—aun cuando aparecen en las laptops de otros chicos en la malla—formando un identidad visual que se agrega al nombre y atributos. |
||
{{ Translated text | |
|||
<font size="1"><blockquote>Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes.</blockquote></font> |
|||
Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes. |
|||
| display = block }} |
|||
Este tratamiento del color se extiende aun dentro de las actividades. Por ejemplo, en la actividad Web una facilidad para compartir enlaces incita al chico a navegar la web en forma grupal, compartiendo páginas útiles o interesantes entre ellos. Cada objeto ''URL'' publicado para que otros lo vean aparecerá en los colores del chico que lo publicó. De modo similar, las burbujas de ''chat'' en la Cartelera tomaran sus colores. De igual modo, cualquier objeto, texto u otro elemento de la interfaz dentro de una actividad que se corresponda a un chico en particular tiene que ser mostrado con sus colores. Cuando la pantalla funcione en una escala de grises, esta identidad visual es menos evidente. Sin embargo, diferencias sustanciales en valores, según el Sistema [[Munsell]], asegura que los XOs mantengan un nivel de diferenciación visual aun ante la ausencia de color. |
Este tratamiento del color se extiende aun dentro de las actividades. Por ejemplo, en la actividad Web una facilidad para compartir enlaces incita al chico a navegar la web en forma grupal, compartiendo páginas útiles o interesantes entre ellos. Cada objeto ''URL'' publicado para que otros lo vean aparecerá en los colores del chico que lo publicó. De modo similar, las burbujas de ''chat'' en la Cartelera tomaran sus colores. De igual modo, cualquier objeto, texto u otro elemento de la interfaz dentro de una actividad que se corresponda a un chico en particular tiene que ser mostrado con sus colores. Cuando la pantalla funcione en una escala de grises, esta identidad visual es menos evidente. Sin embargo, diferencias sustanciales en valores, según el Sistema [[Munsell]], asegura que los XOs mantengan un nivel de diferenciación visual aun ante la ausencia de color. |
||
{{ Translated text | |
|||
<font size="1"><blockquote>This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.</blockquote></font> |
|||
This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color. |
|||
| display = block }} |
|||
Con el objetivo de mantener un grado de pureza en este sistema, los elementos de la interfaz, botones y otros iconos que pertenezcan únicamente a la actividad y no a cualquier chico deberán siempre que fuese posible mantenerse dentro de una escala de grises. Si bien el eliminar el color como mecanismo visual puede parecer contra-intuitivo, en realidad favorece que la forma de un icono indique claramente su funcionalidad. Dado que las laptops también funcionaran en escala de grises, formas netamente diferentes serán esenciales ante la ausencia de la información cromática, y por lo tanto limitar los iconos de las actividades desde un principio a una escala de grises asegura su compatibilidad en ambos modos. Adicionalmente, cabe resaltar que el método tradicional de "agrisar" los botones o controles inactivos directamente no funcionara en la laptop y deben ser evitados. En su lugar, hay que adherirse a los lineamientos para [[OLPC Human Interface Guidelines/The Sugar Interface/Icons/lang-es#Active vs. Inactive Icons|iconos inactivos]] |
Con el objetivo de mantener un grado de pureza en este sistema, los elementos de la interfaz, botones y otros iconos que pertenezcan únicamente a la actividad y no a cualquier chico deberán siempre que fuese posible mantenerse dentro de una escala de grises. Si bien el eliminar el color como mecanismo visual puede parecer contra-intuitivo, en realidad favorece que la forma de un icono indique claramente su funcionalidad. Dado que las laptops también funcionaran en escala de grises, formas netamente diferentes serán esenciales ante la ausencia de la información cromática, y por lo tanto limitar los iconos de las actividades desde un principio a una escala de grises asegura su compatibilidad en ambos modos. Adicionalmente, cabe resaltar que el método tradicional de "agrisar" los botones o controles inactivos directamente no funcionara en la laptop y deben ser evitados. En su lugar, hay que adherirse a los lineamientos para [[OLPC Human Interface Guidelines/The Sugar Interface/Icons/lang-es#Active vs. Inactive Icons|iconos inactivos]] |
||
{{ Translated text | |
|||
<font size="1"><blockquote>To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].</blockquote></font> |
|||
To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]]. |
|||
| display = block }} |
|||
{{anchor|Contrast in the Munsell Colorspace}} |
|||
====Contraste en el Espacio de Munsell==== |
====Contraste en el Espacio de Munsell==== |
||
<font size="1"><span id="anchor_name">Contrast in the Munsell Colorspace</span></font> |
|||
El esquema básico de colores de la laptop esta limitado por la necesidad de trabajar tanto en color (iluminación interna de la pantalla) y en escala de grises (modo reflectivo o solar); por lo tanto hemos elegido unos lineamientos que garanticen por lo menos un nivel de contraste no-cromático bajo todas circunstancias. Aun mas, la legibilidad del texto en todo momento se logra por medio de una combinación de colores cuyo contraste no-cromático es lo suficientemente amplio y su energía cromática es de un nivel bajo a moderado. Por esta razón, es que buscamos un contraste no-cromático de por lo menos dos pasos [[Munsell]]. |
El esquema básico de colores de la laptop esta limitado por la necesidad de trabajar tanto en color (iluminación interna de la pantalla) y en escala de grises (modo reflectivo o solar); por lo tanto hemos elegido unos lineamientos que garanticen por lo menos un nivel de contraste no-cromático bajo todas circunstancias. Aun mas, la legibilidad del texto en todo momento se logra por medio de una combinación de colores cuyo contraste no-cromático es lo suficientemente amplio y su energía cromática es de un nivel bajo a moderado. Por esta razón, es que buscamos un contraste no-cromático de por lo menos dos pasos [[Munsell]]. |
||
{{ Translated text | |
|||
<font size="1"><blockquote>The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.</blockquote></font> |
|||
The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps. |
|||
| display = block }} |
|||
El valor normal para el Marco es de N2.5; mientras que el del fondo es N9. Por lo tanto, para mantener un contraste suficiente, los valores para los trazos de los iconos que aparecen tanto en el Marco como el fondo deben estar en el rango N5 y N7. El relleno interior de dichos iconos debe mantener un contraste no-cromático con respecto al trazo, ej. si el color del trazo de un icono tiene un valor de N5, el relleno debe ser ≤N3 o bien ≥N7. |
El valor normal para el Marco es de N2.5; mientras que el del fondo es N9. Por lo tanto, para mantener un contraste suficiente, los valores para los trazos de los iconos que aparecen tanto en el Marco como el fondo deben estar en el rango N5 y N7. El relleno interior de dichos iconos debe mantener un contraste no-cromático con respecto al trazo, ej. si el color del trazo de un icono tiene un valor de N5, el relleno debe ser ≤N3 o bien ≥N7. |
||
{{ Translated text | |
|||
<font size="1"><blockquote>The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7.</blockquote></font> |
|||
The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7. |
|||
| display = block }} |
|||
<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td> |
<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td> |
||
<!-- TRANSLATION--> |
|||
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
||
|+Pasos Munsell |
|||
|+Pasos Munsell<font size="1"><blockquote>Munsell Value Steps</blockquote></font> |
|||
!style="background:#cccccc"|Color |
!style="background:#cccccc"|Color<BR>Relleno!!style="background:#cccccc"|Valor Trazo 5 |
||
|- |
|- |
||
|N10 |
|N10 |
||
|style="background:#FFFFFF; color:#7A7A7A"|'''pasos delta 5''' |
|style="background:#FFFFFF; color:#7A7A7A"|'''pasos delta 5''' |
||
|- |
|- |
||
|N9 |
|N9 |
||
|style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4''' |
|style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4''' |
||
|- |
|- |
||
|N8 |
|N8 |
||
|style="background:#C8C8C8; color:#7A7A7A"|'''pasos delta 3''' |
|style="background:#C8C8C8; color:#7A7A7A"|'''pasos delta 3''' |
||
|- |
|- |
||
|N7 |
|N7 |
||
|style="background:#ADADAD; color:#7A7A7A"|'''pasos delta 2''' |
|style="background:#ADADAD; color:#7A7A7A"|'''pasos delta 2''' |
||
|- |
|- |
||
|N6 |
|N6 |
||
|style="background:#939393; color:#7A7A7A"|'''pasos delta 1''' |
|style="background:#939393; color:#7A7A7A"|'''pasos delta 1''' |
||
|- |
|- |
||
|N5 |
|N5 |
||
|style="background:#7A7A7A; color:#7A7A7A"|'''pasos delta 0''' |
|style="background:#7A7A7A; color:#7A7A7A"|'''pasos delta 0''' |
||
|- |
|- |
||
|N4 |
|N4 |
||
|style="background:#616161; color:#7A7A7A"|'''pasos delta 1''' |
|style="background:#616161; color:#7A7A7A"|'''pasos delta 1''' |
||
|- |
|- |
||
|N3 |
|N3 |
||
|style="background:#494949; color:#7A7A7A"|'''pasos delta 2''' |
|style="background:#494949; color:#7A7A7A"|'''pasos delta 2''' |
||
|- |
|- |
||
|N2 |
|N2 |
||
|style="background:#343434; color:#7A7A7A"|'''pasos delta 3''' |
|style="background:#343434; color:#7A7A7A"|'''pasos delta 3''' |
||
|- |
|- |
||
|N1 |
|N1 |
||
|style="background:#222222; color:#7A7A7A"|'''pasos delta 4''' |
|style="background:#222222; color:#7A7A7A"|'''pasos delta 4''' |
||
|- |
|- |
||
|N0 |
|N0 |
||
|style="background:#000000; color:#7A7A7A"|'''pasos delta 5''' |
|style="background:#000000; color:#7A7A7A"|'''pasos delta 5''' |
||
|} |
|} |
||
<!-- ORIGINAL --> |
|||
<font size="1"> |
|||
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
|||
|+Munsell Value Steps |
|||
!style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5 |
|||
|- |
|||
|N10 |
|||
|style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps''' |
|||
|- |
|||
|N9 |
|||
|style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps''' |
|||
|- |
|||
|N8 |
|||
|style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps''' |
|||
|- |
|||
|N7 |
|||
|style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps''' |
|||
|- |
|||
|N6 |
|||
|style="background:#939393; color:#7A7A7A"|'''delta 1 value steps''' |
|||
|- |
|||
|N5 |
|||
|style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps''' |
|||
|- |
|||
|N4 |
|||
|style="background:#616161; color:#7A7A7A"|'''delta 1 value steps''' |
|||
|- |
|||
|N3 |
|||
|style="background:#494949; color:#7A7A7A"|'''delta 2 value steps''' |
|||
|- |
|||
|N2 |
|||
|style="background:#343434; color:#7A7A7A"|'''delta 3 value steps''' |
|||
|- |
|||
|N1 |
|||
|style="background:#222222; color:#7A7A7A"|'''delta 4 value steps''' |
|||
|- |
|||
|N0 |
|||
|style="background:#000000; color:#7A7A7A"|'''delta 5 value steps''' |
|||
|} |
|||
</font> |
|||
<!-- END --> |
|||
</td><td> |
</td><td> |
||
<!-- TRANSLATION --> |
|||
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
||
|+Texto Sobre Valores Normales de la Laptop |
|+Texto Sobre Valores Normales de la Laptop |
||
!style="background:#cccccc"|Valor |
!style="background:#cccccc"|Valor<BR>Tipografía!!style="background:#cccccc"|Marco (N2.5)!!style="background:#cccccc"|Fondo (N9) |
||
|- |
|- |
||
|N10||style="background:#414141; color:#FFFFFF"|'''pasos delta 7.5''' |
|N10||style="background:#414141; color:#FFFFFF"|'''pasos delta 7.5'''||style="background:#E4E4E4; color:#FFFFFF"|'''pasos delta 1''' |
||
|- |
|- |
||
|N9||style="background:#414141; color:#E4E4E4"|'''pasos delta 6.5''' |
|N9||style="background:#414141; color:#E4E4E4"|'''pasos delta 6.5'''||style="background:#E4E4E4; color:#E4E4E4"|'''pasos delta 0''' |
||
|- |
|- |
||
|N8||style="background:#414141; color:#C8C8C8"|'''pasos delta 5.5''' |
|N8||style="background:#414141; color:#C8C8C8"|'''pasos delta 5.5'''||style="background:#E4E4E4; color:#C8C8C8"|'''pasos delta 1''' |
||
|- |
|- |
||
|N7||style="background:#414141; color:#ADADAD"|'''pasos delta 4.5''' |
|N7||style="background:#414141; color:#ADADAD"|'''pasos delta 4.5'''||style="background:#E4E4E4; color:#ADADAD"|'''pasos delta 2''' |
||
|- |
|- |
||
|N6||style="background:#414141; color:#939393"|'''pasos delta 3.5''' |
|N6||style="background:#414141; color:#939393"|'''pasos delta 3.5'''||style="background:#E4E4E4; color:#939393"|'''pasos delta 3''' |
||
|- |
|- |
||
|N5||style="background:#414141; color:#7A7A7A"|'''pasos delta 2.5''' |
|N5||style="background:#414141; color:#7A7A7A"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#7A7A7A"|'''pasos delta 4''' |
||
|- |
|- |
||
|N4||style="background:#414141; color:#616161"|'''pasos delta 1.5''' |
|N4||style="background:#414141; color:#616161"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#616161"|'''pasos delta 5''' |
||
|- |
|- |
||
|N3||style="background:#414141; color:#494949"| |
|N3||style="background:#414141; color:#494949"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#494949"|'''pasos delta 6''' |
||
|- |
|- |
||
|N2||style="background:#414141; color:#343434"|'''pasos delta 0.5''' |
|N2||style="background:#414141; color:#343434"|'''pasos delta 0.5'''||style="background:#E4E4E4; color:#343434"|'''pasos delta 7''' |
||
|- |
|- |
||
|N1||style="background:#414141; color:#222222"|'''pasos delta 1.5''' |
|N1||style="background:#414141; color:#222222"|'''pasos delta 1.5'''||style="background:#E4E4E4; color:#222222"|'''pasos delta 8''' |
||
|- |
|- |
||
|N0||style="background:#414141; color:#000000"|'''pasos delta 2.5''' |
|N0||style="background:#414141; color:#000000"|'''pasos delta 2.5'''||style="background:#E4E4E4; color:#000000"|'''pasos delta 9''' |
||
|}<!-- ORIGINAL --> |
|||
<font size="1"> |
|||
{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" |
|||
|+Text Against Default Laptop Colors |
|||
!style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9) |
|||
|- |
|||
|N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step''' |
|||
|- |
|||
|N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps''' |
|||
|- |
|||
|N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step''' |
|||
|- |
|||
|N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps''' |
|||
|- |
|||
|N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps''' |
|||
|- |
|||
|N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps''' |
|||
|- |
|||
|N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps''' |
|||
|- |
|||
|N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps''' |
|||
|- |
|||
|N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps''' |
|||
|- |
|||
|N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps''' |
|||
|- |
|||
|N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps''' |
|||
|} |
|} |
||
</font> |
|||
<!-- END --> |
|||
</td> |
</td> |
||
</tr> |
</tr> |
Latest revision as of 13:10, 8 June 2007
Colores
Dando Significado al Color
Sugar maneja a los colores de manera diferente que un IU típica: los colores son usados en la interfaz para representar a los individuos con quienes se esta interactuando en la malla, no las actividades u objetos que son usados. Los chicos personalizan sus laptops y su presencia en la malla seleccionando un esquema bi-color. Todas las actividades, objetos y comentarios pertenecientes a un chico tomaran sus colores—aun cuando aparecen en las laptops de otros chicos en la malla—formando un identidad visual que se agrega al nombre y atributos.
Sugar treats color differently than the typical UI: colors are used in the interface represent the individuals who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes.
Este tratamiento del color se extiende aun dentro de las actividades. Por ejemplo, en la actividad Web una facilidad para compartir enlaces incita al chico a navegar la web en forma grupal, compartiendo páginas útiles o interesantes entre ellos. Cada objeto URL publicado para que otros lo vean aparecerá en los colores del chico que lo publicó. De modo similar, las burbujas de chat en la Cartelera tomaran sus colores. De igual modo, cualquier objeto, texto u otro elemento de la interfaz dentro de una actividad que se corresponda a un chico en particular tiene que ser mostrado con sus colores. Cuando la pantalla funcione en una escala de grises, esta identidad visual es menos evidente. Sin embargo, diferencias sustanciales en valores, según el Sistema Munsell, asegura que los XOs mantengan un nivel de diferenciación visual aun ante la ausencia de color.
This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.
Con el objetivo de mantener un grado de pureza en este sistema, los elementos de la interfaz, botones y otros iconos que pertenezcan únicamente a la actividad y no a cualquier chico deberán siempre que fuese posible mantenerse dentro de una escala de grises. Si bien el eliminar el color como mecanismo visual puede parecer contra-intuitivo, en realidad favorece que la forma de un icono indique claramente su funcionalidad. Dado que las laptops también funcionaran en escala de grises, formas netamente diferentes serán esenciales ante la ausencia de la información cromática, y por lo tanto limitar los iconos de las actividades desde un principio a una escala de grises asegura su compatibilidad en ambos modos. Adicionalmente, cabe resaltar que el método tradicional de "agrisar" los botones o controles inactivos directamente no funcionara en la laptop y deben ser evitados. En su lugar, hay que adherirse a los lineamientos para iconos inactivos
To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for inactive icons.
Contraste en el Espacio de Munsell
El esquema básico de colores de la laptop esta limitado por la necesidad de trabajar tanto en color (iluminación interna de la pantalla) y en escala de grises (modo reflectivo o solar); por lo tanto hemos elegido unos lineamientos que garanticen por lo menos un nivel de contraste no-cromático bajo todas circunstancias. Aun mas, la legibilidad del texto en todo momento se logra por medio de una combinación de colores cuyo contraste no-cromático es lo suficientemente amplio y su energía cromática es de un nivel bajo a moderado. Por esta razón, es que buscamos un contraste no-cromático de por lo menos dos pasos Munsell.
The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two Munsell value steps.
El valor normal para el Marco es de N2.5; mientras que el del fondo es N9. Por lo tanto, para mantener un contraste suficiente, los valores para los trazos de los iconos que aparecen tanto en el Marco como el fondo deben estar en el rango N5 y N7. El relleno interior de dichos iconos debe mantener un contraste no-cromático con respecto al trazo, ej. si el color del trazo de un icono tiene un valor de N5, el relleno debe ser ≤N3 o bien ≥N7.
The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7.
|
|