Archivo mensual 11/04/2021

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