Saltar al contenido principal

Conceptos básicos

El desarrollo Web es uno de los campos más emocionantes de la actualidad. Surgió a principios de los años 90's gracias a la creación de la WWW (World Wide Web).

El objetivo inicial de la WWW era crear una red de documentos interconectados por vínculos (principalmente documentos científicos) pero con la aparición de los navegadores gráficos como Internet Explorer, Firefox y Chrome la WWW se popularizó y hoy tenemos Youtube, Netflix y Twitter, entre muchas otras aplicaciones interesantes.

¿Qué es una Aplicación Web?​

Una aplicación Web es un programa alojado en un servidor que se accede a través de un navegador Web.

Para construir una aplicación Web necesitas aprender mínimo HTML y CSS. HTML permite definir la estructura de una página Web mientras que CSS define la apariencia. También es muy importante aprender JavaScript, que es el lenguaje de programación que entienden los navegadores.

Por otro lado, necesitas aprender al menos un lenguaje de programación del lado del servidor (p.e. PHP, Java, Ruby, Python, etc.). Incluso JavaScript se puede utilizar del lado del servidor. En el servidor se puede generar el contenido (HTML) de forma dinámica, generalmente a partir de información almacenada en una base de datos.

Sitios Web vs Aplicaciones Web​

Los sitios Web consisten únicamente de contenido estático mientras que las aplicaciones Web consisten también de contenido dinámico. Sin embargo, hoy incluso los sitios Web más básicos tienen algúna forma de interacción y contenido dinámico, así que la diferencia entre sitios Web y apicaciones Web es cada vez más borrosa.

¿Qué hace un desarrollador Web?​

Un desarrollador Web se encarga de los aspectos técnicos de un sitio o de una aplicación Web. A diferencia del diseñador Web, que se encarga de la apariencia visual y la distribución de los elementos, el desarrollador Web convierte un diseño estático (una imagen) en una aplicación completamente funcional disponible en Internet. Existen varios roles en el desarrollo Web. Un desarrollador Web puede suplir uno o varios de estos roles al mismo tiempo.

Front-end​

El front-end es la persona que se encarga de convertir un diseño (una imagen) en código que entiendan los navegadores usando HTML, CSS, y JavaScript. Este es quizá el rol con más demanda en la actualidad y el que más rápido está evolucionando. La razón es que las empresas buscan que sus sitios y aplicaciones se adapten a diferentes pantallas, tengan animaciones, se actualicen sin necesidad de refrescar la página, reaccionen rápidamente al usuario, etc. Muchas funcionalidades que antes se hacían en el servidor (por el back-end) ahora se hacen en el navegador y son responsabilidad del front-end.

Back-end​

El back-end se encarga de conectar la aplicación con la base de datos y otros servicios externos. Suena fácil pero tiene varias implicaciones: autenticación y autorización de usuarios, lectura y escritura de información de la base de datos, envío de correos automatizados, tareas recurrentes y API's, entre otros.

Operaciones​

Se encarga de desplegar la aplicación en Internet y brindar soporte a los usuarios. Es la persona que maneja los servidores, hace copias de seguridad de la base de datos y en general está atento al correcto funcionamiento de la aplicación en producción.

A los desarrolladores que hacen todos los roles se les conoce como Full Stack Developers. Aunque todavía hay mucha demanda por Full Stack Developers, la tendencia es a la especialización.

Independientemente si deseas especializarte en alguno de estos roles, nuestra recomendación es que igual aprendas un poco de cada uno.

Computadores​

Antes un computador era una persona que realizaba cálculos matemáticos por un salario. Eso cambio con la llegada de los primeros computadores electrónicos.

Aunque los primeros computadores fueron de uso específico, a principios de los años 50's se desarrolló el primer computador "programable".

