Como crear una web: 5 Gtmetrix y la optimización

por:

 

Como crear una web la optimización y GTmetrix

 

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

⚡ Cómo optimizar bases de datos fácilmente

por:

Cómo optimizar bases de datos fácilmente

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

Procesamiento del lenguaje natural con ElasticSearch

por:

Procesamiento del lenguaje natural con ElasticSearch

Uno de los problemas que se presentan con una mayor frecuencia hoy en día, es la realización de búsquedas textuales. Esto problema se puede resolver con muchos enfoques, desde una búsqueda exacta como permiten la mayoría de los lenguajes de programación, hasta la utilización de algoritmos de procesamiento del lenguaje natural.

¿Qué es el procesamiento del lenguaje natural?

El procesamiento del lenguaje natural, conocido también por sus siglas en inglés NPL consiste en desarrollar y aplicar distintas técnicas, metodologías y algoritmos que utilizan como entrada y/o salida texto o voz. La complejidad de este campo, es que agrupa conceptos como:

  • El reconocimiento de voz (traducir la voz en texto).
  • La síntesis de voz (traducir el texto en voz).
  • La traducción en tiempo real.
  • La identificación del idioma del usuario.

Además, hay que tener en cuenta que mientras que la escritura por ordenador es siempre igual, en el caso de la voz cada usuario dependiendo de su lugar, sexo, edad, etc presenta características distintas.

¿Qué es ElasticSearch?

ElasticSearch es un proyecto basado en Apache Lucene, que nos permite tener un servidor para realizar búsquedas. El proyecto fue creado por Shay Banon y tiene como principales características la velocidad de búsqueda y la escalabilidad. Este software es ampliamente usado en buscadores, e-commerce y para tratar el lenguaje natural.

Leer más

Tipografías gratis de gran calidad para tus proyectos ⌨️

por:

Tipografías gratis de gran calidad para tus proyectos

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

¿Cómo generar avatares para tus usuarios?

por:

¿Cómo generar avatares para tus usuarios?

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

¿Son tus correos SPAM? Compruébalo

por:

Te enseñamos a comprobar si tus correos son clasificados como SPAM o no

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.

la herramienta para comprobar el grado de spam

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

Cómo crear correos responsive fácilmente

por:

Cómo crear correos responsive fácilmente
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

Guía para aumentar el impacto social de tu web

por:

Guia para aumentar el impacto social de tu web

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

4 cursos online gratis de Google para el verano

por:

4 cursos online gratis de Google

En esta época veraniega en la que solemos disponer de mayor tiempo libre, solemos dedicarnos a practicar con mayor asiduidad nuestras aficiones, como la informática. Por ello os quiero recomendar los siguientes cursos online avalados por Google, ya que el verano puede ser una buena época para formarse.

 

Curso online gratis de Desarrollo Web

Este curso quizás sea el más interesante para aquellos que estén empezando con el desarrollo web, el mismo tiene una duración de 40 horas y está certificado por la Universidad de Alicante. La finalidad del mismo es enseñar los conceptos básicos del desarrollo web, para que el usuario que lo tome sea capaz de realizar una web propia.

 

Curso online gratis de Comercio Electrónico

Este curso resulta de gran utilidad tanto para todos aquellos que ya tienen su propio negocio físico y quieren transformarlo en uno digital, como para los que quieren empezar el suyo propio. La duración recomendada también son 40 horas y en este caso está certificado por la Escuela de Organización Industrial.

Leer más

¿Qué es y cuándo usar un CDN?

por:

Encabezado del artículo

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:

Arquitectura de un CDN

Leer más