Creando la tabla public.profiles

Primero, definimos la tabla profiles en el esquema public, estableciendo una relación con auth.users mediante una clave foránea:

create table public.profiles (
  id uuid not null references auth.users on delete cascade,
  username text,
  full_name text,
  avatar_url text,
  primary key (id)
);

alter table public.profiles enable row level security;

Aquí, id es la clave primaria y referencia al id de auth.users. El uso de on delete cascade asegura que, si un usuario se elimina de auth.users, su perfil asociado también se elimine automáticamente.

Configurando las políticas de seguridad (RLS)

Para proteger los datos y controlar el acceso, activamos las políticas de seguridad a nivel de fila (Row Level Security) y definimos las siguientes políticas:

-- Permitir que cualquier usuario autenticado inserte su propio perfil
create policy "Users can insert their own profile."
  on profiles for insert
  with check (auth.uid() = id);

-- Permitir que los usuarios actualicen su propio perfil
create policy "Users can update own profile."
  on profiles for update
  using (auth.uid() = id);

-- Permitir que los usuarios vean su propio perfil
create policy "Users can view their own profile."
  on profiles for select
  using (auth.uid() = id);

Estas políticas garantizan que cada usuario solo pueda acceder y modificar su propio perfil. El contenido que está entre comillas (““) es una descripción de la política, puedes poner lo que quieras ahí para poder identificarla mejor en el futuro.

Automatizando la creación de perfiles con triggers

Para que cada vez que un usuario se registre se cree automáticamente su perfil en public.profiles, utilizamos una función y un trigger:

-- Función que inserta un nuevo perfil al registrarse un usuario
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.profiles (id, username, full_name, avatar_url) -- Aquí puedes agregar o quitar todos los campos que tengas en tu tabla
  values (
    new.id,
    new.raw_user_meta_data ->> 'username',
    new.raw_user_meta_data ->> 'full_name',
    new.raw_user_meta_data ->> 'avatar_url'
  ); -- El orden de estos campos es importante, porque el valor se insertará en la tabla correspondiente al orden definido en el insert de arriba
  return new;
end;
$$;

-- Trigger que ejecuta la función después de insertar un nuevo usuario
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();

Con esto, cada vez que un nuevo usuario se registre, se creará automáticamente una entrada en public.profiles con los datos proporcionados.

Registrando usuarios con metadata adicional

Al registrar un usuario, podemos incluir información adicional en el campo data, que luego se almacenará en raw_user_meta_data de auth.users y se utilizará en la función del trigger:

const { data, error } = await supabase.auth.signUp({
  email: 'usuario@example.com',
  password: 'contraseña_segura',
  options: {
    data: {
      username: 'usuario123',
      full_name: 'Nombre Apellido',
      avatar_url: 'https://example.com/avatar.png'
    }
  }
});

De esta manera, los datos adicionales se insertarán automáticamente en la tabla profiles al momento del registro. Para que los datos se almacenen en la tabla profiles deberás asegurarte de que la función handle_new_user que hemos creado antes lea los datos de raw_user_meta_data y los inserte en una columna de la tabla profiles, de lo contrario estarás pasando los metadatos pero no se guardarán en tu tabla.

Si tienes alguna duda o quieres profundizar en algún aspecto, no dudes en dejar un comentario o contactarme.

Diferencias entre aplicación Android e iOS

Las aplicaciones Android e iOS son diseñadas para funcionar en diferentes sistemas operativos, lo que significa que tienen diferentes requisitos técnicos y de diseño. Las aplicaciones de Android se desarrollan generalmente en Java o Kotlin, mientras que las aplicaciones de iOS se desarrollan en Swift u Objective-C. Además, las guías de diseño para cada plataforma también difieren, lo que puede afectar la apariencia y la funcionalidad de la aplicación.

Diferencias entre aplicación nativa y multi plataforma

Una aplicación nativa está diseñada para una plataforma específica, ya sea Android o iOS. Esto permite que la aplicación aproveche al máximo las características y capacidades del sistema operativo. Por otro lado, una aplicación multi plataforma está diseñada para funcionar en múltiples sistemas operativos con un solo código base. Aunque esto puede ahorrar tiempo y recursos, a veces puede resultar en una menor optimización y rendimiento.

Introducción a React Native

¿Qué es?

React Native es un framework de desarrollo de aplicaciones móviles que permite a los desarrolladores crear aplicaciones multi plataforma utilizando JavaScript y React.

¿Porqué usarlo?

Utilizar React Native puede ofrecer varias ventajas:

• 2x1 en plataformas: Un solo código base para ambas plataformas, lo que ahorra tiempo y recursos.

• Menos bugs: Menos código significa menos posibilidades de errores y problemas. Además de que si tienen un problema en tu código arreglando este en un único lugar ya solucionas el problema en ambas plataformas.

• Menos recursos: Al no tener que mantener dos bases de código separadas, se requiere menos esfuerzo y recursos.

Alternativas

Una alternativa popular a React Native es Flutter, un framework de desarrollo de aplicaciones móviles creado por Google. Flutter también permite el desarrollo multi plataforma, pero utiliza el lenguaje de programación Dart en lugar de JavaScript.

Calidad de las aplicaciones

En el mundo del desarrollo de aplicaciones móviles, una de las preguntas más comunes es si es posible crear aplicaciones de alta calidad utilizando frameworks multiplataforma como React Native. La respuesta corta es sí, pero voy a profundizar un poco más para entender por qué y cómo.

Ejemplos de aplicaciones exitosas con React Native

Varias aplicaciones de alto perfil han sido desarrolladas utilizando React Native, demostrando que es posible crear aplicaciones robustas y de alto rendimiento con este framework. Aquí algunos ejemplos:

• Facebook: La propia aplicación de Facebook utiliza React Native en diversas partes de su interfaz, lo que les ha permitido desplegar nuevas funciones de manera más rápida y eficiente.

• Instagram: Instagram ha integrado React Native para características específicas de su aplicación, logrando una mayor velocidad de desarrollo y una experiencia de usuario fluida.

• Airbnb: Aunque Airbnb finalmente decidió volver a las aplicaciones nativas, durante un tiempo considerable, utilizaron React Native para desarrollar nuevas funciones rápidamente y probar ideas.

• Tesla: La aplicación móvil de Tesla, utilizada para controlar sus vehículos, también fue desarrollada con React Native, demostrando que incluso las aplicaciones más complejas pueden beneficiarse de este enfoque.

¿Por qué React Native?

React Native no es el único framework multiplataforma disponible, pero se ha convertido en uno de los más populares debido a varias razones:

• Desarrollado por Facebook: La solidez y el respaldo de una gran empresa como Facebook le da credibilidad.

• Comunidad activa: Una comunidad grande y activa significa más recursos, bibliotecas y soporte disponibles.

• Componentes reutilizables: La capacidad de crear componentes reutilizables acelera significativamente el desarrollo.

Conclusión

En resumen, sí, es completamente posible crear aplicaciones móviles de alta calidad utilizando frameworks multiplataforma como React Native. A medida que la tecnología continúa avanzando, estos frameworks solo mejorarán, ofreciendo aún más ventajas y reduciendo las limitaciones actuales. Con ejemplos de éxito como Facebook, Instagram y Tesla, está claro que las aplicaciones multiplataforma pueden ser tan buenas como las nativas, si no mejores, en ciertos aspectos.

