SVG – Lo que debes saber…

0
Written by

¿Cuál es la mejor manera de utilizar este formato?

La mejor forma de mostrar un archivo SVG, es quizás con la etiqueta  ya que es soportado por la mayoría de los exploradores, además podemos agregar un mensaje para aquellos exploradores que no lo soporten.

                    Tu explorador no soporta el formato SVG


Ojo al type! Colocándolo de esta manera no tendremos problemas de compatibilidad con IE7.

¿Cómo utilizar svg como imagen de fondo?

Como si de otro formato se tratase. Lo único, hay que tener en cuenta es la compatibilidad con todos los navegadores. Utilizando el asterisco trabajamos de manera específica con IE7 y atacamos el problema, mostrando una imagen para que el espacio no quede vacío.

.svg-big {
background-image: url(polaroid.svg);
/* Para IE7 ponemos una imagen de otro formato */
 *background-image: url(https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/polaroid.gif);
}
Utilizando el asterisco trabajamos de manera específica con IE7 y atacamos el problema, mostrando una imagen para que el espacio no quede vacío.

¿Cuáles son sus principales ventajas?

  • No pierde calidad si se hace zoom o si se redimensiona.
  • Renderizado con antialiasing (contornos suaves y transparentes)
  • El texto contenido dentro de SVG puede ser indexable por buscadores 
  • Ideal para ser impreso
  • Posee características de accesibilidad para usuarios con discapacidades
  • Pueden ser transformados por hojas de estilos
  • Admite efectos como sonido, efectos visuales al hacer clic o mover el ratón, etiquetas informativas.
  • Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java, JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento gráficos de excelente calidad con las cotizaciones de bolsa en tiempo real; un reloj analógico, con minutos y segundos, requiere sólo 2K de código.
¿Y las desventajas?
  •  La compresión de un SVG arroja siempre el mismo tamaño independientemente de la dimensión en el que se vaya a mostrar. 
  •  El soporte de los navegadores:

Destacar que Internet Explorer no implementó el estándar hasta IE9 y Firefox desde la versión 32.0. Sin embargo Chrome, Safary y Opera lo aceptaron desde la primera versión y de manera nativa. 


¿Cómo utilizarlo en exploradores que admitan SVG en línea?

Se puede utilizar el formato SVG en construcciones de HTML5 para navegadores que admitan SVG en forma nativa.

Una estructura tipo podría ser la siguiente:


<body>
  <svg xmlns=»http://www.w3.org/2000/svg» version=»1.1″
       width=»200px» height=»200px»>
    <rect x=»0″ y=»0″ width=»100%» height=»100%»
          fill=»none» stroke=»black»/>
    <circle cx=»100″ cy=»100″ r=»50″
            style=»stroke: black; fill: red;»/>
  svg>
body>
Si nos detenemos un poquito más sus atributos vemos que:

  •         El atributo xmlns define el espacio de nombre para el fragmento SVG.
  •         El atributo version indica la versión del idioma de SVG
  •         Los atributos width y height definen el tamaño de la ventanilla de SVG
  •         El elemento SVG rect, relativo a la ventanilla SVG, dibuja un rectángulo negro desde la esquina          superior derecha de la ventanilla, o en un punto (0, 0), que tiene el ancho y la altura máximos. Este  posicionamiento delimita la ventanilla SVG determinada. 
  •        De manera similar, el elemento SVG circle dibuja un círculo rojo con un borde negro de un radio de 50 píxeles. El círculo está centrado en el medio de la ventanilla SVG del píxel 200×200.

Por supuesto, a todas las formas podemos crearle comportamientos, del tipo onclick, onmouseover, onmouseout, etc.
Ejemplo:
<body>
  
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="redCircle" cx="100" cy="100" r="50" 
            style="stroke: black; fill: red;" 
            onmouseover="grow()" onmouseout="shrink()"/>
    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>
  svg>
body>

Unos recursos…

He encontrado una herramienta muy curiosa que convierte nuestras imágenes con formatos jpg, gif, png a svg. Podéis probarla en el siguiente enlace http://picsvg.com/sp/

Para editar un SVG ya existente, crear uno nuevo y obtener su código, podemos ir directamente al SVG Editor.

