Interfaz basica

Revision

Empezamos por la vista de revision porque pienso que nos va a dar una base mas solida de cuales son las necesidades por sobre el modelo de datos y el procesamiento.

Estructura

Para desarrollar la interfaz vamos a empezar con una estructura basica de HTML. Teoricamente este HTML deberia cubrir las necesidades de la interfaz de reproduccion:

<div>
  <button>Pausa</button>
  <button>Play</button>
  <button>Stop</button>
  <button>Rew 10'</button>
  <span>07:41</span>
</div>
<input type="checkbox" disabled name="check1" value="1" /> Preséntese y cuénteme por qué quiere hacer el curso de Phonegap
<button>Go!</button>
<br />
<input type="checkbox" disabled name="check2" value="2" /> Nombre
<button>Go!</button>
<button>Go!</button>
<br />
<input type="checkbox" disabled name="check3" value="3" /> Edad
<button>Go!</button>
<br />
<input type="checkbox" disabled name="check4" value="4" /> Conocimientos previos
<br />
<input type="checkbox" disabled name="check5" value="5" /> Experiencia en mobile
<br />
<input type="checkbox" disabled name="check6" value="6" /> Experiencia general
<br />

Varias cosas podrian estar mejor:

• los checkbox nos podrian complicar la vida. El funcionamiento implicito del checkbox es de tipo switch o toggle
• para reemplazar la funcionalidad del checkbox podriamos usar un boton antepuesto al texto de la pregunta
• vamos a querer, eventualmente, poder interactuar con la lista de respuestas, asi que deberiamos encerrarlas en otro <div> que podamos identificar
• cada una de las respuestas va a ocupar una linea, entonces tambien podemos encerrarlas en un <div> y remover los <br />

<div>
  <button>Grabar</button>
  <button>Pausa</button>
  <button>Play</button>
  <button>Rew 10'</button>
  <span>07:41</span>
</div>
<div id="respuestas">
  <div>
    <button>+</button>
    Preséntese y cuénteme por qué quiere hacer el curso de Phonegap
  </div>
  <div>
    <button>+</button>
    Nombre
  </div>
  <div>
    <button>+</button>
    Edad
  </div>
  <div>
    <button>+</button>
    Conocimientos previos
  </div>
  <div>
    <button>+</button>
    Experiencia en mobile
  </div>
  <div>
    <button>+</button>
    Experiencia general
  </div>
</div>

Vamos a tomar este HTML y lo vamos a probar en un proyecto nuevo. El proyecto lo vamos a probar con jQuery Mobile:

phonegap create irec --id com.codenautas.interviewrecorder --name "00 Prueba iRec" -src templates\jqm

Editamos el archivo www/index.html y vamos a pegar el HTML dentro del <div data-role="content"> (reemplacen todo el contenido).

Por el momento no necesitamos correr esto en el dispositivo. Abramos el archivo www/index.html en el browser y veamos como se ve. Spoiler alert: horrible.

Remover (temporalmente) estilos de jQuery Mobile

Para poder trabajar primero en la estructura vamos a sacar los estilos de jQuery Mobile. Para esto solo hay que localizar la linea donde se incorpora el CSS y comentarla (o hacer que falle cambiando el nombre):

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />

Comentada:

<!-- <link rel="stylesheet" type="text/css" href="csss/jquery.mobile-1.4.5.min.css" /> -->

Actualizamos la pagina en el browser y vemos el HTML sin estilos. Igual se ve feo, pero por el momento sirve.

Ahora bien, el listado de preguntas deberia salir de algun modelo de datos, algo sobre lo que podamos iterar para no tener que generar cada entrada a mano.

A continuacion evaluaremos los modelos de datos de la entrevista y una revision de ejemplo