Author Katrin Poison Estudio

camara_sola-01

tipos de imágenes para subir a tu web o blog: cual elegir y por qué

Archivo base¿ Qué tipos de imágenes digitales son las más usadas?

Consideraremos dos tipos de imágenes digitales: las vectoriales y los mapas de bits

Imagen vectorial o vector: es un tipo de imagen creada con un programa de diseño. Normalmente se utiliza para los logotipos, los iconos y  las  ilustraciones o los dibujos.

La característica principal de los vectores es que cuando se amplía la imagen no se “pixela”.Es decir, se ve perfectamente definida a todos los tamaños.

Mapa de bits: es un tipo de imagen compuesta por infinidad de puntos, denominados “píxeles”, cada uno con un color y una luminosidad concreta. Se utilizan en fotografía porque la gama de colores es mucho más amplia que en los vectores.

Cuando se agranda una imagen de este tipo llega un momento en que la imagen pierde nitidez y se visualizan los puntitos que la componen, se “pixela”.

Tanto los vectores como los mapas de bits se guardan en archivos gráficos con diferentes formatos. Los mapas de bits ocupan mucho más espacio que los vectores.

¿Cuáles son los formatos más convenientes para subir a nuestra web?

 En general, la mayoría de las entradas a los blogs se acompañan por algún tipo de imagen  que añada valor al contenido, solemos utilizar los mapas de bits, en particular estos tres formatos:

    JPG o JPEG: el más común. El formato típico de las cámaras de fotos y de las que obtenemos con los móviles.

    PNG: recomendado para logotipos y gráficos en los que necesitas conservar el fondo transparente.

    GIF: se utiliza en animaciones.

¿ A qué nos referimos con  la expresión “tamaño de imagen” y “peso de la imagen”?

El tamaño de la imagen es la dimensión que ocupa en una pantalla o cuando se imprime una foto en papel. Podemos hablar de centímetros, 13 x18 cm, pero es preferible que lo definamos en píxeles, 1024×768 píxeles.

Como orientación diremos que una imagen es:

    Grande cuando tiene un tamaño igual o mayor a 1024×768 píxeles

    Mediana cuando el tamaño va de 320×240 a 1024×768 píxeles

    Pequeña cuando el tamaño es menor a 320×240 píxeles

    Muy pequeña cuando es menor a 100×100 píxeles

El peso de la imagen es lo que ocupa el archivo en la unidad de almacenamiento. Por ejemplo, en un disco duro o en un pendrive. Cuanto más pese la imagen  menos archivos se pueden guardar ya que la capacidad de almacenamiento es limitada.

A nosotros lo que nos interesa es que no sea muy pesada para que la carga de nuestra página web sea más rápida.

Aproximadamente se considera que una imagen es:

    Pesada si tiene 1 MB o más

    De peso mediano si va de 300KB a 1 MB

    Ligera si su peso es menor de 300KB

    Muy ligera si el peso es inferior a 100KB

 

 

burro

mejorar la velocidad de carga de la web 1 : optimización de imágenes

Velocidad de carga de una web  y optimización de imágenes

¿Qué es la velocidad de carga de una web?

La velocidad de carga de una web es el tiempo en que tarda en aparecer esa página de forma completa en la pantalla del usuario, con sus imágenes, sus estilos y sus funcionalidades.

¿A qué afecta y cómo?

Cuando una página web tarda mucho en cargarse, el usuario se impacienta, y tiene una percepción negativa que hará que evite navegar por esa web e incluso hable mal de ella con otros usuarios. Además, esa demora en la carga es interpretada por los navegadores de tal forma que van penalizando el posicionamiento de la misma.

Uno de los factores que afectan a la velocidad de carga es la optimización de las imágenes que utilizamos en nuestra web o blog.

Optimizar quiere decir que la imagen tenga la calidad más alta, con el tamaño de archivo más pequeño. Es decir, que la imagen “pese” poco y se vea bien.

Para conseguir esta optimización debemos tener en cuenta:

El tamaño de la imagen: debemos elegir el tamaño al que se va a visualizar realmente. Si la imagen tiene 1920×1080 píxeles, por ejemplo, y el tamaño máximo real al que se verá en una pantalla normal puede ser de 800 x 600 píxeles, reescalaremos la imagen a esta medida

La compresión de la imagen: puede perder algo de calidad pero si se hace apropiadamente, la mayoría de los usuarios ni se dará cuenta. Es la forma de conseguir que los archivos pesen menos.

optimizacion-01

Algunas herramientas disponibles para optimizar imágenes:

  1. Tiny PNG-app gratuita
  2. GIMP- gratuita
  3. Adobe Photoshop
  4. JEPG mini-hay versión web gratuita
  5. ImageOptim es un software para Mac
  6. Trimage es un software de Windows

La carga en paralelo de las imágenes: consiste en utilizar otro dominio o subdominios para almacenar imágenes, mientras el sistema atiende el resto de llamadas del servidor, estas imágenes se van cargando en paralelo.

