Sugar Labs

Changes

Human Interface Guidelines/The Sugar Interface/Toolbars/lang-es (view source)

Revision as of 00:20, 19 January 2009

13,960 bytes added ,  00:20, 19 January 2009
m
Reverted edits by 82.69.238.249 (Talk) to last version by Xavi
Line 31: Line 31:     
{{anchor|Standard Toolbars}}
 
{{anchor|Standard Toolbars}}
 +
====Barra de Herramientas Estándar====
    +
Como se mencionó anteriormente, cada actividad tendrá por lo menos una barra de herramienta en su caja de herramientas: La Barra de Herramientas de la Actividad. Esta barra de herramientas proveerá la funcionalidad central a la actividad y se incluirá automáticamente en la Caja de Herramientas. Si bien Sugar no requiere de otras barras de herramientas, si provee una serie común así como nombres y controles sugeridos a efectos de homogeneización entre actividades. Estas son sugerencias, no reglas, y como desarrollador uno es libre de ignorar las sugerencias ante situaciones en que no se apliquen o ameriten. Note que las flechas indican la posición relativa de las pestañas, y en aquellas con flechas dobles se pueden intercalar con elementos personalizados siempre y cuando su orden relativo se conserve. En los ejemplos siguientes de los controles en cada barra de herramienta, las flechas deben ser tomadas como el indicador alineación dentro de la barra de herramientas, las flechas dobles indican regiones o zonas de control que se expanden con el fin de ocupar el espacio sobrante.
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #666; width: 800px; height: 30px;"
 +
!style="width: 100px;"|<&nbsp;Actividad
 +
!style="width: 100px;"|<&nbsp;Editar
 +
!style="width: 100px;"|<&nbsp;Texto&nbsp;>
 +
!style=" width: 100px;"|<&nbsp;Imagen >
 +
!| [ Barra de Herramientas Personalizada ]
 +
!style="align='right'; width: 100px;"| Formato&nbsp;>
 +
!style="align='right'; width: 100px;"| Ver&nbsp;>
 +
|}
    +
{{ Translated text |
 +
As mentioned above, every activity will have at least one toolbar within the toolbox:  The Activity Toolbar.  This toolbar will provide core activity functionality and will automatically be included in the Toolbox.  Though sugar requires no other toolbars, it does provide a short list of potentially common ones along with suggested names and controls for consistency across Activities.  These are suggestions, not rules, and as a developer you should feel free to ignore the suggestions when you find a compelling case to do so.  The following table suggests a standard ordering for some common toolbars.  Note that the arrows indicate the relative position of the tabs, where those with double arrows can be interspersed with custom elements as long as their relative order remains.  In the examples which follow for controls within each toolbar, the arrows should be taken to indicate alignment within the toolbar, double arrows indicate control regions which expand to fill the remaining space.
 +
| display = block }}
 +
 +
<div style="font-size=80%; float:right; margin-right:10%; ">
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #666; width: 800px; height: 30px;"
 +
!style="width: 100px;"|< Activity
 +
!style="width: 100px;"|< Edit
 +
!style="width: 100px;"|< Text >
 +
!style=" width: 100px;"|< Image >
 +
!| [ Custom Toolbars ]
 +
!style="align='right'; width: 100px;"| Format >
 +
!style="align='right'; width: 100px;"| View >
 +
|}
 +
</div>
 +
<br clear="all">
 +
 +
{{anchor|Activity Toolbar}}
 +
=====Barra de Herramientas de Actividad=====
 +
 +
Siempre la primera de las pestañas, la barra de herramientas de la Actividad permanecerá constante en todas las actividades, brindando un lugar para nombrar y marcar la instancia, determinar las preferencias, compartirla en la malla, o parar (cerrar) la actividad, entre otras. Esta barra de herramientas siempre tendrá el foco cuando se cree una nueva instancia de una actividad, instando al chico a darle un nombre y marcarla apropiadamente. Una API le permitirá a los desarrolladores asociar varias paletas con algunos de los botones que residen en la barra de herramientas de la Actividad, tal como las preferencias.
 +
{{ Translated text |
 +
Always the first of the tabs, the Activity toolbar will remain consistent in every activity, providing a place to name and tag the instance, set preferences, share within the mesh, or stop (close) the activity, among others.  This toolbar will always have focus when a new activity instance is created, encouraging the children to provide a name and any related tags.  An API will allow developers to associate various palettes with some of the buttons which reside in the Activity toolbar, such as preferences.
 +
| display = block }}
 +
 +
{{anchor|Edit Toolbar}}
 +
=====Barra de Herramientas de Edición=====
 +
 +
