{"id":41,"date":"2022-06-14T02:52:53","date_gmt":"2022-06-14T02:52:53","guid":{"rendered":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=41"},"modified":"2022-06-20T20:20:35","modified_gmt":"2022-06-20T20:20:35","slug":"como-se-genero-una-fuente-de-iconos-con-fontello-para-el-multimedia-tutoriales-de-raspberry-pi","status":"publish","type":"post","link":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=41","title":{"rendered":"\u00bfC\u00f3mo se gener\u00f3 una fuente de iconos con Fontello, para el multimedia Tutoriales de Raspberry Pi?\u00a0"},"content":{"rendered":"\n

La utilizaci\u00f3n de iconos en p\u00e1ginas web es un aspecto esencial para el establecimiento de un correcto lenguaje visual, \u201cLos iconos funcionan como condensadores de informaci\u00f3n, porque los reconocemos como la representaci\u00f3n de un concepto y son f\u00e1cilmente memorizables.\u201d (Manrique Huacacolque, 2020, p. 7), pero el uso inadecuado de las im\u00e1genes dentro de una web puede generar lentitud a la hora de la carga.<\/p>\n\n\n\n

Utilizar un n\u00famero limitado de iconos en formato de imagen no tendr\u00eda que generar dificultades, solamente con cuidar su peso y dimensiones, no deber\u00eda presentarse ning\u00fan problema relevante. Sin embargo, si el mismo icono o imagen va a ser empleado en diferentes versiones de color y dimensiones, dentro de un mismo proyecto, esto limitar\u00eda la optimizaci\u00f3n. En otras palabras, se realizar\u00eda la tarea, pero no de forma eficiente y tampoco utilizando la menor cantidad de recursos posibles.<\/p>\n\n\n\n

En el proceso de producci\u00f3n del multimedia Tutoriales de Raspberry Pi<\/a>,<\/em> realizado por el Programa de Producci\u00f3n Electr\u00f3nica Multimedial, de la Direcci\u00f3n de Producci\u00f3n de Material Did\u00e1ctico, de la Universidad Estatal a Distancia (Costa Rica), se necesitaba emplear la misma imagen en diversas dimensiones y colores, por lo que, para no comprometer el perfeccionamiento del proyecto, se gener\u00f3 una fuente de iconos con Fontello. Es decir, se convirtieron los iconos en letras, lo que permiti\u00f3 cambiarles el color o el tama\u00f1o f\u00e1cilmente, con el uso de instrucciones en CSS (siglas en ingl\u00e9s de Cascading Style Sheets<\/em>, hojas de estilo en cascada, en espa\u00f1ol).<\/p>\n\n\n\n

Fontello es una herramienta para la creaci\u00f3n de fuentes tipogr\u00e1ficas, que trabaja bajo licencia SIL. Esta licencia fue creada por SIL International e indica que un software<\/em> es libre con c\u00f3digo abierto, es empleada para tipos de letra Unicode (sistema de codificaci\u00f3n de caracteres usado en las computadoras para almacenar e intercambiar textos). Adem\u00e1s, Fontello brinda la posibilidad de generar iconos nuevos o de utilizar cualquier colecci\u00f3n existente de su plataforma (Fontello, s.f.; SIL International, s.f.).\u00a0<\/p>\n\n\n\n

La creaci\u00f3n e implementaci\u00f3n de una colecci\u00f3n de iconos, para el multimedia Tutoriales de Raspberry Pi<\/a>,<\/em> fue muy sencilla. Los pasos que se siguieron se listan, a continuaci\u00f3n:<\/p>\n\n\n\n

1. Ingreso a Fontello: <\/strong>se accedi\u00f3 a la direcci\u00f3n electr\u00f3nica https:\/\/fontello.com\/\u00a0<\/p>\n\n\n\n

2. Carga de los iconos nuevos: <\/strong>en la parte superior derecha de la pantalla, aparece un bot\u00f3n con un icono de \u201cllave francesa\u201d, al hacer clic se despliega un men\u00fa vertical, se eligi\u00f3 la primera opci\u00f3n \u201cImport\u201d,<\/em> que permite la carga de nuevos iconos. Se recomienda utilizar archivos vectoriales, con el formato SVG (siglas en ingl\u00e9s de Scalable Vector Graphics,<\/em> gr\u00e1ficos de vectores escalables, en espa\u00f1ol).<\/p>\n\n\n

\n
\"<\/figure>\n<\/div>\n\n\n

3. Configuraci\u00f3n de los valores de los iconos: <\/strong><\/strong>una vez cargados los iconos, aparecen en el \u00e1rea llamada \u201cCustom Icons\u201d,<\/em> al colocar el cursor sobre la imagen, se ver\u00e1 un bot\u00f3n en forma de l\u00e1piz, al hacerle clic se abre una ventana emergente que contiene los valores configurables del icono, entre esos valores se encuentra el valor \u201cDefault Code (hex)\u201d, este es muy importante, ya que ser\u00e1 el identificador del icono dentro del c\u00f3digo CSS.<\/p>\n\n\n

\n
\"Bot\u00f3n<\/figure>\n<\/div>\n\n
\n
\"Opciones<\/figure>\n<\/div>\n\n\n

4. Descarga de la fuente tipogr\u00e1fica:<\/strong> <\/strong>primero se debieron seleccionar los iconos que se incluir\u00edan dentro de la fuente tipogr\u00e1fica. En la esquina superior derecha de la pantalla, est\u00e1 el bot\u00f3n \u201cDownload Webfont\u201d,<\/em> que muestra la cantidad de iconos que se incluir\u00e1n en la fuente. Al pulsar este bot\u00f3n, se descargar\u00e1 la fuente tipogr\u00e1fica, en una carpeta comprimida, en formato ZIP.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

5. Incluir la fuente tipogr\u00e1fica en el multimedia Tutoriales de Raspberry Pi<\/a>:<\/em><\/strong> <\/strong>primero, se debe descomprimir la carpeta Zip, ya que contiene una subcarpeta llamada \u201cCSS\u201d, otra denominada \u201cfont\u201d, un archivo \u201cconfig.json\u201d, otro \u201cdemo.html\u201d y, por \u00faltimo, \u201cREADME.txt\u201d. En el proyecto solo se incluyeron la subcarpeta \u201cCSS\u201d, la subcarpeta \u201cfont\u201d y el archivo \u201cconfig.json\u201d.<\/p>\n\n\n\n

A continuaci\u00f3n, se especificar\u00e1n los pasos que se siguieron, para incluir la fuente tipogr\u00e1fica al multimedia Tutoriales de Raspberry Pi:<\/a><\/em><\/p>\n\n\n\n

1. Primero, se incluy\u00f3 la fuente por medio del c\u00f3digo CSS, en la hoja de estilo del proyecto. Para tener una gu\u00eda sobre este proceso, tome en cuenta el ejemplo que le ofrece Fontello, en el archivo \u201cdemo.html\u201d:<\/p>\n\n\n\n

@font-face { \n\n      font-family: 'fontello'; \n\n      src: url('..\/font\/fontello.eot?630262'); \n\n      src: url('..\/font\/fontello.eot?630262#iefix') format('embedded-opentype'), \n\n      url('..\/font\/fontello.woff?630262') format('woff'), \n\n      url('..\/font\/fontello.ttf?630262') format('truetype'), \n\n      url('..\/font\/fontello.svg?630262#fontello') format('svg'); \n\n      font-weight: normal; \n\n      font-style: normal; \n} <\/code><\/pre>\n\n\n\n
2. Se cre\u00f3 una clase en CSS, en la hoja de estilo del proyecto, para configurar el estilo de la fuente Fontello:<\/p>\n\n\n\n
.ico-fontello{ \n\n      font-family: \"fontello\"; \n\n      font-style: normal; \n\n      font-weight: normal; \n\n      speak: none; \n\n      text-decoration: inherit; \n\n      width: 1em; \n\n      text-align: left; \n\n      font-variant: normal; \n\n      text-transform: none; \n\n      line-height: 1.22em; \n\n      margin-left: 5px; \n\n     -webkit-font-smoothing: antialiased; \n\n     -moz-osx-font-smoothing: grayscale; \n } <\/code><\/pre>\n\n\n\n
3. En el header<\/em> o encabezado del multimedia Tutoriales de Raspberry Pi<\/a>,<\/em> se hizo referencia al archivo \u201canimation.css\u201d, que se encuentra en la subcarpeta \u201cCSS\u201d, que est\u00e1 dentro de la carpeta en la que se descarg\u00f3 la tipograf\u00eda de Fontello:<\/p>\n\n\n\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/animation.css\"> <\/code><\/pre>\n\n\n\n
4. Como \u00faltimo paso, recuerde que para cada icono se configur\u00f3 con un valor \u201cDefault Code (hex)\u201d desde Fontello, si no recuerda estos valores puede ir a la subcarpeta \u201cCSS\u201d, al archivo \u201cfontello-codes.css\u201d, donde podr\u00e1 ver la lista de iconos, con su respectivo valor. Al conocer este valor, la inclusi\u00f3n de cada icono es muy sencilla:<\/p>\n\n\n\n
<div id=\"boton_buscar><p class=\"ico-fontello\">&#xe801;<\/p><\/div> <\/code><\/pre>\n\n\n
\n
\"Captura<\/figure>\n<\/div>\n\n\n
<i class=\"ico-fontello\" style=\"font-size: 140px; color: #722E66;\">&#xe800;<\/i><\/code><\/pre>\n\n\n
\n
\"Captura<\/figure>\n<\/div>\n\n\n
Fontello permite, de forma sencilla y r\u00e1pida, crear una fuente a partir de iconos, para redimensionar los caracteres sin perder la calidad. Adem\u00e1s, es posible proteger los iconos personalizados, porque al convertirlos en una fuente tipogr\u00e1fica se evita la descarga directa.<\/p>\n\n\n\n
Como es una herramienta gratuita, no hay ning\u00fan obst\u00e1culo para utilizarla. Adicionalmente, es muy completa, ya que la descarga incluye un demo (un archivo de demostraci\u00f3n), que sirve de gu\u00eda para incluir la fuente en los proyectos.<\/p>\n\n\n\n
Aunque existen otras t\u00e9cnicas mucho m\u00e1s complejas, para incluir iconos dentro de un sitio o aplicaci\u00f3n web, recomendamos esta opci\u00f3n porque es muy f\u00e1cil, implica muy pocos pasos y solo demanda conocimientos b\u00e1sicos en desarrollo web.<\/p>\n\n\n\n
Otras herramientas, similares a Fontello, son: Font Awesome e IcoMoon.<\/p>\n\n\n\n
Los invitamos a ver el multimedia Tutoriales de Raspberry Pi,<\/em> en la siguiente direcci\u00f3n web: https:\/\/multimedia.uned.ac.cr\/pem\/raspberry_pi\/<\/a><\/p>\n\n\n\n
Referencias:<\/strong> <\/h2>\n\n\n\n
Fontello. (s.f.). Sitio oficial<\/em>. https:\/\/fontello.com<\/a><\/p>\n\n\n\n
Manrique, J. G. (2020). \u00bfQu\u00e9 formato usar? Ventajas del uso de <\/em>Material Design a la hora de crear una p\u00e1gina.<\/em> https:\/\/hdl.handle.net\/20.500.12637\/343<\/a>\u00a0<\/p>\n\n\n\n
SIL International. (s.f.). SIL Open Font License (OFL). <\/em>https:\/\/scripts.sil.org\/cms\/scripts\/page.php?id=OFL\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
La utilizaci\u00f3n de iconos en p\u00e1ginas web es un aspecto esencial para el establecimiento de un correcto lenguaje visual, \u201cLos iconos funcionan como condensadores de informaci\u00f3n, porque los reconocemos como la representaci\u00f3n de un concepto y son f\u00e1cilmente memorizables.\u201d (Manrique Huacacolque, 2020, p. 7), pero el uso inadecuado de las im\u00e1genes dentro de una web […]<\/p>\n","protected":false},"author":8,"featured_media":67,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[30,25],"ppma_author":[38],"class_list":["post-41","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","tag-experiencias","tag-textual"],"authors":[{"term_id":38,"user_id":8,"is_guest":0,"slug":"rulatep","display_name":"Rommy Cristina Ulate Paniagua","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/77d407803fbae62d5e2e39615312d8a3617e21fd7af977d086f919351e142999?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=41"}],"version-history":[{"count":45,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions\/259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/media\/67"}],"wp:attachment":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=41"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fppma_author&post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}