DEV Community: Martin Wilches

Guía rápida de Babel

Martin Wilches — Tue, 01 Feb 2022 12:37:44 +0000

Babel es un software que permite transpilar código, con el principal objetivo de aumentar la compatibilidad del programa para el despliegue del mismo en distintos navegadores.
ES6 a incluido nuevas características que en un principio no eran soportadas por todos los navegadores, generando de esta manera problemas de compatibilidad y por consiguiente un funcionamiento incorrecto del programa escrito con esta versión del lenguaje. Babel permite realizar la conversión de código escrito con la sintaxis permitida por el estándar ES6 a versiones anteriores.

Instalación de Babel

Babel es un modulo de Node.js, el cual puede ser instalado a través de su gestor de paquetes conocido como npm (node package manager), haciendo uso de la terminal del sistema.

Generar un archivo llamado package.json con el cual se puedan manejar los módulos del proyecto, en este caso Babel.

$ npm init

Instalar Babel como un modulo de desarrollo.

$ npm i babel-cli -D
$ npm i babel-preset-env -D

Crear un archivo llamado .babelrc.

$ touch .babelrc

Incluir el siguiente objeto como código del archivo anterior, por medio del cual se indica que el código se transpilara a versiones de ES5 y anteriores.

{
  "presets":["env"]
}

Dentro del archivo package.json incluir el script de ejecución de Babel.

"scripts": {
   "build": "babel src -d lib"
}

El código del script anterior instruye lo siguiente:

Transpilar el código mediante Babel.
El código a transpilar será aquel localizado en el directorio src.
Crear un nuevo directorio llamado lib.
El código transpilado se localizará en este último directorio mencionado.

Por último el proceso de transpilación se podrá iniciar con el siguiente comando.

$ npm run build

Conceptos básicos de Git

Martin Wilches — Mon, 31 Jan 2022 02:20:52 +0000

Sistema de control de versiones que permite alojar los avances realizados en un proyecto dentro de un repositorio.
Git permite que varios desarrolladores realicen modificaciones en simultaneo sobre un mismo proyecto.
El software necesario para el uso de Git debe ser instalado desde la línea de comandos o descargado desde su web oficial.

Una vez Git se encuentre instalado en el sistema, es posible hacer uso de este ya sea mediante la línea de comandos o a través de una interfaz gráfica.

Flujo de desarrollo

Directorio de trabajo - En este se encuentran los diferentes recursos que hacen parte del proyecto.
Área de ensayo - En esta ubicación se localizan los recursos a los cual Git les esta haciendo seguimiento, permitiendo su manipulación de manera previa al alojamiento en el repositorio.
Repositorio - Una vez se han realizado los cambios necesarios en el proyecto, estos son publicados y otros desarrolladores pueden visualizarlos.

Comandos básicos

Para iniciar con el seguimiento del proyecto mediante Git, es necesario por medio de la terminal navegar hasta la ruta donde se localiza el proyecto por medio del comando cd

$ cd Documents/proyect/

Una vez ubicados dentro del proyecto, por medio de la terminal se puede iniciar con la manipulación de los recursos que componen el mismo.

Inicializar un repositorio local de Git

$ git init

Añadir recursos al área de ensayo

$ git add <nombre del recurso>

Realizar un commit (captura) del avance del proyecto

$ git commit -m <mensaje descriptivo del commit>

Listar la informacion de los commits realizados en el proyecto

$ git log

Muestra el estado de los recursos que hacen parte del proyecto, permitiendo visualizando a cuales se les esta haciendo seguimiento y a cuales no

$ git status

Repositorio remoto

Los servidores remotos permiten alojar copias de un proyecto en servidores conectados a alguna red, tal es el caso de GitHub, la cual es una plataforma a la que se tiene acceso por medio de Internet.
Una vez realizado el registro en GitHub, es posible crear un repositorio que luego se conectará con el repositorio local de Git de la siguiente manera:

Vincular el repositorio local con el repositorio remoto de GitHub

$ git remote add origin <url>

Publicar los commits realizados en el repositorio remoto por primera vez

$ git push -u origin main

