Archivo por meses: junio 2011

La nueva interfaz de Google


Tras varias semanas de rumores de sobre si Google cambiara o no su apariencia, hace unos pocos días ha sorprendido a varios con lo que es una nueva interfaz muy limpia, minimalista y de diseño muy elegante.

También podemos ver que entre los cambios mas significativos están el rediseño del logo principal y la desaparición del botón “voy a tener suerte” así como también el color azul en los botones de búsqueda.

Google aun no ha hecho oficial el cambio de interfaz grafica por lo que se puede suponer que están haciendo experimentos y pruebas aun :).

A mi en lo personal me ha gustado bastante la nueva interfaz de google, los colores son los adecuados y la tipografía es excelente, y ¿a ustedes que les parece?

salu2

Como colocar Google Maps en mi sitio web




Google Maps es sin duda una tecnología muy utilizada hoy en día y es posible que cualquier persona pueda hacer uso de ella en una aplicación web por ejemplo, su implementación es bastante sencilla y es completamente configurable, a continuación les enseñare brevemente como podemos insertar un mapa con una coordenada y un icono pre configurado.

Lo primero que tenemos que hacer es mandar llamar la librería

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Después preparamos nuestro código:

jQuery(document).ready(function() {
      var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);
      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);
      var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });
});

Tranquilos que ahora explicare que hace cada cosa 🙂

var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);

con el metodo new google.maps.LatLng(); le damos las coordenadas en las que comenzara la vista del mapa, guardamos los datos en la variable mapCenter.

Vayan a la seccion de Mapa (la pestaña de mapa junto a la de video, plano e imagen).

Después de eso, para inicializar el mapa creamos el objeto Map Options que tendrá las configuraciones iniciales.

      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

  • zoom: especifica el nivel de zoom con que se iniciara, entre mas zoom mas cerca.
  • center: indica la coordenada inicial que previamente definimos
  • mapTypeId: el tipo de mapa que utilizaremos, se aceptan los siguientes parámetros:
  • ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.
  • SATELLITE, que muestra imágenes de satélite.
  • HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).
  • TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).

Ya inicializado después tenemos que indicar el contenedor del mapa, en este casi un div con id div_map y le pasamos como parámetro el objeto de inicializacion myOptions

activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);

Ahora ya con esto nuestro Mapa esta funcionando, pero no nos conformamos con eso x’D, crearemos un marcador 🙂

var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });

De la misma manera creamos una nueva coordenada y las almacenamos en devLocation después de image2 cargamos una imagen que será el icono de nuestro marcador y por ultimo creamos el objeto pasándole como parámetro los atributos position (la posición devLocation que indicamos), map (nuestro mapa! el ActiveMap), title (un titulo para el marcador), icon (el recurso, image2).

Esta es una buena manera de complementar información haciendo uso de ubicaciones geográficas :), sin embargo cuando son muchísimos los datos que tenemos que marcar en un mapa no lo aremos manualmente, entonces tenemos que hacer uso de una tecnología para mandar los datos, como por ejemplo JSON o XML (en mi proyecto Zonau – U hago uso de JSON y varias otras cosas).

Google Maps
también nos permite cargar layers en nuestro Mapa por medio de código KML, pero eso será para un post futuro 🙂

Demo, vayan a la seccion Mapa (la tab de mapa junto a la de video, plano e imagen).

Jquery formato de Precio



Existe un plugin para JQuery llamado jquery-formatcurrency que te nos permite dar formato de precio a nuestras cifras numéricas, una gran ayuda en cuando a estética en nuestro sitio web.

Utilizar el plugin es realmente sencillo, primero tenemos que hacer la llamada en nuestro archivo, después de a ver cargado la librería de javascript Jquery.

<script type="text/javascript" src="/js/jquery.formatCurrency-1.4.0.js"></script>

Y después dentro del

$(document).ready(function(){ });
tan solo utilizar el método
formatCurrency()
el código quedaría de la siguiente manera:

$(document).ready(function(){
          $('#precio').formatCurrency();
});

Ejemplo
Tenemos el texto original:
1000000 y ahora aplicándole formatcurrency() quedaria 1000000

salu2

Agregar boton de facebook y twitter


Existen bastantes plugins que nos permiten dar a nuestros blogs interacción con las redes sociales (facebook, twitter, linkedin, youtube, etc) sin embargo hay veces en las que estamos desarrollando un proyecto propio y no queremos agregar código innecesario (solo queremos un botón y ya).

Es muy sencillo, facebook nos permite colocar un botón de like en nuestro desarrollo por medio de un iframe de la siguiente manera

Yo he puesto algunos datos de ejemplo en cada atributo, por ejemplo zonau.com.mx en href

<iframe src="http://www.facebook.com/plugins/like.php?href=http://zonau.com.mx/inmueble/{{publicacion.property.id_property}}&amp;layout=standart&amp;show_faces=false&amp;width=20&amp;height=60&&action=like&amp;font=tahoma&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:80px; height:25px"></iframe>

Descripción de cada atributo:

  • href – Direccion URL a compartir.
  • layout – Estilo del botón. Valores: standard o button_count
  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.
  • width – Ancho del iframe.
  • height – Alto del iframe.
  • action – Texto del botón. Valores like o recommend.
  • font – Fuente a utilizar.
  • colorscheme – Esquema de colores. Valores: light, dark o evil.

Para agregar el botón de twitter es mucho mas sencillo (como si el de facebook fuera muy complicado jaja), tan solo agregar la siguiente línea.

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

salu2

Documentos oficiales y documentos de negocios

Tenia ya varios días que no escribía nada en mi blog personal, no obstante en mis demás blogs la creación de entradas no para gracias a mi redactores x’D, bueno en esta ocasión quiero compartir con ustedes … lectores, un nuevo proyecto que traigo entre manos el cual he llamado Documentosde.

Es un blog en el que planeo publicar documentos oficiales, documentos de negocios, documentos legales así como de otros tramites administrativos, me he dado cuenta que en la vida real para realizar cualquier tramite siempre se necesitan escritos y lamentablemente no siempre son fáciles de conseguir (Acuerdos de sesión de tecnología, acuerdos de contratos de hosting, etc), es por eso que me he dado a la tarea de comenzar a hacer una recopilación de documentos de todo tipo.

Los archivos pueden ser encontrados por internet ya que son de dominio publico mi trabajo es hacer nada mas una recopilación y organizar el contenido para hacérselos llegar 🙂

Con esto quiero aportar aun mas granitos de arena hacia internet y a los internautas que hacen uso de el, si quieres descargar documentos oficiales, legales o documentos de negocios Documentosde.com es el sitio adecuado :).

salu2