¿Qué es la programación?

La programación es una de las maneras de comunicarnos con las computadoras y otros dispositivos electrónicos para decirles cómo deben comportarse.

Lo hacemos por medio de palabras y frases que tienen un propósito predefinido. Con ellas podemos crear instrucciones y manipular dispositivos o programas.

Cada lenguaje de programación define los aspectos que puede manipular de un sistema y las palabras que deben de usarse para dicho propósito, a esto le llamamos sintaxis.

Existe una gran cantidad de lenguajes que podemos usar para controlar lo que hace una computadora.

¿Qué es sintaxis?

En programación utilizamos código para decirle a los dispositivos qué tareas realizar.

Cada lenguaje de programación tiene un conjunto de reglas que dicta la validez de las instrucciones.

Dicho de otra manera, cada lenguaje decide qué palabras tienen qué significado y en qué orden deben ir para ser interpretadas correctamente por el dispositivo. A esto se le denomina sintaxis.

Al aprender un lenguaje es una buena idea enfocamos en las estructuras de palabras que podemos usar y el propósito de cada una de ellas.

Sobre el dominio de la sintaxis

Para dominar un lenguaje de programación, debemos saber usar las diferentes estructuras de código para crear los comportamientos que deseamos en un programa.

Una vez que dominemos alguno de ellos, aprender otro lenguaje no resulta tan complicado, ya que la mayoría comparten estructuras similares, sólo cambian las palabras usadas para crear los mismos comportamientos.

Por ejemplo, el siguiente código nos sirve para crear una función que imprime un mensaje a la consola en JavaScript:

function myFun() {
  console.log("Hello");
}

Y así se ve la misma función pero para Python:

def myFunc():
  print("Hello")

Como podemos ver, el patrón de la estructura de código es fácil de identificar incluso si hay algunas diferencias.

El código sólo es texto

De manera simplificada, el código sólo es texto que es interpretado por algún programa específico. Ese programa sabe qué hacer con la estructura del texto que le damos y le da vida a las aplicaciones que conocemos.

En el desarrollo web (por lo menos en el frontend), el programa que interpreta nuestros archivos es el navegador.

Los archivos que maneja son HTML, CSS y JavaScript, que usan las extensiones .html, .css y .js, respectivamente.

Para crear estos archivos podemos usar cualquier editor de texto que nos permita guardarlos con las extensiones necesarias.

Aunque utilizar una herramienta dedicada para crear código puede darnos algunas ventajas.

¿En dónde se usa la programación?

Áreas de trabajo

Existe una gran cantidad de áreas donde se puede utilizar la programación, algunas de ellas son:

Desarrollo Web

Es el diseño y construcción de sitios y aplicaciones web. Cubre todo, desde diseños de páginas simples hasta software complejo para empresas, con un enfoque en la arquitectura web, la interfaz de usuario y la experiencia del usuario.

Desarrollo de Juegos

El arte de crear experiencias de entretenimiento interactivo, que van desde juegos independientes hasta títulos AAA, involucrando la mecánica de juego, la narración de historias y el diseño de la interfaz de usuario.

Ciencias de la Computación

Es el estudio de las computadoras y los procesos algorítmicos, incluidos sus principios, sus diseños de hardware y software, sus aplicaciones y su impacto en la sociedad.

Ciencia de Datos

El campo que combina la experiencia en un dominio específico, habilidades de programación y conocimiento de matemáticas y estadísticas para extraer conocimientos significativos de los datos. Involucra análisis de datos, aprendizaje automático y modelado predictivo.

Aprendizaje Automático e IA

Desarrollo de algoritmos que pueden aprender y hacer predicciones sobre datos.

Computación Científica

Uso de capacidades de computación avanzadas para resolver problemas científicos complejos.

Finanzas y Comercio

Escritura de algoritmos para comercio automatizado o gestión de datos financieros.

Ciberseguridad

Protección de sistemas, redes y programas contra ataques digitales.

Robótica

Programación de robots para realizar diversas tareas.

Diseño Gráfico y Animación

Programación para diseño visual y gráficos en movimiento.

Bioinformática

Aplicación de herramientas y técnicas de informática para capturar e interpretar datos biológicos.

Procesamiento de Lenguaje Natural (PLN)

Permitir que las computadoras entiendan e interpreten el lenguaje humano.

Desarrollo de Herramientas

Creación de herramientas de software que ayudan en el desarrollo de software u otras tareas informáticas. Esto podría incluir compiladores, editores de texto, depuradores o cualquier software que facilite la realización de una tarea.

IoT (Internet de las Cosas)

Desarrollo de dispositivos interconectados que pueden recopilar e intercambiar datos. Involucra la programación para sensores, dispositivos portátiles, electrodomésticos inteligentes y otros dispositivos que contribuyen a ecosistemas inteligentes.

Mods de Juegos

Modificación de software de juegos para alterar cómo se juegan o se experimentan los juegos. Esto puede incluir cambios en niveles, personajes, objetos y también puede introducir nuevas mecánicas de juego o historias.

Música

La programación se puede utilizar para crear herramientas de producción de música digital, sintetizadores, algoritmos para componer música o incluso IA que puede realizar análisis o composición musical.

Desarrollo de Aplicaciones Móviles

Creación de aplicaciones para dispositivos móviles.

Sistemas Embebidos

Escritura de software para dispositivos que no se consideran tradicionalmente computadoras, como electrodomésticos, automóviles y cámaras.

Diseño de Experiencia de Usuario (UX)

Creación de software con un enfoque en la experiencia del usuario final.

Blockchain y Criptomoneda

Desarrollo de libros de contabilidad digitales descentralizados y monedas digitales.

Realidad Aumentada (AR) y Realidad Virtual (VR)

Creación de experiencias inmersivas para entretenimiento, educación y más.

Informática de la Salud

Desarrollo de sistemas para gestionar la información sanitaria.

Software Educativo

Desarrollo de plataformas de aprendizaje interactivo y herramientas educativas.

Redes Sociales y Comunicación

Creación de plataformas para la comunicación y el intercambio de contenido.

E-commerce

Desarrollo de mercados en línea y sitios web de venta al por menor.

Computación en la Nube

Construcción de servicios y aplicaciones que se ejecutan en servidores remotos y se acceden a través de internet.

Tecnología de Hogar Inteligente

Programación de dispositivos que automatizan tareas y aumentan la eficiencia de los entornos domésticos.

Drones y Tecnología Aérea

Desarrollo de software para vehículos aéreos no tripulados (UAV) para diversas aplicaciones.

¿Qué es Web Dev?

La expresión web dev viene del inglés web developer, que significa desarrollador web.

Un desarrollador web es una persona que crea sitios y aplicaciones mediante tecnologías creadas para navegar en internet.

Se divide principalmente en dos áreas:

• Frontend: Se encarga de lo que es visible para los usuarios. Como páginas, menús, botones, etc.
• Backend: Se encarga de la lógica de comunicación entre sistemas. Como bases de datos y otros servicios.

A la combinación de ambas áreas se le denomina Fullstack.

¿Cómo funciona la web?

Internet es una inmensa red de dispositivos que se comunican entre sí.

