Ciber Geek > Diseño

Diseño

Iconos PNG y SVG gratis en IcoMoon

IcoMoon es un sitio que los sacará de algún apuro alguna que otra vez, se trata de un sitio que recopila gran cantidad de iconos SVG y PNG, son fáciles de navegar, muchos son gratis y se puede elegir como descargarlos.

Descargar configurable  en formato, color y tamaño

Al realizar la descarga se puede elegir el color (en hexa), el tamaño (altura), si incluye o no el PNG además del archivo SVG, y para hacer sprites CSS en caso de que se seleccionen mas de un icono.

descargar iconos svg y png

Descarga de iconos

Es como tocar el cielo con las manos, ya que nos ahorramos de armar los sprites para CSS, y no necesitamos ningún otro software para adaptar el SVG al tamaño que necesitamos, ya que el archivo PNG que se adjunta tiene el tamaño y color que seleccionamos.

Además, existen varias librerías diferentes, solo hay que mirar bien el tipo de licencia que tienen, pero mas allá de éso, hay varias que son gratis y muy interesantes.

Maquillando gráficos en D3.js

Siguiendo con la escueta introducción a D3.js, en ésta ocasión la idea es hacer un poco mas lindo el gráfico feo y aburrido del tutorial anterior, para ello se le va a agregar color y etiquetas para identificar las barras.

Llega la primavera, llegan los colores

El atributo fill es el que le da color, literalmente, a los elementos SVG, su uso es igual al de otros atributos, como los que dan las coordenadas o el tamaño de los elementos, obviamente, los valores que se le asignan deben ser colores validos, pudiendo usar varias sintaxis, RGB, Hexadecimal o nombres explícitos. Con D3 asignar el valor de los atributos es siempre tan sencillo como .attr(‘atributo’, valor), magia!

Pero ¿y esa barra de que es?

Las etiquetas hacen de nuestro mundo un lugar menos caótico (?) ¿que hubiese sido de Monk sin etiquetas? Agregar etiquetas es simple gracias a, sí, a D3, aunque puede que necesiten un poquito de matemática.

Para las etiquetas vamos a necesitar texto, por suerte SVG viene armado hasta los dientes (?), y tenemos elementos para ésto (text). Con D3, además, agregar un elementos de texto es similar a lo que se hizo con las barras, solamente cambia el tipo de elemento, obviamente, y algunos atributos.

Barras etiquetadas

Okey, eso es …¿útil?

Ahora hay que ajustar la posición de las etiquetas, lo que no es tan difícil.

Lo primero es centrar la posición de las etiquetas, en éste momento la posición está dada por la siguiente formula

i*(svgwidth/datos.length)

Para centrarlas debemos modificar la formula para centrarla dentro de la barra, o sea que deberíamos sumarle a la posición la mitad del ancho de las barras, que es (svgwidth/datos.length)/2, por lo que la formula de la posición respecto a x queda:

i*(svgwidth/datos.length)+(svgwidth/datos.length)/2

Pero como no podía ser de otra manera, tenemos un problema nuevamente, ya que si el texto es largo no va a queda centrado, pero a no desesperar, también hay solución para eso.

Denle la bienvenida al atributo text-anchor, éste atributo lo que hace es alinear el texto respecto a un punto dado, tiene 4 configuraciones posibles : start, middle, end e inherit.

  • Start: El texto comienza en el punto dado.
  • Middle: El “medio” del texto queda en el punto dado.
  • End: El texto termina en el punto dado.
  • Inherit: Hereda la configuración del elemento padre.

En caso de que no se especifique el valor por defecto es start.

Ésto es lo que llevamos hasta ahora.

etiquetas centradas text-anchor

La etiqueta está en orden!

Por ultimo, algo que depende del gusto de cada uno, pero en mi caso prefiero que el texto éste contenido dentro de la barra, pero en realidad hay que considerar nuestros datos antes de tomar ésta decisión.

Encerrado y colorido

Los últimos toques antes de dar por terminada la obra, ojo, ésto sigue, aún nos faltan los ejes y la normalización.

Para llevar las etiquetas al interior de las barras vamos a jugar con la posición respecto a y, es tan simple como sumarle un valor determinado a la posición ¿por qué determinado? Porque va a depender del tamaño de las etiquetas, sino podemos terminar con la mitad del texto adentro de la barra y el resto afuera.

