Blog

Laptop con algoritmo

Qué es un algoritmo y cómo diseñarlo

De una forma un poco vaga podríamos decir que un algoritmo es una serie de pasos. Pero ahí nos quedaríamos cortos ya que estos pasos deben seguirse en determinado orden y con ciertas reglas que determinarán si se ejecuta o no. Y todo esto tiene como fin resolver un problema X o llegar a realizar una tarea específica.

El algoritmo busca cumplir determinada tarea, resolver determinado problema.

Podrías pensar que algoritmo sólo es un concepto que encontramos en la informática o en las matemáticas. Pero esto es falso, puedes identificar un algoritmo en cada cosa que haces:

  • Elaborar una receta, desde conseguir los ingredientes y utensilios hasta su preparación.
  • Cepillarte los dientes, sigues los pasos siempre en el mismo orden no?
  • Ordenar números.
  • Ordenar tu ropero, por ejemplo formar grupos de pantalones, remeras, buzos, faldas, etc..
  • Estacionar un vehículo.

Podrías hasta encontrar un algoritmo a la hora de comprar los ingredientes de la receta, teniendo en cuenta la ubicación de los alimentos en el espacio físico del supermercado partiendo del más cercano a tu ingreso. Agregando condicionales en caso que no hallarás un producto y así recorrerías el supermercado sólo una vez.
Los pasos de un algoritmo deben estar bien definidos para que puedan ser ejecutados y así llegar a cumplir una tarea específica.

Para realizar el diseño de un algoritmo podemos identificar varias fases que nos guiarán tanto en el diseño, implementación y mantenimiento del algoritmo:

Fase de análisis y especificación

Aquí es dónde hay que determinar lo que se quiere resolver. En esta fase recibes los requisitos del sistema y debes hacer un análisis de los mismos para tener claro que los has entendido y así poder pasar a la siguiente fase.

Fase de desarrollo

La fase dónde los pasos son definidos, ordenados, condicionados dentro de nuestro algoritmo con el fin de cumplir con el objetivo. Podemos servirnos para ello de herramientas como diagrama de flujo, pseudocódigo, diagrama N-S y para ello hay varios programas gratis que puedes usar aunque yo creo que en casos pequeños con lápiz y papel es más que suficiente.

Mi preferido es el diagrama de flujo dónde los pasos van encerrados en diferentes figuras conectadas entre sí mediante flechas que direccionan el flujo de ejecución. La forma de cada figura determinará el tipo de situación que se nos presenta para poder actuar en consecuencia. Aquí te muestro algunos de los símbolos del diagrama, hay muchos más por supuesto.

Símbolos normalizados del diagrama de flujo.

Está bastante claro en cuanto a las figuras de inicio o fin del diagrama, en cuanto a la de acción o proceso creo que también ya que aquí va una acción o función definida allí mismo.
La entrada de información sería por ejemplo el ingreso de datos del usuario y la salida de información es la que le es devuelta al usuario.
Dentro de subprograma o subrutina incluiremos una función predefinida en la cual podemos incluir argumentos para ser enviados y recibir el resultado que ésta arroja.
El conector nos indica que existe una referencia cruzada y un enlace en este punto a otro proceso diseñado en otra página. Este concepto me ha quedado pobre te aconsejo que busques más información sobre como utilizar un conector en un diagrama de flujo.

Hay diferentes tipos de diagramas de flujo, esto depende del uso al que está destinado, nosotros nos centraremos en el siguiente ejemplo en un diagrama de flujo de programas.
El objetivo del algoritmo será poder mostrar los clientes que coincidan con la búsqueda del usuario, dicha búsqueda puede contemplar nombre, apellido y/o número de documento. La búsqueda debe ser efectuada a partir de que el usuario ingrese al menos tres caracteres. Si no hay resultados que coincidan debe informase al usuario.


Te muestro un simple ejemplo visual y luego pasamos al algoritmo.

Buscando clientes

El control sobre el cual el usuario escribe la búsqueda tiene una función asociada que es llamada al detectar cambios en el control. Nosotros empezaremos a armar el diagrama como si el mismo se ejecutara dentro de esa función llamada en cuanto cambia el estado del control.

Diagrama de flujo de búsqueda de clientes

Fase de implementación

