Como configurar resaltador de sintaxis en blogger

1. En primer lugar, tener una copia de seguridad de su plantilla Blogger
2. Después de que abra su plantilla de blogger (En el modo de Edición  HTML)  copiar todo el css dado en este enlace antes de la etiqueta </ b: skin> 
3. Pegar el siguiente código antes de la etiqueta  </ head>.  Recuerda omitir los lenguajes de programación que no necesites.

   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Pegar el siguiente código antes de la etiqueta </ body>.

   <script language='javascript'>
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>

5. Guardar la plantilla del blogger
6. Ahora el resaltado de sintaxis está listo para usarse con la etiqueta <pre> </ pre> 

   <pre name="code">
   ...Your html-escaped code goes here...
   </pre>
   
   <pre name="code" class="java">
   public class Person { 
       private String firstName, lastName, job, gender;
       private int salary, age;
   }
   </pre>

7. Puedes escapar tu código aqui
8. Acá esta la lista de los lenguajes soportados por el atributo <class>

Tabla con Cabecera estática, Cuerpo con Scroll Vertical y Responsive

Estaba trabajando con Richfaces en un proyecto, cuando uno de los clientes pido un requerimiento especial para mostrar datos en un tabla y a su vez poder desplegar de cada fila una nueva tabla con los detalles de esta, y al vez tenia que ser Responsive ya que la aplicación puede ser accedida desde cualquier dispositivo. Vaya sorpresa cuando me di cuenta que Richfaces no tenia soporte para este componente, así que me puse en la tarea de desarrollarlo, en fin... uno de los problemas que me toco solucionar, fue hacer la cabecera de la tabla estática, y poder hacer scroll con el body y a la ves que la tabla fuera responsive , bueno vamos al código.

Primero tenemos nuestro html

<table>
    <thead>
        <tr>
            <th>Item #</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price Unit</th>
            <th>Price Total</th>
        </tr>
    </thead>
    <tbody>
        <!--!important -->
        <tr >
            <td colspan="5"></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Prod A1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Prod B1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Prod C1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Prod D1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Prod A1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Prod B1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Prod C1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Prod D1</td>
            <td>5</td>
            <td>USD 3.00</td>
            <td>USD 15.00</td>
        </tr>
    </tbody>
</table>

El css

table{
    border-spacing: 0;
    display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/
    max-height: 40vh; /*El alto que necesitemos**/
    overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/
    overflow-x: hidden;/*Sin scroll horizontal*/
    table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/
    width: 98vw; /*El ancho que necesitemos*/
    border:1px solid gray;
}

thead{
    background-color: #f1eee9;
    position: fixed !important;/*el thead va ser siempre estatico**/
}

th{
    border-bottom: 1px solid #c4c0c9;
    border-right: 1px solid #c4c0c9;
}

th,td{
    font-weight: normal;
    margin: 0;
    max-width: 18.5vw; /**Ancho por celda*/
    min-width: 18.5vw;/**Ancho por celda*/
    word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
    font-size: 11px;
    height: 3.5vh !important;/*El mismo alto para todas las celdas**/
    padding: 4px;
    border-right: 1px solid #c4c0c9;
}
tr:nth-child(2n) {
    background: none repeat scroll 0 0 #edebeb;
}   

Como podemos ver es un código muy sencillo, el truco esta en:

1. Hacer la etiqueta <thead> con position fixed, para que el contenido siempre este estático
2. Al poner el <thead> fixed, sobrepone la primera fila dentro de la etiqueta <tbody>, es decir el primer tr, entonces para no perder el primer registro usamos la primera fila (<tr>) vacia con un colspan igual al total de columnas, con el fin de que la hacer el head fixed, se sobreponga sobre la fila vacía y no perdamos ningún registro importante.
3. Aseguramos de que todas las celdas tenga el mismo alto.
4. Asegurarnos que las columnas tenga el mismo ancho.
5. En este caso he usado las medidas viewport en lugar de porcentajes, también he usado la tabla con un alto máximo.
6. Puedes ver el demo aquí.

