Publicado en

Web Pixel API para cambiar tamaño y optimizar calidad de imágenes

¿Que puede hacer el servicio?

  • Redimensionar imágenes
  • Cortar imágenes
  • Disminuir la calidad de las imágenes
  • Convierte las imágenes a JPG para que sean aún mas livianas (se le puede especificar que no las convierta para mantener la transparencia de una PNG)
  • Pasar la imagen en escala de grises
  • Mantiene la imagen en Cache y la misma se carga desde un CDN (Solo la convierte una vez).

Como usar el servicio

El Servicio es muy fácil de usar, tan simple como editar un URL y luego poner el origen de la imagen, las siguientes son las parámetros del mismo:

  • URL: https://webpixelapi.com/
  • El ancho se define en la URL luego de: /w/ (cero para que se calcule proporcionalmente)
  • La Altura se define en la URL luego de: /h/ (cero para que se calcule proporcionalmente)
  • La Calidad se define en la URL luego de: /q/
  • Si necesitamos mantener la transparencia de la imagen debemos poner un uno luego de: /png/
  • Si necesitamos la imagen en colores se pone un 1 luego de /c/ en caso de necesitar la imagen en escala de grises debemos poner un 0.
  • Y como último parámetro luego de /s/ debemos poner el URL original de la imagen son especificar el protocolo (sin http://)

Por ejemplo en la siguiente imagen deberíamos cambiar lo que está marcado en rojo:

https://webpixelapi.com/w/100/h/100/q/60/png/0/c/0/s/programando.paginasweb.cr/wp-content/uploads/2018/03/example.jpg

Utilizando esa URL una imagen que pesa 176 KB y se ve así:

Quedaría así: 100 pixeles de ancho, 100 pixeles de alto, calidad de 60%, sin mantener el formato PNG (transparencia), en escala de grises.

Pesando 2.3 KB (2.9 KB con color)

Nota: Se puede poner cero en la altura o en el ancho para que se calculen de manera proporcional a la imagen, por ejemplo en esta imagen solo se especifica que debe tener 500 pixeles de ancho y el alto se calculará de manera proporcional:  https://webpixelapi.com/w/250/h/0/q/60/png/0/c/1/s/programando.paginasweb.cr/wp-content/uploads/2018/03/example.jpg

¿Cuanto cuesta el servicio?

El servicio es gratis siempre y cuando se utilice para imágenes originales de menos de 1200 pixeles de ancho y alto y no hacer mas de 100 conversiones mensuales (solo la primera llamada es una conversión las demás se obtienen del caché)

Las imágenes convertidas a mas de 400px de ancho y más de 50% de calidad van a tener una marca de agua de manera predeterminada.

Si quieres el servicio premium que tiene una marca de agua personalizada y no hay restricciones de tamaños contáctenos al siguiente correo: [email protected] o en la siguiente página: https://paginasweb.cr/contactenos/

Porqué el usar el servicio

En los últimos años el uso de los dispositivos móviles y sus limitaciones han sido un tema muy importante en la programación web, ya que al tener una pantalla de menor tamaño, y usualmente una menor velocidad de Internet que las computadoras los programadores necesitamos proveer contenido diferente para estos dispositivos.

Utilizando el diseño responsivo específicamente media queries se ha logrado solventar el problema de las pantallas de menor tamaño sin tener que entregar diferente contenido a estos dispositivos como se usaba antes lo cual implicaba un mantenimiento de dos sitios y usualmente una perdida de compatibilidad con dispositivos de tamaño intermedio como tabletas.

En cuando a la limitación en velocidades de internet móvil las soluciones son un poco mas complejas, como todos sabemos lo que mas consume internet de nuestros lectores es el contenido multimedia y en algunos casos librerías Javascript muy pesadas o sin configurar para mantener una copa en el navegador en vez de estar descargándolas siempre que un usuario entra a una página.

En cuanto a videos hay plataformas como Youtube ya que ellos se encargan de cargar un video con la calidad acorde a la resolución del dispositivo y la velocidad de internet del usuario e incluso podrías monetizar tus videos, en el caso de que quieras monetizar tus videos pero no con publicidad de Google hay soluciones de pago como JW Player en las que también entregan contenido tomando en cuenta la velocidad y resolución del usuario y puedes administrar la publicidad como desees.

En cuanto a las imágenes varios CMS’s como WordPress cuando subes una imagen automáticamente crean varias versiones de esa imagen para usarla en diferentes secciones de un sitio pero no utilizan imágenes pequeñas cuando el sitio se ve desde un dispositivo móvil, entonces nuestros usuarios tienen que descargar las imágenes grandes de buena calidad creadas para una computadoras en un dispositivo móvil en el cual la imagen no se va a detallar tan bien, dado a esto Paginas Web CR pone a disposición un servicio para que los usuarios siempre puedan tener la mejor imagen según el tamaño de su dispositivo, esta tecnología la usa usa actualmente el periódico digital crhoy.com (Una de las páginas con más visitas en Costa Rica desde Costa Rica)

Web Pixel API de Páginas Web CR es una excelente alternativa a TimThumb, segura y con soporte. Con respecto al deprecado librería TimThumb  el cual ha creado vulnerabilidades en múltiples sitios de WordPress en los últimos años.

Características del servicio:

Redimensión de imágenes: Necesitas una imagen de 400×400 para que tu home se vea perfecto pero los que administran el contenido siguen subiendo imágenes de todos los tamaños, pues ahora no te vas a tener que preocupar por que las imágenes se vean estiradas porque el servicio al redimensionar una imagen rectangular(600×500) a una cuadrada(400×400) lo que hace es que ajustar la imagen al tamaño requerido (480×400) centra la imagen y corta el espacio sobrante (40px a cada lado en este caso).

Cache / Consumo de ancho de banda de tu hosting: Un aspecto muy importante de este servicio es que trabaja con un chache en medio del API y tus clientes entonces la conversión de la imagen no se hace cada vez que un usuario accede a tu sitio entonces ni se tienen q convertir cada vez por lo tanto tu servidor no va a tener altos consumos de datos y tus usuarios siempre van a tener la imagen en el tamaño perfecto sin esperar conversiones tomándola desde el cache

Velocidad de carga: de manera predeterminada las imágenes se cargan en la calidad estándar de la web que es bastante liviana por lo que no te deberas de preocupar en estar cortando tus imágenes o cambiándoles la calidad para la web.

 

Publicado en

Lista de provincias, cantones y distritos de Costa Rica en formato JSON

El formato JSON en los últimos años ha dominado la programación de páginas web y por ende siempre buscamos obtener nuestra información mediante este formato, principalmente cuando necesitamos la información desde Javascript.

Algo muy usual es que necesitemos poner un selector de ubicación en un formulario y para esto paginasweb.cr pone a disposición un servicio que devuelve provincias, cantones y distritos en formato JSON de manera gratuita con un CDN asegurando que el servicio siempre va a estar disponible de manera gratuita para cualquier uso, tanto comercial en producción o académico.

¿Como se usa?

La lista de provincias cantones y distritos tienen como ID el número real con el que trabaja el Tribunal Supremo de elecciones de Costa Rica. Esa es la razón por lo que los id’s no comienzan en 0 como en un arreglo usual.

Provincias

Para obtener las provincias de Costa Rica la dirección es la siguiente:

https://ubicaciones.paginasweb.cr/provincias.json

Lo cual devuelve una versión mimificada de lo siguiente:

{
    1: "San José",
    2: "Alajuela",
    3: "Cartago",
    4: "Heredia",
    5: "Guanacaste",
    6: "Puntarenas",
    7: "Limón"
}

Cantones

Para obtener los cantones de una provincia específica se debe crear una URL como la siguiente:

https://ubicaciones.paginasweb.cr/provincia/id_provincia/cantones.json

Entonces por ejemplo si quisiéramos los cantones de la provincia de San José que tiene el id #1 la URL sería:

https://ubicaciones.paginasweb.cr/provincia/1/cantones.json

Lo cual devuelve una versión mimificada de lo siguiente:

{
    1: "Central",
    2: "Escazú",
    3: "Desamparados",
    4: "Puriscal",
    5: "Tarrazú",
    6: "Aserrí",
    7: "Mora",
    8: "Goicoechea",
    9: "Santa Ana",
    10: "Alajuelita",
    11: "Vázquez De Coronado",
    12: "Acosta",
    13: "Tibás",
    14: "Moravia",
    15: "Montes De Oca",
    16: "Turrubares",
    17: "Dota",
    18: "Curridabat",
    19: "Pérez Zeledón",
    20: "León Cortés Castro"
}

Distritos

Para obtener los distritos de un cantón específico se debe crear una URL como la siguiente:

https://ubicaciones.paginasweb.cr/provincia/id_privincia/canton/id_canton/distritos.json

Entonces por ejemplo si quisiéramos los distritos del cantón de Montes de Oca (Cantón #15 de San José) de la provincia de San José (provincia #1) la URL sería:

https://ubicaciones.paginasweb.cr/provincia/1/canton/15/distritos.json

Lo cual devuelve una versión mimificada de lo siguiente:

{
    1: "San Pedro",
    2: "Sabanilla",
    3: "Mercedes",
    4: "San Rafael"
}

Ejemplo

El siguiente es un ejemplo en jQuery de como obtener la lista de provincias  de Costa Rica y generar un selector de provincia.

<html>
    <head>
        <title>Obteniendo las provincias</title>
        <script src="jquery-2.2.3.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#enlaceajax").click(function (evento) {
                    $.ajax({
                        dataType: "json",
                        url: "https://ubicaciones.paginasweb.cr/provincias.json",
                        data: {},
                        success: function (data) {
                            var html = "<select>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#destino').html(html);
                        }
                    });
                });
            })
        </script>
    </head>
    <body>
        <a href="#" id="enlaceajax">Obtener provincias</a>
        <br>
        <div id="destino"></div>
    </body>
