DEV Community: Fernando

Algoritmos y control de flujo

Fernando — Tue, 24 Sep 2024 15:40:21 +0000

Algoritmo en programación, es un conjunto de procedimientos o funciones que se necesitan para realizar cierta operación o acción.

Estructura Condicional

Una ESTRUCTURA CONDICIONAL O DE CONTROL DE FLUJO en la programación es una estructura que permite al programa tomar decisiones y ejecutar diferentes instrucciones en función de una condición. Consiste en evaluar una expresión lógica y, dependiendo del resultado de esa evaluación, ejecutar un bloque de código específico.

En términos más técnicos, un CONDICIONAL se
compone de una expresión lógica que puede ser
verdadera o falsa, y uno o más bloques de código que se ejecutan si la expresión es verdadera o falsa. El bloque de código que se ejecuta se delimita mediante llaves {} y puede contener una o más instrucciones.

Valores booleanos

Los VALORES BOOLEANOS en JavaScript son un tipo de dato que puede tener dos posibles valores: true (verdadero) y false (falso). Estos valores son utilizados
para representar el resultado de una condición o una expresión lógica.

Operadores de comparación


// ==  Igualdad(valor)
// === Igualdad estricta(compara valor y tipo de dato)
//  <  Menor que
//  > Mayor que
// <= Menor o igual que
// >= Mayor o igual que
// != diferente que (valor)
// !== desigualdad estricta (valor y tipo de dato)
// && Operador and (y)
// || Operador or (o)
// ! Operador not (no)

Estructura inicial


if (condicion) {
  // Bloque de código que se ejecuta si la condición es
  //verdadera es decir TRUE
} else {
  // Bloque de código que se ejecuta si la condición es
  //falsa es decir FALSE
}


// si - condicion

if (true) {

// bloque de código a ejecutar
    console.log("vas a ver este mensaje");

}

Ejemplo condicional simple


let edad = 15;

if (edad >= 18) {
  console.log("Eres mayor de edad. Puedes ingresar al sitio.");
} else {
  console.log("Eres menor de edad. No puedes ingresar al sitio.");
}

Ejemplo Igualdad estricta

let numero = 5;

if (numero === 5) {
  console.log("El número es igual a 5");
} else {
  console.log("El número NO es igual a 5");
}

//NOTE:Aqui se evalua tanto el valor como el tipo de dato

Ejemplo1


const tuEdad1 = prompt("Por favór ingresa tu edad");
console.log(typeof tuEdad1);

if (tuEdad1 === number) {
  console.log("Tu edad es " + tuEdad1);
} else {
  console.log("debes ingresar un dato valido");
}

consideracion

Aquí, number no es una cadena válida ni una variable, ni un tipo de dato devuelto por typeof, que puedas comparar directamente. En JavaScript, si deseas comparar el tipo de la variable tuEdad, primero deberías usar typeof, pero recuerda que la función prompt() siempre devuelve un string.

Ejemplo 2


const tuEdad2 = prompt("Por favór ingresa tu edad");
console.log("El valor ingresado es un", typeof tuEdad2);

if (typeof tuEdad2 === "number") {
  console.log("Tu edad es " + tuEdad2);
} else {
  console.log("debes ingresar un dato valido");
}

consideración

al agregar el typeOf efectivamente se evalua correctamente el tipo de dato prompt devuelve un string y no coincide con number.

Cuando el usuario ingresa un valor:
prompt() devuelve una cadena de texto (string).

Cuando el usuario deja el campo vacío y presiona "Aceptar":
prompt() devuelve una cadena vacía ("").

Cuando el usuario presiona "Cancelar":
prompt() devuelve null.

/* al agregar el typeOf efectivamente se evalua correctamente
el tipo de dato prompt devuelve un string

Ejemplo 3


const tuEdad3 = parseInt(prompt("Por favór ingresa tu edad"));
console.log("El valor ingresado es un", typeof tuEdad3);

if (typeof tuEdad3 === "number") {
  console.log("Tu edad es " + tuEdad3);
} else {
  console.log("debes ingresar un dato valido");
}

consideración

Aqui el usuario ingresa un string , parseInt intenta parsearlo y al encontrarse con string arroja esto no es numero.

Ejemplo 4


const tuEdad4 = parseInt(prompt("Por favór ingresa tu edad"));

if (tuEdad4 === null) {
  console.log("Debes ingresar al menos un dato");
} else if (isNaN(tuEdad4)) {
  console.log("Debes ingresar un dato valido");
} else {
  console.log("tu edad es " + tuEdad4);
}

consideración

Nunca se entra en la primera condicion ya que parseInt va a transformar null en un NaN por lo tanto siempre se entra o en la segunda o en la tercera

2 soluciones posibles


const tuEdad5 = prompt("Por favor ingresa tu edad");
if (tuEdad5 === null || tuEdad5 === "") {
  console.log("Debes ingresar un dato");
} else if (isNaN(parseInt(tuEdad5))) {
  console.log("Debes ingresar un dato válido");
} else {
  console.log("Tu edad es " + parseInt(tuEdad5));
}

consideración

Verificamos si el usuario presionó "Cancelar"
Verificamos si la entrada no se puede convertir a un número
Si es un número válido


// isNaN(123);        // false
// isNaN("123");      // false
// isNaN("123abc");   // true
// isNaN(true);       // false
// isNaN(false);      // false
// isNaN("hello");    // true
// isNaN({});         // true

const tuEdad5 = prompt("Por favor ingresa tu edad");

if (!tuEdad5) {
  // Si el valor es null (cancelar) o está vacío
  console.log("Debes ingresar un dato");
} else if (isNaN(Number(tuEdad5)) || Number(tuEdad5) <= 0) {
  // Si no es un número o si el número es menor o igual a 0
  console.log("Debes ingresar un número válido");
} else {
  // Si es un número válido
  console.log("Tu edad es " + Number(tuEdad5));
}

Ejemplo 6


let nombre = prompt("Por favor ingresa tu Nombre");
console.log(typeof nombre);

if (nombre === "") {
  console.log("porfavor ingresa un nombre ");
} else {
  console.log("tu nombre es " + nombre);
}

consideración

al ingresar un numero aun se puede emitir el mensaje

Ejemplo 7


let nombre1 = prompt("Por favor ingresa tu Nombre");
console.log(typeof nombre1);

if (nombre1 === "" || !isNaN(nombre1)) {
  console.log("porfavor ingresa un nombre valido");
} else {
  console.log("tu nombre es " + nombre1);
}

consideración

!isNaN(nombre1): Comprueba si el valor ingresado es un número. La función isNaN() devuelve true si el valor no es un número por lo tanto, al usar !isNaN(nombre), estamos verificando si nombre `ES un número.

`javascript

// isNaN(123); // false
// isNaN("123"); // false
// isNaN("123abc"); // true
// isNaN(true); // false
// isNaN(false); // false
// isNaN("hello"); // true
// isNaN({}); // true

if else if

`javascript
let nombre2 = prompt("Por favor ingresa tu Nombre");

// Validar el nombre ingresado
if (nombre2 === "") {
console.log("Debes ingresar un nombre válido.");
} else if (!isNaN(nombre2)) {
console.log("El nombre no puede ser un número.");
} else if (nombre2.length < 3) {
console.log("El nombre debe tener al menos 3 caracteres.");
} else {
console.log("Tu nombre es " + nombre2 + ".");
}
`
Es importante tener en cuenta que isNaN() intenta realizar la conversión a número antes de realizar la verificación, lo que puede llevar a resultados inesperados. En ciertos casos. Por ejemplo, isNaN("123abc")devolverá true porque no se puede convertir la cadena en un número válido.

Ejemplo con estaciones del año

`javascript
let mes = prompt("indica el numero de mes en el que te encuentras");
let estacion;

if (mes === 12 || mes === 1 || mes === 2) {
estacion = "verano";
} else if (mes >= 3 && mes <= 5) {
estacion = "otoño";
} else if (mes >= 6 && mes <= 8) {
estacion = "invierno";
} else {
estacion = "primavera";
}

console.log("La estación correspondiente al mes", mes, "es", estación);
`

Pequeño simulador interactivo en JavaScript

Fernando — Wed, 11 Sep 2024 21:50:04 +0000

Mediante un simulador interactivo podremos imitar algunas operaciones que se realizan en la vida cotidiana , este apartado comprende una inicialización a lo que se conoce como algoritmos.

Herramientas a utilizar para la construcción:
1) function( ) { … }
2) prompt (" … ")
3) for (inicio; condición; contador) { … }
4) if ( condición ) { … } else { … }
5) alert (" … ")
6) parseInt( ), parseFloat( ), toFixed( ), isNaN( )

Paso1:

Declaro una función la cual debe llevar un nombre descriptivo de lo que la misma va a realizar. El nombre puede ser el que usted elija.

function calcularCostoTotal(){...}

Paso 2:

Dentro de la funcion pido al usuario que ingrese una cantidad de productos mediante El método prompt() y la almaceno en una variable. Teniendo en cuenta que el método prompt() siempre devuelve una cadena de texto realizo el parseo de los datos mediante otro método, en este caso parseInt() para transformar lo ingresado en entero.

Si quieres indagar más acerca del método parseInt() puedes hacerlo en el siguiente enlace:

parseInt

const cantidadDeProductos = parseInt(
    prompt("Ingrese la cantidad de productos:")
  );

Paso 3:

Dentro de la función defino momentáneamente una variable que almacene el costo total y la inicializo con un valor de 0.

let costoTotal = 0;

Paso 4:

Recorro cada una de las posiciones definidas en la variable "cantidaDeProductos" a través de un ciclo for.
El ciclo for tendrá una variable i que hará de puntero y no dejará de circular hasta que la variable i sea <= a la cantidad de productos que el usuario haya establecido, mientras tanto incrementara de uno en uno.
Dentro del ciclo for A cada uno de los productos les defino un precio pidiéndole al usuario que lo ingrese mediante un prompt( ) y dicho precio lo guardo en una variable con un nombre descriptivo por ejemplo "precioProducto".

for (let i = 1; i <= cantidadDeProductos; i++) {
    const precioProducto = parseFloat(
      prompt(`Ingrese el precio del producto ${i}:`)
    );

Paso 5:

Dentro del ciclo for realizo una validación para comprobar que el usuario ingrese un número concreto como precio del producto, y que dicho número no sea 0.
Para la validación estoy usando el metodo isNaN() puedes investigar mas en el siguiente enlace:

isNaN

if (!isNaN(precioProducto) && precioProducto > 0) {
      costoTotal += precioProducto;

Si lo que esta dentro de la condición del if() es valido, a la variable "costoTotal" le asigno y adiciono en el mismo acto el valor de la variable "precioProducto".
De lo contrario le digo que el precio es invalido que lo ingrese nuevamente.

} else {
      alert("El precio ingresado es inválido. Inténtelo nuevamente.");
      i--;

finalmente decremento i de uno en uno .

Paso 6:

Mediante el método alert( ) muestro por pantalla el costo total de los productos ingresados por el usuario.

alert(`El costo total de los productos es: $${costoTotal.toFixed(2)}`);
}

Para convertir los decimales y establecer un parámetro se utiliza el método toFixed( ). Puedes leer mas acerca del mismo en el siguiente enlace:

tofixed()

Paso 7:

Finalmente llamo a la función para que la misma se ejecute.

calcularCostoTotal();

El ejemplo anterior solo muestra algunas de las posibles funcionalidades que se podrían llevar a cabo mediante el uso de herramientas sencillas que forman parte del lenguaje javascript como las funciones integradas prompt(), alert() y console.log() y algunos métodos como parseFloat( ), toFixed(), isNaN( ).


//FUNCTION:
function calcularCostoTotal() {
  const cantidadDeProductos = parseInt(
    prompt("Ingrese la cantidad de productos:")
  );

  let costoTotal = 0;
  //FOR:
  for (let i = 1; i <= cantidadDeProductos; i++) {
    const precioProducto = parseFloat(
      prompt(`Ingrese el precio del producto ${i}:`)
    );
    //IF-ELSE:
    if (!isNaN(precioProducto) && precioProducto > 0) {
      costoTotal += precioProducto;
    } else {
      alert("El precio ingresado es inválido. Inténtelo nuevamente.");
      i--;
    }
  }
  alert(`El costo total de los productos es: $${costoTotal.toFixed(2)}`);
}

calcularCostoTotal();

Grid CSS

Fernando — Tue, 16 Jul 2024 14:45:21 +0000

El Grid Layout de CSS es una poderosa herramienta para crear diseños bidimensionales en la web. A continuación, se presentan las propiedades correspondientes al contenedor y los elementos hijos, junto con ejemplos.

Propiedades del Contenedor (Grid Container)

display: grid

Define un elemento como contenedor de grid.
Ejemplo:

   .grid-container {
    display: grid;
}

grid-template-columns

Define las columnas del grid.
Ejemplo:


.grid-container {
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
}

grid-template-rows

Define las filas del grid.
Ejemplo:


.grid-container {
    grid-template-rows: 100px 200px; /* Dos filas, la primera de 100px y la segunda de 200px */
}

gap

Define el espacio entre las filas y columnas.
Ejemplo:


.grid-container {
    gap: 10px; /* Espacio de 10px entre filas y columnas */
}

grid-template-areas

Define áreas del grid.
Ejemplo:


.grid-container {
    grid-template-areas:
      'header header header'
      'main main sidebar'
      'footer footer footer';
}

grid-auto-rows

Define el tamaño de las filas implícitas (aquellas no definidas explícitamente en grid-template-rows).
Ejemplo:

.grid-container {
    grid-auto-rows: 150px; /* Todas las filas implícitas tendrán una altura de 150px */
}

grid-auto-columns

Define el tamaño de las columnas implícitas.
Ejemplo:


.grid-container {
    grid-auto-columns: 150px; /* Todas las columnas implícitas tendrán un ancho de 150px */
}

grid-auto-flow

Controla cómo se colocan automáticamente los elementos en el grid.
- Valores posibles: row, column, row dense, column dense.
Ejemplo:


.grid-container {
    grid-auto-flow: row; /* Los elementos se colocarán en filas */
}

justify-items

Alinea el contenido de los elementos hijos a lo largo del eje horizontal.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-container {
    justify-items: center; /* Alinea el contenido de los elementos hijos en el centro horizontalmente */
}

align-items

Alinea el contenido de los elementos hijos a lo largo del eje vertical.
Valores posibles: start, end, center, stretch.
Ejemplo:

.grid-container {
    align-items: center; /* Alinea el contenido de los elementos hijos en el centro verticalmente */
}

justify-content

Alinea la totalidad del grid a lo largo del eje horizontal.
Valores posibles: start, end, center, space-between, space-around, space-evenly.
Ejemplo:

.grid-container {
    justify-content: space-between; /* Distribuye el espacio entre los elementos del grid */
}

align-content

Alinea la totalidad del grid a lo largo del eje vertical.
Valores posibles: start, end, center, space-between, space-around space-evenly, stretch.
Ejemplo:


.grid-container {
    align-content: center; /* Alinea el contenido del grid en el centro verticalmente */
}

Propiedades de los Hijos (Grid Ítems)

grid-column

Define el inicio y el fin de una columna.
Ejemplo:


.grid-item {
    grid-column: 1 / 3; /* Ocupa desde la columna 1 hasta la 3 */
}

grid-row

Define el inicio y el fin de una fila.
Ejemplo:


.grid-item {
    grid-row: 1 / 2; /* Ocupa desde la fila 1 hasta la 2 */
}

grid-area

Asigna el área definida en grid-template-areas.
Ejemplo:

.header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
.footer {
    grid-area: footer;
}

grid-column-start

Define la línea de inicio de una columna.
Ejemplo:

.grid-item {
    grid-column-start: 2; /* El elemento comenzará en la columna 2 */
}

grid-column-end

Define la línea de fin de una columna.
Ejemplo:

.grid-item {
    grid-column-end: 4; /* El elemento terminará en la columna 4 */
}

grid-row-start

Define la línea de inicio de una fila.
Ejemplo:


.grid-item {
    grid-row-start: 1; /* El elemento comenzará en la fila 1 */
}

grid-row-end

Define la línea de fin de una fila.
Ejemplo:


.grid-item {
    grid-row-end: 3; /* El elemento terminará en la fila 3 */
}

justify-self

Alinea el contenido de un solo elemento a lo largo del eje horizontal.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-item {
    justify-self: end; /* Alinea el contenido del elemento al final horizontalmente */
}

align-self

Alinea el contenido de un solo elemento a lo largo del eje vertical.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-item {
    align-self: center; /* Alinea el contenido del elemento en el centro verticalmente */
}

Ejemplo Completo con Más Propiedades de Grid Layout

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>

</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="main">Main Content</div>
        <div class="sidebar">Sidebar</div>
        <div class="footer">Footer</div>
        <div class="grid-item1">Item 1</div>
        <div class="grid-item2">Item 2</div>
    </div>
</body>
</html>

CSS

<style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 200px 100px;
            gap: 10px;
            grid-auto-rows: 150px;
            grid-auto-columns: 150px;
            grid-auto-flow: row dense;
            justify-items: center;
            align-items: center;
            justify-content: space-between;
            align-content: center;
            grid-template-areas:
              'header header header'
              'main main sidebar'
              'footer footer footer';
        }

        .header {
            grid-area: header;
            background-color: #f1c40f;
        }
        .main {
            grid-area: main;
            background-color: #1abc9c;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: #e74c3c;
        }
        .footer {
            grid-area: footer;
            background-color: #3498db;
        }

        .grid-item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
            justify-self: center;
            align-self: center;
        }

        .grid-item2 {
            grid-area: 2 / 2 / 4 / 4;
            justify-self: start;
            align-self: end;
        }
    </style>

Git - principales comandos

Fernando — Mon, 08 Jul 2024 13:04:06 +0000

Establecer el Nombre de Usuario:

git config --global user.name "Tu Nombre"

1.1.Chequear que el nombre se haya guardado bien

git config user.name

Establecer el Correo Electrónico del Usuario:

git config --global user.email "tuemail@dominio.com"

Chequear que el email se haya guardado bien

git config user.email

Comando para mostrar configuracion actual de Git:

git config --list

Comando para obtener ayuda de Git

git help <comando>

Principales comandos para trabajar con proyectos:

Iniciar un repositorio local

git init mi_repositorio

Chequear el estado del repositorio

git status

-Observamos el mensaje untracked files (archivos sin seguimiento)
estado: Working directory - Directorio de trabajo

Si hay archivos que no deseamos agregar usamos un archivo **.gitignore para especificar los mismos.**

*concidencia comodin
/ se usa para ignorar las rutas relativas al archivo .gitignore.
# es usado para agregar comentarios

Agregamos los archivos al staging Area


git add

Verificamos que los archivos efectivamente se hayan agregados


git status

Observamos por consola el mensaje Changes to be commited, y el archivo pintado de verde

Confirmamos cambios y enviamos los archivos a nuestro repositorio local


git commit -m "mi comentario¨

agregamos un comentario descriptivo de lo que venimos haciendo.

Ver el historial de commits


git log

Este comando mostrará una lista de commits en el historial del repositorio, incluyendo:
con la tecla "q" matamos el proceso y continuamos usando la terminal.

El hash SHA-1 del commit.
El autor del commit.
La fecha del commit.
El mensaje del commit.

Comando para eliminar un repositorio.(🪛Mucho cuidado con este comando)


git rm -rf nombre-del-repositorio

Trabajo con ramas.

Crear una nueva rama.


git branch nombre-de-la-rama

Crea una nueva rama llamada nombre-de-la-rama basada en la rama actual.

Cambiar a una rama diferente


git checkout nombre-de-la-rama

O usando la nueva sintaxis con switch


git switch nombre-de-la-rama

Cambia a la rama nombre-de-la-rama.

Crear y cambiar a una nueva Rama:

git checkout -b nombre-de-la-rama

Crea una nueva rama y cambia a ella inmediatamente.

Listar todas las ramas:


git branch

Muestra todas las ramas locales. La rama actual se indica con un asterisco *

Eliminar una Rama:

git branch -d nombre-de-la-rama

Elimina la rama nombre-de-la-rama si ha sido completamente integrada en la rama actual.

Para forzar la eliminación de una rama (incluso si no está completamente integrada):


git branch -D nombre-de-la-rama

Renombrar una rama:


git branch -m nuevo-nombre

Renombra la rama actual a nuevo-nombre.

Combinar (Merge) una Rama en la Rama Actual:


git merge nombre-de-la-rama

Rebase de una Rama:


git rebase nombre-de-la-rama

Rebase la rama actual sobre la rama nombre-de-la-rama.

Comandos avanzados para Ramas en Git.

Mostrar la rama actual:


git symbolic-ref --short HEAD

Muestra el nombre de la rama actual.

Mostrar el historial de Commits por rama:


git log nombre-de-la-rama

Muestra el historial de commits de la rama nombre-de-la-rama.

Comparar dos ramas:


git diff rama1..rama2

Muestra las diferencias entre rama1 y rama2.

Listar ramas remotas:


git branch -r

Muestra todas las ramas remotas.

Listar todas las ramas (Locales y remotas)


git branch -a

Eliminar una rama remota.


git push origin --delete nombre-de-la-rama

Elimina la rama nombre-de-la-rama del repositorio remoto.

establecer la rama por defecto en remoto


git push -u origin nombre-de-la-rama

Establece nombre-de-la-rama como la rama por defecto en el repositorio remoto y configura el seguimiento.

Revertir Cambios.

Revertir un commit Confirmado (Usando git reset) Estos son cambios que han sido añadidos al historial del repositorio mediante un commit.

git reset --hard

Este comando deshace todos los cambios realizados desde el commit especificado y restablece el estado del árbol de trabajo al commit especificado.
Usar --hard elimina permanentemente todos los cambios no confirmados, así que asegúrate de que realmente quieres deshacer todos los cambios.


git reset --hard <commit_hash>

git reset --soft Mueve el puntero de HEAD al commit especificado, manteniendo los cambios en el área de preparación.


git reset --soft <commit_hash>

1.3. git reset --mixed Mueve el puntero de HEAD al commit especificado, manteniendo los cambios en el árbol de trabajo.


git reset --mixed <commit_hash>

Revertir un commit Confirmado (Usando git revert)


git revert <commit_hash>

Este comando crea un nuevo commit que deshace los cambios del commit especificado. Es útil porque no altera el historial del commit.

Restablecer al último commit confirmado


git reset --hard HEAD

Si quieres simplemente deshacer todos los cambios no confirmados y volver al último commit confirmado:

Reestablecer cambios No Confirmados (Uncommitted Changes) (Estos son cambios que has realizado en los archivos de tu repositorio, pero que aún no has confirmado con un commit.) Cambios en el Árbol de Trabajo (Working Directory) Cambios Añadidos al Área de Preparación (Staging Area)

4.1 git reset


git reset

Si los cambios han sido añadidos (staged) pero no confirmados, puedes utilizar git reset para deshacer esta acción.

4.2 git checkout


git checkout -- <archivo>

Si los cambios no han sido añadidos al área de preparación, puedes usar git checkout para restablecerlos al último commit.

Javascript - String Metodos

Fernando — Sun, 07 Jul 2024 16:40:00 +0000

1. `charAt()`

Descripción: Devuelve el carácter en el índice especificado.

Ejemplo:

let str = "Hello, World!";
let char = str.charAt(1);
console.log(char); // "e"

2. `charCodeAt()`

Descripción: Devuelve el valor Unicode del carácter en el índice especificado.

Ejemplo:

let str = "Hello, World!";
let code = str.charCodeAt(1); 
console.log(code); // 101

3. `concat()`

Descripción: Combina dos o más cadenas y devuelve una nueva cadena.

Ejemplo:

let str1 = "Hello";
let str2 = "World";
let combinedStr = str1.concat(", ", str2, "!"); console.log(combinedStr); // "Hello, World!"

4. `includes()`

Descripción: Determina si una cadena puede ser encontrada dentro de otra cadena, devolviendo true o false según corresponda.

Ejemplo:

let str = "Hello, World!"; 
let result = str.includes("World"); 
console.log(result); // true

5. `endsWith()`

Descripción: Determina si una cadena termina con los caracteres de una cadena especificada, devolviendo true o false según corresponda.

Ejemplo:

let str = "Hello, World!";
let result = str.endsWith("!");
console.log(result); // true

6. `indexOf()`

Descripción: Devuelve el índice dentro del objeto String de la primera aparición del valor especificado, o -1 si no se encuentra.

Ejemplo:

let str = "Hello, World!";
let index = str.indexOf("o");
console.log(index); // 4

7. `lastIndexOf()`

Descripción: Devuelve el índice dentro del objeto String de la última aparición del valor especificado, o -1 si no se encuentra.

Ejemplo:

let str = "Hello, World!";
let index = str.lastIndexOf("o");
console.log(index); // 8

8. `match()`

Descripción: Utiliza una expresión regular para hacer coincidir una cadena con una búsqueda.

Ejemplo:

let str = "Hello, World!";
let matches = str.match(/o/g);
console.log(matches); // ["o", "o"]

9. `repeat()`

Descripción: Construye y devuelve una nueva cadena que contiene el número especificado de copias de la cadena en la que fue llamada, concatenados.

Ejemplo:

let str = "Hello"; let repeatedStr = str.repeat(3); console.log(repeatedStr); // "HelloHelloHello"

10. `replace()`

Descripción: Devuelve una nueva cadena con algunas o todas las coincidencias de un patrón reemplazadas por un reemplazo.

Ejemplo:

let str = "Hello, World!";
let newStr = str.replace("World", "Everyone");
console.log(newStr); // "Hello, Everyone!"

11. `search()`

Descripción: Ejecuta una búsqueda que coincide entre una expresión regular y la cadena.

Ejemplo:

let str = "Hello, World!";
let index = str.search("World");
console.log(index); // 7

12. `slice()`

Descripción: Extrae una sección de una cadena y devuelve una cadena nueva.

Ejemplo:

let str = "Hello, World!";
let slicedStr = str.slice(7, 12);
console.log(slicedStr); // "World"`

13. `split()`

Descripción: Divide un objeto de tipo String en un array de cadenas mediante la separación de la cadena en subcadenas.

Ejemplo:

let str = "Hello, World!";
let arr = str.split(", ");
console.log(arr); // ["Hello", "World!"]

14. `startsWith()`

Descripción: Determina si una cadena comienza con los caracteres de una cadena especificada, devolviendo true o false según corresponda.

Ejemplo:

let str = "Hello, World!";
let result = str.startsWith("Hello");
console.log(result); // true

15. `substring()`

Descripción: Devuelve un subconjunto de un objeto String.

Ejemplo:

let str = "Hello, World!";
let substr = str.substring(0, 5);
console.log(substr); // "Hello"`

16. `toLowerCase()`

Descripción: Devuelve el valor en minúsculas de la cadena que realiza la llamada. Ejemplo:

let str = "Hello, World!";
let lowerStr = str.toLowerCase();
console.log(lowerStr); // "hello, world!"

17. `toUpperCase()`

Descripción: Devuelve el valor en mayúsculas de la cadena que realiza la llamada.

Ejemplo:

let str = "Hello, World!";
let upperStr = str.toUpperCase();
console.log(upperStr); // "HELLO, WORLD!"

18. `trim()`

Descripción: Elimina los espacios en blanco en ambos extremos del string.

Ejemplo:

let str = "   Hello, World!   ";
let trimmedStr = str.trim();
console.log(trimmedStr); // "Hello, World!"

19. `trimStart()`

Descripción: Elimina los espacios en blanco al inicio del string.

Ejemplo:

let str = "   Hello, World!   ";
let trimmedStartStr = str.trimStart();
console.log(trimmedStartStr); // "Hello, World!   "

20. `trimEnd()`

Descripción: Elimina los espacios en blanco al final del string.

Ejemplo:

let str = "   Hello, World!   ";
let trimmedEndStr = str.trimEnd();
console.log(trimmedEndStr); // "   Hello, World!"

21. `padStart()`

Descripción: Rellena la cadena actual con otra cadena hasta alcanzar la longitud dada, desde el inicio.

Ejemplo:

let str = "5";
let paddedStr = str.padStart(2, '0');
console.log(paddedStr); // "05"

22. `padEnd()`

Descripción: Rellena la cadena actual con otra cadena hasta alcanzar la longitud dada, desde el final. Ejemplo:

let str = "5";
let paddedStr = str.padEnd(2, '0');
console.log(paddedStr); // "50"`

Number - Javascript

Fernando — Sun, 07 Jul 2024 16:33:37 +0000

Métodos del Objeto `Number`

1. `Number.isFinite()`

Descripción: Determina si el valor pasado es un número finito.

Ejemplo:

console.log(Number.isFinite(10)); // true
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite('10')); // false

2. `Number.isInteger()`

Descripción: Determina si el valor pasado es un número entero.

Ejemplo:

console.log(Number.isInteger(10)); // true console.log(Number.isInteger(10.5)); // false console.log(Number.isInteger('10')); // false

3. `Number.isNaN()`

Descripción: Determina si el valor pasado es NaN (Not-A-Number).

Ejemplo:

console.log(Number.isNaN(NaN)); // true console.log(Number.isNaN(10)); // false console.log(Number.isNaN('10')); // false

4. `Number.isSafeInteger()`

Descripción: Determina si el valor pasado es un entero seguro (un número que puede ser representado exactamente en el espacio de bits de un número).

Ejemplo:

console.log(Number.isSafeInteger(10)); // true console.log(Number.isSafeInteger(Math.pow(2, 53))); // false console.log(Number.isSafeInteger('10')); // false

5. `Number.parseFloat()`

Descripción: Convierte una cadena a un número de punto flotante.

Ejemplo:

console.log(Number.parseFloat('10.5')); // 10.5 console.log(Number.parseFloat('10')); // 10 console.log(Number.parseFloat('10abc')); // 10`

6. `Number.parseInt()`

Descripción: Convierte una cadena a un entero.

Ejemplo:

console.log(Number.parseInt('10.5')); // 10 console.log(Number.parseInt('10')); // 10 console.log(Number.parseInt('10abc')); // 10`

7. `Number.prototype.toExponential()`

Descripción: Devuelve una cadena representando el número en notación exponencial.

Ejemplo:

let num = 123456;
console.log(num.toExponential(2)); // "1.23e+5"

8. `Number.prototype.toFixed()`

Descripción: Devuelve una cadena representando el número en notación de punto fijo.

Ejemplo:

let num = 10.12345;
console.log(num.toFixed(2)); // "10.12"

9. `Number.prototype.toLocaleString()`

Descripción: Devuelve una cadena con una representación sensible al idioma de este número.

Ejemplo:

let num = 123456.789;
console.log(num.toLocaleString('de-DE')); // "123.456,789"

10. `Number.prototype.toPrecision()`

Descripción: Devuelve una cadena representando el número en notación de punto fijo o en notación exponencial con un número de dígitos significativos especificados.

Ejemplo:

let num = 123.456;
console.log(num.toPrecision(5)); // "123.46"

11. `Number.prototype.toString()`

Descripción: Devuelve una cadena representando el número en la base especificada.

Ejemplo:

let num = 255;
console.log(num.toString(16)); // "ff"

12. `Number.prototype.valueOf()`

Descripción: Devuelve el valor primitivo de un objeto Number.

Ejemplo:

let num = new Number(10);
console.log(num.valueOf()); // 10

13. `Number.MAX_SAFE_INTEGER`

Descripción: El número entero positivo más grande que puede ser representado exactamente en JavaScript.

Ejemplo:

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

14. `Number.MIN_SAFE_INTEGER`

Descripción: El número entero negativo más pequeño que puede ser representado exactamente en JavaScript.

Ejemplo:

console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

15. `Number.MAX_VALUE`

Descripción: El número positivo más grande representable en JavaScript.

Ejemplo:

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308

16. `Number.MIN_VALUE`

Descripción: El número positivo más pequeño representable en JavaScript.

Ejemplo:

console.log(Number.MIN_VALUE); // 5e-324

17. `Number.NaN`

Descripción: Representa el valor "Not-A-Number".

Ejemplo:

console.log(Number.NaN); // NaN

18. `Number.NEGATIVE_INFINITY`

Descripción: Representa el valor negativo del infinito.

Ejemplo:

console.log(Number.NEGATIVE_INFINITY); // -Infinity

19. `Number.POSITIVE_INFINITY`

Descripción: Representa el valor positivo del infinito.

Ejemplo:

console.log(Number.POSITIVE_INFINITY); // Infinity

20. `Number.EPSILON`

Descripción: La diferencia mínima entre dos números representables.

Ejemplo:

console.log(Number.EPSILON); // 2.220446049250313e-16

DOM - Document object Model

Fernando — Sun, 07 Jul 2024 16:19:44 +0000

Propiedades

1. `document.title`

Valor que retorna: El título del documento actual.

console.log(document.title); // Retorna el título de la página actual
document.title = "Nuevo Título"; // Establece un nuevo título para la página

2. `document.URL`

Valor que retorna: La URL completa del documento.


console.log(document.URL); // Retorna la URL actual del documento

3. `document.body`

Valor que retorna: El elemento <body> del documento.

console.log(document.body); // Retorna el elemento body del documento

4. `document.cookie`

Valor que retorna: Las cookies del documento en formato de cadena.


console.log(document.cookie); // Retorna las cookies del documento
document.cookie = "usuario=Fernando; expires=Fri, 31 Dec 2024 23:59:59 GMT"; // Establece una cookie

5. `document.head`

Valor que retorna: El elemento <head> del documento.


console.log(document.head); // Retorna el elemento head del documento

6. `document.documentElement`

Valor que retorna: El elemento raíz del documento (el elemento <html>).


console.log(document.documentElement); // Retorna el elemento html del documento

7. `document.forms`

Valor que retorna: Una colección de todos los formularios del documento.


console.log(document.forms); // Retorna una colección de todos los formularios del documento

8. `document.images`

Valor que retorna: Una colección de todos los elementos <img> del documento.


console.log(document.images); // Retorna una colección de todos los elementos img del documento

9. `document.scripts`

Valor que retorna: Una colección de todos los elementos <script> del documento.


console.log(document.scripts); // Retorna una colección de todos los elementos script del documento

10. `document.anchors`

Valor que retorna: Una colección de todos los elementos <a> con un atributo name en el documento.


console.log(document.anchors); // Retorna una colección de todos los elementos <a> con un atributo name

11. `document.links`

Valor que retorna: Una colección de todos los elementos <a> y <area> con un atributo href en el documento.


console.log(document.links); // Retorna una colección de todos los elementos <a> y <area> con un atributo href

12. `document.readyState`

Valor que retorna: El estado de carga del documento ("loading", "interactive", "complete").


console.log(document.readyState); // Retorna el estado de carga del documento

13. `document.referrer`

Valor que retorna: La URL del documento que enlazó a este documento.


console.log(document.referrer); // Retorna la URL del documento de referencia

Metodos

1. `document.getElementById(id)`

Valor que retorna: El elemento con el ID especificado.
Parámetros que recibe:
- id (string): El ID del elemento que se desea obtener.


let elemento = document.getElementById("miElemento");
console.log(elemento); // Retorna el elemento con ID "miElemento"

2. `document.getElementsByClassName(className)`

Valor que retorna: Una colección de todos los elementos en el documento con la clase especificada.
Parámetros que recibe:
- className (string): El nombre de la clase de los elementos que se desea obtener.


let elementos = document.getElementsByClassName("miClase");
console.log(elementos); // Retorna una colección de elementos con la clase "miClase"

3. `document.querySelector(selector)`

Valor que retorna: El primer elemento que coincide con el selector CSS especificado.
Parámetros que recibe:
- selector (string): Un selector CSS.


let elemento = document.querySelector(".miClase");
console.log(elemento); // Retorna el primer elemento que coincide con el selector ".miClase"

4. `document.querySelectorAll(selector)`

Valor que retorna: Una NodeList de todos los elementos que coinciden con el selector CSS especificado.
Parámetros que recibe:
- selector (string): Un selector CSS.

let elementos = document.querySelectorAll(".miClase");
console.log(elementos); // Retorna una NodeList de elementos que coinciden con el selector ".miClase"

5. `document.createElement(tagName)`

Valor que retorna: Un nuevo elemento con el nombre de etiqueta especificado.
Parámetros que recibe:
- tagName (string): El nombre de la etiqueta del nuevo elemento.


let nuevoElemento = document.createElement("div");
console.log(nuevoElemento); // Retorna un nuevo elemento <div>

6. `element.setAttribute(name, value)`

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- name (string): El nombre del atributo.
- value (string): El valor del atributo.


let elemento = document.getElementById("miElemento");
elemento.setAttribute("class", "nuevaClase");
console.log(elemento); // El elemento ahora tiene una clase "nuevaClase"

7. `element.getAttribute(name)`

Valor que retorna: El valor del atributo especificado.
Parámetros que recibe:
- name (string): El nombre del atributo.


let elemento = document.getElementById("miElemento");
let valor = elemento.getAttribute("class");
console.log(valor); // Retorna el valor del atributo "class"

8. `element.appendChild(child)`

Valor que retorna: El nodo agregado.
Parámetros que recibe:
- child (Node): El nodo que se va a agregar como hijo.


let nuevoElemento = document.createElement("div");
document.body.appendChild(nuevoElemento);
console.log(document.body); // El nuevo elemento <div> se ha agregado al body

9. `element.removeChild(child)`

Valor que retorna: El nodo eliminado.
Parámetros que recibe:
- child (Node): El nodo que se va a eliminar.


let elemento = document.getElementById("miElemento");
let hijo = elemento.firstChild;
elemento.removeChild(hijo);
console.log(elemento); // El primer hijo del elemento se ha eliminado

10. `element.classList.add(className)`

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- className (string): El nombre de la clase que se va a agregar.


let elemento = document.getElementById("miElemento");
elemento.classList.add("nuevaClase");
console.log(elemento); // El elemento ahora tiene la clase "nuevaClase"

11. `element.classList.remove(className)`

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- className (string): El nombre de la clase que se va a eliminar.


let elemento = document.getElementById("miElemento");
elemento.classList.remove("nuevaClase");
console.log(elemento); // La clase "nuevaClase" se ha eliminado del elemento

12. `document.getElementsByTagName(tagName)`

Valor que retorna: Una colección de todos los elementos con el nombre de etiqueta especificado.
Parámetros que recibe:
- tagName (string): El nombre de la etiqueta de los elementos que se desea obtener.


let elementos = document.getElementsByTagName("p");
console.log(elementos); // Retorna una colección de todos los elementos <p>

13. `document.getElementsByName(name)`

Valor que retorna: Una colección de todos los elementos con el atributo name especificado.
Parámetros que recibe:
- name (string): El valor del atributo name de los elementos que se desea obtener.


let elementos = document.getElementsByName("username");
console.log(elementos); // Retorna una colección de todos los elementos con el atributo name="username"

14. `document.importNode(externalNode, deep)`

Valor que retorna: Una copia del nodo especificado importado al documento actual.
Parámetros que recibe:
- externalNode (Node): El nodo que se va a importar.
- deep (boolean): Si se deben importar todos los descendientes del nodo.


let nodoExterno = document.createElement("div");
let nodoImportado = document.importNode(nodoExterno, true);
document.body.appendChild(nodoImportado); // Importa y agrega el nodo al body

15. `element.insertAdjacentHTML(position, text)`

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- position (string): La posición relativa al elemento ("beforebegin", "afterbegin", "beforeend", "afterend").
- text (string): El HTML a ser insertado.


let elemento = document.getElementById("miElemento");
elemento.insertAdjacentHTML("beforeend", "<p>Nuevo párrafo</p>");
console.log(elemento); // Inserta un nuevo párrafo antes del final del elemento

16. `element.insertAdjacentElement(position, element)`

Valor que retorna: El nodo insertado.
Parámetros que recibe:
- position (string): La posición relativa al elemento ("beforebegin", "afterbegin", "beforeend", "afterend").
- element (Element): El elemento que se va a insertar.


let elemento = document.getElementById("miElemento");
let nuevoElemento = document.createElement("div");
elemento.insertAdjacentElement("afterend", nuevoElemento);
console.log(elemento); // Inserta el nuevo elemento después del elemento original

17. `element.addEventListener(type, listener, options)`**

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- type (string): El tipo de evento (por ejemplo, "click").
- listener (function): La función que se ejecutará cuando el evento se dispare.
- options (object): Opciones adicionales para el controlador de eventos (por ejemplo, { once: true } para ejecutar una sola vez).


let boton = document.getElementById("miBoton");
boton.addEventListener("click", function() {
  alert("Botón clickeado");
}, { once: true }); // Ejecuta la función solo una vez

18. `element.removeEventListener(type, listener, options)`

Valor que retorna: No retorna ningún valor.
Parámetros que recibe:
- type (string): El tipo de evento.
- listener (function): La función que se desea eliminar.
- options (object): Opciones adicionales que coinciden con las usadas en addEventListener.


let boton = document.getElementById("miBoton");
function miFuncion() {
  alert("Botón clickeado");
}
boton.addEventListener("click", miFuncion);
boton.removeEventListener("click", miFuncion, { once: true }); // Elimina el evento "click" del botón con opciones

19. `element.dispatchEvent(event)`

Valor que retorna: Un booleano que indica si el evento fue cancelable.
Parámetros que recibe:
- event (Event): El evento a despachar.


let boton = document.getElementById("miBoton");
let evento = new Event("click");
boton.dispatchEvent(evento); // Despacha el evento "click" en el botón

20. `node.childNodes`

Valor que retorna: Una colección de todos los nodos hijos del nodo especificado.


let contenedor = document.getElementById("miContenedor");
console.log(contenedor.childNodes); // Retorna una colección de todos los nodos hijos del contenedor

21. `node.firstChild`

Valor que retorna: El primer nodo hijo del nodo especificado.


let contenedor = document.getElementById("miContenedor");
console.log(contenedor.firstChild); // Retorna el primer nodo hijo del contenedor

22. `node.lastChild`

Valor que retorna: El último nodo hijo del nodo especificado.


let contenedor = document.getElementById("miContenedor");
console.log(contenedor.lastChild); // Retorna el último nodo hijo del contenedor

23. `node.nextSibling`

Valor que retorna: El nodo inmediatamente siguiente al nodo especificado.


let nodo = document.getElementById("miNodo");
console.log(nodo.nextSibling); // Retorna el nodo inmediatamente siguiente a "miNodo"

24. `node.previousSibling`

Valor que retorna: El nodo inmediatamente anterior al nodo especificado.


let nodo = document.getElementById("miNodo");
console.log(nodo.previousSibling); // Retorna el nodo inmediatamente anterior a "miNodo"

25. `node.replaceChild(newChild, oldChild)`

Valor que retorna: El nodo hijo reemplazado.
Parámetros que recibe:
- newChild (Node): El nuevo nodo que reemplazará al antiguo.
- oldChild (Node): El nodo que será reemplazado.


let contenedor = document.getElementById("miContenedor");
let nuevoNodo = document.createElement("div");
let nodoViejo = document.getElementById("nodoViejo");
contenedor.replaceChild(nuevoNodo, nodoViejo); // Reemplaza el nodo viejo con el nuevo nodo en el contenedor

Servidores

Fernando — Wed, 03 Jul 2024 21:32:35 +0000

Un servidor es un sistema de computación que proporciona servicios, recursos y datos a otros dispositivos, denominados clientes, a través de una red. Puede referirse tanto al hardware (servidor físico) como al software (programa servidor) que gestiona y ofrece estos servicios. Los servidores son fundamentales en la arquitectura de redes y permiten el funcionamiento de aplicaciones web, almacenamiento de datos, correo electrónico, juegos en línea, entre otros. A continuación, se explica con más detalle:

Un servidor web es un software y hardware que utiliza HTTP (Hypertext Transfer Protocol) y otros protocolos para responder a las solicitudes de los clientes hechas a través de la World Wide Web. Su función principal es entregar contenido web a los usuarios finales. Aquí hay una explicación más detallada de sus componentes y funciones:

🧩Servidor Hardware

Un servidor hardware es un equipo físico diseñado para ejecutar servicios, aplicaciones y administrar recursos de red. Está compuesto por componentes especializados y robustos que le permiten manejar grandes cargas de trabajo y funcionar de manera continua con alta disponibilidad. A continuación, se describen sus componentes y características clave:

Componentes de un Servidor Hardware

Procesador (CPU):

Multinúcleo: Los servidores suelen tener procesadores con múltiples núcleos y/o múltiples procesadores para manejar tareas concurrentes y procesos intensivos en cálculo.
Arquitectura x86 o ARM: Las arquitecturas más comunes para servidores son x86 y ARM, siendo la primera la más tradicional.

Memoria (RAM):

Capacidad Alta: Los servidores suelen tener una gran cantidad de memoria RAM para soportar múltiples aplicaciones y usuarios simultáneamente.
Memoria ECC (Error-Correcting Code): Utiliza memoria ECC para detectar y corregir errores de datos en tiempo real, mejorando la estabilidad y confiabilidad.

Almacenamiento:

Discos Duros (HDD) y Unidades de Estado Sólido (SSD): Los servidores pueden tener una combinación de HDDs para almacenamiento masivo y SSDs para rendimiento rápido.
Arreglos RAID: Utilizan configuraciones RAID (Redundant Array of Independent Disks) para mejorar la redundancia y el rendimiento del almacenamiento.

Placa Base (Motherboard):

Soporte para Múltiples CPUs: La placa base de un servidor suele soportar múltiples procesadores.
Conectividad y Expansión: Proporciona múltiples ranuras de expansión para tarjetas de red, almacenamiento adicional, y otros componentes.

Fuente de Alimentación:

Redundante y de Alta Capacidad: Las fuentes de alimentación en los servidores son redundantes para asegurar la continuidad del servicio y soportar la alta demanda energética.

Sistema de Refrigeración:

Enfriamiento Avanzado: Incluye sistemas de refrigeración avanzada para mantener las temperaturas operativas bajo control, incluso en condiciones de alta carga.

Conectividad de Red:

Interfaces de Red de Alta Velocidad: Equipado con interfaces de red de alta velocidad, como Ethernet Gigabit o 10 Gigabit, para manejar grandes volúmenes de tráfico de red.

🧩Servidor Software

Un servidor software es un programa o conjunto de programas que proporcionan servicios a otros programas o dispositivos, conocidos como clientes. Estos servicios pueden incluir alojamiento de sitios web, gestión de bases de datos, envío de correos electrónicos, entre otros. A continuación, se explican los principales aspectos de un servidor software:

Tipos Comunes de Servidores Software

Servidor Web:

Descripción: Gestiona solicitudes HTTP o HTTPS desde navegadores web y devuelve contenido web como HTML, CSS, JavaScript, imágenes, etc.
Ejemplos: Apache HTTP Server, Nginx, Microsoft Internet Information Services (IIS).

Servidor de Base de Datos:

Descripción: Proporciona servicios para el almacenamiento, recuperación y manipulación de datos estructurados en una base de datos.
Ejemplos: MySQL, PostgreSQL, Microsoft SQL Server, MongoDB.

Servidor de Correo:

Descripción: Maneja el envío, recepción y almacenamiento de correos electrónicos.
Ejemplos: Microsoft Exchange Server, Postfix, Sendmail.

Servidor FTP:

Descripción: Proporciona servicios para la transferencia de archivos entre sistemas a través del Protocolo de Transferencia de Archivos (FTP).
Ejemplos: vsftpd, ProFTPD, FileZilla Server.

Servidor de Aplicaciones:

Descripción: Ejecuta aplicaciones empresariales y proporciona un entorno para desarrollar y desplegar aplicaciones.
Ejemplos: Apache Tomcat, JBoss, WebSphere.

Servidor de Juegos:

Descripción: Gestiona el funcionamiento de videojuegos multijugador en línea.
Ejemplos: Minecraft Server, Counter-Strike: Global Offensive (CS ) Server.

Certificado SSL

SSL (Secure Sockets Layer) es un protocolo de seguridad diseñado para establecer una conexión cifrada entre un servidor web y un navegador web. Este protocolo garantiza que todos los datos transmitidos entre el servidor y el navegador permanezcan privados e íntegros. Aunque SSL ha sido reemplazado en gran medida por su sucesor, TLS (Transport Layer Security), el término SSL todavía se utiliza comúnmente para referirse a esta tecnología de cifrado.

Cifrado:

Descripción: SSL cifra los datos transmitidos entre el servidor y el cliente, lo que impide que los atacantes intercepten y lean la información durante su transmisión.
Beneficio: Protege la confidencialidad de la información, como datos personales, contraseñas, y detalles de tarjetas de crédito.

Autenticación:

Descripción: SSL utiliza certificados digitales para verificar la identidad del servidor, asegurando que los usuarios se están conectando al servidor legítimo y no a un impostor.
Beneficio: Previene ataques de phishing y suplantación de identidad, asegurando que los usuarios están comunicándose con la entidad correcta.

Integridad de los Datos:

Descripción: SSL asegura que los datos transmitidos no sean alterados o corrompidos durante su transferencia.
Beneficio: Garantiza que la información recibida por el destinatario sea la misma que se envió originalmente, sin modificaciones.

🧩Cómo Funciona SSL

Establecimiento de la Conexión SSL:

Handshake SSL: El proceso de establecimiento de una conexión SSL se llama "handshake" y consta de los siguientes pasos:
Solicitud de Conexión: El cliente se conecta al servidor y solicita una conexión segura.

Envío del Certificado: El servidor envía su certificado digital al cliente, que contiene la clave pública del servidor.
Verificación del Certificado: El cliente verifica la validez del certificado con una autoridad certificadora (CA, por sus siglas en inglés).

Generación de la Clave Secreta: El cliente genera una clave secreta y la cifra con la clave pública del servidor, luego envía la clave cifrada al servidor.
Desencriptado de la Clave Secreta: El servidor desencripta la clave secreta con su clave privada.

Establecimiento de la Sesión Cifrada: Ambas partes utilizan la clave secreta para cifrar y descifrar los datos transmitidos durante la sesión.

Protocolo HTTPS

La "S" en "HTTPS" significa "Secure" (seguro). HTTPS es una versión segura del protocolo HTTP (Hypertext Transfer Protocol). Este protocolo se utiliza para la transferencia de datos en la web, y la adición de la "S" indica que la comunicación entre el navegador del usuario y el servidor web está cifrada y, por lo tanto, es segura. Aquí tienes más detalles sobre HTTPS:

Cifrado.

Descripción: HTTPS utiliza el protocolo SSL (Secure Sockets Layer) o su sucesor TLS (Transport Layer Security) para cifrar los datos que se transmiten entre el cliente (generalmente un navegador web) y el servidor.
Beneficio: El cifrado protege la información sensible, como contraseñas, datos personales y detalles de tarjetas de crédito, impidiendo que los atacantes intercepten y lean estos datos durante su transmisión.

Integridad de datos.

Descripción: HTTPS asegura que los datos transmitidos no sean alterados o corrompidos durante su transferencia.
Beneficio: La integridad de los datos garantiza que la información recibida por el destinatario es la misma que se envió originalmente, sin modificaciones.

Autenticacion.

Descripción: HTTPS verifica la identidad del sitio web mediante un certificado digital emitido por una autoridad certificadora de confianza.
Beneficio: La autenticación asegura que los usuarios están comunicándose con el sitio web legítimo y no con un impostor, ayudando a prevenir ataques de phishing y suplantación de identidad.
Habilitar protocolo HTTPS

Dominio

Un dominio es un nombre fácil de recordar que se utiliza para identificar direcciones IP en Internet. Los dominios permiten a los usuarios acceder a sitios web y otros servicios en línea sin tener que recordar secuencias numéricas complejas. En esencia, un dominio actúa como una dirección amigable y legible para los humanos que redirige a una ubicación específica en la red.

🧩Registro de un Dominio

Elegir un Nombre de Dominio:

Descripción: Selecciona un nombre único que represente el propósito del sitio web y que sea fácil de recordar.
Disponibilidad: Comprueba si el nombre de dominio deseado está disponible usando un servicio de registro de dominios.

Registrar el Dominio:

Registrar: Utiliza un registrador de dominios acreditado, como GoDaddy, Namecheap o Google Domains, para registrar el nombre de dominio.
Duración: Los dominios suelen registrarse por periodos de uno a diez años, con opción de renovación.

🧩Registro de dominios en Argentina

Paso a Paso Detallado

Crear una Cuenta en NIC Argentina:

Accede a NIC Argentina y haz clic en "Crear cuenta".
Completa el formulario de registro con tu información personal.
Verifica tu correo electrónico para activar la cuenta.

Buscar Disponibilidad del Dominio:

En la página principal de NIC Argentina, usa la barra de búsqueda para verificar la disponibilidad del nombre de dominio que deseas.
Si está disponible, haz clic en "Solicitar".

Completar el Formulario de Registro:

Proporciona la información requerida, como:
Nombre del registrante.
Dirección de correo electrónico.
Información de contacto (administrativo, técnico, etc.).
Configura los servidores DNS si ya los tienes, o puedes hacerlo después.

Realizar el Pago:

Selecciona el método de pago.

Completa la transacción según las instrucciones proporcionadas.
Guarda el comprobante de pago para futuros registros.

Confirmación del Registro:

Revisa tu correo electrónico para la confirmación del registro.
Una vez confirmado, el dominio estará activo y listo para usar.

Hosting

En el contexto de la informática y especialmente en el ámbito de la red de Internet, un "host" se refiere a cualquier dispositivo conectado a una red que participe en las comunicaciones de red. Este término es ampliamente utilizado en diversos contextos técnicos y puede referirse a diferentes tipos de dispositivos:

Host en Redes de Computadoras:

En redes informáticas, un host es cualquier dispositivo que tiene una dirección IP asignada y que puede ser accesible a través de la red. Esto incluye computadoras personales, servidores, impresoras de red, enrutadores y otros dispositivos conectados a la red.

Host como Servidor de Internet:

Más específicamente, en el contexto de los servicios en línea, un host se refiere a un servidor que proporciona servicios a través de Internet. Por ejemplo, un servidor web es un tipo de host que almacena y sirve sitios web a los usuarios que acceden a través de sus navegadores.

Host como Proveedor de Hosting:

Un proveedor de hosting (como Donweb, Bluehost, GoDaddy, etc.) es una empresa que ofrece servicios de alojamiento web. En este caso, el término "host" se refiere al servidor físico (o virtual) donde se almacenan los archivos y datos de un sitio web, permitiendo que este sea accesible en Internet.

🧩caracteristicas de un hosting

Espacio disponible:

Definición: Es la cantidad de espacio en disco que el proveedor de hosting asigna para almacenar los archivos de tu sitio web, como páginas HTML, imágenes, videos, bases de datos, etc.
Importancia: Un espacio adecuado asegura que puedas almacenar todos los contenidos de tu sitio web sin problemas de capacidad.

Ancho de banda disponible:

Definición: Es la cantidad máxima de datos que pueden transferirse desde y hacia tu sitio web en un periodo de tiempo determinado (generalmente mensual).
Importancia: Un ancho de banda suficiente garantiza que tu sitio web pueda manejar el tráfico de visitantes sin experimentar lentitud o interrupciones debido a límites de datos.

Transferencia de datos mensual:

Definición: Es el límite de datos que puedes transferir desde y hacia tu sitio web en un mes específico.
Importancia: Este límite asegura que no excedas los recursos permitidos por tu plan de hosting, evitando costos adicionales o la suspensión del servicio por exceso de uso.

Cuentas de Correo:

Definición: Son las direcciones de correo electrónico personalizadas que puedes crear utilizando tu propio dominio (por ejemplo, info@tudominio.com).
Importancia: Proporcionan una apariencia profesional y facilitan la comunicación con tus usuarios bajo tu propio dominio, además de permitir gestionar múltiples cuentas de correo según tus necesidades.

Seguridad:

Definición: Incluye medidas como certificados SSL para protección de datos, firewalls, copias de seguridad regulares y detección de malware.
Importancia: Garantiza la integridad y protección de los datos almacenados en tu sitio web contra accesos no autorizados, ataques cibernéticos y pérdidas de información crítica.

Buen soporte técnico:

Definición: Disponibilidad de personal capacitado para resolver problemas técnicos y brindar asistencia rápida y efectiva a los usuarios del servicio de hosting.
Importancia: Un soporte técnico eficiente y accesible es fundamental para resolver cualquier problema o duda relacionada con el funcionamiento del sitio web y garantizar su disponibilidad continua.

🧩Hostinger

Precios

Planes Económicos: Hostinger es conocido por ofrecer algunos de los planes de hosting más económicos en el mercado, especialmente en su nivel de entrada.
Relación Calidad-Precio: Ofrece una buena relación calidad-precio con características robustas incluso en planes de bajo costo.

Características:

Rendimiento: Utiliza tecnología de almacenamiento en caché, servidores LiteSpeed y almacenamiento SSD para mejorar el rendimiento del sitio web.
Panel de Control: Utiliza un panel de control personalizado llamado hPanel, que es intuitivo y fácil de usar.
Escalabilidad: Ofrece una gama de opciones que permiten escalar fácilmente desde hosting compartido a VPS y hosting en la nube. Integraciones: Integración con servicios como Cloudflare, G Suite y herramientas de SEO.

Soporte Técnico:

Atención al Cliente: Soporte 24/7 a través de chat en vivo y un sistema de tickets.
Recursos de Aprendizaje: Extensa base de conocimientos y tutoriales en línea.
Mercado Objetivo:
Global: Hostinger es un proveedor global con servidores en varias regiones del mundo, lo que lo hace adecuado para un público internacional.
NVMe (Non-Volatile Memory Express) es una interfaz y un protocolo de comunicación creado para SSDs que utilizan memoria flash NAND, aprovechando las capacidades de las conexiones PCIe (Peripheral Component Interconnect Express) para mejorar drásticamente la velocidad de transferencia de datos y la eficiencia en comparación con las interfaces más antiguas como SATA (Serial ATA).
La migración automática de un sitio web implica mover todos los archivos, datos, configuraciones y, a veces, incluso las aplicaciones asociadas de un servidor de alojamiento web a otro, utilizando herramientas y scripts automatizados que facilitan el proceso. Esta técnica se emplea para minimizar el tiempo de inactividad y reducir el riesgo de errores manuales durante la migración.

¿Qué es una CDN?

Una CDN es una red de servidores ubicados en diferentes lugares alrededor del mundo. Su función principal es almacenar en caché y entregar contenido estático y dinámico de sitios web a los usuarios finales desde el servidor más cercano a la ubicación de cada usuario. Esto reduce la latencia, mejora la velocidad de carga y aumenta la disponibilidad del contenido.

Implicaciones de tener una CDN gratuita en el servicio de hosting
Mejor rendimiento y velocidad:

Reducción de la latencia: Al entregar contenido desde el servidor más cercano al usuario, la CDN reduce la distancia que los datos deben recorrer, lo que disminuye la latencia y acelera el tiempo de carga de la página.
Optimización de recursos: Al distribuir la carga de tráfico entre múltiples servidores, se reduce la presión sobre el servidor principal de alojamiento, mejorando el rendimiento general del sitio.
Mejor experiencia del usuario:
Velocidades de carga más rápidas: Los usuarios experimentarán tiempos de carga más rápidos, lo que puede aumentar la satisfacción del usuario y reducir las tasas de rebote.
Acceso global: Los visitantes de cualquier parte del mundo podrán acceder al contenido de manera rápida y eficiente, independientemente de su ubicación geográfica.

La protección DDoS estándar es una medida de seguridad implementada por servicios de hosting y proveedores de redes para proteger sitios web y aplicaciones contra ataques de denegación de servicio distribuida (DDoS). Los ataques DDoS intentan hacer que un sitio web o servicio en línea no esté disponible para sus usuarios previstos al sobrecargarlo con una enorme cantidad de tráfico desde múltiples fuentes.

¿Qué es un ataque DDoS?
Un ataque DDoS implica el uso de múltiples sistemas comprometidos para inundar el objetivo, como un servidor web, con una cantidad excesiva de tráfico. Este tráfico puede sobrecargar el servidor, agotando sus recursos y haciéndolo inaccesible para los usuarios legítimos. Los ataques DDoS pueden ser devastadores, causando tiempos de inactividad significativos y pérdidas financieras.

Diferencia entre Dominio y hosting

Dominio: Es la dirección web que identifica un sitio en Internet.

Hosting: Es el servicio que proporciona el espacio en servidores para almacenar y servir los archivos del sitio web.

Planes de hosting

🧩Algunas opciones

LattingCloud
Hostinger
donweb
towebs
mesi
hostrentable

🧩Porque hay diferencias de precio?

Hosting Compartido (Servidor Compartido)

Analogía: Te alojas en una casa con una familia; tienes tu propia habitación, pero compartes el baño, la cocina y otros espacios comunes.

Características:

Recursos Compartidos: Varios sitios web comparten los mismos recursos del servidor (CPU, RAM, ancho de banda, etc.).
Costo: Es la opción más económica debido a la compartición de recursos.
Rendimiento: Puede ser afectado si otros sitios web en el mismo servidor experimentan un alto tráfico.
Gestión: El proveedor de hosting gestiona la mayoría de las configuraciones del servidor, lo cual es conveniente para usuarios con menos experiencia técnica.
Ideal para: Sitios web pequeños o personales con poco tráfico y presupuesto limitado.

Servidor VPS (Servidor Privado Virtual)

Analogía: Vives en la misma casa, pero tu habitación es más grande, tienes baño propio, un microondas para calentar comida y un buen cerrojo en la puerta de tu habitación.

Características:

Recursos Dedicados: Cada VPS tiene una porción de los recursos del servidor asignada exclusivamente, lo que mejora el rendimiento y la estabilidad.
Costo: Más caro que el hosting compartido, pero más económico que un servidor dedicado.
Rendimiento: Menos afectado por otros usuarios del servidor, proporcionando mayor fiabilidad y capacidad de manejar tráfico moderado.
Gestión: Ofrece más control y opciones de configuración que el hosting compartido; algunos proveedores ofrecen gestión parcial o total del servidor.
Ideal para: Sitios web con tráfico moderado, pequeñas empresas o aplicaciones que requieren más recursos y control que los proporcionados por el hosting compartido.

Servidor Dedicado

Analogía: Eres el dueño de la casa y no la compartes con nadie, o en todo caso, decides tú con quién la compartes.

Características:

Recursos Exclusivos: Todo el servidor está dedicado a tu sitio web, proporcionando el máximo rendimiento y estabilidad.
Costo: Es la opción más costosa debido a la exclusividad de los recursos.
Rendimiento: Ofrece el mejor rendimiento, capaz de manejar grandes volúmenes de tráfico sin degradación del servicio.
Gestión: Requiere mayor conocimiento técnico para gestionar y mantener el servidor; algunos proveedores ofrecen servicios gestionados.
Ideal para: Sitios web grandes, aplicaciones con altos requisitos de recursos, tiendas en línea con mucho tráfico y empresas que necesitan máxima seguridad y rendimiento.

Cloud hosting

El Cloud Hosting, también conocido como hosting en la nube, es una forma de alojamiento web que utiliza recursos de múltiples servidores físicos interconectados y distribuidos en la nube. En lugar de depender de un único servidor físico como en el hosting tradicional, el cloud hosting utiliza una red de servidores virtuales para alojar los datos y aplicaciones de los usuarios.

🧩Principales ventajas

Rentabilidad:

Definición: El cloud hosting suele ofrecer un modelo de pago por uso, lo que significa que solo pagas por los recursos que consumes. Esto puede resultar más económico que los planes tradicionales de hosting que tienen tarifas fijas, especialmente para sitios web con fluctuaciones en el tráfico.
Beneficios: Permite a las empresas controlar y optimizar sus costos operativos al escalar recursos solo cuando sea necesario, evitando gastos innecesarios en infraestructura subutilizada.

Escalabilidad:

Definición: Permite aumentar o disminuir dinámicamente los recursos (como CPU, RAM, almacenamiento) según las necesidades del sitio web o aplicación.
Beneficios: Facilita manejar picos de tráfico repentinos sin experimentar caídas en el rendimiento, asegurando que el sitio web siempre esté disponible y responda de manera eficiente a la demanda del usuario.

Integración:

Definición: Muchos proveedores de cloud hosting ofrecen una amplia gama de servicios y herramientas integradas que facilitan la gestión y el desarrollo de aplicaciones en la nube.
Beneficios: Facilita la implementación de soluciones complejas, como bases de datos, servicios de almacenamiento, análisis de datos y herramientas de desarrollo, todo dentro del mismo entorno de cloud hosting, lo que simplifica la administración y mejora la eficiencia operativa.

Flexibilidad:

Definición: Permite a los usuarios configurar y personalizar fácilmente su entorno de hosting según sus necesidades específicas, ajustando recursos y configuraciones de software de manera rápida y eficiente.
Beneficios: Proporciona la capacidad de adaptarse rápidamente a cambios en los requisitos del negocio o tecnológicos, permitiendo a las empresas innovar y escalar de manera más ágil en un entorno competitivo.

Fiabilidad:

Definición: El cloud hosting generalmente ofrece redundancia y alta disponibilidad mediante la distribución de la carga de trabajo a través de múltiples servidores y centros de datos.
Beneficios: Minimiza el riesgo de tiempo de inactividad debido a fallos de hardware, asegurando una mayor continuidad del servicio y una experiencia consistente para los usuarios finales.

Seguridad:

Definición: Los proveedores de cloud hosting suelen ofrecer medidas de seguridad avanzadas, como cifrado de datos, firewalls, monitoreo de red y detección de intrusiones.
Beneficios: Protege los datos y las aplicaciones contra amenazas cibernéticas, garantizando la integridad y confidencialidad de la información almacenada en la nube.

🧩Cómo funciona?

El funcionamiento del cloud hosting se basa en la distribución de recursos informáticos a través de una red de servidores interconectados y virtualizados que componen la "nube".

Infraestructura Distribuida:

Un proveedor de cloud hosting opera múltiples servidores físicos distribuidos en varios centros de datos. Estos servidores están interconectados a través de una red de alta velocidad.

Virtualización:

Utiliza tecnologías de virtualización para crear instancias virtuales de servidores dentro de estos servidores físicos. Cada instancia virtual puede actuar como un servidor independiente con su propio sistema operativo, recursos (CPU, RAM, almacenamiento) y configuraciones específicas.

Escalabilidad Dinámica:

Los recursos como CPU, RAM y almacenamiento pueden asignarse y reasignarse dinámicamente según la demanda. Esto permite escalar verticalmente (aumentar recursos de una instancia) o horizontalmente (agregar más instancias) de manera rápida y eficiente.

Alta Disponibilidad y Redundancia:

Los datos y aplicaciones se replican y distribuyen a través de múltiples servidores dentro de la red de la nube. Si un servidor físico falla, otro puede asumir la carga de trabajo automáticamente, asegurando una alta disponibilidad y minimizando el riesgo de tiempo de inactividad.

Administración Centralizada:

Los usuarios pueden gestionar y configurar sus recursos a través de una interfaz de administración web proporcionada por el proveedor de cloud hosting. Esto incluye la capacidad de monitorear el rendimiento, realizar copias de seguridad, escalar recursos y configurar la seguridad.

Modelo de Pago por Uso:

Muchos proveedores de cloud hosting ofrecen un modelo de pago por uso, donde los usuarios solo pagan por los recursos que consumen. Esto puede incluir tiempo de CPU utilizado, almacenamiento utilizado, transferencia de datos, entre otros, lo que permite a las empresas controlar sus costos de manera efectiva.

Utilizar un Hosting

🧩Hosting gratuito

infinityFree

Los registros CNAME (Canonical Name) personalizados son un tipo de registro DNS que se utilizan para alias o redireccionar un dominio o subdominio a otro dominio. En el contexto que mencionas, "Custom CNAME Records" se refiere a la capacidad de agregar registros CNAME específicos para los dominios asociados a tu cuenta de hosting, por ejemplo, para integrar servicios de terceros como Google Apps.

¿Qué es un Registro CNAME?
Un registro CNAME es un tipo de entrada en el sistema DNS (Domain Name System) que asigna un alias a un nombre de dominio. Específicamente, un CNAME redirige un dominio o subdominio a otro dominio. Esto es útil cuando deseas que múltiples dominios o subdominios se dirijan al mismo contenido, sin tener que duplicar los registros A (que apuntan a una dirección IP específica).

Cliente FTP (Filezilla)

FileZilla es un cliente FTP (File Transfer Protocol) y SFTP (SSH File Transfer Protocol) gratuito y de código abierto. Está diseñado para facilitar la transferencia de archivos entre tu computadora local y un servidor remoto. FileZilla es ampliamente utilizado por desarrolladores web, administradores de sistemas y cualquier persona que necesite transferir archivos a través de Internet de manera segura y eficiente.

🧩Características Principales de FileZilla:

Interfaz de Usuario Amigable:

Explorador de Archivos: FileZilla proporciona una interfaz gráfica que muestra el sistema de archivos local y el remoto en dos paneles separados, permitiendo arrastrar y soltar archivos para transferirlos.
Gestor de Sitios: Permite guardar las configuraciones de conexión para varios servidores, facilitando la gestión de múltiples sitios.

Protocolos Soportados:

FTP: El protocolo estándar para la transferencia de archivos.
FTPS: FTP sobre TLS/SSL, que proporciona una capa adicional de seguridad.
SFTP: Transferencia de archivos sobre SSH, lo que ofrece una seguridad robusta.

Seguridad:

Autenticación SSH: Para conexiones SFTP, FileZilla soporta la autenticación mediante claves SSH.
Encriptación TLS/SSL: Para conexiones FTPS, asegurando que los datos transferidos estén cifrados y protegidos.

Gestión de Transferencias:

Cola de Transferencia: Permite ver y gestionar las transferencias de archivos en curso y pendientes.
Reanudación de Transferencias: Si una transferencia se interrumpe, FileZilla puede reanudarla desde donde se quedó.

Compatibilidad Multiplataforma:

Sistemas Operativos: FileZilla está disponible para Windows, macOS y Linux, lo que lo hace accesible para una amplia gama de usuarios.

Funciones Adicionales:

Soporte para IPv6: Permite conexiones en redes que utilizan el protocolo IPv6.
Límites de Velocidad: Los usuarios pueden establecer límites de velocidad para las transferencias de archivos.
Marcadores: Facilita el acceso rápido a directorios frecuentemente utilizados.

🧩Uso de FileZilla:

Conexión a un Servidor:

Configuración: Introduce el nombre del host, el puerto (21 para FTP, 22 para SFTP), el nombre de usuario y la contraseña.
Conexión Rápida: Utiliza la barra de conexión rápida para conectarse a un servidor sin guardar la configuración.

Transferencia de Archivos:

Arrastrar y Soltar: Arrastra archivos desde el panel local al panel remoto para subirlos, o viceversa para descargarlos.`
Cola de Transferencia: Observa el progreso de las transferencias y maneja múltiples transferencias simultáneamente.

Gestión de Archivos:

Operaciones Básicas: Renombrar, eliminar y crear nuevos directorios tanto en el sistema de archivos local como en el remoto.

🧩Ejemplos de Uso:

Desarrollo Web: Subir archivos de un sitio web a un servidor web.
Backup: Descargar copias de seguridad de archivos almacenados en un servidor remoto.
Administración de Sistemas: Transferir archivos de configuración y scripts a servidores remotos.

Bootstrap - Sistema de cuadricula

Fernando — Tue, 02 Jul 2024 22:50:04 +0000

Sistema de cuadricula.

En Bootstrap, el sistema de cuadrícula es útil para crear diseños rápidos de páginas web que respondan a los diferentes dispositivos según el tamaño de las pantallas.

El sistema de cuadrícula de arranque utilizará una serie de contenedores , filas y columnas para definir el diseño y alinear el contenido de forma adecuada según el dispositivo. En el sistema de cuadrícula, puede agregar hasta 12 columnas y tantas filas como desee, y las columnas se reorganizarán automáticamente según el tamaño de la pantalla del dispositivo.

Usando un sistema de cuadrícula bootstrap, podemos crear un diseño de página web responsivo definiendo las 12 columnas individualmente o agrupando las columnas para crear columnas más anchas.

Clases de Cuadricula de Bootstrap

Bootstrap ha incluido cinco clases de cuadrícula predefinidas para escalar el contenido según el dispositivo o el tamaño de la ventana gráfica.

.col-*
.col-sm-*
.col-md-*
.col-lg-*
.col-xl-*

Clase	Tipo de dispositivo	Ancho
.columna-*	Extra Pequeño	<576 píxeles
.col-sm-*	Pequeño	≥576 píxeles
.col-md-*	Medio	≥768 píxeles
.col-lg-*	Grande	≥992 píxeles
.col-xl-*	Extra grande	≥1200 píxeles

Para crear diseños de páginas web responsivas utilizando un sistema de cuadrícula bootstrap, necesitamos usar filas y columnas dentro del contenedor o contenedor-fluido como se muestra a continuación.



<div class="contenedor">
    <div class="fila">
      <div class="col-*-*"></div>
      <div class="col- * - * "></div>
      <div class=" col - * - * "> </div>
    </div>
  </div>

Si observa el código anterior, creamos un diseño de cuadrícula especificando las filas y columnas dentro de .container. Aquí, la primera estrella ( *) indicará la capacidad de respuesta, y debe ser sm, md, lg o xl. La segunda estrella ( *) indicará un número, y debe ser de 1 a 12 para cada fila.
Cada vez que creamos un diseño de cuadrícula, necesitamos colocar el contenido dentro de las columnas ( .colo .col--) y esas columnas deben ser hijas de filas ( .row) y esas filas deben colocarse dentro de un contenedor ( .containero .container-fluid).
En el sistema de cuadrícula de Bootstrap, podemos agregar hasta 12 columnas dentro de una fila. Si agregamos más de 12 columnas dentro de una fila, esas columnas adicionales se colocarán en una nueva línea.

Diseño de cuadrícula Bootstrap con tres columnas adaptables

A continuación se muestra un ejemplo de creación de un diseño adaptable con tres columnas para admitir los dispositivos cuyo ancho de pantalla es superior a 576 px en bootstrap.



<div clase ="contenedor">
    <div clase ="fila">
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
    </div>
    <div clase ="fila" >
       <div clase ="col-sm-2"> col-sm-2 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-6"> col-sm-6 </div>
    </div>

    <div clase ="fila" >
       <div clase ="col-sm-2"> col-sm-2 </div>
       <div clase ="col-sm-5"> col-sm-5 </div>
       <div clase ="col-sm-5"> col-sm-5 </div> 
    </div>
 </div>

El ejemplo de Bootstrap anterior creará un diseño con tres columnas para admitir los dispositivos cuyo ancho de pantalla sea superior a 576 px en Bootstrap. Las tres columnas definidas se ajustarán automáticamente una sobre otra en dispositivos móviles o pantallas que tengan un ancho inferior a 576 px .

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Diseño de cuadrícula de Bootstrap con columnas automáticas.

En bootstrap, podemos crear columnas de ancho igual o automático para todos los dispositivos, como extra pequeño, pequeño, mediano, grande y extra grande, especificando solo .colla clase sin ningún número de columna.

El sistema de cuadrícula de arranque ajustará automáticamente las columnas definidas con .colla clase en función del ancho de la pantalla del dispositivo.

El siguiente ejemplo mostrará cómo crear columnas de igual ancho para admitir todos los dispositivos en bootstrap.



  <div class ="contenedor">
    <div class ="fila">
       <div class ="col"> columna 1 </div>
       <div class ="col"> columna 2 </div>
       <div class ="col"> columna 3 </div>
    </div>
    <div class ="fila">
       <div class ="col"> columna 1 </div>
       <div class ="col"> columna 2 </div>
    </div>
    <div class ="fila">
       <div class ="col"> columna 1 </div>
    </div>
</div>

Si observa el ejemplo anterior, creamos columnas solo con la clase .col. Por lo tanto, el sistema de cuadrícula de Bootstrap ajustará el tamaño de las columnas de manera uniforme según el tamaño de la pantalla del dispositivo.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Diseño de cuadrícula de Bootstrap con columnas de ancho variable

En Bootstrap, al usar col-{breakpoint}-auto clases, podemos crear columnas de ancho variable para redimensionarlas según el ancho de su contenido.

A continuación se muestra un ejemplo de creación de columnas de ancho variable para redimensionarlas según el ancho del contenido en bootstrap.



<div class ="container">
   <div class ="row" >
      <div class ="col-sm-5" > col 1 </div >
      <div class ="col-md-auto" > Contenido de columna de ancho variable </div >
      <div class ="col-sm-3" > col 2 </div >
   </div >
   <div class ="row" >
      <div class ="col" > col 1 </div >
      <div class ="col" > col 2 </div >
      <div class ="col-md-auto"> Contenido de columna de ancho variable </div >
   </div>
</div>

Si observa el ejemplo anterior, creamos columnas de ancho variable especificando col-md-autola clase y esas columnas se ajustarán automáticamente en función del ancho del contenido.

Cuando ejecutamos el ejemplo de arranque anterior, devolverá el resultado que se muestra a continuación.

Si observa el resultado anterior, la parte de color gris está vacía debido al ancho de las columnas ajustado según el contenido y el tamaño definido.

Diseño de cuadrícula de Bootstrap con diferentes tamaños de columnas

Creamos un diseño de cuadrícula específico para los dispositivos en particular, es decir, extra pequeño, pequeño, grande o extra grande. En Bootstrap, podemos crear diseños más flexibles combinando los distintos tamaños de columna para cambiar la orientación de las columnas en función del tamaño del dispositivo.

Por ejemplo, las pantallas pequeñas necesitan tener una columna en cada fila, mientras que las pantallas más grandes pueden contener más de una columna en cada fila, de modo que se puede establecer un tamaño de columna más pequeño, pero múltiples columnas en cada fila. Para entender a qué me refiero, veremos un ejemplo.

A continuación se muestra un ejemplo de creación del diseño de cuadrícula de arranque mezclando diferentes tamaños de columna para los tamaños de dispositivo.



<div class ="contenedor">
   <div class ="fila ">
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 1 </div>
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 2 </div>
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 3 </div>
   </div>
</div>

El ejemplo anterior mostrará una fila con 3 columnas en pantallas grandes y medianas. En pantallas pequeñas, mostrará una fila con 2 columnas y otra fila más con otra columna en la mitad de la pantalla. En pantallas extra pequeñas, como las de los teléfonos inteligentes, veremos 3 filas y cada una tendrá una columna a pantalla completa.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Así es como podemos crear diseños de cuadrícula más flexibles combinando múltiples tamaños de columnas para cambiar la orientación de las columnas en función del tamaño del dispositivo en Bootstrap.

Desplazamiento de columnas en el diseño de cuadrícula de Bootstrap

En el diseño de cuadrícula de Bootstrap, podemos mover columnas hacia la derecha mediante el uso de .offset-*clases de cuadrícula. Para desplazar una columna, debe agregar offset-*un sufijo a su clase de columna existente. Por ejemplo, si su clase de columna es , .col-md-4puede desplazar la columna con la clase .offset-md-4. El número después del desplazamiento simboliza cuántas columnas se agregarán como margen.

A continuación se muestra un ejemplo de cómo compensar las columnas de la cuadrícula utilizando .offset-*clases en bootstrap.




  <div clase="contenedor">
    <div clase="fila">
      <div clase="col-md-4"> .col-md-4 < /div>
          <div clase="col-md-4 offset-md-4"> .col-md-4 .offset-md-4 </div>
      </div>
      <div clase="fila">
        <div clase="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
        <div clase="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
      </div>
      <div clase="fila">
        <div clase="col-md-6 offset-md-3"> .col-md-6 .offset-md-3 </div>
      </div>
    </div>

Si observa el ejemplo anterior, estamos aumentando el margen izquierdo de una columna en 4 y 3 columnas mediante el uso de las clases offset-md-4y offset-md-3.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Reordenamiento de columnas en el diseño de cuadrícula de Bootstrap

En el sistema de cuadrícula de bootstrap, podemos reordenar la apariencia de las columnas de la cuadrícula mediante el uso .order-*de clases sin cambiar su orden real en un diseño de cuadrícula.

En el diseño de cuadrícula, el orden de las columnas de la cuadrícula variará según los números de orden definidos. Por ejemplo, las columnas de la cuadrícula con un orden inferior (por ejemplo, .col, .order-1) o sin clases de orden aparecerán primero, y las columnas con números de orden superior aparecerán después de las columnas con números de orden inferior. El sistema de cuadrícula admitirá el orden de las columnas del 1 al 12 en los cinco niveles de la cuadrícula.

A continuación se muestra un ejemplo de cómo cambiar la apariencia de las columnas de la cuadrícula especificando el número de orden en bootstrap.



<div class ="contenedor" >
   <div class ="fila" >
      <div class ="col order-10" > Primero </div>
      <div class ="col order-4" > Segundo </div>
      <div class ="col" > Tercero </div >
   </div>
</div>

Si observa el ejemplo anterior, estamos cambiando el orden de las columnas especificando los números de orden ( order-10, order-4) y para la tercera columna, no especificamos ninguna clase de orden.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Si observa el resultado anterior, la apariencia de las columnas de la cuadrícula cambió según el número de orden de las columnas. La tercera columna apareció primero porque no especificamos ninguna clase de orden, por lo que se considerará la más baja.

También podemos cambiar el orden de las columnas del diseño de la cuadrícula utilizando las clases .order-firsty .order-lastcomo se muestra a continuación.



<div class ="contenedor" >
   <div class ="fila" >
      <div class ="col order-last" > Primero </div>
      <div class ="col order-first" > Segundo </div>
      <div class ="col" > Tercero </div>
   </div >
</div >

Si observa el ejemplo anterior, estamos intentando cambiar la apariencia de la columna mediante el uso de las clases .order-firsty .order-last.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Si observa el resultado anterior, la segunda columna apareció primero debido a la asignación de la .order-firstclase y la primera columna se movió al último debido a la .order-lastclase.

Columnas anidadas en cuadrícula de Bootstrap

Anidar columnas significa que puedes agregar columnas dentro de otra columna. Puedes insertar hasta 12 columnas dentro de otra columna sin tener que usar necesariamente las 12 columnas. Para ello, debes agregar una nueva fila ( .row) y un conjunto de .col-md-columnas dentro de una columna existente .col-md-.

A continuación se muestra un ejemplo de cómo anidar las columnas de la cuadrícula dentro de otra columna en el diseño de la cuadrícula de bootstrap.



  <div class="container">
    <div class="row">
      <div class="col-sm-9"> Primera columna
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Columna 1 dentro de la primera columna
          </div>
          <div class="col-xs-4 col-sm-6">
            Columna 2 dentro de la primera columna
          </div>
        </div>
      </div>
      <div class="col"> Segunda columna </div>
    </div>
  </div>

Si observa el ejemplo anterior, creamos columnas de cuadrícula anidadas agregando una nueva fila ( .row) y un conjunto de columnas dentro de una .col-sm-9columna existente.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Así es como podemos crear columnas anidadas en el diseño de la cuadrícula de Bootstrap según nuestros requisitos.

Ajuste de columnas de la cuadrícula Bootstrap

Bootstrap está diseñado para 12 columnas por fila. Si utiliza más de 12 columnas en una fila, las columnas adicionales se colocarán en una nueva línea como una unidad.

A continuación se muestra un ejemplo de creación de un diseño de cuadrícula de arranque con más de 12 columnas por fila para lograr el ajuste de columnas.



<div class ="container">
    <div class ="row">
        <div class ="col-sm-9" > Primera columna < /div >
        <div class ="col-sm-4" > Segunda columna < /div >
        <div class ="col-sm-8" > Tercera columna < /div >
    </div>
</div>

Si observa el ejemplo anterior, la primera columna tiene un ancho de 9 columnas y la segunda tiene 4 (9 + 4 = 13) , por lo que las columnas no pueden estar en una fila y las columnas adicionales se ajustarán en una nueva línea.

Cuando ejecutamos el ejemplo anterior, obtendremos el resultado que se muestra a continuación.

Así es como se producirá el ajuste de columnas en el sistema de cuadrícula de bootstrap cuando se utilizan más de 12 columnas dentro de una fila.

Animaciones y transiciones

Fernando — Thu, 27 Jun 2024 13:49:49 +0000

Animaciones y transiciones

Ejes

X:Se refiere a la posición horizontal, de izquierda a derecha.
Y:Se refiere a la posición vertical, de arriba a abajo.
Z:Se refiere a la posición hacia delante o atrás

Gradientes

es una transicion suave entre dos o mas colores.

Linear gradient:

El gradiente lineal va avanzando linea a linea,

Estructura

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: Especifica la dirección del gradiente. Puede ser un ángulo (por ejemplo, 45deg) o palabras clave como to right, to left, to bottom, etc.

color-stop: Son los colores por los cuales el gradiente pasa. Puede incluir múltiples colores.

Ejemplo base

HTML

    <header>
      <div class="hero-image">
        <h1>
          Clase 14 <br />
          Animaciones y Transiciones
        </h1>
        <button class="hero-button">Click Me</button>
      </div>
    </header>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}

.hero-image {
  background: linear-gradient(to right, #6a82fb, #fc5c7d);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

h1 {
  font-size: 3em;
  margin: 0;
  padding: 0 20px;
}

.hero-button {
  margin-top: 20px;
  padding: 15px 30px;
  font-size: 1.2em;
  color: white;
  background-color: #fc5c7d;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-button:hover {
  background-color: #fd6584;
  transform: scale(1.1);
}

Ejemplo 1

.background {
  background: linear-gradient(to right, red, blue);
}

Este ejemplo crea un gradiente que va de rojo a azul, de izquierda a derecha.

Ejemplo 2

.background {
  background: linear-gradient(to bottom, red, yellow, green);
}

Este ejemplo crea un gradiente que va de rojo a amarillo a verde, de arriba a abajo.

Ejemplo 3

.background {
  background: linear-gradient(45deg, red, blue);
}

Este ejemplo crea un gradiente que va de rojo a azul en un ángulo de 45 grados.

Radial gradient:

Un gradiente radial es una transición suave de colores que se irradia desde un punto central hacia afuera en forma de círculo o elipse. A diferencia de los gradientes lineales que cambian de color a lo largo de una línea, los gradientes radiales cambian de color en círculos concéntricos alrededor de un centro.

Estructura

background: radial-gradient(
  shape size at position,
  color-stop1,
  color-stop2,
  ...
);

shape: Define la forma del gradiente, puede ser circle (círculo) o ellipse (elipse).
size: Especifica el tamaño del gradiente, puede ser closest-side, closest-corner, farthest-side, farthest-corner, etc.
position: Define la posición del centro del gradiente. Por defecto es center.
color-stop: Los colores por los cuales el gradiente pasa. Puede incluir múltiples colores.

Ejemplo 1

.background {
  background: radial-gradient(circle, red, blue);
}

Este ejemplo crea un gradiente radial en forma de círculo que va de rojo a azul.

Ejemplo 2

.background {
  background: radial-gradient(circle, red, yellow, green);
}

Este ejemplo crea un gradiente radial en forma de círculo que va de rojo a amarillo a verde.

Ejemplo 3

.background {
  background: radial-gradient(ellipse, 250px, 100px red, blue);
}

Este ejemplo crea un gradiente radial en forma de elipse que va de rojo a azul. podemos tambien especificar su tamaño

Transform

Una transformación es una modificación de la forma en que se muestra un elemento. Todo elemento transformado por CSS cambia la forma en que se ve, pero no el lugar que ocupa. Los efectos que se pueden lograr son:

translate(): Mueve el elemento en el plano 2D o 3D.
rotate(): Rota el elemento alrededor de un punto específico.
scale(): Escala el elemento en el plano 2D o 3D.
skew(): Inclina el elemento a lo largo de los ejes X e Y.
matrix(): Define una matriz 2D de transformación general.

transform: <transform-function>...;

Ejemplo general

transform: translateX(100px) rotate(45deg) scale(1.5);

Transform translate

Requiere dos números y su unidad, separados por una coma:

Estructura

transform: translate(tx, ty, tz);

El primero es el desplazamiento horizontal (eje X).
El segundo es el desplazamiento vertical (eje Y).
Valores positivos: mueven el elemento a la derecha/abajo.
Valores negativos: mueven el elemento a la izquierda/arriba.
También existen translateX() y translateY(), cada uno sólo recibe un número con su unidad.

Ejemplo base

 <section>
  <h2 class="title-translate">Transformaciones</h2>
      <div class="container">
        <div class="container-item">
          <!-- translate -->
          <div class="item translate">Translate</div>
        </div>
      </div>
</section>

.title {
  text-align: center;
  margin-top: 70px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-bottom: 70px;
}

.container-item {
  width: 300px;
  height: 300px;
  justify-self: center;
  border: 1px solid grey;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  margin: 30px;
}

.item {
  width: 100%;
  height: 100%;
  background-color: #6a82fb;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  gap: 20px;
}

/* translate */
.translate:hover {
  transform: translate(10px, 20px);
}

Transform Rotate

La rotación permite girar un objeto sin deformarlo. Se hace con el transform: rotate( ).
Recibe entre paréntesis un número, que representa la cantidad de grados a girar el objeto:

Estructura

transform: rotate(angle);

Si es positivo, rota hacia la derecha (en sentido horario).
Si es negativo, rota hacia la izquierda (sentido antihorario).

Por tratarse de grados, la unidad que acompaña el número será deg (degrees).

Ejemplo 1

 <div class="container-item">
    <div class="item rotate">Rotate</div>
</div>

/* rotate */
.rotate:hover {
  transform: rotate(45deg);
}

Ejemplo 2

<div class="container-item">
    <div class="item rotateX">RotateX</div>
</div>

/* rotateX */
.rotateX:hover {
  transform: rotateX(180deg);
}

Ejemplo 3

 <div class="container-item">
    <div class="item rotateY">RotateY</div>
</div>

/* rotateY */
.rotateY:hover {
  transform: rotateY(180deg);
}

Transform Scale

transform:scale( ), cambia la escala del objeto (como si fuese un zoom).

Estructura

transform: scale(sx, sy, sz);

Requiere dos números separados por coma:

El primero es el ancho (Escala en eje X).
El segundo es el alto (Escala en eje Y).
Valores mayores a 1, agrandan.
Valores entre 1 y 0, achican.
Valores negativos, escalan dado vuelta.
Si solo se quiere cambiar un eje, existen scaleX() y scaleY(),
cada uno sólo recibe un número.

Ejemplo 1

  <div class="container-item">
      <div class="item scale">Scale</div>
  </div>

/* scale */
.scale:hover {
  transform: scale(1.2);
}

Ejemplo 2

  <div class="container-item">
    <div class="item scaleX">ScaleX</div>
  </div>

.scaleX:hover {
  transform: scaleX(1.2);
}

Ejemplo 3

   <div class="container-item">
      <div class="item scaleY">ScaleY</div>
  </div>

.scaleY:hover {
  transform: scaleY(1.2);
}

Transform Skew

transform:skew( ) nos permite sesgar (torcer, deformar) objetos en CSS

Estructura

transform: skew(ax, ay);

Puede tener hasta dos números separados por coma:

Sus parámetros son los ángulos de deformación en grados sexagesimales (deg).
El primero indica el eje “X”.
El segundo indica el eje “Y”.

Ejemplo 1

  <div class="container-item">
      <div class="item skew">SkewX</div>
  </div>

/* skew */
.skew:hover {
  transform: skew(20deg, 10deg);
}

Ejemplo 2

    <div class="container-item">
      <div class="item skewX">SkewX</div>
    </div>

.skewX:hover {
  transform: skewX(20deg);
}

Ejemplo 3

  <div class="container-item">
      <div class="item skewY">SkewY</div>
  </div>

.skewY:hover {
  transform: skewY(20deg);
}

Transiciones

Con la propiedad transition, es posible lograr que al pasar el mouse por el elemento, el mismo “haga una animación”.

Recuerda que para los enlaces se utiliza a:hover, con el fin de que cambien sus estilos al pasar el mouse por encima. Esta pseudoclase se puede utilizar con cualquier elemento sobre el cual quisieras ejecutar una transición: un div, span, párrafo, etc.

Estructura

transition: <property> <duration> <timing-function> <delay>;

Propiedades principales de las transiciones:

transition-property: Especifica la propiedad CSS a la que se aplicará la - transición.
transition-duration: Define cuánto tiempo debe durar la transición.
transition-timing-function: Describe cómo debe progresar la
transición (por ejemplo, de manera lineal, rápida al principio, etc.).
- linear: La transición se produce a una velocidad constante.
- ease: La transición empieza lentamente, se acelera en el medio y luego desacelera al final.
- ease-in: La transición comienza lentamente y luego acelera.
- ease-out: La transición comienza rápidamente y luego desacelera.
- ease-in-out: La transición comienza lentamente, se acelera en el medio y luego desacelera al final.
- step-start: La transición salta instantáneamente al valor final al comienzo.
- step-end: La transición se mantiene en el valor inicial hasta el final, cuando salta instantáneamente al valor final.
- steps(int, start|end): Divide la transición en un número fijo de intervalos o pasos. int es el número de pasos y start o end especifican si el cambio ocurre al comienzo o al final de cada intervalo.
transition-delay: Especifica un retraso antes de que comience la transición.

Ejemplo1

    <!-- Cambio de color de fondo -->

  <div class="box1"></div>

/* Cambio de color */

.box1 {
  width: 100px;
  height: 100px;
  background-color: rgb(106, 13, 134);
  transition: background-color 0.5s ease-in-out;
  margin: auto;
}

.box1:hover {
  background-color: rgb(184, 42, 177);
}

Ejemplo 2

<!-- Cambio de tamaño -->


 <div class="box2"></div>

/* Cambio de tamaño */

.box2 {
  width: 100px;
  height: 100px;
  background-color: rgb(155, 18, 86);
  transition: width 1s, height 1s;
  margin: 70px auto;
}

.box2:hover {
  width: 200px;
  height: 200px;
}

En este ejemplo, al pasar el ratón sobre el div con clase box,
su tamaño cambiará de 100px a 200px en ambos sentidos (ancho y alto)
en 1 segundo.

Ejemplo 3

<!-- Desplazamiento con manipulación de los tiempos -->

<div class="box3"></div>

/* Desplazamiento con manipulación de los tiempos*/

.box3 {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: transform 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  margin: 70px auto;
}

.box3:hover {
  transform: translateX(200px);
}

En este ejemplo, se utiliza la función de tiempo cubic-bezier
para crear una transición personalizada. Al pasar el ratón
sobre el div con clase box, este se moverá 200px a la derecha
en 1 segundo siguiendo la curva de la función cubic-bezier.

cubic-bezier es una función que te permite definir una curva
de tiempo personalizada para la transición. Esta función acepta
cuatro valores numéricos que representan los puntos de control de
una curva de Bezier cúbica. Estos puntos de control determinan
cómo varía la velocidad de la transición a lo largo del tiempo.

Punto de control P1 (x1, y1):

x1: Controla la posición horizontal del primer punto de control.
y1: Controla la posición vertical del primer punto de control.
Punto de control P2 (x2, y2):

x2: Controla la posición horizontal del segundo punto de control.
y2: Controla la posición vertical del segundo punto de control.
Funcionamiento de los puntos de control:

Valores de x (horizontal): Determinan cómo varía la aceleración
o desaceleración de la transición a lo largo del tiempo.

Un valor bajo de x (cerca de 0) indica una aceleración inicial rápida.
Un valor alto de x (cerca de 1) indica una aceleración o
desaceleración más suave.

Valores de y (vertical): Afectan la tasa de cambio de velocidad
durante la transición.

Un valor bajo de y (cerca de 0) indica una transición más lineal o uniforme.
Un valor alto de y (cerca de 1) indica cambios bruscos en la velocidad,
como una aceleración inicial seguida de una desaceleración rápida,
o viceversa.

Estos valores determinan cómo se comporta la aceleración
y desaceleración de la transición transform durante 1 segundo

Animaciones

A diferencia de la transición, una animación es un efecto que se repite en bucle (en loop) tantas veces como se quiera.

No depende del cambio de estado (el elemento se animará desde la carga de la web).

Es la unión de dos partes: por un lado, una línea de tiempo (llamada keyframe) con la información de los cambios; por otro, aplicar ese keyframe a un elemento que será el que se verá animado.

Estructura de una Animación en CSS

1. Definición de @keyframes

La regla @keyframes especifica cómo cambia un elemento durante una animación a lo largo del tiempo. Puedes definir varios pasos (keyframes) que describen los estilos que el elemento debe tener en puntos específicos durante la animación.

@keyframes nombreAnimacion {
  0% {
    /* Estilos al inicio de la animación (0% del tiempo) */
  }
  50% {
    /* Estilos a la mitad de la animación (50% del tiempo) */
  }
  100% {
    /* Estilos al final de la animación (100% del tiempo) */
  }
}

nombreAnimacion: Es el nombre que le das a la animación. Puedes usar este nombre más tarde para aplicar la animación a un elemento.

Porcentajes (0%, 50%, 100%, etc.): Representan el progreso de la animación en relación con su duración total. Puedes definir estilos para cualquier porcentaje entre 0% y 100%, y CSS interpolara automáticamente los estilos entre estos puntos.

2. Aplicación de la Animación

/* Aplicación de la animación a un elemento */
.elemento {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: mover 3s ease-in-out infinite;
}

Una vez definida la animación con @keyframes, la aplicas a un elemento utilizando la propiedad animation.

nombreAnimacion: Es el nombre de la animación definida con @keyframes.

2s: Especifica la duración de la animación (en este caso, 2 segundos).

ease-in-out: Especifica la función de temporización de la animación, que determina cómo cambia la velocidad de la animación a lo largo del tiempo. Puedes usar valores como linear, ease, ease-in, ease-out, ease-in-out, o una función personalizada cubic-bezier.

infinite: Indica que la animación se repetirá indefinidamente. Puedes usar un número específico de repeticiones (3, 5, etc.) en lugar de infinite si deseas que la animación se repita un número determinado de veces.

Estructura general

animation: <nombre> <duración> <función-de-temporización> <retraso>
  <iteraciones> <dirección> <modo-de-llenado> <estado-de-reproducción>;

nombre: Especifica el nombre de la animación (@keyframes) que se aplicará.

duración: Define cuánto tiempo durará la animación. Puede ser especificada en segundos (s) o milisegundos (ms).

función-de-temporización: Indica cómo se interpolarán los valores durante la animación. Puedes utilizar funciones predefinidas (ease, linear, ease-in, ease-out, ease-in-out) o una función personalizada (cubic-bezier(x1, y1, x2, y2)).

retraso: Opcional. Define cuánto tiempo esperará la animación antes de comenzar a ejecutarse. Puede ser especificado en segundos (s) o milisegundos (ms).

iteraciones: Opcional. Indica cuántas veces se repetirá la animación. Puedes usar valores como infinite para repetición continua o un número específico para un número finito de repeticiones.

dirección: Opcional. Define la dirección en la que se ejecutará la animación (normal, reverse, alternate, alternate-reverse).

modo-de-llenado: Opcional. Especifica qué estilos deben aplicarse antes y después de la ejecución de la animación (forwards, backwards, both, none).

estado-de-reproducción: Opcional. Define si la animación está en ejecución (running) o pausada (paused).

Ejemplo Basico Completo

HTML

    <div class="elemento"></div>

CSS

/* Definición de la animación */
@keyframes mover {
  0% {
    transform: translateX(0); /* Estado inicial */
  }
  50% {
    transform: translateX(100px); /* Estado a la mitad de la animación */
    background-color: blue; /* Cambio de color a la mitad */
  }
  100% {
    transform: translateX(200px); /* Estado final */
    background-color: green; /* Cambio de color al final */
  }
}

.elemento {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: mover 3s ease-in-out infinite;
}

Ejemplo 1


  <div class="container-chicle">
    <p class="chicle">Texto de prueba</p>
  </div>

.container-chicle {
  width: 500px;
  margin: auto;
}

.chicle {
  font-family: Arial;
  font-size: 50px;
  text-align: center;
  margin: 50px;
}

/* Asignamos la animación mediante pseudoclases cuando 
haya una interacción del usuario */

.chicle:hover {
  animation: 1s chicle 1;
}

/* Creamos la animación (con keyframes) */

@keyframes chicle {
  30% {
    transform: scaleX(1.2) scaleY(0.7);
  }

  40% {
    transform: scaleX(0.7) scaleY(1.2);
  }

  60% {
    transform: scaleX(1.1) scaleY(0.8);
  }
}

Sass II - Funciones avanzadas

Fernando — Tue, 25 Jun 2024 15:34:20 +0000

Operador &

El operador & en SASS es un operador de referencia que se utiliza para hacer referencia al selector actual dentro de una regla anidada. Es especialmente útil para aplicar estilos a pseudo-clases, pseudo-elementos, y combinadores, así como para anidar selectores complejos de manera más organizada.

HTML

<button class="button">Click Me</button>

SCSS

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  // Usando el operador & para el estado hover
  &:hover {
    background-color: #2980b9;
  }
}

Condicionales

Imagina que estás pintando diferentes tipos de casas con colores diferentes dependiendo de su tamaño. Si una casa es pequeña, la pintas de verde. Si es grande, la pintamos de negro. En este caso:

Condición: Es como una pregunta que haces antes de decidir qué color usar. Por ejemplo, preguntas "¿La casa es grande o pequeña?".
Respuesta: Es lo que decides hacer después de hacer la pregunta. Si la casa es grande, decides pintarla de azul. Si es pequeña, decides pintarla de verde.

En Sass, los condicionales funcionan de manera similar. Puedes decirle a Sass que haga algo dependiendo de cómo sean las cosas (como el tamaño de un botón en tu página web). Por

Estructura

// Definición de una variable
$variable: valor;

// Uso de un condicional @if
selector {
  @if condición-1 {
    // Estilos si condición-1 es verdadera
  } @else if condición-2 {
    // Estilos si condición-2 es verdadera
  } @else {
    // Estilos si ninguna de las condiciones anteriores es verdadera
  }
}

@if

Ejemplo 1

HTML

<button class="button">Ver más</button>

SCSS

$button-width: 100px;

.button {
  padding: 10px 20px; // Padding fijo
  color: white;
  font-size: 16px; // Tamaño de fuente fijo
  width: $button-width; // Ancho del botón
  border: none;

  // Condiciones para el color de fondo basado en el ancho del botón
  @if $button-width > 120px {
    background-color: black;
    color: white;
  } @else {
    background-color: green;
    color: white;
  }
}

Bucles

Imagina que estás en una fábrica de autos. cada auto que se trmina de fabricar tiene que llevar un numero diferente identificando el orden en que fue creado, En lugar de escribir cada número uno por uno en cada etiqueta, usas una máquina especial que los imprime automáticamente en orden.

Bucle: Es como esa máquina especial que te ayuda a imprimir todos los números en las etiquetas de los autos sin tener que hacerlo manualmente.

En Sass, los bucles son como esa máquina especial. Te permiten repetir una acción (como escribir estilos CSS) para muchos elementos diferentes (como botones, en nuestro caso) de manera automática y ordenada.

@for

Estructura

// Uso de un bucle @for
@for $i from start through end {
  selector-#{$i} {
    // Estilos que usan $i
  }
}

Variable de Iteración: La variable de iteración $i se puede utilizar dentro del bloque de estilos para aplicar estilos dinámicos basados en su valor actual.

Interpolación: Utiliza la interpolación #{$i} para crear selectores y propiedades dinámicas.

Uso de through vs. to:
through: Incluye el valor final en la iteración (1 through 3 incluirá 1, 2 y 3).
to: Excluye el valor final en la iteración (1 to 3 incluirá 1 y 2, pero no 3).

Ejemplo 1

HTML

    <div class="container-item">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>

SCSS

.container-item {
  display: flex;
}

@for $i from 1 through 3 {
  .item:nth-child(#{$i}) {
    width: 300px;
    height: 50px;
    background-color: lighten(#db34a3, $i \* 10%);
    color: white;
    padding: 10px;
    margin: 5px 5px;
  }
}

Ejemplo 2

HTML

    <div class="container-circle">
      <div class="circle">1</div>
      <div class="circle">2</div>
      <div class="circle">3</div>
      <div class="circle">4</div>
      <div class="circle">5</div>
      <div class="circle">6</div>
    </div>

SCSS

.container-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

@for $i from 1 through 6 {
  .circle:nth-child(#{$i}) {
    background-color: hsl(241, 57%, 45%);
    border-radius: 50%;
    width: 50px * $i;
    height: 50px * $i;
  }
}

@each

Es una directiva que permite iterar sobre listas de datos en forma de pares clave-valor. Es muy útil para generar estilos de manera dinámica basados en datos estructurados como mapas o listas.

Estructura

@each <variable> in <expression> { ... }

Ejemplo 1

HTML

<div class="buttons-container">
    <a href="#" class="button-red">Botón Rojo</a>
    <a href="#" class="button-blue">Botón Azul</a>
    <a href="#" class="button-green">Botón Verde</a>
  </div>

SCSS

// Definimos una lista de colores
$colores: red, blue, green;

// Aplicamos estilos a botones usando @each
@each $color in $colores {
  .button-#{$color} {
    background-color: $color;
    padding: 10px 20px;
    color: white;
    text-transform: uppercase;
    margin-right: 10px;
    display: inline-block;
    text-decoration: none;

    &:hover {
      background-color: lighten($color, 10%);
    }
  }
}

@map

En Sass, @map es una característica que permite trabajar con mapas, una estructura de datos que almacena pares clave-valor. Los mapas son útiles para manejar y organizar datos de manera eficiente dentro de los estilos CSS.

Estructura

$map-name: (
  key1: value1,
  key2: value2,
  key3: value3
);

Ejemplo 1

HTML

 <div class="social-buttons">
    <a href="#" class="social-button-facebook">Facebook</a>
    <a href="#" class="social-button-twitter">Twitter</a>
    <a href="#" class="social-button-instagram">Instagram</a>
    <a href="#" class="social-button-linkedin">LinkedIn</a>
    <a href="#" class="social-button-youtube">YouTube</a>
  </div>

SCSS

// Definimos un mapa de redes sociales y sus colores
$redes-sociales: (
  facebook: #3b5998,
  twitter: #1da1f2,
  instagram: #c13584,
  linkedin: #0077b5,
  youtube: #c4302b,
);

// Aplicamos estilos a botones de redes sociales usando el mapa
@each $red-social, $color in $redes-sociales {
  .social-button-#{$red-social} {
    background-color: $color;
    padding: 12px 24px;
    color: white;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid darken($color, 20%);
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;

    &:hover {
      background-color: lighten($color, 10%);
    }
  }
}

Definimos un mapa $redes-sociales donde cada clave (facebook, twitter, instagram, linkedin, youtube) está asociada a un color específico en formato hexadecimal.

Utilizamos @each para iterar sobre las claves y valores del mapa. Para cada iteración, generamos una clase de estilo de botón (social-button-{red-social}) donde {red-social} es el nombre de la red social.

Aplicamos estilos como background-color, color, padding, border, y border-radius utilizando las variables $color y $red-social interpoladas.

@mixin

Un mixin en SASS es una forma de reutilizar y organizar bloques de código CSS para poder aplicarlos fácilmente en varios lugares de tu código. Funciona como una especie de función en la que defines un conjunto de estilos que puedes incluir en otros estilos CSS cuando los necesites.

Estructura

@mixin nombre-del-mixin($parametro1, $parametro2, ...) {
  // Bloque de estilos CSS
}

@mixin nombre-del-mixin: Define el nombre del mixin.
$parametro1
$parametro2: Lista de parámetros opcionales que el mixin puede aceptar.

Ejemplo 1

HTML


 <div class="tarjeta">
    <h2>Tarjeta Normal</h2>
    <p>Contenido de la tarjeta normal.</p>
  </div>

  <div class="tarjeta-destacada">
    <h2>Tarjeta Destacada</h2>
    <p>Contenido de la tarjeta destacada.</p>
  </div>

SCSS

@mixin card($background-color, $border-radius) {
  background-color: $background-color;
  border-radius: $border-radius;
  width: 300px;
  padding: 20px;
  margin: 20px;
}

.tarjeta {
  @include card(#f0f0f0, 8px);
}

.tarjeta-destacada {
  @include card(#3498db, 4px);
}

Ejemplo 2

HTML

  <div class="button-container">
    <a href="#" class="button-primary">Primary Button</a>
    <a href="#" class="button-secondary">Secondary Button</a>
    <a href="#" class="button-danger">Danger Button</a>
    <a href="#" class="button-outline">Outline Button</a>
  </div>

SCSS

// Definimos un mixin para estilos de botones
@mixin button($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: lighten($bg-color, 10%);
  }
}

// Aplicamos el mixin a diferentes variantes de botones
.button-primary {
  @include button(#3498db);
}

.button-secondary {
  @include button(#2ecc71);
}

.button-danger {
  @include button(#e74c3c);
}

.button-outline {
  @include button(transparent, #3498db);
}

@extend

La instrucción @extend en Sass permite compartir reglas de estilo entre diferentes selectores. En lugar de duplicar código, puedes hacer que un selector herede las propiedades de otro.

Estructura

.base-selector {
  // propiedades comunes
}

.new-selector {
  @extend .base-selector;
  // propiedades adicionales
}

Ejemplo 1

HTML

    <div>
        <button class="boton">Botón</button>
        <button class="boton boton--aceptar">Aceptar</button>
        <button class="boton boton--cancelar">Cancelar</button>
    </div>

SCSS

.boton {
  width: 200px;
  height: 50px;
  background-color: white;
  text-align: center;
  color: black;
  border-radius: 20px;
  border: 1px solid black;
}

.boton--aceptar {
  @extend .boton;
  background-color: green;
  color: yellow;
}

.boton--cancelar {
  @extend .boton;
  background-color: red;
  color: yellow;
}

Diferencia entre extends y mixin

Extends

Para compartir fragmentos de estilos idénticos entre componentes.

mixins

Para reutilizar fragmentos de estilos que puedan tener un resultado diferente en cada lugar donde los declaremos.

Sass I

Fernando — Thu, 20 Jun 2024 03:50:03 +0000

Sass es un preprocesador CSS que nos permite dotar de superpoderes a css por medio de la anidación de selectores, la creación de archivos parciales, y funciones avanzadas, Todo este proceso será compilado por el compilador de sass para entregarnos finalmente un único archivo css ya listo y optimizado para producción.

Que es la compilación de código?

La compilación de código es el proceso de transformar código fuente escrito en un lenguaje de programación de alto nivel (como C++, Java, o TypeScript) a un lenguaje de nivel inferior (como código máquina, bytecode, o JavaScript) que puede ser ejecutado por una computadora. Este proceso es realizado por un compilador, que toma el código fuente, lo analiza, lo optimiza y genera el código objeto correspondiente.

Proceso de instalación y Compilación con Node.

Instalamos SASS por medio de la terminal de comandos utilizando NPM:

npm install -g sass

Una vez instalado, puedes compilar un archivo SASS indicando en el comando el archivo que quieres compilar y seguido la ruta destino y el nombre con el que quieres que la compilación salga. Por ejemplo puedes compilar un archivo llamado styles.scss a CSS ejecutando el siguiente comando en la terminal:

sass styles.scss styles.css

Este comando compilará styles.scss y generará un archivo styles.css con los estilos en CSS. Cabe aclarar que el archivo de salida de la compilación puede llevar el nombre que tú quieras.

Para lograr compilar y que el resultante ya esté optimizado y comprimido ejecutamos el siguiente comando:

npx sass --style=compressed input.scss output.css

También podemos hacer que el resultado de la compilación sea mas legible y amigable para esto podemos ejecutar el siguiente comando:

npx sass --style=expanded input.scss output.css

Es importante que sepamos que de esta forma el archivo css resultante no se encuentra optimizado es por eso que la opcion recomendable para compilar es compressed.

Si queremos que la terminal esté pendiente de los nuevas modificaciones y siga con el proceso de compilación sin que el mismo se paré podemos ejecutar el siguiente comando:

npx sass --watch input.scss output.css

con la combinación de teclas ctrl + c podemos frenar el proceso de compilación en cualquier momento.

Proceso de compilacion con la extensión Live Sass compiler.

Buscamos la extensión en la parte de extensiones de visual studio Code.

configuramos las opciones que nos ofrece live sass:

Ya dentro de la configuración de la extensión damos click en settings Json dentro de la opción Format

Una vez dentro nos encontraremos con el archivo de configuración de Visual Studio donde debemos pegar el siguiente fragmento de código para definir el tipo de compilación y la carpeta de destino de la misma.

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css" 
    }
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.showOutputWindow": true
}

format: Especifica el formato del CSS generado. Puede ser nested, expanded, compact, o compressed.
extensionName: La extensión del archivo compilado.
savePath: La ruta donde se guardarán los archivos compilados. Puedes especificar una ruta relativa a la ubicación del archivo SCSS.

Diferentes formatos de compilacion

Formato compact

Descripción: En el formato compact, cada regla CSS se escribe en una sola línea.
Características:
Menos líneas en comparación con el formato expanded.
Las reglas aún son legibles.
No elimina espacios en blanco innecesarios ni comentarios.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}

Se convierte en :

.class1 { color: red; }
.class2 { color: blue; }

Formato compressed

Descripción: En el formato compressed, el CSS generado está completamente minificado.
Características:
Elimina todos los espacios en blanco innecesarios.
Elimina los comentarios.
Todo el CSS se escribe en una sola línea.
Ideal para la producción, ya que reduce el tamaño del archivo.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}

Se convierte en:

.class1{color:red}.class2{color:blue}

Nested

Características del Formato nested
Estructura Jerárquica: Mantiene la estructura de anidamiento de los selectores como se escriben en el archivo Sass, lo que facilita la comprensión de las relaciones entre los selectores.
Legibilidad: Es fácil de leer y entender, ya que la salida CSS sigue una estructura similar a la del Sass original.
Espacios y Sangrías: Utiliza sangrías para mostrar la jerarquía de los selectores

.navbar {
  background-color: #333;

  .nav-item {
    color: #fff;

    &:hover {
      color: #f0f0f0;
    }
  }
}

Se convierte en:

.navbar {
  background-color: #333; }
  .navbar .nav-item {
    color: #fff; }
    .navbar .nav-item:hover {
      color: #f0f0f0; }

Sintaxis SASS

Nesting

El nesting en Sass se refiere a la capacidad de anidar selectores CSS dentro de otros selectores de una manera que refleja la jerarquía HTML, lo que facilita la organización y la legibilidad del código CSS.

¿Cómo Funciona el Nesting en Sass?
En lugar de escribir selectores CSS largos y repetitivos, puedes anidar selectores dentro de otros selectores para indicar que están relacionados. Sass luego convierte esta estructura anidada en CSS plano, expandiendo los selectores anidados según corresponda.

1) Ejemplo basico de Nesting en Sass

HTML básico

    <div>
      <p>Lorem ipsum</p>
    </div>
    <br />
    <br />
    <br />
    <br />

CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
}

div p {
  font-size: 20px;
  color: white;
  font-family: Arial, sans-serif;
}

Lo mismo escrito con sass

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
  p {
    font-size: 20px;
    color: white;
    font-family: Arial, sans-serif;
  }
}

2) Segundo Ejemplo mas complejo

HTML básico

    <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>
    <br />
    <br />
    <br />
    <br />

css inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

ul {
  list-style: none;
}

ul li {
  padding: 15px;
  display: inline-block;
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444;
}

Lo mismo escrito con SASS

ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }
  }
}

3) Tercer Ejemplo mas uso del operador &

El operador & en SASS es conocido como el operador de referencia padre y se utiliza principalmente para hacer referencia al selector de nivel superior dentro de una regla anidada. Este operador es útil para aplicar estilos en función del contexto del selector actual y permite crear selectores más específicos de manera concisa.

HTML inicial

 <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>

CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

li {
  color: blue;
}

li:hover {
  color: red;
}

Lo mismo escrito Con SASS

li {
  color: blue;
  &:hover {
    color: red;
  }
}

vars

Las variables son una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. SASS utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable.

Estas variables se comportan como atributos CSS, y su valor puede ser cualquiera que pudiera adquirir un atributo CSS.

Una buena práctica común consiste en definir todas las variables globales al principio del fichero, para que puedan localizarse rápidamente.

Ejemplo de variables:

    <div>
      <h4 class="titulo">Lorem ipsum</h4>
      <p class="informacion">Lorem, ipsum dolor sit amet</p>
    </div>
    <br />
    <br />
    <br />
    <br />

CSS inicial(Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

.titulo {
  font: normal;
  font-size: 24px;
  font-family: Open Arial, Helvetica, sans-serif;
  color: #a1a1a1;
}

.información {
  color: #444;
}

Lo mismo escrito con SASS


$fuente-titulo: normal, 48px/2, Open Arial, Helvetica, sans-serif;
$color-titulo: #a1a1a1;
$color-información: #444;

.titulo {
  font: $fuente-titulo;
  color: $color-titulo;
}

.información {
  color: #444;
}

Archivos Parciales (partials)

Estos archivos parciales suelen contener fragmentos de código reutilizables, como variables, mixins, funciones, y estilos comunes, que pueden ser compartidos entre múltiples archivos SASS. Estos archivos están destinados a ser importados en otros archivos SASS. los archivos parciales deben escribirse comenzando con _ (guión bajo) algunos ejemplos de archivos parciales pueden ser los siguientes:

_variables.scss
Este archivo contiene todas las variables que se usarán en el proyecto, como colores, fuentes, tamaños, etc.

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';

_reset.scss
Este archivo contiene un conjunto de estilos de "reset" para asegurar que los navegadores rendericen todos los elementos de forma más consistente.

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

_base.scss
Este archivo contiene estilos base para elementos HTML comunes.

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

h1, h2, h3, h4, h5, h6 {
  color: $secondary-color;
}

import

En Sass, @import se utiliza para incluir el contenido de un archivo en otro. Esto permite dividir el CSS en múltiples archivos más pequeños y organizados, lo que facilita la gestión y el mantenimiento del código. A diferencia del @import de CSS, que requiere que el navegador haga múltiples solicitudes HTTP, el @import de Sass se resuelve durante la compilación, combinando todos los archivos en un único archivo CSS.

Ejemplo Básico de @import

Supongamos que tienes dos archivos: por un lado un archivo parcial _variables.scss y por otro lado un archivo principal styles.scss.

_variables.scss

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

styles.scss

@import 'variables';

body {
font: 100% $font-stack;
color: $primary-color;
}

CSS Generado

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

Operaciones Con SASS

En Sass, puedes realizar una variedad de cálculos directamente en tus archivos de estilo, lo que te permite crear estilos dinámicos y flexibles. A continuación se presentan algunos ejemplos de cálculos que puedes hacer en Sass:

Suma

$base-spacing: 10px;
$double-spacing: $base-spacing + 10px;

.container {
  padding: $double-spacing; // 20px
}

Resta

$full-width: 100%;
$sidebar-width: 25%;
$content-width: $full-width - $sidebar-width;

.content {
  width: $content-width; // 75%
}

Potencia

$base: 2;
$exponent: 3;
$power: pow($base, $exponent);

.result {
  width: $power * 10px; // 80px (2^3 = 8)
}

DEV Community: Fernando

Algoritmos y control de flujo

Estructura Condicional

Valores booleanos

Operadores de comparación

Estructura inicial

Ejemplo condicional simple

Ejemplo Igualdad estricta

Ejemplo1

consideracion

Ejemplo 2

consideración

Ejemplo 3

consideración

Ejemplo 4

consideración

2 soluciones posibles

consideración

Ejemplo 6

consideración

Ejemplo 7

consideración

if else if

Ejemplo con estaciones del año

Pequeño simulador interactivo en JavaScript

Paso1:

Paso 2:

Paso 3:

Paso 4:

Paso 5:

Paso 6:

Paso 7:

Grid CSS

Propiedades del Contenedor (Grid Container)

Propiedades de los Hijos (Grid Ítems)

Ejemplo Completo con Más Propiedades de Grid Layout

Git - principales comandos

Principales comandos para trabajar con proyectos:

Trabajo con ramas.

Comandos avanzados para Ramas en Git.

Revertir Cambios.

Javascript - String Metodos

1. charAt()

2. charCodeAt()

3. concat()

4. includes()

5. endsWith()

6. indexOf()

7. lastIndexOf()

8. match()

9. repeat()

10. replace()

11. search()

12. slice()

13. split()

14. startsWith()

15. substring()

16. toLowerCase()

17. toUpperCase()

18. trim()

19. trimStart()

20. trimEnd()

21. padStart()

22. padEnd()

Number - Javascript

Métodos del Objeto Number

1. Number.isFinite()

2. Number.isInteger()

3. Number.isNaN()

4. Number.isSafeInteger()

5. Number.parseFloat()

6. Number.parseInt()

7. Number.prototype.toExponential()

8. Number.prototype.toFixed()

9. Number.prototype.toLocaleString()

10. Number.prototype.toPrecision()

11. Number.prototype.toString()

12. Number.prototype.valueOf()

13. Number.MAX_SAFE_INTEGER

14. Number.MIN_SAFE_INTEGER

1. `charAt()`

2. `charCodeAt()`

3. `concat()`

4. `includes()`

5. `endsWith()`

6. `indexOf()`

7. `lastIndexOf()`

8. `match()`

9. `repeat()`

10. `replace()`

11. `search()`

12. `slice()`

13. `split()`

14. `startsWith()`

15. `substring()`

16. `toLowerCase()`

17. `toUpperCase()`

18. `trim()`

19. `trimStart()`

20. `trimEnd()`

21. `padStart()`

22. `padEnd()`

Métodos del Objeto `Number`

1. `Number.isFinite()`

2. `Number.isInteger()`

3. `Number.isNaN()`

4. `Number.isSafeInteger()`

5. `Number.parseFloat()`

6. `Number.parseInt()`

7. `Number.prototype.toExponential()`

8. `Number.prototype.toFixed()`

9. `Number.prototype.toLocaleString()`

10. `Number.prototype.toPrecision()`

11. `Number.prototype.toString()`

12. `Number.prototype.valueOf()`

13. `Number.MAX_SAFE_INTEGER`

14. `Number.MIN_SAFE_INTEGER`

15. `Number.MAX_VALUE`

16. `Number.MIN_VALUE`

17. `Number.NaN`

18. `Number.NEGATIVE_INFINITY`

19. `Number.POSITIVE_INFINITY`

20. `Number.EPSILON`

1. `document.title`

2. `document.URL`

3. `document.body`

4. `document.cookie`

5. `document.head`

6. `document.documentElement`

7. `document.forms`

8. `document.images`

9. `document.scripts`

10. `document.anchors`

11. `document.links`

12. `document.readyState`

13. `document.referrer`

1. `document.getElementById(id)`

2. `document.getElementsByClassName(className)`

3. `document.querySelector(selector)`

4. `document.querySelectorAll(selector)`

5. `document.createElement(tagName)`

6. `element.setAttribute(name, value)`

7. `element.getAttribute(name)`

8. `element.appendChild(child)`

9. `element.removeChild(child)`

10. `element.classList.add(className)`

11. `element.classList.remove(className)`

12. `document.getElementsByTagName(tagName)`

13. `document.getElementsByName(name)`

14. `document.importNode(externalNode, deep)`

15. `element.insertAdjacentHTML(position, text)`

16. `element.insertAdjacentElement(position, element)`

17. `element.addEventListener(type, listener, options)`**

18. `element.removeEventListener(type, listener, options)`

19. `element.dispatchEvent(event)`

20. `node.childNodes`

21. `node.firstChild`

22. `node.lastChild`

23. `node.nextSibling`

24. `node.previousSibling`