Tutoriales

6 ejemplos de CSS3 puro sin JS

1 comentario

Los desarrolladores web siempre tenemos curiosidad por aprender nuevas técnicas para la construcción y mejora de sitios web. CSS3 ha sido un importantísimo punto de inflexión para los desarrolladores frontend, ofreciendo una colección de nuevas propiedades soportadas por los navegadores web modernos.
Estos ejemplos de fragmentos (snippets) de código CSS libre son perfectos para cualquiera que quiera avanzar en el mundo del CSS. Cada fragmento utiliza CSS puro para crear interacciones que hasta hace muy poco sólo eran posibles con programación JavaScript.

Menú acordeón

Normalmente un menú de acordeón estaría relacionado con una función de evento click JavaScript. Pero como CSS puede manejar efectos a través de la pseudo-clase :checked es más fácil que nunca.

CSS Slider

JavaScript siempre ha sido la solución para cualquier slider de imagen o galería de fotos. Normalmente sería difícil controlar los eventos de clic a través de CSS3, pero los botones de radio nos pueden ser útiles.

Parallax fondo de estrellas animado en CSS3

Si bien el movimiento continuo y el diseño parallax residen sobre todo en el ámbito de jQuery, ahora es posible crear movimiento con CSS3 puro. El fondo se ha creado usando algunos efectos de degradado junto con una función de animación CSS3.

Imagen de fondo estilo bloc de notas / postit en CSS puro

El fondo de block de notas / postit, puede ser elaborado con una serie de bordes, sombras y efectos de degradado combinados en un sola div. Otro trozo de papel se gira ligeramente para crear el efecto de profundidad.

NES en CSS3 puro e interactivo

Una creación bastante sorprendente. No sólo la NES es escalable a diferentes tamaños y construida exclusivamente en CSS, sino que también tiene características que son completamente interactivas, por ejemplo, al hacer clic en el botón de encendido el piloto se enciende.
Este fragmento requiere más de 600 líneas de código CSS. Pero teniendo en cuenta que esto es posible en el año 2016, va a ser interesante ver lo que se podrá lograr en 2 años.

Otro del mismo tipo pero sin interacción, Apple Watch en CSS puro:

Jesús Quintana6 ejemplos de CSS3 puro sin JS
leer más

Guía Práctica de SVG en la web

Sin comentarios

Introducción

Vivimos en la era de los píxels. Como diseñadores y desarrolladores web, los píxels pueden ser tanto nuestros amigos como nuestros enemigos. Queremos que todo sea bonito y nítido para cualquiera que use algunos de los websites en los que trabajamos, pero debemos mantener bajos los tamaños de archivo para no afectar al rendimiento. Y no nos quedan muchas otras opciones cuando se trata de iconos, logos e ilustraciones en la web que no sean SVG. Los Scalable Vector Graphics (Gráficos Vectoriales Escalables) pueden quedar nítidos a cualquier resolución de pantalla, pueden tener tamaños de archivo súperpequeños, y pueden ser fácilmente editados y modificados.

Esta guía pretende ofrecer una visión práctica de cómo usar SVGs en tus websites, dando algunos consejos y trucos para sacarles el máximo partido.

SVG

Scalable Vector Graphics es un lenguaje de marcado (markup) basado en XML que puede contener vectores bidimensionales. Los vectores pueden ser formas simples, sucesiones de vectores (“paths”), o cualquier otra cosa que se pueda hacer en el Illustrator. Es un formato de imagen que tiene más en común con una página web que con una imagen JPEG. SVG es mucho más potente que cualquier otro formato de imagen que podamos usar en la web, ya que podemos manipularla mediante código (sea en el editor de texto o con CSS / JS).

  • Independiente de la resolución
  • Implementado en todos los navegadores modernos
  • Protegido contra cambios futuros (es un estándar del W3C)
  • Fácil de hacer y editar
  • Manipulable con CSS y JS
  • Altamente compresible

Preparación & Optimización

