2,751
edits
Changes
Jump to navigation
Jump to search
m
Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls/lang-es (view source)
Revision as of 18:03, 4 February 2009
, 18:03, 4 February 20093 revisions
<noinclude>
{{Translation | lang = es | source = OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls | version = 35988 | source_display = OLPC-HIG-Custom Controls}}
{{hig-subnav-lang | lang = es
| p_link=The Sugar Interface/Controls/Grouping Controls | p_label=Grouping Controls
| c_link=The Sugar Interface/Controls/Custom Controls | c_label=Custom Controls
| n_link=The Sugar Interface/Controls | n_label=Controls}}</noinclude>
{{anchor|When to Use Custom Controls}}
=====Cuando Usar Controles Personalizados=====
Hemos creado un conjunto de controles capaces de satisfacer la mayor parte de las necesidades básicas del desarrollo de una Actividad. Al usar estos controles siempre que sea posible se garantiza así que la interfaz de todas las Actividades permence constante y clara, al mismo tiempo que mantiene el estilo visual de Sugar. Sin embargo, su funcionalidad básica puede resultar en una limitación en algunos casos, y definitivamente deseamos estimular usos nuevos y exitantes de la funcionalidad de la laptop, incluyendo su característica colaborativa, y no deseamos impedir la creatividad y diseño. Para ello es que estamos proveyendo una serie de lineamientos generales para la creación de controles personalizados capaces de combinar con el estilo de Sugar y mantener cierto estándar básico de compatibilidad y usabilidad dentro de la interfaz de Sugar.
{{ Translated text |
We have created a set of controls to suit most basic needs for Activity development. Using these controls wherever possible ensures that interfaces across Activities remain consistent and clear, and also maintains the visual style of the Sugar interface. Nonetheless, their basic functionality may prove limiting in some cases, and we certainly hope to inspire new and exciting uses of the various capabilities of the laptops, including their collaborative nature, and don't want to stifle additional ideation and design. For this reason, we are providing a general set of guidelines for the creation of custom controls that match the visual style of Sugar and maintain some basic standards for compatibility and usability within the Sugar interface.
| display = block }}
Antes de hacer un control personalizado, asegurese que dicha necesidad realmente existe. En algunos casos, es posible que una combinación de controles más sencillos alcance. En otros casos, una funcionalidad más compleja puede ser lograda por medio del uso de la Paleta. Adicionalmente, asegurese que la necesidad sea funcional; los controles Personalizados deben tener nueva funcionalidad o un comportamiento diferente de los controles ya disponibles, y no simplemente definir una nueva estética. Nuevamente, medite cuidadosamente sobre los requerimientos del control, y asegurese que la funcionalidad amerita el trabajo asociado con la creacion de un nuevo control.
{{ Translated text |
Before implementing a custom control, be sure that the need truly exists. In some cases, you may find that a combination of simpler controls may suffice. In other cases, more complex functionality can be accommodated though use of a Palette. Additionally, be sure that the need is a functional one; Custom controls should have additional or different behavior that the current controls don't provide, and not simply define a different aesthetic for existing ones. Again, think carefully about the requirements for the control, and be sure that the functional need itself merits the work associated with creating the new control.
| display = block }}
{{anchor|Control Color Palette}}
=====Paleta de Control de Color=====
La interfaz de Sugar define una paleta estricta para los ''widgets'' de control, así como los lineamientos en su uso para los diferentes estados y tipos de controles. Los controles personalizados deben adherirse al mismo conjunto de colores y sus reglas asociadas para asegurarse que su comportamiento simule al núcleo de los controles de Sugar, y puedan ser deducidos por quienes están familiarizados con ellos. Si bien los nombres y usos primarios definen estos colores, cualquier color incluido en la paleta abajo puede ser usado en varias partes de sus controles donde no interfiera con las reglas básicas asociadas a ellos.
{{ Translated text |
The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them.
| display = block }}
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|- style="background:#cccccc;"
! Nombre !! Usos Primarios !! Hex!! % Gris
|-
| Black || Paletas, ''Popups'' || <tt>#000000</tt> || 100%
|-
| Toolbar Grey || Barras de herramientas, Bandejas, Agrupamientos de Paletas || <tt>#404040</tt> || 75%
|-
| Button Grey || Estado de los Botones ''Default'' || <tt>#808080</tt> || 50%
|-
| Selection Grey || Selecciones, Agrupamientos de Panel || <tt>#A6A6A6</tt> || 35%
|-
| Panel Grey || Paneles, Escritorio || <tt>#C0C0C0</tt> || 25%
|-
| Text Field Grey || Fondo para Campos de Texto || <tt>#E5E5E5</tt> || 10%
|-
| White || Estados presionados, áreas de texto multi-líneas || <tt>#FFFFFF</tt> || 0%
|}
{{ Translated text |
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray
|-
|Black||Palettes, Popups||#000000||100%
|-
|Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75%
|-
|Button Grey||Default Button States||#808080||50%
|-
|Selection Grey||Selections, Panel Groupings||#A6A6A6||35%
|-
|Panel Grey||Panels, Desktop||#C0C0C0||25%
|-
|Text Field Grey||Text entry background||#E5E5E5||10%
|-
|White||Pressed states, multiline text areas||#FFFFFF||0%
|}
| display = block }}
{{anchor|Control Sizing}}
=====Tamañado de Controles=====
<font size="-1"><blockquote></blockquote></font>
<noinclude>
{{hig-subnav-lang | lang = es
| p_link=The Sugar Interface/Controls/Grouping Controls | p_label=Grouping Controls
| c_link=The Sugar Interface/Controls/Custom Controls | c_label=Custom Controls
| n_link=The Sugar Interface/Controls | n_label=Controls}}</noinclude>
{{Translation | lang = es | source = OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls | version = 35988 | source_display = OLPC-HIG-Custom Controls}}
{{hig-subnav-lang | lang = es
| p_link=The Sugar Interface/Controls/Grouping Controls | p_label=Grouping Controls
| c_link=The Sugar Interface/Controls/Custom Controls | c_label=Custom Controls
| n_link=The Sugar Interface/Controls | n_label=Controls}}</noinclude>
{{anchor|When to Use Custom Controls}}
=====Cuando Usar Controles Personalizados=====
Hemos creado un conjunto de controles capaces de satisfacer la mayor parte de las necesidades básicas del desarrollo de una Actividad. Al usar estos controles siempre que sea posible se garantiza así que la interfaz de todas las Actividades permence constante y clara, al mismo tiempo que mantiene el estilo visual de Sugar. Sin embargo, su funcionalidad básica puede resultar en una limitación en algunos casos, y definitivamente deseamos estimular usos nuevos y exitantes de la funcionalidad de la laptop, incluyendo su característica colaborativa, y no deseamos impedir la creatividad y diseño. Para ello es que estamos proveyendo una serie de lineamientos generales para la creación de controles personalizados capaces de combinar con el estilo de Sugar y mantener cierto estándar básico de compatibilidad y usabilidad dentro de la interfaz de Sugar.
{{ Translated text |
We have created a set of controls to suit most basic needs for Activity development. Using these controls wherever possible ensures that interfaces across Activities remain consistent and clear, and also maintains the visual style of the Sugar interface. Nonetheless, their basic functionality may prove limiting in some cases, and we certainly hope to inspire new and exciting uses of the various capabilities of the laptops, including their collaborative nature, and don't want to stifle additional ideation and design. For this reason, we are providing a general set of guidelines for the creation of custom controls that match the visual style of Sugar and maintain some basic standards for compatibility and usability within the Sugar interface.
| display = block }}
Antes de hacer un control personalizado, asegurese que dicha necesidad realmente existe. En algunos casos, es posible que una combinación de controles más sencillos alcance. En otros casos, una funcionalidad más compleja puede ser lograda por medio del uso de la Paleta. Adicionalmente, asegurese que la necesidad sea funcional; los controles Personalizados deben tener nueva funcionalidad o un comportamiento diferente de los controles ya disponibles, y no simplemente definir una nueva estética. Nuevamente, medite cuidadosamente sobre los requerimientos del control, y asegurese que la funcionalidad amerita el trabajo asociado con la creacion de un nuevo control.
{{ Translated text |
Before implementing a custom control, be sure that the need truly exists. In some cases, you may find that a combination of simpler controls may suffice. In other cases, more complex functionality can be accommodated though use of a Palette. Additionally, be sure that the need is a functional one; Custom controls should have additional or different behavior that the current controls don't provide, and not simply define a different aesthetic for existing ones. Again, think carefully about the requirements for the control, and be sure that the functional need itself merits the work associated with creating the new control.
| display = block }}
{{anchor|Control Color Palette}}
=====Paleta de Control de Color=====
La interfaz de Sugar define una paleta estricta para los ''widgets'' de control, así como los lineamientos en su uso para los diferentes estados y tipos de controles. Los controles personalizados deben adherirse al mismo conjunto de colores y sus reglas asociadas para asegurarse que su comportamiento simule al núcleo de los controles de Sugar, y puedan ser deducidos por quienes están familiarizados con ellos. Si bien los nombres y usos primarios definen estos colores, cualquier color incluido en la paleta abajo puede ser usado en varias partes de sus controles donde no interfiera con las reglas básicas asociadas a ellos.
{{ Translated text |
The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them.
| display = block }}
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|- style="background:#cccccc;"
! Nombre !! Usos Primarios !! Hex!! % Gris
|-
| Black || Paletas, ''Popups'' || <tt>#000000</tt> || 100%
|-
| Toolbar Grey || Barras de herramientas, Bandejas, Agrupamientos de Paletas || <tt>#404040</tt> || 75%
|-
| Button Grey || Estado de los Botones ''Default'' || <tt>#808080</tt> || 50%
|-
| Selection Grey || Selecciones, Agrupamientos de Panel || <tt>#A6A6A6</tt> || 35%
|-
| Panel Grey || Paneles, Escritorio || <tt>#C0C0C0</tt> || 25%
|-
| Text Field Grey || Fondo para Campos de Texto || <tt>#E5E5E5</tt> || 10%
|-
| White || Estados presionados, áreas de texto multi-líneas || <tt>#FFFFFF</tt> || 0%
|}
{{ Translated text |
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray
|-
|Black||Palettes, Popups||#000000||100%
|-
|Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75%
|-
|Button Grey||Default Button States||#808080||50%
|-
|Selection Grey||Selections, Panel Groupings||#A6A6A6||35%
|-
|Panel Grey||Panels, Desktop||#C0C0C0||25%
|-
|Text Field Grey||Text entry background||#E5E5E5||10%
|-
|White||Pressed states, multiline text areas||#FFFFFF||0%
|}
| display = block }}
{{anchor|Control Sizing}}
=====Tamañado de Controles=====
<font size="-1"><blockquote></blockquote></font>
<noinclude>
{{hig-subnav-lang | lang = es
| p_link=The Sugar Interface/Controls/Grouping Controls | p_label=Grouping Controls
| c_link=The Sugar Interface/Controls/Custom Controls | c_label=Custom Controls
| n_link=The Sugar Interface/Controls | n_label=Controls}}</noinclude>