[#HTML] Una de mapas con #Leaflet, #NuGet y #VisualStudio

Hola!

hoy necesitaba hacer 2 cosas rápidas con un mapa y como PowerBI era demasiado, me acordé de un post de Alberto donde hablaba de LeafLet, con un mapa con los colaboradores más activos de GitHub. Pues bien después de ver un poco de ejemplos en línea me pude crear mi mapa en pocos segundos.

Aquí van los pasos para hacer uno de ejemplo con Visual Studio.

– Primero lo de siempre, buscar e instalar el paquete NuGet

ll 01

Detalle, NuGet no es la única opción, aunque tiré por aquí que era más rápido.

– Lo siguiente es acomodar un poco los bundles para que nos queden el js y el css a mano en el proyecto

– Finalmente crear una página HTML con el siguiente código

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
<h2>El Bruno – LeafLet demo 01</h2>
<div id="map"></div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/leaflet")
<script>
// center map in Santiago Bernabeu Metro Station
var map = L.map('map').setView([40.451631, -3.690366], 18);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Parada de Metro Santiago Bernabeu'
}).addTo(map);
// add marker in the Santiago Bernabeu footbal stadium
L.marker([40.453146, -3.688344]).addTo(map)
.bindPopup('El estadio del Real Madrid<br>Pedazo de cracks.')
.openPopup();
</script>
</body>
</html>

view raw
ElBrunoLealLetdemo
hosted with ❤ by GitHub

Si analizamos un poco el código veremos que en solo 10 líneas he creado un map centrado en la parada de metro Santiago Bernabeu, y luego he agregado un marker en el estadio Santiago Bernabeú

ll 02

La verdad que para un uso quick and dirty y con un js de sólo 33Kbs es genial. Además hay bastantes plugins que nos vienen bien para algunas cosas más complejas.

Por cierto, LeafLet utiliza OpenStreetMap, asi que no se olviden de poner la referencia >> http://www.openstreetmap.org/copyright

Saludos @ Madrid

/El Bruno

Homepage: http://leafletjs.com/examples/quick-start.html

Referencias: http://albertoromeu.com/mapa-programadores-mas-influyentes-de-github/

