Bootstrap 4.0

Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos. Y es que en estos últimos meses he tenido la oportunidad de probar la versión alpha 4, y la alpha 6, y ahora que llega la versión beta estamos cerca del lanzamiento final.

Entre las primeras cosas a tener en cuenta es que se ha añadido un fichero JavaScript más. Así que ahora tendremos que poner una línea de código CSS en la cabecera, y 3 líneas en el pie. Una de ellas sigue siendo jQuery, algo bastante estándar hoy en día en muchos sitios web, pero el hecho de tener que usar muchos ficheros JavaScript es algo que en principio no me acaba de gustar. Si realmente vamos a utilizar los 3 ficheros a lo largo del sitio, quizá sería mejor incluirlo todo en uno único y hacer una petición mayor y cacheárselo al usuario.

Otro elemento que me gusta es la paleta de colores nueva que se ha generado, con una serie de varios colores, los de los botones y alertas y finalmente la escala de grises.

El siguiente elemento importantísimo en este sistema es el del grid, que se ha actualizado bastante, han variado algunos tamaños. Esto hace que el sistema anterior sea incompatible en cuanto a tamaños… y por tanto hay que hacer un replanteamiento bastante importante en cuanto a los tamaños de pantalla sobre los que queremos trabajar. Aún así, también se han hecho muchas mejoras para simplificar su aplicación. Sin duda habrá que dar un repaso en profundidad a la información sobre el nuevo funcionamiento del grid, que valdrá la pena.

Otro detalle importante, siguiendo con la parte del grid es el de la alineación vertical de los distintos bloques. De la misma forma, cuando no completamos todas las columnas, podemos cambiar el comportamiento horizontal, hasta ahora sólo alineado a la izquierda. Y a esto podemos sumar una forma mucho más sencilla de ordenar los elementos como queremos.

El siguiente elemento básico es que han cambiado las fuentes a un sistema mucho más estándar y compatible con todos los dispositivos; se ha seguido una regla publicada sobre fuentes nativas de Smashing Magazine. Además, se han aplicado ligeros cambios en la tipografía, que siempre son de agradecer para dar una mayor flexibilidad a la hora de mostrar contenidos por pantalla; de forma similar se ha hecho con las tablas, que aunque no varía en exceso lleva algunos detalles visuales interesantes.

Algo que me ha gustado bastante es la mejora en las alertas, sobre todo porque se ha planteado un sistema más extendido (que hasta ahora parecía que sólo se pudiera poner una simple línea de texto).

El gran nuevo elemento son las card, que es el sistema de crear contenedores, más parecido al concepto Android Material. Estos elementos dan mucho juego, son bastante ampliables y configurables y van a requerir de una gran cantidad de tiempo para aprenderse todos sus detalles.

Otro de los componentes nativos que es muy importante en determinados sitios es el del carousel, que incluye algunos elementos nuevos para hacerlo más visual, como el de los indicadores y textos. De la misma forma, aunque sin grandes cambios, hay detalles en los sistemas de collapse que permiten multi-target y que ayudarán a facilitar cómo y cuándo mostrar determinados elementos.

Uno de los elementos que quizá se haya quedado corto es el de los dropdowns en el que sigo teniendo en falta la opción de al menos un nivel de sub menú por defecto en el sistema. Seguramente también para algunos los formularios deberían evolucionar algo más, aunque creo que el hecho de que la validación automática (sin necesidad de recargar) haya añadido unas buenas mejoras, va a suplir cualquier otro cambio. En la misma línea de las tablas tenemos las ventanas modales, que tampoco han sufrido grandes cambios aunque sí algunos detalles que ayudarán a mejorar la visualización de sus contenidos.

Otros elementos como la navegación o la barra de navegación tampoco lleva muchas mejoras en sí, pero sí que incluyen algunos detalles que mejoran todo el funcionamiento, al igual que lo hacen los popovers que incluyen mejoras en su contenido.

Entre las utilidades, una de las interesantes es la de los bordes, que hasta ahora había que ponerlos a mano mayormente. Y la siguiente es la de los tamaños, que en general las horizontales no suelen ser muy problemáticas pero sí las verticales cuando trabajas con muchos bloques; ahora te permitirán definir alturas y anchuras de los bloques de forma sencilla.

Y finalmente el cambio quizá más curioso es que la nueva versión no incluye ninguna biblioteca de iconos por defecto, por lo que simplemente te recomiendan una lista de posibilidades.

Como opinión personal, el cambio de la versión 3 a la 4 es a veces un poco traumática, principalmente por la mentalidad de las cards, aunque el resultado es ahora más plano (más Material) y a mucha gente no le acaba de convencer, creo que esta nueva versión aprende de algunos errores del pasado, mejora muchos elementos con pequeños detalles, y sin duda creo que hará la experiencia mucho más agradable para los usuarios, principalmente en aquellos que usen tecnologías móviles. Y si quieres comentar a trastear, sólo has de probar los distintos ejemplos de casi todos los elementos de esta nueva versión.

Código de Google Analytics, modo completo

Google Analytics es una herramienta muy útil, pero hay que tener en cuenta que no es tan sólo un “contador de visitas” (que también). Si realmente quieres aprovechar al máximo esta herramienta uno de los primeros pasos es el de la configuración del código.

Por norma general Google te da un código, lo pones y eso funciona. Pero ese sistema es extremadamente sencillo (aunque muy funcional). Si realmente quieres aprovechar toda su potencia lo mejor es ir un paso más allá y aplicar más funciones y funcionalidades.

Para comenzar tengamos presente un código básico pero completo, sin muchas cosas (pero sí que permitan recoger toda la información posible).

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date;
ga('create', {
'trackingId': 'UA-XXXXX-Y',
'cookieDomain': 'auto',
'allowLinker': 'true',
'sampleRate': 100,
'siteSpeedSampleRate': 100,
'allowAnchor': 'true',
'cookieExpires': 63072000
});
ga('require', 'linkid');
ga('require', 'displayfeatures');
ga('send', {
hitType: 'pageview'
});
ga(function(tracker) {
console.log(tracker);
});
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

Con este código tenemos una base. Lo primero a cambiar es el trackingId UA-XXXXX-Y con el tuyo. Este código está pensado para sitios con sólo un dominio (sin subdominios ni otros dominios). Básicamente carga sistemas para que la medición y adquisición de datos sea lo más cercana al 100% y así tener todo bien guardado en el panel de Analytics.

A partir de aquí podemos ampliar con determinadas funciones que nos pueden ayudar en otros casos.

Por ejemplo, si tenemos varios subdominios o dominios, podemos usar esto:

ga('require', 'linker');
ga('linker:autoLink', [example\.(com|de|es|fr|it)$]);

Esto tratará todos los dominios como si tuvieran la misma cookie, de forma que los usuarios que cambien de dominio o subdominio se tratarán como la misma sesión e indentificador.

¿Quieres trackerar usuario a usuario? Se puede si mandas un identificador único de usuario a la plataforma.

ga('set', {
  'userId': 12345
});

O por ejemplo, si quieres evitarte eso de “las cookies de terceros”, que se centra en los datos no anónimos que se puedan enviar a Google, puedes utilizar una herramienta que seguirá almacenando datos de uso de tu sitio, pero sin relación con los usuarios.

// -DNT IF START- Si el Do Not Track está activado
ga('set', {
  'anonymizeIp': 'true'
});
// -DNT IF END-

Y para acabar tenemos el sistema de e-Commerce, que podría tener una apariencia tal que esta.

ga('require', 'ecommerce');
ga('set', 'currencyCode', 'EUR');
ga('ecommerce:addProduct', {
'id': 'P12345',
'name': 'Android T-Shirt',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'price': 29.20,
'quantity': 2,
'coupon': 'SUMMER_SALE13',
'position': 2,  // VALOR ENTRE 1 y 200, si es un listado.
'dimension1': 'Member', // 'dimension' ENTRE 1 y 200
'metric1': 28 // 'metric' ENTRE 1 y 200
});
ga('ecommerce:setAction', 'purchase', {
'id': 'T1234',
'affiliation': 'Google Store',
'revenue': 123.21,
'tax': 10.78,
'shipping': 3.55,
'coupon': 'SUMMER08',
'option': 'Visa'
});
ga('ecommerce:addPromo', {
'id': 'SHIP',
'name': 'Free Shipping',
'creative': 'Shipping Banner',
'position': 'banner_slot_1'
});
ga('ecommerce:send');