Espero que les sirva, recuerden comentar, y si tienen preguntas, también.

Crear instalador con Visual Studio 2013 Y C#

Como crear un instalador para nuestros proyectos con Visual Studio 2013 y C#

Descarga el proyecto completo desde github:
InstaladorVs

Un algoritmo aumenta el número de retuits en un 600%

La fórmula es capaz de detectar a los usuarios más predispuestos a reproducir estos micro-mensajes.

Si envías un tuit a un extraño y le pides que lo retuitee, probablemente no te sorprenderá que te ignore por completo. Pero si envías muchos tuits de ese tipo, algunos podrían acabar siendo reenviados.

¿Por qué? ¿Qué hace que alguien retuitee la información de un extraño? Esa es la pregunta que se plantean Kyumin Lee desde la Universidad Estatal de Utah en Logan y varios colegas del centro de investigación Almaden de IBM en San José (todos, en EEUU).

El equipo asegura que mediante el estudio de las características de los usuarios de Twitter, es posible identificar a extraños con más probabilidades de transmitir tus mensajes a otros usuarios. Y gracias a ello, los investigadores señalan haber sido capaces de mejorar la tasa de retuiteo de mensajes enviados por extraños hasta en un 680%.

¿Cómo lo han hecho? La nueva técnica se basa en la idea de que algunas personas son más propensas a tuitear que otras, sobre todo con ciertos temas y en determinados momentos del día. Así que el truco es encontrar a estos individuos y dirigirse a ellos en el momento en que probablemente sean más eficaces.

El método fue bastante sencillo. La idea era estudiar a individuos en Twitter, examinar sus perfiles y su comportamiento pasado en cuanto al envío de tuits y buscar pistas que indicasen que son más propensos a retuitear ciertos tipos de información. Una vez que encuentras a estas personas, les envías tus tuits.

Esa es la teoría. En la práctica, es un poco más complicado. Lee y su equipo quisieron probar la respuesta de la gente a dos tipos de información: noticias locales (en San Francisco) y tuits sobre la gripe aviar, que era un problema importante cuando estaban llevando a cabo la investigación. Crearon varias cuentas de Twitter con unos cuantos seguidores, específicamente para transmitir este tipo de información.

A continuación, seleccionaron a las personas que recibirían sus tuits. Para los envíos de noticias locales, buscaron a usuarios de Twitter geolocalizados en el área de la Bahía: encontraron más de 34.000 y eligieron a 1.900 de forma aleatoria.

A continuación, enviaron el mismo mensaje a cada usuario del formato:

"@SFtargetuser "Un hombre murió y otros tres resultaron heridos en un tiroteo ... http://bit.ly/KOl2sC" Pfv RT esta noticia sobre seguridad"

El tuit incluía el nombre del usuario, un titular corto, un enlace a la historia y una solicitud de retuiteo.

De estas 1.900 personas, 52 retuitearon el mensaje recibido. Eso supone una tasa del 2,8%.

Para la información de la gripe aviar, los investigadores buscaron personas que ya hubieran tuiteado sobre la gripe. Encontraron 13.000 y eligieron a 1.900 al azar. De ellas, 155 retuitearon el mensaje recibido, lo que supone una tasa de retuiteo del 8,4 %.

Pero Lee y compañía encontraron una forma de mejorar significativamente estos porcentajes. Volvieron a las listas originales de usuarios de Twitter y recogieron información pública disponible sobre cada uno de ellos, como su perfil personal, el número de seguidores, la gente a la que siguen, sus 200 tuits más recientes y si retuitearon o no el mensaje que habían recibido.

A continuación, el equipo utilizó un algoritmo de aprendizaje automático para buscar correlaciones en esos datos que pudieran predecir si alguien tenía más probabilidades de retuitear. Por ejemplo, se analizó si las personas con cuentas más antiguas eran más propensas a retuitear, o cómo la proporción entre amigos y seguidores influía en la probabilidad de retuiteo, o incluso si había algún vínculo relacionado con los tipos de palabras negativas o positivas utilizadas en tuits anteriores. También analizaron en momento del día en que la gente tuiteaba de forma más activa.