[#HTML] Skype Buttons, ERR_BLOCKED_BY_CLIENT y Ghostery

Hola!

Aquellos que han pensado que Agosto es un buen mes para trabajar, porque todo el mundo está de vaaciones; deberían ampliar su concepto de “todo el mundo”. Por un lado, existe un hemisferio por debajo del Ecuador donde el período de vacaciones usualmente no es Julio / Agosto sino más bien Diciembre / Enero.  Cuando tienes un trabajo global, pues “no hay descanso en vacaciones”.

Además de esto, es muy probable que tu equipo de trabajo piense que el sol de Madrid te ilumina con rayos Gamma y que esto te permite ser una especia de mutant developer, con capacidad para terminar todo lo que los demás no terminaron. Este, por supuesto no es mi caso.

Y si encima de esto, ya no puedes confiar ni en Skype, pues vamos listos. Y el último caso es sobre el que hablaré en el post de hoy.

Supongo que todos conocen los “SKYPE buttons”. Pues bien, los amigos de Skype nos permiten crear un código HTML personalizado en 2 pasos para poder agregar Skype Buttons a nuestras apps HTML. La verdad es que es algo que se agradece bastante ya que como muestro en la siguiente imagen, es más que simple Open-mouthed smile

image

Copy & Paste del código HTML, y listo ! ya tienes tu Skype Button dando vueltas por el mundo.

Lo que es raro, es encontrarse con que esto ha dejado de funcionar en el browser de un cliente. Lo más extraño es que la batería de pruebas que hacemos dan correctamente y la app parece funcionar correctamente, pero en esta ubicación extraña no hay Skype.

Asi que bien toca levantar los Logs y empezar a ver que sucede. Tampoco es que los logs den mucha información, sin embargo si aclaran algo importante:

Al momento de crear el objeto Skype se lanza una excepción del tipo “ERR_BLOCKED_BY_CLIENT”.

Esto ya es un poco de luz, asi que lo siguiente es pedirle al cliente que nos comente que cojones apps tiene instaladas en su ordenador, algún firewall, antivirus, popup blocker, etc.

Y asi por este camino, llegamos al amigo Ghostery. Un excelente complemento para Chrome que junto con AdBlock te permite navegar la web de una forma muy limpia.

Cuando instalamos Ghostery con las opciones por defecto y navegamos la página en cuestion, vemos que, por defecto se calza a Skype!

image

Para gustos colores, y se ve que a los amigos de Ghostery, lo de Skype no les gusta ni un pelo. La solución es muy simple, habilitar Skype y listo los Skype Buttons are back!

Skype Buttons: http://www.skype.com/en/features/skype-buttons/create-skype-buttons/ 

Ghostery: https://www.ghostery.com/en-GB/

Saludos @ Home

El Bruno

image image image Google

[#HTML5] HowTo: Scan a #QRcode in a webpage using #JavaScript

Hello!

Do not ask me why, but now is a time of the day where I have to read a QR code from a Web browser. As I’m obviously not the first nor the last in this need, the first BING search leads me to a great JS library: DWA012 / html5-qrcode .

And from here it is simpler than anyone else

1. Create an ASP.Net WEB API project (just to test)

2. Add the JS and the load of the same on BundleConfig.cs

3. Add the following code to the Index.cshtml page

   1: @{

   2:     ViewBag.Title = "El Bruno - QR Reader";

   3: }

   4: <div class="row">

   5:     <div class="col-md-12">

   6:         <h2>QR Code</h2>

   7:         <div id="reader" style="width:300px;height:250px">

   8:         </div>

   9:         <h6>Result</h6>

  10:         <span id="read" class="center"></span>

  11:         <br>

  12:     </div>

  13: </div>

  14:  

  15: @section scripts {

  16:     <!--Script references. -->

  17:     <script>
   1:  

   2:         $(document).ready(function () {

   3:             $('#reader').html5_qrcode(function (data) {

   4:                 alert(data);

   5:             },

   6:                 function (error) {

   7:                     console.log(error);

   8:                 }, function (videoError) {

   9:                     console.log(videoError);

  10:                 }

  11:             );

  12:         });

  13:     

</script>

  18: }

4. Run the app and ready!

As always a video to make it better

HTM5 QR Code Scan

And the download of the code already… well better code this your self Open-mouthed smile

Download: https://github.com/dwa012/html5-qrcode

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#HTML5] HowTo: Escanear un codigo QR con #JavaScript

Hola!

No me pregunten porqué, pero ha llegado un momento del día donde tengo que leer un código QR desde un navegador. Como obviamente no soy el primero ni el último en necesitar esto, la primera búsqueda en BING me lleva a una fabulosa librería JS: DWA012 / html5-qrcode.

Y a partir de aquí es más simple que nadie

1. Crear un proyecto ASP.Net WEB API (solo para probar)

2. Agregar el JS y la carga del mismo en BundleConfig.cs

3. Agregar el siguiente código en la página Index.cshtml

   1: @{

   2:     ViewBag.Title = "Home Page";

   3: }

   4:  

   5: <div class="jumbotron">

   6: </div>

   7:  

   8: <div class="row">

   9:     <div class="col-md-12">

  10:         <h2>QR Code</h2>

  11:         <div id="reader" style="width:300px;height:250px">

  12:         </div>

  13:         <h6>Result</h6>

  14:         <span id="read" class="center"></span>

  15:         <br>

  16:     </div>

  17: </div>

  18:  

  19: @section scripts {

  20:     <!--Script references. -->

  21:     <script>
   1:  

   2:         $(document).ready(function () {

   3:             $('#reader').html5_qrcode(function (data) {

   4:                 alert(data);

   5:             },

   6:                 function (error) {

   7:                     console.log(error);

   8:                 }, function (videoError) {

   9:                     console.log(videoError);

  10:                 }

  11:             );

  12:         });    

</script>

  22: }

4. Ejecutar la app y listo!

Como siempre un video para que quede mejor

HTM5 QR Code Scan

Y la descarga del código … pues ya lo armas tu Open-mouthed smile

Download: https://github.com/dwa012/html5-qrcode

Saludos @ La Finca

El Bruno

image image image Google

[#BOOTSTRAP] HowTo: use forms with Bootstrap 3 (well not expect much…)

Hello!

During these days I have seen many people that becames the most happy people in the world when they start to work with Bootstrap, also if you use it with AngularJs so it seems better than a few strawberries with chocolate!

Today I have to work a little with forms and there is a series of lessons that I’ve been learned :

-There is a series of classes to organize the contents of a form, such as form-horizontal and form-inline

-There are a series of classes to define the labels for the controls and specific styles of controls

Here is an very bad example:

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title>Form 1</title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7: </head>

   8: <body>

   9:     <div class="container">

  10:         <form class="form-horizontal">            

  11:             <fieldset>

  12:                 <legend>Form 1</legend>

  13:                 <div class="controls">

  14:                     <label>Field 1</label>

  15:                     <input type="text" placeholder="1 type something ..." />

  16:                 </div>

  17:                 <div class="controls">

  18:                     <label>Fieldazo 2</label>

  19:                     <input type="text" placeholder="2 type something ..." />

  20:                 </div>

  21:             </fieldset>

  22:         </form>

  23:     </div>

  24:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  25: </body>

  26: </html>

The result we have is the following (much more ugly that hitiing you your mother)

image

Now, grouping controls in a DIV with the class control-list, and defining the class control-label for the label of each, and with some more… and have a more enjoyable form.

   1: <div class="container">

   2:     <form class="form-horizontal">            

   3:         <fieldset>

   4:             <legend>Form 1</legend>

   5:             <div class="control-list">

   6:                 <label class="control-label">Field 1</label>

   7:                 <div class="controls">

   8:                     <input type="text" placeholder="1 type something ..." />

   9:                 </div>

  10:             </div>

  11:             <div class="control-list">

  12:                 <label class="control-label">Fieldazo 2</label>

  13:                 <div class="controls">

  14:                     <input type="text" placeholder="2 type something ..." />

  15:                 </div>

  16:             </div>

  17:         </fieldset>

  18:     </form>

  19: </div>

The above example of code guente allows us to get a form that does not throw to the inhabitants of the underworld

image

Before proceeding to more advanced examples (nor is the head I of for more), it is best to read the official CSS support in the FORMS section of Bootstrap > > http://getbootstrap.com/css/#forms

For example the use of the class form-group with form-horizontal for grouping content horizontally, model validation, etc.

Reference: http://getbootstrap.com/css/#forms

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] HowTo: utilizar forms con Bootstrap 3 (bueno tampoco esperes mucho …)

Hola!

durante estos días he visto a mucha gente que se pone Jappy Jappy con Bootstrap, además parece que si lo usas con AngularJs pues es mejor que unas fresas bañadas con chocolate !!!

Hoy tocó trabajar un poco con forms y las lecciones aprendidas son las siguientes:

– existe una serie de clases para organizar los contenidos de un form, por ejemplo form-horizontal y form-inline

– existen una serie de clases para definir los labels de los controles y los estilos específicos de los controles

Veamos un ejemplo mal hecho:

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="controls">

  15:                     <label>Field 1</label>

  16:                     <input type="text" placeholder="1 type something ..." />

  17:                 </div>

  18:                 <div class="controls">

  19:                     <label>Fieldazo 2</label>

  20:                     <input type="text" placeholder="2 type something ..." />

  21:                 </div>

  22:             </fieldset>

  23:         </form>

  24:     </div>

  25:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  26: </body>

  27: </html>

El resultado que tenemos es el siguiente (mucho más feo que pegarle a tu madre)

image

Ahora bien, agrupando los controles en un DIV con la clase control-list, definiendo la clase control-label para el label de cada uno, y con poco mas … ya tenemos un form más agradable.

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="control-list">

  15:                     <label class="control-label">Field 1</label>

  16:                     <div class="controls">

  17:                         <input type="text" placeholder="1 type something ..." />

  18:                     </div>

  19:                 </div>

  20:                 <div class="control-list">

  21:                     <label class="control-label">Fieldazo 2</label>

  22:                     <div class="controls">

  23:                         <input type="text" placeholder="2 type something ..." />

  24:                     </div>

  25:                 </div>

  26:             </fieldset>

  27:         </form>

  28:     </div>

  29:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  30: </body>

  31: </html>

El ejemplo anterior de código guente nos permite conseguir un form que no haga vomitar a los habitantes del averno

image

Antes de seguir a ejemplos más avanzados (tampoco es que la cabeza me de para más), lo mejor es leer la ayuda oficial de CSS en la sección FORMS de Bootstrap >> http://getbootstrap.com/css/#forms

Por ejemplo el uso de la clase form-group con form-horizontal para agrupar contenidos horizontalmente, modelos de validación, etc.

 

Referencia: http://getbootstrap.com/css/#forms

Saludos @ La Finca

El Bruno

image image image Google

[#BOOTSTRAP] Live grid, columns and more stuff …

Hello!

After yesterday’s post about how to add Bootstrap to a web project in Visual Studio 2012 or 2013, today I will explain a little more about the way that Bootstrap allows to work with with elements in a grid.

The simplest model that proposes Bootstrap is based on a grid with 12 columns. Basically is possible to assemble groups of columns that always add 12, in example

  • 4, 4, 4
  • 2, 4, 6
  • 1, 3, 4, 1, 3
  • etc

The following image, extracted from the official doc explains it so that everybody can understand this, even dumb people like me.

image

When you have to to create this type of tables , you must start with a DIV element with the class row and then the interior components with a fixed scheme that works “in all resolutions”, with classes

  • .col-xs –; for extra small devices < 768px
  • .col-sm –; for small devices > = 768px
  • .col-md –; to medium devices > = 992px
  • .col-lg –; for large devices = > 1200px

The following example defines a 4,4,4 to medium devices size and size 8,2,2 for small devices

 1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

 

In implementation looks something like this

BootstrapSample2

By the way, many thanks to Gorka (@Gk_8) for making me remember explain col-xs -… Winking smile and thanks to Sergio León (@panicoenlaxbox) by explain version 3 bootstrap!

References:

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] Live grid, columnas y demas …

Hola!

después del post de ayer sobre la forma de agregar Bootstrap a un proyecto web en Visual Studio 2012 o 2013, hoy voy a explicar un poco sobre la forma que provee by default Bootstrap para trabajar con elementos en una grid.

El modelo más simple que propone Bootstrap se basa en una grid con 12 columnas. Sobre esta base es posible armar grupos de columnas que siempre sumen 12, por ejemplo

  • 4, 4, 4
  • 6, 2, 4
  • 1, 1, 4, 3, 3
  • etc

La siguiente imagen, extraida de la doc oficial lo explica para que lo entiendan personas como yo.

image

La forma de crear este tipo de tablas consiste en definir un DIV con la clase row  y luego los componentes interiores con un esquema fijo que funciona “en todas las resoluciones”, con las clases

  • .col-xs-; para extra small devices < 768px
  • .col-sm-; para small devices >= 768px
  • .col-md-; para medium devices >= 992px
  • .col-lg-; para large devices => 1200px

El siguiente ejemplo define un tamaño de 4,4,4 para medium devices y un tamaño 8,2,2 para small devices

   1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

En ejecución se ve algo así

BootstrapSample2

Por cierto, muchas gracias a Gorka (@Gk_8) por hacerme acordar de explicar los col-xs- … Winking smile y gracias a Sergio Leon (@panicoenlaxbox) por explicarme la version 3 de Bootstrap!

Referencias:

Saludos @ La Finca

El Bruno

image image image Google

[#VS2013] HowTo: Create a website project in Visual Studio using Bootstrap

image

Hello!

For today’s post I hope that the 3G network works fine in the train; specially when I need to download the NuGet package.

How to create a WebSite project in Visual Studio 2012 or 2013 including Bootstrap

First one: do you know Bootstrap? If you don’t, you should !

Bootstrap is a framework created by Twitter to create interfaces and responsive website based on HTML5 and CSS3.

As that’s it, basically is a zip file which has a couple of .css and. js files. The most common way to get this package is access to the site of Bootstrap and click Download Bootstrap .

image

The zip has everything you need to create a website taking advantage of the features offered by Bootstrap. However there are other more elegant way of doing this.

1 Create a website with Visual Studio 2012 or 2013. For this example I’ve hidden the local path and I put name to the site “BootstrapSample”

image

This action creates a clean website

image

2 Add an HTML page and call it index.html

image

3 Add the following code to the page

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5: </head>

   6: <body>

   7:     <div>

   8:         <h1>Title A</h1>

   9:         <p>

  10:             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  11:         </p>

  12:     </div>

  13:     <div>

  14:         <h1>Title B</h1>

  15:         <p>

  16:             Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  17:             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  18:         </p>

  19:     </div>

  20:     <div>

  21:         <h1>Title C</h1>

  22:         <p>

  23:             Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  24:             Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  25:         </p>

  26:     </div>

  27: </body>

  28: </html>

Note: ‘ve put for example a poem in latin of my authorship.

4. If we navigate the page will see the following

image

Incredible, we have created a simple HTML and ZERO RESPONSIVE page!

5. Then add elements that possesses Bootstrap our website to take advantage of it. In the project we deploy the context menu, select the option “Manage NuGet Packages” and seek by Bootstrap. We select the right and click on “Install”.

image

Big stuff: Bootstrap is Twitter and is pretty obvious in the search results that 1 is not a product of Twitter but… well someone. Beware that you add to your project.

6. Once added the elements of this package our project already has the necessary elements to work with Bootstrap.

image

Update: the next step is not valid, Bootstrap 3.0 is responsive by default. 

7. A detail I saw when I downloaded this pkg is not containing the file “bootstrap-responsive.css” which is which has the styles in responsive mode. We add a file with this name to the project and get the content fromhttp://getbootstrap.com/2.3.2/assets/css/bootstrap.css

8. Now it is to edit the page so it take advantage of some features of Bootstrap. We modify the code to take account of the following

-lines 6, add references to the Bootstrap CSS

-line 10 Add a general DIV to hold the entire contents of the page with the “container” class. This div Add margins to content and adjust it automatically.

-line 11, add a new DIV with the class “row – fluid” that is what contains 3 sections with the content of the page

-line 12, in each DIV put the “col-md-4” class to identify it. (in another post explain how bootstrap mode GRID works or if you want you can see the official help here ))

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7:     <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <div class="row">

  12:             <div class="col-md-4">

  13:                 <h1>Title A</h1>

  14:                 <p>

  15:                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  16:                 </p>

  17:             </div>

  18:             <div class="col-md-4">

  19:                 <h1>Title B</h1>

  20:                 <p>

  21:                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  22:                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  23:                 </p>

  24:             </div>

  25:             <div class="col-md-4">

  26:                 <h1>Title C</h1>

  27:                 <p>

  28:                     Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  29:                     Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  30:                 </p>

  31:             </div>

  32:         </div>

  33:     </div>    

  34:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  35: </body>

  36: </html>

 

9 Ready!

If we navigate to the page and change the size of it would see something similar to this

Bootstrapsample

In the next post I comment on something else already going to ASP.Net MVC projects and stuff because my level off!

References: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#VS2013] HowTo: Crear un website con Bootstrap

image

Hola !

Hoy vamos con un post cortito y espero que la 3G me funcione bien en el AVE cuando tenga que descargar el paquete NuGet. Pues eso, la de hoy es fácil:

Cómo crear un WebSite incluyendo Bootstrap en el mismo

Primero lo primero: ¿conoces Bootstrap? si no lo conoces, deberías.

Bootstrap es un framework creado por Twitter para crear interfaces y website responsives basados en HTML5 y CSS3.

Pues ya está, es un zip que tiene un par de archivos .css y .js. La forma más usual de obtener este package es acceder al site de Bootstrap y darle un click a Download Bootstrap.

image

El zip posee todo lo necesario para poder crear un site aprovechando las capacidades que nos brinda Bootstrap. Sin embargo hay otra forma más elegante de hacerlo que es la siguiente:

1. Crea un website con Visual Studio 2012 o 2013. Para este ejemplo he ocultado el path local y he puesto de nombre al site “BootstrapSample”

image

Esta acción nos crea un website limpio

image

2. Agregamos una página HTML y la llamamos index.html

image

3. Agregamos el siguiente código a la página

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5: </head>

   6: <body>

   7:     <div>

   8:         <h1>Title A</h1>

   9:         <p>

  10:             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  11:         </p>

  12:     </div>

  13:     <div>

  14:         <h1>Title B</h1>

  15:         <p>

  16:             Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  17:             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  18:         </p>

  19:     </div>

  20:     <div>

  21:         <h1>Title C</h1>

  22:         <p>

  23:             Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  24:             Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  25:         </p>

  26:     </div>

  27: </body>

  28: </html>

Nota: he puesto de ejemplo un poema en latín de mi autoría.

4. Si navegamos la página veremos lo siguiente

image

Increíble, hemos creamos una página HTML simple y ZERO RESPONSIVE !!!

5. A continuación agregaremos los elementos que posee Bootstrap a nuestro website para aprovechar las capacidades del mismo. En el proyecto desplegamos el menú contextual, seleccionamos la opción “Manage NuGet Packages” y buscamos por Bootstrap. Seleccionamos el correcto y clic en “Install”.

image

Detallazo: Bootstrap es de Twitter y es bastante obvio en los resultados de la búsqueda que el 1ro no es un producto de Twitter sino de … pues alguien. Cuidado con que agregas a tu proyecto.

6. Una vez agregados los elementos de este paquete nuestro proyecto ya posee los elementos necesarios para trabajar con Bootstrap.

image

Update: en un post me han comentado que desde la versión 3 Bootstrap es responsive by default, con el que eliminaré los pasos innecesarios !!!

7. Un detalle que ví cuando descargué este pkc es que no contiene el archivo “bootstrap-responsive.css” que es el que posee los estilos en modo responsive. Agregamos un archivo con este nombre al proyecto y el contenido lo sacamos desde http://getbootstrap.com/2.3.2/assets/css/bootstrap.css

8. Ahora toca modificar la página para que la misma aproveche algunas capacidades de Bootstrap. Modificamos el codigo teniendo en cuenta lo siguiente

– líneas 6, agregamos las referencias a los CSS de Bootstrap

– línea 10 agregamos un DIV general para contener todo el contenido de la página con la clase “container”. Este div agrega unos márgenes al contenido y ajusta el mismo de forma automática.

– línea 11, agregamos un nuevo DIV con la clase “row-fluid” que es la que contiene las 3 secciones con el contenido de la página

– línea 12, en cada DIV ponemos la clase “col-md-4” para identificar el mismo. (en otro post explico como funciona el modo GRID de bootstrap o si quieres puedes ver la ayuda oficial aquí)

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7:     <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <div class="row">

  12:             <div class="col-md-4">

  13:                 <h1>Title A</h1>

  14:                 <p>

  15:                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  16:                 </p>

  17:             </div>

  18:             <div class="col-md-4">

  19:                 <h1>Title B</h1>

  20:                 <p>

  21:                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  22:                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  23:                 </p>

  24:             </div>

  25:             <div class="col-md-4">

  26:                 <h1>Title C</h1>

  27:                 <p>

  28:                     Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  29:                     Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  30:                 </p>

  31:             </div>

  32:         </div>

  33:     </div>    

  34:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  35: </body>

  36: </html>

 

9. Listo !!!

Si ´visualizamos la página y cambiamos el tamaño de la misma veríamos algo similar a esto

Bootstrapsample

En el próximo post comentaré algo más ya pasando a proyectos ASP.Net MVC y cositas ya fuera de mi nivel !

Referencias: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Saludos @ AVE

El Bruno

image image image Google