Probablemente alguien se haya perdido ¿Restarle? ¿Con que te drogás, Tomás? Ésto se debe a la forma en que maneja los ejes SVG, y pasa con casi todo lo relacionado a gráficos en la PC, la esquina superior izquierda se considera la coordenada (0,0), cuando estamos acostumbrados de las matemáticas a trabajar con el origen de coordenadas ((0,0)) ubicado en la esquina inferior izquierda, pero bueno, detalles, imaginen que estamos en el plano y nuestro gráfico se encuentra en el cuarto cuadrante.

Los colores, como en el resto de los elementos SVG se dan con el atributo fill.

etiqueta coloridas d3js

Etiqueta blanca!

Finalmente, el código, mi único héroe en éste lío.

Y el Fiddle para que se pongan manos a la obra.

En el código del texto pueden ver que hay varios atributos que no comenté en el tutorial, en realidad ésos atributos son “compartidos” con CSS y son bastante sencillos.

  • font-family: nos permite asignar la fuente, se pueden separar con comas varias fuentes diferentes en caso de que el usuario no las tenga instaladas en su PC.
  • font-size: es el tamaño de la fuente en pixels, en éste caso.

Pueden ver que al atributo y del texto se le suman 15 para “meter” las etiquetas adentro de las barras, y también le restamos 1 al width de las barras para que estén separadas.

Espero les haya sido de utilidad éste tutorial, cualquier consulta o sugerencia es bienvenida.

 

Introducción a D3.js

D3.js es una librería hecha en Javascript que trabaja sobre SVG, HTML y CSS, y tiene como principal objetivo la generación de gráficos a partir de datos. No es la única opción, ya que hay varias, por ejemplo Highcharts, pero ésta ultima tiene la desventaja de no ser gratuita para uso comercial.

Hay que considerar que al usar SVG la compatibilidad con navegadores obsoletos es un tema complicado, por ejemplo el caso de IE8 y versiones anteriores, aunque por suerte la participación de mercado de éstos ha bajado mucho en los últimos tiempos.

D3 es capaz de hacer muchas cosas, no! mas cosas todavía, pero en éste tutorial vamos a empezar con lo básico para “dejarlo andando”.

Primeros pasos, digo, gráficos

Para los que hayan usado jQuery la sintaxis de D3 les va a parecer muy familiar, pero si no tienen experiencia previa con Javascript no se preocupen, es bastante sencillo. Lo recomendable es que lean un poco sobre el lenguaje para hacer mas fácil las cosas, pero como casi todo, con confianza y ganas se puede aprender.

Para usar D3.js solo basta incluirlo entre los recursos que necesita el sitio para funcionar, ésto es muy sencillo y solo requiere del uso de la etiqueta script de HTML para que el navegador cargue la librería.

El código para crear el gráfico más simple y aburrido de la historia. También pueden jugar con el ejemplo en éste fiddle.

Vamos por partes, dijo Jack

datos, se trata de los datos que va a usar la librería para generar los gráficos. En éste caso están incluidos en el script, pero lo normal es mediante cargarlos dinamicamente mediante AJAX. Además, D3 ofrece funciones para lidear con representaciones comunes de datos, como CSV, que son valores separados con comas.

Obviamente, no es necesario que la variable se llame datos, pueden ponerle el nombre que quieran. Otro detalle, lo normal es que nuestros datos estén guardados en un array (vector).

d3.select(‘algo’), se trata de una función de D3 que nos permite seleccionar el elemento en el cual queremos embeber el SVG, o lo que sea que fuésemos a embeber (D3 permite manipular cualquier elemento de HTML, dejemos ésto para mas adelante).

append(‘svg’), es la función responsable de “embeber” el elemento dentro del otro elemento que seleccionamos, lo que en realidad sucede es que select selecciona el elemento que queremos como objetivo, y las funciones encadenadas, o sea las que se llaman luego del select mediante .nombreFuncion trabajan sobre el resultado de la función anterior. En éste caso append añade un nodo hijo al elemento con id gráfico. En éste punto es cuando podemos decidir embeber otros elementos, por ejemplo párrafos (p) si tuviésemos un array con frases.

attr, tiene como objetivo asignar un valor a las propiedades de los elementos. En el caso del SVG le damos valor a los atributos alto y ancho.

Ahora que ya tenemos creado nuestro SVG vamos a añadir elementos, en éste momento es cuando los hechizos y la magia de D3 nos iluminan.

selectAll(‘rect’), éste método nos devuelve una selección vacía a la cual se le van a “añadir” (bind) los datos. En éste caso vamos a generar barras, por éso el nombre del elemento a seleccionar, rect.

data(datos), “enchufamos” los datos, lo que sucede acá es magia negra, se cuentan los elementos y se parsean, de ahora en mas, todos los métodos que llamemos se van a ejecutar tantas veces como elementos tenga el conjunto de datos que pasamos.

enter(), por fin, vamos a “unir” los datos con los elementos, es en éste paso donde el hechizo se ejecuta. Ahora falta especificar el tipo de elemento, lo que se hace en el paso siguiente.

append(‘rect’), se especifica el tipo de elemento que se quiere añadir al SVG.

El resto de los métodos son asignaciones de valores a los diferentes atributos de cada elemento creado.

Las funciones anónimas

Como ven en las asignaciones de valores a los atributos, las funciones anónimas son utilizadas para acceder a los valores de los datos y al indice del array. El primer parámetro siempre es el dato y el segundo el indice, pueden usar el nombre que quieran, no es necesario que los llamen d e i.

En el ejemplo se usan por demás, ya que solo son necesarias cuando necesitamos información de los datos, como su valor para calcular la altura, o del indice, para calcula la posición respecto del eje x para que no se superpongan los elementos.

Dentro de las funciones pueden hacer lo que quieran, lo que deben tener en cuenta es que deben devolver algo que se corresponda con el atributo que están usando, devolver una letra cuando están definiendo una altura va a dar un error.

Su mejor amiga, en las buenas, y sobre todo en las malas

La consola de Javascript de los navegadores es uno de los mejores elementos para aprender sobre los detalles de D3, y mas aún cuando tenemos errores, ya que enseguida pueden ver que está provocando el error y en que linea del código se encuentra.

Para acceder a ésta en general deben hacer clic derecho en algún lugar de la pagina y seleccionar “Inspeccionar elemento”, después van a la pestaña consola y voilá. Otra forma, al menos en Chrome, es con CTRL+MAYUS+j.

Lo bueno se acaba

La idea es que ésta sea la primer entrega, en la próxima vamos a hablar sobre como hacer nuestros gráficos un poco mas bonitos.

Significado de los colores

Significado de los colores, la Teoría de los colores

Cuando hacemos paginas web hay que tener en cuenta muchas cosas, sobre todo si estamos haciendo sitios de venta online o de marketing de afiliados, los colores muchas veces modifican la conducta de la persona al momento de interactuar con un objeto, que puede ser un botón, imagen o link. Si bien utilizar los colores correctos no nos va a asegurar alcanzar un CTR 100%, son esas pequeñas cosas que hacen que un sitio tenga una ventaja competitiva respecto al resto.

colores significado teoria del color

 

Blanco

El blanco está asociado a la luz, la bondad, la inocencia, la pureza y la virginidad. Es considerado como el color de la perfección.

El blanco significa seguridad, pureza y limpieza. A diferencia del negro, el blanco por lo general tiene una connotación positiva. Puede representar un inicio afortunado.

En heráldica, el blanco representa fe y pureza.

En publicidad, el blanco está asociado con la frescura y la limpieza porque es el color de la nieve. En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.

Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imágenes vestidas con ropas blancas.

El blanco está asociado con hospitales, médicos y esterilidad. Puede usarse por tanto para sugerir para anunciar productos médicos o que estén directamente relacionados con la salud.

A menudo se asocia a con la pérdida de peso, productos bajos en calorías y los productos lácteos.

Amarillo

El amarillo simboliza la luz del sol. Representa alegría, felicidad, inteligencia y energía.

El amarillo simula entrar en calor, nos provoca alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida.

El amarillo puro y brillante es un reclamo de atención, por lo que es frecuente que los taxis sean de este color en algunas ciudades. En exceso, puede tener un efecto perturbador, inquietante. Es conocido que los bebés lloran más en habitaciones amarillas.

Cuando se sitúan varios colores en contraposición al negro, el amarillo es el primero que llama la atención. Por eso, la combinación amarillo y negro es usada para resaltar avisos o reclamos de atención.

En heráldica el amarillo representa honor y lealtad.

En los últimos tiempos al amarillo también se le asocia con la cobardía.

Es recomendable utilizar amarillo para provocar sensaciones agradables, alegres. Es muy adecuado para promocionar productos para niños y para el ocio.