</html>

Un ejemplo más completo utilizando los mapas de Google

Notas importantes

  • El servicio usa el header  access-control-allow-origin:* para que pueda ser solicitado usando Javascript desde cualquier dominio.
  • El servicio puede ser solicitado por medio de http y https
Publicado en

Como instalar Cordova y crear aplicaciones móviles usando Javascript

Que es Apache Cordova?

Apache Cordova es una plataforma de desarrollo que permite el uso de tecnologías web estándar (que utilizamos para programar páginas web como HTML5, CSS3 y JavaScript), para el desarrollo multiplataforma muy utilizado para el desarrollo de aplicaciones móviles para Android y iOS. Sin embargo, soporta los sistemas operativos: Plataformas soportadas

Instalación

La instalación de Apache Cordova varía según el sistemas operativo en el que deseamos que compile nuestra aplicación, ya que dependemos de sus SDK’s para poder compilarlo, y de esto dependen nuestros requisitos.

Requisitos

  • npm: Administrador de paquetes para Javascript, viene instalado con Nodejs
    • Instalar Nodejs en la página oficial de node
    • Verificar instalación de node ejecutando 
      node -v
      • En caso de no funcionar agregue a la variable de entorno PATH la dirección del ejecutable de Node.
    • Verificar la instalación de npm ejecutando 
      npm -v
      • En caso de no funcionar agregue a la variable de entorno PATH la dirección del ejecutable de npm (C:\Users\user\AppData\Roaming\npm)
  • Cordova: Se instala ejecutando el siguiente comando (en el caso linux/mac necesita permisos de superusuario):  
    npm install -g cordova

