DISEÑOS CON CSS

GANDIA MOBINET 4.3 PREMIUM

Ejemplos de diseños, ideas y desarrollos realizados con la nueva versión.
Cambio de aspecto global de los cuestionarios

Sin CSS Con CSS

 Detalle de las modificaciones
Barra de progreso personalizada

Fondo de
cuestionario
con trama

Posibilidad de crear
elementos multicapa en
textos

Input / radios
personalizados

Forma y color de
pregunta
personalizada

Barra acciones ocultada

Botón de acción
(sustituye a la barra)
¿Dónde pongo mi CSS?
Desde la
opción de
Propiedades
de
Cuestionario.
Dispongo de
un espacio
para escribir
mi código
CSS. Editor
que
comprueba
errores en el
código.
Librerías JS y scripts externos
Desde el mismo lugar,  En el ejemplo se muestra
podemos referenciar a
librerías externas
(online) y/o scripts de
que se está cargando la
JS alojados como
ficheros de estudio.
css y la librería de iconos
Caso de necesitarse en
font-awesome y también
MobiNet , deben
obligatoriamente esas
se está cargando la
librerías ser
descargadas y librería de JavaScript de
utilizadas como archivo
auxiliar del minjs.
cuestionario en el
estudio. No
funcionarían en este
caso los links a recursos
externos, dado que
MobiNet encapsula en
aplicación offline todos
los contenidos.
 Respuestas
Posibles elementos modificables:

Radios / Categorias Checks / Múltiples Input / Abiertas

Galería TESI de elementos CSS

 Menú herramientas > Galería

CSS.
 Disponemos de una galería de
elementos CSS y/o JS que
iremos incrementando. Esta
librería se puede descargar
desde el propio Quest.
Posibles elementos modificables: Barras de progreso
 Textos / Botones / Elementos multicapa
Posibles elementos modificables:
Botones de acción: Siguiente, Retroceder,
Anular/Rechazar, Guardar, Ajustar zoom,
Seleccionar idioma…
Ejemplos de cuestionarios diseñados
Ejemplos de cuestionarios diseñados

• Formatos tabla, tanto para

preguntas, respuestas como
textos explicativos
• Personalización de valoración
según colores e inputs
• Inclusión de botones especiales
para asemejarse a formularios
En el anterior ejemplo
El código modificador de los DIVS de los radio

button de respuesta se muestra en la CSS  Se usan clases y modificadores
 div[id^='DIVCOL_'] de clase
 { border-radius: 10px;}
 #DIVCOL_0  Para conocer como se van
 { background-color: red !important;} creando los elementos, utilizar el
 #DIVCOL_1 DEBUG de HTML (Ctrl + F12)
 { background-color: #ff5e5e !important;}
 #DIVCOL_2
 { background-color: #ff9900 !important;}
 #DIVCOL_3
 { background-color: #80d557 !important;}
 #DIVCOL_4
 { background-color: #00ff00 !important;}
 #DIVCOL_5
 { background-color: #ccc !important;}
Ejemplos de cuestionarios diseñados.
Ejemplos de preguntas especiales CSS3 + HTML5
Ejemplos de preguntas especiales CSS3 + HTML5
Ejemplos de preguntas especiales: Fuentes especiales
Ejemplos de preguntas especiales CSS3 + HTML5
Ejemplos de preguntas especiales: librerías gráficos
Diseño adaptativo (en desarrollo)

 Variación del cuestionario (no respetando coordenadas de diseño) y

modificando incluso componentes si hiciera falta …
 Es el desarrollo en curso…
 Se presentan a continuación algunos ejemplos que muestran el mismo
cuestionario en varios formatos (estrechando el navegador y dándole múltiples
formas) y viendo como varía el diseño del mismo de forma automática.
Ejemplo: Cuestionario a resolución de escritorio

Resolución
1440x900
Ejemplo: Cuestionario a resolución de Tablet

Resolución
1024x768 (Ipad)
 Ejemplo: Cuestionario a resolución de teléfono móvil

Resolución
360x567 (Nexus 5)

Resolución
567x360 (Nexus 5)
Fuentes de información

Sitios web de ayuda Librerías

 http://www.w3schools.com/  Bootstrap.js
 https://jquery.com/  Pure.css
 http://css3buttongenerator.com/
 Canvas.js
 http://www.bestcssbuttongenerator.com/
 ZingChart.js
 https://css-tricks.com/css3-progress-bars/
 …similares  Chartist.js

NOTA: no todas las librerías de JS pueden interactuar bien con DOJO,

framework bajo el que se trabaja de forma global. Esta restricción se
eliminará en versiones posteriores sin DOJO (diseño adaptativo).