Para la mayoría de las páginas no será necesario realizar la carga en paralelo, sobretodo si no son muy extensas y no presentan un volumen alto de imágenes. Mediante el redimensionamiento de la imagen y la compresión del archivo conseguiremos mejorar notablemente nuestra velocidad de carga.

 

el Seo y las imágenes: cómo funciona el posicionamiento de imágenes

¿Por qué es conveniente dar un nombre descriptivo a las imágenes?

Los nombres generales, “foto-portada.jpg”,”foto1.jpg” …etc. no aportan ninguna idea de cual es el contenido de la imagen. Google no reconoce las imágenes sino que se guía por los nombres para interpretarlas y dar posicionamiento. Es mucho mejor poner nombres un poco más descriptivos “mujer-con-perro.jpg”,”moto-roja.jpg”.

Tener en cuenta la etiqueta alt de la imagen y rellenar con una descripción más detallada. Esto ayudará a identificar correctamente la imagen y a clasificarla.

9 (3)

mejorar la velocidad de carga 2: usar la extensión Google PageSpeed Insight Tool

¿Qué es Google PageSpeed Insight Tool?

Google PageSpeed Insight Tool es una extensión del navegador Chrome de Google. Las extensiones son pequeñas aplicaciones que añaden funcionalidades extras al navegador, en concreto esta extensión  nos ayuda de tres maneras:

Lo primero que hace es analizar la velocidad de carga de nuestra página web. Escribimos la URL de nuestra página en la casilla pertinente y seguidamente nos proporciona un ranking sobre una puntuación de 100 que nos orienta para saber si nuestra página se carga bien en el ordenador y en dispositivos móviles.

Lo segundo que hace es  sugerirnos qué puntos podemos mejorar en nuestra página en cuanto a estilos, javascript  e imágenes para ganar en velocidad de carga. Nos dan un listado con cada posible corrección.

Lo tercero, muy práctico, es que nos proporciona los recursos que podemos cambiar en nuestra página web para acelerar la carga. En particular nos entrega en un archivo comprimido los ficheros css, los ficheros js y las imágenes optimizadas. 

          Tan sólo con sustituir estas imágenes en  nuestra web veremos que el ranking de velocidad de carga de la  página se incrementa notablemente. Hay que tener en cuenta que las imágenes nos las dan en una sola carpeta y que tendremos que sustituirlas en la ubicación correcta. Si tenemos muchas carpetas de imágenes en la web nos podremos guiar por el path  que está en el listado de sugerencias de optimización.

google-pagespeed-insights

 

Instalación de la extensión o versión online

Podemos utilizar la extensión en su versión online o instalarla en nuestro navegador. Para ello iremos al menú del navegador y elegiremos la opción  Más herramientas->Extensiones  y al final de la página hay un enlace Obtener más extensiones  que nos llevará a Chrome Web Store. 

Para instalar la extensión clicar sobre Gratis , que aparece en la esquina inferior derecha.

 

 

logo_zuikos_portf

diseño de logotipo para Zuikus, expertos en streaming

El diseño del logo para Zuikus, streaming experts, está pensado para destacar en este mundo de la comunicación. Es un mundo competitivo en el que identificarse con claridad es una prioridad. De ahí que el logo sea esencialmente el nombre de la empresa y se haya jugado con la perspectiva de las letras que lo componen y su tamaño.

La utilización del color naranja, como una onda que se desplaza sobre la parte superior del nombre, aporta una alta visualización por el contraste sobre el gris, esto afecta significativamente a la manera con que se capta la presencia de una marca. Si la interpretamos como ondas de luz o un foco nos llevará al mundo de la imagen y la  comunicación: cámara,vídeo, televisión, cine…

En el plano inferior figura el servicio que dan, escrito en inglés pero comprensible de forma intuitiva para el que no lo habla. En un mundo interconectado, las nuevas tecnologías tienen carácter internacional. Con este diseño de logo de Poison Estudio, se reafirma la idea de que Zuikus es una empresa novedosa con grandes profesionales expertos en streaming.

Imagen calendario reservas en página web

Hacer reservas a través de una página web

 

 

¿Sabes que existen funcionalidades para hacer reservas desde tu página web?

 

Tanto si diriges un centro de belleza, trabajas como asesor, abogado o director de un hotel, el poder hacer reservas a través de tu web es, sin duda, una herramienta muy poderosa para tu negocio.

Hemos hablado con muchos propietarios de negocios y la mayoría ni se han planteado la posibilidad de ofrecer  esta opción a sus clientes, el permitirles reservar una cita directamente de su sitio, pero al comentarles que es sencillo implantar esta funcionalidad, consideran esta opción muy interesante ¿es este tu caso?. Si has creado o piensas crear para tu negocio una página web en WordPress será muy sencillo para ti instalar, o mandar instalar esta funcionalidad por mucho menos de lo que imaginas. 

7 razones por las que tener una herramienta de reservas en tu web, es una buena idea

1. Das a tus clientes la opción de programar citas con rapidez y comodidad

Si eres una persona muy ocupada, tus clientes probablemente también. Cuando una llamada telefónica es demasiado esfuerzo (y seamos sinceros, a veces lo es. Por ejemplo: comunica, estás atendiendo a alguien en ese momento…), dar la opción de reservar una cita desde tu página web no es sólo un punto positivo, si no también un gran servicio al cliente.

