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
cuestionari
o 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 font-awesome y
Caso de necesitarse en
MobiNet , deben
obligatoriamente esas
también se está
librerías ser
descargadas y cargando la librería de
utilizadas como
archivo auxiliar del JavaScript de 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 / Input /

Múltiples 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 Barras de progreso
modificables:
 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
 Se usan clases y
CSS modificadores de clase
 div[id^='DIVCOL_']
 { border-radius: 10px;}  Para conocer como se van
 #DIVCOL_0 creando los elementos, utilizar
 { background-color: red !important;}
 #DIVCOL_1
el DEBUG de HTML (Ctrl +
 { background-color: #ff5e5e !important;} F12)
 #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.j
 https://css-tricks.com/css3-progress-bars/
s
 …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).