Child pages
  • Sakai 2.9 y Sakai 10 guía del skin (es_ES)

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

(Por aquí va la traducción...  siéntete líbre de adelantarla un poco más si quieres... (wink))

If you are primarily a front-end developer download the demo version of 2.9 that you can download, unzip and run with a few clicks.  To get the demo version – go to the release page for Sakai 2.9 and download and unpack it. As of this writing there is no demo version yet because it has not been released - will update this when that happens.

Start the demo server, this will expand the files we are interested in so that you can work with them.

The skin files are contained in Si eres principalmente un diseñador de interfaces puedes descargar la demo de Sakai 2.9 o Sakai 10 descomprimirla y ejecutarla con unos pocos clics. Para ello puede ir a la página de la versión de Sakai que quieras y allí encontrarás el fichero para descargar.

Arranca el servidor de demo, lo que expandirá los ficheros en los que estamos interesados para que puedas trabajar con ellos.

Los skins están contenidos en<server folder>/webapps/library/skin:

Skins for defaultskin rendering enginepara el motor de renderizado defaultskin

  1. default (default skin for defaultskin rendering engineskin por defecto para el motor de renderizado defaultskin)
  2. default-horiz
  3. examp-u
  4. gen-u
  5. oae
  6. rtl
  7. some-u
  8. ux

Skins for neoskin rendering engine para el motor de renderizado neoskin 

  1. neo-default (default skin for neoskin rendering engineskin por defecto para el motor de renderizado neoskin)
  2. neo-default-horiz
  3. neo-default29 (deprecatedantiguo)
  4. neo-examp-u
  5. neo-gen-u
  6. neo-oae (for use in hybrid environments with OAE)
  7. neo-rtl
  8. neo-some-u
  9. neo-ux (deprecated)

...

  1. antiguo)

y una carpeta de imágenes así como el tool_base.css

Of the skins for the neoskin rendering engine neo-default29 and neo-ux are not supported and are included just for historical reasons. Note: The default and neo-default skins are required for some things to function correctly De los skins que aparecen en la carpeta,neo-default29yneo-uxno están soportados,  y se incluyen simplemente por razones históricas. Nota: Los skin  default y neo-default se requieren para que ciertas cosas funcionen correctamente (x-login, site info display), do not delete.Each skin has the following structurepor lo que no se deben borrar

Cada skin tiene la siguiente estructura.

 skin_name

images (folder containing images used by the carpeta que contiene las imágenes usadas por el skin)
portal.css (styles the portal – will be doing most work hereestilos del portal – la mayoría de las cosas se hacen aquí)
pda.css (for the mobile para el portal móvil)
tool.css (styles the tools, overriding or filling gaps in estilos de las herramientas, sobreescribe y rellena los huecos de tool_base.css)
access.css (no need to bother with thishay necesidad de meterse con esto) [8]
portalchat.css (no need to bother with thishay necesidad de meterse con esto) [9]

...

Seleccione un skin como punto de partida
 
  • Browse to your server at BVaya a su servidor en http://localhost:8080/portal, login as como admin (pwd: admin).
  • Create Crea 7 sitessitios.
  • Go to Vaya a "Administration workspace and in the Sites tool given them all different skins - use the list below, but omit the neo- prefix - the portal will add the correct link because you are using the neo portal.

...

  • " y en la herramienta Sites (Sitios) asígnales  un skin diferente a cada uno- usa la lista de abajo pero omite el prefijo neo- ya que el portal lo añadirá automáticamente puesto que estás usando el neo portal.

Los skins disponibles y  actualizados son (usa el texto de abajo):

  • neo-default
  • neo-default-horiz
  • neo-examp-u
  • neo-some-u
  • neo-gen-u
  • neo-rtl (if you are working in a right lo left language contextsi trabajas con idomas que se leen de derecha a izquierda)
  • neo-oae
Here are some Aquí hay algunos screenshots:

 

neo-default

neo-default-horiz

neo-examp-u


neo-gen-u (embarrasing!)


neo-oae


