DEV Community: amargopastor

Introducción a JS

amargopastor — Mon, 04 Apr 2022 10:13:50 +0000

🚀 Intro JS

Hace un tiempo re-descubrí un concepto muy curioso de la física que mi cerebro había olvidado: el peso de una persona (y, por extensión , cualquier peso) no es más que el producto de tu masa (que es un valor constante) por la gravedad del planeta donde te encuentres. Es decir, que tu masa siempre será la misma pero, dependiendo de en que punto del universo te encuentres, tu peso puede variar. Además: la unidad de medida correcta para tu peso son los Newtowns, no el Kilogramo.

Algunos pensaréis "¡eso es más que evidente!". Otros quedarán maravillados por este dato. Y a un tercer grupo les dará fuertemente igual. En cualquiera de los casos a mí me resultó muy útil porque este hecho será el Macguffin que guiará la introducción a JS que me había propuesto redactar. De este modo, todo nuestro ejemplo se basará en la siguiente información:

// La masa es constante en todos los planetas, no así el peso que dependerá de la gravedad.

// Peso (N) = Masa (kg) x Gravedad

// Gravedad:
// Mercurio: 3,70 m/s(2)
// Venus: 8,87 m/s(2)
// Marte: 3,71 m/s(2)
// Júpiter: 23,12 m/s(2)
// Saturno: 8,96 m/s(2)
// Urano: 8,69 m/s(2)
// Neptuno: 11 m/s(2)
// Plutón: 0,81 m/s(2)

Para cerrar, subimos el nivel: dejamos desarrollado una pequeña aplicación para calcular tu peso en los distintos planetas del Sistema Solar. Todas las líneas de código adjuntan un comentario explicando qué está ocurriendo así como enlaces en la parte final con toda la documentación oficial de las herramientas empleadas.

Así que toma asiento y prepárate para un pequeño viaje por nuestro Sistema Solar y los principios básicos de Javascript.

Javascript
Añadir JS
Console.log()
Herramientas de desarrollo
Variables
Expresiones lógicas, boleans, if & else
Array + push() + pop()
Comentarios
Funciones
Bucle for
Documentación

1.Javascript

JavaScript es uno de los lenguajes de programación más empleados en el desarrollo web, móvil, juegos, etc. Abreviado comúnmente como JS se trata de un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

¿Qué significa todo esto? ¡Pues muchas cosas! Pero no te preocupes. Esta es sólo una definición estándar que iremos entendiendo poco a poco. Lo importante viene ahora.

Sobre JS hay mucho que leer y mucho que aprender, pero es ideal si estás empezando en el mundo de la programación por una sencilla razón: se trata de un lenguaje de alto nivel. Es decir, su sintaxis es muy similar a la que usamos las personas por lo que en muchas ocasiones tendrás la sensación de estar escribiendo comandos en inglés para comunicarte con tu ordenador.

La programación es un proceso de que diseña, ordena e implementa un algoritmo a través de un lenguaje de programación.

Algoritmo: Secuencia de pasos ordenados que solucionan un problema.

Áreas de programación:

Desarrollo Web
Videojuegos
Inteligencia Artificial
Desarrollo Móvil
Big Data
Robótica
(...)

Lenguaje de programamción: Sistema estructurado de comunicación, conformado por conjunto de palabras claves, símbolos y reglas sintácticas y semánticas que permiten un entendimiento entre el programador y la máquina.

Aprovecho para recomendarte que, para mantenerte al día de todo lo que se cuece en el mundo del JS, te dejes caer de vez en cuando por stateofjs y ecma-international.org.

2.Añadir JS

Añadir JS a tu archivo de trabajo es fundamental. Supongamos, por el bien de este caso, vamos a ejecutar un archivo html en nuestro navegador que se acabará conviertiendo en una novísima página web con un conversor de peso espacial.

Incluir JS en HTML:

<body>
    <script>
        console.log('hola mundo');
    </script>
</body>

Vincular un archivo script.js justo antes del cierre del cuerpo:

<body>
    <h1>Hello world</h1>
    <script src="./src/script.js"></script>
