¡La Guía SVG de JetPunk! 2/6

Buenaaas. Esta es la segunda parte de seis de la guía de SVGs en español, asique bueno, aquí aprenderás como coordinar tus SVGs con JetPunk a profundidad.

Otros Links Útiles:

•Poner puntos en un mapa de JetPunk (Dot Placer)

•Selector de Colores de Google

•Referencias de CSS

Otros Idiomas:

•🇬🇧🇺🇸 The JetPunk SVG guide por... Stewart?

•🇫🇷 Le Guide SVG pour JetPunk por Elboy

•🇮🇹 Guida SVG di JetPunk por Crem

•🇵🇱 Poradnik SVG na JetPunk por youtubeplayer

Una guía para aprender a conectar tus quizzes con los SVGs y para aprender a usar el Selector de SVGs. También discutiremos los estándares de JetPunk en los SVGs y en cómo formatearlos y estandarizarlos. Finalmente, al fondo hay una guía completa para crear quizzes Mapas cliqueables.

•Añadir un SVG a un quiz

•Hacer a los SVG iluminarse en un Quiz

•El selector de SVGs

•Los estándares de JetPunk en los SVGs

•Cómo funcionan los quizzes con mapa cliqueable.

•Hacer un quiz con mapa cliqueable

•Añadir flechas a los quizzes con mapa cliqueable.

Añadir un SVG a tu quiz es bastante fácil. Simplemente ve al Paso 4 en un quiz de texto o al Paso 3 de los quizzes con mapa y cliquea el botón amarillo "SVG Options:

Esto te llevará al panel de opciones SVG, donde puedes hacer varias cosas, entre las que está el añadir un SVG a tu quiz. Para añadir un SVG tienes dos opciones:

•Elige un SVG de JetPunk (véase "El Selector de SVGs" debajo)

•Subir tu propio SVG customizado

Como ya dicho, si deseas aprender más sobre elegir un SVG de entre los que JetPunk te ofrece y sobre los Estándares de JetPunk sobre SVG, puedes leer más sobre eso debajo. Por ahora asumiremos que quieres subir un SVG de los tuyos.

Para subir tu propio SVG, simplemente cliquea el botón verde "Upload", elige el archivo de la pestaña emergente y súbelo con el botón azul.

Si tienes problemas subiéndolo, dirígete a la página de Problemas comunes de la guía.

Una vez que lo hayas subido exitosamente, se mostrará una preview de tu SVG al fondo del panel de opciones. Puedes remover el SVG cliqueando el botón rojo y descargarlo usando el botón gris.

Ahora cliquea el "<< Back" de arriba de la página para aplicar los cambios y añadir el SVG al quiz. ¡Ya lo tienes! Has añadido un SVG a tu quiz. (Recuerda guardar tus cambios)

Ahora viene la parte técnica: añadir los IDs y/o clases para que tus paths se iluminen en tu quiz.

Para aprender cómo añadir los IDs y las clases, véase Pasos Básicos. Asumiré que ya las tienes listas. Puedes atar una respuesta a una path para activar

Añadir el ID o clase asociados con cada respuesta es simple, simplemente escríbelo en la primera columna de la izquierda en el Paso 2 al crear tu quiz. Tiene que ser la primera columna de la izquierda, y tienes que escribir el id exactamente como aparece en el editor XML y en Inkscape.

Si no estás seguro del nombre exacto de una ID o un path, ve al panel de opciones SVG (el botón dorado); entonces, mientras tengas un SVG en tu quiz, podrás ver y cliquear el botón "Get SVG IDs". Este mostrará las clases en todos los paths del SVG que tienes actualmente adjunto. Se verá algo como esto:

Como puedes ver, todos los paths encontrados tendrán sus IDs mostradas en la columna izquierda y sus clases en la columna derecha. Aunque JetPunk separe las clases con comas por claridad, normalmente son separadas con espacios.

Los ids deben ser únicos, para que al escribirlos durante el gameplay se iluminen correctamente. No solo puedes adjuntar paths a tus respuestas, ¡sino que también clases! Esto te permite que múltiples paths se iluminen con una sola respuesta.

—Nota del traductor: aprendí esto mientras traducía la guía jaja.

Por ejemplo, si dos paths comparten la clase “water”, en lugar de asignar cada uno por separado en el Paso 2, puedes usar esa clase directamente. Entonces al escribir "water" durante el gameplay, todos los paths que tengan el ID o clase "water" se iluminarán en verde. Es importante tener en cuenta que el editor no distingue entre IDs y clases, así que puede ser que haya paths que se iluminen sin querer.