Las partes más importantes de un computador son:

  • CPU (Central Processing Unit): es el cerebro del computador, es el que se encarga de ejecutar todas las operaciones lógicas, aritméticas y de interactuar con los demás dispositivos (teclado, pantalla, etc.)
  • Memoria RAM: es la memoria temporal que utilizan los programas cuando se están ejecutando. Cuando un programa termina o el computador se apaga, la información almacenada en esta memoria desaparece.
  • Disco duro: es la memoria que sobrevive después de salir de un programa o apagar el computador.
  • Dispositivos de Entrada y Salida (E/S): el teclado, la pantalla, una impresora, incluso el disco duro es un dispositivo de entrada y/o salida.

El CPU, la memoria RAM y los dispositivos de E/S se les conoce como hardware, son los componentes físicos del computador.

Software es el código que es ejecutado y hace uso del hardware para hacer todo tipo de cosas interesantes como mostrarte videos en la pantalla, interpretar las teclas que estás oprimiendo al crear un documento de texto y darte indicaciones cuando manejas, entre muchos otros.

Sistema binario​

El sistema decimal utiliza 10 dígitos en cada posición (0 a 9). Este es el sistema al que estamos acostumbrados.

El sistema binario, por el contrario, sólo utiliza dos dígitos en cada posición (0 y 1).

Los computadores reconocen dos estados y por eso utilizamos el sistema binario para representarlos. A cada posición (0 o 1) se le conoce como un bit (binary digit).

Cualquier número decimal se puede convertir a número binario y viceversa. Veamos cómo se representan los primeros diez números del sistema decimal en el sistema binario:

DecimalBinario
00
11
210
311
4100
5101
6110
7111
81000
91001

Para representar el 0 y el 1 del sistema decimal solo necesitamos un bit, pero para representar el 9 decimal necesitamos 4 bits.

Los computadores entienden información en grupos de 8 bits. A cada grupo de 8 bits se le conoce como un byte.

Código​

Código son una "serie de instrucciones" que son ejecutadas por el procesador.

Antes el código se almacenaba en tarjetas perforadas pero hoy utilizamos sistemas operativos que nos permiten crear archivos de texto y escribir el código utilizando lenguajes de programación.

Sistema operativo​

El sistema operativo es un software que nos facilita la vida al momento de trabajar en un computador. Por ejemplo, el sistema operativo nos permite crear carpetas y archivos en vez de tener que manipular la memoria directamente.

El sistema operativo también se encarga de asignarle memoria RAM a cada programa y controlar el uso del CPU.

Por último, el sistema operativo es un intermediario entre los programas y los dispositivos de entrada y salida (teclado, pantalla, etc.).

Lenguajes de programación​

El procesador solo entiende lenguaje de máquina, que son las instrucciones en código binario.

Los lenguajes de programación nos permite escribir instrucciones en texto que después son traducidas a lenguaje de máquina.

Existen lenguajes de programación de alto y bajo nivel.

Lenguaje ensamblador​

El lenguaje de más bajo nivel se llama el lenguaje ensamblador, en donde cada instrucción se traduce a su versión en lenguaje de máquina.

Escribir código en lenguaje ensamblador es lo equivalente a almorzar con un palillo: es extremadamente lento, repetitivo y sujeto a errores.

Lenguajes de alto nivel​

Los lenguajes de alto nivel son mucho más fáciles de aprender, entender y son mucho más concisos que el lenguaje ensamblador. Generalmente una línea en un lenguaje de alto nivel se convierte en varias instrucciones en lenguaje de máquina.

Los lenguajes de programación necesitan ser traducidos a lenguaje de máquina. Algunos lenguajes son compilados, otros son interpretados.

En los lenguajes compilados se debe ejecutar una aplicación que genera otro archivo con el código en lenguaje de máquina. Ejemplos de lenguajes compilados incluyen C, C++ y Java, entre otros.

Los lenguajes interpretados son traducidos a lenguaje de máquina a medida que son ejecutados. Ejemplos de lenguajes interpretados incluyen Ruby y Python, entre otros.

Internet​

