Category Páginas web

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

 

 

Vota esta página

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.

 

Vota esta página

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.

 

 

Vota esta página

portafolio_final_ikeamendi

página web para Reformas Ikeamendi:la información breve y directa

Una página web básica y eficaz

La página web de Reformas Ikeamendi se caracteriza por una estructura básica  de menú de cabecera y scroll no muy extenso. El pie de página muestra un enlace al mapa de localización, la información de contacto, un buscador y los iconos de redes sociales como contenido.

Se trata de una  web  donde  en la página de inicio se identifica la empresa mediante el logo, su nombre y el  teléfono de contacto destacando sobre una foto de fondo. El logo con el casco rojo, el nombre, “Rehabilitaciones y Reformas Ikeamendi” y la foto con obreros trabajando en interiores dan una información clara y suficiente sobre la actividad de la empresa. Sin necesidad de entrar a leer más, el internauta se hace una idea del tipo de servicios que ofrecen.

Cada enlace del menú nos va llevando después a páginas con entradas sobre los diferentes trabajos que realizan ilustradas por fotografías de los mismos. Se repite la estructura básica y el scroll corto, y hay muchos accesos al enlace de contacto lo que facilita  encontrar esta información tan importante.

La utilización del fondo negro hace resaltar el rojo del logo y los enlaces. No se ha utilizado un rojo estridente que pueda molestar sino que tiene la intensidad justa para destacar y guiar al cliente por las zonas de navegación: los enlaces visitados y los botones.

Dentro de un gremio tan competitivo como la construcción estar presente en Internet es muy importante. La página de Rehabilitaciones y Reformas Ikeamendi por la concisión y brevedad del mensaje, permite que el cliente esté informado de la existencia de la empresa de manera inmediata, nada más entrar a la página web teniendo más opciones de recordarla, navegar por ella y contratar sus servicios.

La información breve y directa es la primera clave para llamar la atención. En esta página web diseñada por Poison Estudio este objetivo queda claramente cumplido.

Si necesitas que te ayudemos a preparar una estrategia para  tu negocio ponte en contacto con nosotras, échale un vistazo a nuestro blog y portafolio en www.poisonestudio.com.

 

 

 

Vota esta página

halabazan

página web bilingüe para Halabazan, tienda de camisetas y complementos

portafolio_final_halabazan-01La página web de camisetas y complementos hechos a mano.

Hala bazan… es así como terminan los cuentos en euskera y es así como empieza nuestro camino, nuestra historia” .

Esta es la frase con la  que  Karlos presenta su tienda online de productos hechos a mano. Cada uno de ellos es único y está realizado  con especial atención y detalle. De igual forma, la página web, ha sido realizada con una distribución sencilla, una presentación cuidada y refleja muy bien  el carácter  del negocio de nuestro cliente.

En la web de Halabazan destaca el menú de navegación, situado a la izquierda de la pantalla, en una columna donde el logo de la empresa se identifica con claridad.  Cada uno de los enlaces que componen este menú te lleva a  pantallas en las que se mantiene la estructura en dos columnas de la página inicial;esto facilita  la localización de las diferentes secciones.

Por ejemplo,sobre la columna de la derecha clickando la opción “productos” se ven   las fotografías de  las camisetas y complementos agrupados por tipo de artículo. La tienda es tremendamente sencilla de utilizar.

Y colorin, colorado este post ya se ha acabado o lo que es lo mismo Hala Bazan…

Vota esta página

iconos e ilustraciones

iconos e ilustraciones para Kukumiku, crowdfunding para financiación solidaria

portafolio_kukumiku-01

 El diseño de iconos e ilustraciones  de Kukumiku, una plataforma web solidaria.

La página web de esta plataforma está destinada a financiar los proyectos que desees mediante la recaudación de aportaciones online.

Es importante recalcar que no solo se trata de hacer donaciones a través de la web, sino de desarrollar nuevos proyectos según la demanda e intereses particulares de los internautas. Esta opción del crowdfunding permite desarrollar acciones muy diversas en distintos puntos del planeta.

Poison estudio ha realizado la maquetación y el diseño gráfico de esta página web teniendo en cuenta el carácter global y humanitario de Kukumiku. Los iconos son sencillos, de comprensión intuitiva y con un tamaño adecuado para la visualización rápida. La información se encuentra  distribuida de forma concreta en cada sección de la página web, facilitando la comprensión del mensaje, aportando claridad y pudiendo disfrutar de una navegación cómoda para el usuario.

