Tal vez alguna vez te haya pasado que al entrar a una página web a la que frecuentas regularmente tengan cambios distintos a los que tenía la última vez que la visitaste. No hay de qué preocuparse la página sigue siendo la misma, probablemente ha pasado que estas frente a un Testing A/B.
El testing A/B es algo que no debe faltar y que no puedes perderte. Así que hoy vamos a ver en qué consisten estos test, cómo y por qué ponerlos en marcha.
¿Qué es a/b testing?
Testing A / B (también conocida como prueba dividida o prueba de depósito) es un proceso para comparar dos versiones de una página web, y así ver cuál tiene mejor aceptación.
En pocas palabras para ejecutar una prueba A/B, debes crear dos versiones diferentes de una página web, con cambios en una sola variable. Después se muestran a los usuarios al azar, y a través de un análisis estadístico determinar cual tiene mejor aceptación entre los usuarios.
¿Por qué se llama a/b testing?
Se llama así, ya que se está comparando dos opciones. En el cual solo hay una pequeña diferencia entre el control y el test.
A Control: esta suele ser la primera página web o elemento que ha diseñado.
B Test: necesita demostrar con una significación estadística que el test es una mejora sobre el control.
¿Por qué hacer a/b testing?
Testing A / B te va a permitir a realizar cambios adecuados en las experiencias de usuario. Esto te permitirá construir hipótesis y así ver que elementos afectan el comportamiento del usuario.
Al poder probar una idea contra otra esto hará que se reduzca el riesgo de fracaso debido a problemas simples. Las pruebas A/B también permiten resolver debates, ya que evita llegar a conclusiones equivocadas basadas en suposiciones a cambio de una resolución al problema con usuarios reales.
Prueba multivariable
Este tipo de test es más complejo porque compara más de una variable al mismo tiempo y se requiere de más combinaciones para hacer la prueba.
Para la prueba multivariable se necesita que el sitio tenga un tráfico mucho mayor para obtener una significación estadística relevante sometiendo a prueba una variable a la vez (como color, texto, posición, tamaño, etc.).
Cómo llevar a cabo A / B testing
1. Elija una variable para probar
Aquí establecerás qué variables son las que vas a probar. Las principales variables son el color, el tamaño, imágenes, la ubicación, contenido, llamada a la acción así como la relación con el resto de componentes.
2. Identifica tu objetivo
Tienes que pensar a profundidad que quieres conseguir al ejecutar la prueba A/B. Tu objetivo serán las métricas que utiliza para determinar si la variación es más aceptable que la versión original o no.
3. Generar hipótesis
Es importante decidir qué indicadores son los que se van a tomar como referencia para validar cualquier comparativa. Sólo sabiendo cómo se van a medir los resultados será posible poder tomar decisiones en tiempo real.
4. Usa una herramienta de prueba A / B.
Para hacer una prueba A / B en su sitio web, deberá usar una herramienta de prueba A / B.
Comparar sólo una variable cada vez para asegurarte de que la diferencia entre los diversos resultados es consecuencia de dicho cambio.
Tener mucho cuidado en el momento en el que se ejecuta cada test comparativo con el fin de que sea cuando los usuarios puedan ayudarte con sus decisiones.
5. Ejecutar test A/B
Aquí los visitantes de su sitio o aplicación serán asignados aleatoriamente al control o a la variación de su experiencia. Su interacción con cada experiencia se mide, se cuenta y se compara para determinar cómo se desempeña cada uno.
6. Analizar resultados
una vez que se complete el experimento, se deberá analizar los resultados. La herramienta a utilizar presentará los datos del experimento y le mostrará la diferencia entre el rendimiento de las dos versiones de la página y si existe una diferencia significativa.
4 herramientas esenciales para A/B Testing
1. Google Analytics
Permite probar hasta diez variaciones de una misma página para analizar cuál de ellas ofrece mejores resultados. Te permite mostrar las páginas a testear de forma aleatoria o marcando un porcentaje del tráfico para cada una de ellas y, para ir haciendo seguimiento, puedes entrar en la plataforma así como configurar la posibilidad de obtener actualizaciones a través del correo electrónico para ver el estado del experimento llevado a cabo.
Es una herramienta que permite testear tanto páginas web como aplicaciones móviles. La implementación es sencilla y para preparar el test no es necesario tener conocimientos de programación.
Es una plataforma que te permite ajustar, optimizar y personalizar tú sitio web sin ser necesario tener grandes conocimientos técnicos. También cubre el proceso de crear diversas versiones de una página para saber cuál de ellas tiene mejor conversión.
AB Tasty permite realizar tests A/B a la vez que testear diversas variaciones y personalizar contenido según el usuario que visita la página. Estos experimentos se pueden llevar a cabo tanto en una web como en sitios móviles y aplicaciones.
En el pasado tutorial, hicimos una réplica exacta de una página con file_get_contents and cURL. Sin embargo, de esta manera no hay forma de sacarle mucho provecho. Corres el riesgo de que te reporten por plagio o confundan tu proyecto por una página de pishing. El objetivo de este tutorial es obtener las habitaciones más populares de Isla Mujeres con PHP Simple HTML DOM Parser y llenar nuestro template que hemos diseñado previamente con Bootstrap.
La fuente de información será TripAdvisor, uno de las guías más completas para cualquier viajero. Cada vez que accedamos a nuestro proyecto, un script leerá inmediatamente los hoteles más populares según la URL que le hayamos indicado.
Cabe recordar que este es un ejercicio de carácter educativo. No busco promover el plagio de información, sin embargo, existen usos totalmente válidos para esta técnica.
Simple HTML DOM te permite extraer y manipular de manera fácil el html de un sitio web. De la misma manera como lo harías con jQuery o Javascript. Por eso es deseable estar familiarizado con el manejo del DOM en javascript.
2. Extraer la información de los hoteles con Simple HTML DOM
// Call dependency
require 'simple_html_dom.php';
// Create DOM from URL or file
$html = file_get_html('https://www.tripadvisor.com/Hotels-g150810-Isla_Mujeres_Yucatan_Peninsula-Hotels.html');
Hasta ahora, hemos extraído el contenido donde se listan los hoteles en TripAdvisor. Este contenido lo almacené en una variable $html para extraer la información que necesitamos. Hasta ahora tenemos una copia exacta de la página de referencia.
3. Identificar las secciones relevantes
Si necesitas obtener una sección del sitio de manera nativa, puedes hacerlo por expresiones regulares usando la función preg_match_all. Sin embargo, es una forma un poco más compleja porque requieres estar creando constantemente expresiones regulares. En este momento es donde Simple HTML DOM hace la magia. Lo que obtuve en la variable $html puedo manipularlo como un objeto a través de funciones definidas por la librería.
Aclarado esto, lo que necesitamos es identificar la sección que deseamos extraer del sitio de TripAdvisor. Esto es sencillo de realizar con el inspector de tu navegador. En mi caso utilizaré el inspector de Google Chrome.
Con la herramienta de selección de chrome vamos buscando patrones. En el ejemplo anterior encontramos tres contenedores principales en la plataforma: .header, .page y .footer. En este ejemplo, pondremos atención en el contenedor .page donde esta la lista de las habitaciones que nos importan.
4. Extraer la lista de hoteles de la sección identificada
En este punto lo que queremos es buscar un patrón que identifique como obtener el listado de hoteles. Con el inspector identifiqué las secciones que me interesan:
Como podrás observar, hemos encontrado un patrón que comparten todas las contenedores de cada habitación. Todas los contenedores tiene una clase llamada .prw_meta_hsx_responsive_listing. Ahora lo que necesitamos, es obtener toda la información que contiene cada caja con esa clase.
// De todo el contenido, solo necesito la lista de los contenedores de hoteles
$wrap_hotels = $html->find('div.prw_meta_hsx_responsive_listing');
Por medio de la función find, estamos obteniendo todos los contenedores que tienen la clase .prw_meta_hsx_responsive_listing. El resultado es un array que contenido la información interna de cada contenedor. Si haces un echo, el resultado sería algo similar a este:
Array de los hoteles obtenidos en TripAdvisor
Este array es una muestra de como se guarda la información. Por suerte, con las funciones de Simple HTML DOM nos facilita más las cosas.
5. Identificar las información específica de cada hotel
Ahora lo que necesitamos es extraer los datos específicos de cada hotel. Lo que nos interesa obtener según el template es:
Nombre del Hotel
La foto del hotel o departamento
Precio
Enlace para entrar a los detalles
Hacemos el mismo ejercicio pero en vez de inspeccionar toda la página de hoteles, inspeccionaremos solamente lo que esta en los contenedores que obtuvimos previamente de la clase .prw_meta_hsx_responsive_listing.
Datos del hotel del div contenedor
Identificadas las clases que contienen cada dato que necesitamos, lo primero que necesitamos es recorrer ese array para seleccionar el nombre, precio, imagen y enlace.
// Recorrer la lista de todos los hoteles obtenidos
foreach($wrap_hotels as $element) {
// Código para trabajar cada elemento
}
Tenemos en la variable $element los datos de cada uno de los hoteles, procedemos a obtener la información específica:
// Recorrer la lista de todos los hoteles obtenidos
foreach($wrap_hotels as $element) {
echo "<b>Nombre del Hotel</b> <br />";
echo $element->find('.property_title', 0)->plaintext . '<br />';
echo "<b>Precio</b> <br />";
echo $element->find('.price', 0)->plaintext . '<br />';
echo "<b>Url de la foto del hotel</b> <br />";
print_r($element->find('.inner', 0)->attr) . '<br />';
echo "<b>Enlace donde están los detalles del hotel</b> <br />";
echo $element->find('.photo-wrapper a', 0)->href . '<br />' . '<br />' . '<br />';
}
Aplicamos el mismo método find para leer el contenido de cada clase. Para obtener el nombre del hotel y el precio usé el atributo plaintext, para que no me muestre etiquetas html en mis resultados. Así funcionan estos atributos especiales:
Para más información, puedes consultarlo en la documentación oficial. El resultado sería como en la siguiente lista.
Nombre del Hotel Hotel Rocamar Precio MX$2,053 Url de la foto del hotel Array ( [class] => inner [style] => background-image:url(https://media-cdn.tripadvisor.com/media/photo-l/0d/6b/4f/fb/hotel-rocamar.jpg); ) Enlace donde están los detalles del hotel /Hotel_Review-g150810-d1477852-Reviews-Hotel_Rocamar-Isla_Mujeres_Yucatan_Peninsula.html
Nombre del Hotel Hotel Plaza Almendros Precio MX$971 Url de la foto del hotel Array ( [class] => inner [data-lazyurl] => https://media-cdn.tripadvisor.com/media/photo-l/08/7c/7c/9e/pool–v7986578.jpg ) Enlace donde están los detalles del hotel /Hotel_Review-g150810-d616791-Reviews-Hotel_Plaza_Almendros-Isla_Mujeres_Yucatan_Peninsula.html
6. Caso especial. Como obtener la url de la imagen
/**
* @param Array $attr_image Atributos en forma de array
* @return Image URL
*/
function get_standar_image_url($attr_image) {
// Inicia la variable vacía
$url_image = '';
// Si el atributo es style
if (isset($attr_image['style'])) {
// Recuerda que el style nos da el formato así background-
image:url(URL_DE_IMAGEN)
// Usé substr para remover esos caracteres y solo dejarme la url como resultado
// Otra forma es usando regex
$url_image = substr($attr_image['style'], 21, -2);
// Nos proporciona bien la url
} else {
// Aquí nos da la url directa
$url_image = $attr_image['data-lazyurl'];
}
return $url_image;
}
Con la función que tenemos, vamos a realizar un refactory al código donde estábamos trabajando. Lo que haré por cuestiones prácticas es guardar los resultados en otro array que le llamaré $list_hotels con los valores que necesitaré para llenar mi template.
// Creo una nueva variable que guardara los datos que necesito para mi template
$list_hotels = array();
// Recorro el item original
foreach($wrap_hotels as $element) {
$hotel = new stdClass(); // Es más elegante usar objetos
$hotel->name = $element->find('.property_title', 0)->plaintext;
$hotel->price = $element->find('.price', 0)->plaintext;
$hotel->image_url = get_standar_image_url($element->find('.inner', 0)->attr);
$hotel->href = $element->find('.photo-wrapper a', 0)->href;
array_push($list_hotels, $hotel);
}
Ya obtuvimos el array que nos interesa, ¿ahora que sigue? Podemos trabajar con esa lista para llenar los datos del template del proyecto.
7. Llenar el template del proyecto
Con la ayuda de la variable $list_hotels, vamos a reemplazar nuestros cajas estáticas de nuestro proyecto local que tenemos alojados en CodePen. Tomaremos una caja donde muestra la información de nuestro proyecto.
Puedo suponer que ya sabes que haremos con este proyecto. Vamos a repetir esa caja varias veces por medio de un loop. Nos caería de lujo usar foreach para este propósito, quedando de la siguiente manera:
Una vez que recorras el array $list_hotels que generamos resultado del web scraping. Tendremos este grandioso resultado:
A partir de ahora, tenemos un listado de 30 hoteles de Isla Mujeres en nuestro sitio web. Lo podemos mostrar en nuestra página web. También pudimos hacer scraping a las páginas destino de cada hotel, pero haría mucho más complejo este tutorial. Si deseas probar como funciona, te dejo el resultado de este ejercicio:
Cuando necesitas extraer un sitio con demasiada información, la librería te llega a limitar. Para aumentar esa limitación, puedes entrar dentro de la librería simple_html_dom.php y modificar la constante MAX_FILE_SIZE. Más información
En el anterior punto no siempre es recomendable modificar fragmentos del código. En especial para los que trabajamos con composer, porque las actualizaciones borran tus cambios.
Hicimos dos foreach: El primero tuvimos que obtener datos específicos para guardarlo en otro array y en el segundo caso para usar ese mismo array para llenar las cajas de nuestro proyecto local. Para optimizar el rendimiento, debimos llenar las cajas desde que obtuvimos los datos de los hoteles sin necesidad de crear otro array. Pero se justifica en el siguiente punto.
Intentar leer la página fuente cada vez que accedemos a nuestro proyecto, es un problema grave de rendimiento. Porque tendría que estar leyendo el sitio fuente cada vez que un usuario accede a nuestro sitio. Lo ideal es separar el script donde realizamos el scraping y guardarlo en algún medio de almacenamiento en nuestro servidor como una base de datos y con una tarea programada. El sitio accedería a la información previamente obtenida por el script. Es un tema que abordaremos en el siguiente tutorial.
El código fuente es funcional a la fecha de la publicación. Sin embargo, la página web fuente puede realizar cambios en sus vistas. Es recomendable revisar que el script este constantemente actualizado. Si es necesario, repetir el proceso de inspección del código fuente de las páginas de referencia.
Por favor, cuéntame que tal te pareció este tutorial. Si te fue de utilidad, ayúdanos a compartir este contenido para poder ayudar a más personas. Si tienes alguna duda u observación, estaré encantado de leerte e intercambiar opiniones para enriquecer este post.
Sabías que las imágenes son uno de los contenidos más atractivos divulgados en internet. Pero no todos estamos familiarizados con el diseño, lo cual puede ser más difícil para algunos saber con exactitud qué tipo de formato de archivo debería usar en cada situación.
Ya que si usamos el formato equivocado, podríamos alterar la calidad de nuestras imágenes lo cual causaría que nuestras imágenes pierdan su atractivo visual o que nuestro contenido sea más pesado en nuestro sitio web o blog.
Pero, ¿conoces exactamente la diferencia entre cada uno de ellos, o el tipo de formato que debes utilizar en cada caso?
¿Tipo de imagen?
Para comenzar hay que entender que contamos con dos tipos de imágenes: Imagen vectorial y el mapa de bits. Es muy importante entender la diferencia entre estos dos tipos.
Mapa de bits
Las imágenes bitmap o mapa de bits son las imágenes que son formadas por varios cuadritos pequeños que vemos cuando damos zoom a la imagen, a estos se les llama pixeles. A cada uno de estos se les asigna un color y, a través de coordenadas X y Y, esos pixeles de colores se posicionan en una malla y, así, forman una imagen.
Imagen vectorial
Las imágenes vectoriales o simplemente vectores son imágenes planas, sin sombres muy complejas. Son imágenes que se basan en polígonos formados por puntos, lo cual puedes aumentar un vector cuanto quieras, ya que no hay pérdida de resolución.
¿Cuál es el tipo de formato de imagen que tengo que utilizar?
Hay muchos formatos distintos y no todos son ideales para todo tipos de imagen o para contenidos. Estos son algunos de los formatos más utilizados.
JPEG (Grupo Conjunto de Expertos en Fotografía)
También conocido como JPG, sin duda uno de los formatos más conocidos y utilizados por todos en los medios digitales. Utiliza un complejo algoritmo de compresión de imagen, lo cual puedes equilibrar la calidad y tamaño de la imagen.
Normalmente los archivos JPEG se utilizan en diseño web ya que el formato permite que las páginas carguen más rápido. También son muy recomendados para medios digitales, campañas publicitarias en redes sociales como whatsapp, Pinterest, facebook e Instagram, o promociones.
PNG (Gráficos Portables de Red)
Es un formato de compresión sin pérdida de información. Además, es un formato que permite utilizar fondos transparentes manteniendo la calidad de imagen.
La desventaja de este formato es que para mejorar la calidad de la imagen el peso de esta también aumenta, en caso de las páginas web causara que esta tarde en cargar.
Pero esto no debe de preocuparnos por que hoy en día existen varias herramientas online que nos ayudaran con este problema, reduciendo el peso de nuestras imágenes manteniendo su calidad de imagen.
Este formato suele utilizarse para web y plataformas online, o en aquellos casos en que la imagen no tenga un fondo. También este formato es perfecto para logos que necesitan transparencia y degradado.
GIF (Formato de Intercambio de Gráficos)
GIF fue el primer formato de imágenes que redujo el tamaño de las imágenes y posibilitó la descarga rápida. También admite transparencias y su peso es muy reducido. Sin embargo, el hecho de ser un formato con un tamaño tan pequeño, lo limita demasiado
El GIF puede animarse, lo cual es una de sus principales ventajas frente a otros tipos de archivo. Actualmente es muy utilizado para crear animaciones para Facebook y whatsapp en Android.
Hay más formatos
Claro que existen mucho más formatos, ya algunos de ellos están en desuso, y otros son propietarios de ciertas aplicaciones. Recuerda en utilizar el formato correcto para cada tipo de gráfico y aplicación.
El uso de estas técnicas te pueden ser de mucha utilidad. Con un fragmento de código puedes recorrer un sitio web de la misma forma que se presenta en un navegador. Puedes guardarlo en una base de datos o mostrarlo en alguna parte de tus sitios. Si deseas conocer más sobre sus usos, te recomiendo leer Introducción al Web Scraping.
Elección de Fuentes para los Primeros pasos de Web Scraping
Como primer objetivo necesitas leer un sitio web externo para después embeberlo en tu propio proyecto, de eso trataré en esta entrada. En el Home quiero obtener los hoteles ubicados en Isla Mujeres desde TripAdvisor.
Lo primero que haremos es ir a la página de tripadvisor.com y realizar una búsqueda de hoteles de Isla Mujeres. No voy a seleccionar un Check In o Check Out porque a mí solo me interesa mostrar la relación de hoteles.
Una vez realizada la búsqueda, obtendrías resultados similares a la siguiente imagen. Se trata de un listado de hoteles de Isla Mujeres. Lo que nos interesa es tener la url con los parámetros necesarias que nos despliegue solo hoteles de isla mujeres.
Extraer un sitio con file_get_contents
Vamos a utilizar la url que obtuvimos para indicarle a nuestro script lo que queremos mostrar. Primero crearé el archivo scraper.php donde contendrá el script que leerá el sitio contenido de la URL señalada.
// Lee la url y obtiene el contenido en una variable
$html = file_get_contents("https://www.tripadvisor.com/Hotels-g150810-Isla_Mujeres_Yucatan_Peninsula-Hotels.html");
// Se imprime lo que obtuvimos en esa variable
echo $html;
Funciona, pero no siempre llega a ser así. Es necesario tener activado la directiva allow_url_fopen en el php.ini de tu servidor. Sino sabes como activarlo, te recomiendo que te des un clavado en este artículo sobre como activar allow_url_fopen en tu servidor.
Cuando trabajas de manera local, no parece ser un problema. Sin embargo, no todos los servidores dan privilegios de modificar sus archivos de configuración. Así que otra alternativa de poder tener los resultados en nuestro sitio es a través de cURL.
Extraer un sitio con cURL
cURL es una herramienta que te permite obtener información de distintos protocolos, además puedes hacer envíos de parámetros GET y POST. Su uso es tanta común que llega a ser utilizado en los crawlers para recolectar información de la web.
Por esas razones cURL es mi función predilecta porque me permite hacer conexiones. Incluso podría entrar a un área protegida por medio de mecanismos de autenticación.
La pregunta es ¿cómo hacer scraping para obtener un resultados similar al anterior? Realmente es muy sencillo, si bien requieres de más código para definir lo que quieres obtener realmente, lo podríamos encapsular en una función como lo haré en el siguiente ejemplo.
// Definimos la función cURL
function get_content_with_curl($url) {
// Inicial la función url
$ch = curl_init($url);
// No verifica el peer del certificado. Opcional
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
// Establece la sesión
$data = curl_exec($ch);
// Cierra la sesión
curl_close($ch);
return $data;
}
// Llamo la función previamente definida. La guardo en una variable por si deseo manipularla
$html = get_content_with_curl("https://www.tripadvisor.com/Hotels-g150810-Isla_Mujeres_Yucatan_Peninsula-Hotels.html");
// Imprimir la cadena recibida
echo $html;
Realmente lo que hicimos fue crear una función que nos permitiera obtener un sitio web, tal como lo lee un navegador, por medio de cURL. Con esto ya tenemos el sitio original en nuestro sitio.
Resumiendo, el Scraping se basa en leer datos de otras fuentes. Aquí solamente leímos la web tal como está en la versión original, sin embargo, no le podríamos dar mucho uso de esta manera. Cada vez que requiera obtener datos de otras ciudades, solo llamaría esta función definida previamente. Para ser más selectivo en el contenido que obtenemos de cada sitio, es necesario desarrollar funciones más detalladas, sin embargo no es el objetivo de este post.
Como aclaración, hasta este punto aún no podemos darle un uso éticamente aceptable a esta técnica. Copiar contenido de otras fuentes y usarlo indiscriminadamente en tus sitios podría ser contraproducente. En el próximo post, vamos a especificar qué secciones necesitamos de los resultados que nos da TripAdvisor para nuestros proyecto con estilos propios.
Espero te haya gustado este post y/o te haya sido de utilidad, te agradeceríamos mucho si nos ayudas a compartir. Si tienes algún comentario, no dudes escribirnos en la caja de comentarios. Siempre estaremos ansiosos de intercambiar ideas con nuestros lectores.
Las imágenes sin duda son clave importante que más peso le da a nuestra web, sin embargo a la gran mayoría se nos olvida optimizar todo el contenido multimedia antes de subirlo a nuestra web.
Reducir el tamaño de las fotos que será parte de nuestro contenido es uno de los factores importantes para mejorar la velocidad, si estos no son optimizadas correctamente consumirá una gran cantidad de recursos del servidor o hosting y lo cual harán mucho más lento.
Hoy en día existen varios formatos que podemos usar en una página web. Lo más recomendable es que siempre que puedas uses el formato JPG ya que permite un alto nivel de compresión sin perder mucha calidad en tus fotos.
5 herramientas gratuitas para optimizar y comprimir imágenes sin perder calidad
Es importante contar con herramientas que nos facilite la tarea de optimizar nuestras imágenes con la mejor calidad. Por ello te compartimos 5 herramientas online gratuitas que te permitirán reducir el peso de tus imágenes.
1. Compressor.io
Es una herramienta en línea para reducir el tamaño de sus imágenes y fotos, manteniendo una alta calidad casi sin diferencia antes y después de la compresión.
Sin duda una de las mejor ya que te permite comprimir y optimiza tus imágenes hasta 90% de reducción de tamaño de archivo original. Te permite reducir 4 formatos de archivo compatibles JPEG – PNG – GIF – SVG.
También te permite realizar 2 tipos de compresión que son:
Loseless la reducción del tamaño será más equilibrada, ya que tu imagen será igual a la original. Este tipo solo está disponible para las fotos en formato JPEG y PNG.
Lossy viene siendo hasta de un 90% reducción de hasta el 90% del tamaño de imagen pero la calidad de la imagen disminuye un poco más.
TinyPNG usa técnicas de compresión con pérdida inteligente para reducir el tamaño de tus archivos PNG y JPG. Además nos permite subir 20 archivos a la vez de hasta 5 MB cada uno. También con TinyPNG podremos descargarlas una a una o en conjunto, ya sea en una carpeta comprimida llamada “tinified.zip” o bien alojarlas en nuestra cuenta en Dropbox.
También brinda un plugin para WordPress gratuito y otro de pago para Photoshop.
Con Optimizilla puedes reducir hasta 20 imágenes en JPG o PNG a la vez. Lo que hace resaltar a Optimizilla de los demás es que una vez que las imágenes están en la cola de compresión, podrás editar el nivel de compresión mediante un deslizador, además es posible comparar con el archivo original.
No te dejes engañar por su aspecto ya que es una de las mejores herramientas para reducir tus fotos e imágenes. Además con Image Optimizer no solo podrás comprimir y optimizar las imágenes, sino que también podrás redimensionarlas.
Solo necesitas subir el archivo, elegir el tamaño de final, y elige entre 6 tipos diferentes de compresión que varían de muy pequeño hasta la mejor calidad. Además image Optimizer también ofrece la herramienta como un aplicación para Windows que puedes descargar de forma gratuita para uso personal.
Compress Jpeg es una aplicación online gratuita que permite comprimir varias imágenes de forma simultánea.
Te permite seleccione un máximo de 20 imágenes de formato jpg o jpeg, lo único que tienes que hacer elegir el formato de la imagen a subir y arrastrar los archivos a la zona de abajo y por ultimo esperar a que la compresión termine. Podrás descargar las imágenes comprimidas por separado o agrupados en un archivo ZIP.
En internet existe una infinidad de información, es tanta la información que no podemos consumirla toda al misma tiempo. ¿Te imaginas extraer todos esos datos de manera manual recurrentemente? Por suerte, existen aplicaciones que buscan extraer datos, los procesan y ofrecen un información útil para nosotros. Este proceso se le conoce como web scraping.
¿En que consiste el web scraping?
Web scraping es una técnica utilizada, por medio de software, para obtener información pública de cualquier web. Esta técnica consiste en buscar fuentes que te proporcionen contenido para fines estadísticos o que mejoren la experiencia de usuario.
Funcionamiento del Web Scraping con tenido público
Este proceso puede ser único o periódico, dependiendo tus objetivos. Es una alternativa más ágil cuando necesitas obtener una gran cantidad de datos en periodo corto de tiempo. En el mayor de los casos es periódico, porque comúnmente se necesitan datos recientes.
El web scraping no promueve la ilegalidad
Debemos ver al scraping como una técnica que facilita una tarea específica como cualquier otra técnica. El uso que se le de, cambia la perspectiva de las cosas. Debemos pensar en la línea delgada entro lo legal y no. Pero eso depende del tipo de uso que le des. Recomiendo leer este artículo que habla respecto a ese tema: Web Scraping: ¿Legal, ilegal o depende?
Sus usos en la actualidad
Es común que nuevas startups basen sus operaciones en recolectar datos. Llegan a ser técnicas bastante explotadas en la fase inicial de las startups donde la información es crucial para la operación. También existen aplicaciones móviles que usan esa técnicas como los las apps de marcadores, de bolsa de valores y hasta asistentes para realizar tu despensa.
En lo personal he creado dos catálogos donde considero en mi experiencia para que podría servir esta técnica se se maneja adecuadamente:
Que tipos de datos se recomiendan extraer
Datos efímeros como marcadores de futbol, tipos de cambios clima, acciones de La Bolsa de valores, etc.
Reservaciones de hoteles de diferentes lugares.
Encabezados de las noticias más relevantes. Podríamos generar un directorio y darle un uso inteligente a esa información.
Contenido para fines internos solamente. Estadísticas, encuestas, opiniones de usuarios acerca de un tema en específico.
Que no se vale e incluso podría ser penalizado
Obtener contenido original para replicarlo en tu sitio web.
Datos que hagan una alusión personal, aunque sean públicos. Con los buscadores tenemos suficientes, incluso hasta Google ha tenido dificultades con noticias relacionadas a ciertas figuras públicas, conocida como El derecho al olvido, dictada por el Tribunal de Justicia de la Unión Europea.
Datos personales como teléfono, correos, direcciones. Los puedes obtener para usos internos pero no los puedes explotar para enviar información al usuario. Las penas por realizar ese tipo de prácticas depende de la legislación en cada país.
¿Quiénes hacen uso del web scraping?
El scraping es una práctica tan común que son usados en las herramientas que frecuentemente usamos, como por ejemplo:
Google
El mayor scrapper de todos los tiempos hasta ahora. Cuenta con un directorio de millones de páginas web que va indexando diariamente a través de sus crawlers.
Twitter
Esta red social que ha tumbado dictaduras hace uso de las vistas previas. Twitter hace una extracción de datos básicos para poder mostrar un vista previa que mejore la experiencia de usuario.
Slack
A diferencia de las anteriores, slack es un sistema de mensajería en tiempo real creado para fines colaborativos. Incluso, prácticamente todos las apps de mensajería cuentan con esta función.
Con esto, te puedes dar cuenta que el scraping es una técnica muy útil para enriquecer la experiencia de usuario o incluso realizar estudios que mejoren esa experiencia. Una recomendación es que cuides la frecuencia que consultas un sitio en específico. Si saturas mucho las consultas de un sitio corres el riesgo de que tu ip sea bloqueada.
En futuros posts, te mostraré como realizar scraping con herramientas de terceros, también hacerlo de manera nativa por medio de scripts propios y por último como hacerlo por medio de librerías. Ninguna es mejor que otra, todo depende de las necesidades de tu proyecto.
Si te pareció útil esta entrada, te agradecería que me ayudes a compartirla. Cualquier duda u observación, nos puedes escribir en la caja de comentarios y será un placer poder intercambiar opiniones.
El color es un elemento fundamental en cualquier sitio web o proyectos digitales, ya que la elección de un color es mucho más importante de lo que pensabas, ya que a través los colores podemos transmitir distintos sentimientos.
Para ayudarte a hacer una buena combinación de colores hemos buscado las 10 mejores herramientas que pueden ayudarte a elegir la paleta de color perfecta para que tus diseños sean más llamativos. Además evitaras caer en el ámbito de utilizar los mismos colores. Hay gran variedad de opciones de colores con los que puedes experimentar y hacer que tus proyectos sobresalgan de los demás.
Color Hunt es una colección abierta de paletas de colores donde los usuarios son los que crean las paletas usando el creador de la paleta Color Hunt . Además, todos pueden crear y enviar su propia combinación de colores.
Cada esquema contiene tonos sencillos y elegantes que pueden servir de inspiración para casi cualquier proyecto. Tambien Encuentra el esquema perfecto al buscar en las opciones Popular. Además obtendrás una nueva paleta de colores cada vez que actualice la ventana de tu navegador y también puedes agregar la extensión de Chrome a tu navegador.
Coolors es una herramienta rápida y fácil que te permite generar hermosas paletas de colores. Simplemente escriba sus colores en el formato que prefiera (HEX, RGB, HSB, CMYK, etc.), bloquéelos y presione la barra espaciadora para obtener una nueva paleta de 5 colores. También haga clic en el ícono de candado para mantener los colores que desee y repita el proceso hasta que tenga la combinación de colores que necesite.
También, puedes guardar las paletas de color generadas para que otros la utilicen. Coolors te permite exportar a varios formatos como PNG, PDF, SVG, SCSS o copie el enlace.
Está herramienta nos permite generar paletas de colores a partir de un color base que nosotros le introducimos, ya sea insertando el código de color hexadecimal o los valores RGB. A partir de este color base nos generará una paleta de color en función de si queremos que estos colores de la paleta sean análogos, monocromáticos, triada, complementarios, compuestos, tonos, o bien podemos hacer una paleta de color personalizada.
Una vez tenemos nuestra paleta de color elegida, la podemos almacenar, compartirla y descargarla para usarla en los programas como por ejemplo photoshop e illustrator.
Color Hunter es un lugar para encontrar y crear paletas de colores creadas a partir de imágenes. Simplemente carga tu imagen y obtén una paleta de colores de acuerdo al contenido de tu imagen.
Una forma útil para tomar rápidamente una paleta de color de imágenes cargadas, por la búsqueda de una etiqueta adecuada o por referencia hex. Además es rápido y fácil de usar lo cual ofrece una buena variedad de gamas de colores para elegir.
Genera hermosas paletas de colores a partir de imágenes, URL o aleatoriamente. Su objetivo es facilitarle la creación y descubrir paletas y colores para todas sus necesidades de diseño.
ColorExplorer es una caja de herramientas en línea para trabajar con paletas de colores. También puede crear, administrar y evaluar paletas de colores de forma rápida y fácil para usar en diseño gráfico, diseños web, diseños y mucho más.
Es absolutamente gratis usar todas las características que se encuentran en el sitio. No es necesario que se registre si no lo desea.
El registro de un perfil de usuario es gratuito, sin embargo, le dará algunos extras (por ejemplo, un control / acceso a la paleta mejor y más seguro).
ColorHexa es una herramienta de color gratuita que proporciona información sobre cualquier color. También genera paletas de colores coincidentes para sus diseños como: esquemas de colores complementarios, análogos, triádicos, tetradicos o monocromáticos.
Solo necesita escriba cualquier valor de color en el campo de búsqueda y Color Hexa ofrecerá una descripción detallada y lo convertirá automáticamente a su equivalente en hexadecimal, RGB, CMYK, HSL, HSV, CIE-LAB / LUV / LCH, Hunter-Lab, XYZ, xyY y Binario.
Colrd es unas herramientas de combinación de colores, una gran manera de compartir y descubrir combinaciones de colores. Además Colrd actúa como una gran fuente de inspiración al compartir paletas de colores generados por los usuarios, así como los patrones degradados e imágenes. También un gradiente builder y una herramienta de búsqueda.
Paletton es una herramienta de diseño para crear combinaciones de colores que funcionan juntas. Comienza con un color base, y Paletton genera tonos similares que lo complementarán. De esta manera, podrás crear paletas de colores para tus diseños basados en cinco estilos que son: Mono, Complemento, Tríada, Tetrad y estilo libre.
Es una comunidad creativa en la que personas de todo el mundo crean y comparten paletas de colores. También incluye esquemas de color, plantillas y variación de sombras que te van a ayudar a que a través del diseño comuniques lo que deseas.
Las imágenes son un elemento fundamental en el diseño ya que van a servir para tus proyectos como: blog, página web, campañas, redes sociales, etc. Encontrar las imágenes adecuadas, de buena calidad y sobre todo gratuitas es algo complicado. Sin embargo, existen bancos de imágenes gratuitas donde encontraras lo que estás buscando.
Te compartimos 9 bancos de imágenes gratis. Verás que la gran mayoría son de libre uso o creative Commons CC0.
¿Licencia Creative Commons (CC0)?
La mayoría de las imágenes están bajo licencia Creative Commons (CC0) . Esto significa que las imágenes son completamente gratis para ser usadas para cualquier propósito legal.
Las imágenes son gratuitas para uso personal e incluso comercial .
Puede modificar, copiar y distribuir las fotos.
Todo sin pedir permiso ni establecer un enlace a la fuente. Entonces, la atribución no es requerida.
La única restricción es que las personas identificables pueden no aparecer bajo una luz negativa o de una manera que puedan resultar ofensivas, a menos que den su consentimiento. También debe asegurarse de que el contenido mostrado (personas, logotipos, propiedad privada, etc.) sea adecuado para su aplicación y no infrinja ningún derecho.
El contenido mostrado puede estar protegido por marcas registradas, publicidad o por el derecho a la intimidad, por lo que conviene asegurarse en cada caso.
Aun así te recomendamos que revises la licencia antes de descargar la imagen.
1. Pixabay
Cuenta con casi 1,4 millones de imágenes, vectores e ilustraciones. También, tiene un buscador bastante útil donde puedes buscar por categorías, por orientación (horizontal o vertical), por tamaño y por colores.
Todas sus imágenes son libres de derechos de autor bajo la licencia Creative Commons CC0, lo cual los hace seguros de usar sin pedir permiso o dar remuneración al artista – incluso con fines comerciales.
Aquí encontraras más de 300,000 fotos gratuitas de alta resolución. 10 fotos nuevas cada semana. El lugar donde podrás encontrar imágenes increíbles. Suscribiéndose a Unsplash tendrás acceso a 10 fotos en HD que se renuevan de manera automática cada 10 días.
Fotos de alta resolución, originales y gratuitas creadas por el fotógrafo Ryan McGuire. Las fotografías de Gratisography están publicadas bajo la licencia Creative Commons Zero, por lo que pueden utilizarse tanto para uso personal como comercial. Sin embargo, estas imágenes no pueden utilizarse para fines pornográficos, penales, difamatorios o intenciones degradantes. Cada semana se añaden nuevas fotos.
Pexels ofrece fotos de alta calidad y completamente gratuitas, publicadas bajo la licencia Creative Commons Zero (CC0), lo cual podras utilizarlas para cualquier propósito, privado y comercial. Todas las fotos están cuidadosamente etiquetadas, se pueden buscar y navegar en diferentes páginas.
Actualmente ofrecen más de 4.500 fotos gratis para descargar y cada día aumentan 10 nuevas. Al proporcionar fotos gratis, Pexels ayuda a millones de personas creativas de todo el mundo a crear excelentes productos y diseños.
Aquí encontraremos imágenes gratis de excelente calidad, cuenta con una gran variedad de categorías (negocios, comida, amor, ciudad, personas, naturaleza, paisaje, abstractas, etc.), Es por eso que cada imagen individual en StockSnap esta bajo los términos de la licencia Creative Commons CC0. Lo cual te da la libertad de copiar, editar, modificar y distribuir esas imágenes en una variedad de formatos y propósitos, incluidos los relacionados con los negocios.
Magdeleine cuenta con una variedad de fotos de alta resolución, también con una categoría amplia que facilitara tu búsqueda en la cual podemos encontrar: tecnología, abstracto, naturaleza, ciudad y personas entre otros. También, hay que tener en cuenta que gran mayoría de las fotografías son de dominio público (Creative Common CC0), por lo que puedes hacer lo que quieras con ellas, sin pedir permiso.
Solamente algunas imágenes tienen licencia Creative Common 4.0, lo cual te habilita a utilizarlas para uso personal o comercial, pero otorgándole una correcta atribución al autor.
Fotos gratuitas para startups, bloggers, editores, sitios web, diseñadores, desarrolladores, relacionados con el mundo tecnológico. Sus imágenes de alta definición son libres de derechos (CC0), y por lo tanto se pueden utilizar para cualquier fin.
Fotos gratis de alta resolución, muy profesionales y de tipo muy variado, cuenta con una licencia Creative Commons CC0, por lo cual cuenta sin restricciones de derechos de autor para uso personal y comercial. También, tiene nuevas fotografías agregadas semanalmente. Hay que tener encuenta que no se permite la distribución masiva.
Es un banco de recursos gráficos para todo, donde encontrarás, a través de su buscador, fotos, vectores e ilustraciones de todo tipo que puedes usar para lo que quieras, siempre y cuando le des atribución.
Espero que este listado te sea de gran utilidad y si tienes otras recomendaciones de buenos bancos de imágenes para descargar fotos en alta resolución, déjanos tus comentario.
Usualmente en ocasiones se habla de la influencia psicológica del color en el diseño de un logo, pero no sólo el color es el único factor que influye a la hora de transmitir, también esta la tipografía y las formas geometría que también ejerce influencia en las personas.
Los logos juegan un rol muy importante cuando se trata de tomar decisiones, ya que están basadas en las percepciones visuales. En el post de hoy te hablaremos sobre que dicen las formas en un logo.
1. Formas circulares
El círculo es una de las formas más utilizadas dentro del diseño, ya que proyecta un mensaje emocional positivo.
Puede representar perfección, innovación, protección, creatividad y movimiento. También están muy asociados a la comunidad, amor, amistad, relaciones y unidad. En diseño es ideal usarlo cuando se quiere representar organizaciones sin fines de lucro, organizaciones globales, gubernamentales, entre otras.
2. Formas triangulares
Los logos con forma triangular, están masa enfocados a la masculinidad. Al tener formas más puntiagudas, pueden ser más agresivos a la vista.
Son asociados a empresas o negocios de productos o servicios para un público masculino, representan el poder, ciencia y religión. También se sugiere que los triángulos tienen una buena asociación con el poder, ciencia, religión y legales.
3. Formas en línea
En este tipo de forma en línea hay dos tipos de logos, las que se asocian con líneas verticales y horizontales.
Líneas verticales: se suele utilizar en logos de compañías que se mueven en sectores muy competitivos que reflejan masculinidad, sugieren fortaleza y agresión. También crecimiento y profesionalidad. Suele ser bastante utilizado en el mundo de la construcción y de la inversión. Sin embargo, las líneas verticales son difíciles de usar porque pueden ser vistas como frías, agresivas y dominantes. Al menos que eso quieras reflejar en tu logo.
líneas horizontales: transmiten unión, tranquilidad y calma por parte de las marcas que los portan. con frecuencia, son usadas para negar la amenaza y agresión.
4. Formas cuadradas
En el diseño de logotipos, las figuras de cuadradas muestran confiabilidad y solides. Es ideal para representar algo que es real, transmiten fortaleza, seguridad, compromiso, estabilidad y honestidad.
Además, por sus amplias posibilidades a la hora de entrelazar unas curvas con otras, también transmite una imagen de alianza y colaboración.
5. Forma en espiral
En diseño, los logotipos en espiral generalmente dan una sensación de trascendencia, energía, vitalidad, crecimiento, evolución, continuidad y excelencia gracias al camino que se sigue a través de una trayectoria que representa historias y resonancia.
Por lo tanto un logo en forma de espiral es ideal para las empresas que lideran sus sectores, los proveedores de servicios y para banderas. Un diseño en espiral también tiende a trascender en el tiempo y el espacio.
Los lenguajes de programación que manejan información necesitan de un lugar donde se almacenen los datos. En concreto una base de datos es un conjunto de información organizado en distintos formatos para su posterior uso. Las bases de datos van más allá de sólo utilizar MySQL el cual entra en la categoría de una base de datos relacional.
Base de datos SQL
Structured Query language (SQL) o lenguaje de consulta estructurada, utiliza un estándar para manipular el contenido de las bases de datos relacionales. Cuenta con su propio lenguaje para consultar, insertar, actualizar y eliminar registros de la base de datos.
Se compone de una o varias tablas y cada tabla puede contener múltiples relaciones. En el siguiente elemento pongo como ejemplo en como está estructurada una sencilla base de datos por medio de tablas.
Las tablas representan la entidad de cada modelo de datos. Las relaciones permiten garantizar la persistencia de datos, evita la duplicidad de datos y controla la eliminación en cascada. Para ingresar un nuevo nuevo evento, bastaría con ingresar un nuevo registro en la tabla events.
SQL cuenta con un lenguaje de alto nivel que permite manipular la base de datos casi de cualquier forma. Por su manera de operar ayuda a mantener la integridad de los datos. Por ejemplo:
Para obtener la lista de todos los deportes
SELECT id, name FROM sports
Ingresar varios registros a la tabla categoría
INSERT INTO categories VALUES (Varonil, Femenil, mixto)
Su uso es mas frecuente es en sistemas donde se necesite cuidar la integridad de datos como los bancos, sistemas de ventas, hospitales, CMS como WordPress.
Ejemplos de sistemas de gestión de base de datos son: MySQL, MariaDB, PostgreSQL.
Base de datos NoSQL
También existen otros mecanismos de almacenamientos alternativos a las base de datos relacionales que se definen por tablas. Este tipo de base de datos, se apoyan en otros formatos. Los NOSQL son más adecuados para aquellos que manejan grandes volúmenes de datos. Es por eso que empresas como Facebook, Google, Amazon, Twitter, entro otros han popularizado estos tipos de base de datos.
Esas empresas tenían que enfrentarse a grandes desafíos motivados a la alta demanda de internet. Donde surge la necesidad de proporcionar información de grandes volúmenes de datos e indeterminado número de usuarios en el menor tiempo posible. Esas compañías se dieron cuenta que podían sacrificar la consistencia de los datos que garantiza una base de datos relacional para poder obtener un mejor rendimiento y ofrecer soluciones en tiempo real.
Los puedes usar en soluciones donde requieres interactuar con datos en tiempo real como en un chat, para análisis estadísticos donde procesas mucha información o incluso en blogs.
Algunos tipos de bases de datos NoSQL incluyen diferentes tipos de almacenamiento, por ejemplo: con columnas, documentos, key value store, gráficos, objetos (JSON), XML y otros modos de almacenamiento de datos.
¿Qué hace diferente SQL vs NOSQL?
Una de las diferencias más relevantes entra una NOSQL a una base de datos relacional, es por su forma de almacenamiento no estructurada.
¿Cuál podría ser apropiada para mi proyecto?
Depende mucho de la solución y cuales son los puntos fuertes que necesites ofrecer en tus gestión de información. Ambos tienen sus pros y sus contras. Puedes elegir entre la consistencia (SQL) o la alta disponibilidad (NOSQL). En la mayoría de mis proyectos apuesto por la consistencia porque los proyectos no requieren una disponibilidad en tiempo real de los datos.
¿Qué te pareció el artículo? Quedo al pendiente para tus comentario o cualquier duda. Si te pareció interesante, no dudes en compartirlo.
Sabías que las imágenes son uno de los contenidos más atractivos divulgados en internet. Pero no todos estamos familiarizados con el diseño, lo cual puede ser más difícil para algunos saber con exactitud qué tipo de formato de archivo debería usar en cada situación.