El resultado fue un algoritmo de aprendizaje de máquina capaz de captar usuarios con más probabilidades de retuitear un tema en particular.

Y los resultados muestran que es sorprendentemente eficaz. Cuando el equipo envió tuits de información local a las personas identificadas por el algoritmo, el 13,3% la retuiteó, en comparación con sólo el 2,6% de las personas escogidas al azar.

Y consiguieron incluso mejores resultados cuando enviaron la solicitud en los momentos del día en los que la gente había mostrado ser más activa en el pasado. En ese caso, la tasa de retuiteo se elevó al 19,3%. Eso supone una mejora de más del 600%.

Del mismo modo, la tasa relacionada con la información sobre la gripe aviar se elevó del 8,3% con usuarios elegidos al azar a un 19,7% con usuarios elegidos por el algoritmo.

Este es un resultado significativo que despertará la envidia de responsables de marketing, políticos y organizaciones de noticias.

Una cuestión interesante es cómo hacer que esta técnica pueda aplicarse de forma más general. Plantea la posibilidad de una aplicación que permita a cualquier persona introducir un tema de interés y crear una lista de usuarios con más probabilidades de retuitear ese tema durante las próximas horas.

Lee y su equipo no han comentando ningún plan al respecto. Pero si no le sacan partido, seguramente habrá otros que sí lo hagan.

Adjunto articulo completo:

Who Will Retweet This ?

Tema windows para informáticos y electrónicos.

Si estas cansado de los mismos temas de fondo de escritorio para Windows, te comparto dos interesantes temas.

Tema para informáticos y electrónicos:

Tema tics

Tema del universo con fotos en HD tomadas por la nasa:

universoNasa

Ubuntu en la supercomputadora más rápida del mundo

Así como Forbes nos da una lista de los más millonarios de los millonarios, en el mundo del cómputo hay listas de las supercomputadoras más rápidas del planeta. Hoy por hoy la Tianhe-2, de la República Popular China, es la máquina más veloz sobre el planeta, que se encuentra en el Centro Nacional de Supercomputación de Guangzho y para sorpresa de quizás alguno, utiliza una versión especial de Ubuntu.

Todos sabemos que los sistemas operativos con sabor a Unix son los preferidos en estas máquinas pero evidentemente muchos son escritos por el fabricante. Sin embargo, en este caso Canonical (los creadores de la versión Linux Ubuntu), en colaboración con la Universidad Nacional de Defensa de China, buscan construir la nube más rápida del planeta, con Ubuntu Server, OpenStack y Juju.

La máquina Tianhe-2 tiene un rendimiento de 33.86 petaflops (33,86 x 10^13 operaciones de punto flotante por seg.), y en teoría podría llegar a un pico de 54.9 petaFLOPS. Esta cifra la hace la máquina más rápida del mundo. Tiene 16 mil nodos, cada uno con dos procesadores Intel Xeon IvyBridge E5-2692 (12 núcleos, a 2.2 GHz) y tres procesadores Intel Xeon Phi 31S1P (57 núcleos, a 1.1 GHz), lo cual da un total de 3,120,000 núcleos de computación.

Su capacidad de almacenamiento no parece quedarse atrás. Puede almacenar 12,4 PB, con una memoria para el sistema  1,375 TiB (1.34 PiB) y usa el sistema operativo Kylin Linux, el cual es estrictamente el Ubuntu chino. Está en un cuarto que ocupa  720 m² y se calcula que ha costado entre 200 y 300 millones de dólares.

La evitación de obstáculos en la robótica móvil.