Y para concluir, añado el link a una herramienta que no sé si ya conocéis: SVGeneration. Es realmente potente y permite configurar color, tamaño y otros parámetros de una colección de patrones disponibles para generar fondos en formato SVG. Lo único que hay que tener en cuenta es que, como ya hemos comentado, no funcionará en Explorer 8, Firefox 3.6, Safari 5, Opera 9 y versiones antiguas de los principales navegadores móviles.

Xmind – Para crear diagramas o mapas conceptuales

0
Written by
Xmind es una herramienta que, en su versión gratuita, permite  realizar y compartir diagramas de flujo, mapas conceptuales o lluvia de ideas.

Con esta herramienta se puede trabajar de dos maneras:
–          –  Una, creando una red local y compartiendo nuestros proyectos con los usuarios que queramos.
–          –  Otra, subiendo nuestros documentos a la red Xmind.net para que sean públicos y todo el mundo pueda acceder a ellos.

Para ambas formas de trabajar es preciso crearse una cuenta, y desde ese momento ya podemos comenzar a sacar todo el rendimiento a la herramienta.

El punto fuerte del programa es que es compatible con un gran volumen de formatos y es posible exportar nuestros proyectos a Microsoft Project, Powepoint, Excel, Word o a los distintos formatos Open Office.  Además, en el mismo momento en el que subimos algo a la cuenta de Xmind, podemos mandar  el enlace de nuestra publicación, compartir desde las redes sociales, permitir su descargar, crear comentarios sobre ese archivo o gráfico o visualizarlo en diferentes tamaños.


Si por otra parte lo que queremos es trabajar conectados con un grupo de trabajo para, por ejemplo, llevar a cabo una lluvia de ideas o simplemente organizar los conceptos para una propuesta, podemos compartir nuestros documentos a través de la herramienta creando una red de conexiones.

El proceso es muy sencillo, sólo tenemos que  darle a la opción: Ver > Más >Compartir en Red Local y a partir de ese momento, la persona o personas con las que queremos compartir nuestros documentos recibirán una notificación que podrán aceptar o rechazar.

De esta manera, se podrá trabajar en línea con un grupo de usuarios compartiendo al instante nuestros proyectos y permitiendo su edición.

Entre las posibilidades que nos ofrece el programa podemos encontrar plantillas para crear organigramas, planificar un proyecto, organizar una reunión o realizar la planificación semanal.




Para descargarnos Xmind podemos hacer click en el siguiente enlace: http://www.xmind.net/download/win/

CynthiaSays- un validador de accesibilidad

0
Written by
Con esta entrada quería presentaros otro validador de accesibilidad para completar la lista de los que ya conocemos o utilizamos a diario como Taw, Hera o Wave. Se trata de  “CynthiaSays”, un proyecto educacional iniciado por varias organizaciones y empresas para promover entre los desarrolladores la accesibilidad Web.

“CynthiaSays” detecta automáticamente problemas de accesibilidad de una página web para verificar si cumple los estándares y recomendaciones de la Sección 508 (normativa sobre accesibilidad Web de los Estados Unidos)  y de la WCAG 2.0, pudiéndose seleccionar el Nivel A, AA y AAA.

Ofrece un reporte completo y específico de cada uno de los problemas de manera rápida y visual a través de la utilización de iconos y de una estructura de árbol. 



Esta sería la lista de iconos utilizados en sus informes y la descripción del mismo: 


También, se puede obtener una versión imprimible del escaneo, aunque se echa de menos un resumen detallado según la criticidad de los errores encontrados.

En el lado negativo tenemos que por el momento, sólo está disponible en inglés, aunque parece que en breve se podrán seleccionar otros idiomas incluido el español. 

También hay que objetar que sólo puede utilizarse para páginas subidas a un servidor ya que para otro tipo de páginas locales es necesario comprar la solución comercial.

Por último, y a diferencia de otras herramientas de evaluación de la accesibilidad, no valida las CSS ni el código Javascript.

Pero quedémonos con los puntos fuertes de “CynthiaSays”: realiza un informe muy completo, es rápido, gratuito y está actualizado con las últimas recomendaciones del W3C.  

Por si queréis entrar y echar un vistazo: http://www.cynthiasays.com/



Accesibilidad. Herramientas

0
Written by

Herramientas de validación automática y otras para comprobaciones manuales de Inteco. Es de hace algunos años, pero la esencia de la validación es esa.

http://a.babelcreativa.es/00-doc-blog/herramientas_de_evaluacion_de_la_accesibilidad.pdf

Test A/B con Google Analytics

0
Written by

Por si en algún momento necesitáis hacer un Test A/B para algún cliente aquí os dejo un mini tutorial.
Como comentario general avisaros que para que Analytics de un resultado como ganador, necesita que haya mucho tráfico. Aún así podremos sacar nuetsras propias conclusiones con los informes que nos dará.

1.Introducción

1.1 Principios

Un test A/B sirve para comprobar y analizar en rendimiento entre dos páginas diferentes. Es especialmente eficaz a la hora de realizar campañas publicitarias con adWords, ya que nos va a permitir probar durante un periodo varias landings pages para finalmente poder decantarnos por una y emplear en ella nuestros recursos maximizando así la conversión.

1.2 Recursos necesarios


Para llevar a cabo nuestro test necesitaremos:
·         Nuestra cuenta de Google Analytics, con el sitio donde vamos a realizar el test bien configurado.
·         Las páginas o landings pages que queremos comparar, con el código de seguimiento de la cuenta de Analytics instalado.

2    Cómo configurar el test en GA


2.1 Ventana experimentos

Los Test A/B se realizan desde la ventana experimentos, situada dentro de la pestaña Comportamiento de nuestra cuenta de Analytics.

2.2 Configurar experimentos


Al entrar en este apartado, te aparecerán en caso de que los tengas todos los experimentos que tengas configurados. Para configurar uno nuevo pulsar en Crear experimento.


2.3 Seleccionar objetivo


En esta primera pantalla tendrás que dar un nombre a tu experimento y lo más importante definir el objetivo.
El objetivo es lo que queremos conseguir que haga el usuario, normalmente será que acceda a otra página o que se quede navegando por nuestra web.
Si no hemos definido aún nuestro objetivo lo podremos crear desde el enlace Crear un objetivo nuevo.

En la pantalla de configuración de objetivos elegiremos el que más se adapte a nuestra necesidad, o si no definiremos un objetivo personalizado. Le daremos un nombre y un tipo (normalmente un destino o un evento) y definiremos la url o evento objetivo.
Una vez guardado podremos volver a la pantalla de configuración de nuestro experimento y seleccionar como métrica el objetivo recién definido.
SI queremos que TODOS los usuarios de nuestra web participen en el experimento debemos dejar el tráfico al 100%. Si lo bajamos al 50%, tan solo la mitad de los usuarios participarán en el Test A/B (y por lo tanto solo verán la landing principal).
En las Opciones avanzadas tendremos la opción de distribuir el tráfico equitativamente, si dejamos la opción por defecto NO, Analytics ira mostrando más frecuentemente la landing cuya consecución de objetivos sea mayor (la que considere a lo largo del experimento que tiene más éxito). En caso de elegir la opción SI, el tráfico se repartirá de forma equivalente entre las diferentes variaciones.
El límite de confianza es el porcentaje mínimo de fiabilidadque necesita Analytics para dar por exitoso un experimento. Cuanto mayor sea, más fiable, pero necesitará haber recopilado más datos durante un mayor periodo de tiempo. Hay que adaptarlo según la necesidad.

2.2 Configuración de las variaciones

En la siguiente pantalla tendremos que asociar a cada variación su url. Podremos tener las que deseemos.
Una vez configuradas nuestras páginas, Google Analytics nos dará un código que tendremos que incluir justo después de la apertura de la etiqueta HEAD de la página ORIGINAL.
Si no hay ningún error en la inserción del código, Analytics lo validará y podremos empezar el experimento.

3    Resultados del experimento

A lo largo de nuestro Test A/B podremos ir evaluando y viendo el informe de resultados en la pestaña Comportamiento/Experimentos. En ella podremos ver todo tipo de información sobre el comportamiento del usuario en nuestras páginas del experimento navegando por las pestañas de explorar.