Share
La evolución de las tecnologías de internet nunca deja de sorprender. Aparentemente a diario, los creativos y talentosos están ideando nuevos conceptos y técnicas. Con los navegadores modernos adoptados a un ritmo mayor, sistemas como CSS3 Cada vez son más viables para su uso en proyectos de todos los tamaños. Claramente, esto se puede ver al observar los nuevos servicios que surgen en línea como TypeKit. Conceptualmente, si deconstruimos una fuente a sus elementos básicos, podemos hacer uso de esta tecnología para cosas que no sean tipo, iconos.
Durante un corto período de tiempo, los desarrolladores comenzaron a producir sitios web con poca consideración por el consumo de ancho de banda. HTML y CSS donde era restrictivo y Adobe Flash era un lienzo abierto para que los diseñadores y desarrolladores rellenaran animaciones y diseños complejos. Esto dio lugar a algunos sitios extremadamente pesados de ancho de banda, todos recordamos algunos. Esos fueron los días previos a la proliferación de teléfonos móviles inteligentes..
Con los teléfonos inteligentes que acceden a Internet con mayor frecuencia, el ancho de banda y las velocidades de carga de la página han vuelto repentinamente a la vanguardia. Afortunadamente, los avances en HTML, CSS, y JavaScript lo han hecho todo posible. Central para la velocidad de la página web y la capacidad de respuesta es el número de HTTP Solicita una carga de página que debe realizar. Los navegadores modernos limitan el número de solicitudes a un solo servidor. La especificación W3C HTTP 1.1 lee
"Un cliente de un solo usuario NO DEBE mantener más de 2 conexiones con cualquier servidor o proxy. Un proxy DEBE usar hasta 2 * N conexiones a otro servidor o proxy, donde N es el número de usuarios activos simultáneamente. Estas pautas están destinadas a mejorar HTTP Los tiempos de respuesta y evitar la congestión ”.
Una técnica que se ha hecho cada vez más popular es el uso de CSS sprites. CSS sprites están diseñados para reducir el número de HTTP solicita al servidor web combinando muchas imágenes más pequeñas en una sola imagen más grande y definiendo un nivel de bloque CSS Elemento para mostrar solo una porción definida de la imagen más grande. La técnica es simple, pero ingeniosa..
Las fuentes en su nivel molecular más básico son una serie de glifos vectoriales empaquetados en un solo "archivo de glifos".
CSS3 ha introducido en el mundo del desarrollo web la capacidad de incrustar fuentes con el @cara cara declaración. Sin lugar a dudas, este avance en las tecnologías de Internet es una de las etapas más emocionantes e importantes de nuestra breve historia. Con los desarrolladores capaces de incrustar fuentes de su elección, los diseñadores pueden producir diseños que se representarán de manera mucho más consistente de una plataforma a otra, acercando el arte del diseño interactivo a su primo de impresión.
Si observamos más de cerca la tecnología detrás de una fuente, podemos obtener una mejor comprensión de cómo se pueden usar y desplegar. Las fuentes en su nivel molecular más básico son una serie de glifos vectoriales agrupados en un solo "archivo de glifos". Luego podemos hacer referencia a cada glifo por su código de carácter correspondiente. Teóricamente, es muy similar a la forma en que hacemos referencia a una matriz en casi cualquier lenguaje de programación, a través de un par clave / valor.
Con esto en mente, los glifos a los que hacemos referencia pueden ser realmente cualquier imagen de un solo color basada en vectores. Esto no es nada nuevo, todos hemos visto Dingbats y Webdings. Son dos ejemplos de fuentes que no son de tipo, es decir, una serie de imágenes basadas en vectores compiladas en un solo archivo de fuente..
Con la llegada de la incrustación de fuentes y la comprensión de que las fuentes son esencialmente una serie de simples glifos vectoriales, comencé a experimentar sobre cómo usar este formato para mi ventaja.. Conceptualmente, si coloco todos los íconos requeridos para un sitio en particular en una fuente personalizada, entonces podré usar esos íconos en cualquier lugar del sitio con la capacidad de cambiar el tamaño y el color, agregar fondos, sombras y rotación, y casi cualquier cosa. más CSS permitirá texto. La ventaja añadida de ser un solo CSS como un sprite HTTP solicitud.
Para ilustrar, he compilado una nueva fuente con algunos de los grandes íconos de Brightmix.
He utilizado las ranuras en minúsculas para los iconos simples y las ranuras en mayúsculas para el mismo icono en un tratamiento circular.
Para usar mi nuevo Icon Pack, primero tendré que exportar mi conjunto de fuentes como una serie de archivos de fuentes diferentes (.eot, .woff, .ttf, .svg) para que sean compatibles con todos los navegadores. El tema de incrustación de fuente y conversión de formato de archivo se trata en otro lugar, por lo que evitaré una explicación detallada aquí. sin embargo, el CSS se vería algo como esto.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: formato local ('IconPack'), url ('iconpack.woff') ('woff'), formato url ('iconpack.ttf') ('truetype'), url ('iconpack.svg # IconPack') ('svg'); Una vez incrustado, ahora tengo un conjunto completo de iconos en formato vectorial para hacer referencia. Para hacer referencia a un icono, simplemente necesito un estilo que incluya el Familia tipográfica de “IconPack”.
una
El ejemplo anterior representaría una estrella y es el uso más básico del concepto de Icon Pack, sin embargo, no es muy intuitivo desde una perspectiva de desarrollo, no SEO amistoso, ni se degrada con gracia en el caso de no-CSS apoyo.
Para remediar la situación, voy a incluir un :antes de pseudo-elemento y envolver el contenido en una lapso etiqueta.
estrella
Ahora, la estrella se agrega a la pantalla y puedo cambiar la visibilidad del texto mediante el uso de espectáculo y esconder clases El resultado es una referencia fácil. CSS Clase que se degrada con gracia y está optimizada para los motores de búsqueda. Para todo mi conjunto de iconos, puedo escribir algo como abajo.
icono de pantalla
El beneficio aquí es que el icono se escalará con el tamaño de fuente. De hecho, todos los iconos escalarán y mantendrán una claridad perfecta..
Hasta ahora, solo hemos tocado la punta del iceberg, nada innovador aquí, aunque puede que empiece a ver las posibilidades. Un escenario real sería la sustitución del lista-elemento-estilo. Como se adjunta al uso de una imagen, ahora podemos usar un ícono vectorial de nuestro Paquete de iconos. El beneficio aquí es que el icono se escalará con el tamaño de fuente. De hecho, todos los iconos escalarán y mantendrán una claridad perfecta..
Dado que los iconos ahora están colocados en nuestra página como si fueran texto, podemos aplicar cualquier CSS Estilo para ellos sin descargar ningún otro activo. Podríamos aplicar color, tamaño de fuente, sombra de texto, etc y hacer uso de la :flotar pseudo-elemento para el mouse sobre efectos, todo con un solo glifo.
Como con cualquier cosa, hay algunas limitaciones desafortunadas. A partir de este escrito, no hay manera de mostrar un solo glifo con varios colores. Ha habido algunos trucos de CSS para obtener gradientes sobre texto en vivo, sin embargo, las formas complejas con diferentes colores en un solo glifo son una limitación. Dicho esto, hay formas de aproximar glifos de varios colores mediante la segmentación de las partes de un gráfico vectorial en glifos individuales y luego ensamblarlos y colorearlos en la página a través de CSS.
Otro uso interesante es un simple CAPTCHA validación. Al reemplazar los glifos del alfabeto con números, los usuarios verán números, pero el código de la página será letras. Algunos cálculos simples para traducir entre los dos, y usted tiene un fácil de leer CAPTCHA.
Para ilustrar mejor estos conceptos, he reunido una página de muestra compuesta por dos HTTP solicitudes: el código de la página y un único Icon Pack. También se incluye la capacidad de escalar el tamaño de fuente de la página para demostrar claramente la flexibilidad de incrustar glifos vectoriales. El logotipo de la empresa, navegación, imágenes, y CAPTCHA Están todos usando glifos. Tenga en cuenta, el CAPTCHA incluido aquí es sólo para ilustración. Para usar esto en un sitio de producción, recomendaría la validación en el lado del servidor con un algoritmo dinámico como el de JavaScript..
Esta página de muestra también demuestra el uso de un glifo como fondo de "repetición" escalable. Seré el primero en admitir que esta implementación es, en el mejor de los casos, una piratería. Sin embargo, creo que demuestra la flexibilidad y versatilidad del Icon Pack..
Claramente, esto abre algunas posibilidades. Los diseñadores pueden desarrollar Icon Packs para la venta, las entidades corporativas pueden alojar un solo Icon Pack para ser usado en todos los medios corporativos. Los diseñadores de plantillas pueden distribuir fácilmente múltiples opciones de color de la misma plantilla sin tener que guardar y exportar un solo archivo adicional. Los diseñadores web pueden escalar fácilmente los sitios existentes para que sean compatibles con dispositivos portátiles. Además, esta técnica expone nuestros iconos a la DOM habilitando efectos animados de tipo Flash con tu JavaScript favorito API.
Como uso y soporte del navegador para CSS3 penetra aún más, los paquetes de iconos pronto tendrán un gran impacto en la entrega de contenido, lo que fomentará las tendencias de dispositivos múltiples, escalables y ligeros, que están empezando a ser una necesidad..
