NorfiPC
NorfiPC » Para Facebook » Estilo de los dibujos y figuras ASCII

Como definir el estilo, color y posición de los dibujos y figuras del arte ASCII



Como lograr que se muestren y representen en el navegador web las composiciones, dibujos y figuras del arte ASCII, así como cualquier caracter o símbolo exactamente del modo y la forma deseada, configurar el color, el tamaño, el espaciado, el tipo de fuente y otros valores. Plantillas para probar el estilo de las obras antes de subirlas a la red.
┊
┊
┊
☆
┊
┊
★
┊
┊
┊
┊
┊
✵
┊
✰
┊
┊
┊
✬
┊
┊
┊
✪
┊
┊
┊
┊
┊
☆
┊
┊
┊
✲ 
┊
★
┊
┊
┊
✰
┊
┊
✯
┊
┊
┊
┊
┊
✵
 
Al crear cualquier dibujo, figura o composición e insertarla en una página web se mostrará usando la fuente y el estilo predeterminado en el navegador que se emplee, en ocasiones puede ser decepcionante comprobar que una composición creada con mucho tiempo y esfuerzo no se ve de la manera correcta.
Es posible si se tiene acceso al código fuente de la página donde se inserte la composición, controlar y establecer exactamente la forma en que el navegador debe representarlo.
El código fuente o código HTML es la estructura de la página web, son líneas de texto que componen el archivo que se encuentra en el servidor web, al cargarlo mediante un navegador este permite su visualización, se escribe generalmente en lenguaje HTML, Javascript, PHP u otros.
Esto puede hacerse si se posee una página web personal, pero también un blog creado en Wordpress o Blogger, e inclusive en páginas hechas en sitios sociales como MySpace. En Facebook es completamente imposible.



Como modificar el estilo de los dibujos ASCII


Generalmente los caracteres que componen una figura ASCII se insertan en el código HTML encerrados entre dos etiquetas o tags: <pre></pre>, se usa esta etiqueta porque lo que se encuentre entre ellas se mostrará con la posición exacta, es decir no es necesario emplear los tags <br> para los saltos de línea ni caracteres en el espacio entre los caracteres.
Para controlar el estilo de una figura insertada dentro cualquier bloque o contenedor, ya sea: <pre>, <div>, <span> podemos usar los estilos CSS, en este caso en línea. Consiste en establecer dentro de la etiqueta del bloque el estilo, que afectará a todo el texto comprendido en el bloque. Esto se logra con el uso del atributo STYLE, que posee a su vez una serie de sub-atributos y parámetros, cada uno de los cuales define una propiedad del estilo del texto, se usa de la siguiente forma:
<pre style="parametro:valor;">
ELEMENTOS ASCII
</pre>
Se pueden emplear una multitud de parámetros con el atributo STYLE, para controlar y definir exactamente el estilo de cualquier elemento, solo trataremos los más utilizados, que son los siguientes: color, font-size, font-family y line-height.
La información sobre todos los parámetros que se pueden usar, puedes leerla en la página: Tutorial y manual básico de los estilos CSS



Parámetros más utilizados para controlar el estilo


Usar el parámetro color

color. Establece el color de los caracteres de dos formas, usando el nombre en inglés del color o el código hexadecimal.
Por ejemplo, para el color rojo se puede usar cualquiera de los dos metodos:
color: red;
color: #FF0000;

• Usando los nombres en ingles solo se pueden emplear una cantidad limitada de colores que son:
red, blue, navy, green, olive, yellow, lime, magenta, purple, cyan, brown, black, gray, teal y white que mostrará el texto en blanco.
• Usando los códigos hexadecimales la variedad es más amplia, expande la tabla completa en el siguiente botón, en ella solo es necesario seleccionar y copiar el numero dentro del color necesario, para usarlo hay que anteponerle al código que se seleccione el carácter #.



Usar el parámetro font-size

font-size. Establece el tamaño de los caracteres con el valor expresado en pixeles. Usando un tamaño de fuente menor que el del resto de la página se logra mejorar la nitidez, en ocasiones al contrario se necesita aumentar el tamaño de caracteres, muy usado en los símbolos Unicode.
Por ejemplo:
font-size:18px;