A Internet se le conoce como la red global de computadores interconectados. Sin embargo, para ser más exactos, Internet es la unión de muchas redes. Muchas de esas redes son operadas por ISP's (Internet Service Providers), empresas como Claro, Movistar y Tigo que ofrecen servicios de Internet a usuarios finales. Los ISP's están interconectados a traves de otras empresas, menos conocidas, llamadas NSP's (Network Service Providers).

También existen redes locales que pueden tener conexión a Internet o no, por ejemplo la red Wi-Fi de tu hogar.

Quizá los dispositivo más importantes de Internet son los enrutadores. Como su nombre lo indica, los enrutadores se encargan de enrutar el tráfico de una red a otra. Por ejemplo, el enrutador que tienes en tu hogar se encarga de enrutar el trafico de tu computador (que se encuentra en tu red local) hacia Internet. Gracias a los enrutadores podemos acceder a Internet por diferentes medios (inalámbrico, celular, etc.).

Cada dispositivo conectado a una red tiene una dirección IP única en esa red. Una dirección IP esta compuesta de cuatro números separados por punto (p.e. 63.123.8.32 o 192.168.0.1). Existen rangos de direcciones IP's públicas y privadas.

Las direcciones IP públicas son manejadas por una organización sin ánimo de lucro llamada IANA (https://en.wikipedia.org/wiki/Internet_Assigned_Numbers_Authority) que le asigna un rango a cada ISP. El enrutador que utilizas en tu hogar tiene una IP pública que puedes consultar en esta página.

Las direcciones IP privadas se utilizan para redes locales (como la de tu hogar).

Sobre Internet se han implementado una multitud de servicios como correo electrónico, la World Wide Web (WWW), voz y video sobre IP (p.e. Skype), entre otros.

Otros conceptos importantes que debes saber sobre Internet son los siguientes:

Dominios​

Un dominio es un nombre que está asociado a una dirección IP. Ejemplos de dominios incluyen youtube.com, twitter.com, etc.

Cualquier persona puede comprar un dominio que esté libre a través de un registrador de dominios como Namecheap y GoDaddy, entre muchos otros.

Domain Name Server (DNS)​

Un DNS es un servicio que se encarga de traducir nombres de dominios a direcciones IP.

La línea de comandos​

La línea de comandos

La línea de comandos (también conocida como consola, terminal o símbolo del sistema) era la única forma de interactuar con un computador antes que aparecieran las interfaces gráficas.

La línea de comandos es una aplicación en la que puedes escribir y ejecutar comandos para realizar tareas como:

  • Navegar por las carpetas de tu computador.
  • Manipular archivos (crear, editar, copiar, mover y eliminar).
  • Conectarte a servidores remotos.
  • Crear scripts que te ayuden con tus tareas diarias.

Y mucho más!

Abriendo la línea de comandos​

En Windows busca una aplicación que se llama PowerShell.

En Mac utiliza el spotlight (la lupa en la parte superior derecha de la pantalla) y busca Terminal.

En Linux depende de la distribución que estés utilizando. En Ubuntu, por ejemplo, utiliza el ícono de Ubuntu en la parte superior izquierda y busca Terminal.

Nota: Windows viene con una línea de comandos llamada Símbolo del Sistema pero es preferible PowerShell porque los comandos son iguales a los de Linux y Mac.

El prompt​

Cuando abres la línea de comandos lo primero que ves es el prompt, que es lo que va antes del cursor sobre la línea en la que puedes empezar a escribir.

Por ejemplo, en la Terminal de Linux el prompt se ve generalmente así:

germanescobar@makeitreal:~$

En el PowerShell de Windows primero aparecen unas líneas de "bienvenida" antes de mostrar el prompt:

Windows PowerShell
Copyright (C) 2015 Microsoft Corporation. All rights reserved.

PS C:\Users\germanescobar>

El prompt también puede variar dependiendo de la línea de comandos que utilices y la configuración.

Veamos algunos de los comandos que ya vienen en tu sistema operativo y que puedes utilizar para navegar por las carpetas y manipular archivos:

Primer comando: la ubicación actual​

En la línea de comandos siempre vas a estar ubicado(a) sobre una ruta (carpeta) de tu sistema.

Para conocer la ruta actual puedes escribir el comando pwd y oprimir Enter.

Nota: No olvides el Enter al final de cada comando para ejecutarlo!

Por ejemplo, en mi línea de comandos (la que ves en la imagen arriba) se ve así:

Last login: Wed Feb 24 20:10:39 on ttys001
~$ pwd
/Users/germanescobar
~$

Cada vez que escribes un comando aparece el resultado debajo y nuevamente el prompt.

Nota: De ahora en adelante vamos a representar el prompt con el símbolo $. Ese símbolo no lo tienes que escribir en tu línea de comandos.

Listando carpetas y archivos​

Para listar las carpetas y los archivos de la ubicación actual vas a utilizar el comando ls:

$ ls

La forma en que este comando muestra los resultados varía dependiendo de la línea de comandos y la configuración. Por ejemplo, en PowerShell se ve así generalmente:

Windows PowerShell
Copyright (C) 2015 Microsoft Corporation. All rights reserved.

PS C:\Users\germanescobar>ls

    Directorio: C:\Users\germanescobar

Mode             LastWriteTime    Length Name
----             -------------    ------ ----
d-r--    24/02/2017  1:32 a.m.           Contacts
d-r--    24/02/2017  1:32 a.m.           Desktop
d-r--    24/02/2017  1:32 a.m.           Documents
d-r--    24/02/2017  1:32 a.m.           Downloads
d-r--    24/02/2017  1:32 a.m.           Favorites
d-r--    24/02/2017  1:32 a.m.           Music
d-r--    24/02/2017  1:32 a.m.           Pictures
d-r--    24/02/2017  1:32 a.m.           Videos

Cambiando de ubicación​

Para cambiar de carpeta en la línea de comandos utilizas el comando cd seguido de la ruta de la carpeta. Por ejemplo, si quieres ir a la carpeta raíz de tu sistema debes escribir:

$ cd /

Rutas relativas y absolutas​

Para las rutas de las carpetas puedes utilizar rutas relativas o absolutas.

Una ruta relativa toma como referencia la carpeta actual.

Una ruta absoluta inicia con / y se refiere a la ruta completa desde la carpeta raíz de tu sistema.

Por ejemplo, si nos encontramos en la carpeta /Users/germanescobar, la ruta relativa Projects/images se refiere a la ruta absoluta /Users/germanescobar/Projects/images.

La carpeta del usuario​

Cuando ingresas a la línea de comandos te vas a encontrar en la carpeta raíz de tu usuario (generalmente en /Users/tu_nombre_de_usuario).

Puedes volver a esta carpeta en cualquier momento utilizando el comando cd sin ninguna opción:

$ cd

La carpeta padre​

Existen dos nombres de carpeta especiales que se utilizan para referirse a la carpeta actual y a la carpeta padre.:

  • . se refiere a la carpeta actual
  • .. se refiere a la carpeta padre.

Por ejemplo, si nos encontramos en la ruta /Users/germanescobar/Projects y ejecutamos:

$ cd ..

La nueva ubicación será /Users/germanescobar.

Puedes utilizar .. en tus rutas relativas. Por ejemplo, si te encuentras en una carpeta images y quieres ir a una carpeta fonts que está al lado de images puedes ejecutar:

$ cd ../fonts

Esa ruta ../fonts lo que está diciendo es: vaya a la carpeta padre y después ingrese a la carpeta fonts.

Creando una carpeta​

Para crear una carpeta utiliza el comando mkdir seguido del nombre de la carpeta que quieres crear en la ubicación actual. Por ejemplo:

$ mkdir Projects

El último comando crea la carpeta Projects dentro de la ubicación actual. Sin embargo, mkdir no te cambia de ubicación automáticamente. Para eso debes ejecutar:

$ cd Projects

Nuestra recomendación es que crees esa carpeta Projects dentro de la raíz de tu usuario para todos tus proyectos.

Abriendo carpetas en el explorador de archivos​

Para abrir una carpeta en el explorador de archivos gráfico utiliza el comando open seguido de una ruta relativa o absoluta. Por ejemplo, para abrir la carpeta actual utilizaríamos:

$ open .

Abriendo archivos y carpetas en VSCode​

VSCode viene con una aplicación de la línea de comandos llamada code. Puedes utilizar ese comando para abrir un archivo o una carpeta en VSCode.

Por ejemplo, el siguiente comando abre el archivo archivo1.txt:

$ code archivo1.txt

Para abrir la carpeta actual:

$ code .

Eliminando archivos y carpetas​

Para eliminar un archivo utiliza el comando rm seguido de la ruta (relativa o absoluta) al archivo que quieras eliminar. Por ejemplo, el siguiente comando elimina el archivo archivo1.txt en /Users/germanescobar/Desktop

$ rm /Users/germanescobar/Desktop/archivo1.txt

Para eliminar una carpeta utiliza el comando rm -r seguido de la ruta (relativa o absoluta) de la carpeta que quieres eliminar:

$ rm -r /Users/germanescobar/Desktop/mi-carpeta

Moviendo archivos y carpetas​

Para mover un archivo de ubicación utiliza el comando mv seguido del nombre del archivo y la ubicación donde lo quieres mover (separándolos por espacio).

Por ejemplo, el siguiente comando movería el archivo archivo1.txt a la carpeta mi-carpeta en la ruta actual:

$ mv archivo1.txt mi-carpeta

Mover una carpeta es muy parecido a mover un archivo, utiliza el comando mv seguido del nombre de la carpeta que quieres mover y la carpeta destino.

Por ejemplo, el siguiente comando movería la carpeta mi-carpeta a la carpeta otra-carpeta en la misma ubicación:

$ mv mi-carpeta otra-carpeta

##v Copiando archivos y carpetas

Para copiar un archivo a otra ubicación utiliza el comando cp seguido del nombre del archivo y la ubicación a la que quieres copiar el archivo.

Por ejemplo, asumiendo que archivo1.txt y mi-carpeta existen en la ubicación actual puedes utilizar el siguiente comando para copiar archivo1.txt a mi-carpeta:

$ cp archivo1.txt mi-carpeta

Para copiar una carpeta a otra ubicación utiliza el comando cp -r seguido del nombre de la carpeta que quieres mover y la ruta a donde la quieres mover.

Por ejemplo, el siguiente comando copia la carpeta mi-carpeta a la carpeta otra-carpeta en la misma ubicación:

$ cp -r mi-carpeta otra-carpeta

Buscando archivos y carpetas​

Para buscar archivos utiliza el comando find que recibe la ruta desde la cuál se quiere buscar, la opción -name y el nombre o patrón que estamos buscando. Por ejemplo, para buscar todos los archivos index.html que se encuentren en una carpeta /Projects podemos ejecutar el siguiente comando:

$ find /Projects -name index.html

Si queremos buscar archivos dentro de la carpeta actual utilizaríamos . en la ruta:

$ find . -name index.html

Para buscar carpetas utiliza la opción -type d. Por ejemplo, para encontrar todas las carpetas llamadas logs dentro de la ubicación actual ejecutaríamos el siguiente comando:

$ find . -type d -name logs

Nota: Ten en cuenta que find va a buscar en las carpetas y todas las subcarpetas de la ruta que le pasemos.

Trucos y consejos​

Si oprimes la flecha arriba ↑ te van a aparecer los últimos comandos que has ingresado. Muy útil para repetir un comando que ya has ingresado. Si te pasas te puedes devolver con la flecha hacia abajo:

Puedes autocompletar las rutas ingresando las primeras letras y oprimiendo la tecla tab. Ahorra mucho tiempo!

Recursos adicionales​