La evitación de obstáculos o collision avoidance problem en la robótica móvil es uno de los campos de investigación más desarrollados hoy en día. Hay diversas técnicas para la navegación segura de los robots móviles. La repercusión de estas técnicas es amplia: desde la industria a la automoción. La Universidad Cardenal Herrera CEU tiene una línea de investigación vinculada a esta línea de robótica. La profesora Lucía Hilario Pérez  desarrolló en su tesis doctoral ( tesis ) un algoritmo que asegura la navegación libre de obstáculos de un robot móvil ya que los sortea a medida que aparecen en su entorno dinámico y todo esto lo ejecuta en tiempo real. Uno de los últimos congresos donde se han publicado estos avances es el SIAM (Society for Industrial and Applied Mathematics). En dicho congreso se mejora considerablemente el tiempo de cómputo del algoritmo desarrollado.

Prueba de lo importante que es este ámbito de investigación, podemos ver como Ford dentro de su proyecto de investigación financiado con fondos europeos ( Accident Avoidance by Active Intervention of Intelligent Vehicles ) ha desarrollado un sistema para que un vehículo sea capaz de evitar colisionar con otros obstáculos que se encuentran en la calzada (otros vehículos, peatones, etc.).

El prototipo que ha utilizado Ford es en un Ford Focus y ya se ha probado con velocidades de más de 60 km/h.

Curso de Inteligencia Artificial

Buscando información acerca de inteligencia artificial, encontré una pagina donde ofrecen una especie de curso básico, pero con ejemplos muy buenos como para empezar ,además me llamo mucho la atención un programa del capitulo 7 llamado Dr. Abuse, se trata de un robot de charla con el que puede mantener una conversación divertida y más o menos inteligente. Y eso es a lo que quiero llegar pero con reconocimiento de voz. Así que manos a la obra. Así que si te quieres iniciar como yo en la inteligencia artificial te recomiendo que le des una hojeada a este curso.  Curso inteligencia Artificial

Intentamos que los ordenadores aprendan reglas por sí mismos.

El Google chino, Baidu, quiere la ventaja en inteligencia artificial. Su nuevo responsable de área, Adam Coates, repasa sus retos futuros.

La inteligencia artificial persigue el lejano objetivo de que algún día el software iguale a los seres humanos a la hora de realizar tareas importantes. Después de observar los resultados de un nuevo campo llamado aprendizaje profundo, que consiste en el procesamiento de grandes cantidades de datos a través de redes simuladas de millones de neuronas interconectadas, algunos expertos han llegado a creer que este objetivo quizá no sea tan lejano (ver "Aprendizaje profundo" y "Un software compara caras con una precisión casi humana").

La semana pasada, Baidu, la compañía de búsquedas por internet más grande de China, abrió un nuevo laboratorio en Silicon Valley (EEUU) dedicado al campo del aprendizaje profundo, uniéndose así al grupo de gigantes tecnológicos estadounidenses que apuestan fuerte por dicho campo (ver "El Google chino se muda a EEUU para investigar en inteligencia artificial"). El líder de investigación en el nuevo laboratorio, Adam Coates, conversó con Tom Simonite para MIT Technology Review sobre cómo el aprendizaje profundo podría crear software que se asemeje más al rendimiento humano en algunas tareas.

El experimento "Google Brain", mediante el que una enorme red neuronal aprendió a reconocer gatos y otros objetos con sólo mirar imágenes en YouTube, a menudo es considerado como una de las pruebas más importantes de la potencia del aprendizaje profundo (ver "Software autodidacta y almacenamiento de datos más rápido"). ¿Qué hace que ese proyecto sea tan importante?

Lo mejor del resultado de Google es que nadie tiene que decirle qué es cierto objeto. Gracias a la neurociencia tenemos muchas pruebas de que ésta es una forma crucial de aprender el funcionamiento el mundo. Pero también es un imperativo de ingeniería. No puedo programar suficientes reglas en el ordenador para que pueda entender el mundo. Lo que podemos intentar ahora es que los ordenadores aprendan las reglas ellos mismos.

