-
Notifications
You must be signed in to change notification settings - Fork 1
irec navegacion
Para la aplicacion vamos a necesitar una serie de paginas:
- #home: pagina inicial, botones para acceder a:
- #guia-list: listado de guias guardadas
- #entrevista-list: listado de entrevistas guardadas
- #guia-list: levanta el archivo
guias.json
y muestra el listado, cada entrevista es un vinculo a una nueva entrevista (#interview) - #entrevista-list: levanta el archivo
entrevistas.json
y muestra el listado de entrevistas, cada una es un vinculo a la pagina de revision (#revision) - #interview: pagina para tomar una entrevista:
- botones de
Grabar/Detener
y reloj - listado de preguntas con botones para agregar
tag
- botones de
- #revision: pagina de revision de entrevistas
- boton play
- boton pausa
- reloj
- listado de preguntas y botones para agregar tag y para navegar a una respuesta
- #nueva-guia: pagina para agregar una guia a las guias guardadas
En esta vista por el momento solo vamos a agregar 2 botones para navegar a #guia-list y #entrevista-list:
<div data-role="page" id="home">
<div data-role="header">
<h1>Interview Recorder</h1>
</div>
<div data-role="content">
<a href="#entrevista-list" class="ui-btn ui-btn-inline">Archivo de entrevistas</a>
<br />
<a href="#guia-list" class="ui-btn ui-btn-inline">Entrevistar</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">home</div>
</div>
</div>
Vamos a ir creando las paginas que necesitamos, cada una con contenido que luego borraremos, pero para evaluar la navegacion necesitamos que tengan un contenido inicial.
Listado de entrevistas guardadas
<!-- PAGINA LISTADO ENTREVISTAS -->
<div data-role="page" id="entrevista-list">
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Entrevistas</h1>
</div>
<div data-role="content">
<ul id="entrevistas" data-role="listview" class="ui-listview">
<li><a href="#revision" data-entrevista="ttt">Entrevista 1</a></li>
<li><a href="#revision" data-entrevista="ddd">Entrevista 2</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">entrevistas</div>
</div>
</div>
<!-- /PAGINA LISTADO ENTREVISTAS -->
Listado de guias guardadas
<!-- PAGINA LISTADO GUIAS -->
<div data-role="page" id="guia-list">
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Guias</h1>
<a href="#nueva-guia" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext ui-btn-inline"></a>
</div>
<div data-role="content">
<ul id="guias" data-role="listview" class="ui-listview">
<li><a href="#interview" data-entrevista="ttt">Curso Phonegap</a></li>
<li><a href="#interview" data-entrevista="ddd">Vacante F3</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">guias</div>
</div>
</div>
<!-- /PAGINA LISTADO GUIAS -->
Esta es la vista sobre la que estuvimos trabajando en la ultima clase:
<!-- PAGINA REVIEW -->
<div data-role="page" id="revision">
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Revision</h1>
</div>
<div data-role="content">
<div>
<button id="play" class="ui-btn ui-btn-inline ui-mini">Play</button>
<button id="pausa" class="ui-btn ui-btn-inline ui-mini">Pausa</button>
<button id="stop" class="ui-btn ui-btn-inline ui-mini">Stop</button>
<button id="backTen" class="ui-btn ui-btn-inline ui-mini">Rew 10"</button>
<button id="currentTime" class="ui-btn ui-btn-inline ui-mini ui-btn-b">00:00</button>
</div>
<div id="respuestas">
<div>
<button class="ui-btn ui-btn-inline ui-mini">+</button>
Preséntese y cuénteme por qué quiere hacer el curso de Phonegap
<button class="ui-btn ui-btn-inline ui-mini">Go!</button>
</div>
<div>
<button class="ui-btn ui-btn-inline ui-mini">+</button>
Nombre
<button class="ui-btn ui-btn-inline ui-mini">Go!</button>
<button class="ui-btn ui-btn-inline ui-mini">Go!</button>
</div>
<div>
<button class="ui-btn ui-btn-inline ui-mini">+</button>
Edad
<button class="ui-btn ui-btn-inline ui-mini">Go!</button>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">revision</div>
</div>
</div>
<!-- /PAGINA REVIEW -->
Esta es la pagina con la interfaz para la entrevista, con el boton para grabar unificado (rec/stop) para seguir el ejemplo que usamos con las primeras pruebas de grabacion.
TODO: falta un prompt
inicial para darle un nombre a la entrevista a fin de identificarla luego, ej: Carlos Ponce, Candidato 1, SanJose351 Piso2, etc...
<!-- PAGINA INTERVIEW -->
<div data-role="page" id="interview">
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Entrevista</h1>
</div>
<div data-role="content">
<div>
<button id="record" class="ui-btn ui-btn-inline ui-icon-power">Grabar</button>
<!-- <button id="record-stop" class="ui-btn ui-btn-inline ui-mini">Stop</button> -->
<button id="record-time" class="ui-btn ui-btn-inline ui-btn-b">00:00</button>
</div>
<div id="guia">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">interview</div>
</div>
</div>
<!-- /PAGINA INTERVIEW -->
Esta pagina esta para completar el circuito basico, por el momento no va a tener ninguna funcionalidad, pero la idea es que en esta pagina podamos armar nuevas guias
<!-- PAGINA FORM NUEVA GUIA ... OJO! -->
<div data-role="page" id="nueva-guia">
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Nueva guia</h1>
</div>
<div data-role="content">
Aca va el form para nueva guia
</div>
<div data-role="footer" data-position="fixed">
<div data-role="content">?</div>
</div>
</div>
<!-- /PAGINA FORM NUEVA GUIA -->
Sin mas inicializacion deberiamos poder probar esta estructura tanto en el dispositivo como en el browser. Go!
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash