puestos a hacerlo... hagámoslo con estilo

SVG: Herramientas y programas de creación y limpieza

SVG: Herramientas y programas de creación y limpieza

Affinity Designer Vector art & design

Una pequeña recopilación de programas y herramientas para la creación de SVG´s y su posterior limpieza y optimización. Porque además de las grandes suits o programas editores de gráficos, como Ilustrator o CorelDraw, ahí fuera hay aplicaciones específicas para el manejo de SVG´s, tanto en línea como de escritorio.

Pero como la mayoría de estos programas de creación y edicción de SVG´s no priorizan su uso en web el código que generan es manifiestamente mejorable. Para ello nada como un segundo grupo de aplicaciones complementarias de ellas con las que depurar y limpiar el código obtenido.

Da tu opinión

El autor y su obra: "Scalable, libro sobre SVG" de @jorgeATGU

El autor y su obra: Scalable, libro sobre SVG por @jorgeATGU

SVG es el acrónimo de Scalable Vector Graphics, un formato para crear archivos vectoriales en dos dimensiones. En estos momentos SVG está en la versión 1.1 y se espera que SVG 2 se convierta en recomendación a finales de 2014.

Este libro es una introducción bastante amplia a todos los elementos que tenemos disponibles en la especificación de SVG 1.1, espero que al final de este libro seas capaz de interpretar esa maraña de código que obtenemos al exportar SVG desde programas vectoriales como Inkscape, Illustrator y Sketch. También que seas capaz de crear por tu cuenta tus propios archivos SVG ayudado solamente de un editor de texto y tu imaginación.

Leer Artículo Da tu opinión

Sticky footer o pie siempre abajo: qué es. Viejas y nuevas formas de logralo

Sticky footer o pie siempre abajo Ampliado con el método Flexbox

¿Qué es el "Sticky footer" o pie siempre abajo?

Una estructura o forma de presentar los contenidos de una web. Su presentación más sencilla consiste en una sección principal y un pie de página.

En ocasiones se presenta también con un encabezado. Pero para su realización este tercer elemento es secundario y prescindible como elemento característico ya que tranquilamente puede estar englobado (estar dentro de) en la sección principal.

Leer Artículo Da tu opinión

SVG apuntes para comenzar: el viewport y el viewBox

De entrada, SVG no es un dibujito de rayas que puedes estirar o encoger a voluntad. SVG es toda una especificación web, con estatus de 'recomendación' su versión 1.1 desde 2011 y en desarrollo la actualización a la 2.

De ella dicen sus desarrolladores que es:

SVG es un lenguaje de gráficos* Web. SVG define el marcado y APIs para crear imágenes estáticas o dinámicas, con capacidad de ser interactivas y animadas, incluyendo efectos gráficos. Puede ser estilizado con CSS, y se combina con HTML

* Una matización personal. Creo que sería más preciso hablar de "lenguaje de representación web" que de "gráfico".

Leer Artículo 3 .-Comentarios

Variables Css módulo nivel 1. Sintaxis actual Julio 2014

Variables Css módulo nivel 1. Sintaxis actual Julio 2014

Dice el consorcio a modo de introducción:

Los documentos o aplicaciones pueden contener un montón de CSS. Muchos de los valores en el archivo CSS será datos duplicados, por ejemplo, los colores que conforman la identidad del sitio. La alteración de estos datos puede ser ardua y propensa a errores, ya que están dispersos por todo el archivo CSS (o los varios), y no son fáciles de encontrar y cambiar.
Este documento presenta una familia de propiedades definidas por el usuario conocidas como "propiedades variables", que permiten al autor asignar valores arbitrarios a una propiedad con un nombre identificativo y, a continuación, utilizar esos valores en los valores de otras propiedades en otras partes del documento. Esto hace que sea más fácil de leer archivos de gran tamaño, los valores tan aparentemente arbitrarios, ahora tienen nombres informativos, lo que hace más fácil modificar el Css y es menos propenso a errores, ya que sólo hay que cambiar el valor una sola vez, donde se define la variable, y el cambio se propagará a todos los usos de esa variable de forma automática.
Leer Artículo 7 .-Comentarios

Vademecum de todas las propiedades de estilos del SVG

Todas las propiedades de estilos de los SVG: propias y de Css

Relación de todas las propiedades Css que aplican a los SVG con enlace directo al punto de las especificaciones que desarrolla a cada una.

Recojo tanto las propias de SVG y que define la especificación de los vectores gráficos como aquellas "generales" de la especificación de Css (2.1 y 3) que son aplicables a los SVG.

Leer Artículo Da tu opinión

Dos formas de seleccionar hermanos precedentes y numeración congruente

Selector de hermanos precedentes con float o direction y numeración congruente
Las estrellas precedentes a la seleccionada cambian su apariencia

¿Utilizando sólo Css sería posible estilizar los hermanos precedentes a aquel que recibe algún evento, ya sea un :hover o si se trata de inputs hacerlo de forma sencilla e independiente del número de ellos? Esto es, sin necesidad de declarar tantas reglas Css como inputs haya y cada una con su pseuclase checked correspondiente.

La respuesta breve y concisa es Sí. Podemos.

Y antes de seguir, para que tú mismo lo veas en funcionamiento, el pen que lo demuestra. Fíjate que haciendo click sobre una de las estrellas cambia además de la apariencia de ella misma la de las estrellas anteriores a la que recibe el click. Y además que la numeración es ascendente (del 1 al 5).

Leer Artículo 1 .-Comentario