2. Elimina la necesidad de papeles que fácilmente se pueden perder

¿Quién no ama los post-its? Son grandes pequeños pedazos de papel, para tomar notas importantes, que muchos de nosotros usamos para ayudar a mantener nuestras vidas en orden. También tienen una manera natural de perderse durante el día a día  y la gestión de una empresa.

A menos que seas una persona extremadamente organizada, tratando de mantener todas tus citas en el papel y en orden, puede ser un desafío. Si has extraviado alguna vez una cita, entonces puede ser un buen momento para un método nuevo.

3. Es una solución muy económica

No te puedes ni imaginar que fácil y económico es implantar esto en tu página web, no se necesitan desarrollos a medida lentos y costosos.

4. Mejorarás tu imagen

¿Tú que pensarías de una empresa que tiene la posibilidad de hacer este tipo de reservas online? Da una imagen profesional, seria y de auténtica preocupación por dar más servicios a tus clientes.

5. Puede ayudar a que tu negocio esté más organizado

La gestión de una empresa de éxito se reduce a menudo a una visión clara y una buena organización. Pero seamos sinceros, la gestión de una empresa y mantener las cosas en orden es difícil, especialmente cuando eres el dueño de un negocio y tienes que hacer malabares con los empleados y el mantenimiento general.

Cuando se trata de administrar un negocio, debemos utilizar toda la ayuda que podamos conseguir. 

6. Autogestionado

Aprenderás rápidamente como gestionar tu propia agenda, no hacen falta grandes conocimientos informáticos.

7. Tus clientes pueden hacerte una reserva desde el móvil o tablet

Hoy en día aprovechamos esos pequeños espacios (metro, autobús, sala de espera del médico, etc.) para hacer estas pequeñas gestiones. Así le darás a tu cliente la posibilidad de poderlo hacer a través de tu página web (que se adapta a su dispositivo móvil) sin tener que hablar en sitios donde es incómodo hacerlo.

Plugins de Reservas

Nosotras utilizamos diferentes plugins según el tipo de negocio al que se lo implantemos. Appointments+ by WPMU DEV, Team Booking Plugin, Checkfront, Bookly — Responsive WordPress Appointment Booking Plugin ó WP Booking Calendar. Analizamos cada caso individualmente y planteamos opciones a nuestros clientes. ¿Qué te parece?

 

 

 

malware-virus-wordpress-bilbao

Ataques masivos de Malware/Virus a páginas web

Aviso a todos nuestros clientes de páginas web.

Desde hace unos meses se están produciendo ataques masivos a paginas con WordPress, a niveles de estar siendo infectadas 5000 páginas al día.

Desde Poison Estudio te contamos cómo puedes protegerte.

Si lo haces tú:

  1. Instala ó actualiza el plugin “WORDFENCE”. Sigue los pasos que te indique.
  2. Actualiza el WordPress a la última versión.
  3. Actualiza los plugins y el tema de la página a la última versión.
  4. Instala y programa un plugin para hacer copias de seguridad de tu página web como “BackUpWordPress” por si tenemos que recuperar una versión anterior de la web.
  5. Comprueba que todo funciona y se ve de forma correcta.
    * Si tu plantilla / wordpress es antiguo corre el riesgo de que algún detalle no funcione correctamente o se visualice de otra forma, no es habitual pero puede ocurrir.

Si lo hacemos nosotros:

  • Te realizamos todo lo anterior.
    * Si ocurre algo ajeno a nuestra responsabilidad (porque es una página antigua) el arreglo se presupuestará aparte.

Si lo hace una empresa de seguridad informática:

  1. Seguridad Básica 12 meses: desinfecciones ilimitadas, alerta de aviso de malware pero no incluye bloqueo de ataques.
  2. Seguridad intermedia 12 meses: desinfecciones ilimitadas, alerta de aviso de malware y WAF (herramienta de bloqueo de ataques, ideal para no tener que estar actualizando la web constantemente).
  3. Seguridad avanzada 12 meses : lo anterior más auditoría de seguridad con corrección de vulnerabilidades.
     

En Poison Estudio trabajamos para que no te lleves sustos

Página web Kroma Studio

Página web para Kroma Studio

Kroma Studio es una emPágina web Kroma Studiopresa de diseño gráfico especializada en la rotulación de vehículos, vinilos y señalización entre otros servicios.

Para Kroma Studio, hemos creado una página web con un fondo negro, tipografía en color blanco y unos sliders muy atractivos para conseguir un mayor impacto visual, en los sliders hemos insertado unos eslóganes que van acompañados de unos botones de “saber más”para acceder directamente sobre la información.

La navegación a través del menú la página es muy sencilla, cada vez que pasamos por una de las secciones del menú la tipografía cambia de color para saber en que punto exacto del menú estamos.

Podemos destacar también, el apartado de contacto en el que además de las habituales formas de contacto(mapa, teléfono, email)le hemos añadido un formulario.