sábado, 30 de julio de 2011

Feliz dia del Sys Admin

El ultimo viernes de julio, es el dia del administrador de sistema, del cual me entero un dia despues asi que feliz dia del administrador de sistemas a todos.

http://www.sysadminday.com/

martes, 19 de julio de 2011

Google static Maps API.

Como dice en la pagina de google:
Te damos la bienvenida a la documentación para programadores de Google Static Maps API. Google Static Maps API te permite insertar una imagen de Google Maps en tu sitio web sin utilizar JavaScript ni ningún sistema de carga de páginas dinámicas. El servicio Google Static Maps creará tu mapa a partir de los parámetros de URL enviados a través de una solicitud HTTP estándar y generará una imagen de mapa que podrás mostrar en tu página web


Google Static Map API como dice el mismo google nos da la facilidad de cargar nuestros mapas de Google Maps a treves de una simple url, con la SUPER VENTAJA de no tener que cargar las librerías javascript, o no por lo menos al principio de la pagina lo cual puede ser una ventaja para reducir el tiempo de carga de nuestra pagina. Ademas la url no requiere clave de Google Map Api.

Hago un manual de como usar, aunque sea muy sencillo, porque es una de las API de Google menos conocidas, y que podría ser muy útil para cualquier programador.

Webs:


Que puedes hacer con Google Static Map API?

Con esta API de google se pueden crear imagenes de mapas estaticos, que aunque no contienen las funcionalidades de mover el mapa y esas cosas como el API con javascript, pues te permite mostrar un mapa, agregar marcas, ponerle color a las marcas y como si guera poco crear rutas. No se pueden Agregar cuadros de dialogos, ni cambiar el zoom y esas cosas, pero a cambio de cuadros de dialogos se pueden poner marcas con letras, y asi en otra parte poner que significa cada letra(una leyenda).


Limites de uso de Google Maps API

Pues San google nos permite permite un uso casi ilimitado de google map, nos limita nada mas y nada menos a 1000 solicitudes por visitante y dia, este es un limite bien alto, pero si requerimos más podemos siempre pagar y estar en la version premier para superar ese limite.

El otro limite que hay es el largo de la url, maximo puede tener 2048 caracteres, probablemente no necesitemos tanto, sino para mapas muy complejos.


Como se usa Google Maps API.

Como son imagenes lo que vamos a poner en nuestra web debemos hacerlo a traves de etiquetas <img>, donde el src comenzara por http://maps.google.com/maps/api/staticmap? y despues todos los parametros de nuestro mapa. 

Los parametros despues los colocamos igual que en una peticion GET. Un ejemplo de esto es:  http://maps.google.com/maps/api/staticmap?center=xxx&zoom=xx.

Parametros que acepta Google Maps API 


    Parámetros de ubicación:
  • center.(obligatorio si no hay marcas)
  • zoom.(obligatorio si no hay marcas.)
    Parámetros de mapas:
  • size (obligatorio) 
  • format (opcional) 
  • maptype (opcional)
  • mobile (opcional) 
  • language (opcional)
  • Parámetros de función:
  • markers (opcional) 
  • path (opcional) 
  • visible (opcional) 
  • Notificación de parámetros:
  • sensor (obligatorio)


Las imagenes que va a devolver el sistema, pueden estar en jpg, gif y png, el predeterminado es png, el formato se especifica a traves de la etiqueta format y eston son tipos: (Yo recomiendo par apaginas web normales, jpeg y para celulares )
  • png8 o png (predeterminado) especifica el formato PNG de 8 bits.
  • png32 especifica el formato PNG de 32 bits.
  • gif especifica el formato GIF.
  • jpg especifica el formato de compresión JPEG.
  • jpg-baseline especifica un formato de compresión JPEG no progresivo.
Esta API al igual que su contraparte en javascript tambien se le puede especificar  el tipo de mapa, aqui los tipos:
  • roadmap (predeterminado) 
  • satellite
  • terrain
  • hybrid 
El resto de las especificaciones las   pueden leer de la pagina de Google Maps API, solamente cave destacar que si no especificamos un punto centro y colocamos marcas, el sistema auntomaticamente centrara y pondra zoom a nuestro mapa, con la idea que se vean todaas las marcas y auto realizado.

Aqui les dejo algunos ejemplos:

Mapa turistico de Margarita:



 http://maps.google.com/maps/api/staticmap?center=10.947259,-64.031181&zoom=10&size=600x400&sensor=false&maptype=roadmap&format=jpg

Canaima:


 http://maps.google.com/maps/api/staticmap?center=6.239879,-62.841167&zoom=12&size=600x400&sensor=false&maptype=satellite&format=jpg

El planeta:

http://maps.google.com/maps/api/staticmap?center=6.239879,-62.841167&zoom=1&size=600x400&sensor=false&maptype=hybrid&format=jpg






sábado, 16 de julio de 2011

Mejorar el rendimiento de una pagina: Optimizando imágenes.

Cuando estamos en el proceso de diseño de una pagina web, por lo general uno esta pendiente es del rendimiento en el código o de terminar el trabajo rápido para el día que te comprometiste a entregarlo que si no lo haces te botan, y por supuesto son muchas las cosas que se le escapan a uno entre esas cosas que se le escapan a uno es que como se esta trabajando en local pues no nos damos cuenta de que tan pesada esta nuestra pagina y cuanto se va a tardar un usuario en descargarla.