Por su eficacia para atraer la atención, es muy útil para destacar los aspectos más importantes de una página web.

Los hombres normalmente encuentran el amarillo como muy desenfadado, por lo que no es muy recomendable para promocionar productos caros, prestigiosos o específicos para hombres. Ningún hombre de negocios compraría un reloj caro con correa amarilla.

El amarillo es un color espontáneo, variable, por lo que no es adecuado para sugerir seguridad o estabilidad.

El amarillo claro tiende a diluirse en el blanco, por lo que suele ser conveniente utilizar algún borde o motivo oscuro para resaltarlo. Sin embargo, no es recomendable utilizar una sombra porque lo hace poco atrayente, pierde la alegría y lo convierte en sórdido.

El amarillo pálido es lúgubre y representa precaución, deterioro, enfermedad y envidia o celos. El amarillo claro representa inteligencia, originalidad y alegría.

Anaranjado

El anaranjado combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alegría, el sol brillante y el trópico.

Representa el entusiasmo, la felicidad, la atracción, la creatividad, la determinación, el éxito, el ánimo y el estímulo.

Es un color muy caliente, por lo que produce sensación de calor. Sin embargo, el anaranjado no es un color agresivo como el rojo.

La visión del color anaranjado produce la sensación de mayor aporte de oxígeno al cerebro, produciendo un efecto vigorizante y de estimulación de la actividad mental.

Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para comunicarse con ellos.

Color cítrico, se asocia a la alimentación sana y al estímulo del apetito. Es muy adecuado para promocionar productos alimenticios y juguetes.

Es el color de la caída de la hoja y de la cosecha.

En heráldica el anaranjado representa fortaleza y resistencia.

El color anaranjado tiene una visibilidad muy alta, por lo que es muy útil para captar la atención y subrayar los aspectos más destacables de una página web.

El anaranjado oscuro puede sugerir engaño y desconfianza.

El anaranjado rojizo evoca deseo, pasión sexual , placer, dominio, deseo de acción y agresividad.

El dorado produce sensación de prestigio. Significa sabiduría, claridad de ideas, y riqueza. Con frecuencia el dorado representa alta calidad.

Rojo

El rojo representa el fuego y la sangre, por lo que esta asociado al peligro, la guerra, la energía, la fortaleza, la determinación, así como a la pasión, al deseo y al amor.

Es un color muy intenso a nivel emocional. Mejora el metabolismo humano, aumenta el ritmo respiratorio y eleva la presión sanguínea.

Tiene una visibilidad muy alta, por lo que se suele utilizar en avisos importantes, prohibiciones y llamadas de precaución.

Es utilizado para atraer a un primer plano el texto o las imágenes, resaltándolas sobre el resto de colores. Es muy recomendable para invitar a las personas a tomar decisiones rápidas durante su estancia en un sitio web.

En publicidad se utiliza el rojo para provocar sentimientos eróticos. Símbolos como labios o uñas rojos, zapatos, vestidos, etc., son arquetipos en la comunicación visual sugerente.

Para indicar peligro, el rojo es el color por excelencia.

Como está muy relacionado con la energía, es muy adecuado para anunciar coches motos, bebidas energéticas, juegos, deportes y actividades de riesgo.

En heráldica el rojo simboliza valor y coraje. Es un color muy utilizado en las banderas de muchos países

El rojo claro simboliza alegría, sensualidad, pasión, amor y sensibilidad.

El rosa evoca romance, amor y amistad. Representa cualidades femeninas y pasividad.

El rojo oscuro evoca energía, vigor, furia, fuerza de voluntad, cólera, ira, malicia, valor, capacidad de liderazgo. En otro sentido, también representa añoranza.

El marrón evoca estabilidad y representa cualidades masculinas.

El marrón rojizo se asocia a la caída de la hoja y a la cosecha.

Púrpura

El púrpura aporta la estabilidad del azul y la energía del rojo.

Se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia.

El color púrpura también está asociado con la sabiduría, la creatividad, la independencia, la dignidad.

Hay encuestas que indican que es el color preferido del 75% de los niños antes de la adolescencia. El púrpura representa la magia y el misterio.

Debido a que es un color muy poco frecuente en la naturaleza, hay quien opina que es un color artificial.

El púrpura claro produce sentimientos nostálgicos y románticos.

El púrpura oscuro evoca melancolía y tristeza. Puede producir sensación de frustración.

