Un meme (versión Web)
Se presentan tres (3) versiones de un meme, o la evolución de un meme en tres (3) fases hasta un estado satisfactorio (en cuanto a resultado y proceso).
En este caso resultó más conveniente una versión Web, al menos para satisfacer las expectativas pretendidas, en cuando a resultado final, y lo que implica el proceso.
I. Meme Generator
En internet hay miles de sitios con funcionalidades o servicios para “generar memes”.
Hay de diferente tipo y/o con diferentes opciones, con imágenes famosas predefinidas o personalizadas, con textos y estilos predefinidos o con algunas personalizaciones.
Esta versión que se muestra fue generada en un sitio de los mencionados, subiendo la foto deseada y escribiendo el texto que se visualizaría, tratando de dar algo de estilo, temática o contexto con las opciones disponibles.
II. Editores de imagen y texto
Hay miles de programas/software tanto en internet/on-line como instalables, de escritorio o móviles que pueden ser usados como editores de imagen y texto.
Esta versión del meme fue realizada con uno de esos editores, que dió resultados más cercanos a las expectativas, en cuanto a colores, estilos y posicionamiento de los textos y fuentes tipográficas usadas; esto con el enfoque de capturar la inspiración, trasmitir la idea/impresión/información deseada o necesaria, y ser coherente con el conexto del meme en sí.
En los textos se usaron dos (2) fuentes tipográficas, tres (3) colores, y mejor posicionamiento que con la versión de generador.
III. Versión Web
Teniendo la intención de crear un meme, y después de haber ensayado y generado u obtenido unas versiones iniciales del meme aceptables, faltaban detalles para alcanzar a satisfacer las expectativas intuidas/pensadas, como los cinco (5) listados a continuación:
- Tipos de fuentes tipográficas acordes o que aludan al sentido o significado del texto. Por ejemplo una caligrafía estilo script para el texto que dice y alude a “Black Speech”, y algo tosco o brusco para el texto que dice y alude a “Mordor”.
- Colores, estilización y efectos de los textos y fuentes tipográficas, que transmitan la impresión o idea referente al contexto del meme y esos textos. Por ejemplo un manejo de colores y escala de colores en rojo y naranja para los textos del medio y abajo, y tonalidad azul para el texto de arriba. También referente a esto mismo, efectos (de animación) tipo fuego para el texto referente a “Mordor”, la típica tierra volcánica y árida de la temática tratada por el meme.
- Manejo de tonos/matices y escalas de los colores en general del ambiente o entorno del meme (no sólo de los textos), en este caso se usan los tres (3) colores primarios: amarillo, azul y rojo.
- Posicionamiento adecuado de los textos (aunque la opción de Editores también ofrece buenas funcionalidades para este requerimiento).
- No tener que lidiar con transparencias y formatos de imágenes, ya que al no disponer de una fuente tipográfica para cierta versión o formato del meme, y necesitar situarla o usarla en otro sitio, había que manejar el recorte y transparencia de las imáganes con los textos estilizados (aunque sin “efectos”, al ser imagánes estáticas) al pasarlos de un procesamiento a otro, con el objetivo de lograr más cercanía con la idea general del meme en elaboración.
Entonces construir esta versión (Web) del meme implicaba los siguientes pasos.
- Estructura y/o contenido HTML básico.
- Configuración de las tres (3) fuentes tipográficas utilizadas.
- Posicionamiento de párrafos de texto.
- Agregar efectos y animación a las fuentes tipográficas de los textos, y otros retoques.
El contenido y organización, es decir el layout o disposición, o en general la estructura básica que va a llevar la página web (en este caso el meme) se escribió con las etiquetas o tags esenciales del estándar HTML.
Se usan tres (3) fuentes tipográficas, cada una configurada de diferente manera o con diferente método, esto con fines educativos.
- La primera fuente tipográfica es la denominada “Audiowide”. Es un (1) archivo de extensión
.ttf
descargado y guardado en un directorio local de la misma página web. Se usa en el primer texto, del tope/arriba que dice “Cuando tu gato Aprende”. - La segunda fuente tipográfica es la denominada “Vujahday+Script”. Es obtenida/traída remotamente o desde internet usando la etiqueta/tag o elemento HTML “link”, The External Resource Link element, en la sección “head”, The Document Metadata (Header) element, del archivo
.html
. Se usa en el segundo texto, de la mitad, que dice “Black Speech”. - La tercera fuente tipográfica es la denominada “Rubik+Dirt”. Es la CSS at-rule “@import” que invoca/llama la API (Application Programming Interface) remota u on-line de Google Fonts en el archivo de estilos personalizados
.css
para traer/obtener la fuente y ser utilizada. Se usa en el tercer texto, de abajo/fondo, que dice “de Mordor xD”.
REFERENCIAS
- https://fonts.google.com/
- https://developers.google.com/fonts/docs/getting_started
- https://fonts.google.com/specimen/Audiowide
- https://fonts.google.com/specimen/Vujahday+Script
- https://fonts.google.com/specimen/Rubik+Dirt
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
- https://developer.mozilla.org/en-US/docs/Web/CSS/@import