Preparar un SVG para usarlo en la web es un proceso simple, no más complicado que exportar un JPEG o un PNG. Trabaja como lo harías normalmente en tu editor de gráficos vectoriales preferido (Illustrator, Sketch, Inkscape [que es libre], etc [o incluso Photoshop si usas capas de formas]) con el gráfico del tamaño con el que esperes que vayas a usarlo. Explicaremos algunas cosas que hacemos en Illustrator, que es el que usamos normalmente, pero los mismos principios se aplican a cualquier software. Probablemente querrás convertir los textos a contornos, ya que lo más probable es que no se muestre en la tipografía correcta a no ser que tengas pensado darle estilo con una tipografía web que uses en la página (¡se puede hacer!). No te preocupes por expandir todos los objetos a formas sólidas, sobre todo si tienes trazos, ya que podrías querer manipularlos en la página, y normalmente expandirlos no reduce el tamaño de archivo. Los nombres que pongas en las capas o grupos se incluirán en el SVG como una ID del elemento. Esto puede venir bien para dar estilos, pero aumentará un poco el tamaño final del archivo.

Al exportar, asegúrate de que el diseño está sobre un área de píxels enteros (o sea, no 23.3px X 86.8px); sino, puede que no quede realmente nítido, y luego recorta el área de trabajo (artboard) alrededor. Puedes hacerlo en Illustrator con Object > Artboards > Fit to Artwork Bounds. Luego pulsa guardar como y elige SVG con los ajustes por defecto. Se puede hacer alguna optimización aquí, pero no vale realmente la pena, porque luego lo optimizaremos en post-proceso, y el tiempo que pasemos jugando aquí con los ajustes será perdido.

Trucos para reducir el archivo

(Ver recursos para enlaces a artículos externos)

Hay bastantes buenos artículos sobre optimización de SVG en la web, que ofrecen mucha información sobre el tema, pero me gustaría compartir unos consejos y trucos que para nosotros son los más efectivos y útiles. No suponen mucho más trabajo y pueden añadirse fácilmente a tu rutina habitual.

Para mantener los SVGs lo más pequeños posible querremos eliminar efectivamente todo lo que no sea necesario. La herramienta más conocida y (para mí) la mejor para post-procesar SVGs es SVGO. Sirve para eliminar todo el código que no se necesita — nota: recuerda ser cuidadoso al usarlo si tienes pensado manipular con CSS / JS, ya que a veces puede sobre-optimizar los archivos, haciendo más difícil hacer luego con ellos lo que habías pensado. Algo muy práctico de SVGO es que puede añadirse al proceso de trabajo para que sea automático (o se puede usar un GUI para hacerlo uno mismo, si se prefiere).

Dando un paso más en lo de ‘eliminar todo lo innecesario’, podemos hacer algo más en el editor gráfico. Primero, asegurarnos de que estamos usando el menor número posible de “paths” y formas para conseguir lo que queremos, y también de que hay el menor número posible de puntos en los “paths”. Se trata de combinar y simplificar todo lo que se pueda, y luego eliminar el mayor número posible de puntos de los “paths”. VectorScribe es un plugin de Illustrator que incluye Smart Remove Brush Tool (Pincel de Eliminación Inteligente), que permite eliminar puntos manteniendo la forma general intacta.

Luego tendremos que hacer zoom. Con Illustrator habilitaremos Pixel Preview con View > Pixel Preview, y miraremos dónde tenemos los puntos. Para reducir el tamaño al mínimo, los puntos deben ajustarse a la parrilla de píxels (o sea, sobre valores enteros de píxel). Lleva algún tiempo engancharlos y recolocarlos, pero vale la pena este pequeño esfuerzo añadido, ya que esto también nos asegura la reproducción más nítida posible (recuerda que es posible que antes te hayan quedado algunas zonas a medio píxel).

Si hay dos (o más) formas alineadas, podemos eliminar las áreas solapadas. Una cosa que hay que vigilar es que a veces queda una línea blanca entre ellas, aunque los “paths” estén alineados, así que a veces hay que solaparlas un poco para evitarlo. Nota: en SVG el índice z se define por el orden en que aparecen en el código, siendo el de más abajo el que está encima, así que hay que poner las formas de encima más abajo en el código.

