* y distinguir los diálogos **
]
---
.left-column[
## Recursos
## Programación
### Limpieza
### Paso de páginas
### Portada
### Primeras páginas
]
.right-column[
```html
A
su vez, Alicia hizo la tontería de seguirle.
¡Vaya cosa rara! ¡Pero si el conejo se había metido por el hueco del tronco de un árbol!
Atolondradamente, ella le siguió y, con toda facilidad, entró por el agujero. Entonces pensó si salir sería tan fácil como entrar.
A pesar de ello, obsesionada como estaba por las idas y venidas del Conejo, siguió gateando tras él.
Iba por un estrecho sendero que bajaba siempre y cuando el conejo pasó por el ojo de la cerradura de una puerta, pensó que le sería impsible hacer lo mismo. Llegó el momento en que fue a dar en un pozo muy profundo. El Conejo, por algún lado, seguía diciendo que iba a llegar tarde.
Por fin, su viaje continuó en una sala llena de mesitas repletas de manjares y destacaba una botella que decía Bébeme..
```
]
---
.left-column[
## Recursos
## Programación
### Limpieza
### Paso de páginas
### Portada
### Primeras páginas
]
.right-column[
## Mejor, no?
### Ahora vamos a hacer las páginas 2 - 4 sin mi ayuda
- Poned la imagen en la columna derecha-izquierda de forma alterna
- Separad el texto con párrafos
- Poned capitular
- Poned diálogos
- Podéis aplicar colores, y tipos de fuente, sed creativos.
]
---
.left-column[
## Recursos
## Programación
### Limpieza
### Paso de páginas
### Portada
### Primeras páginas
### Ancho de pantalla
]
.right-column[
Al cambiar entre Chrome y el emulador vemos que el texto se puede ver demasiado grande o pequeño dependiendo del dispositivo.
Vamos a arreglarlo com media-queries. En index.css
```css
@media(min-width: 801px){
.texto{
font-size: 20px;
}
}
```
]
---
.left-column[
## Programación
### Paso de páginas
### Portada
### Primeras páginas
### Ancho de pantalla
### música
]
.right-column[
## En index.js
- Añadimos
```javascript
var musica = new Audio('snd/Call_to_Adventure.mp3');
musica.loop = true;
$(document).ready(function() {
bind($('.next'), next);
bind($('.prev'), previous);
bind($('.btn-empezar'), next);
* musica.play();
})
```
]
---
.left-column[
## Programación
### Paso de páginas
### Portada
### Primeras páginas
### Ancho de pantalla
### música
### animación
]
.right-column[
## En index.css
- En la página 3 la imagen se hará pequeña
```css
@-webkit-keyframes pequenyete
{
0% {
max-height: 100%;
max-width: 100%;
}
100% {
max-height: 50%;
max-width: 50%;
}
}
.page3 img{
-webkit-animation: pequenyete 2s infinite linear;
}
```
]
---
.left-column[
## Programación
### Paso de páginas
### Portada
### Primeras páginas
### Ancho de pantalla
### música
### animación
]
.right-column[
## En index.css
- Mientras que en la página 4 la imagen se hará grande
```css
@-webkit-keyframes grande
{
0% {
max-height: 100%;
max-width: 100%;
}
100% {
max-height: 120%;
max-width: 120%;
}
}
.page4 img{
-webkit-animation: grande 1s infinite linear;
}
```
]
---
.left-column[
## Programación
### Paso de páginas
### Portada
### Primeras páginas
### Ancho de pantalla
### música
### animación
### interactividad
]
.right-column[
## En index.js
- Al tocar la página 2 sonará ruido de líquido en la botella
```javascript
var drop = new Audio('snd/water-drop.mp3');
$(document).ready(function() {
bind($('.next'), next);
bind($('.prev'), previous);
bind($('.btn-empezar'), next);
musica.play();
* bind($('.page2'), function() {
* drop.play();
* });
})
```
]
---
name: last-page
template: inverse
## Deberes
---
layout: false
## Mejoras
- Añadir el sonido *pageflip.mp3* al pasar página
- Poner el resto de páginas
- Hacer que una imagen de una vuelta completa al tocarla
- Probar en un dispositivo real
- Conectar el móvil o tablet por USB
- ```cordova run android```
- Cambiar el icono y el splash
---
name: last-page
template: inverse
## Continuará...
jacarma@gmail.com