exacs

Básicamente, la anterior expresión es idéntica a esta otra:

int chorizo; if (a==b) { chorizo = 7; } else { chorizo = 0; }

¿Acojona que algo que se ha hecho en 6 líneas antes lo haya hecho en una sola? Pues esa es la magia del operador ternario. Básicamente sirve para expresiones de este tipo:

if (condicion) { variable = valor1; } else { variable = valor2; }

¡Ojo! Que solo sirve para cosas exactamente iguales a las que he puesto. Me explico, el bloque if...else solo tiene dos ramas if y else. Nada de else if.... Luego, en ambas ramas (que insisto, no hay más ramas que dos) hay que asignar valores a una variable (la misma variable) en ambas ramas. Y no puede haber más cosas dentro.

Entonces, teniendo esos elementos, la cosa se transforma en esto:

variable = condicion ? valor1 : valor2;

Y nada más. Todo en ese orden y sin que falte nada.

Ejemplos de uso

Método que devuelve el número máximo de dos dados como parámetro.

La manera clásica sería así:

public int max(int v1, int v2) { int result; if (v1>v2) { result = v1; } else { result = v2; } return result; }

Y con el operador ternario:

public int max(int v1, int v2) { int result = v1>v2 ? v1 : v2; return result; }

Pero encima, en donde pone result por segunda vez, podemos poner directamente su valor, es decir:

public int max(int v1, int v2) { return v1>v2 ? v1 : v2; }

Y en una línea, hemos resuelto el método.

El siguiente método retorna el atributo telephone. Si el parámetro prefix es true, retorna dicho atributo con el prefijo "(+34)" delante. Si no, retorna el número sin el prefijo delante.

public String getTelephone(boolean prefix) { if (prefix) { return "(+34) " + this.telephone; else { return this.telephone; } }

Y ahora, con el operador ternario

El otro constructor

private OthelloNode(OthelloCPU game, char x, int y, OthelloNode parent, int depth) { this.game = game; this.parent = parent; this.depth = depth;

Para calcular el profit hacemos beneficio del padre + beneficio de this y, beneficio de this es igual a diferencia después del movimiento - diferencia antes del movimiento

Es decir, profit = parent.profit - (diferencia antes) + (diferencia después)

Aquí operamos parent.profit - (diferencia antes)

this.profit = this.parent.profit; this.profit -= (game.getWhitePoints() - game.getBlackPoints());

Terminamos de inicializar

this.author = this.game.getTurn();

Ahora, hacemos el movimiento

this.game.putPieceCPU(x, y);

Terminamos de calcular el profit

this.profit += (game.getWhitePoints() - game.getBlackPoints());

Ahora, si el depth (profundidad) es mayor que 0, creamos hijos, sino, no.

if (depth>0) { createChildren(); }

Después calculamos el valor minmax. Esto es lo que hemos llamado antes la segunda parte del algoritmo

if (depth==0) { this.minmax = this.profit; } else { int max = 0; int min = 0; // El máximo o mínimo de los hijos. OthelloNode pointer = this.children.remove(0); while (pointer != null) { max = pointer.minmax>max ? pointer.minmax : max; min = pointer.minmax<min ? pointer.minmax : min; pointer = this.children.isEmpty() ? null : this.children.remove(0); } this.minmax = this.author==Piece.BLACK ? max : min; } }

Para finalizar vamos a implementar createChildren

private void createChildren() { this.children = new ArrayList<OthelloNode>(); for (char x = 'A'; x <= 'H'; x++) { for (int y = 1; y <= 8; y++) { if (this.game.isValidMovement(x, y)) { try { this.children.add(new OthelloNode(this.game.clone(), x, y, this, this.depth-1)); } catch (CloneNotSupportedException e) {} }// if }// for }// for }

Aquí el código completo.

Y ahora falta mejorar la implementación.

Empezamos implementando el Nodo

Vamos a hacer un constructor para la cabeza y otro para los demás nodos.

Atributos:

public class OthelloNode { private static int size; private OthelloCPU game; private Piece author; // The author of the last movement private int profit; private int minmax; private int depth; private OthelloNode parent;

Constructor de la cabeza

Pasa como atributos la situación actual del juego (una instancia completa de OthelloCPU) y la profundidad deseada (depth)

public OthelloNode(OthelloCPU game, int depth) {

Inicializamos atributos

this.game = game; this.depth = depth; this.profit = 0; this.accumulate = ""; this.author = game.getTurn().getEnemy();

Y ahora creamos los hijos con un método aparte.

Por cierto, los metodos System.nanoTime() y el println es para saber cuánto tiempo tardará en generarse el árbol completo

long startTime = System.nanoTime(); createChildren(); long stopTime = System.nanoTime(); System.out.println((stopTime - startTime)/1000000 + "ms"); }

La implementación del árbol es algo compleja y lenta.

Creamos la cabeza del árbol metiendo en ella la situación del tablero actual.

Le asignamos profundidad n (donde n es la complejidad de la búsqueda)

Desplegamos tantos hijos como movimientos posibles para el jugador haya. Los desplegamos con una búsqueda en profundidad. Es decir, primero los más profundos y luego los siguientes.

Les asignamos profundidad = profundidad del padre - 1.

Les introducimos las coordenadas del movimiento y almacenamos quién realiza el movimiento.

Realizamos el movimiento.

Calculamos la nueva situación del tablero en cada nodo.

Introducimos el beneficio de este nodo = beneficio del padre + beneficio de este movimiento

Repetimos lo mismo hasta llegar a una profundidad 0

En los nodos de profundidad 0, calculamos el valor MINMAX minmax = beneficio de este nodo.

En un nodo cualquiera que no sea de profundidad 0

Si el movimiento ha sido máquina (y por tanto el siguiente es humano), minmax = mínimo de sus hijos

Si el movimiento ha sido humano (y por tanto el siguiente es máquina), minmax = máximo de sus hijos

El mejor movimiento será el máximo de los minmax de los hijos de la cabeza

Explicación con un ejemplo

Esta es la situación que vamos a simular.

Primero, ponemos la cabeza del árbol y vamos a asignarle profundad 6 por ejemplo. Si queremos aumentar la complejidad del cálculo, tenemos que incrementar dicho número de profundidad.

Vamos a poner como queda desplegado el árbol.

Aquí indicamos la profundidad (Prof), las casillas de movimiento que se estudian, de quién es el turno (WHITE o BLACK) y cuál es el beneficio total hasta ese movimiento.

Prof 5 B2 > WHITE > 5 Prof 4 B2 A1 > BLACK > -4 Prof 3 B2 A1 C1 > WHITE > 3 Prof 2 B2 A1 C1 B4 > BLACK > 0 Prof 1 B2 A1 C1 B4 A3 > WHITE > 3 Prof 0 B2 A1 C1 B4 A3 E1 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 E2 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 E7 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 F2 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 F3 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 G3 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 G4 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 H4 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 H5 > BLACK > -2 Prof 1 B2 A1 C1 B4 A5 > WHITE > 5 Prof 0 B2 A1 C1 B4 A5 A3 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 E2 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 E7 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 F2 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 F3 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 G3 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 G4 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 H4 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 H5 > BLACK > 0 Prof 1 B2 A1 C1 B4 B5 > WHITE > 3 Prof 0 B2 A1 C1 B4 B5 A5 > BLACK > -4 Prof 0 B2 A1 C1 B4 B5 B6 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 E1 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 E2 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 E7 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 F2 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 F3 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 G3 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 G4 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 H4 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 H5 > BLACK > -2 Prof 1 B2 A1 C1 B4 B6 > WHITE > 5 Prof 0 B2 A1 C1 B4 B6 B5 > BLACK > 0 ...

Ahora, vamos en sentido contrario para la segunda parte.

A los hijos de profundidad 0, les asignamos valor minmax igual al beneficio. Y al resto les asignaremos el máximo de sus hijos o el mínimo.

Prof 0 B2 A1 C1 B4 A3 E1 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 E2 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 E7 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 F2 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 F3 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 G3 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 G4 > BLACK > -2 Prof 0 B2 A1 C1 B4 A3 H4 > BLACK > 0 Prof 0 B2 A1 C1 B4 A3 H5 > BLACK > -2 Prof 1 B2 A1 C1 B4 A3 > WHITE > -2 Mínimo Prof 0 B2 A1 C1 B4 A5 A3 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 E2 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 E7 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 F2 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 F3 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 G3 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 G4 > BLACK > 0 Prof 0 B2 A1 C1 B4 A5 H4 > BLACK > 2 Prof 0 B2 A1 C1 B4 A5 H5 > BLACK > 0 Prof 1 B2 A1 C1 B4 A5 > WHITE > 0 Mínimo Prof 0 B2 A1 C1 B4 B5 A5 > BLACK > -4 Prof 0 B2 A1 C1 B4 B5 B6 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 E1 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 E2 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 E7 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 F2 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 F3 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 G3 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 G4 > BLACK > -2 Prof 0 B2 A1 C1 B4 B5 H4 > BLACK > 0 Prof 0 B2 A1 C1 B4 B5 H5 > BLACK > -2 Prof 1 B2 A1 C1 B4 B5 > WHITE > -4 Mínimo

...

Prof 5 B2 > WHITE > 0 Prof 5 C1 > WHITE > 0 Prof 5 C4 > WHITE > 0 Prof 5 C6 > WHITE > 0 Prof 5 C7 > WHITE > 0 Prof 5 D3 > WHITE > 0 Prof 5 D7 > WHITE > 0 Prof 5 E2 > WHITE > 0 Prof 5 E7 > WHITE > 0 Prof 5 F2 > WHITE > 0 Prof 5 F3 > WHITE > 0 Prof 5 F7 > WHITE > 0 Prof 5 G3 > WHITE > 0 Prof 5 G4 > WHITE > 0 Prof 5 G6 > WHITE > 0 Prof 5 G7 > WHITE > 0

Por lo tanto, el valor "minmax" para todos los movimientos es 0. Es decir, estudiados 1621746 movimientos posibles, la conclusión es que "cualquier movimiento nos da el mismo beneficio". Luego, tenemos que mejorar el algoritmo para poder elegir un movimiento mejor que los demás..

public void putPiece(char x, int y) throws InvalidMovementException, UnactiveGameException { // Plays the human super.putPiece(x, y); // Plays the CPU playCPU(); }

Y ahora procedemos a detallar playCPU, que es el método difícil. Tenemos que conseguir que haga los siguientes pasos:

Comprobar en qué casillas puedo poner una ficha.

En dichas casillas, comprobar en cuál obtenemos el mayor beneficio.

Poner la ficha en la que tengamos el mayor beneficio.

En caso de empate de opciones, elegir una aleatoria.

Vamos.

Definimos un par de variables con las mejores coordenadas encontradas. Las inicializamos con valores por defecto. También declaramos bestProfit como la variable en la que vamos a guardar el mayor beneficio

private void playCPU() { char bestX = '\0'; int bestY = 0; int bestProfit = 0;

Ahora recorremos todo el tablero

for (char x = 'A'; x <= 'H'; x++) { for (int y = 1; y <= 8; y++) {

Y simulamos poner una pieza para saber cuántas vamos a conseguir.

Si es mayor el beneficio, esas serán nuestras mejores coordenadas. Si son iguales, elegimos aleatoriamente

if (simulateEatPieces(x,y) > bestProfit) { bestX = x; bestY = y; } else if (simulateEatPieces(x,y) == bestProfit) { Random r = new Random(); int rand = r.nextInt(2); bestX = rand==0 ? x : bestX; bestY = rand==0 ? y : bestY; } } }

Por último, jugamos con los mejores valores

try { super.putPiece(bestX, bestY); } catch (InvalidMovementException | UnactiveGameException e) {}

Ahora tenemos que definir el método simulateEatPieces(char x, int y).

Es exactamente igual que el método eatPieces(char x, int y).

private int simulateEatPieces(char x, int y) { int piecesEaten = 0; for (int i = 0; i < 8; i++) { piecesEaten += this.simulateEatPieces(x, y, Direction.values()[i]); } return piecesEaten; }

Así que definimos simulateEatPieces(char x, int y, Direction dir) que hace lo mismo que eatPieces(char x, int y, Direction dir) pero sin llegar a comer ninguna pieza (solo contando las que se comería)

private int simulateEatPieces(char x, int y, Direction dir) { if (!this.isValidMovement(x, y)) return 0; // Get the piece at the square

Esta es la única variación

Piece piece = super.getTurn();

El resto no cambia

int piecesToEat = 0; x += dir.x(); y += dir.y(); // Follow the direction and find the next piece of same colour while (x >= 'A' && x <= 'H' && y >= 1 && y <= 8 && this.getBoard().getPiece(x, y) == piece.getEnemy()) { piecesToEat++; x += dir.x(); y += dir.y(); } if (this.getBoard().getPiece(x, y)!=piece) { piecesToEat = 0; } return piecesToEat; }

Con esto habríamos hecho un cálculo muy básico del siguiente movimiento.

Código completo: https://github.com/exacs/Othello/commit/149b574ad140baaf9af5cddac9ff9cdc498fec40

Implementación de Board

La estructura que usaremos para almacenar las fichas va a ser un array multidimensional de 8x8 de objetos Piece. A este array van a acceder todos los métodos de Board. Lo declaramos como atributo y lo inicializamos en el constructor.

Por convención, al array le ponemos un nombre en plural, squares (casillas). Además inicializamos el juego poniendo las cuatro fichas iniciales

private Piece[][] squares; public Board() { squares = new Piece[8][8]; this.squares[3][3] = Piece.BLACK; this.squares[4][4] = Piece.BLACK; this.squares[3][4] = Piece.WHITE; this.squares[4][3] = Piece.WHITE; }

E implementamos

public Piece getPiece(char x, int y) { return squares[y-1][x-'A']; } public void putPiece(Piece piece, char x, int y) throws InvalidMovementException { if (piece==null) throw new InvalidMovementException("Piece given is null"); if (x<'A' || x>'H') throw new InvalidMovementException("Coordinate x '" + x + "' is not valid"); if (y<0 || y>8) throw new InvalidMovementException("Coordinate y '" + y + "' is not valid"); squares[y-1][x-'A'] = piece; } public void flipPiece(char x, int y) throws InvalidMovementException { Piece current = this.getPiece(x, y); this.putPiece(current.getEnemy(), x, y); }

Como observación, decir que si getPiece recibe argumentos no válidos, puede lanzar una excepción no controlada del tipo ArrayOutOfBoundsException.

Implementación de Othello

El método putPiece es el más complejo de todos.

Primero debe comprobar las excepciones

public void putPiece(char x, int y) throws InvalidMovementException, UnactiveGameException { if (!active) throw new UnactiveGameException("Game has been ended"); if (x < 'A' || x > 'H') throw new InvalidMovementException("Coordinate x '" + x + "' is not valid"); if (y < 1 || y > 8) throw new InvalidMovementException("Coordinate y '" + y + "' is not valid"); if (this.board.getPiece(x, y) != null) throw new InvalidMovementException("The square is not empty"); if (!this.willEatPiece(x, y, turn)) throw new InvalidMovementException("The movement is not valid");

Nótese que la última excepción se comprueba mediante un método auxiliar willEatPiece, que comprueba si se comerán fichas en esa posición o no pero no las come

Después se pone la ficha

this.board.putPiece(turn, x, y);

Y por último se comen las fichas que haga falta con el método eatPieces.

int piecesEaten = this.eatPieces(x, y);

La diferencia entre los métodos willEatPiece y eatPieces es que el primero NO cambia el estado del tablero y el segundo sí. Además el primero retorna un boolean y el segundo un int.

Por último, modificamos los puntos

if (turn==Piece.BLACK) { this.blackPoints += piecesEaten + 1; this.whitePoints -= piecesEaten; } else { this.blackPoints -= piecesEaten; this.whitePoints += piecesEaten + 1; }

Y cambiamos de turno

this.nextTurn();

Ahora veamos la implementación del método auxiliar eatPieces(char x, int y).

private int eatPieces(char x, int y) { int piecesEaten = 0; for (int i = 0; i < 8; i++) { piecesEaten += this.eatPieces(x, y, Direction.values()[i]); } return piecesEaten; }

Lo único que hace es llamar 8 veces al método eatPieces(char x, int y, Direction dir). con diferentes valores de dir. Y dicho método lo que hace es comerse las piezas en la dirección dada. Veamos su implementación.

private int eatPieces(char x, int y, Direction dir) {

Primero, obtiene la ficha e inicializa un contador a 0.

Piece piece = this.board.getPiece(x, y); int piecesToEat = 0;

Avanza los cursores en la dirección dada

x += dir.x(); y += dir.y();

Ahora, va avanzando mientras que se vaya encontrando fichas enemigas. Las posibles salidas del bucle son 3:

CASO 1. Se ha llegado al final del tablero. El cursor (x,y) está fuera del rango ([1,8],[A,H]) En este caso, no se come ninguna ficha

CASO 2. La ficha a la que llega el cursor no es del enemigo porque no hay ficha En este caso, no se come ninguna ficha

CASO 3. La ficha a la que llega el cursor no es del enemigo porque la ficha no es la del enemigo, sino la propia En este caso, el programa voltea todas las fichas intermedias

Implementamos

// Follow the direction and find the next piece of same colour while (x >= 'A' && x <= 'H' && y >= 1 && y <= 8 && this.board.getPiece(x, y) == piece.getEnemy()) { piecesToEat++; x += dir.x(); y += dir.y(); }

Si la salida no es por el caso 3, no se come ninguna ficha

if (this.board.getPiece(x, y)!=piece) { piecesToEat = 0; }

Ahora, desde la posición a la que había llegado el cursor, vamos retrocediendo piecesToEat veces.

for (int i=piecesToEat; i>0; i--) { x -= dir.x(); y -= dir.y(); try { this.board.flipPiece(x, y); } catch (InvalidMovementException e) {} // Already handled } return piecesToEat; }

La implementación de willEatPiece es similar.

Aquí está el código completo de las clases Board y Othello. Y aquí el de las clases auxiliares InvalidMovementException, Direction y Piece.

Este proyecto es muy similar a Shogi si no fuera porque en este vamos a hacer más hincapié en la Inteligencia Artificial. El juego tiene en principio dos clases principales

othello.Othello

othello.pieces.Board

y estas dos clases auxiliares que se hacen necesarias al avanzar la implementación.

othello.pieces.Direction. Un ENUM que tiene 8 elementos: NORTH, SOUTH, EAST, WEST, NORTHWEST, SOUTHWEST, NORTHEAST, SOUTHEAST que corresponden a los 4 puntos cardinales más sus diagonales.

othello.pieces.Piece. Un ENUM con 2 elementos: WHITE para la ficha blanca y BLACK para la ficha negra.

Interfaz de Othello

Othello es la clase principal del juego e incluye los métodos:

constructor. sin parámetros

putPiece(char x, int y) : void Coloca una ficha en la posición (x, y) del tablero. En los siguientes casos, el método lanza una excepción InvalidMovementException:

La x está fuera del rango A~H

La y está fuera del rango 1~8

La casilla (x, y) no está vacía y por tanto no se puede colocar una pieza

No se come ninguna ficha y por tanto el movimiento es ilegal

isValidMovement(char x, int y) : boolean. Retorna true si se puede poner una ficha en la posición (x, y) del tablero.

getTurn() : Piece. Retorna la ficha a la que le toca jugar

getBlackPoints() : int. Retorna los puntos que tiene el jugador negro.

getWhitePoints() : int. Retorna los puntos que tiene el jugador blanco.

Interfaz de Board

La clase Board almacena la información de las piezas en el tablero. Tiene los métodos

putPiece(Piece piece, char x, int y) : void Coloca la pieza piece en la posición (x, y) del tablero. En los siguientes casos, el método lanza una excepción InvalidMovementException:

La x está fuera del rango A~H

La y está fuera del rango 1~8

flipPiece(char x, int y) : void Voltea la ficha que haya en la posición (x, y) del tablero. Si no hay nada, no hace nada.

getPiece(char x, int y) : Piece. Retorna la ficha que hay en la posición (x, y) del tablero. Si no hay nada, retorna null.

Mañana martes veremos rápidamente la implementación de estas dos clases, cosa que es bastante sencilla.

Jugamos con los márgenes de #global-header

#global-header { padding:0; margin: -160px 0 11px 0; background: #EEE; @include transition(margin 300ms ease-out); &.opened { margin: 40px 0 11px 0; }

Y añadimos position:absolute a #global-header-header

#global-header-header { position: absolute; }

Vamos a llamar viewport a la pantalla del navegador (voy a nombrar viewport infinitas veces así que quédate con el nombre). Lo primero que decidimos son las dimensiones que tiene la pantalla del navegador. Y ahora muchos estaréis haciéndoos una pregunta:

¿Pero la pantalla del viewport no tiene el mismo tamaño que la pantalla (resolución) de mi móvil?.

Y la respuesta, por increíble que pueda parecer, es NO.

Esto tiene cosas buenas y cosas malas.

Lo bueno

Supongamos que tengo una imagen que ocupa 1600px de ancho y quiero verla en un móvil que tiene una resolución de 320x240

La pantalla del móvil tiene una resolución efectiva de 320x240. Si el viewport tuviera el mismo tamaño, la foto se vería así:

Pero lo que hace nuestro móvil es considerar que el viewport tiene un tamaño mucho más grande, 1600px de ancho. Y luego, lo que hace es adaptar el viewport a la pantalla. Así, la foto se ve entera

Lo malo

Ahora, tenemos una página que está hecha para que se adapte al ancho del móvil, aunque en realidad lo que hacemos es adaptarnos al ancho del viewport.

¿Qué tamaño de viewport considera el móvil ahora?

Lo lógico es que el móvil considere que el ancho del móvil es el ancho del viewport y por tanto haga esto:

Es decir, tome la página que está para "dispositivos con ancho de 320px" y la muestre.

Sin embargo, la respuesta a la pregunta es otra:

El móvil considera el ancho que le de la gana

Supongamos que el móvil considera un viewport de 800px de ancho. Esto quiere decir, que la página se verá como si tuviera 800px de ancho y luego el móvil la adaptará para ajustarla a los 320px de ancho de la pantalla.

Es decir, tanto diseñar la web para que se vea bien en anchos de 320px para que luego se vea como si tuviera 800px de ancho. Qué bien, eh...

La solución

Afortunadamente, tenemos una etiqueta que nos permite decirle al móvil que no coja un viewport cualquiera el que nosotros le digamos que tiene que coger.

Utilizaremos un metadato, es decir, la etiqueta meta de HTML que nos permitirá controlar eso. Aquí tenemos la sintaxis básica de dicha etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>

Aquí lo importante está en el atributo content que tiene todo. En él se encuentran una serie de "sub-atributos" separados por comas que son: width, initial-scale, minimum-scale, maximum-scale y user-scalable. Comencemos.

El atributo width dice qué ancho tiene el viewport. Puede tener un número entero, que serían los píxeles de ancho del viewport. Si queremos que el ancho del viewport sea el ancho de la pantalla del móvil pondremos width=device-width.

El zoom

Además de elegir el ancho inicial, los navegadores tienen una característica: el zoom. Nosotros, con la etiqueta que hemos visto podemos definir cuánto zoom permitimos al usuario.

El atributo initial-scale es el zoom inicial de la página (si lo tiene). En caso de que queramos que la página se vea inicialmente sin zoom pondremos el valor 1 que equivale al 100%.

Los atributos minimum-scale, maximum-scale definen la mínima y máxima cantidad de zoom permitida al usuario. Podemos poner valores desde 0.1 (10%) hasta el que queramos.

El atributo user-scalable=no (con el valor no) impide cualquier zoom al usuario quedándose siempre con el valor que especifiquemos en initial-scale. Omitirlo es como si tuviera el valor yes.

En nuestro caso vamos a utilizar esta configuración.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2>

Es decir

El ancho del viewport coincide con el ancho la pantalla del móvil y vamos a permitir zoom de 100% a 200%.

Existen algunas ocasiones en las que un objeto HTML cambia de estilo. Por ejemplo, con el flag :hover que nos permite definir estilos diferentes si un objeto tiene el cursor encima.

O bien, utilizando las clases como en #daetsam. Recordemos que en dicho caso, al pulsar el botón de "abrir menú", mediante JavaScript, conseguimos que el menú nav#nav-global reciba la clase opened y de ese modo su CSS es diferente.

Sin embargo, los cambios de CSS son instantáneos. Y para que no sean instantáneos existe esta propiedad CSS: transition.

La propiedad transition

La propiedad transition define cuánto tiempo dura un cambio de valor de una propiedad CSS. Lo ilustramos con un ejemplo.

Supongamos que tenemos un CSS tal que así

a { color:#F00; } a:hover { color:#000; text-decoration: underline; }

En dicho código, hemos puesto que los links sean de color rojo y que cuando se ponga el ratón encima, pasen a ser negros y subrayados. Aquí tenéis una muestra.

Si ahora lo que queremos es que el paso de rojo a negro no sea instantáneo, tenemos que usar la propiedad transition así:

a { color:#F00; transition: color 1s; } a:hover { color:#000; text-decoration: underline; }

De este modo, decimos que la transición para la propiedad "color" dure 1 segundo.

El caso #daetsam

Tenemos que tener en cuenta que no todas las propiedades se pueden animar. Por ejemplo display que es la que queremos animar nosotros, no podemos hacerlo. Así que nos las tenemos que ingeniar un poco para mostrar una animación.

Lo que haremos será poner el elemento con el alto mínimo (1px) para que haga la transición con la propiedad height y en el .opened ponemos la altura máxima (210px)

ul { height: 1px; margin: -1px 0 0 0; overflow: hidden; @include transition(all 300ms ease-out); } &.opened ul { height: 210px; }

Un par de aclaraciones:

Hemos usado el mixin de SCSS @include transition para tener la compatibilidad con navegadores webkit y moz.

La palabra ease-out indica el tipo de animación que se aplicará (suave al final). Es decir, que la transición sea fuerte al principio y suave al final. En este link podéis ver la curva que describe la transición. http://cubic-bezier.com/#0,0,.58,1

El resultado se puede ver en http://beta.daetsam.es pero solo desde el móvil (o reduciendo la ventana del navegador)

Como podéis ver en el archivo, de momento es muy simple el código. Únicamente tiene 10 líneas

$(document).ready(function(e) { $('#nav-menu-button').click(function(e) { $('#nav-global').toggleClass('opened'); $('#address-daetsam').toggleClass('opened'); }); $('#nav-global h2').click(function(e) { $(this).parent().toggleClass('opened'); }); });

Lo único que hace este script es abrir y cerrar el menú completo si se hace clic en el icono de menú (#nav-menu-button) o abrir el submenú en caso de que se haga clic en su título (#nav-global h2).

Aún tenemos que hacer unos cambios para mejorarlo:

Que tenga animación, es decir, que no haya un corte entre el estado "oculto" y el "visible". Esto lo podremos hacer mediante CSS o mediante Javascript. Es más limpio con CSS.

Que el botón "menú" cambie a otro icono diferente, por ejemplo en una "X" que indique que el botón se puede usar para cerrar el menú. Para esto hay varias técnicas. Una muy interesante sería una animación SVG, pero sería la opción más compleja.

Plantearemos las opciones para una y otra cosa en próximas ediciones.

He abierto un repositorio en GitHub llamado "playground" que simplemente servirá para hacer experimentos web de HTML5, CSS3 y JS. Está aquí y como veréis el branch principal no es master sino gh-pages.

La primera modificación será el título

<title>{block:PostTitle}{PostTitle}{/block:PostTitle} \ {Title}</title>

Que será de la forma {Título del post} \exacs. Por ejemplo: Algoritmos de ordenación (1/6) - Ordenación por burbuja \exacs.

También eliminamos la descripción del blog del cuerpo.

La cabecera (menús) la vamos a copiar casi tal cual de momento. Más adelante habrá que cambiar los menús y sobre todo los href de los links.

<header id="global-header"> <div id="global-header-header"> <section id="global-logo"> <a href="/"><img src="imgs/logo.png" alt=""></a> </section> <div id="global-menu-toggler"> <a href="#" class="icon-menu"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAVklEQVR42u3ZsRHAIAwEQZVG6LIowR3jhJAx+Wt35hu4UKoCAAC2Gb6rFT4BBBDg3xM+AACAozd8V+4BAgjQO8AIHwAAwFH797h7gAAC9A4wwwcAAFR9rWMijux6svMAAAAASUVORK5CYIIe25e6d688bee46044c70c051b22d0b4b"/></a> </div> </div> <section id="global-nav"> <nav id="global-nav-general"> <ul> <li><a href="#">about</a></li> <li><a href="#">ask</a></li> <li><a href="#">archive</a></li> <li><a href="#">likes</a></li> </ul> </nav> <nav id="global-nav-projects"> <ul> <li><a href="#">#Shogi</a></li> <li><a href="#">#daetsam</a></li> <li><a href="#">#SortingAlgorithms</a></li> <li><a href="#">more...</a></li> </ul> </nav> </section> </header>

Ahora vamos a definir la sección principal y los posts de tipo texto

<section id="global-main"> {block:Posts} {block:Text} <section class="post"> <header class="post-title">{block:Title}<h1>{Title}</h1>{/block:Title}</header> <aside class="post-tags"> {block:HasTags} <ul> {block:Tags} <li><a href="{TagURLChrono}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </aside> <article class="post-body"> {Body} </article> </section> {/block:Text} {/block:Posts} </section>