Categoría: Web

Una vez que ya tenemos el diseño creado de nuestra web, es muy importante verificar si este diseño es óptimo o si por el contrario debe sufrir algunas modificaciones para que el rendimiento en general de la web sea mayor. Para todo ello, el administrador cuenta con una serie de herramientas, con las cuales puede “medir” lo bien diseñada que está la web.

Conceptos clave en la optimización

Para la optimización de páginas web, hay una serie de conceptos que se deben conocer tanto qué son, como el cómo afecta a mi web. Aquí detallo las más importantes:

• Tiempo de carga de página (Page load time): este concepto es bastante sencillo, se refiere al tiempo que tarda nuestra página en cargarse por completo. Según algunas informaciones Google toma en cuenta los tiempos de carga de página para el posicionamiento y este debería siempre estar en la medida de lo posible por debajo de 5s. Es muy recomendable tiempos de carga entorno a 2s ya que el usuario suele abandonar si tarda mucho nuestra página en cargar, además desde redes móviles los tiempos de carga suelen ser mayores, con lo que se agrava el problema.
• Tamaño de la página (Total page size): es lo que pesa nuestra página, hace un par de años, era un concepto poco importante porque nuestras conexiones eran lo suficientemente rápidas en este aspecto, hoy en día nadie quiere que al visitar x página gaste 15MB de su tarifa de datos. Así que hay que mantener esto lo más bajo posible, se recomienda que no sea muy superior a 1MB.
• Número de peticiones (Total number of requests): es el número de peticiones que debe realizar nuestro ordenador al servidor, para cargar la página completa. Una petición se puede generar por muy diversos motivos como: cargar una imagen, cargar un archivo javascript, cargar una hoja de estilos etc. El problema es que el servidor tarda un tiempo en atender cada petición, así que por muy rápido que sea nuestro servidor, si realizamos 200 peticiones siempre tardará un mínimo de tiempo, por el tiempo de procesar la petición. Aquí se recomiendan utilizar una única hoja de estilos para toda la web, pocos archivos de javascript y combinar las distintas imágenes o cambiarlas por código CSS si son botones, para reducir las peticiones.
• Número de peticiones a la base de datos: este dato no sale en GTmetrix, pero si nos sale a los administradores en nuestros CMS (si tenemos alguno instalado), esto nos indica cuantas consultas se tienen que hacer en la base de datos para mostrar la página. Como en el apartado anterior hay que minimizar al máximo el número de consultas.

Leer más

Como muchos sabréis una de las cosas en las que más me centro en el campo de web es en la optimización, por ello hoy os vengo a hablar de MySQLTuner, una utilidad para optimizar bases de datos.

La optimización de bases de datos

Una de las cuestiones más complejas a la hora de administrar una infraestructura o servidor web es configurar de manera adecuada todos los sistemas (y no, no basta con que funcione). Para ello es necesario conocer a fondo todos los programas que se utilizan y los múltiples parámetros que tienen cada uno de ellos, sin embargo, este proceso es muy costoso en tiempo. Además, una mala configuración entraña muchos riesgos, tanto de caídas como de seguridad.

Leer más

Una de las cuestiones complicadas respecto a la creación de contenido, es la elección de las fuentes. Cuestión que ya hemos tratado en Somos Binarios, en artículos como: cómo crear una web 9: La tipografía. Hoy os traemos un recurso donde podréis encontrar fuentes tipográficas de gran calidad, gratuitas y open source, para usar en vuestros proyectos.

The League of Moveable Type

The League of Moveable Type, es una iniciativa surgida en 2009 por un conjunto de tipografistas para proveer de fuentes de gran calidad a nuestros proyectos. Estas tipografías cumplen con las premisas de estar bien diseñadas, ser gratuitas, open source y estar pensadas para utilizar en pantallas.

Algunas de las fuentes realizadas por estos autores son:

• League Spartan
• Junction
• Ostrich Sans
• League Gothic
• Blackout
• League Script Number One
• Raleway
• Orbitron
• Sniglet
• Chunk

Leer más

Uno de los problemas comunes al que nos enfrentamos cuando queremos crear un proyecto web es cómo gestionar la privacidad de los usuarios. Distintos formatos de páginas y empresas, utilizan diversas técnicas pero hay una que viene siendo recurrente, el uso de un avatar o imagen del usuario.

¿Qué es un avatar?

