Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

Programación en Navegadores: Primeros Pasos

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Instalando tu primer editor de código

7

Cómo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del código usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación con HTML

17

Sección de elegir mascota

18

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulación del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

¿Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

¿Quién ganó el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatomía de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Imágenes para los Mokepones

37

Estilos del botón

38

Adaptando HTML al diseño del juego

39

Layout: título y ataques

40

Adaptando JavaScript al diseño del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimización de código

44

Revisión de código

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaración lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques dinámicos por cada mascota: extraer

55

Renderizado dinámico en HTML

56

Eventos de click dinámicos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

61

Introducción a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Imágenes y personajes de fondo

66

Métodos en las clases

67

Obstáculos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

¿Qué es backend?

72

Instalación de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisión de coordenadas

79

Mokepones dinámicos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Probando el juego en varios dispositivos

84

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Instalación de Node.js y NPM

72/84
Recursos

Así como, en el front-end, utilizas lenguajes como HTML, CSS y Javascript en el backend puedes usar otras tecnologías. Javascript es el que continuaremos utilizando de ahora en adelante.

Tecnologías backend

Existen muchos lenguajes de programación para desarrollar en el backend. Veamos un listado de algunos de ellos.

  • C/C++
  • C#
  • Java
  • PHP
  • Ruby
  • Python
  • Go
  • Javascript (NodeJS)

Ya conoces lo que es Javascript y lo que permite construir en el front-end. También es posible utilizarlo en el backend gracias a NodeJS.

NodeJS es un entorno de ejecución que permite interpretar y utilizar código Javascript en un servidor, con algunas diferencias con respecto al front-end. Está construido con el motor intérprete de código Javascript de Google Chrome denominado V8.

En el backend no hay HTML, por lo que no podrás utilizar NodeJS para su manipulación. En su lugar, podrás usarlo para leer archivos, conectarte a una base de datos, levantar un servidor web y construir una API.

Instalación de NodeJS

La instalación de NodeJS en tu ordenador es muy sencilla. Ingresa a su página oficial y has la descarga dependiendo tu sistema operativo.

Descarga de NodeJS
Te recomiendo que siempre instales la versión LTS (Long Term Support), dado que la misma tendrá soporte y mantenimiento por al menos 5 años. También utiliza versiones pares. Las versiones Current o las versiones impares suelen estar en desarrollo y pueden tener algún error o vulnerabilidad.

NodeJS viene acompañado de otra tecnología denominada NPM (Node Package Manager). El mismo nos ayudará a inicializar un nuevo proyecto o instalar cualquier tipo de dependencia que necesitemos para desarrollar nuestra aplicación.

NodeJS y NPM

Una vez realizada la instalación, puedes utilizar una serie de comandos desde una terminal para corroborar su correcto funcionamiento. Utiliza el comando node -v para verificar la versión de NodeJS y npm -v para visualizar la versión de NPM.

Verificación de las versiones de NodeJS y NPM

NodeJS será, tal vez, tu primer acercamiento al desarrollo backend en el lado del servidor. Mucho de lo que ya conoces sobre Javascript te servirá para NodeJS y lo complementaremos con otras características propias que exploraremos en las próximas clases.


Contribución creada por: Kevin Fiorentino (Platzi Contributor).

Aportes 66

Preguntas 41

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Les dejo por acá el Resumen de la tecnología Node.js

  • ¿Qué es Node.js?
    Diseñado para crear aplicaciones escalables, Node.js es una tecnología del back-end e intérprete de JavaScript que permite ejecutar código de una manera veloz. De forma similar a un navegador web, Node.js contiene un motor de JavaScript y nos provee herramientas y módulos para interactuar con el entorno en el que se ejecuta.

  • ¿Qué puedo hacer con Node.js?
    Node.js fue creado por los desarrolladores originales de JavaScript con la idea de poder ejecutar este lenguaje fuera del entorno del navegador. Para ello utilizaron el motor V8 de Chrome. Este motor se ocupa de convertir el código JavaScript a código máquina en tiempo real (a lo que se llama JIT, o just-in-time), como corresponde a un lenguaje interpretado como JS (a diferencia de lo que ocurre con los lenguajes compilados que, como bien dice su nombre, deben ser compilados antes de poder ser ejecutados).

    Node.js no solo permite crear servidores web, sino que, los hace más ágiles y capaces de trabajar con otros lenguajes de secuencia como Python. Por esta razón, los desarrolladores lo utilizan sobre todo en aplicaciones de red que buscan ser rápidas o en proyectos de gran envergadura donde se necesita que los procesos sean ágiles.

cuando coloco node -v me aprece que no reconoce ese comando, que puedo hacer ?

Pueden abrir la terminal en vscode con el comando:

ctrl + ñ

Recomiendo siempre utilizar versiones pares de NodeJS, ya que son LTS, tienen mantenimiento a largo plazo (5 años).
Las versiones impares se deprecan en uno o dos años y son experimentales, pueden tener alguna vulnerabilidad o error que aún está en desarrollo.

— ATAJO ----
Para los que usan Windows, pueden usar la terminar con ctrl + shift + ñ

— Consejo ----
Después de instalar node js, reinicien su visual studio code para que les aparezca la versión instalada en la terminal al poner “node -v”, de lo contrario, puede arrojarles un error como este

" node : El término ‘node’ no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó
una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo. "

para instalar en ubuntu
abrimos la linea de comandos y ponemos esto
1)sudo apt install nodejs
2)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh
3)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
4)source ~/.bashrc
5)nvm list-remote
esto nos mostrara la version de node que queremos instalar
6)nvm install v16.18.0 (colocamos al final la versio que queramos instalar pero en mi caso en v16.18.0 ya que es la que me aparece mas estable)

para instalar npm hacemos lo siguiente

colocamos en la linede de comandos

  1. sudo apt install npm
    ponemos la contraseña, enter y este se instalara

Si alguien tiene problemas para ver la versión en VS, acá la solución

1-Ir a Este Equipo Propiedades.
2-Haz clic en Configuración avanzada del sistema en la barra izquierda de la ventana.
3-Ahora tienes la ventana Propiedades del sistema. Haga clic en la pestaña Opciones Avanzadas.
4-A continuación, haz clic en el botón Variable de entorno …
5-Ahora tiene una ventana de variable de entorno: desde la variable de usuario, seleccione «Path»
6-Haga clic en Editar
7-Ahora, en Valor de variable, agregue la ruta de acceso donde se instaló Node.js. ( C:\Archivos de programa\nodejs).
8-Aceptar y Aplicar en las siguientes ventanas.
9-El paso final es reiniciar su ordenador.

si te sale error, cierra y vuelve abrir el VS! ♡

mi versión actual de node.js es la v16.16.0

Por las dudas al abrir la terminal no aparece todo el nombre de tu carpeta es porque hay que abrirla como se muestra en el siguiente video del enlace que dejo al final… por favor a los profes y al co de platzi, que pide constantemente a los alumnos participacion en aportes y preguntas, les pido mas ayuda y prescencia rapida de su parte en los canales de apoyo como el de preguntas ya que vi muchas preguntas de meses sin respuestas y eso no es bueno para quenes estamos confiando y pagando una escuela como Platzi, yo tuve que buscar respuestas en redes e incluso en otras escuelas. Espero no se tome a mal es una critica constructiva. saludos!

linck para solucionar el problema https://www.youtube.com/watch?v=-URUqOV8zHA

A mi no me dejo descargarlo, tengo que tener Windows 8.1 o superiores y el mío es Windows 8.0, me toca ver como lo actualizo para poder seguir con las clases 😭

aqui hay algunas preguntas para que practiques , by chatgpt

  • ¿Qué lenguajes de programación se pueden utilizar en el backend?

    C/C++
    C#
    Java
    PHP
    Ruby
    Python
    Go
    Javascript (NodeJS)

  • ¿Qué es NodeJS y cómo funciona en el backend?

    NodeJS es un entorno de ejecución que permite interpretar y utilizar código Javascript en un servidor, con algunas diferencias con respecto al front-end. Está construido con el motor intérprete de código Javascript de Google Chrome denominado V8.

  • ¿Qué es NPM y cómo se relaciona con NodeJS?

    NodeJS viene acompañado de otra tecnología denominada NPM (Node Package Manager). El mismo nos ayudará a inicializar un nuevo proyecto o instalar cualquier tipo de dependencia que necesitemos para desarrollar nuestra aplicación.

  • ¿Cómo se puede verificar la versión de NodeJS y NPM?

    NodeJS y NPM
    Una vez realizada la instalación, puedes utilizar una serie de comandos desde una terminal para corroborar su correcto funcionamiento. Utiliza el comando node -v para verificar la versión de NodeJS y npm -v para visualizar la versión de NPM.

  • ¿Qué puedes hacer con NodeJS en el backend?

    Con NodeJS en el backend, se pueden leer archivos, conectarse a una base de datos, levantar un servidor web y construir una API.

  • ¿Qué versión de NodeJS se recomienda instalar?

    1. Se recomienda instalar la versión LTS (Long Term Support) de NodeJS, ya que tendrá soporte y mantenimiento por al menos 5 años.
  • ¿Qué es un entorno de ejecución?

    Un entorno de ejecución es un programa que permite interpretar y ejecutar código de un lenguaje de programación.

  • ¿Qué es la tecnología V8 y cómo se relaciona con NodeJS?

    V8 es el motor intérprete de código Javascript de Google Chrome y está construido en NodeJS.

  • ¿Por qué no se puede usar NodeJS para manipular HTML en el backend?

    En el backend no hay HTML, por lo que no se puede utilizar NodeJS para su manipulación.

  • ¿Qué se puede hacer con NPM en un proyecto de NodeJS?

Por si acaso cierren vs y abrir y ya jajaja

Esto de Node.js y el backend esta complicado 🥴

Tuve un problema con la terminal porque no podia acceder a la ruta de mi carpeta mokepon y era porque tenia nombrado a las capetas con espacios asi: “carpeta mokepon” y por si alguien tiene el mismo problema es solo quitar esos espacios y poner guiones en vez de espacios asi: “carpeta-mokepon”

Por si alguien tiene el mismo error espero haber ayudado.

Para aquellos como yo que descargaron Wsl y necesitan descargarlo por la terminal es bien facil. Sigan este articulo de windows:
https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl

Para instalar la ultima version stable de Nodejs

sudo apt update && sudo apt upgrade
sudo apt install curl gnupg2 gnupg -y
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt install nodejs

Podrás ver la versión mas reciente estable:
*************************************************
node -v
npm -v 


Bendiciones y éxitos a todos en el proceso 💪 hace años le di la espalda a la programación porque no supieron decirme como era XD y el NodeJs era super complicado de que funcionara.

Qué versión hay actualmente de node js y npm…en mi caso…siendo 14 de enero de 2023 instale las siguientes versiones:

Si a momento de instalar el node.js tenían abierto el VC code, puede que no les salga su version de node y aparezca algún error yo la cerré y al abrirlo nuevamente e intentarlo de nuevo me funciono.

Si les aparece error cuando escriben node -v, puede que tengan que cerrar y abrir el Visual, a mi me paso

quedo todo fino.

Instalada versión 16.17.1 en octubre 2022!

Instalando la versión 16.18.0 19/10/22!