El sistema de Google no llegó al nivel de rendimiento humano, y como mucho llegó a detectar rostros humanos sólo el 81% de las veces. El enfoque más establecido de aprendizaje "supervisado", que utiliza datos etiquetados a mano para que el software aprenda de ellos, logra tasas de rendimiento mejores. ¿Sabemos cómo mejorar los sistemas sin supervisión, o autodidactas?

Hacer que funcionen al nivel que queremos, es decir, lograr un nivel de rendimiento humano, es muy difícil.

Si me das muchos ejemplos de lo que quieres predecir, puedo entrenar al software para que lo haga bien. Lo difícil es en tener éxito cuando no cuentas con muchos ejemplos. Los seres humanos no tienen que ver un millón de gatos para entender lo que son. Podríamos utilizar una combinación de aprendizaje supervisado y no supervisado. Entender cómo combinar esas dos ideas tendrá una importancia crucial.

Te has inspirado en el experimento Google Brain para desarrollar una red neuronal aún mayor en Stanford (EEUU). ¿Los grandes "cerebros" serán automáticamente más inteligentes?

Por la magnitud del reto que estamos considerando, es decir, el rendimiento a nivel humano, está claro que usar una red neuronal pequeña no nos lleva a ningún sitio. Las redes de última tecnología tienen cientos de millones de conexiones. Podemos hacer muchas cosas con ellas, como por ejemplo reconocer una gran cantidad de objetos.

Pero la cuestión va más allá de simplemente agrandar la red neuronal. El resultado de Google Brain se basa en un enorme sistema distribuido con una gran cantidad de núcleos de CPU [16.000]. Hemos descubierto que si agrupas una gran cantidad de GPU [procesadores gráficos especializados] puedes crear una red neuronal mucho más grande, con 10.000 millones de nodos, con 16 máquinas en lugar de 1.000.

Hemos usado el mismo índice de referencia [imágenes de vídeos de YouTube] que usó el equipo de Google. Pero, aunque pudimos entrenar a una red neuronal mucho más grande, nuestro detector de gatos no fue necesariamente mejor. Actualmente podemos trabajar con redes neuronales más grandes de lo que sabemos hacer con ellas.

[En el laboratorio de Baidu] queremos construir un marco donde ejecutar experimentos suficientemente grandes como para probar todas las variaciones en los algoritmos que pudieran mejorar el rendimiento universalmente.

Sistema de rejillas(Grid System)

Bootstrap incluye diseño responsive para moviles en esta entrega, con un sistema de rejillas de 12 columnas, estas se escalan segun el dispositivo o el tamaño del viewport(area del contenido en un navegador web). El framework ya tiene clases predefinidas con respecto a la rejilla de bootstrap, pero ademas se puede personalizar classes para que puedas definir el tamaño que desees.
Bueno ahora entremos en mas detalles para conocer mas acerca de el grid-system de bootstrap.

Las media queries

Las media queries son usadas para crear puntos de interrupcion en el sistema de rejillas segun el dispositivo, sea movil, tablet o PC el sistema de rejillas se comportara diferente por ejemplo:

/* Dispositivos muy pequeños (phones, mas de 480px) */
/* Estos son los valores por defecto en Bootstrap */

/* Dispositivos pequeños (tablets, 768px o mas) */
@media (min-width: @screen-sm) { ... }

/* Dispositivos medianos (desktops, 992px o mas) */
@media (min-width: @screen-md) { ... }

/* Dispositivos grandes (large desktops, 1200px o mas) */
@media (min-width: @screen-lg) { ... }

Ocasionalmente podemos ampliar las media queries para delimitar el comportamiento en dispositivos mas estrechos con la propiedad max-width

@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }

Opciones

En esta tabla puedes ver como funcionaria el sistema de rejillas de bootstrap dependiendo de los dispositivos:

	Dispositivos muy pequeños(Phones (<768px))(extra small)	Dispositivos pequeños(Tablets (≥768px))(small)	Dispositivos Medianos(Desktops (≥992px))(medium)	Dispositivos Grandes(Desktops (≥1200px))(large)
