Paginación con Django y Python

En muchos proyectos la paginación resulta esencial, ya que sin dicha función, una pagina web podría ser eterna y no acabar nunca.

Es muy habitual ver las técnicas de paginación en los blog o en las galerías de imágenes. Aunque hoy en día también se utiliza mucho la paginación infinita, puede que tu proyecto no se adapte bien a esta modalidad y precises la clásica paginación manual.

Hoy traemos un código para implementar la paginación en proyectos realizados con Django, pero es muy fácil adaptarlo a otro Framework o lenguaje.

El trabajo duro lo realiza una función, que nos devuelve los valores que serán mostrados en la paginación.

Función Python:

def muestra_paginacion(actual, fin):
    total = 9
    grupo = 4

    if fin > 9:
        if actual - grupo > 1:
            if actual + grupo >= fin:
                pag = orden_paginacion(fin - total, total, fin)
            else:
                pag = orden_paginacion(actual - grupo, total, fin)
        else:
            pag = orden_paginacion(1, total, fin)
    else:
        pag = orden_paginacion(1, fin, fin)

    return pag

def orden_paginacion(inicio, total, ultimo):
    valores = []
    x = range(total)
    for n in x:
        valores.append(inicio + n)

    # Si contiene más de 9
    if ultimo > 9:
        decenas = int(ultimo/10)
        for n in range(decenas):
            valores.append((n+1)*10)


    return valores
  • Actual. Es la pagina actual.
  • Fin. Es el total de paginas.
  • Total. La variable total, es el grupo de elementos del 1 al 9.
  • Grupo. Especifica el número de elementos a la izquierda y derecha del elemento seleccionado. Ejemplo: 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9

Ejemplo de como se vera una paginación de 51 paginas, pagina número 1 seleccionada.

Pagina 33 seleccionada.

Código html:

{% if ultimo > 1 %}
        <span class="paginacion">
            <div class="navegacion">
                    <nav data-pagination>
                        <ul>

                        {% if actual > 5 and ultimo > 9 %}                           
                            <li><a href="{% url 'Tematica_DVD' tema_buscado %}?page=1">1</a>
                            <li><a href=#10>…</a>
                        {% endif %}
                            

                        {% for n in pag %}
                            {% if n == actual %}
                                <li class=current><a href=#>{{ actual }}</a>
                            {% else %}
                                <li><a href="{% url 'Tematica_DVD' tema_buscado %}?page={{ n }}">{{ n }}</a>

                            {% endif %}         
                        {% endfor %}

                        {% if ultimo != actual and ultimo > 9 %}
                            <li><a href=#10>…</a>
                            <li><a href="{% url 'Tematica_DVD' tema_buscado %}?page={{ ultimo }}">{{ ultimo }}</a>
                        {% endif %}
                            
                        </ul>
                    </nav>
            </div>
         </span>
        {% endif %}

Como se ve en la imagen superior, la paginación mostrará las cuatro paginas anteriores y las cuatro posteriores a la pagina seleccionada. también mostrará las decenas de todas las paginas entre la primera y la última, 10,20,30,40….

Cuando la paginación sea inferior a 10, se mostrará de esta forma.

Share

Añade un menú animado y colorido en tu pagina Web, en CSS

Es posible crear un menú animado muy vistoso para tu pagina web con un sencillo código CSS.

CSS nos permite dar formato a las paginas web, convertirlas en algo mucho más atractivo que lo que nos da el soso html. Es increíble la cantidad de posibilidades que nos ofrece CSS para crear un atractivo, colorido y dinámico menú.

Este ejemplo de menú esta diseñado para contener 5 elementos, pero fácilmente puede ser modificado, si necesitas un número de elementos mayor o menor.

Código de ejemplo html:

<nav>
    <a href="#">Inicio</a>
    <a href="#">Blog</a>
    <a href="#">Sitemap</a>
    <a href="#">Portafolio</a>
    <a href="#">Contact0</a>
    <div class="animation start-home"></div>
</nav>

Código CSS:

nav {
    margin: 27px auto 0;
    position: relative;
    width: 590px;
    height: 50px;
    background-color: #34495e;
    border-radius: 8px;
    font-size: 0;
    margin-top: 200px;
}