Si bien no es automáticamente incluída en la Caja de Herramienas, anticipamos que casi todas las actividades tendrán una Barra de Herramientas de Edición, ya que casi todas las actividades deberían permitir el copiar y probablemente pegar también. De modo similar, instamos a todas las actividades para que soporten la funcionalidad de Deshacer/Rehacer, que también debería encontrarse en la Barra de Herramientas de Edición. Finalmente, la barra de herramientas de edición provee también una interfaz común para realizar operaciones de búsqueda en cualquier texto de la actividad. Por supuesto, las actividades solo deben incluir aquellas funciones que le pertenecen, así como herramientas de edición adicionales que se pueden agregar de ser necesario.
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|<&nbsp;Deshacer
 +
!style="width: 60px;"|<&nbsp;Rehacer
 +
!style="width: 60px;"|<&nbsp;Copiar
 +
!style=" width: 60px;"|<&nbsp;Pegar
 +
!| [ Controles Personalizados ]
 +
!style="align='right'; width: 240px;"|Find&nbsp;>
 +
|}
 +
{{ Translated text |
 +
Though not automatically included within the Toolbox, we anticipate nearly every activity will have an Edit Toolbar, since nearly every activity should at least allow copying if not pasting as well.  Likewise, we are strongly encouraging every activity to support complete Undo/Redo functionality, which should also reside within the Edit Toolbar.  Finally, the edit toolbar will also provide a common interface for performing find operations on any text within the activity.  Of course, activities should only include those functions which pertain to them, and additional editing tools may be added to the toolbar as necessary.
 +
| display = block }}
 +
 +
<div style="font-size=80%; float:right; margin-right:10%; ">
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|< Undo
 +
!style="width: 60px;"|< Redo
 +
!style="width: 60px;"|< Copy
 +
!style=" width: 60px;"|< Paste
 +
!| [ Custom Controls ]
 +
!style="align='right'; width: 240px;"|Find >
 +
|}
 +
</div>
 +
<br clear="all">
 +
 +
; Deshacer / Rehacer : Las operaciones de deshacer/rehacer son extremadametne importante en las laptops, ya que su presencia permite la exploración creativa sin temor a realizar cambios irreparables. Deben funcionar de un modo acorde con la actividad, y si bien esa manera debe reflejar nuestras expectativas actuales, la naturaleza colaborativa de la mayoría de las actividades complican el problema en cierta medida. Una aproximación amplia para manejar el deshacer colaborativo requiere de la noción de colisiones entre eventos de edición. Las [http://www.abisource.com/twiki/bin/view/Abiword/AbiCollab herramientas AbiCollab] que hacen posible la actividad de Escribir (''Write'') definen esta idea en detalle en lo relativo a la edición de texto. El concepto general se aplica: Por ejemplo, una colisión en una actividad de dibujar puede resultar en la colisión en los rectángulos contenedores de las formas dibujadas. Las marquesinas secundarias con los botones "deshacer" y "rehacer" también contiene la funcionalidad de "deshacer todo" (de hecho revertir) y el "rehacer todo". De ser soportados, estos controles deben ser los primeros a la izquierda en la barra de herramientas.
 +
; Copiar / Pegar : Sugar tiene un portapapeles completo dentro del Marco, y por ende queremos incitar al chico a copiar y pegar texto, imágenes, o cualquier cosa libremente, tanto dentro como fuera de la actividad. El copiar/pegar, reusar, reorganizar, modificar y compartir es central a la experiencia educativa y creativa para la cual la laptop ha sido diseñada. Hemos simplificado el paradigma, eliminando el comando de "cortar" del nivel superior de los comandos de edición. La distinción entre "cortar" y "copiar" puede resultar confusa para aquellos que no estén familiarizados con la computación, y por ello hemos decidido incluir la funcionalidad de "cortar" en la marquesina secundaria por debajo del botón de "copiar", llamandolo "copiar y borrar". De estar presentes, estos controles deberán estar alineados a la izquierda, inmediatamente después de los comandos de deshacer/rehacer.
 +
; Buscar / Remplazar : Donde sea.
 +
{{ Translated text |
 +
'''Undo/Redo:''' The undo/redo commands have extremely high importance on the laptops, since their presence encourages creative exploration without the fear of unrecoverable changes.  They should function in a manner chosen by the activity, and although that manner should reflect our current expectations, the collaborate nature of most activities complicates the matter to some extent.  A broad approach to managing collaborative undos requires a general notion of collisions between editing events.  The [http://www.abisource.com/twiki/bin/view/Abiword/AbiCollab AbiCollab tools] which make the Write activity possible define this idea in detail in relation to text-based editing.  The overall concept applies generally:  For instance, a collision in a drawing activity could mean the collision of the bounding boxes of two drawn shapes.  The secondary rollovers for the "undo" and "redo" buttons contain "undo all" (essentially revert) and "redo all" functionality.  When supported, these controls should be the left-most item in the toolbar.
 +
 +
'''Copy/Paste:''' Sugar has a fully featured clipboard within the Frame, and as such we want encourage children to copy and paste text, images, or anything else both within and between activities freely .  The copy/paste, reuse, reorganize, modify, and share approach is core to the educational and creative experience that the laptops are designed for.  We've simplified the paradigm, eliminating "cut" command from the top level editing commands.  The distinction between "cut" an "copy" can seem unclear to those unfamiliar with computing, and so we've chosen to embed "cut" functionality in the secondary rollover beneath the "copy" button, and called it "copy and erase."  When present, these controls should be left-aligned, immediately following the undo/redo commands.
 +
 +
'''Find/Replace''' Wherever
 +
| display = block }}
 +
 +
{{anchor|Text Toolbar}}
 +
=====Barra de Herramientas de Texto=====
 +
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|<&nbsp;Negrita
 +
!style="width: 60px;"|<&nbsp;Itálica
 +
!style="width: 60px;"|<&nbsp;Subrayado
 +
!style="width: 120px;"|<&nbsp;Selector&nbsp;de&nbsp;Color
 +
!style="width: 120px;"| Tamaño&nbsp;Letra&nbsp;>
 +
!style="width: 240px;"| Tipografía&nbsp;>
 +
!style="width: 60px;"| Alineación&nbsp;>
 +
|}
 +
 +
<div style="font-size=80%; float:right; margin-right:10%; ">
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|< Bold
 +
!style="width: 60px;"|< Italic
 +
!style="width: 60px;"|< Underline
 +
!style="width: 120px;"|< Color Selector
 +
!style="width: 120px;"| Font Size >
 +
!style="width: 240px;"| Font >
 +
!style="width: 60px;"| Alignment >
 +
|}
 +
