Cómo diseñar un skin para el panel de control

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!

Compartí este artículo

Adelantos del panel para Resellers

Antes de ayer realizamos el lanzamiento del nuevo panel de control para sitios web notificando solamente a nuestros revendedores. La razón por la cual ellos fueron los únicos afortunados en participar de la beta es que tienen la necesidad de familiarizarse con la nueva intefaz antes que sus propios clientes.

Muchos, en el feedback que nos enviaron, nos preguntaron qué pasaría con el panel para resellers, es decir, con el panel que usan para realizar la administración general de sus dominios.

Lamentablemente para algunos, esta es la respuesta:

No hay más panel para resellers.
Discontinuamos su producción.
The End.

Mentira ;-)

El panel todavía está en desarrollo, pero esto es lo que tenemos entre manos:

  • Menú desplegable para saltar rápidamente a cualquiera de las cuentas.
  • Administrar planes.
  • Modificación masiva de configuraciones.
  • Configurar correos (plaintext o EML) a enviar al cliente frente a determinadas situaciones: alta, baja, falta de espacio, etc.
  • Skins 100% CSS (prueben desactivar el estilo de la página :-D)
  • Integración de todas las funciones vía API XML-RPC. Para que se den una idea, EL panel de control es simplemente nuestra implementación de PHP.

Los invito a que nos dejen comentarios con las funciones que les gustaría encontrar. En los próximos días estaremos publicando un ZIP con el diseño en CSS para que puedan empezar a armar sus propios skins :-)

[poll=1]

Compartí este artículo

C4 Beta: correcciones y sugerencias

Gracias a todos los que ingresaron hoy al C4. Ya hemos puesto manos a la obra con los reportes y sugerencias que nos enviaron, asi que aquí va una actualización sobre qué hay de nuevo.

Correcciones

  • La leyenda de “Cargando…” respeta la posición de la ventana y se mantiene siempre visible.
  • Todas las ventanas de edición aparecen centradas a la ventana, y no siempre en la parte superior.
  • El sombreado de fondo cubre también el espacio de las barras de desplazamiento. No lo hacía y quedaba feo.

Sugerencias

Recibimos varias sugerencias de todos los que probaron el servicio el día de hoy. Vamos a intentar implementar la mayoría de las propuestas posibles antes del lanzamiento oficial del 6 de Marzo. A no desesperar que el desarrollo igual continúa.

Entre las más interesantes están:

  • Alta de múltiples Cuentas de Correo en simultáneo (ideal para migración desde otros proveedores)
  • Información más detallada sobre los recursos utilizados por la Cuentas de Correo en los listados de Excel
  • Una versión más fácil de imprimir de los cupones de pago
  • Posibilidad de informar pagos online
  • Avisos de vencimiento de registración de dominios
  • “Rapid-Reset” de claves para cuentas de correo. Un click, y clave nueva!

Los invitamos a seguir participando en el desarrollo, no se pierdan las próximas actualizaciones!

Mientras tanto aquí les dejo unas capturas para su entretenimiento.

Reportes de Espacio Editando permisos de acceso a usuarios de MySQL Widgets en la Página Principal - Elegí los tuyos!

Compartí este artículo

Historia de un Panel

Son casi las 5 de la mañana y me estoy mintiendo a mi mismo por cuarta vez en dos horas, tratando de convencerme de que en unos minutos me voy a ir a mi casa a dormir.

Estamos cansados, con sueño y medio atontados. Pero contentos.

Beta. Así Empieza.
En unas horas lanzamos la Beta de nuestro nuevo Panel de Control. Tiene cientos de horas de trabajo y cientos de miles de líneas de código. Todavía queda mucho trabajo por hacer, pero lo que falta es lo mejor, porque lo vamos a hacer entre todos nuestros clientes.

Estamos invitando a todos nuestros Revendedores a participar del período Beta, y estamos confiados en los aportes y sugerencias que vamos a recibir. Si sólo con las ideas que nos han dado cuando no pedimos nada ya tenemos mucho!
En realidad a través de este medio, invitamos a todos quienes quieran participar.

Historia de un Panel

La cuarta y nueva versión desde aquel pequeñito sistema de gestión de correos basado en oMail (era muy avanzado para la época, cerca del 2000, pero realmente -feo- si lo miran ahora) es un total y completo ReMake del actual como le decimos.. C3. Adivinaron.. hubo un C2! (pero no duró demasiado)

Esta versión, que todos conocen, supo ser de avanzada. Hoy, para ser sinceros, no tiene una interfaz de las más lindas, y a veces no estaría mal que tenga un poco más de funcionalidad. Gestiona sin embargo y aunque no se vea, todos los recursos necesarios para que el conjunto de clusters, aceleradores, fileservers y demás equipos que componen nuestra red funcionen.

Así fue que con el C3 en mente empezamos a desarrollar algo nuevo. Diseñamos un sistema que pudiera funcionar en el tipo de que creíamos que eran la tendencia para los próximos años, con las siguientes premisas:

  • Seguridad: Cada vez estamos más conectados y expuestos. Nunca se puede ser demasiado cauto
  • Estabilidad y Escalabilidad: Aprendimos por experiencia que un sistema debe funcionar tan bien con 10 usuarios como con 10.000
  • Integración: En un mundo donde cada vez más, todo converge, la integración es un factor clave. Esta Panel tiene un API con acceso via XML-RPC a toda su funcionalidad.
  • Flexibilidad: Internet es algo vivo, cambiante. Nosotros también; y nuestros sistemas deben permitir y favorecer este cambio.
  • Accesibilidad y Facilidad de Uso: Ningún sistema sirve si no se puede usar. Queremos que todos lo puedan entender y aprovechar al máximo.
  • Diseño: Dicen que la comida entra primero por la nariz, nosotros decimos que las aplicaciones entran primero por los ojos. La estética es vital.

Estamos muy cerca de terminar, y sabemos que es sólo un nuevo comienzo.
O quizás sólo es que estoy muy dormido :)

Bienvenidos a nuestro Blog Oficial. Esperamos tenerlos cerca!

pd. Son las 5.15, evidentemente hoy desayuno en el trabajo.

Compartí este artículo

Bienvenidos a nuestro blog!

Aquí, distintos valientes de ELSERVER.COM escribiremos sobre nuestras maravillosas aventuras:

  • Noticias y lanzamientos oficiales
  • Pensamientos sobre web hosting, negocios y nuevas tecnologías
  • Linux, ajax, javascript, css, xml, php, mysql, perl, y todas esas siglas que nos hacen sentir importantes
  • Temas que nos llamen la atención y querramos compartir con el resto de la comunidad

Nuestra promesa

Según technorati, en este momento hay más de 55.000.000 blogs . No nos gustaría hacer un blog más para escribir cosas que a nadie le importe leer ni malgastar nuestro ancho de banda, así que prometemos:

  • Escribir contenido original
  • Escribir contenido de buena calidad
  • Escribir seguido

Para suscribirte podés usar un cliente RSS web, como Bloglines o Google Reader, pero si tenés una PC fija te recomiendo usar AlertBear – es gratis, liviano, intuitivo… ¿y a aquién no le gustan los ositos?

Gracias por visitar! Vuelva prontos!

Compartí este artículo

Ingreso Clientes

Datos incorrectos. Por favor revisa el e-mail y la contraseña.

Ingresaste correctamente.

Olvidé mi contraseña

Cerrar

Recuperar contraseña

Te llegará un correo con la información acerca de como proceder.

Volver

Cerrar