A partir de aquí podemos jugar con distintos elementos. Por ejemplo, si estás desarrollando o probando si el código de Analytics funciona, puedes sustituir temporalmente la llamada del javaScript del “normal” al de “debug”.

Normal: <script async src='https://www.google-analytics.com/analytics.js'></script>

Debug: <script async src='https://www.google-analytics.com/analytics_debug.js'></script>

Y otro elemento o detalle importanmte que a veces no tenemos presente. En muchas ocasiones por temas de SEO he comentado sobre el “rel-canonical”. Pero esto no es tan sólo para que un buscador guarde una URL sin duplicados, sino que a la hora de agrupar datos de webs también es muy útil.

Seguramente tienes alguna página en la que le has de pasar parámetros, pero estos parámetros en realidad no aportan nada como tal a la analítica. En este caso y reaprovechando el concepto del canonical, se puede indicar (o sobre escribir) la información de la URL que se manda a Analytics.

ga('send', {
  hitType: 'pageview',
  page: '/URL/LOQUESEA/'
});

Esto, por ejemplo, permitiría que URL tal que estas:

http://example.com/url-de-test/
http://example.com/url-de-test/?return=http://example.com/login/
http://example.com/url-de-test/?utm_source=Twitter

Se consideren lo mismo, ya que a nivel analítico es mejor agregar esta información que no tenerla por separado y ensuciando los datos.

Para acabar, como Bonus Track, existe un pequeño plugin de Analytics que ayuda a medir el scrolling por donde el usuario está pasando. Se llama Scroll Depth y te mostrará en Analytics si el usuario ha visto el 0%, 25%, 50%, 75% o llega al 100%, es decir, al final de la página…

Verificar un certificado SSL/TLS

Ya expliqué cómo conseguir un certificado SSL/TLS gratis, pero… ¿está bien configurado? Muchas veces puede parecer que sí, pero en ocasiones aceptamos los errores que nos da en una primera ocasión y después nos olvidamos de ello, por lo que una mala configuración nos lleva al “a mi me va bien”.

Para verificarlo, existen varias herramientas, aunque personalmente me quedo con la de SSL Labs y su SSL Server Test.

Tan solo has de indicar tu sitio web y esperar a que aparezca tu nota. Cualquier nota que aparezca que sea menor de A es preocupante, por la razón que sea. En el propio sitio te indicarán documentación en la que te podrás informar sobre qué problema hay, si es grave o no y qué hacer en cada caso.

Certificado SSL/TLS gratis

Hasta hace un par de años la seguridad web era muy básica. Pocas personas que no tuvieran un comercio electrónico se preocupaban de la seguridad de cualquier tipo de información que se transfiere entre el usuario y el sitio web.

Aunque en general una web informativa no necesitaría necesariamente de estar cifrada, es algo que no cuesta nada implemantar y que, por ejemplo, si tu usuario está en una WiFi pública sin cifrar permitiría que su clave no se transfiera abierta a posibles mirones.

Para conseguir un certificado, hasta ahora tenías que pasar por el aro de los grandes como Symantec o Comodo, pero desde hace una temporada existe el proyecto Let’s Encrypt que han empujado la Linux Fundation, Mozilla, Akamai, Facebook, OVH, Google… y que básicamente es un sistema que permite crear servidores de autenticación.

Basado en este sistema nos encontramos un sitio web sencillo que, con esta tecnología, nos permite crear certificados gratuitos. Se llama SSL for free.

Cuando entras, lo primero que recomiendo es registrarte (sino lo tendrás que hacer después). Una vez eso, en la misma página inicial, puedes poner tu dominio (o dominios y subdominios). Por ejemplo, puedes escribir algo como:

example.com www.example.com

Cuando hayamos realizado esto tendremos los 3 bloques de información que necesitamos:

  1. Certificado
  2. Clave SSL
  3. Certificado de Autoridad

Con estos 3 elementos podemos configurar nuestro servidor web o ponerlos en nuestro panel de alojamiento web.