</div>
 +
<br clear="all">
 +
 +
{{anchor|Image Toolbar}}
 +
=====Barra de Herramientas de Imagen=====
 +
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|<&nbsp;Insertar&nbsp;Imagen
 +
!style="width: 60px;"|<&nbsp;Rotar&nbsp;Izquierda
 +
!style="width: 60px;"|<&nbsp;Rotar&nbsp;Derecha
 +
!style="width: 120px;"|<&nbsp;Ancho
 +
!style="width: 120px;"|<&nbsp;Alto
 +
!| [Controles Personalizados de Imagen]
 +
|}
 +
 +
<div style="font-size=80%; float:right; margin-right:10%; ">
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|< Insert Image
 +
!style="width: 60px;"|< Rotate Left
 +
!style="width: 60px;"|< Rotate Right
 +
!style="width: 120px;"|< Width
 +
!style="width: 120px;"|< Height
 +
!| [Custom Image Controls]
 +
|}
 +
</div>
 +
<br clear="all">
 +
 +
{{anchor|View Toolbar}}
 +
=====Barra de Herramientas de Ver=====
 +
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|<&nbsp;Zoom&nbsp;Más
 +
!style="width: 60px;"|<&nbsp;Zoom&nbsp;Menos
 +
!style="width: 60px;"|<&nbsp;Mostrar&nbsp;Grilla
 +
!style=" width: 60px;"|<&nbsp;Mostrar&nbsp;Reglas
 +
!| [ Controles Personalizados de Vista ]
 +
!style=" width: 60px;"| Ocultar Barra de Herramientas&nbsp;>
 +
|}
 +
 +
<div style="font-size=80%; float:right; margin-right:10%; ">
 +
{|border=1 cellpadding=3 cellspacing=0 style="font: 9px 'Helvetica'; color: #FFF; border: 2px #fff solid; border-collapse: collapse; background: #404040; width: 800px; height: 60px;"
 +
!style="width: 60px;"|< Zoom In
 +
!style="width: 60px;"|< Zoom Out
 +
!style="width: 60px;"|< Show Grid
 +
!style=" width: 60px;"|< Show Rulers
 +
!| [ Custom View Controls ]
 +
!style=" width: 60px;"| Hide Toolbox >
 +
|}
 +
</div>
 +
<br clear="all">
 +
 +
{{anchor|Custom Toolbars}}
 
====Barras de Herramientas Personalizadas====
 
====Barras de Herramientas Personalizadas====
  
Retrieved from "https://wiki.sugarlabs.org/go/Special:MobileDiff/17219"