UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS

LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA

TUTOR: JHON JAIRO OROZCO D. Esp.

1. Si desea personalizar la interfaz para loguearse, siga los siguientes pasos

1.1. La imagen que visualizará al momento de loguearse

Descargar una imagen llamada logo_login.gif en el directorio www/img de su proyecto
1.2. Código PHP que contiene los datos a mostrar en la página inicial
 Tener presente los conceptos de la programación en PHP, dentro de una clase, van sus métodos, cada
uno delimitado con su estructura entre llaves,
 Errores de sintaxis, el HTML puede ir incrustado dentro de una instrucción echo.
 Se recomienda tener un IDE donde pueda navegar fácilmente por el proyecto como Visual Studio Code
 Dentro del directorio PHP de su proyecto crear un directorio libreria
 Dentro del directorio libreria, crear una clase extension_login.php con los métodos indicados en el
siguiente código de tal forma que se tiene
C:\proyectos\toba_2_4\proyectos\hoja_vida\php\libreria\extension_login.php
Cambie a su gusto los datos de la empresa, el desarrollador y los datos de contacto

1
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

<?php
class extension_login extends toba_tp_logon {
function pre_contenido() {
$nombre_del_sistema = "SISTEMA DE HOJA DE VIDA";
$version = 'Versión 1.0';
//la imagen que indique para el logo debe estar en /www/img del proyecto
echo "<div class='login-titulo'>".toba_recurso::imagen_proyecto("logo_login.gif",true);
echo "<div>".$nombre_del_sistema."</div>";
echo "<div>".$version."</div>";
echo "</div>";
echo "\n<div align='center' class='cuerpo'>\n";
}

function post_contenido() {
$mi_empresa = "UNIREMINGTON MANIZALES";
$desarrollado_por = 'Desarrollado por Jhon Jairo Orozco D. Ing';
$telefonos = '312 889 6117';
$mail = 'jjorozcod@uniremingtonmanizales.edu.co';
echo "</div>";
echo "<div class='login-pie'>";
echo "<div>Desarrollado por</div>";
echo "<div style='color:#E3E3E3;'>".$mi_empresa."</div>";
echo "<div style='color:#E3E3E3;'>".$desarrollado_por."</div>";
echo "<div>Celular ".$telefonos."</div>";
echo "<div>".$mail."</div>";
echo "<div>Todos los Derechos Reservados.</div>";
echo "</div>";
}
}
?>
1.3. Asociar la interfaz a la clase con el código respectivo.
Se crea un nuevo tipo de página para loguearse, de tal forma que no tome por defecto la del
Framework

2
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

1.4. Llamamos la extensión del login creado

2. Pruebe logueandose desde otro navegador o cerrando y abriendo el que tiene

con http://localhost/hoja_vida/1.0/

3
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

3. PERSONALIZAR COLORES DEL PROYECTO

3.1. En la barra superior del menú se puede activar la funcionalidad para permitir al usuario
aumentar y disminuir el tamaño de la letra en la interfaz, solo que actúa de forma temporal en
cada interfaz ya que vuela siempre a su tamaño normal

Para lograr este efecto edite el archivo

C:\proyectos\toba_2_7\proyectos\hoja_vida\proyecto.ini y cambie la opción respectiva,
guardar y refrescar la página para ver el resultado.
mostrar_resize_fuente = 1
3.2.
Personalizar colores del proyecto - definir el skin a utilizar
El skin corresponde al estilo de los menús y colores que se muestran en las diferentes
interfaces; cada proyecto puede definir cuál es el Skin que se va a utilizar. Usando el editor ir
a la Configuración y luego a Propiedades Básicas. Allí están disponibles los skins generales
y los propios del proyecto; por ejemplo para visualizar el proyecto con fondo azul existe el
skin v2_azul.

4
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

3.3.
Instanciar y verificar el cambio de fondo gris por defecto ha cambiado a fondo azul
seleccionado

4.
Creación skin personalizado a partir de la extensión de un skin existente
El orden de inclusión de los estilos habilita que el toba.css del proyecto tenga prioridad en
todos los estilos; por lo que para cambiar cualquier detalle del skin o del css general de toba
basta crear un archivo toba.css en la carpeta www del proyecto.
El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un
documento escrito en un lenguaje de marcado (por ejemplo, HTML).
4.1.  Copiar el directorio skins que se encuentra en C:\proyectos\toba_2_7\www
 En C:\proyectos\toba_2_7\proyectos\hoja_vida\www

5
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

4.2. Crear un nuevo tipo de página a partir del skin copiado en el proyecto hoja_vida

6
UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

7
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

4.3. Asociar el skins al proyecto propio

Para ver los resultados del nuevo skins, abra otro navegador y loguearse
http://localhost/hoja_vida/1.0

8
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

4.4. Finalmente puede cambiar los colores por medio de la paleta del skins creado y probar los
resultados; por ejemplo si desea un fondo verde puede seguir los siguientes pasos:
 Editar el skins propio del proyecto
 Cambiar en la paleta de colores por los deseados
 Generar Skins nuevamente
 Guardar

9
 UNIREMINGTON MANIZALES – INGENIERIA DE SISTEMAS
LINEA DE ENFASIS III – FRAMEWORK SIU-TOBA
TUTOR: JHON JAIRO OROZCO D. Esp.

4.5. Instanciar nuevamente para ver los resultados del fondo principal

4.6. Probar cambiando otros colores de la barra de menús, cuadros, etc.

Una consideración a tener en cuenta es que no todos los colores de la interfaz gráfica se
pueden cambiar desde esta funcionalidad del editor del toba, algunas partes están
compuestas por imágenes que se encuentran en la carpeta del proyecto y otras secciones de
modifican desde el archivo toba.css.

10