Último pero no menos importante, una cosa que se suele olvidar, recuerda habilitar la compresión gzip para SVGs en tus websites en el archivo .htaccess.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

Opciones de implementación

A la hora de usar SVGs en la web, hay varias formas de trabajar. Algunas ofrecen beneficios que nos pueden ser útiles dependiendo del resultado que queramos, y otras será mejor evitarlas. Si queremos atenernos a lo básico para lograr los beneficios de independencia de resolución y pequeño tamaño de archivo, podemos referenciar el SVG en un img o como background-image en CSS, igual que haríamos con cualquier otro formato de imagen.

Como haríamos con cualquier otra imagen. También se pueden usar SVGs en un elemento <picture>. Nótese que este método limita las funcionalidades de manipulación.

<img src="logo.svg" alt="Logo" height="65" width="68">

Background-image

Es mejor no codificarlos con base64, ya que se bloqueará la carga del resto de estilos mientras se descarga. Nótese que este método limita las funcionalidades de manipulación.

.logo {
  background-image: url(logo.svg);
}

Iframe

Se pueden cargar SVGs en un <iframe>. Esto permite hacer la mayoría de las cosas, pero no estoy seguro de que sea el mejor método si queremos avanzar ¯\_(ツ)_/¯.

<iframe src="logo.svg">Your browser does not support iframes</iframe>

Embed

<embed> está pensado para integrar ‘una aplicación externa’ o ‘contenido interactivo’. Se puede usar para SVGs, pero es preferible no hacerlo.

<embed type="image/svg+xml" src="logo.svg" />

Object

<object> es la mejor opción si queremos poder manipular un SVG sin tener que ponerlo inline en el HTML.

<object type="image/svg+xml" data="logo.svg">Your browser does not support SVGs</object>

Inline

Poner el código SVG inline ahorrará una solicitud HTTP, pero la imagen no quedará en la caché del navegador. Es la forma más fácil para manipular, pero mantener código SVG inline puede ser una lata.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 294.44 171.45">
<defs>
<linearGradient id="linear-gradient" y1="85.73" x2="294.44" y2="85.73" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ef573d"/>
<stop offset="1" stop-color="#ec2227"/>
</linearGradient>
</defs>
<path d="M282.17,0H12.28A12.28,12.28,0,0,0,0,12.29V117.15a12.28,12.28,0,0,0,12.28,12.29H68.76l18.82,42v-42H282.17a12.28,12.28,0,0,0,12.28-12.29V12.29A12.28,12.28,0,0,0,282.17,0Z"/>
</svg>

Para concluir

Si quieres sacar el máximo partido a tus SVGs, usa <object>. Alternativamente puedes meterlo inline para ahorrar solicitudes HTTP, pero no se almacenará en caché. Si sólo quieres usar SVGs como lo harías con cualquier otra imagen, usa <img> o background-image. También es posible usar <iframe> y <embed>, pero no creo que sean las mejores opciones a seguir (y acorde con los propósitos de este site, no trataré más sobre ellas).

 ObjectInlineImgBackground-image
Manipulación CSSAlgunas inlineAlgunas inline
Manipulación JSNoNo
Animación SVG
Animación SVG InteractivaNoNo

Nota: ‘Algunas inline’ significa que algunas funcionan, pero sólo si el <style> CSS está incrustado dentro del código del SVG. Más información en la sección siguiente.

Manipulación CSS

Una de las grandes cosas de usar SVG es que podemos cambiar los estilos de los elementos internos usando nuestro querido viejo CSS. Por ejemplo, tenemos un icono naranja, y queremos que sea azul en algunas páginas; podemos hacerlo sin tener que hacer un nuevo icono azul. Ideal.

Hay dos formas de cambiar estilos: inline en el SVG, y externamente (o sea, sin nuestra hoja de estilo). Para poner los estilos inline, hay que incluirlos dentro de una etiqueta <style> y también dentro de <![CDATA[ ... ]]>. Es mejor hacerlo así, porque a veces los parsers de XML pueden tener conflictos con ciertos caracteres (por ejemplo: >). Y aunque ahora no tengamos ningún caracter extravagante por ahí, la mejor práctica es usar CDATA, porque se podría añadir alguno más tarde y descomponerlo todo.

