Bootstrap basic structure

Here it is, a basic-as-hell Bootstrap 3 example without javascript, only HTML and CSS to start quickly any simple site:


Jugando con la API V3 de Google Maps

Te encargan una web y, tras hacer el correspondiente cutup y dejarla más o menos molona, toca una de las partes más complicadas y más “robatiempo” del proceso, hacer un mapa dignamente completo.

Aquí os pondré un ejemplo de código para un mapa que cumple con los siguientes requisitos:

  1. Iconos de lugar personalizados para cada resultado de búsqueda.
  2. Iconos de alta definición para pantallas con alto DPI.
  3. Minimización de código dentro del documento HTML.
  4. Posición inicial por defecto con su propio nivel de zoom.
  5. Posición inicial por geoposición y con su propio nivel de zoom.
  6. Posibilidad de ir, centrar, hacer zoom y abrir ventana de información en un punto desde fuera del mapa.
  7. Color del mapa personalizado.
  8. Permitir zoom en mapa sólo con los botones de la interfaz, bloquear scroll con ratón.

Pues bien, entramos en vereda. Lo primero que deberemos hacer es crear un archivo llamado “js/map.js“, siempre y cuando no tengamos ya creado un “js/functions.js” o algo así.

Dentro del archivo “js/map.js” introducimos lo siguiente:

Ahora deberemos colocar el siguiente código antes del elemento </head> en nuestro documento HTML:

Y dentro del cuerpo del documento, entre los elementos <body> y </body>, colocaremos el siguiente código:

Con esto, habiendo creado la imagen del pin básico con la ruta “img/markers/pinLoc.png” ya tendremos el mapa funcionando centrado en una posición por defecto (en este caso el estado de Queensland, Australia) y, si damos permiso al navegador de adquirir nuestra posición, tendremos un marcador personalizado geoposicionado con nuestra ubicación actual.

 

Ahora viene la segunda parte del post, donde colocaremos diferentes puntos en el mapa, cada uno con su icono. Para ello os voy a poner código con 2 puntos, pero siguiendo la lógica del proceso podréis poner los que queráis. El siguiente código deberá ir dentro del documento HTML, ya que es un contenido que puede ser generado de forma dinámica al cargar la página a través de un bucle PHP, por ejemplo, con un CMS tipo WordPress.

Como puedes ver, he creado un script con un contenido totalmente dinamizable, en el que tenemos 2 lugares diferenciados con la terminación 1 ó 2, pero que podrá llegar hasta el número que quieras, y a cada número le corresponde un icono en la carpeta “img/markers/“.

Como también podrás observar, he añadido un Event Listener al final de cada bucle escuchando el evento “click” en un elemento externo al mapa. Para el caso del primer punto del mapa, “site1“, al hacer click en un elemento externo con el ID#site1” irá, centrará, hará zoom y abrirá la ventana de información de ese punto.

 

Bueno, espero que os haya gustado esta solución, sé que el código es mejorable, pero creo que es lo suficientemente robusto y escalable como para usarlo en webs profesionales. Un saludo!


Soyuz launch, rendezvous, docking, undocking, reentry and landing.

Soyuz launch

[11m 29s]