El objetivo del diseño de esta pagina web es hacer atractiva y diferente la idea de la cooperación y el desarrollo. El slider inicial muestra tres imágenes que añaden valores a esa idea inicial. Desplazándonos hacia abajo mediante el scroll llegamos rápidamente a localizar las opciones para interactuar cuyas ilustraciones e iconografía han sido diseñadas por Poison Estudio.

Kukumiku apuesta por la gente y desde Poison Estudio también lo hacemos. Proporcionamos páginas web que se adaptan a la personalidad de nuestro clientes. 

Vota esta página

blog_piedefruta-01

diseño de logotipo e imagen corporativa para Pidefruta

Diseño de logotipo para Pidefruta

La empresa Pidefruta realiza venta online y entrega a domicilio de hortalizas, verduras y frutas. Productos frescos y naturales que llegan a su casa para su mayor comodidad.  La empresa que se está logrando posicionar  de forma importante en el sector se ocupa princialmente del área de Bilbao y alrededores.

Esta novedosa tienda virtual de productos vegetales querían una imagen corporativa completa que reflejara  su forma de  ver el negocio . Poison Estudio ha creado para ellos el logo, la página web, los flyers, los carteles y las tarjetas de presentación.

El logo se basa en la imagen de una manzana roja de la que parten a modo de brazos unos lazos que parecen abrazar el nombre de la empresa.  Transmite la idea de producto sano y fresco,  y sugiere cercanía y confianza en el trato con los clientes. Estos son valores que pensamos que Pidefruta debe transmitir en su imagen corporativa.

 

 

 

Vota esta página

portafolio_final_eidabe-01

rediseño de página web para Eidabe, reestructuración de contenidos

Rediseño de página web y blog

Eidabe es una empresa que se dedica a la gestión cultural en diferentes ámbitos : ocio infantil y juvenil, producción teatral y  organización y gestión de eventos. Es una empresa joven  que basa su diferencia en la capacidad de su equipo para desarrollar actividades creativas y lúdicas de todo tipo.

La página web de Eidabe necesitaba un retoque de diseño y una restructuración de la información que contenía el blog. El acceso a las diferentes entradas de su blog resultaba complicada por eso la hemos remodelado. También se ha rediseñado la pantalla del calendario de eventos. En ella figuran los espectáculos y la fecha y lugar en que tendrán lugar y un buscador para encontrarlos.

Hemos mejorado la navegación a través del despliegue del menú de espectáculos, que considera ahora más opciones, según se vayan necesitando  a medida que progresan los eventos programados.

El resultado es ahora una web mejor estructurada, que queda a disposición de que el propio cliente la mantenga y la haga crecer de forma sencilla.

Desde Poison realizamos  cambios en el diseño de tu web. Siempre manteniendo la imagen más actual en la red.

Vota esta página

urbanbeerbilbao_screenshot

página web para Urban Beer Bilbao

La pagina web de la cerveza artesanal más bilbaína

pagina web cervezaUrban Beer es una fábrica de cerveza artesana y natural.
Elaboran sus propias recetas. Buscan el alma y el corazón de la cerveza, y necesitaban una página web que reflejara esa energía.

 

Utilizan materia prima de primera calidad y querían que su imagen se refrescara para lograr transmitir esa calidad que es uno de los pilares de su filosofía.

 

Nos llamaron concertando una cita en sus instalaciones, y así pudimos vivir en primera persona la experiencia de elaborar un producto con pasión, con ilusión, con dedicación. Tuvimos el privilegio de probar su cerveza y nos sorprendió el sabor, la diferencia, la suavidad y los diferentes aromas.

Arantxa e Iñigo se nos acogieron y transmitieron sus necesidades, enseñaron los estilos de imagen que les gustaban y les hicimos un prototipo de acuerdo a ello.

Como resultado de todo ello tenemos la página bilbaobeer.com que es una explosión de imágenes que muestran su producto, tiene una tienda online en la que puedes comprar su cerveza cómodamente y un blog donde podrás encontrar las últimas noticias sobre ellos y temas relacionados.

 

Es un lujo encontrar empresas que se dediquen a su pasión y formar parte, aunque sea por un instante, de su sueño.

Vota esta página