Los estilos inline funcionarán en la mayoría de implementaciones. <img> y background-image no soportan animaciones CSS3 aunque estén inline (ver más en la sección animaciones). background-image no soporta media queries inline (ver más en sección media queries ).

Estilos inline

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0 { fill: #000; }
.st3 { fill: #fff; }
]]>
</style>
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Si se quieren usar estilos externos, con los que habitualmente es más fácil trabajar y son más fáciles de mantener, no se puede usar <img> ni background-image. Si se usa <object>, necesitamos referenciar la hoja de estilo internamente desde el archivo SVG (ver el código más abajo). Recuerda: si lo haces así, el SVG no podrá saber cuál es su clase heredada (o sea, el <object>), así que no intentes hacerlo así para definir estilos. Los SVGs inline no necesitan incluir esto y por lo tanto es algo más fácil trabajar con ellos en este sentido.

Estilos externos

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.st { fill: #000; }
.st1 { fill: #fff; }

Manipulación JS

Sólo apuntaremos algunas pistas básicas sobre cómo usar JS para cambiar cosas en un SVG. Si quieres incrustar los scripts dentro del archivo SVG, recuerda incluirlos entre <![CDATA[ ... ]]>, también para evitar errores de parsing. Los scripts no se ejecutarán si se usa <img> o background-image como medida de seguridad (esto es, para prevenir la ejecución de código potencialmente malicioso en la página).

Al trabajar con JS externo (o sea, no incrustado en el archivo SVG), si tenemos el SVG inline, podemos apuntar a él como haríamos con cualquier otro elemento DOM. Si se usa un <object> podemos apuntar a él con contentDocument. Se puede ser mucho más creativo, pero aquí dejo un ejemplo:

Scripts externos

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("st");
  var svgb2 = svgDocument.getElementsByClassName("st1");
  svgb1[0].setAttribute("fill", "#000");
  svgb2[0].setAttribute("fill", "#fff");
};

Anchura fija vs adaptatividad

Cuando se usan imágenes en la web en diseños adaptativos, hay dos opciones para darles estilo: se pueden mantener con tamaño fijo y ajustar para los puntos de cambio (breakpoints) si es necesario; o dejar que se redimensionen con la página dependiendo de su container correspondiente.

Si son de tamaño fijo, con lo único que hay que tener cuidado es que si usamos el SVG como background-image hay que asegurarse de incluir un background-size, porque los navegadores se pueden confundir y pueden o cortar la imagen o encogerla, especialmente si la imagen se muestra con un tamaño distinto del original.

Animación

Cuando se trata de animar SVGs, hay una pocas opciones que podemos usar: animación SVG (basada en la especificación SMIL), animaciones CSS3, o animaciones JS. La animación SVG y las animaciones CSS3 permitirán hacer la mayoría de las cosas que queramos, siendo la animación SVG ligeramente más potente al tener control sobre algunas cosas más. JavaScript permite hacer animaciones bastante complejas de forma relativamente fácil, especialmente con bibliotecas como Snap.svg. La animación SVG es súper potente. Puedo imaginar que será útil para ilustraciones que nos gustaría que incluyesen alguna bonita animación, pero, desde un punto de vista práctico, no todos los proyectos disponen de tiempo o de presupuesto para invertir en esto. Pero si lo haces, realmente es muy fácil empezar a jugar con esto, y hay algunos tutoriales estupendos online. Básicamente, se añade un elemento hijo de <animate> a cualquier “path” o forma de los SVGs, que controlarán la animación. Y lo mejor es que funciona con cualquier método de implementación. Internet Explorer no soporta animación SVG; pero se puede usar un polyfill, como FakeSmile si necesitas que funcione en IE también.

A menudo, cuando queremos animar un icono o una ilustración en la web, tendrá que ver con una interacción, por ejemplo, al pasar por encima, etc. Esto entraría en las categorías Manipulación CSS y Animación SVG Interactiva en la tabla de competencias de arriba, y por tanto no funciona con animación SVG ni con animaciones CSS3 si se usa <img> o background-image. Para conseguir animaciones interactivas con animación SVG podemos añadir begin="mouseover" y begin="mouseout", y con animaciones CSS3 como se haría en cualquier otro sitio: añadir clases a los elementos del SVG y darles estilo en hover. Una cosa a tener en cuenta es que si queremos dar estilo a las animaciones desde la hoja de estilo externa, funcionará como esperamos si tenemos el SVG inline, pero si usamos <object>, necesitaremos referenciar la hoja de estilo externa desde dentro del SVG también.

Animación SVG interactiva

Sólo funciona con <object> o inline.


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>


<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
<g opacity="0">
<animate attributeName="opacity" to="0.3" begin="anchor.mouseover" dur="0.5" fill="freeze"/>
<animate attributeName="opacity" to="0" begin="anchor.mouseout" dur="0.5" fill="freeze"/>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)" />
</g>
<a id="anchor">
<rect x="0" y="0" width="300" height="220" fill-opacity="0"/>
</a> </svg>