nav a {
    line-height: 50px;
    height: 100%;
    font-size: 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all .5s ease 0s;
    border-radius: 8px;
}

a:nth-child(1) {
    width: 100px;
}

a:nth-child(2) {
    width: 110px;
}

a:nth-child(3) {
    width: 100px;
}

a:nth-child(4) {
    width: 160px;
}

a:nth-child(5) {
    width: 120px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
    width: 100px;
    left: 0;
    background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
    width: 110px;
    left: 100px;
    background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
    width: 100px;
    left: 210px;
    background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
    width: 160px;
    left: 310px;
    background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
    width: 120px;
    left: 470px;
    background-color: #e67e22;
}

body {
    font-size: 12px;
    font-family: sans-serif;
    background: #2c3e50;
}

span {
    color: #2BD6B4;
}

Da un aspecto elegante a tu menú con este llamativo ejemplo en CSS.

Share

Consigue un llamativo efecto en tus textos con CSS

Es increíble la cantidad de posibilidades que nos ofrece CSS para diseñar una pagina web, las posibilidades son casi infinitas, la imaginación es el único limite.

Con unas simples lineas en CSS podemos crear un llamativo rotulo tipo comic e incluirlo fácilmente en cualquier parte de una pagina web.

Código CSS

body {
  background-color: #fc3153;
  text-align: center;
}

h1 {
  font-size: 144pt;
  font-family: 'Luckiest Guy';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:   0px -6px 0 #212121,  
                 0px -6px 0 #212121,
                 0px  6px 0 #212121,
                 0px  6px 0 #212121,
                -6px  0px 0 #212121,  
                 6px  0px 0 #212121,
                -6px  0px 0 #212121,
                 6px  0px 0 #212121,
                -6px -6px 0 #212121,  
                 6px -6px 0 #212121,
                -6px  6px 0 #212121,
                 6px  6px 0 #212121,
                -6px  18px 0 #212121,
                 0px  18px 0 #212121,
                 6px  18px 0 #212121,
                 0 19px 1px rgba(0,0,0,.1),
                 0 0 6px rgba(0,0,0,.1),
                 0 6px 3px rgba(0,0,0,.3),
                 0 12px 6px rgba(0,0,0,.2),
                 0 18px 18px rgba(0,0,0,.25),
                 0 24px 24px rgba(0,0,0,.2),
                 0 36px 36px rgba(0,0,0,.15);
}

De una forma realmente sencilla puedes tener tus titulares con un diseño personalizado.

Prueba tus diseños desde aquí.

Share

17 fuentes que pueden hacer más bello tu sitio web

Las fuentes tipográficas pueden dar un aspecto más personalizado a tu sitio web. Muchas personas no consideran la importancia de las fuentes en el diseño web, pero es fundamental para mostrar proyectos más frescos y modernos, llamativos y acordes al producto que queremos ofrecer.

Las siguientes fuentes son de código abierto, y realmente te encantarán.

Puede que alguna de estas fuentes sea lo que estas buscando para tu nuevo proyecto y le de esa apariencia que no sabias como conseguir.

Fuente tipografica Manrope

Share

kloudless, permite adjuntar archivos de gran tamaño a tu e-mails

 

kloudless, permite adjuntar archivos de gran tamaño a tu e-mails

 

Uno de los principales problemas de los servicios de correo electrónico gratuitos, como Gmail, es la limitación que tienen a la hora de enviar archivos adjuntos de gran tamaño en nuestros e-mails.

Para saltarnos estas limitaciones impuestas por nuestro servicio de correo electrónico gratuito existe un plugin para Google Chrome, kloudless, el cual nos permitirá adjuntar archivos de gran tamaño a nuestros e-mail utilizando los servicios de almacenamiento en la nube tales como Dropbox, Box o Google Drive.

Ahora con esta herramienta podremos enviar archivos de gran tamaño ubicados en nuestros servicios de almacenamiento en la nube con gran facilidad adjuntados en nuestros e-mails.

Kloudless puede ser utilizado en los servicios de e-mail gratuitos tales como Gmail o Outlook, dos de los servicios más populares y extendido.

 

Enlace a la web:

https://kloudless.com/

 

 

Share