El púrpura brillante es un color ideal para diseños dirigidos a la mujer. También es muy adecuado para promocionar artículos dirigidos a los niños.

Azul

El azul es el color del cielo y del mar, por lo que se suele asociar con la estabilidad y la profundidad.

Representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno.

Se le considera un color beneficioso tanto para el cuerpo como para la mente. Retarda el metabolismo y produce un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la calma.

En heráldica el azul simboliza sinceridad y piedad.

Es muy adecuado para presentar productos relacionados con la limpieza (personal, hogar o industrial), y todo aquello relacionado directamente con:

El cielo (líneas aéreas, aeropuertos)

El aire (acondicionadores paracaidismo)

El mar (cruceros, vacaciones y deportes marítimos)

El agua (agua mineral, parques acuáticos, balnearios)

Es adecuado para promocionar productos de alta tecnología o de alta precisión.

Al contrario de los colores emocionalmente calientes como rojo, anaranjado y amarillo, el azul es un color frío ligado a la inteligencia y la consciencia.

El azul es un color típicamente masculino, muy bien aceptado por los hombres, por lo que en general será un buen color para asociar a productos para estos.

Sin embargo se debe evitar para productos alimenticios y relacionados con la cocina en general, porque es un supresor del apetito.

El azul claro se asocia a la salud, la curación, el entendimiento, la suavidad y la tranquilidad.

El azul oscuro representa el conocimiento, la integridad, la seriedad y el poder.

Cuando se usa junto a colores cálidos (amarillo, naranja), la mezcla suele ser llamativa. Puede ser recomendable para producir impacto, alteración.

Verde

El verde es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.

Tiene una fuerte relación a nivel emocional con la seguridad. Por eso en contraposición al rojo (connotación de peligro), se utiliza en el sentido de “vía libre” en señalización.

El verde oscuro tiene también una correspondencia social con el dinero.

El color verde tiene un gran poder de curación. Es el color más relajante para el ojo humano y puede ayudar a mejorar la vista.

El verde sugiere estabilidad y resistencia.

En ocasiones se asocia también a la falta de experiencia: “está muy verde” para describir a un novato, se utiliza en varios idiomas, no sólo en español.

En heráldica el verde representa crecimiento y esperanza.

Es recomendable utilizar el verde asociado a productos médicos o medicinas.

Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismo rural, actividades al aire libre o productos ecológicos.

El verde “Agua” se asocia con la protección y la curación emocional.

El verde amarillento se asocia con la enfermedad, la discordia, la cobardía y la envidia.

El verde oscuro se relaciona con la ambición, la codicia, la avaricia y la envidia.

El verde oliva es el color de la paz.

El verde apagado y oscuro, por su asociación al dinero, es ideal para promocionar productos financieros, banca y economía.

Negro

El negro representa poder, elegancia, formalidad, muerte y misterio.

Es el color más enigmático y se asocia al miedo y a lo desconocido (”el futuro se presenta muy negro”, “agujeros negros”…).

El negro también representa autoridad, fortaleza, intransigencia. También se asocia al prestigio y la seriedad.

En heráldica el negro representa dolor y pena.

En una página web puede dar imágen de elegancia, y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es recomendable utilizarlo como fondo ya que disminuye la legibilidad.

Es conocido el efecto de hacer más delgado a las personas cuando visten ropa negra. Por la misma razón puede ayudar a disminuir el efecto de aglomeración de áreas de contenido, utilizado debidamente como fondo.

Es típico su uso en museos, galerías o colecciones de fotos online, debido a que hace resaltar mucho el resto de colores. Contrasta muy bien con colores brillantes.

Combinado con colores vivos y poderosos como el anaranjado o el rojo, produce un efecto agresivo y vigoroso.

 

Luego de ver el efecto de cada uno pueden decidir que les conviene utilizar para el diseño de sus aplicaciones o sitios web.

Super Mario Bros con estilo (match moving)

El video que se encuentra a continuación fue creado para una tesis en la Universidad de Arte y Ciencia Aplicada de Hannover, el objetivo era demostrar las capacidades para embeber gráficos creados por computadora en un video, la técnica es conocida como Match-moving.

El resultado es asombroso, la verdad les recomiendo que lo miren, para ejemplificar la técnica el creador utilizo al archi-conocido Super Mario Bros. El video fue hecho con Boujou, un reconocido software para realizar éste tipo de trabajos.