Usar el parámetro font-family

font-family. Obliga al navegador a usar la fuente que se especifique.
Algunos dibujos para que se muestren de forma adecuada, tiene que emplearse una fuente que utilice el mismo ancho para cada carácter, son las llamadas Monoespaciadas (fixed-width fonts), en los sistemas operativos modernos están disponibles para ese fin entre otras Courier y Courier new. También es posible especificar simplemente la familia, y no el nombre de fuente de la siguiente forma:
font-family:monospace;
De las fuentes proporcionales, (las que ocupan un espacio proporcional al ancho del carácter) más empleadas son las del grupo Sans Serif, que carecen de adornos y son muy sencillas, prácticas y fáciles de visualizar en cualquier composición ASCII, las siguientes están disponibles en todos los Windows: Arial, Verdana, Tahoma y Comic Sans.
Por ejemplo:
font-family:Verdana;
font-family:Comic Sans;
En caso de que se utilice en la composición o dibujo caracteres Unicode, es necesario usar las fuentes que los contengan, en Windows la fuente Symbol incluye varios.


Usar el parámetro line-height

line-height. Interlineado, es el espacio entre líneas definido en pixeles.
Se usa para disminuir o aumentar el espacio entre las líneas de un dibujo, esto puede hacer que se nea con más nitidez la figura. Se expresa su valor en pixeles, el valor normal o predeterminado es el mismo que se utilice en font-size, lógicamente el atributo solo se usa cuando hay necesidad de reducir o aumentar este espacio.
Por ejemplo:
line-height:18px;
Como habrás observado entre el parámetro y el valor se usan : (dos puntos) y al terminar el valor siempre se inserta el carácter ; (punto y coma).



Ejemplos prácticos de la modificación del estilo en figuras ASCII


1- En el siguiente ejemplo se muestra una sencilla figura representada con los valores predeterminados del navegador y a continuación modificando algunos de los valores en la etiqueta del estilo.
       _  _
      (_\/_)
     (_>()<_)
      (_/\_)
        ||
      |\||/|
     __\||/__
       _  _
      (_\/_)
     (_>()<_)
      (_/\_)
        ||
      |\||/|
     __\||/__
       _  _
      (_\/_)
     (_>()<_)
      (_/\_)
        ||
      |\||/|
     __\||/__
Se han usado los siguientes códigos:
<pre style="color:blue;font-size:20px;line-height:20px; font-family:monospace;">
       _  _
      (_\/_)
     (_>()<_)
      (_/\_)
        ||
      |\||/|
     __\||/__
</pre>
<pre style="color:green;font-size:12px;line-height:12px; font-family:monospace;">
       _  _
      (_\/_)
     (_>()<_)
      (_/\_)
        ||
      |\||/|
     __\||/__
</pre>

2- En el siguiente ejemplo se muestra como la reducción de la fuente y del espaciado aumenta la nitidez de un dibujo.
                                          _
                                         / )
                                    .--.; |    _...,-"""-,
                     .-""-.-""""-. /   _`'-._.'   /`      \
                    /'     \      \|  (/'-._/     )        ;
            .-""""-;       (       '--' /-'    _           |
          .'       |        ;    e     /       a  ,       ;
         /          \       |      __.'`-.__,    ;       /
        /            `._     ;    .-'     `--.,__.\    /`
       //|              \     \,-'                /\_.'
      // |               `;.___>              /,-'.
    /`|  /                |`\      _..---\    |    \
    |/  /     _,.-----\   |  \   /`|      |   |\    \
       /    .;   |    |   |   \ /  |      |   | \    )
      |    / |   \    /   |\..' \   \     |   \  \..'
       \../  \.../    \.../ \.../---'     \.../
                                          _
                                         / )
                                    .--.; |    _...,-"""-,
                     .-""-.-""""-. /   _`'-._.'   /`      \
                    /'     \      \|  (/'-._/     )        ;
            .-""""-;       (       '--' /-'    _           |
          .'       |        ;    e     /       a  ,       ;
         /          \       |      __.'`-.__,    ;       /
        /            `._     ;    .-'     `--.,__.\    /`
       //|              \     \,-'                /\_.'
      // |               `;.___>              /,-'.
    /`|  /                |`\      _..---\    |    \
    |/  /     _,.-----\   |  \   /`|      |   |\    \
       /    .;   |    |   |   \ /  |      |   | \    )
      |    / |   \    /   |\..' \   \     |   \  \..'
       \../  \.../    \.../ \.../---'     \.../


3- En el siguiente ejemplo se muestra tres figuras representadas por fuentes diferentes, en este caso: Arial, Tahoma y Verdana respectivamente, como se observa existen diferencias.
             /´¯/)              (\¯`\
            /    //               \\    \
           /    //                 \\    \
     /´¯/    /´¯\           /¯ `\    \¯`\
  / /   /    /    / |_      _|  \    \    \   \ \  