Si no quieres subir un SVG personalizado, y lo que quieres es usar un SVG estándar de JetPunk, puedes hacer eso con el Selector de SVGs.

Simplemente ve al panel de Opciones SVG presionando el botón dorado como ya dicho en los pasos 3 o 4, entonces toca el botón azul "Select JetPunk SVG". Esto abrirá el selector.

El selector muestra una lista de SVGs estándar de JetPunk (explicado debajo) que puedes elegir libremente y usar en tu quiz. Algunos mapas solo se mostrarán en distintos tipos de quizzes, ya que el formato estándar de ancho del mapa no cabe en un quiz de cliquear el mapa, así que en su lugar se muestra una versión más angosta.

Si quieres elegir uno de estos, simplemente cliquea el nombre del mapa que quieres usar y el botón verde para seleccionarlo; esto te llevará de vuelta al panel SVG. Para salir de ahí, cliquea el botón "<<Back".

¡Y ya has añadido el SVG a tu quiz! Para añadir IDs para los SVGs estándares de JetPunk, véase la siguiente sección.

En JetPunk tenemos varios mapas estándar que son libres para que todos los usuarios los añadan a sus quizzes, y que los descarguen y modifiquen.

Todos estos SVGs están estandarizados, lo que quiere decir que los path están definidos para que sean fáciles de entender. Estos son los posibles IDs con los que te encontrarás en un SVG estándar de JetPunk:

us - todos los países tienen un código ISO (compuesto de dos letras minúsculas) como su id único.  Estos también tienen la clase border y country, que los colorea acorde con los estándares de JetPunk para los SVG.

us-c - todas las ciudades capitales tienen el código ISO de su país junto con el sufijo "-c". Para países con múltiples capitales, ej. Sudáfrica, los IDs son "za-c1", "za-c2", etc., así pueden ser activados por separado. Aun así, estas tendrán la clase "za-c", para que se puedan activar todas a la vez si deseado.

mc-d - más prominente en el mapa europeo, esto es usado para el punto naranja de los microestados.

fj-w - esto es usado cuando un país está compuesto de su territorio y del agua poco profunda alrededor de este (llamado light water), el id usará el código de dos letras ISO, pero el agua poco profunda tendrá una clase para que también cambie de color cuando sea adivinado. (Si solo hay agua poco profunda y no hay tierra, entonces usa el código ISO).

NY - este es para los estados de EE.UU., usando las abreviaturas en mayúsculas.

Para encontrar el código ISO de un país, puedes ir a esta página de Wikipedia: ISO 2-Letter Codes, esta también tiene los códigos de estados más pequeños que no son considerados países.

Añadir ids a tu quiz para el SVG es simple. Simplemente ve y escribe el nombre del país en una casilla de la columna de respuestas en el paso dos, y cliquea el botón "Add Path IDs". Elije el tipo de respuesta que estás buscando, entonces este intentará hacer coincidir los ids con los países en cuestión, ej. si tienes la respuesta "Estados Unidos" cliquear el botón pondrá como el ID en la columna de ids "us". Puedes revisar cualquier cambio antes de que se haga y puedes alterarlo posteriormente de manera sencilla.

Esto funciona con todos los idiomas destacados de JetPunk, y los type-ins también son automáticamente configurados (ej. escribir "Congo" para la República Democrática del Congo también funciona).

Incluso si no estás usando un SVG de los que ofrece JetPunk, si tu SVG tiene el mismo formato y esquema de nombres que los estándares, entonces puedes cliquear el botón debajo de "Advanced" en el Paso 2 del editor de quizzes para añadir path ids.

Si acabas de llegar a JetPunk tendrás curiosidad en cómo funcionan exactamente estos quizzes. Bueno, ¡es bastante simple!

Se te muestra una versión iluminada del mapa (normalmente en azul), y tienes que elegir la respuesta desde la caja escroleable. Por ejemplo, si Francia está marcada en azul, escrolea hasta encontrar "Francia" y haz clic en ella.

Puedes elegir si hacer el quiz en el orden fijado por el creador o si tomarlo en un orden aleatorio, cambiando de "Fixed order" (orden fijado) a "Random order" (orden aleatorio).

Nótese que las respuestas siempre deberían estar en nombre alfanumérico.

También puedes usar las flechas en la pantalla o las del teclado para cambiar entre las respuestas; así, si no sabes una, puedes volver a ella después.

Esta sección aspira a ayudar a aquellos usuarios que quieran hacer quizzes con un mapa cliqueable.

Lo primero que notarás sobre este tipo de quizzes es que suelen tener un nombre simple. Lo normal es añadir "Haz clic" al nombre de tu quiz; ejemplo "Haz clic en las provincias españolas con un mapa" o "Haz clic en un país válido A-Z"