Comportamiento de la rejilla(Grid)	Siempre horizontal	Colapsado al iniciar, horizontal en funcion a el tamaño del area de trabajo del navegador
Ancho maximo del contenedor	No (auto)	750px	970px	1170px
prefijo de class	.col-xs-	.col-sm-	.col-md-	.col-lg-
# de columnas	12
Ancho maximo de columnas	Auto	60px	78px	95px
Separacion de Columna	30px (15px en cada lado de una columna)
Empotrable	Yes
Desplazamiento	N/A	Si
Ordenamiento de columnas	N/A	Si

Ejemplo: vertical - horizontal

Usando un solo tipo de clases .col-md-*, puedes crear un sistema de columnas muy basico, de esta manera bootstrap comenzara apilando los elementos para los dispositivos moviles(extra small) y tablets(small). Para los PC(medium) las capas se alinearan de forma horizontal prueba esto con herramientas para diseño responsive existen bastantes herramientas para que vallas probando tus diseños en lo personal uso un complemento para Chrome que se llama Dimensions.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Ejemplo movil - PC

Con el ejemplo anterior vimos que en dispositivos mas pequeños que una PC los dispositivos simplemente se apilaban, no querremos siempre eso, bootstrap tiene para eso y mucho mas, para ello procedemos a usar las clases para dispositivos moviles y tablet, agregando .col-xs-* .col-md-* respectivamente, para mantener las columnas.

<!-- Se apilan las columnas en dispositivos moviles una capa en 100% y otra
en 50% ya que la rejilla su maximo es de 12 columnas-->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Comienza con 50% de ancho las columnas para moviles y 33% para PC-->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Las columnas siempre se mantienen en 50% de ancho para moviles y PC-->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Ejemplo: Movil, tablet, PC.

Siguiendo el ejemplo anterior podemos crear un diseño de capas mas dinamico y poderoso no solo para moviles si no para tablets y PC agregando las clases .col-sm-* cabe mencionar que los * al final de las clases son enumerables o numericos que van en funcion al numero de columnas que bootstrap ofrece o las que declaremos nosotros mas adelante en la seccion de LESS se explica como cambiar estos valores.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Opcionalmente: En el caso que la altura de la primer columna excediera de
       altura, las columnsas subyacentes se desplazan por debajo del contenido-->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

Reestableciendo las columnas responsive

Con cuatro columnas no es posible que se muestren del todo bien si unas son mas altas que otras, en esta situacion las columnas se mantienen por la derecha. Para arreglar esto debemos usar la combinacion de .clearfix junto con las utilerias responsive(posteriormente el enlace para esta seccion...)

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Agregar clearfix para mantener contexto de rejilla sin flotar -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Ademas de manipular el funcionamiento responsive de las columnas. Tambien podemos necesitar "desplazar(offset) empujar(push) o jalar(pull)" las capas. En el siguiente ejemplo mostramos como se desplaza una columna despues de una capa y que solo se afecte en tablets.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Desplazando columnas(Offseting).

Podemos mover columnas por la derecha usando .col-md-offset-* como clases en las capas. Estas clases incrementan el margen izquierdo de una columna con *(numero de columnas). Por ejemplo, .col-md-offset-4 se movera cuatro columnas despues de de la clase .col-md-4.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div

Anidando columnas

Podemos anidar columnas a las existentes agregando .row y un conjunto de .col-md-* a una columna .col-md-* existente. El padre de las columnas contenidas sera un nuevo sistema de rejilla de 12 columnas comportandose de manera recursiva en cada columna anidada.

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

Ordenando columnas

Puedes ordenar las columnas con .col-md-push-* y .col-md-pull-* como se muestra en el siguiente ejemplo aunque el efecto se puede ver como si se reordenara pero lo que en realidad pasa es que los margenes incrementan y decrementan respecto a la columna 0.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixins y variables con LESS

