Empezando en el desarrollo web

Términos utilizados

Antes de aprender cualquier cosa, es muy necesario dar un recorrido por algúnos términos que nos encontraremos en toda esta travesía. Es por eso que esta sección aprenderemos esos conceptos que pueden parecer un poco difíciles en un comienzo, pero a medida que vayamos aprendiendo, nos iremos familiarizando cada vez mas.

FrontEnd: El Frontend o front (para los amigos) es todo lo visíble dentro de un sitio web. Con ésto nos referimos a textos, colores, botones, imágenes, formularios, etc. Ejemplo de ésto son los títulos que ves dentro de este mismo artículo, el texto que estas leyendo, el índice que está arriba (si estás leyendo esto desde un celular) o en la parte izquierda de la pantalla (si estás en dispositivos mas grandes). Las técnologías necesarias para manejar el front son: HTML, CSS y Javascript.

Backend: El Backend o Back, en su contraparte con el front, es la lógica que hay detrás de todo el sitio web. Es acá donde accedemos a la base de datos y manejamos todo el core (núcleo) que existe. Ejemplo de esto es la sección de suscribirse que está en éste mismo artículo, donde luego de llenar un formulario muy pequeño (tu nombre y tu correo) y hacer click en el botón Suscribirse, te llegará un correo agradeciendote y con esto, quedas en un lista donde te llegará un mail avisandote cuando suba nuevo contenido en éste sitio. Algunos de los lenguajes que se utilizan en el Backend son: Java, PHP, Javascript, Go, Python, Ruby, por nombrar algunos.

API: Application Programming Interface o en español Interfaz de Programación de Aplicaciones es un nexo, una interconección en la que dos aplicaciones o servicios se comunican mediante procesos. Una API es básicamente, en nuestro contexto, un conjunto de funciones que hacen operaciones repetitivas, así en vez de estar haciendo siempre lo mismo, lo hacemos solo una vez y luego lo exponemos para que otro sistema pueda utilizarlo.

EndPoint: Este concepto va muy de la mano con el anterior ya que éste es el punto de entrada hacia una operación en específico de nuestra API. En simples palabras, un endpoint es una url donde dependiendo del verbo http que le pasemos, hará una acción. Ejemplo: Si queremos acceder a toda la información que tiene Belén en un sitio web cualqueira, tendríamos que hacerlo consultando al endpoint http://misuperaplicacion.com/usuario/belen con el verbo GET, de esta manera podríamos conocer su fecha de nacimiento, nombre completo y toda la información que Belén haya guardado en esa aplicación.

Verbos HTTP: Son un conjunto de, como dice su nombre, verbos que nos permiten realizar acciones específicas a nuestra API ya que para un mismo Endpoint se pueden hacer distintas operaciones diferenciandolas mediante el protocolo o verbo. Los más conocidos (y los que probablemente más utilicemos en nuestro día a día) son GET, POST, PUT, DELETE (existen más), donde GET lo utilizamos solo para obtener información, POST siempre lo utilizaremos para la creación de nueva información, el método PUT nos permite actualizar información (y en caso de que no exista, la crea) y DELETE para eliminar: Ejemplo: Concideremos el mismo endpoint anterior http://misuperaplicacion.com/usuario/belen. Si quiero acceder a la información de Belén, lo hacemos con GET, pero si queremos modificar su información, lo tenemos que hacer con PUT. Así también en caso de que queramos eliminar su información, lo haremos utilizando el método DELETE, todo esto utilizando el mismo endpoint.

Local y Producción: Otros términos que también vamos a encontrar en nuestro día a día, serán local y producción (pueden existir muchos más, estos van a depender del equipo con el que se trabaje) y hacen referencia al lugar donde está funcionando o donde está corriendo el sitio web o aplicación que estemos desarrollando. Si hablamos de Local nos estamos refiriendo a nuestra propia máquina/equipo donde estaremos desarrollando la mayor parte del tiempo (digo mayor porque hoy en día existen alternativas donde podems escribir código directamente en el servidor donde tengamos nuestro sitio web o aplicaciión)

Cloud Computing: O también llamado como Cloud solamente, es y de manera muy simple, una tecnología que permite el acceso remoto a software, almacenamiento de archivos y poder procesar datos utilizando internet, de esta manera podemos prescindir de su ejecución en un computado personal o servidor local. Algunos servicios Cloud son: Amazon Web Services (AWS), GCP (GCP) y Azure.

HTML

HyperText Markup Language (lenguaje de marcado de hipertexto) o simplemente HTML es el lenguaje que utilizamos para la creación de una página web, definiendo la estructura base mediante etiquetas y escribiendo el texto que posteriormente aparecerá en nuetro sitio. (te dejo un link para que puedas revisar más etiquetas de html). También es importante mencionar que hoy en día existen pre-procesadores de html como: Pug (antes llamado Jade), Slim, Haml, entre otros.

A continuación veremos el mínimo código que necesitamos para tener una página web funcionando correctamente:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nuevo documento</title>
  </head>
  <body>
    <p>Acá va todo el contenido de una página web</p>
  </body>
</html>

CSS

Cascading StyleSheets (Hojas de estilo en cascada) es el lenguaje que nos permite dar el diseño visual de nuestra página web, esto significa dar colores, tipos de fuentes, cambiar el formato del texto, cambiar el tamaño de la fuente, y mucha sotras cosas más. Cabe mencionar que esto no es un curso de lenguajes, si no que solo una guía de introducción al desarrollo web. En css tambien existen pre-procesadores que nos ayudan al momento de escribir nuestro código, alguno de ellos son: SASS, Stylus, LESS y PostCSS.

.soy-una-clase {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #0a3f66;
  background-color: #247f86;
}

Javascript

Javascript, o solo JS, es un lenguaje de programación (a diferencia de los dos anteriores), el cual nos permite implementar funciones complejas a nuestra página, esto significa que cada que que el usuario quiera hacer alguna interacción con nuestro sitio, más allá de solo leer información, necesitaremos de su poder para llevarlos a cabo. Acá podemos pensar desde validaciones a formulario (cada vez que el usuario escriba algo en una página revisar que esté bien escrito o que cumpla con cierto criterio) como cosas mas complejas como animar graficos 2D o 3D. También es el encargado de hacer consultas a una o muchas APIs, ordenar la información obtenida y trabajar con ella pero en el front. A continuación veremos un trozo de código el cual obtiene lo que un usuario escribió en un input (concidere Google como referencia, donde tenemos una caja de texto con un ID input y el botón “Buscar en Google” con un ID buscar).

const _boton = document.querySelector("#buscar");

boton.addEventListener("click", () => {
  const _texto = document.querySelector("#input").value;

  irABuscarInformacion(cajaDeTexto);
});

El ejemplo anterior describe lo siguiente:

• Hacemos una referencia del botón y lo llamamos _boton
• Luego le decimos que cuando el usuario haga click en el botón, ejecute una función que hace lo siguiente:
• 1. Obtiene el valor de la caja de texto y lo guarda en una variable llamada _texto
• 2. Llama una función llamada irABuscarInformacion la cual se encarga de ir a buscar lo que el usuario esta buscando, pasandole como argumento (lo que está entre parentesis) el texto que el usuario escribió previamente.

Git y Github

De manera resumida, Git es una forma de poder llevar una versión del código que vamos desarrollando de forma distribuida. Si trabajamos solos, es un poco dificil ver el caso de uso de esta herramienta, pero cuando trabajamos colaborativamente con mas programadores (la cual debería ser en su mayoria), se vuelve una necesidad ya que podremos ir generando un historial del código que vamos creando, compartiendola con las personas con las que trabajemos.

Por otro lado, Github es un sitio web el cual nos permite guardar este código versionado tanto públicos como privados. Es acá donde distintos desarrolladores y desarrolladoras pueden observar nuestro código y contribur con el mismo si así lo quisieran. A pesar de que github es uno de los más importantes, no es el único, ya que existe Gitlab y Bitbucket

¿Qué sigue?

A pesar de que hemos hablado de muchas cosas, aún no hemos aprendido nada. Lo que sigue es empezar a estudiar todo lo que hablamos anteriormente pero wait, no tiene que ser todo de una vez (ya que para comenzar es bastante), definamos primero que es lo que queremos hacer primero, si irnos por el camino de Front, o seguir el camino del Back, luego aprender los lenguajes con los que se trabajan dentro de esas dos ramas e ir poco a poco aprendiendo más y más.

Si te gustaría que hiciera un articulo hablando más en profundidad alguno de los puntos que mencioné anteriormente, me puedes dejar un mensaje en la sección de comentarios 😊. También puedes suscribirte, así te podré informar cada vez que publique un nuevo artículo 😎.