Dependiendo de su naturaleza pueden ser:

• Servidores
• Clientes

A los dispositivos se encargan de guardar y manejar la información que encontramos en sitios y aplicaciones web, en términos técnicos, los llamamos servidores.

Para acceder a dicha información podemos utilizar un navegador web. Este programa nos ayuda a pedir datos y archivos dentro la red, en términos técnicos, lo llamamos cliente.

Cuando visitamos un sitio web, el navegador envía un mensaje para conseguir archivos de un dispositivo específico dentro de esta red.

Una vez que el mensaje llega al destino, el servidor se encarga de mandar los datos y archivos correspondientes a nuestro navegador.

Y el navegador convierte esos archivos para mostrarlos de la manera a la que estamos acostumbrados.

A la parte del desarrollo web que está orientada a manejar lo que sucede en el cliente se le llama frontend.

A la parte que maneja lo que sucede en el servidor se le llama backend.

Cuando combinamos ambas prácticas se le denomina fullstack.

¿Qué es Frontend?

Frontend es el término que usamos para referirnos a la parte del desarrollo web que se encarga de la interfaz con la que interactúa el usuario.

En palabras simples: cómo se ve y cómo se siente una aplicación o sitio web.

Algunos de los recursos con los que trabajamos en esta rama son:

• HTML: Es un lenguaje que nos ayuda a crear y estructurar el contenido de la web.
• CSS: Es un lenguaje que nos deja a estilizar y diseñar dicho contenido.
• JavaScript: Es un lenguaje que nos permite añadir interactividad y comportamiento dinámico.
• Frameworks y bibliotecas: Son herramientas que facilitan el desarrollo del frontend.
• Diseño responsivo: Es un enfoque que asegura que la web se vea y funcione bien en diferentes dispositivos y tamaños de pantalla.

¿Qué necesitamos para aprender Frontend?

Aprender frontend es de las ramas de programación más amigables para principiantes por varias razones. Una de ellas es que no se necesitan programas muy pesados.

De hecho también se puede aprender y practicar sin necesidad de instalar nada en tu dispositivo.

Aquí vamos a ver algunas alternativas para aprender frontend:

• Alternativa local
• Alternativa remota

Alternativa local

Le llamamos local porque vamos necesitar una computadora obligatoriamente, ya que vamos a estar creando y modificando archivos en nuestro dispositivo.

Para ello vamos a utilizar un editor de código: Usualmente VS Code, aunque hay más alternativas.

También vamos a utilizar diferentes herramientas para publicar nuestro trabajo en la web.

Ventajas

• El flujo de trabajo es más parecido al de un entorno profesional.
• Aprendemos lo que hace cada una de las herramientas y cómo utilizarlas de manera eficiente.

Desventajas

• Todo es más manual, por lo que nos va a llevar tiempo crear un entorno de trabajo.
• Publicar nuestros proyectos puede requerir más tiempo y esfuerzo.

Alternativa remota

Le llamamos remota porque las herramientas que vamos a utilizar forman parte de servicios en plataformas online.

Necesitamos un dispositivo que cuente con navegador de internet. Hoy en día casi cualquier dispositivo inteligente puede acceder a los sitios que vamos a utilizar para crear nuestros proyectos.

Algunas de las plataformas que podemos utilizar son:

• PlayCode
• CodePen
• JSFiddle
• CodeSandbox
• Replit
• StackBlitz

Ventajas

• Podremos trabajar en proyectos que serán almacenados en la nube de manera automática, lo que nos permitirá cambiar alternar entre dispositivos sin problemas.
• Usualmente los proyectos ya estarán alojados en un enlace que puede ser visitado por todo el mundo. (Crear proyectos privados dependerá de la plataforma).

Desventajas

• Algunas plataformas empiezan a cobrar a partir de cierto número de proyectos.
• Algunas funcionalidades avanzadas no están disponibles en editores online.
• Si usamos un dispositivo móvil, la velocidad con la que podemos escribir código puede verse reducida.

Consigamos VS Code

🎬 Video

¿Dónde conseguirlo?

Vamos a dirigirnos al sitio oficial de Visual Studio Code

En la página principal encontraremos un botón para descargarlo.

Usualmente bajará la versión correcta para el sistema operativo que estemos usando (Windows, MacOs o Linux), pero también podemos escoger un instalador particular o versiones anteriores del programa si damos clic en la lista.

Instalación

La instalación es como cualquier otro programa.

Opciones de Windows

En Windows, uno de los últimos pasos del instalador se ve de esta manera:

Podemos marcar las dos casillas que dicen Add “Open with Code” para que nos aparezca este programa en el menú de clic derecho en el Explorador de Archivos.

Paseo por la interfaz

🎬 Video

Al iniciar

Cuando abrimos el programa por primera vez se ve de la siguiente manera:

Tiene una serie de guías que nos ayudan a aprender a usar y modificar el editor. Si quieres saltar este paso puedes dar clic en las palabras Mark Done (_Marcar como hecho).

Lo usual

Cuando abrimos el programa el resto de las veces podemos ver una pantalla como esta:

Si no queremos que se abra la pestaña de bienvenida por defecto, podemos desmarcar la casilla en la parte inferior.

Sobre las diferentes secciones

Barra de menús

En la parte superior tenemos la barra de menús.

Barra lateral

Del lado izquierdo tenemos la barra lateral o sidebar, aquí encontraremos diferentes botones que nos ayudarán a abrir paneles, cada uno con una tarea diferente.

De arriba hacia abajo, el primero es el explorador de archivos. Similar al que utiliza nuestro sistema operativo, pero podemos abrir, crear y modificar archivos directamente desde aquí.

El segundo es el panel de búsqueda. Nos ayuda a encontrar los diferentes archivos que coincidan con algún patrón de texto

El tercero es el control de código fuente, nos ayuda a gestionar el historial de archivos creado por el control de versiones (usualmente Git).

El siguiente es el panel de ejecución y depuración, nos ayuda a ejecutar algunos archivos y poder encontrar errores y comportamientos no deseados en algunos lenguajes

El último de esta sección es el panel de extensiones, nos ayuda a agregar funcionalidades a nuestro editor.

En la parte inferior de la misma barra podemos encontrar el menú de cuentas, nos sirve para iniciar sesión y poder guardar y sincronizar nuestros ajustes en otros dispositivos.

Y también el menú de gestión, donde podemos encontrar diferentes opciones para configurar el editor.

Sección principal

El resto de la interfaz es donde podremos ver los diferentes archivos que usemos en nuestros proyectos, se abrirán en forma de pestañas, como en un navegador. Podemos tener múltiples pestañas abiertas e incluso tenerlas lado a lado, o unas encima de otras.

Cambio de idioma

🎬 Video

Para cambiar el idioma debemos dirigirnos a la barra lateral y dar clic en el menú extensiones.

Se abrirá un nuevo panel, dentro de la barra de búsqueda debemos escribir spanish.

Usualmente la primera opción (Spanish Language Pack for VS Code) es la correcta, así que podemos dar clic en install (instalar).

Una vez instalado, en la parte inferior derecha nos aparecerá un mensaje para reiniciar el editor. Debemos dar clic en el botón azul.