Luego de realizar la primera publicación, los siguientes commits serán alojados en el repositorio remoto con el siguiente comando

$ git push

Clonar un repositorio remoto en nuestro sistema

$ git clone <url>

Actualizar los cambios realizados desde el repositorio remoto con el repositorio local

$ git pull

Ramas

El seguimiento de un proyecto, así como las modificaciones realizadas sobre el mismo por defecto se alojan en una rama conocida como main.
Ya que Git es una herramienta que permite el trabajo colaborativo, es posible crear derivaciones de la rama principal del proyecto, sobre las cuales otros desarrolladores pueden generar sus propios avances, creando sus propios commits que posteriormente serán unidos a la rama principal.

Listar las ramas que hacen parte del proyecto

$ git branch

Crear una nueva rama

$ git branch <nombre de la rama>

Ubicarse sobre una rama en especifico

$ git checkout <nombre de la rama>

Cambiar el nombre de una rama

$ git branch -m <nuevo nombre de la rama>

$ Integrar 2 ramas (Para esto es necesario estar ubicado sobre la rama principal del proyecto)

$ git checkout main
$ git merge <nombre de la rama>

Eliminar una rama que ya a sido integrada con la principal

$ git branch -d <nombre de la rama>

Eliminar una rama que no se desea integrar con la principal

$ git branch -D <nombre de la rama>

Conceptos básicos de JavaScript

Martin Wilches — Sun, 30 Jan 2022 18:29:52 +0000

Lenguaje de programación interpretado, con el cual es posible añadir interactividad a un sitio web.
Por medio de JavaScript es posible manipular el comportamiento de los elementos definidos en la estructura HTML, haciendo uso de diversos eventos, como por ejemplo, pulsar una tecla o hacer click sobre determinado elemento, entre otros eventos existentes.

Ejecutar código JavaScript

Las instrucciones escritas haciendo uso del lenguaje JavaScript pueden ser ejecutadas directamente desde el navegador web o también desde la línea de comandos del sistema.
Una forma simple de ejecutar código es haciendo uso de la consola incluida dentro de cada navegador, a la cual se puede acceder mediante la secuencia de teclas Ctrl + Shift + I, para luego introducir una instrucción valida seguida de la tecla Enter.

console.log('Hola Mundo');

En el ejemplo anterior mediante la consola se imprime la cadena de caracteres 'Hola Mundo'.

Declaración de variables

Una variable se comporta como un contenedor de información, al cual es posible acceder mediante un identificador valido.

let edad = 10

En el ejemplo anterior se declara una variable mediante el uso de la palabra clave let, seguido del identificar de la variable al cual por medio del operador de asignación = se le asocia un valor.
Un identificador debe seguir una serie de reglas para poder ser definido:

No debe iniciar con un valor numérico.
No debe nombrarse igual que una palabra reservada del lenguaje.
No debe iniciar con un carácter especial a excepción de _.
No debe contener espacios en blanco.

ECMAScript 6 o ES6 es el estándar actual de JavaScript, y es quien define la forma correcta de escribir el código del lenguaje. Con esta actualización se han incluida nuevas características, entre las cuales se encuentra la forma correcta de definir variables, ya que a parte de la palabra reservada let, se incluye const, con lo cual es posible definir variables de tipo constante, cuyo valor no puede ser resignado.

const PI = 3.14
PI = 5.14 // TypeError: Assignment to constant variable

Tipos de datos

number - Valores numéricos.
strings - Cadenas de caracteres.
boolean - Valores lógicos compuestos por 2 estados, true o false.
undefined - Valor no definido de forma intencional.
null - Valor no definido.
object - Estructura de datos.
function - Método encargado de realizar una acción.

Operadores condicionales

> - Mayor que.
< - Menor que.
== - Igual.
=== - Estrictamente igual.
!= - Diferente.
!== - Estrictamente diferente.
>= - Mayor o igual que.
<= - Menor o igual que.

Operadores lógicos

Los operadores lógicos permiten comparar 2 valores y retornar un valor booleano como resultado de dicha evaluación.

