Skip to content

Latest commit

 

History

History
297 lines (162 loc) · 10.8 KB

1-como-funciona-el-internet.mdx

File metadata and controls

297 lines (162 loc) · 10.8 KB

import { themes, Image } from 'mdx-deck' export const theme = themes.book

import hackermanImg from '../../assets/hacking-time.gif' import internetImg from '../../assets/internet-abduction.gif' import ipImg from '../../assets/ip.gif' import serverImg from '../../assets/data-center.jpeg' import httpImg from '../../assets/http.png' import diagramProtocolsImg from '../../assets/diagram-protocols.png' import diagramDNSImg from '../../assets/diagram-dns.png' import wikipediaImg from '../../assets/wikipedia.png' import serverFilesImg from '../../assets/server-files.png' import dataBaseImg from '../../assets/data-base.png' import fullstackImg from '../../assets/fullstack.jpeg' import shallWeBeginImg from '../../assets/shall-we-begin.png'

Hola!

Aprender programación puede ser abrumador, por eso es mejor hacerlo juntos.


Que es Coderhood?

Somos una comunidad de gente en tech que aprende y comparte conocimiento. Por eso impulsamos varios espacios y en ellos compartimos lo que sabemos. No sabemos todo, el mundo tech es enorme y lleva una vida de aprendizaje, pero mientras vamos aprendiendo creemos que compartido el viaje es mejor. Por eso incentivamos siempre a que una vez se aprenda algo, le que quiera pueda compartirlo y asi crecer juntos. Coderhood es y siempre va a ser gratis, tanto la comunidad, como las clases y cualquiera de sus espacios.


Nuestros espacios

Discord: Nuestra casa donde vive la comunidad. Discord es un chat con canales de texto, y voz, con posibilidad de hacer llamadas y compartir pantalla. Usamos diferentes canales para cada tema en particular, #academy es el que vamos usar para lo relacionado a Coderhood Academy, justo a los canales específicos de cada módulo. También hay canales de consultas generales, experiencia laboral, busquedas de trabajo, espacios para hablar en ingles, canales de tópicos por tecnologías, etc.

Twitch: Nuestro espacio para los streamings. Todas las clases de Coderhood Academy las vamos a dar en vivo por acá, asi que asegurate de seguirnos.

Youtube: Nuestro canal donde vamos a subir todos los streamings previos.

Twitter: Acá vamos a publicar novedades, y compartir información relacionada al mundo tech.

GitHub: Donde vamos a almacenar los repositorios de código que escribamos. Acá también vas a encontrar las clases, sentite libre de sugerir cambios al contenido a travez de Pul Requests (más información de eso en módulo de Git).


El equipo

Coderhood somos todes les que participamos, y el equipo que lleva adelante los espacios. Este equipo lo vas a encontrar en Discord con el rol @team. Les integrantes del equipo son personas que comparten el sentir de compartir conocimiento y poden de su parte, con lo que saben y aprenden, para ayudar a difundirlo. No somos profesores que estudiamos como enseñar programación, y ninguno esta ganando dinero haciendo esto, somos un grupo de personas dando lo mejor para ayudarnos, por eso nunca te olvides de ser agradecido con ellos. Si aprendiste algo y querés compartirlo, o sabes hacer alguna de las tareas en las que necesitamos ayuda y te gustaría colaborar hablale a cualquiera del @team que con gusto te vamos a sumar!


Entonces, por donde empezamos?

A lo largo de aproximadamente 6 meses, vamos a aprender Desarrollo Web FullStack. Ese sería el nombre oficial, y lo van a encontrar en muchas busquedas laborales como Desarrollador FullStack, Programador FullStack, y los conocimientos les permiten también trabajar como Programadores Frontend y Backend.


Que significan estos roles?

Para entenderlo necesitamos entender primero que es, y como funciona la programación y el internet.


Como funciona el internet

Aclaración: Este contenido no es necesario entenderlo completamente para empezar a programar, pero nos va a orientar de que es lo que vamos a estar estudiando.


Un protocolo, es un acuerdo en la forma de comunicarse entre dos partes.

Podriamos decir entonces, que las personas usamos el protocolo del lenguaje para comunicarnos.

Podemos entendernos porque definimos ciertas reglas que las dos partes entienden.

Las computadoras también tienen su protocolo para comunicarse

El protocolo TCP/IP


Entonces, nosotros pagamos el internet. Ya sea Fibertel, Movistar o Vodafone.

Esto conecta nuestro dispositivo, computadora, celular o playstation a la red.

Usando el protocolo TCP/IP es como vamos a mandar información desde nuestro dispositivo, y como nos va a llegar también. Viajando por cables electricos, opticos o satelites, dependiendo el servicio que contrates.

Tranqui que esto no lo manejamos nosotros, esto es justamente lo que hace nuestro router.

TCP es como enviamos y recibimos la información.

Y la IP es como identificamos nuestro dispositivo en ese mar de informacion viajando.


Nuestras IP son un numero similar a

192.168.0.[algo]

Supongamos que la IP de mi computadora es 192.168.0.10