Esta es la parte divertida y creo que por eso caemos en el error de saltar la anterior y venir directamente a esta fase.. Es la fase donde transcribimos el algoritmo a un lenguaje de programación. Generamos el código que tendrá nuestro programa, lo compilamos, ejecutamos y probamos.

Fase de mantenimiento

Cuanto más complejo más mantenimiento, en esta fase debe armarse la documentación a medida que se va utilizando el sistema así cómo también identificar y realizar las mejoras que pueden aplicarse.

Un consejo para resolver un algoritmo

Para poder resolverlo aplica el “Divide y vencerás”, ya habrás escuchado esta frase anteriormente. Se trata de una buena estrategia para poder dividir un problema en unidades más pequeñas que nos permitan resolver cada una por separado. Una vez resuelta cada unidad procedes a juntarlas y hacer los ajustes que se requieran para cumplir con el objetivo del algoritmo.

pseudocódigo

Pseudocódigo

Existe una forma en la que podemos escribir software de tal manera que pueda ser entendido por las personas sin utilizar un lenguaje de programación y esa forma es haciendo uso del pseudocódigo.

El pseudocódigo nos sirve para diseñar la solución del programa, o sea, los pasos que debemos seguir para realizar la tarea. Luego de haber definido la lógica del programa con el pseudocódigo, podemos proceder a transformarlo al lenguaje de programación que optamos por utilizar para escribir el programa ya que el pseudocódigo no puede ser interpretado por una computadora.

escribir pseudocódigo

Ejemplo de pseudocódigo:

  1. Definir el precio de un artículo a 100
  2. Comunica al usuario el precio, solicita que ingrese la cantidad de artículos y guarda este dato en la variable cantidad
  3. Muestra al usuario el precio total de los artículos que ingresó

Ahora vamos a pasar este pequeño programa escrito en pseudocódigo a código javascript:

// 1 - Definir el precio de un artículo a 100
let precio = 100;

// 2 - Comunica al usuario el precio, solicita que ingrese la cantidad de artículos y guarda este dato en la variable cantidad
let cantidad = prompt("El precio del artículo es de $" + precio + ". Ingresa una cantidad: ");

// 3 - Muestra al usuario el precio total de los artículos que ingresó
alert("El precio total de los artículos es $" + (precio * cantidad));
Portada de blog

Sintaxis y semántica de los lenguajes de programación

Para escribir un programa en determinado lenguaje de programación necesitamos aprender su sintaxis y semántica.

Sintaxis: es el conjunto de reglas que definen las combinaciones de símbolos que se utilizan en determinado idioma. En el lenguaje natural la sintaxis se constituye por reglas ortográficas y gramaticales. En programación este conjunto de reglas deben seguirse a la hora de escribir el código fuente de un programa.

La sintaxis puede tener ciertas diferencias entre los diferentes lenguajes de programación. Por ejemplo en javascript se recomienda terminar cada sentencia con un punto y coma, pero esto no es obligatorio. De forma diferente sucede con C# dónde nuestro programa marcaría un error de sintaxis de inmediato si olvidamos colocar un punto y coma al final de una sentencia.

// Javascript
let name = "Paola"
// C#
string name = "Paola";

Como habrás notado en C# la variable está definida como una cadena pero bien podríamos haber definido la variable de la siguiente forma:

// C#
var name = "Paola";

Semántica: en la estructura de un lenguaje de programación la semántica define su significado, o sea que, define los efectos que tendrá una sentencia o instrucción. Por ejemplo, si utilizamos la función alert() de javascript de la siguiente manera:

// Javascript
alert("Hola mundo!!");

El resultado de esa sentencia será que el usuario verá en pantalla un cuadro de alerta con el mensaje que le pasamos por parámetro más un botón para poder cerrarlo.

Menú responsive

Menú responsive con HTML y CSS

Este menú está realizado solamente con HTML y CSS sin ninguna librería. Actualmente, si estás realizando algún proyecto, es más recomendable que utilices frameworks como Bootstrap para realizarlo ya que nos ahorra bastante tiempo pero siempre es bueno saber como funcionan cosas simples como esta.