</body>

3.Console.log()

La función console.log() indica al programa que debe imprimir un texto por consola, también llamada salida de programa.

console.log('Hello world');

4.Herramientas de desarrollo

JavaScript se ejecuta en el lado del cliente de la web. Esto quiere decir que tendremos que tener siempre desplegadas nuestras chrome dev tools. Especialmente útil la pestaña de Console:

5.Variables

Una variable no es más que un espacio de memoria reservado dónde almacenaremos una determina información de manera temporal. Observa como con las siguientes variables de tipo int (numéricas) podemos ejecutar operaciones matemáticas:

let mi_masa = 70;
let Tierra = 1;
let Marte = 3.71;
let Jupiter = 23.12;

console.log('Mi peso en la Tierra es:', mi_masa * Tierra);
console.log('Mi peso en la Marte es:', mi_masa * Marte);
console.log('Mi peso en la jupiter es:', mi_masa * Jupiter);

// intro es una variable de tipo string
let intro = 'Mi nombre es Marcos y en este planeta peso ';
console.log(typeof intro);

// Añadimos el peso de nuestro traje espacial
let space_suit = 0.2;

let data = mi_masa - mi_masa * Tierra * space_suit;
console.log(typeof data);

console.log(intro + data);

Dos variables no pueden tener el mismo nombre: si es el caso tendremos un error por pantalla:

// Errores
let Tierra = 1.87;
let Tierra = 2.14;
console.log(mi_masa - mi_masa * Tierra * space_suit);
// Uncaught SyntaxError: Identifier 'Tierra' has already been declared

6.Expresiones lógicas, boleans, if & else

Los condicionales (o puertas lógicas) son herramientas del lenguaje de programación que nos permiten controlar el flujo de comportamiento de nuestro código:

// oxigeno es una variable de tipo booleano
let oxigeno = true;

// si la varibla es true o false, variará el resultado mostrado por la pantalla
if (oxigeno) {
    console.log('Puedo respirar!');
} else {
    console.log('Ayudagghghghg!');
}

oxigeno = false;
if (oxigeno || space_suit) {
    console.log('Puedo respirar y caminar!');
} else {
    console.log('Ayudagghghghg!');
}

if (space_suit <= 0.2) {
    console.log('Todo controlado');
} else {
    console.log('No levanto cabeza!');
}

// La palabra reservada typeof nos devuelve el tipo de variable: string, boolean, array, int...
console.log(typeof space_suit);
console.log(typeof data);
console.log(typeof intro);
console.log(typeof oxigeno);

7.Array + push() + pop()

Una lista o array es una secuencia ordenada de datos. Estos datos pueden ser de x tipos. El orden de los elementos en un array es importante.

Métodos de los arrays.

// dos formas distintas de declarar un array
let listado = [];
let listado2 = new Array();

let listadoPlanetas = [
    'Mercurio',
    'Venus',
    'Tierra',
    'Marte',
    'Júpiter',
    'Saturno',
    'Urano',
    'Neptuno',
    'Plutón',
];

console.log('Número total de planetas:', listadoPlanetas.length);
console.log('Planetas:', listadoPlanetas);
console.log('Primer planeta de la lista:', listadoPlanetas[0]);
console.log('Tercer planeta de la lista:', listadoPlanetas[2]);

Observa como la posición 0 cuenta a la hora de invocar los elementos de un array

8.Comentarios

Indican al navegador que texto debe ser obviado.

9.Funciones

Una función es una sintaxis que usamos para encapsular un programa (entran unos datos y salen otros datos).function es una palabra reservada de javascript. Ventajas:

Reutilizar código
Abstracción

console.log(
    'Mi nombre es Marcos y estoy de visita en el planeta',
    listadoPlanetas[0]
);
console.log(
    'Mi nombre es Marcos y estoy de visita en el planeta',
    listadoPlanetas[1]
);
console.log(
    'Mi nombre es Marcos y estoy de visita en el planeta',
    listadoPlanetas[2]
);