Eso significa que pueden conectar sus dispositivos a mi computadora ahora?

Masomenos..


Para que otros puedan conectarse a una computadora, esta tiene que ser un

Servidor


La realidad es que no todos los servidores se ven así.

Cualquier computadora que permita conexiones y devuelva información es un servidor.

Como vamos a permitir conexiónes y como vamos a devolver información?

Se acuerdan de los protocolos? La gran mayoria de internet funciona con

el protocolo HTTP


HTTP

Nos permite conectarnos con un servidor, y que este nos devuelva uno o varios archivos.

Vieron cuando escribimos http://... ? le estamos diciendo a nuestro navegador que queremos conectarnos a un servidor usando este protocolo.

Y porque https?

HTTPS es la evolución de HTTP, y encripta la información para que esta viaje segura.


Entonces, TCP/IP nos transforma la información para que viaje por ✨ la internet ✨

y HTTP nos dice una vez que llega a un servidor, como recibir la informacion de este.


Ahora imagínense si para conectarse a los servidores de Google tuvieramos que escribir https://192.168.0.11

Y para entrar a Instagram tuvieramos que escribir https://192.168.0.58

Imposible!

Por eso, para hacernos la vida un poco mas fácil existen

los dominios, y DNS.


Los dominios podemos comprarlos, nosotros compramos coderhood.dev en Namecheap.

Cada proveedor de dominios va a tener su DNS (Domain Name System), y eso nos va a permitir que podamos escribir el nombre de nuestro dominio y eso sea suficiente para navegar a nuestra web.

El flujo es el siguiente: al escribir https://coderhood.dev navegamos directamente al DNS de namecheap. Este revisa en su lista cual es la IP de nuestra web, y nos redirecciona hacia esa IP.

Con esto ya no necesitamos acordarnos de nuestra IP!


Supongamos ahora que nos conectamos a wikipedia.com

Una vez que cargue la página vamos a ver todos los elementos en pantalla que estamos acostumbrados a ver.

Como hace nuestro navegador para mostrarnos en pantalla, o mejor dicho renderizar, todo esto y que lo podamos ver así?


Una vez que nos conectamos con el servidor de Wikipedia, este nos responde con 3 tipos de archivos que el navegador sabe como mostrar.

Estos son archivos HTML, CSS y JavaScript

HTML

Nos va a dar la estructura de la página, que elementos se ven en pantalla

CSS

Nos va a decir como se ve cada elemento

JavaScript

Nos va a dar la interactividad de la página


Estos archivos contienen contienen código en su propio lenguaje.

Así, al grupo de personas que se encargan de programar en estos lenguajes y crear las interfaces visuales y conexiones con servidores se les llama

Frontend Developers

Incluye todo lo que podemos ver en pantalla, ya sea en web o apps para celular. Animaciones, conexion con servidores, interacciones con el usuario, etc.


Ahora, nuevo contenido se agrega todo el tiempo a las webs en general.

Ese nuevo contenido, se almancena en Bases de Datos y van a ser los servidores los que van a poder conectarse con estas Bases de Datos para traer información, modificarla o borrarla.

Cada vez que abrimos Twitter, por ejemplo, el servidor se conecta con la Base de Datos para traer los tweets recomendados para nosotros.


Al grupo de personas encargado de programar los servidores, y las bases de datos se les llama

Backend Developers

Incluye seguridad del servidor y base de datos, optimizacion de performance, etc.


Y al grupo de personas capaces de trabajar en los dos frentes, pudiendo crear aplicaciones completas tanto en la interfaz, como los servidores y bases de datos se les conoce como

Full Stack Developers


A esto vamos a apuntar llegar en 6 meses, a tener el conocimiento para crear aplicaciones web completas, de principio a fin.

Para eso vamos a pasar por 5 modulos


  • Fundamentos de programación

Vamos a aprender a programar en JavaScript, estos conocimientos los vamos a usar tanto para Front como para Back.

  • Diseño Web

Vamos a aprender HTML, CSS y como manipular los elementos visuales creados usando JavaScript.

  • Git

Nos va a permitir empezar a trabajar en equipo, sincronizando nuestro código en repositorios.

  • Ecosistema React

Vamos a aprender a crear interfaces avanzadas usando React, la misma tecnología que usan Facebook, Instagram y Netflix.

  • Backed

Vamos a crear nuestro servidor Node.js con su Base de Datos y vamos a permitir conexiones de nuestra web.



Para produndizar un poco

https://www.youtube.com/watch?v=WViNjzoDonU

https://www.areatecnologia.com/informatica/como-funciona-internet.html#:~:text=%C2%BFC%C3%B3mo%20Funciona%20el%20Internet%3F,podr%C3%ADan%20comunicarse%20e%20intercambiar%20informaci%C3%B3n.&text=Para%20conectarnos%20se%20hace%20por,proveedor%20de%20acceso%20a%20internet).


En el próximo capitulo

Vamos a ver que es programar, y que son los algoritmos.

Aprenderemos que es el lenguaje JavaScript, y nuestras primeras lineas de código.

Nos vamos a llevar los primeros ejercicios para practicar en Javascript.