Tag Archives: ubuntu

Regresando de Campus Party

Uff despues de una larga semana y algunos dias porfin estamos de regreso :), ¿que como describiria mi experiencia en campus party en 1 sola palabra? … Increible, asi es, simplemente fue increible, conoci bastante gente muy interesante, asisti a ponencias de gran nivel he hice nuevos amigos :).

Llegue el miercoles 20 a las 4 am al evento x’D (por cuestiones de trabajo), donde ya me estaban esperando @Zagrevyum y @uhgy3k (que no tenian camping x’D y pues ya les di 2 pases VIP :D), como ya era casi de dia pues ¿para que dormir? asi que emprendimos un dia maratoniano manteniendonos despiertos durante 2 dias y medio seguidos jajaja.

De las personas mas interesantes que conoci y con las cuales me tome algunas fotos fueron @_hkm, @cibercrimen, Jon Maddog, @xianur0, @nitr0usmx, @only_oCrA, @paulinocaIderon, Umberto121, @_soldier, @adrianmtzb, @tachuela, @tachuelaa, @bucio, @xrandy, @sucubus_vampire, son los que vienen a mi mente ahora (una disculpa si olvido alguno )

Las mejores conferencias sin duda fueron las de seguridad permitral y configuracion de honeypots, la de informatica forence, la de dotdotFUA (dotdoypwn)de @nitr0usmx, la de los routers de @_hkm, la herramienta fhttp de @Xianur0 y ya mas aca en la comunidad underground x’D la de creacion de scripts para nmap de @paulinocaIderon, bypasseando sistemas de seguridad biometricos de @xianur0, la conferencia de Napa sobre biohacking y enfermedades terminales (realizo una investigación muy completa e impresionante) y la de Umberto121 quien descifró el algoritmo de generación de contraseña de los routers Huawei Hg xD.

Sin duda ahi nos veremos el año que viene 🙂

A continuación les dejo algunas fotografias que tome 🙂

PD el año que viene me compro una mejor cámara jaja.

salu2

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).

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