Para este menú utilicé dos iconos y una imagen de fondo, los materiales junto con el código se encuentran al final de este post. Tendremos un archivo index.html y un archivo styles.css, en el index importaremos en la cabecera nuestro archivo de estilos y en el <body> del documento html incluiremos un encabezado que llevará dentro un <input> de tipo “checkbox” y dos etiquetas <label> con las imágenes de los iconos dentro, cada una con una clase para poder identificar cada icono y también tendremos el menú con cinco items. La etiqueta <label> con el icono para cerrar el menú estará dentro de la lista como su primer item.

    <header>
        <input type="checkbox" id="btn-menu">

        <label for="btn-menu" class="iconMenu">
            <img src="img/iconomenu.png">
        </label>

        <nav class="menu">

            <ul>
                <li>
                    <label for="btn-menu" class="iconClose">
                        <img src="img/cerrar.png">
                    </label>
                </li>
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
            </ul>
        </nav>
    </header>

Elegimos una fuente para todo el documento, establecemos el margen y el relleno a cero e incluimos la imagen de fondo junto con unos estilos en el <body> para que ocupe toda la pantalla y este centrada.

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-image: url(img/fondo2.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

Hacemos que el ancho del encabezado ocupe el cien por ciento de la pantalla, le damos una altura y un color de fondo, ocultamos el <input> y los iconos.

header {
    width: 100%;
    background-color: #2240af45;
    height: 55px;
}

#btn-menu,
.iconMenu,
.iconClose {
    display: none;
}

Le sacamos a la lista y a los enlaces el estilo que viene por defecto. Ponemos los elementos de la lista en fila, establecemos un tamaño de fuente y también un color a los enlaces.

ul {
    list-style: none;
    display: flex;
    font-size: 18px;
}

a {
    display: block;
    text-decoration: none;
    color: #957136;
    padding: 20px;
}

Utilizaremos media queries para establecer el comportamiento del menú según el ancho de la pantalla, en este caso establecemos el máximo a unos 799 píxeles.

.Le damos una posición absoluta al menú. Mostramos el icono del menú, al menú le incluimos algunos estilos y le decimos que se traslade por el eje y un -200% para ocultarlo. Pero esto tiene un resultado algo extraño ya que aparece y desaparece al recargar la página por unos segundos. Este problema lo solucionamos con un keyframe para desaparecerlo una sola vez, además le agregamos otros estilos a los elementos del menú para que nos queden .

Ahora como el menú está escondido, le decimos que cuando pulse sobre el icono del menú, haciendo checked sobre nuestro input escondido, que afecte al <nav> con la clase “menu” haciendo que éste se traslade por el eje y en la posición cero y que esto lo haga con un efecto de transición. .

Al final utilizando nth-child le damos un efecto al pasar el cursor por los elementos del menú

@media(max-width: 799px) {
    .iconClose,
    .iconMenu {
        display: block;
        padding: 13px;
        cursor: pointer;
    }
    .menu {
        width: 100%;
        position: absolute;
        transform: translateY(-200%);
        transition: all 1s;
        animation: desaparece 1s 1;
        top: 0;
    }
    @keyframes desaparece {
        0%,
        100% {
            margin-top: -100%;
        }
    }
    ul {
        flex-direction: column;
    }
    li {
        border-bottom: 1px solid rgb(149, 113, 54, 0.6);
        background-color: black;
    }
    #btn-menu:checked~.menu {
        transform: translateY(0);
        transition: all 1s;
    }
    li:nth-child(n+2):nth-child(-n+6):hover {
        background-color: #2240af45;
    }
}

También puedes ver el video de este tutorial:

Código en GitHub
Variable - hettand

¿Qué es una variable en programación?

Una variable es una zona con nombre en la memoria del dispositivo o equipo. En programación la utilizamos cuando queremos almacenar algún valor en memoria para poder utilizarlo después.

Las variables tienen tres características:

  1. Nombre: lo definimos al crear la variable, es recomendable que sea descriptivo por sí mismo. Por ejemplo, sí deseas guardar en ella el número de kilómetros recorridos por un vehículo podrías elegir como nombre de la variable km y definir otra con tu primer nombre con firstName o primerNombre.
  2. Tipo: define que tipos de valores puede contener la variable. Para almacenar el número de los kilómetros podemos definir un tipo de dato decimal y para tu primer nombre una variable de tipo cadena de caracteres.
  3. Valor: si queremos almacenar que recorrió 28.500 kilómetros, el número sería el valor de los kilómetros que recorrió el vehículo y la secuencia o cadena de caracteres corresponderían al nombre.

