El material aquí referenciado es común al lenguaje HTML, HTML5 y CSS / JS. Tesi no ofrece soporte de consultas sobre código desarrollado por equipos de programación ajenos a TESI, siendo necesario en caso de desear recibir esta ayuda, la contratación de soporte ad-hoc en bolsa de horas. Contactar con el departamento comercial de TESI, SL (comercial@tesigandia.com) para este cometido.
Nota : téngase en cuenta que los desarrollos realizados con este lenguaje deben compatibilizar el desarrollo en diferentes entornos, Capi, Cati y Cawi. La tecnología no es la misma en todos los casos y mientras que el 100% de lo aquí indicado estará funcional en las últimas versiones de los navegadores (a 1 de enero de 2017), no es así para los navegadores de dispositivos o ambientes de Android e IOS.
Conceptos básicos de CSS
Web de referencia: https://www.w3schools.com/css/default.asp
Para añadir contenido CSS vamos a Archivo > Propiedades > Pestaña CSS. Este contenido será de aplicación en la carga del archivo. Las clases/estilos que usaremos se definen básicamente como .nombredelestilo.
Por ejemplo, si queremos tener una clase/estilo, que tenga la fuente a 20px en color rojo, con fondo en color verde y además un borde redondeado seria así:
.nuevoestilo
{
font-size: 20px;
color: #cd5c5c;
background-color: #ddffdd;
border: 1px solid #ddffdd;
border-radius: 5px;
}
Adicionalmente, a veces, necesitaremos sobreescribir los formatos y opciones que se utilizan en las definiciones por defecto de Gandia Integra. Esto se hace añadiendo !important por detrás de la propiedad, así:
.Texto_principal_18, .Texto_principal_16, .Texto_principal_14
{
font-size: 12pt !important;
}
En este ejemplo se sobrescribe el tamaño de la fuente de los tres estilos, ya definidos en la pestaña estilos.
Otro ejemplo básico es cambiar la apariencia de los botones (opción mostrar botones de las variables), por unos blancos sin degradados y azules al quedar seleccionados.
.mblButton ,.customGandia MobiNetButton
{
background-image: initial !important;
}
.blueButton
{
color: white;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0bccd), to(#b0bccd), color-stop(0.5, #b0bccd), color-stop(0.5, #b0bccd)) !important;
background-image: linear-gradient(to bottom, #b0bccd0%, #b0bccd 50%, #b0bccd 50%, #b0bccd 100%) !important;
}
En este caso, la clase/estilo .blueButton es la que se utiliza por defecto para indicar que la opción se ha seleccionado, y el color #b0bccd es el azul para marcarlo
Uso de ficheros externos (script de JavaScript)
Para añadir ficheros a nuestro cuestionario, tenemos que entrar en Archivo > Propiedades > Pestaña ficheros externos.
Este espacio se suele utilizar para desarrollos ad-hoc de componentes que hace TESI, para cargar ficheros externos por ejemplo con definiciones CSS o cargar fuentes o tipografía también externos como pueden ser las de Google Fonts.
Debemos distinguir entre carga local, los ficheros deben estar en el directorio del estudio y carga de servidores online, en este caso los ficheros estarán alojados en servidores donde no se realizará la entrevista. Este punto es importante debido a las limitaciones de seguridad que aplican algunos navegadores, por regla general si el servidor desde donde queremos tomar el fichero es un CDN debería funcionar correctamente, como en el caso de las Google Fonts.
Cargar fichero *.CSS desde nuestro directorio de estudio
| • | Copiar el fichero "ejemplo.css" en el directorio de nuestro estudio |
| • | Entramos en Archivo > Propiedades > Ficheros externos y tenemos que indicarle que lo cargue de la siguiente manera: <link href='ejemplo.css' rel='stylesheet' /> |
| • | Aceptamos el dialogo y al entrar en simulación deberiamos ver los cambios de la carga si en algún punto del cuestionario hacemos referencia a las clases definidas en ejemplo.css |
Cargar fichero *.js desde nuestro directorio de estudio
| • | Copiar el fichero trabajo.js en el directorio de nuestro estudio |
| • | Entramos en Archivo > Propiedades > Ficheros externos y tenemos que indicarle que lo cargue de la siguiente manera: <script src='trabajo.js'></script> |
| • | Aceptamos el dialogo. |
Para hacer uso del script, lo podríamos llamar desde un texto cualquiera, introduciendo el código en la parte HTML del editor de texto, con un <script>funcion();</script> a la función definida en el fichero trabajo.js
Cargar fuente de Google Fonts (online)
Referencia en Google Fonts (https://fonts.google.com).
Nota : Téngase en cuenta que si la fuente va a usarse en ambiente offline (por ejemplo Gandia MobiNet), deberá descargarse las fuentes base e incorporarlas como fichero referenciado.
Entramos en Archivo > Propiedades > Ficheros externos y tenemos que indicarle que lo cargue de la siguiente manera:
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
Ahora tendríamos que indicarle mediante CSS al cuestionario que queremos usar esa fuente. Por ejemplo, definimos la clase .fuentepropia en la pestaña css de la siguiente manera:
.fuentepropia{
font-family: 'Pacifico', cursive;
}
Solo nos quedaría añadir esta clase/estilo en nuestros elementos del cuestionario.
Cargar fuente de Google Fonts (offline)
Descargamos el fichero zip con la fuente desde https://fonts.google.com y tenemos que indicarle mediante CSS al cuestionario que queremos usar esa fuente. Para hacerlo tenemos que poner esta definición.
@font-face
{
font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico'), local('Pacifico-Regular'), url(Pacifico-Regular.ttf) format('truetype');
}
.fuentepropia{
font-family: 'Pacifico', cursive;
}
Solo nos quedaría añadir esta clase/estilo en nuestros elementos del cuestionario.