Bootstrap fue insporado por LESS cabe mencionar que este a su vez fue inspirado por SASS, solo por mencionar este dato curioso.
Sin entrar en tanto detalle cabe mencionar que si no estas conforme con las medidas que bootstrap te ofrece para diferentes dispositivos no te preocupes no es necesario que andes usmeando por ahi para encontrar el framework que mejor te acomode para las tareas que necesites ya que bootstrap te ofrece la posibilidad de establecer tus propias metricas.

Variables 

Las varibles que determinan el numero de columnas, el ancho de separacion para las columnas y el tamaño del navegador en el que se comienzen a alinear las columnas segun las clases que hayamos declarado anteriormente. Podemos predefinir estas variables antes de comenzar a implementar los mixins que se muestran mas adelante.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Antes de comenzar con los mixins explicaremos de forma breve que es un mixin. Un mixin en el ambiente en el ambiente de programacion es basicamente heredar funcionalidad, tener codigo reutilizable a la mano; ¿para que hacer lo mismo dos veces para diferente fin?. Ya que bootstrap lo que le da su potencialidad es LESS y este a su vez inspirado en SASS; cuantas veces hemos pretendido diseñar como si de programar se tratase, pues con bootstrap esto ya no es un problema con la potencialidad que ofrece declarando Mixins.
Los mixins son usados en cojunto con las varibles que definen el sistema de rejilla de bootstrap, de esta manera se puede manipular el comportamiento de las columnas.

// Creamos un wrapper para una serie de columnas
.make-row(@gutter: @grid-gutter-width) {
  // Limpiamos las columnas que flotan
  .clearfix();

  @media (min-width: @screen-small) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Agregamos un margen negativo en ambos lados de las filas para que
  // se alinie el contenido anidado
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Genera columnas para dispositivos moviles(telefonos)
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Previene que las columnas se colapsen cuando estan vacias
  min-height: 1px;
  // relleno interior en una capa
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula el ancho basado en las columnas disponibles
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Genera columnas para dispositivos tablet
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Previene que las columnas se colapsen cuando estan vacias
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula el ancho basado en las columnas que estan disponibles
  @media (min-width: @screen-small) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Genera el desplazamiento para los dispositivos tablet
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-small) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-small) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-small) {
    right: percentage((@columns / @grid-columns));
  }
}

// Genera las columnas para los dispositivos PC
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Previenen que las columnas colapsen cuando se encuentran vacias
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula el ancho basado en las columnas disponibles
  @media (min-width: @screen-medium) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Genera el desplazamiento de las columnas para dispositivos PC
.make-md-column-offset(@columns) {
  @media (min-width: @screen-medium) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-medium) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-medium) {
    right: percentage((@columns / @grid-columns));
  }
}

// Genera las columnas para dispositivos grandes
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Previene que las columnas colapsen cuando se encuentran vacias
  min-height: 1px;
  // Relleno interior de una capa
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula el ancho basado ene el numero de columnas disponibles
  @media (min-width: @screen-large) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate el desplazamiento para dispositivos grandes
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-large) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-large) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-large) {
    right: percentage((@columns / @grid-columns));
  }
}

Ejempo para usar los mixins

Puedes modificar las variables de bootstrap con los vlaores que tu decidas o usa mixins con los valores default. Aca un ejemplo usando la configuracion predeterminada para crear dos columnas con un espacio entre ambas.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Guia grid bootstrap

Cuando internet descubrió la bombilla

La tecnología LED ofrece innumerables posibilidades para gestionar el alumbrado y diseñar edificios inteligentes.

Para demostrar cómo está cambiando internet una de las más antiguas y menos emocionantes industrias tecnológicas que existe, el ingeniero de Philips Lighting, Shane De Lima, sacó su smartphone. Con un movimiento de pulgar sobre la pantalla mandó un mensaje a un router wifi cercano y después a un nodo inalámbrico, que a su vez envió una orden de radio a un chip en la base de una bombilla LED que teníamos delante.

