Revision de UI - CGastrell/phonegap GitHub Wiki

Mientras se esta tomando la entrevista se puede ver:

• Un boton para empezar a grabar
• Un boton para pausar la grabacion (test)
• Un titulo con el nombre/numero de entrevista
• Un temporizador que muestra la duracion de la entrevista
• Un listado de checkboxes con las preguntas que el entrevistado debe responder a lo largo de la entrevista
• Una linea de tiempo del audio de la entrevista con marcas representando el momento en que una respuesta fue dada

Por el momento descartaria la linea de tiempo, no porque sea imposible, sino porque habria que recurrir a otras librerias un poco mas avanzadas. Puede ser mas viable durante la reproduccion que en la grabacion, pero simplemente lo dejaria para mas adelante.

Tentativamente se me ocurre que todos estos elementos son facilmente representables con tags HTML:

<p>
  <button>Grabar</button> <button>Pausa</button> <span>rec #12</span> <span>07:41</span>
</p>
<input type="checkbox" name="check1" value="1" /><label for="check1">Preséntese y cuénteme por qué quiere hacer el curso de Phonegap</label> <br />
<input type="checkbox" name="check2" value="2" /><label for="check2">Nombre</label> <br />
<input type="checkbox" name="check3" value="3" /><label for="check3">Edad</label> <br />
<input type="checkbox" name="check4" value="4" /><label for="check4">Conocimientos previos</label> <br />
<input type="checkbox" name="check5" value="5" /><label for="check5">Experiencia en mobile</label> <br />
<input type="checkbox" name="check6" value="6" /><label for="check6">Experiencia general</label> <br />

Mientras se esta revisando la entrevista se puede ver:

• Un boton para iniciar la reproduccion (play)
• Un boton para pausar la reproduccion
• Un boton para detener la reproduccion (stop)
• Un boton para volver 10 segundos hacia atras
• Un indicador que muestra el tiempo de reproduccion de la entrevista
• Un listado de checkboxes con las preguntas de la entrevista
  • Cada checkbox del listado se va tildando a medida que la reproduccion pasa el tiempo en que fue respondido
  • Cada checkbox posee un boton a la derecha que puede llevarnos al momento en la reproduccion donde fue anotado
• Una linea de tiempo del audio de la entrevista con referencias a las respuestas dadas

Nuevamente descartaria la linea de tiempo hasta tener mas avanzado el desarrollo. No entiendo bien la utilidad del boton para grabar en este caso.

El codigo HTML sigue siendo simple, solo deshabilitaria los checkboxes, en cuyo caso ya no necesitariamos los <label>

<p>
  <button>Play</button> <button>Pausa</button> <button>Stop</button> <button>Rew 10'</button> <span>07:41</span>
</p>
<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 />

Primero pondria en funcionamiento este codigo HTML, luego buscaria que frameworks podemos usar para:

• que se vea mas fachero
• que optimice los tamaños y accesibilidad
• que no sea dificil de aprender/adaptar