Definir los tipos de las variables es importante porque nos permite saber el espacio que ocupa y que operaciones pueden realizarse con ella. Por ejemplo, no podemos multiplicar cadenas de caracteres pero si podemos hacerlo con los números. Además es importante para hacer comprobaciones de errores para saber si se introduce un valor del mismo tipo.

Hay muchos tipos de datos, incluso se pueden definir tipos propios. Un tipo de dato primitivo o básico es el que ya está predefinido en un lenguaje de programación.

Te muestro un ejemplo creando las variables en el lenguaje C#:

// C# 
decimal km = 28.5m;
string firsName = "Paola";
Lenguaje de programación

Lenguajes de programación

¿Qué es un lenguaje de programación?

Forma parte de los denominados “lenguajes formales”. Pero. ¿Qué es un lenguaje formal? Como ya sabrás un lenguaje es un sistema de comunicación, pero lo que lo hace formal es que utiliza símbolos y reglas o sea que contiene una gramática formal.

Los lenguajes de programación se utilizan para escribir programas de computadoras u ordenadores los denominados Software en el idioma inglés y se componen de secuencias de instrucciones precisas que realizan una tarea.

Ejemplos de programas:

  • Calcular el promedio de gastos mensuales.
  • Hacer posible que un robot realice el montaje de un automóvil con precisión y efectividad.
  • Llevar un control de los pagos de mis clientes.

Niveles de lenguajes de programación

  • Lenguaje máquina: el de más bajo nivel, escrito en el denominado sistema binario o sistema diádico el cual consta de unos y ceros, o sea, de una combinación de bits. Este sistema es interpretable por un circuito microprogramable como el microprocesador que contiene una computadora o el microcontrolador de un autómata.
  • Lenguaje de bajo nivel o ensamblador: tiene un nivel nemotécnico, con esto quiero decir que es sencillo porque es utilizado para recordar una secuencia de datos, nombres, números y en general para recordar listas de items.
  • Lenguaje de alto nivel: son los más expresivos porque han sido diseñados para que las personas escriban y entiendan los programas más fácilmente que los dos anteriores Existen muchísimos lenguajes de alto nivel y utiliza el idioma inglés para las instrucciones. Por nombrarte algunos esta Javascript, Python, C++, C#, Java, etc…

tabla

Tabla de horarios con javascript

Está tabla realizada mayormente con javascript puede ser una forma ordenada y fácil para visualizar horarios de diferentes materias cómo utilicé en este ejemplo aunque puedes aplicarlo a un listado de citas por ejemplo reemplazando las materias por nombres de clientes.

Inicialmente creamos un archivo style.css e index.html con la estructura básica del documento, ambos dentro de la misma carpeta. En el index.html importamos nuestro style.css y escribimos dentro del body las etiquetas de la tabla, con su encabezado y su cuerpo.

Contenido del head:

    <title>Tabla semanal de horarios con javascript</title>
    <link rel="stylesheet" type="text/css" href="style.css">

Contenido del body:

 <table>
     <thead>
        <tr id="thead"></tr>
     </thead>
     <tbody id="tbody"></tbody>
 </table>

Estilos para el cuerpo del documento, la tabla, su encabezado y celdas, también definí una clase “days” para los días de la semana.