Compilando para Android

  • Java JDK: Descargar e instalar desde la página oficial de Oracle
    • Verificar la instalación ejecutando  
      javac -version
      • En caso de dar error incluir en la variable PATH la dirección del ejecutable de Java, además agregar en la variable JAVA_HOME la misma dirección (usualmente C:\Program Files\Java\jdk1.8.0_73\bin)
  • Android SDK: Instalar Android Studio desde la página oficial
    • Agregar a la variable de entorno PATH las siguientes carpetas
      • android-sdk\tools (usualmente en C:\Users\user\AppData\Local\Android\android-sdk\tools sin embargo esta dirección sale en Android Studio)
      • android-sdk\platform-tools (usualmente en C:\Users\user\AppData\Local\Android\android-sdk\platform-tools sin embargo esta dirección sale en Android Studio)
      • Verificar instalación ejecutando:  
        adb version

Compilando para iOS

  • Instalar Xcode desde la tienda de iTunes
  • (Opcional) Para poder correr el simulador desde la consola se puede instalar lo siguiente:  
    npm install -g ios-sim

Creando una aplicación

Para crear una aplicación en Cordova ejecute el siguiente comando:

// crear aplicación llamada NombreDelApp en la carpeta carpeta
cordova create carpeta com.ejemplo.hola NombreDelApp
// posicionarse en la aplicación 
cd carpeta
// agregar android al proyecto
cordova platform add android --save
// agregar iOS al proyecto
cordova platform add ios --save
// verificar si tenemos todo lo necesario
cordova requirements
// Ejecutar mi aplicación en android
cordova run android
// Ejecutar mi aplicación en iOS
cordova run ios

El comando run compila (cordova build) nuestra aplicación y la ejecuta en el dispositivo que tengamos conectado, de no tener un dispositivo conectado la ejecuta en el emulador que tengamos configurado. En caso de solo tener asociada una plataforma en nuestra aplicación no es necesario especificar el sistema operativo al final del comando run.

Modificando mi aplicación

Como Cordova solamente utiliza HTML, CSS y Javascript el único código que vamos a cambiar (a menos que necesitemos cosas más avanzadas) se encuentra en la carpeta www que se encuentra en la raíz del proyecto.

Íconos

Para cambiar los íconos de la aplicación se deben modificar las imágenes que se encuentran en las siguientes direcciones:

  • Android: app/platforms/android\res
  • iOS: app/platforms/ios/Resources

Links útiles