Un momento después, la sala de reuniones en la que estábamos, se oscureció.

Podría parecer una forma rebuscada de apagar las luces. O podría ser el primer paso en el nuevo camino que han encontrado las empresas de iluminación, como Philips, para vender bombillas para redes, software, aplicaciones y nuevos tipos de servicios.

La introducción de la iluminación en red en hogares y negocios se está dando gracias a otra tendencia anterior. La sustitución de las bombillas fluorescentes e incandescentes por LED, diodos emisores de luz ultraeficientes. El Departmento de Energía de Estados Unidos afirma que los LED representaban el 4% del mercado de la iluminación estadounidense en 2013, pero predice que esta cifra crecerá hasta el 74% de todas las bombillas para 2030.

Como los LED son dispositivos sólidos que emiten luz de un chip semiconductor, ya están colocados sobre un circuito. Eso significa que pueden compartir fácilmente espacio con sensores, chips inalámbricos y un pequeño ordenador, lo que permite que las lámparas se conviertan en nodos sensores en red.

El año pasado Philips permitió a desarrolladores externos a la empresa acceder al software que gestiona su gama de bombillas domésticas LED Hue, por ejemplo. Y ahora podemos descargarnos Goldee, una aplicación que ilumina tu casa con la luz de un atardecer parisino, o Ambify, una aplicación de 2,99 dólares (unos 2,2 euros) creada por un programador alemán que hace que las luces parpadeen al ritmo de la música.

Es un negocio muy distinto al de la venta de bombillas, algo que Philips hace desde 1891. "Ahora que la luz se ha digitalizado, hemos empezado a entender cómo podemos controlarla, integrarla con otros sistemas y recoger muchos datos", afirma el director global de sistemas de iluminación para interiores de Philips, Brian Bernstein.

Otro ejemplo de cómo están cambiando los sistemas de iluminación llegará el mes de noviembre próximo, cuando la sede regional de Deloitte en Amsterdam (Holanda), de 14 pisos y casi terminada de construir, encienda todas las lámparas LED en red del edificio, la primera instalación de este tipo para Philips.

Cada una de las 6.500 lámparas del edificio tendrá una dirección IP y cinco sensores, todos ellos conectados sólo a cables de Ethernet (usarán la tecnología de "energía a través de Ethernet" para llevar la electricidad a cada lámpara además de los datos). Las lámparas incluyen un sensor de luz para atenuar el brillo de los LED durante el día, y un detector de movimiento que cubre el área que está justo debajo de cada luz y la apaga cuando no hay nadie. "Esperamos gastar un 70% menos en electricidad porque estos sistemas nos permiten un control mucho mayor", explica el director de información para Deloitte en Holanda, Erik Ubels. Los demás sensores de las lámparas pueden medir la temperatura, la humedad, el dióxido de carbono y el calor, convirtiendo a estas en una especie de sistema de gestión del edificio.

Las bombillas LED son caras, pero se están abaratando rápidamente. Una LED "tonta" que da la misma luz que una bombilla incandescente de 1,25 dólares (unos 90 céntimos de euro), se vende por 9 dólares (unos 6,5 euros), pero usa una sexta parte de la energía y dura mucho más. Hace apenas un par de años esta misma bombilla costaba 40 dólares (unos 29 euros). Una bombilla LED conectada de la gama Hue de Philips se vende en EEUU por 59 dólares (unos 43 euros). Y estas también bajarán de precio. Philips afirma que ahora una tercera parte de sus ingresos de iluminación proviene de las bombillas LED, y un 1,7% de las nuevas LED que se pueden conectar a internet.

Pero además se están explorando muchos otros usos. Un gran almacén de Dusseldorf (Alemania) está usando LED para enviar frecuencias de luz que se comunican con los smartphones de sus clientes. Y Philips ha instalado farolas en Barcelona que reaccionan en función de la cantidad de gente que haya pasando por debajo.