What are the parts of the Soyuz rocket? What are the stages into orbit? What is the launch sequence? Watch and find out. This video has been produced from an actual lesson delivered to the ESA astronaut class of 2009 (also known as the #Shenanigans09) during their ESA Basic Training in 2009-2010


Soyuz Rendezvous and Docking

[21m 06s]

This second video in the ‘Journey to the International Space Station’ series follows the Soyuz capsule from Earth orbit to docking with the Space Station. Featuring interviews with ESA astronauts Luca Parmitano, Frank De Winne and Paolo Nespoli, and an introduction by Alexander Gerst, it includes unique footage taken from inside the Soyuz spacecraft.


Soyuz Undocking, Reentry and Landing

[20m 45s]

How does an astronaut return to Earth from the International Space Station? What does it feel like to re-enter the atmosphere? How does the Soyuz capsule function? Watch and find out. This video is based on an actual lesson delivered to the ESA astronaut class of 2009 (also known as the #Shenanigans09) during their ESA Basic Training. It features interviews with astronauts who have flown on the Soyuz and dramatic footage of actual landings.


This videos is a joint production of the ESA Human Spaceflight & Operation Astronaut Training Division & Promotion Office




MAC Spoofing Your Way to Free Internet

This article will help you gain free access to pay-for-use wireless hotspots such as in the airport or the local coffee shops. Many articles I have read on how to gain free Internet access deal with creating ssh tunnels and concatenating characters onto the URL to bypass the router. However, I will be detailing a well known technique of MAC spoofing to gain access.

broadband-150348_640

In this article, I will be using OS X. However, these commands can easily be ported to any *nix machine. On Windows, simply follow the same steps by issuing the equivalent commands in a command window and using the program SMAC to spoof your MAC address.

The first step is to connect to the wireless hotspot as you would if you were going to pay for access. When you have successfully connected to the hotspot, you should be issued an IP address. Check this by entering the ifconfig command:

 

Here we can see that the IP address that was issued was 10.15.32.137. The next step is to gather other MAC addresses connected to the hotspot. To do this, issue a ping to the broadcast address:

 

When this command runs, you should see different IP addresses responding to your broadcast. When you start to see the IP addresses repeating, you can give it the ol’ command-c. The next step is to issue the arp command to see what MAC addresses you have just gathered in your arp cache.

 

Above, you can see that we have the MAC address 5c:ac:4c:84:d0:65 in our arp cache, which is associ≠ated with IP address 10.15.32.95. Now, to spoof this MAC address, we must simply tell our en1 wireless card to use the MAC address already connected (and paid) to the access point.

 

After you have changed your MAC address, disconnect and reconnect to the wireless access point. Doing this will grab a new IP address and, since the router’s data table already has 5c:ac:4c:84:d0:65 associated with the .95 IP address, this is the IP address you should now have. Because the router keeps track of who has paid by MAC address, you should now be able to access the Internet, bypassing the login and payment pages.

Some notes when choosing to do this. First, connecting to the Internet without paying can be a gray area in regards to morality. The gray area is enhanced by the fact that the MAC address you choose to spoof will be kicked offline. By spoofing another user’s MAC address, both your connection and the other user’s connection will go up and down. This technique works best in longer stay areas such as an Iraq deployment or a hotel, since a user may not always be online the same time as you, therefore giving you a more stable connection. Another consideration is the list of MAC addresses after issuing the arp command. Not all addresses that show in your arp cache will have paid to access the Internet. Many times, a user’s wireless card will connect to a network automatically without the user’s knowledge. Because of this, you may have to try more than one MAC address.

— by Ashes


JavaScript en diseños responsive

Mucho se ha hablado ya de los “media queries” en CSS para ir adaptando el estilo de la página web según el tamaño del navegador. Pero, en muchas ocasiones, usamos funciones en JavaScript que, dependiendo de la versión de web que estemos usando, deben cambiar.

rp_240px-Unofficial_JavaScript_logo_2.svg_.png

Como ejemplo os pongo en situación de algo básico. Imaginemos que al hacer click en un botón debemos hacer desplazar un elemento 345 píxeles, en la versión para iPad 300px y en la de iPhone 400px. Problemón, o… no tanto, quizá.

Pongamos que al hacer click en la imagen “mover.png” ejecutamos la función “moverCosa()“, que mueve el elemento con ‘id=”cosa-a-mover”‘. Tendríamos un código tal que así:

Y en el archivo “mover.js” tenemos lo siguiente para la versión de escritorio:

Pues bien, ahora deberemos introducir los “media queries” de JavaScript, que no es más que un “if” que recibe las medidas del navegador. Podríamos terminar nuestro ejemplo con lo siguiente:

De esta manera tenemos diferente código corriendo en la misma función dependiendo del tamaño del navegador con puro JavaScript.

 

Un saludo!!


The future of the apps are webapps

I really enjoyed reading the article that @Tevko published yesterday about the mobile apps and their future. I completely agree 100%. For me, the only ‘cons‘ we need to wait for are better API to improve the access to things like camera, processor or sensors, because currently all that features are not available from a webapp.

 

JS logo

Javascript, the future of the apps!

 

Also, a BIG handicap is the memory management, in web technology we have Javascript and its Garbage Collection sucks, luckily Javascript is improving in the last years, also we will see better frameworks like AngularJS to create truly high-level apps so customers only will need to bookmark it and click! No updates anymore!

 

Scissors cutting the word costs concept for recession or credit crisis

 

Development costs could be highly cut down, as we wouldn’t need to develop an app for Android, another for iOS, Windows Phone, FirefoxOS, etc.

 

Lets see what next year brings to us!


Usar Open Sans con Google Chrome (bien renderizada)

Acabas de terminarla. Tienes una flamante nueva web. La pruebas en Firefox, bien. La pruebas en Safari, bien. La pruebas en Opera, bien. La pruebas en Internet Explorer, bien incluso. La pruebas en Chrome, mal… A ver, estás usando Open Sans, una fuente de Google, ¡y su navegador no lo renderiza bien! Es de cachondeo, pero bueno… ¡tiene solución!

chrome-chromium-logos

Tras muchas pruebas, he visto que cargando la fuente con el siguiente código funciona y renderiza perfectamente, incluso la versión en “negrita”:

Eso es, cargando la fuente en <head> como otra hoja de CSS más, Open Sans carga perfectamente =)


Tener el cambio de moneda actualizado en tiempo real en una celda de LibreOffice Calc

Como a mí, a muchos de los que vivimos en un país con una moneda diferente a la de la patria madre nos ocurre que, al tener todos los gastos apuntados en una hoja de cálculo, queremos contrastar con “nuestra” moneda para hacernos una mejor idea de cuánto ganamos, cuánto gastamos y cuánto ahorramos.

libreoffice-calc

En mi caso, vivo en Australia y vivo con dólares australianos (AUD). Tengo una hoja llena de cosas como “Gasolina 10-ago“, “Café 25-ago“, “Sueldo 2-sep“, y así. El problema viene cuando, al calcular el total, añado una celda para hacerme una idea de a cuántos Euros equivale todo lo que tengo. Y es que, para calcular ese dato, tengo que multiplicar los AUD por el cambio del momento (ahora está a ‘$1 = 0.72€‘). Como imaginarás, es un “coñazo” enorme estar consultando todos los días el cambio actual e introduciéndolo a mano, y como no lo actualizo a diario, lo que veo en mi hoja de cálculo no es tan fiable como me gustaría.

Screen Shot 2014-09-06 at 14.48.19

Bueno, pues para eso está la opción “Insert > Link to external data”, ahí podréis especificar una dirección web de donde Calc va a mantener actualizada la celda o rango de celdas que espeficiquemos.

Para el caso que me ocupa, estoy usando la web de Yahoo! Finance, con la URL “https://au.finance.yahoo.com/q?s=AUDEUR%3DX“, de donde extraigo el dato que me interesa. En este caso, el cambio entre AUD y EUR, si quieres otra moneda, sólo tienes que buscar el cambio en la web.

external-data

Si quieres mantener actualizado el cambio, no olvides pulsar en “Update every 60 seconds”.

La información que quiero está en el campo “HTML_2“, que me da 4 datos interesantes, “Prev close“, “Open“, “Bid” y “Ask“. Os detallo a continuación cómo queda en el Calc.

Screen Shot 2014-09-06 at 14.43.54Así, con estos datos, ya podemos trabajar. En mi caso uso el primero, el cierre de ayer (Prev close).

Espero que os sirva de utilidad, a mí me ha quitado mucho trabajo =)


WordPress basic hierarchy

The following chart will help you to develop better themes for WordPress, is a must-follow structure to do everything in the WordPress way and to build future-proof themes.

For a better and interactive image, visit wphierarchy.com.


¿Qué hora es?, ¿qué color es?

Hoy os traigo algo interesante, aunque sea una chorrada como una casa. Pero bueno, para eso está el blog, ¿no?

Se trata de una combinación CSS+PHP+Javascript que hace cambiar el color del cuerpo del documento de forma dinámica según la hora en la que estemos.

¿Cómo lo hace?

Como ya sabemos, el color se puede definir con 6 dígitos hexadecimales, como #fabada (color rosado) ó #5c5c5c (grisáceo). Si nos damos cuenta, el formato de la hora puede darnos un color equivalente, así que para la hora 13:32:45 podríamos extraer el color #133245 (tono azulado).

Aquí abajo os dejo el ejemplo para, con todo el código inline, se genere de forma inicial el color con PHP, y luego se vaya actualizando cada segundo con Javascript, siendo animado con CSS para hacerlo más suave.