&& - Se retorna true si cada valor evaluado es true, en caso contrario se retorna false.
|| - Se retorna true si al menos uno de los valores evaluado es true, en caso contrario se retorna false.
! - Invierte el resultado de una operación lógica, en caso de haber obtenido true el resultado se convierte a false, en caso de haber obtenido false el resultado se convierte a true.

Estructuras condicionales

Este tipo de estructura permite controlar la ejecución de una instrucción en caso de que una condición se cumpla o no.
JavaScript incluye una estructura condicional llamada if...else, la cual funciona de la siguiente manera:

const edad = 18
if (edad >= 18) {
  console.log('Usted es mayor de edad')
} else {
  console.log('Usted es menor de edad')
}

En el ejemplo anterior se realiza la primera impresión en caso de que la condición definida retorne true, en caso contrario se realiza la segunda impresión.

Estructuras repetitivas

En JavaScript existen diferentes maneras de ejecutar un bloque de código en repetidas ocasiones, entre las cuales destacan el uso de las siguientes:

Ciclo while

El bloque de código se repite mientras se cumpla una condición, además dentro del bloque de código es necesario definir una variable encarga de que la condición se deje de cumplir en algún momento y la repetición se detenga.

let n = 1
while (n <= 10) {
  console.log(n)
}

Ciclo for

Al igual que en el ejemplo anterior, la repetición del código se detendrá una vez la condición definida deje de cumplirse. Es común el uso del ciclo for para acceder a los valores contenidos en una estructura de datos.

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

Ciclo do...while

Esta estructura repetitiva a diferencia de las anteriores se ejecuta al menos una vez, aún cuando la condición definida no se este cumpliendo desde el primer momento.

let n = 11
do {
  console.log(n)
} while (n <= 10)

Conceptos básicos de CSS

Martin Wilches — Sun, 30 Jan 2022 18:08:28 +0000

Lenguaje de hojas de estilo en cascada que permite modificar la presentación en el navegador de un documento escrito en formato HTML.
La sintaxis principal del lenguaje CSS se basa en el uso de reglas de estilo, las cuales permiten seleccionar un elemento HTML para posteriormente modificar su presentación.

El siguiente es un ejemplo de una regla de estilo aplicada a un elemento HTML tipo <p>.

p {
  color: red;
}

p - Selector.
color - Propiedad.
red - Valor

Cada par propiedad-valor se debe separar dentro de la regla de estilo mediante el carácter ;.

CSS y HTML

Existen 3 formas de vincular código CSS con los elementos definidos en la estructura de un documento HTML.

Interno - Se incluye la regla de estilo directamente dentro del elemento HTML, haciendo uso del atributo style.

<p style="color: red;">

Embebido - Dentro de las etiquetas <head></head> del documento HTML, se incluye un elemento <style> cuyo contenido podrá incluir reglas de estilo CSS.

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Externo - Es la forma más común y recomendada de vincular código CSS y HTML, ya que permite mediante un documento con extensión .css, el cual contendrá únicamente código CSS, asociarlo a la estructura del sitio web de la siguiente manera.

<head>
  <link rel="stylesheet" href="/main.css">
</head>

Selector de clase e id

Los atributos class e id permiten seleccionar un elemento HTML para posteriormente estilizarlo de la siguiente manera:

<h1 class="estilo-1">Encabezado</h1>
<p class="estilo-1">Hola Mundo</p>

.estilo-1 {
  color: red;
}

Una misma clase puede ser asociada a multiples elementos HTML, de forma tal como en el ejemplo anterior, al tener ambos elementos el mismo valor de clase, el resultado será la aplicación de la misma regla de estilo.

La selección de elementos mediante id permite únicamente seleccionar un elemento a la vez, con lo cual multiples elementos no deben compartir el mismo valor de id.

<p id="estilo-2">

#estilo-2 {
  color: green;
}

Propiedades CSS

Las propiedades CSS son las encargadas de definir que estilo será el aplicado al elemento seleccionado, permitiendo modificar atributos tales como el color, tamaño, posicionamiento, etc.

Estilizar texto

