¡Buenas a todxs! 🙂
Os dejo por aquí paso por paso como realizar la el texto mecanografiado y su personalización con código html.
Lo tenéis paso a paso por escrito y al final, tenéis el vídeo.
Está utilizado gracias a la página scape.enepe.fr que tienen un montón de recursos con script y nos facilitan mucho la tarea, y luego un poco de mi granito de arena para personalizar el texto, ya que soy un poco friki y sé algo de htm, y también en traducirlo.
Y sigo buscando la adaptación a los breakouts y escape room educativos.
TEXTO MANUSCRITO
Lo primero que tenemos que hacer es descargarnos el Genially de Scape- Tapuscrit, para poder copiar y pegar el código html creado por ellos.
Os voy a enseñar como entender cada página de ese Genially.
1º. Tiene las páginas de texto con retardo que debéis copiarlo TODO y personalizar el texto con cuidado.
Es útil cuando no quieres que aparezca el texto al momento, pero al no tener el código html, no se puede modificar mucha cosa y por ello, prefiero el código tal cual.
2º. Encontráis ejemplos de textos personalizados.
2º. Encontráis ejemplos de textos personalizados.
El primero es el que mejor me funciona a mi, y en el que vamos a profundizar en este tutorial.
Hay otros ejemplos que os invito a ver en el Genially que os tenéis que descargar, y que también explico en el vídeo.
Pues, llegó la hora os voy a comentar como ampliar un poco más en este código que os acabo de enseñar.
Para personalizar el texto, el color, la fuente, el tamaño, la posición, el estilo…tenéis que saber unos códigos que se insertan dentro de este código que nos proporciona Scape.
PERSONALIZACIÓN TEXTO:
- Tamaño del texto: font-size:__px (se debe escribir en números el tamaño del texto deseado)
- Color de texto: color:______ (Se debe escribir el código del color o el color en inglés) Después, os enseñaré una página, en la cual podréis encontrar los códigos y explicaré como insertarlos.
- Negrita: font-weight:bold. (Si lo quieres normal, en vez de bold, escribe normal).
- Cursiva: font-style:italic. (Si lo quieres normal, también escribe normal en vez de italic).
- Tipo de letra: font-family:verdana (He puesto de ejemplo el Verdana, pero se podría poner cualquier tipo de letra instalada en vuestro ordenador)
- Ajuste del texto: text-align:center (Center es para cuando lo queréis centrado, si no en vez de center ponéis right (a la derecha), left (a la izquierda), justify (ajustado).
Tiene tamaño 25, color turquesa, negrita, cursiva, en Verdana y alineado al centro.
CÓDIGO DE COLORES PARA EL TEXTO:
En la página web HTMLCOLORCODES, encontráis todo tipo de colores específicos.
Por ejemplo, el turquesa del ejemplo anterior, está seleccionado dentro de la gama cromática, y después seleccionamos el código que es el primero que nos encontramos arriba o en el panel de la derecha (detrás siempre de un #)