( (    (    (    / )  )   ( (  \    )    )    ) )  )
 \                \/   /    \    \/                /
  \                  /        \                   /
    \              (           )                 /
             /´¯/)              (\¯`\
            /    //               \\    \
           /    //                 \\    \
     /´¯/    /´¯\           /¯ `\    \¯`\
  / /   /    /    / |_      _|  \    \    \   \ \  
( (    (    (    / )  )   ( (  \    )    )    ) )  )
 \                \/   /    \    \/                /
  \                  /        \                   /
    \              (           )                 /
             /´¯/)              (\¯`\
            /    //               \\    \
           /    //                 \\    \
     /´¯/    /´¯\           /¯ `\    \¯`\
  / /   /    /    / |_      _|  \    \    \   \ \  
( (    (    (    / )  )   ( (  \    )    )    ) )  )
 \                \/   /    \    \/                /
  \                  /        \                   /
    \              (           )                 /


4- Un último ejemplo, se usa adicionalmente el parámetro background-color para dar el color de fondo y se emplean caracteres Unicode.
╔╗
║║╔═╦╦╦═╗
║╚╣║║║║╩╣
╚═╩═╩═╩═╝
El código usado es:

Puedes conocer cómo usar los caracteres Unicode para crear hermosas composiciones en varias páginas de este sitio:
Como usar e insertar caracteres en Facebook
Como insertar caracteres y símbolos Unicode en documentos y páginas web.



Como insertar la composición ASCII en el código fuente o HTML de una página web


Si publicas tus dibujos o figuras en un blog en Wordpress o Blogger, lo ideal es probarlos en tu equipo local antes de subirlo a la red.
Para eso crea una pequeña plantilla con la que podrás comprobar de forma exacta la forma en que se mostrarán e ir modificando los valores del estilo en caso de ser necesario.
Utiliza el siguiente código para crear la plantilla o descarga el archivo HTML en el link mas abajo.
plantilla para dibujos ASCIIDescarga plantilla para dibujos ASCII

A continuación haz lo siguiente:
1- Arrastra el archivo plantilla-ascii.html al Bloc de notas para editarlo.
2- Copia y pega la composición o figura en el espacio entre las etiquetas <pre></pre>.
3- Sin cerrar el Bloc de notas guarda los cambios.
4- Dos clic en el archivo y comprueba como se muestra.
5- Inserta o modifica los valores: color, font-size, line-height y font-family en la etiqueta style.
Al finalizar y quedar completamente complacido con el estilo escoge en Wordpress o Blogger "Ver HTML" y pega todo el contenido entre las etiquetas <pre></pre> de tu plantilla incluyéndolas.


Páginas relacionadas



Las figuras del arte ASCII mostradas como ejemplos han sido tomadas de las siguientes páginas:
http://www.geocities.com/SoHo/7373/new.htm
http://fsymbols.com/text-art/

Usa el siguiente formulario para buscar en otras páginas de este sitio frases, imágenes o fotos de amor.




 
Anterior |  Subir  | Siguiente