neo-some-u


neo-rtl


 

 

Now you can navigate to the different sites and examine the different skins. Some may be closer to your design than others. Choose the one that seems like the best candidate. Since the portal changes quite a bit depending on whether you are logged in or not you should check it out as a “not logged in” user:

  1. go again to the Admin Workspace
  2. go to Sites
  3. find the!gateway site and click on the link
  4. give it the skin you are checking out
  5. log out and examine the logged out page with this skin.       
Setting up a new skin

For simplicity’s sake, we are going to assume you have selected neo-default as the skin you are going to use as your base.

...

Ahora puedes navegar por los sitios diferentes y examinar los diferentes skins. Algunos pueden estar más cercanos a tu diseño deseado que otros. Selecciona aquel que parezca el mejor candidato. Como el portal cambia un poco dependiendo de si estás o no registrado, necesitas ver cómo queda el skin cuando no estás dentro de Sakai.:

  1. ve de nuevo a Admin Workspace
  2. ve a Sites
  3. encuentra el sitio!gatewayy haz clock en él enlace
  4. dale a ese sitio el skin que te ha gustado
  5. sal de Sakai y examina la página de entrada con este skin.       
Configurando un nuevo skin

Para simplificar supondremos que has seleccionado neo-default como el skin base de tu nuevo skin.

  1. Copia la carpetaneo-defaulty renómbrala con el nombre deseado para tu skin. Recuerda añadir el prefijo "neo-".
  2. Para el servidor
  3. Edita<your_server_location>/sakai/sakai.properties
  4. Search for word Busca la palabra “skin”
  5. Make sure that Modificaskin.default=<your<tu_newnuevo_skin _name minus the sin el prefijo "neo-" prefix>
  6. Restart the server – now all sites and any new sites will use your skin (change the!gateway site to it if you did it following instructions above)
Some useful tools
 

...

  1. Reinicia el servidor – ahora todos los sitios usarán tu skin (expectp aquellos que hayas asignado a mano, por eso, cambia el skin de!gatewayde nuevo con las instrucciones anteriores)
Algunas herramientas útiles
 
  • Firebug o similar para el navegador que vayas a utilizar: esencial [10]
  • Editor de CSS  (para colorear la sintaxis, ayuda con el formato, etc...algo como Aptana [11])
  • Validador de CSS validator [12]
  • Gradient Generadores de Gradiente [13], box shadow [14]  and y border-radius [15]  generator .

...

Lo básico (

...

sobre 1-2

...

horas en total, de verdad)

Vamos a añadir unos cuantos logos, cambiar la paleta. Los números de línea y CSS afectados de  neo-default/portal.css are included. The selector is also included so that you can search on it están incluidos. El selector también se incluye de modo que usted puede buscar en ella.

Logos

The logos in your new skin display at the top left both in the gateway and the logged in portal (below the logo on left, over a gradient for the navigation bar, and at right the current site tab):

Image Removed

Create a logo with a transparency (png recommended). Call it logo.png, put in Los logos en tu nuevo skin, se muestran en la esquina superior izquierda en el gateway y cuando estás registrado en el portal:

Image Added

Crea un logo con transparencia (recomendado png). Llámalo logo.png, ponlo enyour_skin/images.The original logo.png is 80 wide, 43 high. The bounding box is 100 x 50.  You can tweak both dimensions a little bit as needed. The CSS for this starts in line 132 of El logo original es de 80 pixels de ancho y 43 de alto. La caja de alrededor es de 100 x 50. puedes modificar eso un poco si lo necesitas. Los CSS para esto comienzan en la línea 132 de neo-default/portal.css for the para el gateway:

Code Block
languagecss
firstline132
linenumberstrue
#headerMin #mastLogo {
    display: block;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: 8px 4px;
    float: left;
    width: 100px;
    height: 50px;
}

and in line 330 for the logged in usery en la línea 330 para los usuarios registrados:

Code Block
languagecss
firstline330
linenumberstrue
#linkNav ul.topnav {
    list-style: none;
    padding: 8px 0 5px 155px; /* matches the width of the toolMenu*/
    margin: 0;
    width: 100%;
    background: transparent url(images/logo.png) 8px 4px no-repeat;
}

...

Paleta: portal

For the palette in general there are a number of places inPara la paleta de colores, hay varios lugares en neo-default/portal.css that you need to touch. A lot of them could have been grouped/refactored, but were left duplicated in the default for clarity. Below only those places that you need to change because they play nicely with the Sakai palette but may not be too complimentary with yours. You can make more changes if you want of course.Top bar is a gradient defined in lines que tendrás que tocar. Muchos de ellos podrían haberse agrupado, pero se mantuvieron duplicados en el skin por defecto por claridad. Abajo aparecen solo los lugares que tienes que cambiar porque ellos tocan la paleta de Sakai, que podría no ser complementaria con la tuya. Puedes hacer más cambios si lo deseas, desde luego.

Gradiente definido para la barra superior: líneas 98-107:

Code Block
languagecss
firstline98
linenumberstrue
#headerMax, #headerMin {
    background: #009DCE;
    background: -moz-linear-gradient(top, #009DCE 0%, #007EA5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009DCE), color-stop(100%,#007EA5));
    background: -webkit-linear-gradient(top, #009DCE 0%,#007EA5 100%);
    background: -o-linear-gradient(top, #009DCE 0%,#007EA5 100%);
    background: -ms-linear-gradient(top, #009DCE 0%,#007EA5 100%);
    background: linear-gradient(top, #009DCE 0%,#007EA5 100%);
    border-bottom: 1px solid #007194;
}

Use the gradient generator [13] to create a gradient that meets your branding needs. Paste your gradient code in the declaration above.
Important note: realize that this leaves IE 8 with a flat color. If you are ok with that, do check that the flat color (the background: #009DCE above) is appropriate and provides a good contrast. If not (you have a large installed IE 8 base), use background images. The use of IE filters is not recommended.Current site tab (the "Administrative" button in above screenshot) is defined in Usa el generador de gradientes  [13] para crear el gradiente que cuadre más con tus necesidades. Pega arriba el código de la declaración del gradiente.

Nota importante:
Esto deja IE8 en un color plano. Si estás de acuerdo con eso, puedes modificar el color plano en el "background: #009DCE" que ves arriba. Debe ser apropriado y proporcionar un buen contraste. Si no, porque quieres que en IE también se vea bien, tendrás que usar una imagen de fondo. El uso de filtros en IE no se recomienda. Es posible que las últimas versiones de IE acepten ya estos gradientes.

La pestaña del sitio actual (el botón "Administrative" en el pantallazo anterior) se define en 357-369.

Code Block
languagecss
firstline357
linenumberstrue
ul.topnav li.nav-selected {
    background: #008DB9;
    background: -moz-linear-gradient(top, #008DB9 0%, #007194 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008DB9), color-stop(100%,#007194));
    background: -webkit-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: -o-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: -ms-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: linear-gradient(top, #008DB9 0%,#007194 100%);
    border: 1px solid #005A76;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

Aside from the gradient you may want to supply a border that matches it.  The same border color can be used for the tab hover rendering beginning in line Además del gradiente, puedes necesitar añadir un borde que lo contenga. El mismo color de borde puede ser usado para el efecto "hover" (pasar el ratón por encima). Ver línea 350:

Code Block
languagecss
firstline350
linenumberstrue
 ul.topnav li.nav-menu:hover, ul.topnav li.more-tab:hover {
    border: 1px solid #005A76;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

 

Login form elements also make use of gradients in Los elementos del formulario de login también usan gradientes en 196-210:

Code Block
languagecss
firstline196
linenumberstrue
 #loginLink1, #loginLink2, form#loginForm input#submit {
    display: block;
    border-radius: 5px;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    background: #008DB9;
    background: -moz-linear-gradient(top, #008DB9 0%, #007194 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008DB9), color-stop(100%,#007194));
    background: -webkit-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: -o-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: -ms-linear-gradient(top, #008DB9 0%,#007194 100%);
    background: linear-gradient(top, #008DB9 0%,#007194 100%);
    border: 1px solid #005A76;
}

and their y sus estados :hover states in lines en las líneas 214 & c.

Code Block
languagecss
firstline214
linenumberstrue
#loginLink1:hover, #loginLink2:hover, form#loginForm input#submit:hover {
    background: #007194;
    text-decoration: none;
}

Again – replace colors as needed, with a gradient, a flat color, or background images.  This controls the login elements, no matter what login configuration you are using.

...

The tool menu is very neutral color wise. The exceptions here are the hover state and the “current tool” state

...

De nuevo, modifica los colores como necesitas, con gradientes, colores lisos o imágenes de fondo. Esto controla los elementos del login, no importa el tipo de configuración de login que uses..

Image Added

El menú de herramientas debería ser de un color muy neutral. Las excepciones son el estado "hover" y el estado “herramienta actual”

El primero es el valor del gradiente en las siguientes líneas 759-779:

Code Block
languagecss
#toolMenu li a:hover, #subSites li a:hover, #toolMenu li a:focus, #subSites li a:focus {...}

The “current tool” is just a color value for the selector in lines La herramienta actual  en la líneas 731-734

Code Block
languagecss
#toolMenu li.selectedTool a {}

 

 

Note: the tool menu can also be minimized, the “current tool” rendering is at lines 1546 & c with the selectorNota: el menú puede minimizarse, por lo que habrá que comprobar el color de la "herramienta actual" en las líneas 1546 & c

Code Block
languagecss
firstline1546
linenumberstrue
.sakaiMinimizePageNavigation #toolMenu li.selectedTool a, .sakaiMinimizePageNavigation #toolMenu li a:hover, .sakaiMinimizePageNavigation #subSites li a:hover,.sakaiMinimizePageNavigation #toolMenu li a:focus, .sakaiMinimizePageNavigation #subSites li a:focus {
    background: #9cd1e8;
    /*.....*/
}

You will also need to touch the buttons on the “more sites” tray. To see this you will need to create at least 10 sites.  Easiest way to do this is to go to one of your sites and Site info > Duplicate and then visit the “More sites” tray.you will then see something like this:

Image Removed

The site button rendering is defined in lines 565-585 of this selectorTambién se pueden tocar los botones de la bandeja de "mas sitios". Para ver esto deberás crear al menos 0 sitios. La mejor forma de hacer esto es ir a uno de tus sitios y enSite info > Duplicateduplicar el sitio varias veces hasta que aparezca la pestaña de "Mas Sitios":

Image Added

El estilo de los botones están en las líneas 565-585:

ul#otherSiteList li, ul.otherSitesCategorList li {

The hover state of the El estado hover de menú “Other sites” menu (that contains the que contienen View all Sites, Add New Site) is a Sakai blue that you can change in lines es un azul Sakai que puedes cambiar en las lineas 540-542 for this selector :

#otherSitesMenu li a:hover, #siteStatus a:hover, #siteStatus a:focus {

You will want to change the site status box and children, available in lines Querrás cambiar la caja de estado del sitio en las líneas 822-843.  For the following selectors:

#siteStatus {

#siteStatus a {

They affect color of text and color of link in the capture belowEsto afecta al color del texto y del enlace en la captura de abajo:

The El texto “Unpublished Site” text and the y el enlace “(Publish Now)” link appear on unpublished sites. To display, go to a site, thenaparecen en los sitios no publicados. Para ello, vaya al sitio, entoncesSite info > Manage Accessand change to leave as draft.

Notice the minimize control on the left, also a nice Sakai blue. The easiest thing to do would be to open it in Photoshop and grey-scale it.

Also – if you look at the above image you will see the double arrow reload icon. That and the help icon that are displayed in the tool title bar are images that live at y cambia el estado para que esté como Borrador (draft).

El control de minimizar el menú es también Azul Sakai. Lo más sencillo es abrirlo en fotoshop y hacerlo gris.

También, si miras en la imagen verás la doble flecha del icono de recargar. Este, y el icono de ayuda, aparecen en la barra del título de la herramienta y son imágenes que puedes modificar en el directorio skin_name/images (reload.gif and y help.gif, as well as their hover state analogues y sus análogas para el estado de hover reload_h.gif and y help_h.gif). Substitute with any other image Sustituyelas por cualquier otra imagen (gif or png) as long as you stay with the same dimensions if the Sakai blue does not agree. If you take a look at the neo-some-u skin you will see that they have been greyscaled.

Finally, there is the tool title. In the default skin there is a thin Sakai blue line at the bottom.

Image Removed

...

o png) mientras tenga las mismas dimensiones si no te gusta el color actual. En algunos de los otros skins están en color gris.

Finalmente, está el título de la herramienta. En el skin por defecto tienen una línea azul en el fondo.

Image Added

se puede cambiar en estas líneas    51-62:

#col1of2 .portletTitleWrap, #col2of2 .portletTitleWrap {

#col1of2 .portletMainWrap, #col2of2 .portletMainWrap {

#col1 .portletTitleWrap {

And that is it for the Y esto es todo para el portal!  

...

Paleta:

...

portal móvil

Sakai has a simple mobile portal you can see if you go totiene un portal simplificado para móviles que puedes ver en:

http://localhost:8080/portal/pda

The palette there is fairly simple.  Let’s take a look. All line and selector references are to La paleta es muy simple. Todas las líneas y selectores referencian a neo-default/pda.css

 

The only three areas of concern are:

the top bar gradient blocked in yellow at right  (lines

Las únicas tres áreas que nos importan son:

  1. La barra superior con su gradiente marcada en amarillo en la imagen (líneas 39 &c, 259 & c)

#pda-portlet-menu {

The footer (scroll down to bottom to see) looks like the header in neo-default, but you can make it different - see lines 230 &c and El pie (baja hasta el fondo para verlo) es como la cabecera pero se puede hacer diferente en las líneas 230 &c y 355 &c.

#pda-footer {

2. The regular buttons (blocked in red), lines Los botones normales (en rojo en la imagen), líneas 90 &c,

#pda-portlet-menu li.loginLink,#pda-portlet-menu li.logoutLink, #switch-link-w,.helpLink {

3. The only tricky one is the back button blocked in purple at right. What I did was screenshot a regular button, Photoshop liquefy the left edge to make it pointy, slice the resultant image in three, making them backgrounds to the<li>, the<span>and the<a>that altogether make up the button. Take a look at the CSS in lines 68-89. Pretty horrible!

Important note: the pda.css serves two types of clients, small mobile webkit, and everything else. The experience of an iPhone or an Android default browser will be quite different than the one of an iPad or a regular browser. Taking care of the three items above will do the job - but do test with

  1. any/all of the browsers Sakai tests on
  2. an iPhone, Android device, or iPhone/Android emulators
More info at

El único problema es el botón de volver atrás en púrpura en la imagen. Lo que se hizo fue hacer un screenshot de un botón normal, editrlo en photoshop haciendo uno de los lados más puntiagudo y cortar la imagen resultante en tres, haciéndolos el fondo de los<li>, el<span>y el <a> que juntos hacen el botón. Mira en el CSS en las líneas 68-89. Bastante horrible!!!

Importante: El css pda puede dar servicio a dos tipos de clientes, small mobile webkit, y cualquier otro. La experiencia en un iPhone o un Android erá muy diferente en el navegador por defecto que en un iPad o un navegador regular. Teniendo en cuenta estos tres elementos tenemos el trabajo, pero...deberías probarlo en

  1. uno/todos los navegadores que Sakai prueba
  2. un iPhone y un dispositivo Android, o emuladores iPhone/Android

...

Paleta:

...

herramientas

(La traducción va por aquí, siéntete libre de colaborar y continuarla...)

The default palette for the tools has been kept fairly neutral as well, but there are some things you may want to touch. The following references neo-default/tool.css

...