Las características destacadas de nuestro nuevo panel de control son:

Arquitectura cliente-servidor
Esto quiere decir que en breve vamos a abrir el API (con su documentación correspondiente) para que cualquier cuenta (ya sea un sitio o un reseller) pueda interactuar con las configuraciones de su sitio.

Hecho de plástico
En realidad, está hecho en Perl. Y nos da una flexibilidad ENORME para modificar las funciones que ya tiene y agregarles nuevas.

Javascript y AJAX por todos lados
El AJAX está de moda, ok. Pero nosotros lo usamos con una buena razón: mejorar enormemente la experiencia de uso. La velocidad de carga de las listas, las búsquedas, las pantallas de agregar o modificar… todo funciona mucho más rápido (a menos que el servidor esté con carga, je :-) )

Diseño 100% CSS
Cada reseller elegirá su CSS favorito (o subirá el suyo propio) para si mismo y las sub-cuentas que tenga hosteadas.

De todas estas maravillas, hoy les voy a explicar los primeros pasos para rediseñar totalmente el skin de su panel de control modificando la hoja de estilos (css) y algunas imágenes.

Podría decir que el diseño del nuevo panel está dividido en:

  • Código HTML (no se puede cambiar, lo genera el panel de control)
  • Iconos .gif de 16×16 (por el momento, tampoco se pueden cambiar, y están hosteados en el panel de control)
  • Hoja de estilos (cada reseller puede elegir una URL para cargar su propia hoja de estilos css)
  • Imágenes personalizadas: desde el logo hasta el fondo de página (hosteadas en su propio dominio y referenciadas desde la hoja de estilo)

.

Ejemplo

Este es el código fuente del encabezado.

[source:html]

<div class=”encabezado”>
<div class=”encabezadoMarca”><span>ejemplo</span></div>
<div class=”encabezadoLinks”>
<strong>ejemplo.com</strong> |
<a href=”index.php?_accion=logout”>Salir</a>
</div>
</div>

[/source]

Ese código, sin hoja de estilo, se vería así (puajjj)

Encabezado sin CSS

Y por arte de magia, con el CSS nos da como resultado algo así:

Encabezado del panel

Ahora la parte divertida, el código CSS que hizo posible la milagrosa transformación:

[source:css]

.encabezado {
height: 80px;
background: #3E4D59 url(“http://host/img/fondo.gif”) repeat-x top left;
}

.encabezadoLinks {
position: absolute;
top: 0px;
right: 0px;
font-size: 10pt;
text-align: right;
padding: 20px 20px 0 0;
color: #aaa;
}

.encabezadoLinks strong {
color: #fff;
}

.encabezadoLinks a {
font-weight: normal;
color: #CCE70B;
text-decoration: none;
}

.encabezadoLinks a:hover {
text-decoration: underline;
}

.encabezadoMarca {
position: absolute;
top: 0px;
left: 0px;
width: 232px;
height: 80px;
color: #ffffff;
background: #3E4D59 url(“http://host/img/isologo.gif”) no-repeat top left;
}

.encabezadoMarca span {
display: none;
}

[/source]

.

Por dónde empezar

Hicimos un archivo ZIP con todos los archivos necesarios para empezar a diseñar:

  • index.html: un gran HTML con (casi) todas las secciones del panel de control, una abajo de la otra. Este es el archivo en donde se van a ver claramente los cambios en el CSS.
  • login.html: igual que el anterior, pero del login.
  • img/: carpeta con imágenes
  • template.css: archivo CSS con todo el diseño

Los pasos serían:

  1. Bajás el ZIP con el template
  2. Abrís template.css en tu editor favorito
  3. Modificás las imágenes en img/ a tu antojo
  4. Contemplá los cambios dándole F5 en el browser (apuntado a index.html y login.html)

Si no sabés nada de CSS, no importa: cambiando las imágenes (respetando los tamaños) y los colores de la hoja de estilo vas a poder personalizarlo lo suficiente para que tenga tu propio look-and-feel.

.

Aclaraciones

El código HTML generado por el panel fue hecho con la intención de contemplar la mayor cantidad de posibilidades distintas de diseño, pero no es perfecto. Puede ser que en ciertas partes sientan que falten algunos tags, en otras sobren… Los invito a dejar comentarios con las sugerencias y correcciones que deseen hacer :-D

Para ver el código fuente generado del panel, les recomiendo que usen las distintas developer toolbars:

Aprovecho para contarle a todos que hace dos semanas y media lanzamos un concurso interno de diseño de skins entre todos los integrantes de ELSERVER. Se formaron 2 equipos de 3 integrantes cada uno, y como resultado conseguimos 2 nuevos skins (que seguramente ofrezcamos como opción al predeterminado cuando lancemos).

En los próximos días subiremos los archivos ZIP de cada uno (junto con sus respectivos créditos ;-) ).

.

Espero que esta pequeña guía los haya motivado a empezar a diseñar su propio skin, y que nos comenten cualquir inquietud, sugerencia o error que encuentren.

Feliz diseño!