Una vez hecho esto, en el mismo sitio web tenemos la pestaña de Certificates donde podremos renovar, revocar y eliminar los certificados que tengamos activos.

Sin duda, a partir de ahora, tener tu propio sitio web con certificado SSL/TLS ya no será un coste añadido.

Configura GMail de GSuite como un ninja

Cuando vamos a configurar las cuentas de correo de GSuite de Google (dando por hecho de que ya tienes dado de alta tu dominio), nos encontramos con diferencias varias en la documentación de ayuda. En este artículo pretendo dar una explicación resumida de cómo configurar correctamente un dominio y sus entradas DNS para que esté al 100% para GMail.

Lo primero que hemos de hacer es entrar en el panel de administración. para ello hemos de visitar una URL del estilo a:
https://admin.google.com/example.com/

Una vez hayamos entrado con nuestro usuario y contraseña haremos la verificación de varios puntos:

  1. Que nuestro dominio(s) esté dado de alta
  2. Configuración de entradas MX: estas entradas son las que básicamente configuran que tus correos funcionen.
  3. Configuración del SPF: es un sistema que permite que sólo se pueda enviar correo desde GMail con tu dominio. Esto valida que el correo es de un usuario verificado.
  4. Configuración del DKIM: este sistema permite que el destinatario del correo pueda verificar que se ha enviado desde un servidor correcto y por tanto el que recibe el correo sabe que el que lo manda es de fiar.

Para verificar el dominio o dominios que queremos configurar iremos a la opción de Dominios del panel.

Allí tendremos una lista de los dominios a configurar. Se pueden configurar dominios principales y dominios “alias”. En cualquier caso, el sistema es el mismo.

Lo siguiente a revisar es en tu registrador de dominios o donde tengas configuradas las DNS. Las DNS a configurar para el correo (entradas MX) son las siguientes:

example.com MX 10 aspmx.l.google.com
example.com MX 20 alt1.aspmx.l.google.com
example.com MX 20 alt2.aspmx.l.google.com
example.com MX 30 alt3.aspmx.l.google.com
example.com MX 30 alt4.aspmx.l.google.com
example.com MX 30 alt5.aspmx.l.google.com

Esta configuración permite 3 niveles de prioridad (10, 20 y 30) y 7 servidores de recepción de correo. Con este sistema es improbable que GMail deje de recibir correo aunque Google falle mucho.

La siguiente entrada DNS a configurar es la del SPF (Sender Policy Framework):

example.com TXT “v=spf1 +include:_spf.google.com -all”

Depende de tu servicio de DNS, el texto puede ir o no entre comillas.

Cuando las entradas DNS están configuradas correctamente, se puede validar o revalidar el dominio (aunque si ya se ha hecho, no es necesario volverlo a hacer).

Para acabar hay que configurar el DKIM (DomainKeys Identified Mail). Para ello hemos de cambiar de lugar en el panel e irnos a la sección de Apps y allí a las del propio GSuite.

Cuando estemos en la zona de GMail, encontraremos una sección llamada Autenticación de Correo. En esta sección nos aparecerá un menú desplegable con nuestros dominios, así que seleccionaremos el que nos corresponda y pulsaremos en generar la clave correspondiente.

El tipo seguridad intentaremos que sea la máquima posible, actualmente en 2048bits, y este sistema nos dará una entrada DNS a añadir similar a la siguiente:

google._domainkey.example.com TXT “v=DKIM1; k=rsa; p=0000…0000AB”

La clave es mucho más larga y, al igual que antes, al ser una entrada TXT hay que verificar si el texto va o no entre comillas.

Una vez esté la entrada añadida hemos de verificarlo, para que Google compruebe la identidad.

A partir de este momento, GMail para GSuite estará 100% funcionando a su máximo rendimiento tanto en servidores de correo como en verificaciónd e identidad para que nadie puedad impersonarte si ser verificado.

Recursos útiles para Bootstrap

Porque en el mundo hay gente que hace cosas brutales, este es un listado para ellos y sobre todo para los que utilizan Bootstrap:

Ampliación

  • Jasny: una ampliación con elementos interesantes.

Fuentes

Selectores

Imágenes

Vídeo

Utilidades

Herramientas

Themes