Animación CSS3

Sólo funciona con <object> o inline. También funciona con CSS externo, como se explicó arriba.


<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0 { fill: #000; transition: fill 0.1s; }
.st3 { fill: #fff; transition: fill 0.1s; }
.st3:hover { fill: red; }
]]>
</style>
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Uso como sprites

Se pueden crear y usar sprites SVG igual que hacemos habitualmente con PNGs y background-image para tener beneficios de resolución, o podemos dar un paso más y usar la potencia extra que tenemos con SVG. El beneficio es que obtenemos toda la potencia del SVG con menos solicitudes HTTP.

Hay dos posibles aproximaciones. En la primera, definimos todos los iconos dentro de los elementos <symbol> del SVG, pero los ocultamos. Luego referenciamos cada uno cuando se necesiten con un elemento <use> que referencie el <symbol> con xlink:href="#id". La segunda aproximación usa el atributo viewbox del SVG para recortar el área “artboard” (el área del SVG que se muestra) alrededor de una cierta zona. Ambos son usos bastante avanzados de SVG, así que sólo deberíamos preocuparnos de ellos si los vamos a usar.

Si quieres aprender a usar estas técnicas, echa por favor una ojeada a los enlaces de recursos, especialmente el artículo de Sara Soueidan’s en 24ways .

Si se quiere usar un sprite SVG como se haría con un sprite PNG con CSS, debemos indicar que es necesario añadir los atributos width y height junto al atributo viewBox en el código del SVG. Durante el proceso de optimización se suelen eliminar, porque normalmente no se necesitan. En este caso, sin embargo, IE9 y 10 los necesitan para poder recortar correctamente parte de la imagen del sprite. La razón es que estos navegadores cogen el ancho y alto especificados en el CSS para el tamaño de imagen, pero estos son en realidad los tamaños de la parte de la imagen que se necesita (no de toda la imagen). Confuso, ya lo sé, pero es algo con lo que me encontré recientemente.

Media queries

Una cosa realmente chula de SVGs es que si se usan media queries en los estilos incrustados en el archivo, en lugar de trabajar desde el tamaño de viewport, trabajarán desde el tamaño de viewport del SVG. Esto significa básicamente que se traen de fábrica su propia implementación de trabajo de los elementos de las queries. Qué bueno. Esto nos permite controlar cómo se verá el SVG sea cual sea el tamaño.

Imagina que eres una gran marca y quieres que tu logo se use correctamente independientemente del tamaño en que se muestre. Bueno, pues desde luego que se puede hacer. Sólo hay que incrustar algunas media queries y se puede cambiar su formateo basándose en el tamaño en que se está mostrando. Esto funciona con todas las implementaciones menos background-image, y en todos los navegadores (nota: IE9–11 parece ignorar algunos puntos de cambio (breakpoints)). Puedes jugar con el deslizador de abajo para ver un ejemplo de cómo funciona:

Contingencias

Unas palabras sobre contingencias. SVG está soportado en todos los navegadores modernos. Si aun tienes que dar soporte a IE8, entonces tendrás que implementar contingencias, más probablemente en forma de PNGs. No me extenderé mucho en esto, porque probablemente ya no deberías estar dando soporte a IE8 ¯\_(ツ)_/¯. De todas formas, si quieres disponer de contingencias, básicamente las cosas se complican mucho y muy rápido, como suele ocurrir con SVG. Recomendaría leer este artículo exhaustivo de Amelia Bellamy-Royds en CSS-Tricks.

Vía: https://svgontheweb.com/

Jesús QuintanaGuía Práctica de SVG en la web
leer más

Consejos prácticos para salir de la penalización Penguin

1 comentario

En MaisMedia hemos recibido a Penguin como una actualización más; y es que con el correr de los días, se le va perdiendo el miedo al nuevo monstruito de google, y es que si nos ponemos analizar las cosas ya con la cabeza fría, nos daremos cuenta que Google Penguin y Panda trabajan básicamente en el mismo concepto: “El contenido de calidad y la calidad web”. Pero no hablo del contenido de un post, sino de evitar que las búsquedas de un resultado arrojen algo distinto de lo que en verdad busca el usuario; es más, tal es su relación que podríamos a considerar a Penguin como la actualización de Panda.

Ahora bien, también debemos hablar de las “pequeñas – grandes” diferencias, y es que mientras Panda se centra en la originalidad de los contenidos y elimina o considera de baja calidad el contenido copiado, Penguin trabaja en la supresión de contenido spam, es decir, en aquellas webs que hacen mal uso del SEO: excesivas palabras clave, texto oculto, etc. y se encontraban gracias a esto gozando de las primeras posiciones.

Si tu web fue golpeada por la actualización entonces lo más probable es que estos pequeños pero muy útiles consejos puedan ayudarte, si no a recuperar tus otrora excelentes posiciones de la noche a la mañana, sí a comenzar con el trabajo que, realizándolo de forma sostenida, dará frutos que no se verán desplomados por una actualización futura.

  • Lo primero que debes hacer es comprobar que las visitas han bajado desde la fecha de lanzamiento del pingüino, 24 de abril, si no es a partir de esta fecha la bajada es debida a otras causas.
  • Comienza o mejora el uso de Google Webmaster Tools; esta herramienta es muy útil ya que no solo te da todo tipo de orientación relacionada con el sitio web sino que cuenta con herramientas que te ayudan a hacer buen SEO; detectando así errores de mapa del sitio, o la opción de recibir mensajes de Google que informan acerca de cualquier error que se ha cometido.
  • La navegabilidad es un factor muy importante si hablamos de calidad, por eso preocúpate de los “pequeños grandes detalles”, los ítems deben estar claramente visibles, nada de diseños inusuales u otros errores que hacen que los usuarios se vayan rápidamente de tu página.
  • Demasiados anuncios solo te perjudicarán, es de entender buscar rentabilidad, pero eso no significa que los usuarios deban perderse entre el contenido y los anuncios.
  • Ponte en el lugar de un usuario de lo más crítico, de esa forma se podrá observar cuales son las posibles causas de abandono, ya que un alto porcentaje de abandonos o rebote es perjudicial, también de cara a Google.
  • El abuso de palabras clave. Esto ya está más que dicho, y aún hay muchos que caen en el mal SEO. Revisar el contenido y constatar que no es está incurriendo en esto ya sea de forma consciente o inconsciente es una buena medida. Si es necesario cambiar contenido es hora de ponerse manos a la obra.
  • Deshacerse de spam back links; olvídate de esos “programas de 5.000 links por 5 dólares”, ya que no le agradan a google.
  • Si vas a conseguir enlaces, que sean buenos, temáticos, de páginas con autoridad y con contenido relevante.
  • Variación de los anchor y urls de la página. No se pueden conseguir links solo a la home y solo con una keywords específica.
  • No hagas links o post invitados a páginas que se alejan del tema de tu web.
  • Nada de comentarios Spam.
  • Uso de los medios sociales, léase USO, mas no abuso.
  • Agrega botones para compartir en google Plus, Facebook, Twitter, etc.

Estos son algunas recomendaciones que podrían ayudarte a salir del objetivo pingüino o a no caer en él, si aun permaneces sin ser golpeado no cantes victoria, el algoritmo continúa rastreando.

