Webpy Con Bootstrap

Bootstrap

Bootstrap contiene los archivos CSS y JavaScript a través de los cual usted puede enriquecer su página web con rejillas, diseños, tipografías, tablas, formularios, navegación, etc. Permitiendo un desarrollo adaptativo a cualquier resolución de los dispositovos más comunes (Responsive Web Desing).

En este how-to crearemos un sistema de blog’s en web.py usando Bootstrap como framework de diseño y Responsive Web Desing.

Descargar directamente de:

http://twitter.github.com/bootstrap/assets/bootstrap.zip

Para el desarrollo de nuestro how-to vamos a descargar el zipall de Bootstrap:

$ wget https://github.com/twitter/bootstrap/zipball/master


Manos a la Obra:

Creamos nuestro directorio static y descomprimimos nuestro fichero zip:

$ unzip master -d .
$ mv twitter*/docs/assets static/

Creamos nuestro directorio para las plantillas:

$ mkdir templates

Bootstrap CSS:

Para nuestro aplicativo podemos incluir los siguiente ficheros: bootstrap.css y bootstrap-responsive.css, en nuestra plantilla.

$ vim templates/index.html

  1 <!DOCTYPE html>
  2 <html lang="es">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Pagina Incial</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <link href="static/assets/css/bootstrap.css" rel="stylesheet">
  8     <link href="static/assets/css/bootstrap-responsive.css" rel="stylesheet">
  9 </head>
 10 <body>
 11 </body>
 12 </html>

Bootstrap JavaScript:

Incluye los siguientes archivos JavaScript al final de la documento. Esto hará que la carga de la página se realize con mayor rapidez.

 10 <body>
 11 
 12 <!-- -->
 13 <script src="static/assets/js/jquery.js"></script>
 14 <script src="static/assets/js/bootstrap-transition.js"></script>
 15 <script src="static/assets/js/bootstrap-alert.js"></script>
 16 <script src="static/assets/js/bootstrap-modal.js"></script>
 17 <script src="static/assets/js/bootstrap-dropdown.js"></script>
 18 <script src="static/assets/js/bootstrap-scrollspy.js"></script>
 19 <script src="static/assets/js/bootstrap-tab.js"></script>
 20 <script src="static/assets/js/bootstrap-tooltip.js"></script>
 21 <script src="static/assets/js/bootstrap-popover.js"></script>
 22 <script src="static/assets/js/bootstrap-button.js"></script>
 23 <script src="static/assets/js/bootstrap-collapse.js"></script>
 24 <script src="static/assets/js/bootstrap-carousel.js"></script>
 25 <script src="static/assets/js/bootstrap-typeahead.js"></script>
 26 </body>

Bootstrap Grids:

El sistema de gillas que usa Bootstrap, soporta 940px de ancho que son 12 columnas de grillas. La clase “span1” tiene un ancho de 40px.

Bootstrap Layout:

Nuestra plantilla contendrá un <div>container” que se dividira en dos partes:

span8: área principal para artuculos y una barra lateral.
span4: para otro tipo de información.

Para este diseño hemos aplicado la clase row-fluid. Esto es Responsive desing y múltiples resoluciones según el dispositivo. Se hace automática al cambiar el tamaño de los divs y las imágenes pueden hacerse con facilidad.

 12     <div class="container">
 13         <div class="row-fluid">
 14             <div class="span8">
 15                 // Main Part
 16             </div>
 17             <div class="span4">
 18                 // Sidebar Part
 19             </div>
 20         </div>
 21     </div>

La estructura de nuestro código anterior:

Main Part:

Aquí vamos a crear la lista de Articulos, el titulo, descripción y una imagen. Aquí la clase “btn” la usaremos para crea el botón “Leer más...”

 14             <div class="span8">
 15                 // Main Part
 16                 <div class="row">
 17                     // Article Loop
 18                     <div class="span7">
 19                         <h2>Este es mi primer Articulo</h2>
 20                         <p>Descripci&oacute;n del Articulo.</p>
 21                         <p><img src="static/assets/img/bootstrap-mdo-sfmoma-01.jpg" class="row-fluid" /></p>
 22                         <p><a class="btn btn-inverse" href="#">Leer m&aacute;s...</a></p>
 23                     </div>
 24                 </div>
 25                 // Articles Loop End
 26             </div>

Sidebar Part:

Bloque de información para el autor, widgets, posts recientes y otras cosas.

 27             <div class="span4">
 28                 // Sidebar Part
 29                 <div class="well sidebar-nav">
 30                     <ul class="nav nav-list">
 31                         <li class="nav-header">Acerca de M&iacute;</li>
 32                         <li>Datos del Autor</li>
 33                         <li class="nav-header">Posts Recientes</li>
 34                         <li>link1</li>
 35                         <li>link2</li>
 36                         <li>link3</li>
 37                         <li class="nav-header">Anuncios</li>
 38                         <li>Add1</li>
 39                         <li>Add2</li>
 40                     </ul>
 41                 </div>
 42             </div>

Navbar:

Creamos un menú superior con una barra de navegación.

 14     <div class="navbar navbar-fixed-top">
 15         <div class="navbar-inner">
 16             <!--// Iphone View Menu Button-->
 17         <div class="container">
 18             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 19                 <span class="icon-bar"></span>
 20                 <span class="icon-bar"></span>
 21                 <span class="icon-bar"></span>
 22             </a>
 23             <a class="brand" href="#">Dev Microsystem.com</a>
 24             <div class="nav-collapse">
 25                 <ul class="nav">
 26                     <li class="active"><a href="#">Home</a></li>
 27                     <li><a href="#">Tutoriales</a></li>
 28                     <li><a href="#">Demos</a></li>
 29                 </ul>
 30             </div>
 31         </div>
 32         </div>
 33     </div>

Footer:

Creamos un pie de página.

 72     <footer class="container">
 73         <div class="footer">
 74             <p>Designed Jolth and Dev Microsystem</p>
 75         </div>
 76     </footer>

El aspecto de nuestra plantilla sería el siguiente:

  1 <!DOCTYPE html>
  2 <html lang="es">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Pagina Incial</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <link href="static/assets/css/bootstrap.css" rel="stylesheet">
  8     <link href="static/assets/css/bootstrap-responsive.css" rel="stylesheet">
  9     <style type="text/css">
 10         body{padding-top: 60px;}
 11         .footer{margin-top:45px; padding:35px 0 36px; border-top: 1px solid #E5E5E5;}
 12     </style>
 13 </head>
 14 <body>
 15     <div class="navbar navbar-fixed-top">
 16         <div class="navbar-inner">
 17             <!--// Iphone View Menu Button-->
 18         <div class="container">
 19             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 20                 <span class="icon-bar"></span>
 21                 <span class="icon-bar"></span>
 22                 <span class="icon-bar"></span>
 23             </a>
 24             <a class="brand" href="#">Dev Microsystem.com</a>
 25             <div class="nav-collapse">
 26                 <ul class="nav">
 27                     <li class="active"><a href="#">Home</a></li>
 28                     <li><a href="#">Tutoriales</a></li>
 29                     <li><a href="#">Demos</a></li>
 30                 </ul>
 31             </div>
 32         </div>
 33         </div>
 34     </div>
 35 
 36     <!-- -->
 37     <div class="container">
 38         <div class="row-fluid">
 39             <div class="span8">
 40                 <!--// Main Part-->
 41                 <div class="row">
 42                     <!--// Article Loop-->
 43                     <div class="span7">
 44                         <h2>Este es mi primer Articulo</h2>
 45                         <p>Descripci&oacute;n del Articulo.</p>
 46                         <p><img src="static/assets/img/bootstrap-mdo-sfmoma-01.jpg" class="row-fluid" /></p>
 47                         <p><a class="btn btn-inverse" href="#">Leer m&aacute;s &raquo;</a></p>
 48                     </div>
 49                 </div>
 50                 <!--// Articles Loop End-->
 51             </div>
 52             <div class="span4">
 53                 <!--// Sidebar Part-->
 54                 <div class="well sidebar-nav">
 55                     <ul class="nav nav-list">
 56                         <li class="nav-header">Acerca de M&iacute;</li>
 57                         <li>Datos del Autor</li>
 58                         <li class="nav-header">Posts Recientes</li>
 59                         <li>link1</li>
 60                         <li>link2</li>
 61                         <li>link3</li>
 62                         <li class="nav-header">Anuncios</li>
 63                         <li>Add1</li>
 64                         <li>Add2</li>
 65                     </ul>
 66                 </div>
 67             </div>
 68         </div>
 69     </div>
 70 
 71 <!-- -->
 72     <footer class="container">
 73         <div class="footer">
 74             <p>Designed Jolth and Dev Microsystem</p>
 75         </div>
 76     </footer>
 77 
 78 <!-- -->
 79 <script src="static/assets/js/jquery.js"></script>
 80 <script src="static/assets/js/bootstrap-transition.js"></script>
 81 <script src="static/assets/js/bootstrap-alert.js"></script>
 82 <script src="static/assets/js/bootstrap-modal.js"></script>
 83 <script src="static/assets/js/bootstrap-dropdown.js"></script>
 84 <script src="static/assets/js/bootstrap-scrollspy.js"></script>
 85 <script src="static/assets/js/bootstrap-tab.js"></script>
 86 <script src="static/assets/js/bootstrap-tooltip.js"></script>
 87 <script src="static/assets/js/bootstrap-popover.js"></script>
 88 <script src="static/assets/js/bootstrap-button.js"></script>
 89 <script src="static/assets/js/bootstrap-collapse.js"></script>
 90 <script src="static/assets/js/bootstrap-carousel.js"></script>
 91 <script src="static/assets/js/bootstrap-typeahead.js"></script>
 92 </body>
 93 </html>

Por ultimo creamos nuestro aplicativo web:

$ vim app.py
  1 # -*- coding: utf-8 -*-
  2 import web
  3 
  4 render = web.template.render('templates')
  5 
  6 urls = (
  7         '/', 'index'
  8         )
  9 
 10 app = web.application(urls, globals())
 11 
 12 class index:
 13     def GET(self):
 14         return render.index()
 15 
 16 
 17 if __name__ == "__main__":
 18     app.run()

Listo, si ejecutamos nuestro aplicativo obtendermos una bonito blog:

Si es posible puede usar emuladores (o en mi caso con una conexión wifi y mi Android) para ver como se comporta nuestro Blog en estos dispositivos.

Autor: Jolth

Referencias:
http://www.9lessons.info/2012/03/bootstrap-tutorial-for-blog-design.html

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s