body {
    min-height: Calc(100vh - 100px);
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

table {
    margin: auto;
    font-size: 20px;
    width: 80%;
}

td,
th {
    border: 1px solid #c3c3c3;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.days {
    background-color: black;
    color: aliceblue;
    font-family: sans-serif;
    font-weight: 100;
}

También incluí unos estilos al pasar el cursor por cada materia y al pulsar en cada una de ellas.

.bg:hover {
    background: #c1c1c1;
    color: #fff;
}

.shadow:hover {
    box-shadow: 0px 4px 9px -1px rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.shadow:active {
    background: #000;
    color: #fff;
}

Ahora pasemos al código javascript que yo escribí dentro del html ya que no es muy extenso pero tú puedes escribirlo en un archivo js y luego incluirlo dentro del html.

Definí la tabla mediante una función y le agregué las siguientes propiedades:

  function Table() {

            this.thead = document.getElementById("thead")
            this.tbody = document.getElementById("tbody")
            this.dias = ["Hora", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes"]
            this.horas = ["8:00", "9:00", "10:00", "11:00", "12:00"]
            this.clases = [{
                "hora": "8:00",
                "dia": 1,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 1,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "10:00",
                "dia": 2,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "8:00",
                "dia": 3,
                "materia": "Dibujo",
                "bg": "cyan"
            }, {
                "hora": "9:00",
                "dia": 3,
                "materia": "Música",
                "bg": "aliceblue"

            }, {
                "hora": "11:00",
                "dia": 3,
                "materia": "Biología",
                "bg": "darkturquoise"
            }, {
                "hora": "8:00",
                "dia": 4,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 4,
                "materia": "Sociología",
                "bg": "darksalmon"
            }, {
                "hora": "8:00",
                "dia": 5,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "9:00",
                "dia": 5,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "12:00",
                "dia": 5,
                "materia": "Historia",
                "bg": "cornflowerblue"
            }]

Comenzamos construyendo el encabezado de la tabla para ello recorremos el array de los días para crear los casilleros del encabezado, a los días le agregamos nuestra clase “days” definida en el CSS y al elemento con el texto “Hora” le damos un fondo rojo para diferenciarlo de los días.

this.head = function() {
    // texto de "Hora" y los días
    for (d of this.dias) {
        const th = document.createElement("th")

        // Sí no es el texto "Hora" le ponemos la clase "days" de lo contrario el fondo red
        if (d !== "Hora") th.className = "days"
        else th.style.backgroundColor = "red"
        th.appendChild(document.createTextNode(d))
        this.thead.appendChild(th)
    }
}

Ahora pasamos a construir el cuerpo de la tabla, primero definimos una variable “hora” que necesitaremos para guardar la hora en la que nos encontramos en la fila de la tabla y una variable “horasCount” en la que guardamos la cantidad actual de elementos que contiene, es así que iteramos por cada hora para crear las filas.

Ahora el segundo ciclo que incluimos dentro del primero se encargará de insertar la hora de cada materia con su respectivo nombre y en el día que le corresponde.

Si estamos parados en la primer celda de cada fila pondremos en ella el primer elemento del array de horas para luego guardarlo en la variable hora y luego eliminarlo así al volver a la siguiente fila agregamos la siguiente hora eliminándola nuevamente y pasando a la siguiente. A estas celdas le damos un texto en negrita.

Ahora si no estamos parados en la primer celda de la fila que llevará la clase “shadow”. En este punto tenemos que fijarnos si la hora en que estamos parados coincide con alguna de la lista de clases para ello utilizamos la guardada en nuestra variable hora y si ésta y el número de día coincide con nuestro objeto de clases le damos el color de fondo que tiene y le insertamos el nombre de la materia a la celda para luego agregarla a la fila.

this.body = function() {
    let hora
    let horasCount = this.horas.length
        // en el body tenemos que poner las horas con sus respectivas materias
    for (let f = 0; f < horasCount; f++) {
        // fila
        const tr = document.createElement("tr")
            // celdas, for por la cantidad de días de la semana
        for (let c = 0; c < 6; c++) {
            const td = document.createElement("td")
            if (c == 0) {
                // celdas de las horas tomamos la primera y después la eliminamos así tomamos la siguiente
                td.appendChild(document.createTextNode(this.horas[c]))
                td.style.fontWeight = "bold"
                hora = this.horas[c]
                this.horas.shift()
            } else {
                // celdas de las materias
                td.className = "shadow"
                this.clases.forEach(function(element) {
                    if (element.hora === hora && element.dia === c) {
                        td.style.backgroundColor = element.bg
                        td.appendChild(document.createTextNode(element.materia))
                    }
                })
            }
            tr.appendChild(td)
        }
        this.tbody.appendChild(tr)
    }
}

Finalmente para ver la tabla armada creamos la instancia de la clase Tabla e invocamos a la construcción de su encabezado primero y luego a la de su cuerpo con la información que le proporcionamos.

let table = new Table()
table.head()
table.body()

Video del tutorial

VER DEMO Código en GitHub
Dado 3D

Dado 3D animado con HTML y CSS

Comenzamos creando un archivo index.html y un archivo style.css en la misma carpeta. En nuestro archivo HTML dentro del <body> definimos un <div> con la clase “contenedor”, dentro de éste otro con la clase “cubo” y dentro seis de ellos cada uno con la clase “cara”. Aquí el código html dentro del body:

<div class="contenedor">
    <div class="cubo">
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
     </div> 
</div>

Ahora pasamos a modificar los estilos.

Al cuerpo del documento le apliqué un display y también un fondo oscuro aunque con mejor resultado puedes ponerle una imagen pero te aconsejo que le agregues una sombra al cubo, requiere un trabajo extra pero quedaría genial . A “contenedor” le damos una perspectiva de 1000 píxeles, esta propiedad lo que hace es determinar la distancia entre el plano z=0 y el observador además si no se la configuramos nuestro cubo se verá deforme, también le apliqué un margen.

body {
    background-color: black;
    display: flex;
}

.contenedor {
    perspective: 1000px;
    margin: auto;
}

Para posicionar los hijos dentro de “cubo” en el espacio 3D usamos transform-style, le damos un margen y junto con sus hijos le damos igual alto y ancho. Las caras tendrán una posición absoluta y un borde blanco.

.cubo {
    transform-style: preserve-3d;
    margin: 200px auto;
}

.cubo,
.cubo>div {
    height: 290px;
    width: 290px;
}

.cara {
    position: absolute;
    border: 5px solid #ffffff;
}

Ahora vamos a las imágenes de las caras que coloqué en una carpeta, al final del post tendrás el acceso al repositorio en GitHub:

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
}

Una vez cargadas las imágenes en cada cara, llevamos por el eje z la cara con el tres hacia el frente y la cara con el cinco hacia el fondo. Sobre el eje y trasladamos en sentidos opuestos a la cara con el seis y el cuatro para luego rotarlos 90 grados y dejarlos enfrentados, y lo mismo con las caras dos y uno pero sobre el eje x.

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
    transform: translateZ(150px);
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
    transform: translateZ(-150px);
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
    transform: translateX(-150px) rotateY(90deg);
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
    transform: translateX(150px) rotateY(90deg);
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
    transform: translateY(-150px) rotateX(90deg);
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
    transform: translateY(150px) rotateX(90deg);
}

Ahora pasemos a la animación que se la aplicamos a la clase “cubo” que contiene nuestras caras ya posicionadas, le damos unos 20 segundos de duración, la llamamos “giro”, se la dejamos de forma infinita y le aplicamos una velocidad lineal de inicio a fin. Para el @keyframes definimos de esta manera las transformaciones:

.cubo {
    animation: giro 20s infinite linear;
}

@keyframes giro {
    0% {
        transform: rotateX(-45deg) rotateY(0deg)
    }
    20% {
        transform: rotateX(0deg) rotateY(00deg)
    }
    40% {
        transform: rotateX(45deg) rotateY(180deg)
    }
    80% {
        transform: rotateX(-90deg) rotateY(360deg)
    }
    100% {
        transform: rotateX(-45deg) rotateY(720deg)
    }
}

Video en Youtube

VER DEMO Código en GitHub

Así me inicié en el mundo de la programación

Comencé a estudiar cómo autodidacta con HTML, CSS y algo de Javascript, dejé por un tiempo de practicar y cuando empecé formalmente a estudiar Programación y Análisis TI retomé de nuevo, ya con Python armando un programita con Tkinter y luego ya en una empresa con C# y .NET.

Mis inicios laborales fueron algo incómodos ya que cuando comencé a trabajar en el sector de desarrollo me encontré con un entorno 100% masculino y no era el ambiente que acostumbraba tener en mis anteriores trabajos, sumándole que tampoco tenía experiencia en el sector de desarrollo en ninguna otra empresa.

mujeres programadoras

Por momentos cuando pensaba que no podía avanzar, que no lo hacía tan rápido como un compañero con la misma antigüedad que yo, aunque luego supe que ya tenía experiencia en otra empresa, cuando se me pasó por la cabeza un pensamiento terriblemente machista creyendo que por algo no había mujeres trabajando allí lo que hice fue dejar de lado esos prejuicios absurdos y seguir intentando y buscando la solución cuando me veía estancada en algo.

También estaba la cuestión de la edad, ya que comencé a formarme a mis 33 años y todos los que hemos buscado empleo sabemos que muchas empresas buscan empleados estableciendo un límite de edad lo cual me parece que para este sector es una actitud sumamente discriminatoria de estas empresas.

Más mujeres deberían ingresar a este sector laboral sobre todo en mi país, Uruguay, dónde se necesitan más profesionales para el sector de TI (Tecnologías de la información) y dónde el desempleo tiene cara de mujer.