font-family - Modifica el tipo de fuente.
font-size - Modifica el tamaño.
font-style - Modifica el aspecto.
font-weight - Modifica el peso de los caracteres.
color - Modifica el color.

Modelo de caja

La estructura HTML posiciona cada uno de sus elementos como si fueran cajas apiladas una sobre la otra.
Cada elemento contiene una serie de propiedades que pueden ser modificadas haciendo uso de CSS.

width - Ancho del elemento.
height - Altura del elemento.
padding - Cantidad de espacio existente entre el contenido del elemento y su borde.
border - Linea que rodea cada uno de los 4 lados del elemento.
margin - Cantidad de espacio existente entre cada uno de los elementos.

Conceptos básicos de HTML

Martin Wilches — Sun, 30 Jan 2022 16:38:05 +0000

Lenguaje de marcas de hipertexto que permite estructurar el contenido de un sitio web.
La estructura del contenido se realiza por medio del uso de elementos HTML.
Un elemento HTML se compone por una etiqueta de apertura, el contenido del elemento y una etiqueta de cierre, aunque algunos elementos HTML únicamente cuentan solo con etiqueta de apertura.

Elemento HTML

El siguiente es un ejemplo de un elemento HTML usado para definir un párrafo dentro de la estructura del sitio web.

<p>Hola Mundo</p>

<p> - Etiqueta de apertura.
Hola Mundo - Contenido del elemento.
</p> - Etiqueta de cierre.

Otro tipo de elemento común es aquel que solo cuenta con etiqueta de apertura, como es el caso del elemento HTML que permite forzar un salto de línea del contenido, como por ejemplo al querer iniciar un texto en una nueva línea de la página.

<br>

Estructura HTML básica

Un documento HTML contiene texto plano que se almacena en un archivo con extensión .html. Este texto contiene la sintaxis del lenguaje de marcado, el cual se estructura mediante ciertos elementos HTML principales, los cuales tienen una función predefinida que permiten la inclusión de nuevos elementos

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  ...
</body

<!DOCTYPE html> - Este elemento debe ser definido en la primera línea de código del documento, y es usado por el navegador para identificar la versión del código HTML a renderizar, en este caso HTML5.
<html> - Define la raíz del documento, encapsulando de esta manera el resto de elementos encargados de estructurar el sitio web.
<head> - El contenido de este elemento no es visible en la ventana gráfica del navegador, con lo cual su utilidad principal se basa en añadir información adicional del sitio web.
<body> - Todos los elementos que se incluyan como su contenido, serán visibles en la ventana gráfica del navegador.

Elementos HTML básicos

Los siguientes son algunos elementos comúnmente encontrados en la estructura básica de un documento HTML:

<h1> - Encabezado principal del sitio web. Existen en total 6 niveles de encabezados HTML, siendo <h1> el encabezado de mayor relevancia del sitio (solo debe existir uno en la estructura) y <h6> el de menor relevancia.

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

 - Los comentarios permiten documentar el contenido del archivo .html, además de que dichos comentarios no serán renderizados en la ventana gráfica del navegador.
<img> - Inclusión de imágenes en la estructura del sitio web.
<a> - Hiperenlace que permite acceder a recursos web alojados en servidores externos al sitio actual, o a una ubicación especifica dentro del mismo sitio web actual.
<ul> - Lista cuyos elementos no tienen un orden específico.
<ol> - A diferencia de la anterior, el orden de los elementos listados si tiene relevancia.

Atributos

Todos los elementos HTML pueden incluir atributos, cuya función principal es la de añadir información adicional del mismo elemento.
En el siguiente ejemplo al elemento <img> se le incluye un atributo llamado src, cuyo valor servirá como ruta de alojamiento de la imagen a renderizar.

<img src="./imagenes/imagen1.png" alt="Descripcion de la imagen">

Los atributos son definidos siempre dentro de la etiqueta de apertura, además de que se pueden incluir tantos atributos como sea necesario, como en el ejemplo anterior donde se incluye un segundo atributo llamado alt, cuyo valor representa la descripción de la imagen, la cual será renderizada por el navegador, en caso que dicho archivo multimedia no pueda ser cargado.