Un avatar, de manera resumida, podríamos decir que es un imagen virtual que representa al usuario, normalmente con un aspecto similar a un comic o ilustración. Cuando decimos que representa a un usuario es porque tanto el avatar como el usuario suelen compartir algunas características, por ejemplo, el uso de gafas, pendientes, color de pelo, el llevar barba etc.

Leer más

Uno de los problemas que tenemos hoy en día los administradores de páginas web es que nuestros correos no sean leídos o peor aún, que caigan en la carpeta de SPAM. Por ello hoy os proponemos usar una herramienta para comprobar que nivel de SPAM tienen nuestros correos.

Comprobador de SPAM

Para comprobar el nivel de SPAM que tiene alguno de nuestros correos, lo primero que tenemos que hacer es tener los correos ya redactados (obvio). Luego deberemos entrar en esta web, para que nos proporcione una dirección de correo electrónico a la cual deberemos remetir nuestro mensaje a testear.

En este caso yo tengo que enviar el correo a esta dirección, pero a vosotros os saldrá otra ya que cada vez que entras en la página web anterior, os da una dirección distinta.

Leer más

Uno de los principales problemas que encontramos actualmente en el mundo de la informática es la cantidad de dispositivos que existen en el mercado. El principal problema que acarrea esto es la necesidad de adaptar el contenido a cualquier resolución, lo que se conoce como diseño responsive. Este diseño es muy utilizado en el mundo del desarrollo web, pero es un término que también se puede aplicar a otros aspectos, como los correos electrónicos.

MJML el framework para crear correos responsive

Si bien podríamos crear correos responsive haciendo uso de HTML, esto plantea multitud de dificultades. Por esta razón la comunidad ha creado este framework que nos ayuda a crear cualquier tipo de correo de manera responsive.

El framework se basa en un lenguaje de marcado (MJML), muy similar a HTML pero con sus propias etiquetas. Esto conjunto de etiquetas define un comportamiento, por ejemplo <mj-image> sirve para insertar una imagen.
Leer más

Uno de los principales problemas que nos encontramos los creadores de una web es conseguir atraer público a la misma. Para ello existen multitud de técnicas, pero en este artículo nos vamos a centrar en atraer más usuarios utilizando las redes sociales.

Análisis de las principales redes sociales

En primer lugar debemos elegir en qué redes sociales nos vamos a centrar, según el tipo de público que queramos atraer y el perfil de nuestro proyecto. Después deberemos crear los perfiles sociales para nuestros proyectos y finalmente empezar a publicar contenido.

Facebook

Facebook es la principal red social a nivel mundial, la considero una de las imprescindibles, debido a la cantidad de tráfico que nos puede traer. Además la compartición de nuestros artículos puede mejorar el posicionamiento.
La mejor técnica para ganar alcance que conozco es utilizar cuentas reales (tus socios, tu, un grupo de amigos, etc) que se van a encargar de publicar tus artículos en grupos de la misma temática.

Twitter

Twitter es otra de las redes sociales básicas para cualquier proyecto. Las mejores técnicas que conozco son:

• Seguir a personas influyentes en tu temática, y alguna vez mencionarlos junto con tus tweets.
• Aprovechar los hashtag para promocionar tus artículos/productos/servicios.
• Retuitear ocasionalmente a esas personas influyentes.
• Retuitear los halagos que te envíen los usuarios

Leer más

Hoy queremos enseñarte que es un CDN y cuando deberías usarla en tu proyecto.

¿Qué es un CDN?

CDN son las siglas de Content Delivery Network, en español sería una red de entrega de contenidos. Una CDN básicamente consiste en un conjunto de servidores distribuidos que contienen los ficheros que queremos transmitir. Esto implica múltiples ventajas:

• Si se cae un servidor, nuestro sistema resiste esa caída.
• El ancho de banda es mayor, lo que soporta un número superior de usuarios.
• El sistema es más rápido al tener una menor latencia, ya que una CDN suele tener los servidores distribuidos en distintos países, luego cada usuario accederá al servidor más cercano.

Además el sistema de CDN suele tener funcionalidades como un balanceador de carga, para no sobrecargar un servidor y enrutar las peticiones al servidor más rápido, un sistema de compresión de los ficheros a compartir o un sistema de caché para agilizar nuestro proyecto.

En la siguiente representación se puede ver un ejemplo de arquitectura de un CDN:

Leer más