Si estás considerando desarrollar una aplicación móvil, React Native es definitivamente una opción que vale la pena explorar.

Espero que este post te haya servido para que tengas una comprensión más clara de cómo funcionan las aplicaciones móviles y las diferentes opciones disponibles para su desarrollo.

Si te interesa saber de más aplicaciones desarrolladas con React Native puedes verlas aquí y te dejo también dos aplicaciones que yo mismo he desarrollado con este framework Wiset y Backpaper.

El Control Flow o Flujo de control en JavaScript es el orden en el que el intérprete de JavaScript (generalmente en el navegador) ejecuta las declaraciones de tu código. Si en tu código no existen declaraciones que alteren el flujo, este se ejecuta de principio a fin (de arriba hacia abajo) línea a línea. Las estructuras de control se utilizan para:

1. Determinar si un código debe ejecutarse o no.

2. Determinar si un código debe ejecutarse repetidas veces.

3. Determinar si se interrumpe una ejecución.

Condicionales

Estas instrucciones van a determinar si el código se debe ejecutar en función a una o varias condiciones. Para que el código de la condición se ejecute, el resultado del conjunto de condiciones es true , de lo contrario, el código será omitido.

if..else

En la publicación anterior te expliqué muy por encima este tipo de condicionales. La declaración if evalúa las condiciones dentro de los paréntesis que la siguen, si la condición o conjunto de condiciones dentro de este paréntesis da como resultado true , ejecutará el código dentro del bloque { }.

const name = "Leandro";

if (name === "Leandro") {
    console.log("Tu nombre es Leandro");
}
// "Tu nombre es Leandro"

Si la condición entre paréntesis da como resultado false el código dentro del bloque será ignorado.

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
}

El condicional if permite agregar a su declaración la palabra clave else , esta especifica el código que se ejecutará si la condición dentro del if es false .

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
} else {
    console.log("No sé cuál es tu nombre");
}
// "No sé cuál es tu nombre"

Además, el else te permite encadenar otra declaraciones if .

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
} else if (name === "Leandro") {
    console.log("Tu nombre es Leandro");
} else if (name === "Juan") {
    console.log("Tu nombre es Juan");
} else {
    console.log("No sé cuál es tu nombre");
}
// "Tu nombre es Leandro"

En caso de que algunas de estas condiciones sea true se ejecutará el código dentro del bloque de dicha condición y el resto será ignorado.

Operador ternario

Este operador es una abreviatura de un if..else y se utiliza para ejecutar un código u otro en función de si la condición es true o false . Al contrario que el if..else este operador no se puede extender.

Este operador se forma con tres operandos:

• La condición o conjunto de condiciones que se evaluará seguida de un signo ?

• El código que se ejecutará si la condición da como resultado true seguida de :

• La expresión que se ejecutará si la condición se evalúa como false

Estos tres operandos son necesarios obligatoriamente para formar el operador ternario.

El uso más común que se le da a este operador es para establecer un valor en una variable en función de una condición.

const age = 21;
const esMayorDeEdad = age > 18 ? true : false;
const puedePasar = esMayorDeEdad ? "Si, puede pasar" : "No, es menor de edad";

console.log(esMayorDeEdad); // true
console.log(puedePasar ); // Si, puede pasar

switch..case

Esta sentencia se utiliza para comparar el valor de una expresión con una lista de valores potenciales definidos. La sintaxis de esta expresión empieza con la palabra reservada switch seguida de la expresión entre paréntesis. A continuación se abren una llaves { } y dentro de estas se agregará la palabra reservada case seguida del potencial valor y : . Si el valor de la expresión coincide con algún case, se ejecutará cualquier declaración de código que esté después de los : de ese case.

const name = "Leandro";

switch (name) {
    case "Pedro":
        console.log("Tu nombre es Pedro");
    case "Leandro":
        console.log("Tu nombre es Leandro");
    case "Juan":
        console.log("Tu nombre es Juan");
    default:
        console.log("No sé cuál es tu nombre");
}
// "Tu nombre es Leandro"
// "Tu nombre es Juan"
// "No sé cuál es tu nombre"

Al final de los case se suele agregar un valor default por si ningunos de los valores anteriores cumplen la condición.

Un error común al utilizar switch..case es que, después de encontrar una coincidencia, el intérprete de JavaScript ejecuta cualquier declaración que siga al case coincidente, incluso aquellas que estén dentro de otras cláusulas case. Por tanto, el resultado del código anterior sería el siguiente:

// Tu nombre es Leandro
// Tu nombre es Juan
// No sé cuál es tu nombre

Para evitar esto, es necesario utilizar la palabra reservada break al final de la declaración de cada case. Esto detendrá la ejecución del switch .

const name = "Leandro";

switch (name) {
    case "Pedro":
        console.log("Tu nombre es Pedro");
        break;
    case "Leandro":
        console.log("Tu nombre es Leandro");
        break;
    case "Juan":
        console.log("Tu nombre es Juan");
        break;
    default:
        console.log("No sé cuál es tu nombre");
        break;
}
// "Tu nombre es Leandro"

Bucles

Los bucles permiten repetir un conjunto de declaraciones (bloque de código) mientras se cumpla una condición o hasta que se cumpla una condición, depende del tipo de bucle. Estos interrumpen el flujo normal de arriba hacia abajo hasta que este finalice, una vez finaliza, la ejecución continúa.

Algunos ejemplos de uso suelen ser buscar un elemento en un array o generar elementos en el HTML en base a un listado de datos.

const usuarios = ["Leandro", "Pedro", "Juan"];

for(let usuario of usuarios) {
    console.log(usuario);
}

// Leandro
// Pedro
// Juan

while

Para definir este tipo de bucles se utiliza la palabra reservada while seguida de paréntesis ( ) con la condición en su interior. Si la condición se evalúa como true se ejecutará el bloque de código dentro del bloque { } , de lo contrario, el bucle nunca se ejecuta. Después de cada iteración (ejecución), la condición se vuelve a evaluar, si aun es true , se vuelve a repetir el bucle.

let contador = 0;

while (contador < 3) {
  contador = contador + 1;
  console.log(`Loop ${contador}`);
}

// "Loop 1"
// "Loop 2"

Si el intérprete encuentra una declaración continue en un bucle de este tipo, detiene esa iteración, vuelve a evaluar la condición, y si es posible, continúa el bucle.

let contador = 0;

while(contador <= 5) {
  contador = contador + 1;

  if (contador === 3) {
    continue;
  }

  console.log(`Loop ${contador}`);
}

// "Loop 1"
// "Loop 2"
// "Loop 4"
// "Loop 5"

Si el intérprete encuentra una declaración break en un bucle while , se detiene la iteración y no se vuelve a evaluar la condición, lo que permite que el intérprete continúe con el código que esté después del bucle.

Es importante tener en cuenta que si la condición no se deja de cumplir nunca, es decir, siempre devuelve true , el bucle continuará de forma indefinida, a esto se le conoce como bucle infinito. Este es considerado un error de programación y puede hacer que la ejecución del código se bloquee de forma indefinida y causar fallos en la pestaña del navegador.

do..while

El bucle do..while es una variante del bucle while, pero con una diferencia clave: el bloque de código se ejecuta al menos una vez antes de que se evalúe la condición.

let contador = 0;

do {
  contador = contador + 1;
  console.log( `Loop ${ contador }` );
} while (contador < 3);

// "Loop 1"
// "Loop 2"
// "Loop 3"

for

El bucle for es otro tipo de bucle que se utiliza para iterar sobre una secuencia de valores, como elementos de un array. La sintaxis del for incluye tres partes: la inicialización, la condición y la expresión final, todas separadas por punto y coma.

const usuarios = ["Leandro", "Pedro", "Juan"];

for (let i = 0; i <= usuarios.length; i++) {
  console.log(usuarios[i]);
}

// "Leandro"
// "Pedro"
// "Juan"

La primera expresión inicializa una variable que actúa como un contador. Esta expresión se evalúa una vez, antes de la primera iteración del bucle. Estas variables pueden tener cualquier nombre válido, pero con frecuencia se las llama i para "iteración" o "índice".

La siguiente expresión es la condición que indica si el bucle debe ejecutarse. Se usa con mayor frecuencia a fin de establecer un límite superior para el contador de iteraciones. Si la condición no se evalúa en un principio como true, el cuerpo del bucle no se ejecuta.

La última expresión se ejecuta al final de cada iteración a través del bucle. Por lo general, se usa para aumentar el identificador en uno.

for...of

El bucle for...of se utiliza para iterar sobre objetos iterables (como arrays, strings, etc.). Este bucle proporciona una manera más simple y directa de recorrer los elementos de una colección.

const usuarios = ["Leandro", "Pedro", "Juan"];

for (let usuario of usuarios) {
  console.log(usuario);
}

// "Leandro"
// "Pedro"
// "Juan"

for...in

El bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto. A diferencia de for...of, este bucle recorre las claves de un objeto.

const usuario = { nombre: "Leandro", edad: 28, ocupación: "Programador" };

for (let propiedad in usuario) {
  console.log(`${propiedad}: ${usuario[propiedad]}`);
}

// "nombre: Leandro"
// "edad: 28"
// "ocupación: Programador"

forEach()

Los constructores Array, Map, Set y NodeList proporcionan un método (función) llamado forEach() que permite la iteración sobre su estructura de datos de una forma más sencilla. A diferencia de otras estructuras de bucle, este método no se puede interrumpir con break ni continue.

const usuarios = ["Leandro", "Pedro", "Juan"];

usuarios.forEach((usuario, i) => {
  console.log(`${i}.${usuario}`);
});

// "0.Leandro"
// "1.Pedro"
// "2.Juan"

Funciones

Son bloques de código reutilizables que realizan una tarea específica. Pueden recibir parámetros y devolver un valor, lo que permite separar y organizar mejor el código. Las funciones necesitan ser ejecutadas para que realicen su labor, esto quiere decir que cuando el intérprete llegue a una función, esta será ignorada y no interrumpirá el flujo hasta que esta sea ejecutada.

Las funciones se declaran con la palabra reservada function seguida de un espacio y el nombre que se le quiera dar a la función, a continuación es necesario abrir y cerrar un paréntesis () dentro de estos paréntesis se pueden definir valores en caso de que la función los requiera, por último, se necesita abrir y cerrar las llaves {} para indicar el inicio y el final del bloque de la función.

Para poder ejecutar una función hay que escribir el nombre que se le ha dado seguido de paréntesis () y si la función necesita parámetros, estos se tendrán que pasar dentro del paréntesis.

// Función con parámetros
function saludoPersonalizado(nombre) {
    console.log(`Hola, ${nombre}!`);
}

saludoPersonalizado("Leandro"); // "Hola, Leandro!"

// Función sin parámetros
function saludoGenerico() {
    console.log("Hola, usuario!");
}

saludoGenerico(); // "Hola, usuario!"

Los parámetros que la función recibe entre los paréntesis () son llamados parámetros de entrada. Estos parámetros tienen que ser pasados al ejecutar la función.

Algunas funciones pueden tener también, si se necesita, parámetros de salida, para ello será necesario tener dentro de la función la palabra reservada return seguida del valor que se quiere devolver. Este valor devuelto se puede recoger dentro de una variable para ser utilizado más adelante.

// Función con valor de retorno
function saludoGenerico() {
    return "Hola, usuario!";
}

const saludo = saludoGenerico();

console.log(saludo); // "Hola, usuario!"

Cuando una función es ejecutada, el flujo de ejecución se detiene en el punto donde se encuentra la función y se reanuda después de que la función haya terminado de ejecutarse. Esto permite modularizar el código y reutilizar funciones en diferentes partes del programa.

Conclusión

El flujo de control es fundamental para escribir código efectivo y eficiente en JavaScript. Con una comprensión sólida de las estructuras de control como condicionales y bucles, puedes gestionar mejor cómo y cuándo se ejecuta tu código. Espero que esta guía básica sobre el control flow te haya ayudado a entender un poco mejor cómo se ejecuta el código JavaScript.

Para aprender más, visita MDN Web Docs sobre JavaScript.

¡Hasta el siguiente post!

Si estás empezando en el mundo del desarrollo web, probablemente hayas oído hablar de este lenguaje. JavaScript es la herramienta mágica que te permite añadir interactividad a tus sitios web, haciendo que tus páginas cobren vida con formularios, conexión con una base de datos, juegos, respuestas a botones y mucho más.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se ejecuta en el navegador del usuario. Esto significa que, a diferencia de lenguajes como Python o Java que se ejecutan en el servidor, JavaScript puede interactuar directamente con el HTML y CSS de tu página para crear efectos dinámicos en tiempo real.

JavaScript también se puede ejecutar en el servidor, pero en este caso me voy a enfocar más en la parte del navegador que es lo que nos interesa para seguir con el camino del desarrollo Front-end.

¿Qué puedes hacer con JavaScript?

Las posibilidades con JavaScript son casi infinitas. Puedes empezar con tareas sencillas como cambiar el contenido de una página al hacer clic en un botón, crear carruseles de imágenes, validar formularios, y progresar hasta crear aplicaciones web complejas, juegos interactivos, animaciones en 2D y gráficos en 3D.

JavaScript es potente y flexible, y a menudo se complementa con varias herramientas y librerías que extienden su funcionalidad básica, como:

• APIs del navegador: Te permiten manipular el DOM (Document Object Model), trabajar con gráficos 3D, capturar datos de la cámara web, enviar notificaciones, entre otros.

• APIs de terceros: Integrar servicios externos como mapas, redes sociales, y más.

• Frameworks y librerías: React, Angular, y Vue.js, que facilitan la creación de aplicaciones web complejas.

En este post voy a empezar desde lo más básico así que hablaré del JavaScript puro o también conocido como JavaScript Vanilla y en futuros posts lo iré complementando con otras APIs y frameworks.

Primeros Pasos con JavaScript

¡Hola Mundo!

Para empezar a trabajar con JavaScript, vamos a crear un sencillo ejemplo de "¡Hola Mundo!". Esto te permitirá ver cómo se integra JavaScript con tu HTML.

1. Crea un archivo llamado index.html y agrega dentro del <body> un texto dentro de una etiqueta <h1>

    <body>
        <h1>Texto de ejemplo</h1>
    </body>
   

   Si abres el archivo index.html con el navegador verás que aparece el texto "Texto de ejemplo"

2. Crea un archivo llamado main.js , el nombre del archivo es irrelevante pero tendrás que tenerlo en cuenta para importarlo en tu HTML como hicimos en el post anterior con el CSS.

3. Abre tu archivo index.html y añade el siguiente código el final del elemento <body> .

    <body>
        <h1>Texto de ejemplo</h1>
        <script src="main.js"></script>
    </body>
   

   Esto conecta tu archivo JavaScript con la página HTML.

4. Escribe el siguiente código en main.js:

    const miTitulo = document.querySelector("h1");
    miTitulo.textContent = "¡Hola mundo!";
   

Guarda ambos archivos y abre tu index.html en el navegador. Deberías ver que el título de la página ha cambiado a "¡Hola mundo!".

¡Enhorabuena! 🎉 ya estás utilizando JavaScript en tu página web.

Entendiendo el Código

El código anterior hace lo siguiente:

• document.querySelector("h1"): Selecciona el primer elemento <h1> en tu documento HTML.

• miTitulo.textContent = "¡Hola mundo!";: Cambia el texto del elemento seleccionado a "¡Hola mundo!".

Colocamos el script al final del documento HTML para asegurarnos de que todo el HTML se cargue antes de que JavaScript intente interactuar con él. Esto es importante ya que el HTML carga de forma progresiva de arriba hacia abajo, por tanto, si nuestro script se ejecuta antes de que el elemento <h1> esté en la página, no encontrará el elemento y nuestro script fallará, a este problema se les conoce como condición de carrera.

Es probable que en este ejemplo básico no lo notes, pero los archivos JavaScript son pesados en comparación con el HTML y el navegador tarda un tiempo en procesarlo y ejecutarlo, por tanto, es recomendable ponerlo al final del HTML o agregarle el atributo defer a la etiqueta script para que no bloquee la carga de la página.

Conceptos Básicos de JavaScript

Variables

Las variables son contenedores para almacenar datos. En JavaScript, puedes declarar variables usando let o const.

const nombre = "Juan";
let edad = 30;

Se utiliza let para definir una variable que su valor puede cambiar y const para variables que su valor es fijo, a estas se les suele llamar también constantes.

Como te he comentado, estas palabras reservadas (let, const) se utilizan para definir una nueva variable o constante, lo que significa que si quiero cambiar el valor de una variable que ya existe no tengo que utilizar esas palabras registradas delante de la variable.

const nombre = "Juan";
let edad = 30;
edad = 31;

En el ejemplo estoy asignando un nuevo valor (31) a la variable edad que ya existe, por tanto, ahora edad tendrá el valor 31.

Tipos de Datos

JavaScript maneja varios tipos de datos, incluyendo:

• String (cadenas de texto): "Hola Mundo"

• Number (números): 42 o 3.14

• Boolean (booleanos): true o false

• Array (colección): [1, 2, 3, 4]

• Object (objeto): { nombre: "Juan", edad: 30 }

No te preocupes si no entiendes para qué sirven estos datos o cómo se utilizan, en futuras publicaciones te explicaré más en detalle cómo trabajar con cada uno de ellos, pero es necesario mencionarlos para que entiendas que puedes tratar con diferentes tipos de datos.

Volvamos al ejemplo anterior:

const nombre = "Juan";
let edad = 30;