Si tienes dudas, o comentarios, no dudes en dejarlos.

ElizabethConsejos prácticos para salir de la penalización Penguin
leer más

¿Cómo puede influir la AI en sus usuarios / clientes? II

Sin comentarios

La arquitectura de la información nace para los usuarios, y el motivo principal por el que estos acuden o usan una interfaz es porque tienen necesidad de  información.

Ahora bien, las necesidades de información pueden variar ampliamente y cada tipo de necesidad de información provoca que los usuarios muestren comportamientos diferentes, así, estos tipos de necesidad de información pueden ser: conocida (búsqueda de elemento conocido), o no conocida (búsqueda exploratoria). Por ejemplo, es distinto buscar el número de teléfono de una persona conocida en el sitio web de una organización, que hacer una búsqueda exploratoria sobre un tema desconocido en Wikipedia.

La búsqueda exploratoria,  suele ser abierta, ya que no hay expectativas claras de obtener una respuesta correcta (al contrario que la búsqueda de elemento conocido). En esta búsqueda nos conformamos con algún resultado válido, para usarlo en la siguiente iteración de búsqueda.

Pero, ¿cómo pueden conocerse estas necesidades y comportamientos de los usuarios? Existen varios métodos, pero destacan dos: Analítica de búsqueda e investigación contextual. La analítica de búsqueda implica revisar las consultas de búsqueda habituales de los usuarios de un sitio web, lo que nos hará entender mejor las necesidades de información.

La investigación contextual, por el contrario, es un trabajo de campo que se basa en la observación de los usuarios mientras interactúan en su entorno, y en este contexto, averiguar el porqué de sus acciones.

De esta manera, el objetivo de la arquitectura de la información es satisfacer la experiencia de los usuarios, tratando de obtener las respuestas correctas a las preguntas adecuadas en el momento preciso, contribuyendo, así, a una experiencia satisfactoria y positiva.

Jesús Quintana¿Cómo puede influir la AI en sus usuarios / clientes? II
leer más

Arquitectura de la información I

Sin comentarios

¿Qué es y qué no es la arquitectura de información? ¿Por qué una empresa debe invertir tiempo y dinero en la arquitectura de la información?

La arquitectura de la información es la disciplina que se encarga del diseño estructural de la información en diversos entornos compartidos, ej: Sitios web, dispositivos móviles, DVD’s interactivos, tableros e interfaces de instrumentos y máquinas, aplicaciones, juegos, etc. Se ocupa de organizar, estructurar, etiquetar y ofrecer un contexto para el contenido, determinando los niveles adecuados de “profundidad” o “granularidad1 y decide la forma en que esta información se relaciona, consiguiendo así niveles óptimos de localización y gestión de dicha información.

Esta disciplina aporta varias ventajas y valores:

  • Reduce el coste de encontrar información
  • Ofrece una ventaja respecto a la competencia
  • Incrementa el conocimiento del producto
  • Hace que visitar un sitio web sea una experiencia agradable
  • Aumenta la fidelidad de la marca
  • Reduce la dependencia de la documentación
  • Reduce los costes de mantenimiento
  • Reduce el desorden organizativo
  • Facilita el intercambio de información
  • Reduce la duplicación de esfuerzos
  • Hace más sólida la estrategia de la empresa

Y que se reduce en una: Tiempo. O la facilidad de localización de la información global, lo que supone ahorro de tiempo y, por consiguiente, costes. Para entenderlo mejor, podemos formular las siguientes preguntas:

  • ¿Cuánto tiempo puede perder un empleado de su organización en encontrar la información que precisa?
  • ¿Cuánto tiempo tarda un usuario de su web en encontrar el producto que está buscando?
  • Y si la respuesta a estas preguntas es positiva ¿cuánto esfuerzo extra se deriva de este desajuste?

Como vemos, la arquitectura de la información es una disciplina invisible, pero con ventajas y valores tangibles, tanto para las empresas como para sus usuarios.

1 Extensión relativa o tamaño de los niveles de información, ej.: Categoría, subcategoría, artículo…

Jesús QuintanaArquitectura de la información I
leer más