Como de costumbre, primera clase, primer error.
Hola, llevo dos dias cambiando la instalacion, haciendo nuevas pruebas, y definitivamente la ruta a la carpeta "mokepon" no es posible (bueno, no se hacerlo, veo que varios han tenido este problema, pero la solución aun no ha aparecido, les agradeceria una explicacion para principiante, gracias
¿porque aún sobre la pregunta de AUXILIO que emití hace días, NO he recibido respuesta?⛔🤔 aunque esperé que ayudaran en algo, segui buscando alternativas al programa (Node.js) el cual mi windows 10 no me permitía avanzar, encontré una opción (Laragon), si la calidad de mi proyecto dependía de Node.js, no es mi culpa que hubieran omitido mi MAYDAY, para que me dieran ideas de qué programa era mejor... Dicho esto, haré todo lo posible para que con este este software quede lo más cercano a bueno.😎
he descargado varias veces el archivo msi, pero siempre me arroja el error de NO tengo espacio suficiente para instalarlo en mi PC, aunque tengo centenares GIGAS, necesito saber que me recomiendan hacer, estoy varado.❗⛔⛔
![](https://static.platzi.com/media/user_upload/Screenshot%202024-07-11%20115736-a401ef0c-e274-4df0-9d5c-3f084f64f92d.jpg) por qué a mi me sale esto? que podria haber instalado mal?
Hola buenas noches la guía de la instalación solo baja virus, ni el antivirus de Windows lo elimina y tengo que reiniciar desde un punto anterior a ver si no pierdo mi info .
Estoy perdido y no se como continuar sí no me sale lo que dijo en la clase. Ya esta descargado solo que no sale en VScode.![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-06-17%20132150-2515285e-72d7-4cc0-81bb-069d2af5f70f.jpg)![](file:///C:/Users/ericc/OneDrive/Im%C3%A1genes/Capturas%20de%20pantalla/Captura%20de%20pantalla%202024-06-17%20132150.png)
alguien lo ha hecho en Mac y si es así como les ah salido, pueden poner el NPM normal o como
![](https://static.platzi.com/media/user_upload/image-2523d424-c06c-47be-9f04-8e654ecb317d.jpg)
pilaa
Buenas, no se si alguien ya lo haya comentado pero algo que me paso es que el programa lo instale en una ubicación distinta a la que mostraba el editor de código y por eso me dio error, entonces hay que tener muy en cuenta la ubicación a donde se instaló NodeJS.
Necesito ayuda el node.js no me deja instalarlo me sale un error de instalación quizás tendrá que ver la computadora que tengo es una MacBook pro del 2011

Comando para ver version de node js

Comando para ver version de npm

Super sencilla la instalacion en Windows Jejeje ! As always Jajaja ! Hay que instalarlo en GNU/Linux y aprender en ambos entornos. Incluso MacOS jejeje !

Si al instalar node ustedes tienen el VS code abierto y usan el comando node -v, les va a aparecer un error. Para que les funciones, cierren y vuelvan a abrir el programa 👍🏽

ojo , si no les funciona cerrar VSC y abrir denuedo , ami me funcionó perfecto y apareció nd.js

😃 , ya alguien me salvo con esto y paso la batuta para los que vienen jeje … animo , vamos con todo Back End!!!

NPM = No Puedo Mas 🤣🤣🤣🤣🤣

Gracias por la clase.

Hola, si al intentar realizar la descarga para Mac tienen inconvenientes intenten en dar click derecho “abrir en otra pestaña” ahí debería iniciar automáticamente la descarga.

llevo 1 semana entera sin poder avanzar con codigo porque me aparece un error poco frecuente y no encuentro soluciones, quise continuar con el curso de c# y me paso de nuevo el tener que lidiar con otro error poco frecuente, me siento mas perdido que cuando comenzaba ya que no encuentro soluciones

Se que este curso es apenas para aprender como descargar NODE, pero recomiendo mejor descargar NVM, lo encuentro mejor

hola, porfavor si pueden responder mi pregunta en el panel de preguntas agradeceria un monton. El problema es que si no soluciono eso no puedo seguir con el curso

📌 alskjdlkasjd practicamente regalado la instalación en Windows

Me parece insteresante la forma en que se usara el nodejs y el npm para trabajar conel backend de nuestro juego. Yo crei que nodejs en mi ignorancia que solo servia como librerias para angular y nada mas, pero me doy cuento que nodejs tiene muchas funciones. quiero conocerlas y aplicarlas.

No escuche que dijeras:
"Yo no lo descargo porque ya lo tengo"
Jajahaja

Ctrl + ` para abrir la terminal

si les sale error al escribir en code -v , tienen que reiniciar su Visual Studio Code ahí ya no les saldra error. ya me paso y buscando encontré la solución . espero les sirva .

cuando escribi= node -v
me decia q no existia ese comando reinicie Visual y enseguida funciono. 😃

a mi no me lee en la terminal el node, ¿alguien sabe como solucionarlo?

cuando coloco node -v me aparece que no reconoce ese comando, que puedo hacer ?
POSIBLE SOLUCION
Una vez instalado, si tienen abierto el VS Code, ciérrenlo y ábranlo otra vez

Es importante cerrar el VSC y volverlo a abrir para iniciar la terminal de comandos (ctrl + ñ para abrirla directamente)

quedo atrancada aqui porque he venido trabajando con el visual on line

Se viene fuerte las proximas clases jaja

Node.js: lo hicieron tomando el motor de JavaScript que utilizamos en Chrome que se llama V8 y comenzaron a empaquetarlo en un proyecto aparte, funcionalidades como poder acceder a archivos en la computadora, lo que hicieron fue aislar esa capacidad de ejecutar JavaScript sin necesidad del resto del navegador, con Node.js lo que podemos hacer es crear nuestro servidor, nuestro backend y que este programado en JavaScript, que empiece a recibir y enviar datos, recibir solicitudes por medio de http, así devolver un archivo HTML que es nuestra pagina Web,

Lamentablemente las versiones mas actuales del NodeJs no son compatibles con PC's de 32bits como la mía. Para quien tenga el mismo problema la versión 13 si es compatible, ya lo instalé y bueno queda ver si me servirá para lo que sigue.

Si alguien está usando linux (Ubuntu 22.04):

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

Para descargar e instalar la versión 16 (Estable) en linux usen

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs