Categorías
Python

Thonny: Python Editor El Principiante-friendly

 

Tabla de Contenidos

  • Crear un ejemplo de sistema mínimos sitio web LayoutGrid
  • cuadrícula Sistema
  • Una: Estrecho de Marketing Bootstrap 3
  • Aprópiatelo
    Sistema de Red de

A pesar de etiquetar a mí mismo un desarrollador backend, me han estado dabbling más y más con diseño frontal, a saber, porque JavaScript ha difuminado las líneas entre los dos. En mi último proyecto en el que han pirateado un poco con HTML y CSS para desarrollar estilos de respuesta – que puede ser un dolor.

Afortunadamente, marcos como Bootstrap (anteriormente conocido como Twitter Bootstrap) hacen esas peticiones diseño bastante simple, e incluso más sencillo con la nueva versión de toma de Bootstrap 3.

Let un vistazo.

Esta es una serie de 3 partes. En la primera parte, sólo vamos a estar buscando en Bootstrap 3 y cómo personalizarlo utilizando HTML y CSS. En la segunda parte, vamos a ver cómo configurar una página de aterrizaje efectiva de ventas. Échale un vistazo aquí. Finalmente, en la última parte, añadiremos Python en la mezcla para crear una página de destino usando Frasco + Bootstrap 3.

Puede agarrar los últimos estilos / páginas de este repositorio.

Crear un sitio web Mínimo Disposición

de inicio mediante la descarga de Bootstrap de la site.Unpack oficial de la cremallera y agarrar el directorio dist. Esta será nuestra carpeta raíz de este pequeño proyecto. Asegúrese de añadir jquery.js de activos / js a dist / js.

.
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
├── index.html
└── js
├── bootstrap.js
├── bootstrap.min.js
└── jquery.js

Añadir un archivo index.html con el siguiente contenido:




Bootstrap Template<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <p> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --><br /> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--><br /> </head><br /> <body></p> <div class ="container"> <h1>Hello, world!</h1> </p></div> <p> </body><br /> </html><br /> </code> </p> <p> Añadir una barra de navegación (que ahora es siempre sensible), un recipiente, pantalla gigante, un texto lorem, y un botón: </p> <p> <code><!DOCTYPE html><br /> <html><br /> <head><br /> <title>Bootstrap Template<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <p> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --><br /> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--><br /> </head><br /> <body></p> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> </button><br /> <a class="navbar-brand" href="#">Bootstrap <3</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul></div> <p><!--/.nav-collapse --> </div> </p></div> <div class="jumbotron"> <div class="container"> <h1>Bootstrap starter template</h1> <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.</p> <p> <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more button</a> </div> </p></div> <p> </body><br /> </html><br /> </code> </p> <p> Añadir el siguiente estilo de la cabeza: </p> <p> <code></p> <style> body {padding-top: 50px;} </style> <p></code> </p> <p> Por último, para agregar la capacidad de respuesta completa, añadir las siguientes secuencias de comandos justo antes de la etiqueta </ ​​body>: </p> <p> <code><script src="js/jquery.js"></script><br /> <script src="js/bootstrap.min.js"></script><br /> </code> </p> <p> a primera vista, se puede ver que todos los componentes son planas. Y si no eres un fan de diseño plano hay un tema alternativo. Juega un poco con la capacidad de respuesta cambiando el tamaño de su navegador. Se ve bastante bien. La capacidad de respuesta es ahora un defecto en Bootstrap 3 – por lo que ahora no tiene una opción: Usted debe desarrollar para móviles primero. Sistema de Red de </p> <h3> </h3> <p> El sistema de red es ahora mucho más fácil de usar. Se amplía hasta 12 columnas por defecto, que pueden ser modificadas para equipos de sobremesa cuatro dispositivos de gran tamaño, de escritorio, tabletas y teléfonos. También es fluido por defecto como pronto se verá. </p> <p> Añadir una fila, un sistema de red básica, y el texto más ipsum después de la div jumbotron cierre: </p> <p> <code></p> <div class="container"> <div class="row"> <div class="col-md-4"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.</p> </p></div> <div class="col-md-4"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.</p> </p></div> <div class="col-md-4"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.</p> </p></div> </p></div> </div> <p></code> </p> <p> Dado que cada fila tiene 12 unidades, hemos hecho tres columnas que son 4 unidades cada uno. Sólo recuerde que todas las columnas deben sumar 12. Experimento un poco: Intente cambiar la primera columna a 2 unidades y la última columna a 8 unidades, o añadir una nueva fila en conjunto con otro conjunto de columnas (o simplemente esperar hasta el siguiente paso ). </p> <p> Añadir una nueva fila debajo de la fila de edad con la siguiente rejilla (asegúrese de que va dentro del elemento contenedor): </p> <p> <code></p> <div class="col-md-8 col-md-offset-2"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.</p> </div> <p></code> </p> <p> caso, hemos utilizado compensado, lo que cambió la columna a la derecha para centrarla. Esencialmente, hemos cambiado más de 2 unidades, entonces se utiliza una columna de 8 unidad, dejando otras 2 unidades después, igualando 12: 2 + 8 + 2 = 12. </p> <p> Dado que el sistema de rejilla en Bootstrap 3 es sensible, puede anidar una fila dentro de otra fila (otra nueva característica). La fila interior – por ejemplo, la fila dentro de una fila – tendrá 12 columnas. Se puede ayudar a sacar esto hacia fuera. Prueba esto por su cuenta antes de mirar a mi ejemplo. </p> <p> <code></p> <div class="row"> <div class="col-md-4"> <div class="row"> <div class="col-md-6"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic.</p> </p></div> <div class="col-md-6"> <p>Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan.</p> </p></div> </p></div> <div class="row"> <div class="col-md-6"> <p>Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park.</p> </p></div> <div class="col-md-6"> <p>Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo.</p> </p></div> </p></div> </p></div> <div class="col-md-4"> <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.</p> </p></div> <div class="col-md-4"> <ul class="list-group"> <li class="list-group-item"><span class="badge">14</span>Quinoa photo booth</li> <li class="list-group-item"><span class="badge">10</span>iPhone kale chips</li> <li class="list-group-item"><span class="badge">6</span>fanny pack bespoke</li> <li class="list-group-item"><span class="badge">4</span>lo-fi polaroid</li> <li class="list-group-item"><span class="badge">2</span>Tonx meggings stumptown</li> </ul> </p></div> </div> <p></code> </p> <p> Por lo tanto, nos llevó a la primera columna, con un lapso de 4, y anidado de modo que tiene cuatro cajas de igual tamaño. También, usted probablemente ha notado la lista dentro de la columna de la derecha. Esta es otra característica nueva de Bootstrap 3, llamada lista de grupos. </p> <p> También puede reemplazar la lista no ordenada con </p> <div class = "lista de grupos"> y luego usar las etiquetas de anclaje para mostrar enlaces en lugar de los elementos de la lista: </p> <p> <code></p> <div class="list-group"> <a href="#" class="list-group-item"><span class="badge">14</span>Quinoa photo booth</a><br /> <a href="#" class="list-group-item"><span class="badge">10</span>iPhone kale chips</a><br /> <a href="#" class="list-group-item active"><span class="badge">6</span>fanny pack bespoke</a><br /> <a href="#" class="list-group-item"><span class="badge">4</span>lo-fi polaroid</a><br /> <a href="#" class="list-group-item"><span class="badge">2</span>Tonx meggings stumptown</a> </div> <p></code> prueba </p> <p> eso. Diviértete con el. Trate de jugar con el color de fondo de la pantalla gigante mediante la adición de una imagen, un degradado o incluso un color básico: </p> <div class = estilo "pantalla gigante" = "background-color: # BAE0FF;">. </p> <p> Tal pequeños cambios pueden hacer una gran diferencia. Asegúrese de que sus miradas página como la mía. </p> </p> <p> <img src="https://eltecnofilo.es/wp-content/uploads/2020/03/bootstrap3-index.24c5a8e016b8.png"> </p> <h2> Un ejemplo: toma estrecho de Marketing Bootstrap 3 </h2> <p> Vamos un paso más allá y crear un ejemplo de trabajo. Uno de mis ejemplos favoritos de Bootstrap 2 es la plantilla estrecho de Marketing, que, por desgracia, no es parte de los ejemplos incluidos con Bootstrap 3. Así que vamos a crear nosotros mismos a partir de cero. </p> <p> Comience con una página básica. </p> <p> <code><!DOCTYPE html><br /> <html><br /> <head><br /> <title>Bootstrap Template<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <p> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --><br /> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--><br /> </head></p> <style> body {padding-top: 50px;} </style> <p> <body></p> <div class="container"> <h1>Nothing to see .. yet.</p> <h1></div> <p> <script src="js/jquery.js"></script><br /> <script src="js/bootstrap.min.js"></script><br /> </body><br /> </html><br /> </code> </p> <p> Añadir la barra de navegación y actualizar los estilos: </p> <p> <code></p> <style> body { padding-top: 20px; padding-bottom: 20px; } .container-narrow { margin: 0 auto; max-width: 700px; }</p> <p> .container-narrow > hr { margin: 40px 0 0 0; } </style> <p><body></p> <div class="container-narrow"> <ul class="nav nav-pills pull-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h3 class="text-muted">Project name</h3> <hr> <p></code> </p> <p> pantalla gigante. Añadir los estilos en primer lugar, y luego añadir la pantalla gigante debajo de la <h>. </p> <p> <code>.jumbotron {<br /> margin: 5px 0;<br /> text-align: center;<br /> background-color:white;<br /> }<br /> .jumbotron h1 {<br /> font-size: 72px;<br /> line-height: 1;<br /> font-weight: bold;<br /> }<br /> .jumbotron .btn {<br /> font-size: 21px;<br /> padding: 14px 24px;<br /> }</p> <p>...</p> <div class="jumbotron"> <h1>Super awesome marketing speak!</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p> <a class="btn btn-large btn-success" href="#">Sign up today</a> </div> <p></code> </p> <p> Sección de Marketing. Una vez más, añadir los estilos en primer lugar, a continuación, quitar el <contenedor> </ contenedor> elemento y añadir en la fila de marketing. </p> <p> <code>.marketing {<br /> margin: 40px 0;<br /> }</p> <p>.marketing p + h4 {<br /> margin-top: 28px;<br /> }</p> <p>...</p> <div class="row marketing"> <div class="col-md-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </p></div> <div class="col-md-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </p></div> </div> <p></code> </p> <p> pie de página. Nótese el extra </ div>. Esto debería cerrarse </p> <div class = "contenedor-estrecho">. </p> <p> <code></p> <div class="footer"> <p>© Company 2013</p> </div> </div> <p></code> </p> <p> Eso es todo. Comparar esta versión para la versión 2 Bootstrap. Similar. Pero plana. </p> </p> <p> <img src="https://eltecnofilo.es/wp-content/uploads/2020/03/marketing-narrow-bootstrap3.dcad5d590dce.png"> </p> <h2> hacer que se vea su propio </h2> <p> Vamos a algunas formas rápidas que se pueden personalizar este ejemplo para que se vea menos “Bootstrappy”. </p> <p> En primer lugar, añadir una nueva hoja de estilo denominado main.css y añadir los estilos incorporados a ella. No se olvide de añadir la nueva hoja de estilo a la cabeza, justo debajo de la primera hoja de estilo. Además, añadir las siguientes fuentes de Google, así como un enlace a los estilos impresionantes de las fuentes: </p> <p> <code><link href="css/main.css" rel="stylesheet" media="screen"> <link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css"> <link href="/<br />etdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br /> </code> </p> <p> Pongamos los nuevos tipos de letra para su uso: </p> <p> <code>h1, h2, h3, h4, h5, h6 {<br /> font-family: 'Arvo', Georgia, Times, serif;<br /> }</p> <p>p, div {<br /> font-family: 'PT Sans', Helvetica, Arial, sans-serif;<br /> }<br /> </code> </p> <p> Como seguramente se puede decir, es difícil encontrar dos tipos de letra que se ven bien juntos. Afortunadamente, hay una gran cantidad de buenos recursos – como aquí y aquí. </p> <p> Texturas puede hacer una gran diferencia, que es por eso que amo patrones sutiles. Actualizar la clase cuerpo con el código siguiente. Asegúrese de que la pantalla gigante transparente también. </p> <p> <code>body {<br /> padding-top: 10px;<br /> padding-bottom: 20px;<br /> background: url(http://subtlepatterns.com/patterns/lightpaperfibers.png) repeat 0 0;<br /> }</p> <p>...</p> <p>.jumbotron {<br /> margin: 5px 0;<br /> text-align: center;<br /> background-color:transparent;<br /> }<br /> </code> </p> <p> Actualización de la sección de comercialización de modo que sólo hay una fila con tres columnas (cada uno que abarca 4 unidades). También vamos a poner el nuevo Glyphicons a su uso. O puede utilizar la fuente impresionante desde que agregamos la hoja de estilo. </p> <p> <code></p> <div class="row marketing"> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-info-sign" style="color:#428bca;"></span> Subheading</h3> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> </p></div> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-info-sign" style="color:#428bca;"></span> Subheading</h3> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> </p></div> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-info-sign" style="color:#428bca;"></span> Subheading</h3> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </p></div> </div> <p></code> </p> <p> Por encima de la sección de marketing Vamos a añadir una nueva fila con dos videos, que con suerte tienen algo que ver con sus productos o servicios (o al menos explica por qué existe su sitio). </p> <p> <code></p> <div class="row"> <div class="col-md-6"> <center><iframe width="320" height="240" style="max-width:100%" src="http://www.youtube.com/embed/D0MoGRZRtcA?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="col-md-6"> <iframe width="320" height="240" style="max-width:100%" src="http://www.youtube.com/embed/EuOJRop5aBE?rel=0" frameborder="0" allowfullscreen></iframe></center> </div> </div> <p></code> </p> <p> Por cierto, he grabado los videos hace unos meses que detallan cómo empezar con un proyecto Django. Compruebe a cabo, crear un proyecto básico, y luego añadir algunos estilos. 🙂 </p> <p> actualización </p> <p> la pantalla gigante con algunos botones para compartir sociales y algunas más iconos. <3 </p> <p> <code></p> <div class="jumbotron"> <h1>we <span class="glyphicon glyphicon-heart" style="color:#428bca;"></span> awesome marketing speak!</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p> <a class="btn btn-large btn-success" href="#">Sign up today <span class="glyphicon glyphicon-ok-circle"></span></a></p> <p> <a href="https:/witter.com/RealPython" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @RealPython</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script><br />     <br /> <a href="https:/witter.com/intentweet?screen_name=RealPython" class="twitter-mention-button" data-size="large">Tweet to @RealPython</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script><br />     <br /> <a href="https:/witter.com/share" class="twitter-share-button" data-url="https://realpython.com" data-text="RealPython yo -" data-size="large">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </div> <p></code> </p> <p> Por último, retire la clase de texto de silencio desde la barra de navegación y añadir un icono más: </p> <p> <code></p> <h3><span class="glyphicon glyphicon-asterisk" style="color:#5cb85c"></span> Project name</h3> <p></code> </p> <p> Y aquí está la versión final. </p> </p> <p> <img src="https://eltecnofilo.es/wp-content/uploads/2020/03/marketing-narrow-bootstrap3-updated.0e5be2fd107e.png"> </p> <p> bueno? Por lo menos, con estos cambios -que básicos tuvieron un buen cinco minutos, que ahora está en camino a tomar un tema genérico y lo que es un poco más profesional. Salud. </p> <p> listo para más? Ver la segunda parte de esta serie de tres partes. Oh, y echa un vistazo a estas plantillas de inicio para obtener un comienzo rápido. Sólo tiene que añadir nuevos tipos de letra, colores y texturas … unos </p> </div><!-- .entry-content --> </div><!-- .post-inner --> <div class="section-inner"> </div><!-- .section-inner --> <nav class="pagination-single section-inner" aria-label="Entrada" role="navigation"> <hr class="styled-separator is-style-wide" aria-hidden="true" /> <div class="pagination-single-inner"> <a class="previous-post" href="https://eltecnofilo.es/como-crear-un-indice-en-django-sin-periodos-de-inactividad/"> <span class="arrow" aria-hidden="true">←</span> <span class="title"><span class="title-inner">Cómo crear un índice en Django sin periodos de inactividad</span></span> </a> <a class="next-post" href="https://eltecnofilo.es/la-ultima-lista-de-data-science-podcasts/"> <span class="arrow" aria-hidden="true">→</span> <span class="title"><span class="title-inner">La última lista de Data Science Podcasts</span></span> </a> </div><!-- .pagination-single-inner --> <hr class="styled-separator is-style-wide" aria-hidden="true" /> </nav><!-- .pagination-single --> <div class="comments-wrapper section-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/thonny-python-editor-el-principiante-friendly/#respond" style="display:none;">Cancelar la respuesta</a></small></h2><form action="https://eltecnofilo.es/wp-comments-post.php" method="post" id="commentform" class="section-inner thin max-percentage" novalidate><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comentario</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar el comentario" /> <input type='hidden' name='comment_post_ID' value='6893' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- .comments-wrapper --> </article><!-- .post --> </main><!-- #site-content --> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_search"><div class="widget-content"><form role="search" method="get" class="search-form" action="https://eltecnofilo.es/"> <label for="search-form-2"> <span class="screen-reader-text">Buscar:</span> <input type="search" id="search-form-2" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div></div> <div class="widget widget_recent_entries"><div class="widget-content"> <h2 class="widget-title subheading heading-size-3">Entradas recientes</h2> <ul> <li> <a href="https://eltecnofilo.es/vps-cloud-hosting/">VPS cloud hosting</a> </li> <li> <a href="https://eltecnofilo.es/versiones-de-ejecucion-de-python-en-acoplable-como-probar-la-ultima-release-python/">Versiones de ejecución de Python en acoplable: Cómo probar la última Release Python</a> </li> <li> <a href="https://eltecnofilo.es/leer-y-escribir-archivos-csv/">Leer y escribir archivos CSV</a> </li> <li> <a href="https://eltecnofilo.es/python-puro-vs-vs-numpy-tensorflow-comparacion-de-rendimiento/">Python puro vs vs NumPy TensorFlow Comparación de Rendimiento</a> </li> <li> <a href="https://eltecnofilo.es/estructura-python-programa-lexico/">Estructura Python Programa léxico</a> </li> </ul> </div></div><div class="widget widget_recent_comments"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Comentarios recientes</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.org/" rel="external nofollow ugc" class="url">A WordPress Commenter</a></span> en <a href="https://eltecnofilo.es/hello-world/#comment-1">Hello world!</a></li></ul></div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_archive"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Archivos</h2> <ul> <li><a href='https://eltecnofilo.es/2020/04/'>abril 2020</a></li> <li><a href='https://eltecnofilo.es/2020/03/'>marzo 2020</a></li> <li><a href='https://eltecnofilo.es/2019/12/'>diciembre 2019</a></li> </ul> </div></div><div class="widget widget_categories"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Categorías</h2> <ul> <li class="cat-item cat-item-22"><a href="https://eltecnofilo.es/category/python/">Python</a> </li> <li class="cat-item cat-item-1"><a href="https://eltecnofilo.es/category/uncategorized/">Uncategorized</a> </li> </ul> </div></div><div class="widget widget_meta"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Meta</h2> <ul> <li><a rel="nofollow" href="https://eltecnofilo.es/wp-login.php">Acceder</a></li> <li><a href="https://eltecnofilo.es/feed/">Feed de entradas</a></li> <li><a href="https://eltecnofilo.es/comments/feed/">Feed de comentarios</a></li> <li><a href="https://es.wordpress.org/">WordPress.org</a></li> </ul> </div></div> </div> </div><!-- .footer-widgets-wrapper --> </aside><!-- .footer-widgets-outer-wrapper --> </div><!-- .footer-inner --> </div><!-- .footer-nav-widgets-wrapper --> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">© 2020 <a href="https://eltecnofilo.es/">My Blog</a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="https://es.wordpress.org/"> Funciona gracias a WordPress </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits --> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> Ir arriba <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-long --> <span class="to-the-top-short"> Subir <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-short --> </a><!-- .to-the-top --> </div><!-- .section-inner --> </footer><!-- #site-footer --> <script src='https://eltecnofilo.es/wp-includes/js/comment-reply.min.js?ver=5.3.3'></script> <script src='https://eltecnofilo.es/wp-includes/js/wp-embed.min.js?ver=5.3.3'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>