En este caso, la constante nombre sería de tipo string porque el valor que guarda está definido entre comillas ( " ), esto le indica al JavaScript que el valor es de tipo cadena de texto (string).

Por otro lado tenemos la variable edad, esta no está definida entre comillas, y es un número, por tanto, JavaScript entiende que la variable edad es de tipo number.

Al contrario que en otros lenguajes de programación, JavaScript es flexible en cuanto al tipo de dato que guarda una variable, esto quiere decir, que si la edad ahora es de tipo number, puedo convertirla en tipo string simplemente asignándole un valor que sea de ese tipo.

const nombre = "Juan";
let edad = 30;
edad = "30";

En este ejemplo, lo que he hecho ha sido cambiar el valor de la variable edad y le he asignado un valor de tipo string y JavaScript me dejaría hacer ese cambio sin problema. Por tanto, ahora la variable edad sería de tipo string y su valor sería 30.

Si mostramos el valor de la variable edad, no podemos saber si esta es un número o una cadena de texto, por tanto, podríamos pensar que es irrelevante, pero en el código, una variable de tipo string no tiene las mismas propiedades que una variable de tipo number, por lo tanto, es importante que tengamos en cuenta los tipos.

Operadores

Los operadores permiten realizar operaciones sobre variables y valores. Algunos operadores básicos son:

• Suma: +

• Resta: -

• Multiplicación: *

• División: /

• Mayor: >

• Menor: <

• Mayor o igual: >=

• Menor o igual: <=

• Igual: ===

Ejemplo:

let suma = 5 + 10;
let concatenacion = "Hola" + " " + "Mundo";

En el código anterior podemos ver dos operaciones de tipo suma que hacen diferentes funciones, la primera, al ser dos números, JavaScript entiende que lo que se quiere hacer es una operación matemática, por tanto, lo que hace es sumar ambos valores y devolver el resultado, que en este caso sería 15 .

Sin embargo, en la segunda operación, al contener al menos un dato de tipo string, JavaScript entiende que lo que se quiere hacer es concatenar (unir) todos los datos, en este ejemplo el texto Hola, un espacio en blanco y el texto Mundo y el resultado sería: Hola Mundo .

Condicionales

Los condicionales permiten ejecutar código basado en una condición.

let edad = 18;

if (edad >= 18) {
    console.log("Eres mayor de edad.");
} else {
    console.log("Eres menor de edad.");
}

En el código anterior tenemos la variable edad a la que le hemos asignado un valor de tipo number (18), a continuación encontramos una condición if .. else . Esta condición implica que si la variable edad es mayor o igual (>=) a 18 se ejecutará el código del interior del if , en caso de no cumplirse la condición, se ejecutará el código del interior del else.

En el caso del ejemplo, el código que se ejecutaría sería el del interior del if mostrando el valor: Eres mayor de edad.

Funciones

Las funciones encapsulan un bloque de código que puedes reutilizar.

function saludar(nombre) {
    return "Hola, " + nombre;
}

console.log(saludar("Mundo")); // "Hola, Mundo"

En este ejemplo encontramos una función llamada saludar , sabemos que es una función porque delante del nombre tiene la palabra reservada function , existe otra manera de generar funciones pero lo veremos más adelante, de momento vamos a decir que para definir una función se tiene que seguir la siguiente estructura:

function: Es una palabra reservada en JavaScript que indica el inicio de una función.

saludar: Es el nombre que va a tener la función.

(parámetros): Los paréntesis son parte de la función y son obligatorios, estos pueden contener dentro valores llamados parámetros, estos parámetros se deberán pasar al ejecutar la función y su valor se puede utilizar dentro de la función para hacer operaciones.

{ }: Las llaves de apertura y cierre indican el inicio y el final de la función.

return: Palabra reservada en JavaScript para indicar que el valor que viene a continuación será devuelto por la función.

Como puedes ver en el ejemplo del código superior, cuando se ejecuta la función saludar se le pasa un valor dentro de los paréntesis saludar("Mundo") esto indica, que cuando se ejecute la función, el valor del parámetro nombre será un string con el valor "Mundo". Por tanto, el valor devuelto por esta función es "Hola, Mundo".

Función sin parámetros

function nombre() {
 return "código a ejecutar";
}

Esta otra función sigue la misma estructura pero no tiene parámetros, por tanto, al ejecutarla no tendremos que pasar ningún valor entre los paréntesis nombre() y el valor que devolverá, siempre será "código a ejecutar".

Las funciones son una parte fundamental de JavaScript y se utilizan para prácticamente todo, en futuros posts te explicaré más sobre las funciones y cómo utilizarlas en cada caso.

Eventos

Los eventos permiten interactuar con el usuario. Por ejemplo, puedes ejecutar código cuando un usuario hace clic en un botón.

const button = document.querySelector("button");
button.onclick = function() {
    alert("¡Se ha pulsado el Botón!");
};

Este código crea una constante llamada button y se le asigna un elemento botón que se busca en el HTML con la función document.querySelector que ya hemos visto en el primer ejemplo, a continuación, a la constante botón se le asigna una función sin nombre en su propiedad onclick, de esta manera, cuando un usuario hace click en un botón, se ejecutará esa función.

Como te expliqué en el post del HTML, los elementos tienen atributos, uno de los atributos es onclick, este atributo permite ejecutar un código cuando un usuario realiza la acción de click encima del elemento, en este caso un botón.

¿Por qué esta función no tiene nombre?

Buena pregunta, a las funciones y la variables, se les asigna un nombre para poder referirnos a ellas más adelante en nuestro código, en este caso, como esa función se está asignando con un = al atributo onclick no necesitamos asignarle un nombre ya que, cuando se ejecute el evento click por parte del usuario, se ejecutará inmediatamente la función.

Además, por mucho que a esa función se le pusiera un nombre, no se podría hacer referencia a ella porque está asignada directamente a un atributo y el código no podría acceder a ella, para poder reutilizar una función en el atributo y desde otro lugar de nuestro código se tendría que definir la función a parte.

Por ejemplo así:

const button = document.querySelector("button");

function handleClick() {
    alert("¡Se ha pulsado el Botón!");
};

button.onclick = handleClick;

handleClick();

Comentarios

Por último pero no menos importante debes saber que existe una manera de agregar comentarios en JavaScript, estos son texto simple que no se ejecuta, los comentarios te permiten dejar escrito en el código información útil sin que esto afecte al código. Para agregar comentarios en JavaScript se puede hacer utilizando doble barra (//) si el comentario es de una única línea o (/**/) si el comentario es de varias líneas.

// Este texto es un comentario de una línea

/*
Este es un comentario de varias líneas,
el contenido de este comentario no afecta al código y
es únicamente informativo.
*/

A menudo en tutoriales o ejemplo de código, se utilizan estos comentarios para mostrar el valor de una variable o el resultado de una función, por ejemplo como he hecho yo en la función saludar:

function saludar(nombre) {
    return "Hola, " + nombre;
}

console.log(saludar("Mundo")); // "Hola, Mundo"

Práctica: Cambiador de Imágenes

Con lo que te he explicado en el post, te animo a que crees un cambiador de imágenes.

Requisitos:

• Un elemento imagen con una imagen por defecto (puedes utilizar una imagen de unsplash).

• Un botón con el texto "Cambiar".

• Al hacer click en el botón, si la imagen que se muestra es la imagen por defecto, se debe cambiar por otra diferente.

• Al hacer click en el botón, si la imagen que se muestra no es la imagen por defecto, se debe cambiar por la imagen por defecto.

• Agrega los estilos css que quieras.

Solución

Conclusión

JavaScript es un lenguaje de programación poderoso que te permite añadir interactividad y dinamismo a tus sitios web. En este artículo, te he mostrado los fundamentos básicos y ejemplos prácticos para ayudarte a empezar, en futuras publicaciones te hablaré sobre casos prácticos y te iré mostrando trucos para que tu JavaScript sea mejor.

Entiendo perfectamente que de primeras es mucha información, pero te aseguro que con esta guía podrás seguir sin ningún problema las futuras publicaciones y a medida que vayas utilizando y practicando JavaScript se te irá haciendo más fácil.

Te recomiendo que hagas pruebas con los ejemplos que te he ido mostrando en la publicación. ¡Sigue practicando y explorando, y pronto estarás creando páginas web increíbles! Para aprender más, visita MDN Web Docs sobre JavaScript.

¡Hasta el siguiente post! 👋🏼

Bienvenido/a a otro fascinante post donde exploraremos el mundo del CSS (Cascading Style Sheets o Hojas de Estilo en Cascada). En esta ocasión, te explicaré cómo agregar CSS a un documento HTML utilizando archivos externos, una práctica esencial para mantener nuestro código organizado. Además, aprenderemos sobre los distintos tipos de selectores en CSS, lo que nos permitirá aplicar estilos de manera precisa a nuestros elementos HTML.

¿Qué es el CSS y para qué se usa?

CSS es un lenguaje de hojas de estilo que nos permite estilizar y diseñar documentos HTML. Si bien HTML se encarga de la estructura básica de la página, el CSS se ocupa de su presentación visual, permitiendo controlar aspectos como el color, la tipografía, el espaciado, entre muchos otros. Utilizar CSS mejora significativamente la experiencia del usuario y nos brinda una amplia gama de posibilidades creativas para diseñar páginas web atractivas y funcionales.

Vincular un archivo CSS a HTML

Para mantener el CSS separado del HTML, lo más recomendable es utilizar un archivo externo. Esto no solo ayuda a que nuestro proyecto sea más fácil de mantener, sino que también permite que los navegadores almacenen en caché los estilos y los reutilicen en múltiples páginas del sitio, cosa que no se podría hacer si los estilos están metidos directamente en el HTML utilizando el atributo style.

Creando y vinculando un archivo CSS

1. Creación de un Archivo CSS: Abre tu editor de código, como Visual Studio Code, y crea un nuevo archivo con la extensión .css. Por ejemplo, puedes llamarlo estilos.css.

   

2. Guardando el Archivo: Asegúrate de guardar el archivo en la misma carpeta donde se encuentra tu archivo HTML.

3. Vinculación en HTML: En tu archivo HTML, dentro del elemento <head>, añade la siguiente línea para enlazar tu archivo CSS:

    <link rel="stylesheet" href="estilos.css">
   

   Este elemento <link> le dice al navegador dónde encontrar la hoja de estilo y cómo interpretarla.

Selectores en CSS

Los selectores en CSS son patrones que identifican a qué elementos se aplicarán los estilos definidos dentro de las reglas CSS.

Tipos de Selectores

• Selectores de Tipo: Seleccionan elementos por su nombre de etiqueta, como h1, p, div, etc.

    <h1>Título de ejemplo</h1>
  

    h1 {
      color: blue;
    }
  

• Selectores de Clase: Empiezan con un punto . y seleccionan elementos basados en el atributo class. Como vimos en publicaciones anteriores, los elementos de HTML pueden tener atributos, uno de estos es el atributo class , en este podemos agregar una o varias clases separadas por un espacio para poder utilizarlas más adelante en el CSS.

    <p class="destacado">Texto destacado</p>
  

    .destacado {
      font-weight: bold;
    }
  

• Selectores de ID: Comienzan con un # y seleccionan elementos basados en el atributo id. Es importante recordar que los IDs de los elementos deben ser únicos.

    <div id="principal">Texto principal</div>
  

    #principal {
      background-color: yellow;
    }
  

• Selectores de Atributo: Se utilizan para seleccionar elementos con un atributo específico.

    <a href="https://example.com">Enlace de ejemplo</a>
  

    a[href="https://example.com"] {
      color: green;
    }
  

• Pseudoclases y Pseudoelementos: Selectores como :hover y ::after permiten estilizar estados de un elemento o partes específicas de él.

    a:hover {
      color: red;
    }
  
    p::first-line {
      font-weight: bold;
    }
  

• Combinadores: Sirven para relacionar varios selectores de forma más específica, como descendientes ( > ) o hermanos adyacentes ( + ).

    ul > li {
      list-style-type: none;
    }
  
    h1 + p {
      margin-top: 0;
    }
  

Ideas prácticas para aplicar HTML y CSS

1. Página de "Sobre mí": Utiliza HTML para estructurar una biografía breve y CSS para diseñar elementos como fotografías, cabeceras y listas de hobbies o logros.

   🖌️ Resultado de ejemplo

2. Galería de imágenes responsiva: Crea una galería usando <div> para cada imagen y aplica estilos como width, padding, y box-shadow con CSS para que se ajuste elegantemente a diferentes tamaños de pantalla.

   🖌️ Resultado de ejemplo

3. Formulario de contacto estilizado: Diseña un formulario con campos para nombre, correo electrónico y mensaje. Utiliza CSS para hacerlo atractivo y fácil de usar, ajustando elementos como border-radius, background-color, y hover .

   🖌️ Resultado de ejemplo

Conclusión

Hasta aquí la introducción a cómo agregar CSS a tus documentos HTML mediante archivos externos y un recorrido por los selectores que ofrece CSS.

No te preocupes si no acabas de entender cómo funciona, es normal, el HTML y el CSS pueden llegar a ser muy complejos, pero con práctica estoy seguro de que te convertirás en un verdadero experto/a. Si quieres ver qué otros tipos de selectores hay, puedes acceder a esta tabla.

Espero que este post te inspire a experimentar con estos conceptos y a crear páginas web visualmente impresionantes y eficientes. ¡Hasta la próxima! 👋🏼

Si has seguido mis publicaciones para iniciar en la programación, hasta ahora, te he estado indicando que utilizaras un editor de código online como Codepen para hacer tus pruebas y adentrarte en la programación, pero ahora que ya has practicado un poco, ha llegado la hora de que te instales tu propio editor de código local.

Online vs Local

Los editores de código local ofrecen una amplia ventaja sobre los editores online, una de las más obvias es que no requieren una conexión a internet, lo que te permite trabajar en tus proyectos sin depender de la disponibilidad de la red y de tu velocidad de internet. Esto es especialmente útil si te encuentras en áreas con conexión limitada o inestable.

Otra ventaja, es que te permiten más libertad, ya que en los editores online el resultado del código depende de la manera de ejecutarlo que tenga el editor online en su servidor, por tanto, nos podemos encontrar con problemas como el de este post. Por si no lo has leído, el problema que nos encontrábamos era que queríamos practicar una estructura de HTML en un editor online y este nos mostraba un mensaje indicando que nuestro código se iba a ejecutar en el body de un HTML ya existente.

Además, los editores locales suelen ofrecer una mejor gestión de archivos y proyectos, ya que tienen acceso directo al sistema de archivos de tu ordenador, lo que facilita la organización, el acceso y la manipulación de archivos y directorios. Esta integración con el sistema de archivos local permite una sincronización más fluida con herramientas de control de versiones, como Git, y una interacción más rápida y eficiente, lo que mejora significativamente tu flujo de trabajo de desarrollo.

La importancia de un buen editor de código

Durante mi carrera, he probado varios editores de código, desde Sublime Text hasta Atom, incluso Vim, pero finalmente, me he decantado por Visual Studio Code (VSCode). ¿Por qué? VSCode combina eficiencia, una amplia gama de funcionalidades, personalización a través de plugins y una terminal integrada que facilita mucho las cosas.

Configurando VSCode

Configurar VSCode no es complicado y lo puedes adaptar a tu medida. Por ejemplo, ajustar los atajos de teclado y crear tus propios snippets puede aumentar enormemente tu productividad. Aquí van algunos pasos básicos para personalizar VSCode:

1. Atajos de teclado: Dirígete a Ajustes > Métodos abreviados de teclado para modificarlos según tus necesidades. Es importante que te familiarices con los atajos ya existentes o los personalices a tu gusto para trabajar de forma más eficiente.

2. Snippets: En Ajustes > Configurar Fragmentos de usuario, puedes crear fragmentos de código que usas frecuentemente, lo cual te ahorra tiempo y esfuerzo. Por ejemplo, puedes configurar que cuando escribas html se te ejecute un snippet y te cree una estructura base de HTML que hayas creado como plantilla así no tienes que crearla cada vez manualmente.

3. 

   Tema y aspecto: Personaliza la apariencia desde Ajustes > Tema > Tema de color. Seguramente vayas a pasar mucho tiempo delante de tu editor así que es importante que estés cómodo con los colores y personalización de la herramienta.

Plugins: Elige sabiamente

Los plugins pueden transformar tu editor en una herramienta poderosa, pero su uso excesivo puede tener contrapartidas. Es vital instalar solo aquellos necesarios y hacer limpiezas periódicas, una mala gestión de plugins puede hacer que tu experiencia con el editor sea pésima:

• Rendimiento: Demasiados plugins pueden ralentizar tu editor, especialmente si tienes varios proyectos abiertos en diferentes editores.

• Distracciones: Algunos plugins pueden interrumpir tu flujo de trabajo con constantes notificaciones o mensajes en el código.

• Plugins temporales: Hay plugins útiles solo para ciertas fases del desarrollo. Por ejemplo, un plugin que muestra el tamaño de las librerías es útil durante la optimización del rendimiento, pero quizás no en el día a día.

• Configuración de plugins: Asegúrate de que cada plugin esté bien configurado. Por ejemplo, si usas Prettier, configúralo para que solo actúe en proyectos con un archivo de configuración de Prettier.

Todos los plugins tienen una documentación detallada de cómo utilizarlo y cómo configurarlo, tómate tu tiempo y configura cada plugin a tu gusto, esto hará que a la larga seas mucho más eficiente, y sobre todo, si no necesitas el plugin, desinstálalo o páusalo para que no te moleste.

Si estas empezando, puedes ignorar los plugins de momento, ya habrá tiempo para explorarlos más adelante.

Modo "Zen" en VSCode

El modo "Zen" te ayuda a concentrarte eliminando elementos superfluos de la UI y centrando tu atención solo en el código. Para activarlo, puedes usar el comando Ctrl+K Z o buscar "Zen Mode" en la paleta de comandos (cmd+Shift+P). Este modo te ayudará a centrarte en el archivo que estés trabajando eliminando todo elemento de la UI que no sea relevante así te podrás concentrar en el trabajo actual.

Conclusión

Elegir y configurar adecuadamente tus herramientas de trabajo no solo impacta tu productividad, sino también tu satisfacción general como desarrollador. VSCode es una herramienta excepcionalmente potente si se configura correctamente y se mantiene alineada con las necesidades de tus proyectos. Recuerda que al final, lo importante es que te sientas cómodo y eficiente con las herramientas que eliges.

Ejercicio

Ahora que ya tienes tu entorno local listo, te invito a que repliques el ejercicio que hicimos en el post anterior. Crea un archivo index.html que siga las siguientes pautas:

• Buena estructura de HTML, intenta que la estructura tenga semántica. No olvides las etiquetas <!doctype html> y <html> .

• Utiliza el elemento main

• Agrega enlaces a páginas externas, por ejemplo: Twitter, Instagram, LinkedIn

• Agrega una marca de tiempo con el elemento time

• Agrega al menos una lista del tipo que quieras

• Utiliza el tag section para dividir las diferentes secciones y agrega un título a cada sección, por ejemplo: Crea una sección para los enlaces, otro para la lista...

Por último, abre tu archivo con el navegador y observa tu creación. ¡Enhorabuena! 🎉

1. Define el viewport

Es esencial para las páginas web modernas asegurarse de que se vean bien en todos los dispositivos. Definir el viewport en la sección <head> de tu HTML garantiza que tu sitio sea visualmente accesible en dispositivos móviles.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Utiliza etiquetas semánticas

Las etiquetas semánticas como <header>, <footer>, <article> , <section> , etc. No solo ayudan a estructurar tu contenido de manera clara, sino que también mejoran la accesibilidad y el SEO.

<article>
    <h1>Introducción a HTML</h1>
    <p>HTML es el lenguaje de marcado utilizado para crear páginas web.</p>
</article>

3. Aprovecha el elemento <main>

El elemento <main> indica el contenido principal de tu página y debería usarse solo una vez por documento, facilitando la accesibilidad.

<main>
    <h1>Bienvenido a mi Blog</h1>
    <p>Este es el principal contenido de la página.</p>
</main>

4. No olvides la etiqueta <meta charset="utf-8">

Esta etiqueta asegura que tu página web pueda mostrar caracteres de múltiples idiomas sin problemas.

<head>
  <meta charset="utf-8">
</head>

5. Usa el atributo alt en las imágenes

Describir tus imágenes con el atributo alt mejora la accesibilidad y ayuda en el SEO.

<img src="paisaje.jpg" alt="Hermoso paisaje de montañas al amanecer" width="100" height"50">

6. Utiliza rel en enlaces externos para seguridad y SEO

Cuando enlazas a sitios externos, es una buena práctica utilizar el atributo rel con valores como noopener y noreferrer para mejorar la seguridad y el SEO.

<a href="<https://www.ejemplo-externo.com>" rel="noopener noreferrer" target="_blank">Visita este sitio externo</a>

7. Implementa formularios accesibles

Los formularios son esenciales para la interacción del usuario. Asegúrate de asociar cada etiqueta <input> con un <label> correspondiente.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

8. Utiliza <time> para Fechas y Horas

La etiqueta <time> es útil para marcar fechas y horas, lo que ayuda a los buscadores y otros servicios a entender esos datos específicamente.

<p>La conferencia comienza el <time datetime="2024-10-05">5 de octubre de 2024</time>.</p>

9. Optimiza la carga de tus scripts

Colocar los <script> al final del cuerpo de tu HTML o usar el atributo async puede mejorar el tiempo de carga de la página.

<script src="app.js" async></script>

10. Agrega Descripciones de Accesibilidad con ARIA

Mejora la accesibilidad de tu sitio web utilizando atributos ARIA para describir roles, estados y propiedades de los elementos a las tecnologías de asistencia.

<button aria-label="Cerrar ventana">X</button>

11. Utiliza las listas ordenadas y desordenadas correctamente

Las listas son herramientas poderosas para organizar el contenido y hacerlo más legible.

<ul>
    <li>Elemento uno</li>
    <li>Elemento dos</li>
</ul>

Estos consejos están diseñados para ayudarte a escribir HTML más claro, accesible y funcional. Espero que los encuentres útiles en tu aprendizaje y práctica del desarrollo web.

Ejercicios

Si quieres practicar aquí te dejo un reto.

Utiliza el editor de código con el que te sientas más cómodo e intenta aplicar los consejos anteriores para generar un HTML que tenga lo siguiente:

• Buena estructura de HTML, intenta que la estructura tenga semántica. En algunos editores online puede que recibas un mensaje como al que aparece a continuación porque estos editores insertan tu HTML directamente en el elemento body, pero no te preocupes por eso.

• Utiliza el elemento main

• Agrega enlaces a páginas externas, por ejemplo: Twitter

• Agrega una marca de tiempo con el elemento time

• Agrega al menos una lista del tipo que quieras

• Utiliza el tag section para dividir las diferentes secciones y agrega un título a cada sección, por ejemplo: Crea una sección para los enlaces, otro para la lista...

Resultado de Ejemplo

¡Sigue practicando y nunca dejes de aprender!

Estructura de las etiquetas

Estas etiquetas tienen una estructura, la mayoría de ellas necesitan una etiqueta de apertura y una etiqueta de cierre para indicar dónde empieza y dónde acaba el elemento. Veamos un ejemplo.

<p>Hola mundo</p>

En el código anterior podemos ver lo siguiente:

Las partes principales que vemos en la imagen y en el código son:

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Indica dónde empieza a tener efecto un elemento, en este caso un párrafo.

2. El contenido: es lo que agrupa el elemento en su interior, en este caso solo texto.

3. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre ( / ) antes del nombre de la etiqueta indicando que termina un elemento, en este caso dónde termina el párrafo.

4. El elemento: es el conjunto formado por la etiqueta de apertura, el contenido y la etiqueta de cierre.

Excepciones

Como en toda regla, existen excepciones a esta estructura, y es que hay etiquetas que no pueden tener contenido, es decir, no pueden agrupar nada en su interior, por tanto, estas etiquetas son elementos vacíos. Veamos un ejemplo de un elemento vacío:

<img src="https://to.lk/YmspRz" alt="un ordenador con código" />

La estructura del elemento anterior tiene la siguiente forma:

En este ejemplo podemos observar algunas diferencias con el anterior, lo primero que podemos destacar es que el elemento no tiene etiqueta de cierre, en su lugar, esta etiqueta acaba con una barra de cierre ( / ) antes del paréntesis angular final de la etiqueta.

Cuando una etiqueta se crea de esta manera, se dice que es una etiqueta "auto cerrada" o más conocida por su término en inglés self closing tag.

Además, podemos ver que al no tener una etiqueta de cierre separada, esta no puede tener contenido en su interior.

Atributos

Las etiquetas, tanto normales como de auto cierre pueden tener además otro elemento llamado atributo.

Los atributos contienen información adicional del elemento, estros atributos pueden servir para diferentes funciones. En el caso de la imagen anterior, el atributo src le indicará a la etiqueta en que lugar tiene que buscar la imagen que se tiene que mostrar, y el atributo alt establecerá el texto alternativo que aparecerá si la imagen no se puede cargar de manera correcta o se utilizará por los lectores de pantalla para describir la imagen.

Por tanto, el texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen sin poder verla.

Los atributos deben seguir algunas normas:

1. Debe haber un espacio entre el nombre de la etiqueta y el atributo.

2. Debe haber un espacio entre los atributos.

3. El nombre del atributo va seguido de un signo de igual ( = )

4. A continuación del signo igual aparecerá el valor del atributo entre comillas ( " " )

5. En caso de ser un elemento con etiqueta de apertura y de cierre, los atributos siempre se incluirán en la etiqueta de apertura, nunca en la de cierre.

Anidación de etiquetas

Ahora que ya sabes que es una etiqueta y que algunas etiquetas pueden tener contenido en su interior, te voy a hablar sobre la anidación de etiquetas. Se llama anidamiento al hecho de colocar elementos dentro de otros.

Por ejemplo, si se quiere resaltar una palabra dentro de un texto se puede hacer uso de la etiqueta <strong>. Veamos un ejemplo.

<p>Hola <strong>mundo</strong> en etiqueta bien anidada</p>

El elemento <strong> se utiliza para marcar con énfasis lo que haya en su interior (más información).

Es importante asegurarse de que los elementos estén correctamente anidados, de lo contrario el resultado podría no ser el esperado. Ejemplo de una etiqueta mal anidada:

<p>Hola <strong>mundo</p>en etiqueta mal anidada</strong>

Los elementos deben abrirse y cerrarse de manera ordenada de forma que siempre haya uno dentro de otro y no estén entrelazados.

De lo contrario, los navegadores intentarán adivinar la estructura correcta y puede que el resultado no sea el esperado, como en el ejemplo.

Ejercicios interactivos

Ahora que ya conoces algunos aspectos básicos del HTML te invito a que le eches un vistazo al listado de etiqueta de este enlace e intentes hacer los siguientes ejercicios en un editor online como codepen. Después de cada ejercicio tendrás la solución para ver si has acertado.

Ejercicio 1

Crea dos elementos de imagen, uno que tenga el atributo src y el atributo alt, y otro elemento imagen que solo tenga el atributo alt para ver qué ocurre si una imagen puede cargar correctamente y qué ocurre si la imagen no puede cargar.

El objetivo del ejercicio es ver qué ocurre en cada caso y para qué sirven los atributos.

Solución

Ejercicio 2

Intenta replicar la siguiente imagen teniendo en cuenta los diferentes tamaños de texto:

El objetivo es mostrar información con diferentes tamaños de texto de más importante a menos importante, por ejemplo:

Texto 1: Tu nombre (Tamaño de letra grande)

Texto 2: Tu apellido (Tamaño de letra algo más pequeño que el texto 1)

Texto 3: Tu edad (Tamaño de letra algo más pequeño que el texto 2)

Texto 4: Una descripción (Tamaño de letra de un párrafo)

Pista

Solución

Ejercicio 3

Intenta replicar la siguiente imagen:

Crea un elemento de tipo párrafo con el texto: "Este es el tercer ejercicio que hago de etiquetas HTML" y haz que el texto "tercer ejercicio" tenga más énfasis que el resto, a continuación, agrega al final del párrafo una imagen con los siguientes atributos:

src: https://to.lk/UJFSgn

alt: "gato bebé dentro de un calzado blanco"

Solución

Conclusión

Si has llegado hasta aquí, enhorabuena 🎉, vas por el camino correcto, sigue practicando y conseguirás tus objetivos. Te animo a que intentes crear tu propia estructura HTML a tu gusto utilizando el listado de etiquetas a ver qué consigues crear.

Espero que este breve recorrido por los conceptos básicos de HTML te haya resultado útil y te inspire a seguir aprendiendo y experimentando.

¡Nos vemos en el próximo post!

¿Qué necesito para empezar a programar?

Para comenzar en la programación, realmente necesitas muy poco, y aquí está la lista básica:

Un ordenador: No necesitas el mejor del mercado; un ordenador con capacidad para ejecutar un editor de texto y un navegador es suficiente.

Acceso a internet: Fundamental para buscar recursos, documentación, y participar en comunidades de programación.

Ganas de aprender: La programación requiere paciencia y mucha práctica. ¡La perseverancia será tu mejor aliada!

Editor de código: Algo tan simple como VS Code es un excelente punto de partida. Es gratuito, popular y tiene soporte para una gran cantidad de lenguajes de programación. También existen algunos editores de código online en los que puedes ver los cambios en tiempo real como codesandbox o codepen.

Recursos educativos: Hay muchos cursos gratuitos y de pago en línea. Sitios como Codecademy, freeCodeCamp y Khan Academy ofrecen excelentes tutoriales para principiantes.

¿Qué tipos de caminos hay dentro de la programación?

La programación es un campo vasto y diverso, con muchas especializaciones. Aquí te muestro algunos caminos comunes que podrías considerar:

Desarrollo Web: Dividido principalmente en desarrollo frontend (lo que ves en un sitio web) y backend (la infraestructura detrás de escenas, el servidor).

Desarrollo de Software: Enfocado en la creación de software para ordenadores y dispositivos móviles.

Ciencia de Datos: Utiliza la programación para analizar datos y extraer conclusiones. Requiere conocimientos de estadística y matemáticas.

Inteligencia Artificial: Involucra algoritmos de aprendizaje automático, procesamiento de lenguaje natural y robótica.

Desarrollo de Videojuegos: Combina creatividad con programación para crear videojuegos interactivos.

¿Cómo empezar en la programación web?

Si te interesa el desarrollo web, una buena estrategia es comenzar aprendiendo las tecnologías fundamentales que todo desarrollador web debe manejar:

HTML: El lenguaje de marcado para crear la estructura de las páginas web.

CSS: Usado para estilizar elementos HTML y hacer que la página se vea bien y tenga algunas animaciones.

JavaScript: Un lenguaje de programación que te permite hacer que las páginas web sean interactivas y dinámicas.

Una vez que tengas una comprensión básica de estos tres conceptos, puedes comenzar a explorar herramientas más avanzadas como frameworks y bibliotecas.

Por ejemplo, React es una biblioteca de JavaScript muy popular para construir interfaces de usuario dinámicas y modernas, aunque personalmente, te recomiendo entender los fundamentos básicos primero ya que eso te facilitará mucho las cosas, porque si entiendes los conceptos básicos y cómo funciona el lenguaje, utilizar más adelante un framework será algo muy sencillo.

Ideas de proyectos iniciales

Utiliza editores online como codesandbox o codepen para practicar HTML. Apóyate en la web de MDN para ver toda la lista de etiquetas HTML que existen e intenta crear algo que tenga sentido.

Por ejemplo, una página en la que tengas diferentes tipos de encabezados con tamaños diferentes, algunos párrafos de ejemplo, imágenes, links, etc..

Este primer contacto con el lenguaje de marcado HTML te ayudará a empezar a familiarizarte con el editor de código y aprenderás a utilizar algunas etiquetas HTML que forman el esqueleto de las webs de todo el mundo.

Consejos Finales

Practica mucho: La mejor manera de aprender programación es escribiendo código. Comienza con pequeños proyectos y aumenta la complejidad a medida que mejoras.

Únete a comunidades: Participar en foros como Stack Overflow o Reddit, y unirte a grupos locales o en línea puede proporcionarte apoyo y dirección.

Sigue aprendiendo: La tecnología cambia rápidamente. Mantente actualizado con las últimas tendencias y tecnologías emergentes.

Espero que este post te haya proporcionado un buen punto de partida en tu aventura de programación. ¡No te desanimes por los desafíos! Cada programador empezó siendo un principiante en algún momento. Con dedicación y curiosidad, estarás creando cosas increíbles antes de lo que imaginas.