All Posts

Crear notas adhesivas con HTML y CSS

CSS dispone de increíbles posibilidades para el diseño de los proyectos en HTML, casi cualquier cosa es posible.

Con CSS puedes convertir una lista en unas bonitas notas adhesivas muy llamativas, simulando las notas reales en papel. Al pasar el cursor del ratón por una de las notas, esta, creará un efecto de zoom.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Notas adhesivas</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" type="text/css">
    </head>


    <body>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #1</h2>
                    <p>Buscar cursos gratuitos de tecnologías para Inteligencia Artificial</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #2</h2>
                    <p>Compar el pan para el pinic de mañana</p>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #3</h2>
                    <p>Comprobar el funcionamiento correcto del calentador de agua</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #4</h2>
                    <p>Comprobar funcionamiento aplicación medición temperaturas</p>
                    </a>
                </li>
            </ul>
        </div>

    </body>

</html>

Código CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: arial, sans-serif;
    font-size: 100%;
    margin: 3em;
    background: #666;
    color: #fff;
}

h2,
p {
    font-size: 100%;
    font-weight: normal;
}

ul,
li {
    list-style: none;
}

ul {
    overflow: hidden;
    padding: 3em;
}


/* Parametros de la nota, medidas, color, etc. */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
}

ul li {
    margin: 1em;
    float: left;
}

ul li h2 {
    font-size: 140%;
    font-weight: bold;
    padding-bottom: 10px;
}

ul li p {
    font-family: "Reenie Beanie", arial, sans-serif;
    font-size: 280%;
}


/* Añade el sombreado */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    /* Firefox */
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}


/* Inclinar las notas */

ul li a {
    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
}


/* Inclinar notas al azar */

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
}

ul li:nth-child(5n) a {
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    top: -10px;
}


/* Añadir trancisión y colores suaves */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
}

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #cfc;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #ccf;
}


/* Zoom en las notas al pasar por encima */

ul li a:hover,
ul li a:focus {
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position: relative;
    z-index: 5;
}
Ejemplo etiquetas adhesivas



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Al instalar Postgresql, no funciona el comando psql

Puede ser que ya realizaste la instalación de Postgresql, ese gran motor de bases de datos, profesional y open source, una maravilla para la realización de proyecto que requieren el almacenamiento de datos.

Un problema bastante común al realizar dicha instalación es que desde la terminal no tenemos acceso al comando “psql“.

Psql, es la herramienta que nos permite administrar nuestras bases de datos en Postgresql. Es cierto que también podemos realizar las mismas tareas y de forma gráfica con pgAdmin, u otras aplicaciones para gestionar bases de datos, Navicat o SQLpro.

En Mac OS X, Postgresql se instala en, “/Applications/Postgres.app/Contents/Versions/??“. Donde “??“, es la versión que se instalo.

Para poder utilizar psql, debemos añadir la siguiente ruta a “PATH“, “/Applications/Postgres.app/Contents/Versions/11/bin“, en el caso de que la versión sea la 11. Si tu versión es otra, debes cambiarlo por la tuya. Si no sabes que versión se ha instalado de postgresql, ve a la carpeta “Aplicaciones“, busca “Postgres.app“, pincha con el botón secundario del ratón y selecciona “Mostar contenido del paquete“. Se abrira una nueva carpeta, abre, Contents, Versions, y ya veras la versión de tu instalación de postgres.

Sabiendo ya este dato, ejecuta en la terminal el siguiente comando:

export PATH="/Applications/Postgres.app/Contents/Versions/11/bin:$PATH"

No te olvides de sustituir “11“, por tu versión.

Ahora ya puedes utilizar psql desde la terminal de Mac OS X.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Crea un log fácilmente para tus proyectos en Python

Un fichero de registro o log nos permite llevar una cronología de lo que va sucediendo en nuestra aplicación. Podemos registrar con facilidad todos aquellos procesos, fallos y errores que consideramos oportunos, esto nos permite poder encontrar fallos y errores presentes en el script que ejecutamos.

Esta utilidad esta presente en el modulo “logging“. Nos permite crear de forma fácil y rápida los archivos log en nuestros proyectos.

Logging dispone de 5 métodos para notificar los diferentes mensajes:

  • Debug. Normalmente se utiliza cuando estamos desarrollando nuestra aplicación, nos permite depurar el proyecto.
  • Info. Mensajes informativos. Pueden indicar que los procesos se realizan de forma correcta.
  • Warning. Utilizado para realizar advertencias, algo puede no ir bien o causar problemas en un futuro proximo.
  • Error. Algo ha salido mal o el resultado no es el esperado.
  • Critical. Posiblemente el programa deje de funcionar o responder.

Podemos configurar logging para que cree un archivo de texto, en el cual se guardarán los mensajes que vamos colocando en el código.

import logging
from datetime import datetime, date, time

ahora = datetime.now()
fecha_log = ahora.strftime('%d-%m-%Y_%H-%M-%S')

logging.basicConfig(level=logging.DEBUG,
                    format='%(asctime)s : %(levelname)s : %(message)s',
                    filename = fecha_log + '_registro.log',
                    filemode = 'w',)
  • Level. Nivel del mensaje.
  • Format. El formato en el cual serán guardados los mensajes.
  • Filename. El archivo que contendrá el log.
  • Filemode. El modo del archivo.

Ejemplo del formato de salida de los mensajes:

Ahora solo nos queda añadir la salida de los mensajes en los lugares de nuestra aplicación que consideremos más oportunos, propensos a errores, criticos o simplemente informativos.

El formato para los mensajes es el siguiente:

logging.debug('Información detallada, generalmente de interés solo cuando se diagnostican problemas.')
logging.info('Confirmación de que las cosas funcionan como se esperaba.')
logging.warning('Una indicación de que sucedió algo inesperado o indicativo de algún problema en el futuro cercano (por ejemplo, "espacio en disco bajo"). El software sigue funcionando como se esperaba.')
logging.error('Debido a un problema más serio, el software no ha podido realizar alguna función.')
logging.critical('Un error grave que indica que el programa en sí no puede continuar ejecutándose.')

Aqui, puedes encontrar la documentación oficial de logging.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Ejecutar con Python una función con determinados periodos de tiempo

Muchas veces utilizamos crontab para programar la ejecución de un determinado script de python en determinadas horas o fechas. Utilizando crontab, el periodo de tiempo más corto para lanzar un script es de un minuto, si necesitamos realizar procesos con periodos de tiempo más cortos debemos utilizar otras técnicas.

Existen multitud de formas para ejecutar un función que lance los procesos de nuestro script, unas más complejas y sofisticadas, otras más sencillas, que no dependen de funcionalidades ni complementos externos.

Este pequeño ejemplo de script de python, ejecuta una función cada 15 segundos:

import time

while True:
    funcion_a_ejecutar()
    time.sleep(15)
    print("Se Ejecuto!!!")

Este proceso crea un bucle infinito. Ejecuta la función “funcion_a_ejecutar()“, y seguidamente espera a que transcurran 15 segundos, e imprime por pantalla el mensaje “Se Ejecuto!!!“. Al ser un bucle infinito, ejecutara este mismo proceso continuamente.

Existen complementos que realizan tareas similares como pueden ser:

  • InterruptableLoop
  • threading
  • Scheduler

Entre otras muchas opciones disponibles con diferentes librerias de python. Hoy hemos propuesto el sistema más sencillo y sin la necesidad de librerias externas.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

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.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share