Lo siguiente, el resto de Paso 1 te parecerá familiar con otros quizzes; y, de hecho, la única diferencia es el botón de "More Options". Esto te ayudará a hacer quizzes con mapas randomizados, simplemente cambiando a "Random" y escribiendo el número de respuestas que quieres que se muestren, y entonces cliqueas "Okay". Los quizzes con mapas randomizados se presentarán al usuario con una selección de respuestas del Paso 2.

En el Paso 2 hay varias cosas que debes hacer antes de esto:

1. Añade las respuestas que se mostrarán a los usuarios en las celdas verdes.

2. Añade los correspondientes path ids o clases en la columna de la izquierda, para ayuda con esto véase "Hacer que los SVGs se iluminen en un Quiz"

3. Ordena las respuestas en el orden que quieres que sean iluminadas. Aunque esto no afecte a un quiz randomizado, para quizzes normales con mapas necesitarás estas respuestas en el orden que deseas que se muestren a los usuarios, usualmente en orden geográfico, por ejemplo, correspondiendo al orden de las respuestas en el mapa. El orden tiene que ser diferente del alfabético para poder distinguirlo del orden mostrado al usuario durante el gameplay.

Para ayudar con el paso 2 hay algunas opciones dentro de "Advanced", por ejemplo "Shuffle" que ordena aleatoriamente las respuestas en el Paso 2 para asegurar que es diferente del alfabético. También puedes cambiar de orden, importar y exportar las respuestas, igual a cómo se hace en los quizzes de texto. Sin embargo, esto es una herramienta avanzada, así que no se recomienda a principiantes.

Ahora podemos ir al Paso 3.

En el Paso 3, puedes añadir tu SVG al pulsar el botón dorado. Véase las otras secciones de esta guía, si se necesita ayuda, vaya a "Añadir un SVG a un quiz".

También hay una gran variedad de opciones disponibles:

•Selector de ancho - Esto te permite cambiar el ancho del selector de respuestas, esto es útil si tienes largas respuestas que no quieres que se contraigan.

•Selector de altura - La opción por default es "Auto", la cual define la altura de la caja de respuestas o la del SVG. También se puede ingresar una personalizada.

•Selector de texto - Esto customizará la cabecera "Select Answer" que aparece arriba; esto es útil para poder poner esta cabecera en español.

•Selector de estilo - Puedes customizar el color de fondo de la cabecera y del texto.

•Ancho del quiz - Así como con los quizzes de texto, puedes cambiar el ancho del quiz, útil para evitar que los SVGs anchos no rebosen la pantalla.

•Tipo de orden - Hay tres opciones, una alfabética y dos numéricas. Este es el orden en el que las respuestas aparecen al usuario en la caja de respuestas, no el orden en el que las respuestas son mostradas y respondidas. Este orden tiene que ser diferente que el del Paso 2.

Una vez que terminaste con Paso 3, puedes revisar tu quiz antes de enviarlo. Si estás feliz con cómo ha quedado, ¡publica tu quiz y celebra!

Si llevas un tiempo en JetPunk, habrás notado que suelen aparecer flechas o círculos para destacar ciertas respuestas, y son sorprendentemente fáciles de hacer.

El círculo es parte de una función llamada "city-selector" y se añade automáticamente a todos los quizzes, así que despreocúpate. Mientras que tus paths sean círculos o elipses, aparecerá un city-selector a su alrededor. Esto es muy útil para ciudades y microestados, ya que estos suelen ser círculos.

La parte de las flechas es ligeramente más compleja:

Lo mejor para poder tener las flechas es robar copiar el SVG de África, ya que incluye las flechas listas. Lo esencial para que esto funcione es lo siguiente:

1. Todas las flechas tienen que tener la clase "map-hidden", lo que hace que permanezcan ocultas hasta que su path se resalte. Esto funciona en todo JetPunk, así que también se puede usar para los quizzes de texto.

2. Cada flecha tiene que tener el ID o la clase del path que quieres resaltar. Como en el ejemplo de arriba, si quieres que se muestre la flecha solo cuando aparece Santo Tomé (con ID "st"), entonces pon como clase a la flecha "st" para que funcione. Recuerda que los paths pueden tener múltiples clases al separarlas con espacios.

¡Y eso es todo! Siempre que estos requisitos se cumplan, ¡las flechas funcionarán correctamente! También puedes modificar y crear tus propias flechas con estilos extravagantes y colores chillones, solo necesitas tomar en cuenta estos dos puntos.

•Ir al inicio de página