Pero que seria una pagina web sin imágenes, sino un sitio lugubre y oscuro que nadie quería ver ni visitar, por ello hay varios factores para poder optimizar las imágenes los cuales voy a tratar de explicar para que pueden mejorar sus programas.

Factores para tomar en cuenta a la hora de optimizar imágenes:

Peso de la imagen.

Una de las principales razones por la cual una pagina se vuelve muy pesada es porque tenemos una gran cantidad de imágenes, a veces hasta sobre cargamos la pagina, y ninguna de ellas a sido optimizada, un ejemplo de esto es una pagina web que estaba optimizando en estos días en la cual se redujo unos 300 kb solo optimizando las imágenes, es decir como un 30% del peso de la pagina, sin quitarle nada a la pagina, ni reducir la calidad de la misma.

Ustedes de preguntara como puede ser esto?, pues simple las imágenes cuando son generadas ya bien sea por una cámara, teléfono, scaner o algunos programas, traen dentro de si información relevante sobre la imagen, además de que están en un formato "x" en el que lo guardo el programa, cuando optimizamos una imagen no es que le quitamos calidad, sino que reducimos su peso eliminando información que no sea necesaria y además guardándola en un formato que ocupa menos espacio, también se puede reducir la calidad de la imagen y con eso reducir el peso de la imagen pero a veces no es necesario.

Aquí les dejo dos herramientas:

Tipo de Imagen:

A la hora de crear imágenes en nuestra pagina web, pues muchas veces no se siguen unas lineas claras y pues se crean imágenes tiff, bmp, jpeg, png, etc. y cuando vamos y vemos estamos usando imágenes que están destinadas para otro tipo de aplicaciones en nuestra pagina web, por lo general imágenes para la web son imágenes pequeñas con poca información y que muchas veces el usuario ni les presta atención, en una pagina web debemos tener por lo general imágenes de tipo jpg y png, son las más recomendadas para la web, gif solo se debe usar en caso de querer poner una animación. 

Ahora bien porque y cuando usar cada uno de los formatos para web.

Png o gif, por lo general la gente usa cualquiera de estos dos formatos para imágenes con transparencia, ya que los dos soportan transparencias, pero ya en este tiempo actual todos los navegadores nuevos soportan el formato PNG a la perfección y por ende para imágenes con transparencia o que se requiera cierta calidad se debe usar es PNG, no gif.  principalmente porque el formato png ademas de soportar transparencias también produce imágenes mas livianas ya que fue echo pensando en la web.

JPG, es un formato muy útil que se destaca del resto de los formatos porque a diferencia de otros formatos las imágenes grabadas en jpeg ocupan mucho menos espacio, en la web se debe usar para cualquier imagen que no requiera transparencias, por lo mencionado anteriormente.

Ofrece Imágenes a escala:

Cuando usamos imágenes en nuestras paginas web, a veces se dan casos donde la imagen es más grande que el are donde se va a mostrar, por múltiples razones puede suceder esto, pero se debe estar pendiente ya que al ofrecer una imagen del mismo tamaño como se va a mostrar en la pagina es lo mejor que se puede hacer ya que el navegador no va a descargar recursos demás que después no va a necesitar, y esto puede llegar a reducir inclusive a la mitad el tamaño de la imagen. Esto se hace con photoshop, gimp o cualquier programa de edición de imagenes.


JPEGOPTIM Optimizador de imagenes jpeg

Esta es otra grandiosa herramienta para optimizar imágenes, esta optimiza imágenes Jpeg es super fácil de usar, aunque viene solo para linux, pero es muy muy útil, ya que puede reducir hasta un 40 % el peso de una imagen sin reducir su calidad.


Para optimizar imágenes con JPEGOPTIM es por linea de comandos, solo con poner jpegoptim y el nombre la imagen ya empieza nuestro programa a optimizar las imágenes, pero aquí les dejo los comandos para optimizar aun mas las imágenes:

-n simula la compresión pero no hace nada.
--strip-all elimina todo tipo de comentarios y marcas.
--strip-com elimina los comentarios de la imagen
--strip-exif elimina todas las marcas tipo exif de la imagen
--strip.itpc elimina las marcas tipo itpc
--strip-icc elimina las marcas tipo icc
-m[0-100] especifica la calidad máxima de la imagen de salida, con este atributo si se reduce la calidad de nuestra imagen, pero con unas pocas pruebas se darán cuenta que no es mucho lo que se reduce.

Ejemplo de la optimizacion de imágenes, hay tres una sin optimizar, otra donde se eliminaron todos los comentarios y marcas y la ultima sin comentarios ni marcas y con una calidad de 50. Para que se tomen una idea:

http://www.box.net/shared/f5v0adq0kk6j7rpfnjjl


jueves, 14 de julio de 2011

OPTIPNG una herramienta para optimizar png

Ahora bien en esta ocasión les voy a presentar una herramienta para optimizar imagenes OptiPNG es muy sencillo de usar y bastante ligero.

WEB: http://optipng.sourceforge.net/

OptiPNG dispone una versión linux y otra windows, para optimizar una imagen con este solo debemos escribir optipng <nombre del archivo> por supuesto optipng tiene varias opciones, aqui les voy a hacer una lista:

-h: Muestra la ayuda
-o: Selecciona el nivel de compresión del 1 al 7
-out: Genera un archivo externo optimizado
-simulate: corre la optimizacion pero no la hace, solo es para ver que tanto podría hacer.
-keep: Mantiene un respaldo de la imagen a optimizar.