Estandares de Diseño

xowiki

No registered users in community xowiki
in last 10 minutes

Actualmente contamos con un nuevo diseño para el GES, el cual nos ayuda a mejorar la presentación de nuestras aplicaciones para lo cual se ha creado un Standard de diseño para aplicaciones, los estándares son los siguientes:

1. Titular de un Portlet:
Los titulos de los portlet deben de ir dentro de las etiquetas <h1></h1>,

Código html:
<h1>Este es un titular para portlet </h1>

2. Sub-Titular de un Portlet:
Los sub-titulos de los portlet debe ir dentro de las equitas <h2></h2>,

Código html:
<h2>Este es un sub-titulo para un portlet </h2>,

Imagen de Ejemplo:

3. Enlaces:
Los enlaces dentro del GES dentro de las aplicaciones que sean portlet o las que simulamos que sean
portlet deben ir de la siguiente manera:

Código html
Estos son <a href="#">varios links</a> y <a href="#">otros</a> y <a href="#">otros</a>
Tal y como se aprecia se mantiene la estructura normal.

Imagen de Como se Visualiza un Enlace:

4. Texto Simple:
Para desplegar Texto dentro del GES solo insertamos dicho texto dentro de las etiquetas <p></p>,
como se muestra de la siguiente manera:

Código html
<p>Este es un texto, soming id quod mazim placerat facer possim assum typi, non habent claritatem insitam est usus. Laoreet dolore magna aliquam erat volutpat ut wisi enim. Qui nunc nobis videntur parum clari fiant sollemnes in.</p>

Imagen de Como se Visualiza el Texto:

5. Elementos de una Lista (List Item):
Los list items ahora van incluidos dentro de un "div" llamado "listenvelope", como se muestra de la siguiente manera

Código html
<div class="listenvelope"><ul>
<li>tem de lista</li>
<li>item de lista</li>
<li>item de lista </li>
<ul>
<ul>
<li>item de segunda lista</li>
<li>item de segunda lista</li>
</ul>
</ul>
</div>
Imagen de como se Visualiza el Texto:

6. Titulos de list-builder y list-items:
Estos son los titulos que aparecen arriba de los list-builder y de los list-item,
estos van dentro de las etiquetas <h3></h3>.

Código html
<h3>Titular List Builder </h3>

Imagen de como se visualizan los titulares:

7. Botones para list builder (Acciones Normales).
Se definieron dos clases de botones, Botones Normales y Botones de Acción, en este
caso los botones normales son todas aquellas acciones que estan incluidas en el list-builder (actions).
Para lo anterior se volvio hacer la clase "button" que ya incluye openacs por una personalizada para
el nuevo diseño del GES, con esto no hay que hacer ningún cambio ya que automáticamente utiliza
el nuevo diseño del botton, estos botones son de colo amarillo palido.

Código html
<a href="#" class="button">Agregar Tarea</a>

Imagen de Como se Visualiza un Boton Normal.

8. Botones de Acción:
Son todos los botones que ejecutan una acción y que no son un actión del list-builder, también ejecutan
acciones bien especificas, estos botones son de color verde.

Código html
<a href="#" class="ALTbutton">Descargar un archivo con los contenidos de esta carpeta</a>

Imagen de como se Visualiza un Boton de Acción.

9. Nota Imformativa:
En el material de apoyo como en material de clase abajo del boton de "Descargar un archivo con los contenidos de esta carpeta"
aparece abajo una nota que dice "Nota: Esta operación puede tardar, por favor, sea paciente.", este mensaje se cambio al siguiente:

Código html:
<div class="nota">Nota: Esta operacion puede tardar, por favor, sea paciente.</div>

Imagen de como se visualiza la Nota de Espera:

10. Botones con iconos para list builder:
Para la parte de documentos, material de clase y material de apoyo se modificaron los actions del folder chunk,
para esto se agregaron dos parametros a la función que utilizamos para crear un list-builder, estos parametros son:

1. class_action: Este es utilizado para los botones de arriba como "Añadir Archivo¨.
2. bulk_class_action: Este es utilizado para los botones de abajo como: "mover" y "copiar"

Cada class_action y bulk_class_action esta definido en la hoja de estilos con su respectiva imagen, hasta el momento
estan definidos los siguientes:

1. class_action:
1. Add_file.
2. Create_a_URL.
3. New_Folder.
4. Delete_this_folder.
5. Edit_Folder.
6. Modify_permissions
7. set_permissions.
8. move_other_file.
9. live_version.

2. bulk_class_action.
1. move.
2. copy.
3. delete.
4. move_other_file

Cada uno delos anteriores esta definido en la hoja de estilos, si se desea agregar un boton nuevo con imagen se debe de crear la respectiva
clase dentro de las hojas de estilos que basicamente seria copiar cualquiera ya existente, cambiarle el nombre y la imagen, esto se debe hacer en cada una
de las 4 hojas de estilo que tenemos, se puede resivsar el archivo "folder-chunk.tcl".

Imagen de como se visualizan los botones especiales para file-storage.

11. Notificaciones:
La visualizacion para darse de alta y baja de las notificaicones fue cambiado por:

Código html:
<div class="notif">Puede <a href="#">activar un aviso</a> para Material de Apoyo.</div>

Imagen de como se visualizan las notificaciones: