Mi idea principal para esta actividad fue unir dos materias que estudio, el cuál es el japonés y frontend, es por ello que quise hacer la tabla de hiragana. Dentro del japonés se usan distintos sistemas de escritura, los cuales son los silabarios katakana y hiragana, y el kanji.
Da click aquí si quieres saber más acerca del hiragana
En esta ocasión decidí realizar el silabario hiragana.
Paso 1: Crea el documento html
a. En Visual Studio Code puedes escribir html:5 y en automático se desplegarán las etiquetas necesarias en el documento.
Paso 2: Creando las tarjetas del silabario
Dentro de la etiqueta body crearemos el contenido de la página.
a. El titulo lo agregamos dentro de las etiquetas h1 , puedes escribir lo que tu quieras, en mi caso solo escribí “HIRAGANA”.
b. Creamos un section con la clase llamada container.
c. Dentro de este section crearemos un div por cada sílaba con la clase llamada tarjeta.
Paso 3: Estilizar la página
a. Escribimos las etiquetas style despues de las etiquetas title. Es aquí dónde le daremos estilo a la página.
b. Dentro de la etiqueta style, si deseamos podemos configurar el color del fondo con el elemento body y dentro de este elemento configuramos el background del color que deseamos.
c. Si queremos también podemos configurar el elemento h1 así como lo realicé yo. Para ponerlo en el centro de la página utilicé text-align:center;
Paso 4: Creando display de tipo flexbox
a. En este caso, nuestro contenedor será el section que creamos en el paso 2. Mandamos a llamar a la clase container de nuestro section para configurarlo como un display de tipo flexbox.
margin: 0 auto; //Establece las propiedades de margen izquierdo y margen derecho del elemento automáticamente, lo que el navegador logra dando a ambos márgenes el mismo valor y de esa manera que nuestro flexbox se encuentre centrado.
flex-flow: column wrap-reverse; //La tabla de hiragana se estudia de arriba a abajo y de derecha a izquierda, por lo tanto la primer columna inicia del lado derecho. Por lo tanto utilizamos column wrap-reverse, lo que hace es que los items se acomoden por columnas, y al utilizar wrap-reverse hace que inicie esta columna del lado derecho.
b. Las etiquetas div con clase tarjeta que creamos en el paso 2, serán los items del flexbox.
Paso 5: Estilizar tarjetas vacías
Hasta el momento el resultado de nuestra tabla de hiragana es el siguiente:
Aquí hay un pequeño problema. Antes de explicarlo me gustaría que entendieran un poco más del silabario. Dentro de la escritura y fonética japonesa, hay unas silabas que no tienen. Ejemplo, existe la silaba “ya” (や), “yu” (ゆ), “yo”(よ), pero la silaba “ye” y “yo” no existen.
Así como el abecedario tiene un orden, también el silabario hiragana. Normalmente encontrarán este tipo de tablas para empezar a estudiarlo:
Si nos damos cuenta, el silabario se divide en columnas conforme a las consonantes (a excepción de la primera -de derecha a izquierda- que son las vocales), y se divide en filas de acuerdo a las vocales. Por lo tanto, en el caso de las columna “Y”, hay espacios ya que no hay esas silabas en el idioma japonés. Es el mismo caso para la columna “W”, y la columna “N”, (este ultimo es la única consonante del silabario).
Supongo que ahora entienden cuál es el problema, no podemos terminar de plasmar la falta de silabas, ¿Cómo crearemos esos espacios dentro de nuestra tabla?
La respuesta es sencilla…
a. Crearemos un div para estas tarjetas “vacías”, y agregaremos la clase sintarjeta
b. En css, el div con clase .sintarjeta la vamos a estilizar para que ocupe el mismo espacio que las otras tarjetas. Pero utilizaremos el atributo visibility: hidden para que esta tarjeta no se visualice.
Paso 6: Utilizando pseudoclases
No se trata de solo tener una tabla de hiragana y ya, sino que también haya un dinamismo con el usuario final. Por eso, utilizaremos las pseudoclases.
Como podemos observar, en el gif de arriba, al pasar el mouse en la tarjeta, esta se hace más grande y aparece una sombra, esto para crear un efecto que se levanta la tarjeta.
a. Queremos que la tarjeta de hiragana haga el efecto, por lo tanto utilizaremos la clase tarjeta con la pseudoclase _hover, el cuál hará que la clase que se encuentra dentro se active cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).
¡¡¡HEMOS LLEGADO AL FINAL DE NUESTRO TUTORIAL!!!
Espero que les haya gustado, y si creen que me faltó explicar algo, o utilice una terminología incorrecta porfavor coméntenlo para corregirlo. Además de que me ayudaría ese tipo de retroalimentación.
Tengo pensado que a medida de que vaya tomando más cursos y obtenga mayor conocimiento, estaré mejorando esta tabla ya que deseo que tenga funcionalidades más avanzadas para el aprendizaje del hiragana.
¡SALUDOS!
esta muy bueno Andrea