// Cuando definimos una función podemos pasarle parámetros con los que operar:
function reporte(i) {
    console.log(i);
    console.log(
        'Mi nombre es Marcos y estoy de visita en el planeta',
        listadoPlanetas[i]
    );
}

// Llamada a la función declarada con argumentos para que opere:
reporte(8);

10.Bucle for

Un bucle for es una herramienta que nos permite repetir una misma instrucción un número determinado de veces.

El bucle for se compone de 3 parámetros: instancia e inicialización de variable, condición que se comprueba en cada bluque y acción que se ejecuta al acabar el bucle (i++)

for (let i = 0; i < 9; i++) {
    console.log(i);
    reporte(i);
}

function reporte2(i) {
    if (i >= 0 && i < 9) {
        console.log(
            'Mi nombre es Marcos y estoy de visita en el planeta',
            listadoPlanetas[i]
        );
    } else {
        console.log('Usted ha abandonado el Sitema Solar');
    }
}

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

Documentación

An introduction for new programmers

Noticias JS

Entornos de desarrollo

Tools

checkVarNames

Special thanks to

⬆ back to top

Mi primer portfolio desde cero

amargopastor — Thu, 24 Jun 2021 10:11:51 +0000

Introducción

Sea cual sea tu rama profesional, en este artículo aprenderás a crear tu propio portfolio de manera sencilla y rápida.

En tu nuevo portfolio podrás compartir tus trabajos más destacados, una trayectoria profesional o algunas de tus mejores creatividades. Además, te enseño a publiar el resultado final en la web para que esté accesible desde cualquier parte.

Para todo ello sólo necesitarás conocimientos básicos de HTML, CSS y una cuenta en www.github.com.

About

Con conocimientos básicos de HTML y CSS hemos aprovechados componentes externos para, en muy poco tiempo, tener una página moderna, actualizada y responsive. Además, con un poco de JS hemos añadido alguna librería extra que dote a nuestro proyecto de un toque de único.

Como broche final, publicamos nuestro proyecto en GITHUB PAGES para poder compartirlo con todo el mundo: ¡Hecha tu mismo vistazo al resultado final!

¡Vamos allá!

Index

Why Bootstrap?
We have used
Getting started
Code along
GitHub pages
Results
Resources
Special thanks to

1.¿Why Bootstrap?

Si tuvieramos que definir Bootstrap de una manera sencilla diríamos que se trata de una librería de maquetación web donde muchas de las decisiones de estilo y ejecución ya están tomadas.

Al ser un recurso de código abierto (es decir, cualquiera puede utilizarlo de manera gratuita) es ideal para nuestros primeros pasos en el mundo del diseño.

Una de sus principales ventajas es el resize: el contenido mostrado de la página se adapta según el tamaño de la pantalla donde se consume. Esto quiere decir que nuestro portfolio tendrá siempre una presencia óptima lo visualicemos desde ordenador, tablet o móvil:

Ordenador:

Móvil:

Dado que gran parte del consumo de internet se produce desde dispositivos móviles, es importante vigilar que nuestro diseño se adapte correctamente. Por suerte para nosotros, los componentes de Bootstrap ya vienen preconfigurados para tal fin. No obstante, no dejes de revisar las herramientas de desarrollador en tu navegador para comprobar distintos resizes de tu página.

2.We have used

Aquí te dejamos una pequeña lista con los recursos que hemos empleado. Verás que todas nuestras herramientas y fuentes son de acceso libre y gratuito:

Visual Studio Code
Git
GitHub
Conocimientos básicos de HTML & CSS
Bootstrap
Google fonts
Algunas imágenes de UNSPLASH
AOS

3.Getting started

Puedes trabajar de la manera que te resulte más cómodo (o estés más habituad@), pero nosotros te recomendamos los siguientes pasos:

Instala GITen tu ordenador.
Inicia sesión con tu cuenta en la página GitHub.
Inicia un nuevo repositorio en GitHub y vincúlalo con tu carpeta local.
Abre Visual Studio Code o cualquier otro editor de código.
¡A programar!

4.Code along

4.1.Basic operative template

Comenzamos creando una plantilla básica de HTML y un fichero css para nuestros estilos personalizados. Echa un vistazo a los comentarios en el código y revisa que al abrir tu archivo en el navegador se ve todo correctamente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Vinculo mi hoja styles.css -->
    <link rel="stylesheet" href="./styles.css" />
    <!-- Personalizo el title de mi página -->
    <title>My first portfolio</title>
    <!-- Añado un pequeño icono a la página desde mi carpeta de imágenes -->
    <link rel="icon" type="image/png" href="./images/githubLogo.jpg" />
  </head>
  <body>
    <div id="boton-principal">
      <p>Hello world</p>
    </div>
  </body>
</html>

p {
  color: "red";
}

Vamos ahora a vincular Bootstrap. Para poder utilizarlo, copia y pega en el header de tu index los siguientes enlaces:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
  crossorigin="anonymous"
></script>

Observa como hemos incluído, además, un enlace de JavaScript para los componentes que necesitan de funcionalidad extra.

Ya tenemos listo el proyecto con todo lo necesario para que funcione. ¡Enhorabuena!

4.2.Navbar

Vamos a incorporar una barra de navegación superior o navbar. Nosotros hemos escogido el modelo básico y hemos personalizado su estructura añadiendo un class="container" y una pequeña imagen con los estilos en línea:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img
        src="./images/githubLogo.jpg"
        alt=""
        width="25"
        class="d-inline-block align-text-top"
      />
      @amargopastor
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Intro</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mis proyectos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4.3.Background-image

Vamos a incluir ahora una imagen que ocupe toda la altura disponible de la pantalla del navegador, con un efecto blur y un texto centrado que puede contener nuestro nombre o alguna información clave (espera a ver el resultado final!).

Incluye en tu html.index:

<div class="bg home"></div>
<div class="bg-text container">
  <h1>CODE. ENJOY. REPEAT.</h1>
</div>

Y algunos estilos en el style.css:

body {
  margin: 0; /*Elimnina el margin que le añade por defecto el navegador a nuestro body*/
  background: lightgray;
}
/* Ver apartado 4.5.Variables css */
:root {
  --main-color: white;
}
.bg {
  text-align: center;
  padding: 10px;
  height: 100vh; /* La caja ocupará el 100% del alto del navegador*/
  background-size: cover; /* Ajusta la proporoción de la imagen a la caja*/
  background-position: center;
  box-sizing: border-box; /* Definimos si la altura de la caja será hasta el borde. Es decir, si habrá padding o no*/

  /* -- modo flexbox -- */
  display: flex; /*Las cajas de dentro se posicionarán según flexbox*/
  flex-direction: column;
  justify-content: start;
  align-items: center;
  /* -- modo flexbox -- */

  /* -- blur efect -- */
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.bg-text {
  color: var(--main-color);
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
  /* Ver apartado 4.4.Google fonts */
  font-family: RubikMonoOne;
}
/* El background es una imagen previamente descargada en nuestra carpeta images del proyecto */
.home {
  background-image: url("./images/bgImage.jpg");
}

4.4.Google fonts

Podemos añadir tantos recursos externos a nuestro proyecto como queramos. Un ejemplo de ello son los tipos de letra, comúnmente conocidos como fuentes.

Para ello simplemente debemos acudir a Google fonts y buscar el tipo de letra que mejor se ajuste a nuestro proyecto.

Para vincularlo, haz click en + Select this style y copia y pega los enlaces mostrados nuevamente en el header de tu index.html:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap"
  rel="stylesheet"
/>

Observa como, para añadir las nuevas fuentes, simplemente debemos especificar la propiedad font-family en el elemento:

.bg-text {
  /* (...) */
  font-family: RubikMonoOne;
}

4.5.Variables en CSS

En la cabecera de nuestro css hemos declarado una sintaxis expecial para establecer una nueva varible en el documento:

:root {
  --main-color: white;
}

Esto quiere decir que podemos añadir un valor a un estilo determinado a lo largo de todo el documento y reutilizarlo las veces que queramos:

.bg-text {
  color: var(--main-color);
  /* (...) */
}

Esta pequeña sintaxis es de gran utilidad ya que nos permite cambiar valores compartidos por varios elementos desde un mismo punto: si el día de mañana quisiéramos modificar el color de todos nuestros textos, por ejemplo, cambiaremos la variable y aplicará a todos los componentes que la empleen. ¡Así de rápido!

4.6.Sections card

Vamos a añadir ahora un section inspirado en las cards de Bootstrap:

<section class="container custom-section">
  <div class="row">
    <div
      class="col-md"
      data-aos="fade-up"
      data-aos-offset="400"
      data-aos-duration="500"
    >
      <img class="img-fluid" src="./images/cardImageLeft.jpg" alt="..." />
    </div>
    <div class="cb col-md">
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
        dolor ac mollis eleifend. Ut lobortis orci nec libero gravida, eu
        eleifend mi lacinia. Aenean ultrices hendrerit sem sit amet tincidunt.
        Phasellus sodales facilisis ante, quis egestas sapien convallis sit
        amet. Nam sed nisi scelerisque, luctus massa ut, finibus lorem.
      </p>
      <a href="https:/github.com/amargopastor"
        ><i class="fa fa-github"></i> Ver en github</a
      >
    </div>
  </div>
</section>

.custom-section {
  padding-top: 50px;
}
.cb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.card-text {
  font-family: "New Tegomin";
}

Analicemos con detalle el siguiente fragmento:

<a target="_blank" href="https://github.com/amargopastor"
  ><i class="fa fa-github"> </i> Ver github</a
>

La clase fa fa-github añadirá un pequeño icono a nuestro enlace si añadimos las fuentes correspondientes al header, como hemos hecho con anterioridad:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

Además, el atributo target="_blank" le indicará a la página dónde abrir el recurso. En este caso, en una nueva pestaña del navegador.

4.7.Librería AOS

Habrás observado en el fragmento de código anterior unas clases especiales a las cuales no hicimos referencia:

<div
  class="col-md"
  data-aos="fade-up"
  data-aos-offset="400"
  data-aos-duration="500"
></div>

Gracias a ellas indicamos al elemento que debe de aplicar un efecto concreto de la librería AOS. Como siempre, para aplicar recursos externos debemos incluir el enlace en el header de nuestro index.html:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Y además, para este caso concreto añadir un pequeño script justo antes del cierre de la etiqueta </body>:

<body>
  <!-- (...) -->
  <script>
    AOS.init();
  </script>
</body>

Comprueba tu mismo el efecto de las section cuando hacemos scroll aquí.

4.8.Footer

En último lugar, un pequeño footer con alguna clase personalizada, iconos y de nuevo target="_blank":

<footer>
  <div class="container footer-elements">
    <div class="container">
      <p>
        &copy; 2021 CORE.CODE.SCHOOL
        <!-- <span class="badge bg-secondary">Hola</span> -->
      </p>
    </div>
    <div class="container rrss">
      <a
        href="https://www.linkedin.com/in/marcos-iñigo-8a68438b"
        class="fa fa-linkedin"
        target="_blank"
      ></a>
      <a
        href="https://github.com/amargopastor"
        class="fa fa-github"
        target="_blank"
      ></a>
    </div>
  </div>
</footer>

footer {
  background: black;
  padding: 20px 0;
  color: white;
  margin-top: 40px;
}

.footer-elements {
  display: flex;
}

.rrss > * {
  color: white;
}

5.GitHub pages

Ahora viene la mejor parte: publicar nuestro trabajo :)

Una vez tengamos nuestro portfolio listo, debemos subir los cambios a GitHub. En el repositorio de destino, ve a la sección de settings y haz click en pages:

En Source, elije la rama desde la que quieres publicar (por defecto tendrás todo en la rama master o main):

¡Y listo! Como dice GitHub, your site is published at (https://...):

6.Results

7.Resources

8.Special thanks to

CORE CODE SCHOOL
Marc Pomar
A todos los asistentes al directo con los que compartimos una tarde de código :)