Al reiniciar el programa, lo encontraremos en el nuevo idioma.

Para volver a cambiar el idioma podemos ir al menú Ver (View) > Paleta de comandos (Command Palette)

Escribir idioma (language) y seleccionar Configurar idioma de pantalla (Configure Display Language)

Aparecerá una lista de los lenguajes instalados y los lenguajes disponibles

Podemos seleccionar uno instalado o uno diferente para instalar la extensión correspondiente.

Sobre Live Server

Live Server es una extensión de VS Code que nos ayuda a ver nuestro sitio web sin tener que recargar el navegador cada que hagamos cambios. De esta manera podemos desarrollar a la par con lo que estamos viendo.

Instalación

Para instalarla, nos dirigimos a la barra lateral > extensiones y buscamos live server.

¿Cómo usar?

Para iniciar el servidor

Hay dos formas de ejecutar la extensión. Una de ellas es estar en un archivo .html y dar clic derecho.

En el menú deberá aparecer Open with Live Server.

La otra opción es dar clic en la barra inferior, en el botón Go Live.

Cómo funciona

Una vez que iniciamos el servidor, se abrirá nuestro navegador en la dirección que por defecto nos da la extensión: http://127.0.0.1:5500

Ahora podemos cambiar el código y al guardar el archivo, los cambios se verán reflejados automáticamente en el navegador.

Para que la extensión funcione correctamente debemos tener por lo menos la etiqueta <body> dentro de nuestro archivo. Si no, nos aparecerá una advertencia.

Para detener el servidor

Para detener el servidor se hace de manera similar.

Podemos dar clic derecho y seleccionar Stop Live Server.

O podemos ir a la barra inferior y utilizar el botón que indica el puerto en el que está corriendo el servidor, usualmente Port: 5500.

Sobre Prettier

Prettier¹ es una herramienta que nos ayuda a mantener el formato de nuestro código de manera consistente. Funciona en diferentes editores de código y para diferentes lenguajes.

En HTML nos ayuda a mantener una legibilidad más adecuada por medio de los saltos de línea y la indentación.

En CSS nos ayuda a espaciar correctamente los selectores y las reglas.

En JS nos ayuda a autocompletar el punto y coma, además de mantener los espacios consistentes.

Instalación

Podemos instalarla en VS Code como una extensión. Para ello podemos ir a la barra lateral > extensiones y buscar prettier.

Configuración

Cómo activarla

Vamos a las opciones de nuestro editor (podemos usar el atajo ctrl/cmd + ,), y buscamos formatter (formateador).

En la lista Default formatter vamos a seleccionar Prettier.

Cómo formatear automáticamente al guardar

Para un mejor flujo de trabajo, podemos hacer que este formateador funcione al momento de guardar nuestros archivos.

En la misma búsqueda de ajustes podemos encontrar la opción Format On Save (formatear al guardar), y la activamos.

Ahora cada que guardemos algún archivo de código que esté soportado por esta herramienta, cambiará el formato de manera automática.

Se puede configurar para seguir diferentes reglas de formato, aunque las reglas por defecto son suficiente para los principiantes.

Construyendo casas virtuales

Existe una analogía muy popular para explicar cómo funcionan las tres tecnologías básicas de la web:

Imaginemos que estamos construyendo una casa, sólo que en lugar de ser una casa en el mundo físico, lo haremos en el mundo digital.

Para hacerlo, utilizamos tres herramientas especiales llamadas HTML, CSS y JavaScript.

Cada una tiene un trabajo único que nos ayuda en la construcción de esta casa.

HTML: Los ladrillos

HTML es como los ladrillos de nuestra casa. Lo usamos para construir las partes de nuestra página web, como los párrafos de texto, las imágenes que vemos y los botones en donde hacemos clic.

CSS: La pintura y decoración

Una vez que tenemos los ladrillos (HTML), usamos CSS para hacer que nuestra casa se vea bonita. CSS es como la pintura y la decoración de nuestra casa en la web. Nos permite elegir colores, hacer que el texto sea más grande o más pequeño, y poner todo en el lugar correcto.

JavaScript: La magia que hace que las cosas se muevan

JavaScript es como la magia que hace que las cosas en nuestra casa funcionen. Si queremos que algo se abra cuando hacemos clic, o que aparezca un mensaje, usamos JavaScript.

Aprendamos HTML

Introducción

Son las siglas para HyperText Markup Language, o Lenguaje de Marcas de HiperTexto.

Es un lenguaje que nos sirve para crear el contenido y la estructura de una página web.

Anatomía de código HTML

Para poder utilizarlo, debemos aprender algunos conceptos.

Etiquetas y Elementos

El lenguaje está compuesto por segmentos de código a los cuales llamamos etiquetas. Una etiqueta sigue esta estructura:

<nombre>

Es decir: signo <, nombre de la etiqueta, seguido del signo >.

Los nombres ya están predefinidos, y cada uno de ellos nos ayuda con tareas específicas, como mostrar texto, imágenes, videos, tablas, etc.¹

Por ejemplo:

<body></body>

… que nos ayuda a crear el cuerpo de la página.

La mayoría de las etiquetas deben venir en pares, donde a la primera la llamamos etiqueta de apertura y la segunda la llamamos etiqueta de cierre.

La etiqueta de cierre necesita una diagonal antes del nombre.

En medio de las dos podemos insertar contenido, por ejemplo; texto, más etiquetas, o una combinación de ambos.

<body>
  Contenido
</body>

A esta estructura le llamamos Elemento HTML.

Elementos vacíos

Existen Elementos que sólo necesitan la etiqueta de apertura, es decir, no pueden tener contenido. A este tipo de elementos se les considera elementos vacíos o de autocierre.

<br >

Usualmente se le pone una diagonal después del nombre para hacer explícito que no puede tener contenido, pero deberían funcionar con o sin ella.

<br />

Atributos

En la etiqueta de apertura de algunos elementos podemos encontrar segmentos de código a los que llamamos atributos. Nos ayudan a definir ciertos comportamientos de las etiquetas:²

<div style="color:blue;">Texto</div>

En este caso estamos cambiando el aspecto del texto mostrado.

La estructura de los atributos es nombre="valor". En el ejemplo anterior style es el atributo definido y color:blue; es el valor.

Atributos globales

Existen atributos que pueden ser usados en todas las etiquetas, algunos ejemplos son: style, class y id. A estos los llamamos atributos globales.

Atributos particulares

También existen atributos que sólo se pueden usar en ciertas etiquetas, por ejemplo:

<a href="https://www.google.com/" target="_blank">Ir a Google</a>

Esta etiqueta nos ayuda a agregar links o enlaces. En este caso tenemos una etiqueta con dos atributos: href y target, el primero le indica a dónde redirigirnos cuando le damos clic.

El segundo le indica que dicho enlace debe abrirse en una nueva pestaña.

Algunas etiquetas necesitan de ciertos atributos para funcionar correctamente. En el ejemplo anterior, href es uno de ellos, ya que si no hay enlace, la etiqueta sólo mostrará texto y no podrá redirigirnos a ningún lado.

Otro ejemplo es:

<img src="https://placebear.com/200/300" />

<img> la etiqueta que nos ayuda a mostrar imágenes, donde src es similar a href. Siendo que le indica de dónde conseguir la imagen a mostrar.

Estructura básica de un documento HTML

Al usar un editor de código como VS Code, tenemos acceso a algunos atajos para generar código base para algunos proyectos. Si creamos un archivo HTML y utilizamos el autocompletado ! obtendremos el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> Indica que el tipo de documento será de tipo html. Con este código está implícito que usaremos la última versión del lenguaje.

Existen otros tipos de documento y versiones de HTML que podemos usar, pero para hacer proyectos web con las características más recientes del lenguaje podemos dejar la línea generada.

El segundo elemento es <html>, debemos incluir el resto de etiquetas para generar una página. Por defecto incluye el atributo lang="es", que le indica que el contenido será Aquí tenemos que insertar dos elementos más.

<head> es donde van las etiquetas con información importante para el navegador.

<body> es donde va el contenido que verá el usuario.

<meta charset="UTF-8" /> indica que usaremos uno de los sistemas de codificación de caracteres más usados en la web. Esto nos ayuda a evitar conflictos de visualización y compatibilidad con usuarios que visitan nuestra página desde otros países o utilizan otro lenguaje en su navegador.

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> nos ayuda a hacer que la pantalla se adapte a diferentes tamaños de dispositivos móviles para que el contenido no aparezca demasiado pequeño ni demasiado grande.

<title> nos ayuda a darle un nombre a la pestaña, lo cual también sirve cuando agregamos la página a marcadores.

Etiquetas básicas de contenido

Cuando recién comenzamos a aprender HTML, las etiquetas que más nos van a servir, además de las etiquetas para la estructura básica de un documento¹, son las siguientes.

Comentario

Nos ayuda a evitar que algunas líneas de texto sean interpretadas como código, de esta manera podemos dejar mensajes o recordatorios para nosotros mismos u otros desarrolladores.

<!-- Esto es un comentario -->
<!-- Esto no se mostrará al usuario en la página web -->

Títulos o encabezados

Las etiquetas heading, por título o encabezado. Van de <h1> a <h6>. Nos ayudan a dividir los temas y subtemas de nuestra página. Son como títulos y subtítulos en un libro de texto.

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Párrafo

La etiqueta <p>, por paragraph (párrafo) nos ayuda a agregar bloques de texto.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
  Maiores perspiciatis accusantium dolorum deleniti ducimus modi eum. Assumenda,
  itaque?
</p>
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Lista desordenada

la etiqueta <ul>, por unordered list o lista desordenada, nos ayuda a mostrar elementos usando viñetas.

<ul>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ul>

Elemento de lista

Para poder usar las listas correctamente se debe usar el elemento <li>, por list item o elemento de lista, por cada artículo que queramos agregar a la lista.

Lista ordenada

la etiqueta <ol>, por ordered list o lista ordenada, nos ayuda a mostrar elementos de forma numerada. También hace uso de los elementos <li>.

<ol>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ol>

Salto de línea

La etiqueta <br>, por line break o salto de línea, nos ayuda a crear un espacio entre bloques de contenido.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br />
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Regla horizontal

La etiqueta <hr>, por horizontal rule o regla horizontal, nos ayuda a crear una línea de separación en el contenido.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<hr />
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Ancla (enlace)

La etiqueta <a>, por anchor o ancla, nos ayuda a crear enlaces a otras páginas y secciones. Necesita el atributo href donde el valor es el link a donde queremos que nos lleve.

Este es el ejemplo más básico:

<a href="https://iniz.lol">Ir a mis redes sociales</a>

Opcionalmente podemos agregar target="_blank" para hacer que el enlace se abra en una nueva pestaña.

<a href="https://iniz.lol" target="_blank">Ir a mis redes sociales</a>

Imagen

La etiqueta <img>, por image o imagen, nos ayuda a mostrar imágenes en el documento. Necesita el atributo src donde el valor debe ser la dirección donde se encuentra alojado el archivo. Opcionalmente se puede poner el atributo alt donde el valor debe ser una descripción de la imagen. Nos ayuda cuando la imagen no carga y para los usuarios con lector de pantalla activado.

<img src="https://placebear.com/200/300" alt="Foto de dos osos" />

División

La etiqueta <div>, por division o división, nos ayuda a crear separaciones en el contenido, usualmente para agregar estilos a bloques de contenido que están relacionados visualmente.

<div style="color: orange">
  <h1>Título</h1>
  <p>Contenido</p>
  <p>Contenido</p>
</div>

Abarcar

La etiqueta <span> o abarcar es similar a div. Sólo que nos ayuda a agrupar frases o palabras en un renglón para hacer separaciones, en lugar de hacerlo por bloques.

<p>Contenido <span style="color: pink">con estilo</span></p>

Ejercicio - Hagamos un periódico

La apariencia por defecto del HTML no es muy estética, se parece más a lo que veríamos en un periódico local. Donde la estructura sólo son encabezados, párrafos y algunas imágenes. Usaremos esto a nuestro favor para crear nuestro propio periódico.

Repasemos lo que aprendimos

Recordemos que las etiquetas que vimos hasta ahora son:

• Comentario <!-- -->
• Títulos o encabezados <h1> - <h6>
• Párrafo <p>
• Lista ordenada <ol>
• Lista desordenada <ul>
• Elemento de lista <li>
• Salto de línea <br>
• Regla horizontal <hr>
• Ancla (enlace) <a>
• Imagen <img>
• División <div>
• Abarcar <span>

Estas no son las únicas etiquetas existentes, si sabes usar otras que no estén en esta lista puedes agregarlas a tu proyecto. Más adelante aprenderemos sobre otras etiquetas útiles.

No olvides que…

Puedes checar el siguiente ejemplo para darte una idea:

Aquí hay una versión más pequeña del mismo ejemplo:

Aprendamos CSS

Cuando creamos código HTML, el navegador se encarga de darle una apariencia por defecto, la cual no es muy llamativa.

Para cambiar esto, el lenguaje CSS nos ayuda a darle estilo a los diferentes elementos que componen nuestro sitio web.

CSS viene del inglés Cascading Style Sheets u Hojas de Estilo en Cascada.

Una de las formas de agregar estilos a nuestros elementos HTML es desde la etiqueta de apertura, utilizando el atributo style. Dentro podemos escribir una o más reglas de CSS.

<p style="color:pink;">Contenido</p>

Anatomía de reglas CSS

Las reglas están compuestas por una propiedad y un valor, entre ellos deben existir el símbolo dos puntos (:), y al final debe ir el símbolo punto y coma (;).

propiedad: valor;

En el ejemplo inicial tenemos un estilo con una sola propiedad:

• color, que tiene el valor pink.

Aunque en realidad podemos usar varias propiedades dentro style, por ejemplo:

<p style="color:pink;font-size:32px;">Contenido</p>

Esta vez agregamos dos propiedades, cada una con su propio valor.

Sobre los valores

Los valores que podemos usar dependen de cada propiedad¹.

Por ejemplo:color, acepta diferentes formatos de color:

• Colores nombrados (como pink)
• Colores hexadecimales (como #ffc0cb)
• Colores RGB (como rgb(255, 192, 203))
• Entre otros

color: pink;
color: #ffc0cb;
color: rgb(255, 192, 203);

Otro ejemplo sería font-size, que acepta diferentes formatos de tamaños o medidas:

• Tamaños en pixels (como 32px)
• Tamaños en medidas relativas (como 2rem)
• Tamaños en medidas de fuente (como large)
• Entre otros

font-size: 32px;
font-size: 2rem;
font-size: large;

Existe una gran cantidad de propiedades². Dependiendo del sitio donde consultes el número puede variar pero son cientos de ellas.

Propiedades básicas CSS

Existe una gran variedad de propiedades que pueden ser usadas para cambiar el aspecto de los elementos de nuestra página. Aquí hay una pequeña lista de las más sencillas de utilizar y que provocan grandes cambios:

color

Cambia el color del texto del elemento:

<p style="color:red;">Texto</p>

Acepta valores de tipo <color>¹.

background-color

Cambia el color de fondo del elemento:

<p style="background-color:royalblue;">Texto</p>

Acepta valores de tipo <color>¹.

font-family

Cambia la familia de fuente/tipografía:

<p style="font-family:monospace;">Texto</p>

Acepta valores de tipo <string>², eso quiere decir que podemos usar cualquier texto, aunque los valores siempre deben pertenecer a una familia de fuente.

Podemos probar con algunos valores genéricos:

• serif
• sans-serif
• monospace
• cursive

font-size

Cambia el tamaño de la letra:

<p style="font-size: 32px;">Texto</p>

Acepta valores de diferentes tipos, algunos de ellos son <absolute-size>³ y <length>⁴.

Podemos probar con algunos valores de tipo <absolute-size> como:

• xx-small (extra extra chico)
• x-small (extra chico)
• small (chico)
• medium (mediano)
• large (grande)
• x-large (extra grande)
• xx-large (extra extra grande)

Y algunos de tipo <length> como:

• px (pixeles)
• cm (centímetros)
• mm (milímetros)
• in (pulgadas)
• % (porcentajes)
• Entre otros

text-align

Cambia la alineación de texto:

<p style="text-align:center;">Texto</p>

Los valores más comunes son:

• left (izquierda) es el valor por defecto
• right (derecha)
• center (centrado)
• justify (justificado)

border

Cambia el borde del elemento:

<p style="border:1px solid black;">Texto</p>

Está dividido en tres partes:

• border-width: indica el ancho del borde
• border-style: indica el estilo del borde
• border-color: indica el color del borde

En el ejemplo anterior, el borde tiene un ancho de 1px, un estilo solid (sólido) y un color con valor black (negro).

Para el ancho podemos usar valores de medidas³⁴.

Para el estilo del borde podemos usar:

• solid (sólido)
• dashed (discontinuo)
• dotted (punteado)
• double (doble)
• groove (acanalado)
• ridge (cuadrado)
• inset (insertado)
• outset (insertado)

Y para el color podemos usar valores de color¹.

margin

Cambia el espacio entre el elemento actual y los elementos consecuentes:

<p style="margin:12px;border:1px solid black;">Texto</p>
<p>Texto</p>

Podemos usar valores de medidas³.

padding

Cambia el espacio entre el contenido del elemento y el borde:

<p style="padding:12px;border:1px solid black;">Texto</p>
<p>Texto</p>

Podemos usar valores de medidas³⁴.

width

Cambia el ancho del elemento:

<p style="width:50%;border:1px solid black;">Texto</p>
<p style="border:1px solid black">Texto</p>

Podemos usar valores de medidas³⁴.

height

Cambia la altura del elemento:

<p style="height:40px;border:1px solid black;">Texto</p>
<p style="border:1px solid black">Texto</p>

Podemos usar valores de medidas³⁴.

Con estas reglas podemos comenzar a crear algunos cambios interesantes en nuestros proyectos.

Colores nombrados

En CSS, cuando utilizamos una propiedad como background-color podemos colocar valores del tipo <color>¹.

Existen diferentes alternativas, algunas de ellas son:

• por palabras reservadas o nombres
• por notación hexadecimal²
• por notaciones de espacio de color

El concepto colores nombrados hace referencia a los colores que están asociados con palabras en lugar de códigos o funciones. Existen alrededor de 150 palabras que hacen referencia a colores³:

Algunas de ellas son sinónimos, es decir, son el mismo color pero escrito de diferente manera:

• Aqua / Cyan
• Fuchsia / Magenta
• DarkGray / DarkGrey
• DarkSlateGray / DarkSlateGrey
• DimGray / DimGrey
• LightGray / LightGrey
• LightSlateGray / LightSlateGrey
• Gray / Grey
• SlateGray / SlateGrey

Además de estas palabras, también podemos encontrar transparent para crear transparencia y currentColor que nos ayuda a heredar el color de elementos superiores en la jerarquía de elementos.

Formatos de color más comunes

En CSS existen diferentes formas de especificar un color. Las más comunes son:

• Colores nombrados
• Hexadecimal
• RGB
• RGBA
• HSL
• HSLA

Colores nombrados

Los colores nombrados son valores predefinidos que utilizan nombres de colores en inglés, como red, blue, green, etc.

Usualmente esta es la primera forma en la que aprendemos a utilizar valores de tipo <color> ya que se encuentran en la lista de autocompletado de VS Code. Podemos encontrar la lista completa aquí: Colores nombrados.

Hexadecimal

Es un formato que utiliza valores del sistema hexadecimal para especificar colores.

El sistema hexadecimal utiliza 16 símbolos para contar: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Donde el valor mínimo es 0 y el máximo es f.

Los colores que usan 6 valores o tres pares de valores son los más comunes:

#RRGGBB

• El primer par de valores indica la cantidad de rojo (Red)
• El segundo par de valores indica la cantidad de verde (Green)
• El tercer par de valores indica la cantidad de azul (Blue)

Por ejemplo:

#ff0000

Sería un color completamente rojo:

También podemos encontrarlo en formato de 8 valores o 4 pares, donde el último par indica la opacidad del color:

 #RRGGBBAA

Donde A es el valor Alpha o la opacidad.

Por ejemplo:

#ff000080

Sería un color completamente rojo con una opacidad hexadecimal de 80 que es equivalente a 50%.

Y también podemos encontrarlo en formato de 3 valores:

#RGB

Que en realidad se vuelve un equivalente a repetir el valor en cada color.

Por ejemplo:

#0f0

Es equivalente a:

#00ff00

Y:

#abc

Es equivalente a:

#aabbcc

RGB y RGBA

RGB y RGBA son formatos que utilizan una función para especificar colores.

En este artículo veremos la versión moderna de rgb() que nos permite poner diferentes tipos de valores para cada color y opacidad.

Con números

La sintaxis es la siguiente:

rgb(R G B)

Donde:

• R es el valor de rojo (red)
• G es el valor de verde (green)
• B es el valor de azul (blue)

Y podemos usar valores del 0 al 255 para cada color.

Por ejemplo:

rgb(0 0 255)

Adicionalmente, podemos usar valores de 0 a 1 para la opacidad añadiendo una diagonal seguida del valor:

rgb(R G B / A)

Por ejemplo:

rgba(0 0 255 / 0.5)

Con porcentajes

También podemos usar porcentajes para especificar los valores.

rgb(30% 20% 50%)

Incluyendo la opacidad:

rgb(30% 20% 50% / 50%)

Incluso podemos combinar la notación de porcentajes con la de números:

rgb(0 30% 255 / 80%)

Sobre las funciones de legado

Anteriormente las funciones RGB estaban divididas entre rgb() y rgba(), los valores tenían que estar separados por comas y no se podían combinar números con porcentajes.

En la versión actual de rgb() debemos usar espacios para separar los valores y podemos agregar la opacidad dentro de la misma función sin problema así como combinar números con porcentajes.

HSL y HSLA

HSL y HSLA también son formatos que utilizan una función para especificar colores.

Y de igual manera tienen una versión moderna que nos permite agregar opacidad de manera opcional.

La sintaxis es la siguiente:

hsl(H S L / A)

Donde:

• H es el valor del tono (Hue)
• S es el valor de la saturación (Saturation)
• L es el valor de la luminosidad (Lightness)
• / A es la opacidad (Alpha). Es un valor opcional.

H acepta valores de tipo <number> o <angle>. Es decir, números del 0 al 360, o valores en grados, vueltas, etc.

S acepta valores de tipo <percentage>. Es decir, porcentajes del 0% al 100%. Si olvidamos el % se seguirá interpretando como porcentaje.

L también acepta valores de tipo <percentage>.

A acepta valores de tipo <alpha-value>, que en realidad sólo son valores del 0 al 1 o del 0% al 100%.

Por ejemplo:

hsl(0 100% 50%)

Formas de agregar estilos

Estilos en línea

Hasta este punto la única forma que conocemos de utilizar estilos es por medio del atributo style en la etiqueta de apertura de algún elemento.

<p style="color:tomato;">Contenido</p>

A este método se le conoce como estilos en línea.

Pero existen otros dos métodos que nos pueden ayudar a separar mejor los estilos del contenido para mejorar la legibilidad del código y su mantenimiento.

Para poder utilizarlos, debemos aprender un concepto al que llamamos selectores.

Sobre selectores

Nos ayudan a seleccionar los elementos que serán afectados por las reglas CSS que escribimos. Tienen la siguiente forma:

selector {
  propiedad: valor:
}

Por ahora veremos los selectores más sencillos…

Etiquetas

Estos selectores por medio del nombre de alguna etiqueta, lo que afectará a todas las etiquetas de ese tipo:

Por ejemplo:

<p>Contenido A</p>
<p>Contenido B</p>
<p>Contenido C</p>
<p>Contenido D</p>

p {
  color: tomato;
  background-color: silver;
  padding: 4px;
  border-radius: 4px;
}

ID

Cuando sólo queremos estilizar un elemento específico, podemos utilizar el atributo id con un valor arbitrario.

En este caso, uno de los párrafos tiene el identificador un-identificador, el cual podemos usar para seleccionarlo con CSS.

<p>Contenido A</p>
<p id="un-identificador">Contenido B</p>
<p>Contenido C</p>
<p>Contenido D</p>

Para seleccionar un ID, debemos utilizar el símbolo #, seguido del nombre del identificador.

#un-identificador {
  color: forestgreen;
}

Class

Es un atributo que nos permite agregar una lista de identificadores al elemento. Similar a id, pero podemos tener múltiples clases y cada clase puede estar en múltiples elementos.

<p>Contenido A</p>
<p id="un-identificador">Contenido B</p>
<p class="una-clase">Contenido C</p>
<p class="una-clase otra-clase">Contenido D</p>

Para seleccionar por medio de clases, tenemos que utilizar el punto ., seguido del nombre del identificador.

.una-clase {
  color: slateblue;
}
.otra-clase {
  background-color: gold;
}

Estilos internos

La segunda forma de agregar estilos es por medio de la etiqueta <style>. Esta debe de ir dentro de la cabeza del documento.

Aquí podemos agregar los selectores y reglas que necesitemos.

<html>
  <head>
    <style>
      p {
        color: tomato;
        background-color: silver;
        padding: 4px;
        border-radius: 4px;
      }
      #un-identificador {
        color: forestgreen;
      }
      .una-clase {
        color: slateblue;
      }
      .otra-clase {
        background-color: gold;
      }
    </style>
  </head>
  <body>
    <p>Contenido A</p>
    <p id="un-identificador">Contenido B</p>
    <p class="una-clase">Contenido C</p>
    <p class="una-clase otra-clase">Contenido D</p>
  </body>
</html>

De esta forma es más fácil diferenciar el contenido de los estilos.

Estilos externos

Para este método debemos crear un nuevo archivo con la extensión .css.

p {
  color: tomato;
  background-color: silver;
  padding: 4px;
  border-radius: 4px;
}
#un-identificador {
  color: forestgreen;
}
.una-clase {
  color: slateblue;
}
.otra-clase {
  background-color: gold;
}

Dentro del documento HTML debemos utilizar una etiqueta link con relación stylesheet y haciendo referencia al nombre del archivo CSS.

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Contenido A</p>
    <p id="un-identificador">Contenido B</p>
    <p class="una-clase">Contenido C</p>
    <p class="una-clase otra-clase">Contenido D</p>
  </body>
</html>

¿Cómo agregar comentarios en CSS?

Cada lenguaje tiene su forma de crear comentarios para que agreguemos mensajes en nuestro código.

De esa manera pueden ser leídos por los desarrolladores e ignorados por el intérprete del lenguaje.

En CSS debemos encerrar el texto entre /* */:

/* Mi comentario */

Incluso podemos utilizar múltiples líneas:

/* Mi comentario
de varias líneas
para mejorar
el ejemplo */

Y también podemos ponerlos casi en cualquier parte de nuestro código:

body /* selecciona el cuerpo del documento */ {
  margin: 0; /* quita el margen por defecto*/
  color/* cambia el color del texto en toda la página */: #1b1b1b
    /* color oscuro en hexadecimal*/;
}

Sólo debemos asegurarnos de no interrumpir el nombre de algún selector, propiedad o valor.

Vamos a replicarlo

Hasta ahora hemos aprendido cómo utilizar algunas de las propiedades básicas de CSS, como lo son:

• color
• background-color
• font-family
• font-size
• text-align
• border
• margin
• padding
• width
• height

Ejercicio 1

Tratemos de replicar este ejemplo. Se trata de un título con una fuente diferente.

¿Qué reglas de CSS crees que debamos usar?

<h1>Un título con otra font</h1>

h1{
    font-family: Arial, sans-serif;
}

Ejercicio 2

Este ejercicio solo consta de un elemento con algunas reglas CSS.

¿Qué reglas de CSS crees que debamos usar?

<div></div>

div{
    width: 100px;
    height:100px;
    background-color:aquamarine;
}

Ejercicio 3

Este ejercicio consta de dos párrafos y sólo una propiedad de CSS.

¿Qué regla crees que debamos usar?

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellendus cumque delectus officia mollitia eligendi doloribus expedita dolore maiores in temporibus, molestias est dolores, quidem nam facilis nulla. Excepturi, molestiae!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellendus cumque delectus officia mollitia eligendi doloribus expedita dolore maiores in temporibus, molestias est dolores, quidem nam facilis nulla. Excepturi, molestiae!</p>

p{
    font-size: 12px;
}

Ejercicio 4

Este ejercicio consta de tres párrafos y algunas clases. Editamos la misma propiedad para cada clase pero con diferentes valores.

<p class="izquierda">Alineado a la izquierda</p>
<p class="centro">Alineado al centro</p>
<p class="derecha">Alineado a la derecha</p>

.izquierda{
    text-align: left;
}
.centro{
    text-align: center;
}
.derecha{
    text-align: right;
}

Ejercicio 5

Este ejercicio utiliza 3 etiquetas <span> y algunas reglas de CSS. La más importante es margin. Las demás sólo existen para hacer este concepto más evidente.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>

span {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 4px 8px;
}

Ejercicio 6

Este ejercicio modifica un gran número de propiedades. Tratemos de averiguar cuáles son. Usamos 6 reglas en total.

¿Cómo subir mi página a un enlace real? | GitHub

Una vez que tenemos los archivos de nuestra página, podemos crear una cuenta en GitHub.

¿Qué es GitHub?

Esta es una plataforma de almacenamiento en la nube dedicada a desarrolladores. Ofrece una gran cantidad de servicios, entre ellos, alojar nuestros archivos en un servidor para que puedan ser consumidos como una página web.

¿Cómo creamos un nuevo proyecto

Cuando creamos una cuenta nueva, la página de inicio nos mostrará un botón para crear un nuevo proyecto, aunque el término que utilizamos es repositorio.

Otra alternativa es dirigirnos al botón de nuestro perfil y seleccionar Your repositories (Tus repositorios). Aquí podremos encontrar el botón para crear uno nuevo.

Nos aparecerá un formulario. El primer campo es para seleccionar el nombre de nuestro proyecto.

Dentro de las opciones podremos elegir entre un proyecto público o un proyecto privado. Al usar el servicio gratuito sólo podemos crear páginas a partir de proyectos públicos.

El resto de los campos no los usaremos por ahora. Y le damos crear.

Dentro del repositorio

Nos enviará a la página de nuestro proyecto, aquí buscaremos el mensaje azul, y la sección que dice Upload existing files o Subir archivos existentes.

En esta pantalla podemos seleccionar o arrastrar los archivos y carpetas que conforman nuestro proyecto. Debajo aparecerá un formulario con dos campos, por ahora los dejaremos vacíos y publicaremos los nuevos archivos.

Una vez que suban los archivos, podremos ir a la barra superior que contiene diferentes menús. Seleccionaremos Settings o Ajustes. En la nueva pantalla iremos a la columna de la izquierda y buscaremos Pages o Páginas. En este panel buscaremos la sección Branch o Rama, y cambiaremos los ajustes de None a Main.

Esperamos unos minutos y recargamos la página. Hasta arriba del panel encontraremos el enlace a nuestra página.

Resolviendo algunos problemas

Me sale el error 404

Cuando usamos servicios de alojamiento debemos asegurarnos de seguir las convenciones o configuración necesaria para que nuestra página se vea correctamente.

En el caso de GitHub Pages, existen dos maneras.

Usando index.html en la raíz

Debemos asegurarnos de que al subir el proyecto, la ruta del archivo que queremos usar como página de inicio está en la raíz del proyecto y se llama index.html.

Cuando subimos una carpeta completa, la plataforma crea una ruta con el nombre de la carpeta. Por ejemplo: mi-proyecto/index.html.

Podemos subir los archivos que están dentro de mi-proyecto en lugar de la carpeta completa para resolver el problema.

Usando docs en los ajustes

Otra forma es subir la carpeta completa, pero renombrándola a docs. Y en los ajustes de Pages, seleccionar docs en lugar de /root.

¿Qué es el Control de Versiones?

El control de versiones es una herramienta que nos ayuda a crear un historial de archivos.

Trabajando sin control de versiones

Cuando trabajamos en proyectos donde cambiamos el contenido constantemente usualmente tenemos dos alternativas:

• Sobre-escribir archivos, lo cual vuelve irrecuperable versiones anteriores
• Duplicar el archivo y cambiar el nombre de alguno (el clásico archivo-final2-definitivo.html)

Lo cual puede desencadenar en más problemas. Especialmente en programación.

Como hacemos cambios constantemente esta herramienta nos ayuda a guardar dichos cambios. Así podemos preservar el nombre original de los archivos y las diferentes versiones.

También podemos volver a estados anteriores de nuestro código por si algo sale mal.

E incluso nos ayuda a trabajar en equipo y de manera remota, manteniendo los cambios que hacen las diferentes personas y dándonos una forma de resolver conflictos por si dos o más personas editan un mismo archivo.

Control de Versiones con GitHub Desktop

Una de las maneras más sencillas de aprender sobre el Control de Versiones de manera práctica es usando GitHub Desktop.

Esta es una herramienta que liga el programa Git con una interfaz gráfica para simplificar las tareas del control de versiones.

Instalación y uso

Podemos dirigirnos a la página oficial para descargar el instalador de esta herramienta.

Una vez descargado e instalado, lo abrimos y podemos encontrar una pantalla como esta:

Si no tenemos cuenta de GitHub podemos dar click en Skip this step (Saltar este paso).

Si tenemos cuenta, podemos ligarla.

Una vez que entremos aparecerá este menú:

Aquí tenemos diferentes opciones:

• Clone (Clonar)
• Create New Repository (Crear Nuevo Repositorio)
• Add Existing Repository (Agregar Repositorio Existente)

En este ejemplo vamos a crear un nuevo repositorio.

Nos va a aparecer este menú:

• Name (Nombre)
• Description (Descripción)
• Local path (Ruta local)
• README (Inicializar con README)
• Git ignore (Ignorar git)
• License (Licencia)

El único campo obligatorio es el nombre (Name) y la ruta donde se va a guardar. Podemos dejar la ruta por defecto.

Aparecerá este menú:

Aquí se creó automáticamente un archivo llamado .gitattributes.

Ahora podemos abrir este proyecto utilizando el atajo de teclado Ctrl + Shift + A.

Y agregar un nuevo archivo a nuestra carpeta. En este caso vamos a agregar index.html con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi página</title>
  </head>
  <body>
    <h1>Mi página</h1>
  </body>
</html>

Devuelta en GitHub Desktop aparecerá una nueva selección con el archivo creado.

Este nos indica que se agregó este archivo y que lo podemos guardar en un punto en el historial.

Para hacerlo debemos agregar en la parte inferior una descripción sobre los nuevos archivos.

Dicha descripción servirá para identificar esos cambios en el historial.

Ahora podemos dar clic en el botón Commit to main para agregarlo.

En la parte superior de este panel podemos encontrar otra pestaña llamada History. Aquí podemos encontrar el historial de cambios a lo largo de la vida de nuestro proyecto.

Dando clic en cada uno de los pasos, aparecerá la lista de archivos cambiados.

Podemos ir agregando o quitando código o archivos a nuestro proyecto para crear nuevos puntos de recuperación en el historial.

Por ejemplo, agregamos un párrafo al contenido del html y ligamos un archivo de estilos css.

Le damos una descripción y lo agregamos al historial

También podemos eliminar partes del código e incluso archivos y nos aparecerá en los cambios generados para crear un nuevo punto en el historial.

Sobre fuentes

Cuando queremos cambiar el aspecto de nuestro sitio web, una de las formas más fáciles es modificando la fuente o tipografía.

Por ejemplo, este sitio está usando la fuente por defecto:

Mientas que este, está usando la regla:

body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

De esta manera, con una sola regla de CSS, podemos mejorar su apariencia considerablemente.

Cómo usar font-family

Cuando usamos la propiedad font-family tenemos que usar múltiples nombres de fuente separados por comas. Esto se debe a que algunos sistemas pueden no tener la tipografía necesaria y deben de tener configurado un respaldo.

Esto se debe a que el navegador tratará de utilizar la primera fuente en la lista. Si no está disponible tratará de usar la siguiente, y así sucesivamente.

Es decir que en font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif, la prioridad va en cascada:

1. Franklin Gothic Medium
2. Arial Narrow
3. Arial
4. sans-serif

Cuando el nombre de la tipografía es más de una palabra, tenemos que usar dobles comillas para encerrarlo.

Si es una sola palabra, o el nombre no tiene espacios, puede ser escrito sin comillas.

Fuentes por defecto

Es recomendable poner una tipografía genérica como último respaldo.

Los nombres que podemos usar son:

• serif
• sans-serif
• monospace
• cursive
• fantasy
• system-ui
• ui-serif
• ui-sans-serif
• ui-monospace
• ui-rounded
• math
• fangsong

Fuentes de internet

Una de las maneras más comunes de usar tipografías distintas a las por defecto es por medio de servicios web. El más popular es Google Fonts.

Para usar una fuente de este sitio, debemos seleccionarla:

Dar clic en Obtener fuente (Get font)

Obtener código

En la pestaña de web, nos dará el código necesario para agregar y usar dicha fuente.

Existen dos métodos

<link>

Podemos agregar el código de etiquetas <link> en la cabeza de nuestro documento.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Mi primera página</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos
      quasi facilis itaque eligendi fugit nesciunt explicabo quas alias
      excepturi nulla vero possimus veniam pariatur laborum qui, quaerat
      laboriosam tenetur!
    </p>
  </body>
</html>

Y agregar la regla de CSS en los elementos donde la vayamos a utilizar.

body {
  font-family: "Roboto", sans-serif;
}

@import

Podemos dar clic en el método @import y copiar el código generado:

Debemos pegarlo en la cabeza de nuestro documento y agregar la regla de CSS en los elementos donde la vayamos a utilizar.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

      body {
        font-family: "Roboto", sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Mi primera página</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos
      quasi facilis itaque eligendi fugit nesciunt explicabo quas alias
      excepturi nulla vero possimus veniam pariatur laborum qui, quaerat
      laboriosam tenetur!
    </p>
  </body>
</html>

Alternativamente, podemos deshacernos de las etiquetas <style> y pegar el @import en nuestro propio archivo .css.

Así se vería nuestro ejemplo usando cualquiera de los dos métodos:

Sobre el modelo de caja

El modelo de caja es un concepto de CSS que nos explica parte de la naturaleza de los elementos HTML.

Nos dice que todos los elementos son rectángulos (o cajas) que podemos distribuir de diferentes maneras:

• Unas encima de otras
• Unas al lado de otras
• Unas dentro de otras

Donde cada caja cuenta con las siguientes 4 propiedades:

• content (contenido)¹
• padding (espaciado)
• border (borde)
• margin (margen)

Content

El contenido es lo que va entre la etiqueta de apertura y la etiqueta de cierre.

La mayoría de las veces se trata de texto…

<p>Aquí hay texto</p>

…aunque en otras ocasiones se trata de más etiquetas, o una combinación ambos.

<p>Aquí hay <strong>más</strong> texto</p>

Padding

El padding o espaciado, es el espacio que se encuentra entre el contenido y el borde. Para entender mejor esto, primero agreguemos CSS que nos ayude a visualizar el borde…

<p style="border:1px solid black">Aquí hay texto</p>

… ahora agreguemos el padding…

<p style="padding:20px;border:1px solid black">Aquí hay texto</p>

De esta manera es más evidente ver qué tipo de espacio estamos insertando.

Border

Es lo que envuelve al contenido y al espaciado, también lo podemos estilizar de diferentes maneras.

<p style="border:4px dashed black">Aquí hay texto</p>

Margin

El margen es el espacio entre un elemento y los elementos que están a su alrededor.

<p style="margin:20px;border:1px solid black">Aquí hay texto</p>
<p style="border:1px solid black">Aquí hay texto</p>

Etiquetas de bloque y en línea

Las diferentes etiquetas tienen un comportamiento por defecto. Algunas de ellas se distribuyen de manera apilada, es decir, de arriba hacia abajo, como una torre.

<p>Uno</p>
<p>Dos</p>
<p>Tres</p>

Mientras que hay algunas que se distribuyen a lo largo del mismo renglón.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>

Este comportamiento se debe a un concepto llamado nivel.

La forma de cambiarlo es mediante la propiedad display. Los valores más comunes son block, lo que hace que se ordenen en pila. E inline lo que hace que se ordenen sobre el mismo renglón.

Algunas etiquetas que están a nivel de bloque son:

• <h1> - <h6>
• <p>
• <div>
• <hr>
• <ol>
• <ul>
• <li>

Algunas etiquetas que están a nivel en línea son:

• <a>
• <br>
• <button>
• <em>
• <img>
• <span>

A pesar de que los navegadores le dan uno de estos comportamientos a las diferentes etiquetas, podemos cambiarlo con CSS.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>
<style>
  span {
    display: block;
  }
</style>

Tablas en HTML

Existen algunas etiquetas básicas que podemos usar para crear tablas.

<table>: Table o tabla. <tr>: Table Row o fila de tabla <td>: Table Data o dato de tabla

Estructura básica de una tabla

Utilizamos <table> para definir la existencia de una tabla, <tr> para crear filas dentro de ella, y <td> para segmentar dichas filas.

<table>
  <tr>
    <td>Celda (1,1)</td>
    <td>Celda (1,2)</td>
    <td>Celda (1,3)</td>
  </tr>
  <tr>
    <td>Celda (2,1)</td>
    <td>Celda (2,2)</td>
    <td>Celda (2,3)</td>
  </tr>
  <tr>
    <td>Celda (3,1)</td>
    <td>Celda (3,2)</td>
    <td>Celda (3,3)</td>
  </tr>
</table>

Agregando encabezados

Si queremos agregar títulos a las columnas podemos crear una fila inicial y segmentarla con etiquetas <th> en lugar de etiquetas <td>.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <!-- Datos de la tabla -->
</table>