Una empresa de juegos tiene un blog dedicado al ajedrez y se pone en contacto con WebMalagaDesign, porque necesita el diseño de un tablero de ajedrez en HTML y CSS para poder mostrar jugadas. Ahora sólo le solicita un borrador para ver como queda y que se muestren algunos peones blancos y negros.
Alberto habla con Gloria y plantean el HTML y el CSS muy estructurado para que sea fácilmente escalable y poder incluir nuevas jugadas en un futuro. Para ello han llegado a las siguientes conclusiones:
En el siguiente CODEPEN.IO se vé el resultado final.
1
Planteamiento
2
Nudo
* Tabla 8x8
* Cabeceras que muestren las columnas(letras) y las filas(números) con un formato diferente.
* Las celdas negras y las celdas blancas se indicarán con clases CSS con un color de fondo ( blanco o negro )
* Cada celda tiene que estar referenciada con identificadores CSS, por ejemplo, id=”A7”
* Cuando se quiera poner una figura del ajedrez en el tablero se indicará asociando a la clase de la celda una clase especial que tendrá el nombre de la figura y su color. Por ejemplo, si se quiere poner un peón blanco, la clase sería class=”peon_blanco”.
* La clase con la figura tendrá la imagen de fondo asociada a una imagen con la figura en png
• Este último punto Gloria no lo entiende, porque las celdas ya tienen una clase asociada. ¿Cómo se le puede asociar otra? Alberto le comenta que a una misma celda se pueden aplicar dos clases. Simplemente hay que indicarle las dos clases.
Por ejemplo: td {class=”blanco peon_blanco”}
3
Desenlace
Calle Martinez, 24
29004 Málaga
Email: webmalakadesign@gmail.com
Phone: 952.23.89.__
Fax: 952.23.89.__