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

Terminal de comandos y Node.js

73/84
Recursos

Como desarrolladores de software, una de nuestras mejores amigas será la terminal de línea de comandos para la ejecución de tareas. No debemos tenerle miedo, ya que nos facilitará mucho el trabajo en el futuro.

¿Qué es una terminal?

Una terminal de línea de comandos o CLI (Command-Line Interface), es una interfaz de texto que nos permite interactuar con un proyecto, ejecutar tareas o navegar por todos los archivos y directorio de nuestro computador.

En cualquier sistema operativo puedes ejecutar comandos en una terminal. Habrás observado que VS Code trae consigo una terminal. Existen muchas otras, todas muy similares.

A diferencia de una interfaz de usuario donde podemos observar e interactuar con archivos o directorios de forma visual y más amena, una terminal de línea de comando también lo permite a través de texto ejecutando comandos.

Parece algo más difícil, pero no te preocupes. Te acostumbrarás y te garantizo que lo agradecerás cuando seas un desarrollador de software profesional.

Con NodeJS, utilizaremos NPM que trae consigo su propio CLI para crear proyectos o instalar dependencias que nuestro proyecto necesitará.

Pero antes de eso…

¿Qué es una dependencia?

Llamamos dependencia o librería a una pieza de código desarrollada por un tercero, por otra persona. Las mismas nos permiten solucionar problemas triviales y reutilizar código para hacer más rápido nuestro trabajo como programadores.

NPM se encargará de descargar por nosotros las dependencias que necesitamos. En la actualidad, es el gestor de dependencias más grande del mundo. Cada lenguaje de programación suele tener el suyo, como lo es Composer para PHP, Maven para Java o PIP para Python.

Una dependencia puede servirnos para manejar fechas, para leer archivos, para realizar solicitudes HTTP o hasta para levantar un servidor, entre muchas otras funcionalidades. Realmente te encontrarás con dependencias de todo tipo y casi para cualquier cosa que quieras hacer. Poco a poco, irás descubriendo más y más dependencias que utilizarás para construir tus proyectos.

Comandos básicos que debes conocer

Existen muchos comandos que incluso varían dependiendo el sistema operativo en el que trabajes.

Los comandos más básicos que puede probar son ls o ll para listar los archivos o directorios. También utilizarás mucho el comando cd para desplazarte entre directorios dentro de tu computador.

Los CLI, como NPM, incorporan a tu sistema operativo una serie de comandos específicos para trabajar con una tecnología. Suelen utilizarse estos con un prefijo como npm <command-name>.

Hola Mundo con NodeJS

Siempre, y para toda tu vida, que instales una nueva tecnologías, lo primero que realizarás es el “Hola Mundo” que permite corroborar la correcta instalación de la tecnología o herramienta.

Para crear tu primer proyecto en NodeJS, con ayuda de NPM, basta con utilizar el comando npm init -y. El mismo creará en cuestión de segundos tu primer proyecto.

Observa que este comando ha creado un archivo llamado package.json que contiene la configuración básica de cualquier proyecto desarrollador en NodeJS.

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

No debes preocuparte tanto por su contenido, poco a poco lo irás comprendiendo. Puedes observar, entre otros datos, el nombre del proyecto, la versión, una descripción y el archivo base del proyecto, entre otros datos.

Continúa creando un archivo que llamaremos index.js que será el archivo base de nuestro proyecto. Agrégale al mismo el siguiente contenido:

console.log("¡Hola Mundo!");

Ya puede ejecutar tu primer proyecto en NodeJS utilizando el comando node index.js. Recuerda utilizar el nombre de tu archivo que acabas de crear para indicarle a Node qué archivo ejecutar.

En cuestión de segundos observarás un ¡Hola Mundo! en la consola que hayas utilizado para lanzar el comando. Eso significa que NodeJS se encuentra correctamente instalado en tu computador y has ejecutado tu primer programa.

Ha sido bastante sencillo la creación de un proyecto con NodeJS y su ejecución. Ahora es momento de desarrollar tu primera aplicación backend apoyándote de estas tecnologías.


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

Aportes 66

Preguntas 57

Ordenar por:

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

La terminal de comandos al principio puede ser confusa pero una vez que la comprendemos no la podemos dejar nunca 😂

Por cierto les recomiendo que tomen el curso de Terminal de comandos

si una carpeta tiene espacios utiliza comillas

cd "carpeta con varias palabras" 

una buena practica es no poner espacios en las carpetas para agilizar mas los comandos en la terminal

para los que le aparece como “PS C:\Users\TORRE>” o algo parecido y no encuentran la ruta para llegar a la carpeta en donde estar el archivo, lo que pueden segur la ruta que aparece arriba en VSC así como se ve la imagen de abajo y como esta resaltado con un color verde, si lo ven es la misma ruta que aparece en parte de arriba.

espero que les ayude mucho esto que vi para poder llegar hasta el archivo. No paren de aprender. 💪

He aprendido mucho con ustedes, pero ya a este punto siento miedo de no seguir aprendiendo, de no volverme buen programador 😦, pero voy a persistir, el que persevera alcanza

No te tengo miedo Backend, sobreviví a las clases de Javascript 🤣😊

No le tengan miedo a la terminal, será su amiga en un futuro!

Me costo bastante! Pero después de todo un día de estudiar, intentar e intentar varias veces, lo logré y se siente muy satisfactorio llegar a este punto siendo este curso mi primera experiencia en el mundo de la programación. Más motivada que nunca

Hola, en mi caso tuve dos retos y les comparto la solución:

  1. Tenía que cambiar del disco C: al disco D:, ya que es el en disco D: donde tengo guardada la carpeta, para ellos se escribe cd + el disco que buscamos, en mi caso quedó cd D:
  1. Tengo carpetas que tenían espacios en sus nombres, para poder acceder a esas carpetas desde la terminal debemos escribir cd + “Nombre de la capeta entre comillas”:

Espero que les sea de utilidad si se encontraron con estos retos también

Los usuarios y los programas se comunican con el S.O (Sistemas Operativos) a través de una interfaz de usuario.

  • Interfaz Grafica
  • Interfaz de Linea de Comandos

Al estudiar de informática, vamos conociendo mas el S.O dejando de ser un usuario cotidiano ya que nos daremos cuenta que la linea de Comandos / Terminal / Shell nos facilitara mas la vida.

Este tipo de interfaz se utiliza con un lenguaje de control o de ordenes. Dichas ordenes son capturadas y traducidas ( Recordar que las computadoras no entienden nuestro idioma; Piensa en que vas de viaje a un pais de habla distinta al tuyo, para poder comunicarte necesitas de un interprete que te pueda traducir ) por un interprete de ordenes.
Cada llamada al sistema lanza una ejecución a el modulo del S.O que proporciona el servicio requerido.

Hola a todos soy nueva tengo 12 años y pues me costo muchisimo en este curso y realmente me tomo mucho tiempo para encontrar el error para buscar package.json ya que al momento de seguir todas las indicaciones de la profesora siempre me salia
PS C: \Users\pues mi nombre tal> y solo salia eso y pues para solucuonarlo le di click a ese enlace de arriba y me llevo a otro apartado del Vscode y salia todos mis archivos, ustedes deben buscar hasta abajo para que les aparezca el package.json, espero que les ayude🙂👧🏻

La consola de Windows viene de sus predecesoras según entiendo MS-DOS, cuando las computadoras aun no tenian interfaz grafica.

De cualquier forma a pesar del tiempo sigue siendo una herramienta potente si se usa bien.

Aquí una pagina con algunos comandos usuales que puedes usar en la terminal, sean cuidadosos, quizás usar una maquina virtual para testear no este de mas 😅

https://elandroidefeliz.com/comandos-cmd-comandos-dos-listado/

Para los que cuando abren el terminal y les sale algo asi como
PS C:\Users\FAMILIA>
para cambiarlo deben hacer el siguiente comando:
1: primero buscan la carpeta donde este el archivo y en la parte superior hay como una especio de url del archico le dan click en el espacio en blanco y lo copian, luego lo pegan despues del cd y asi les deberia quedar.
PS C:\Users\FAMILIA> cd C:\Users\FAMILIA\OneDrive\Escritorio\programar\mokepon

y asunto resuelto


Alguien me puede ayudar diciéndome que tendré mal ahí, solamente que no me permite ejecutar esa función.

npm init -y ,es una manera de hacer una configuración automatica

Siempre he pensado que mi fuerte es mas el Backend que el Frontend ya que me llevo más con la lógica que con el diseño, PEROO apenas empece en platzi hace unos meses atrás… Ahora es cuando realmente sabré si estoy hecho para eso!!!
|
|
Yo cuando empiezo con cosas del Backend…
|
|
|

yo tuve que ejecutar con comandos desde la terminal para ir abriendo loas archivos para poder llegar a la carpeta mokepon , porque desde un principio no me aparecia toda la ruta completa como a la profe , asi que utilice los comandos cd y ls y asi me permitia ir de carpeta en carpeta , me costo pero ya estoy al mismo ritmo de la clase de la profe y me parecio muy facil hasta ahora .

instale una version antigua por uso windows 7 mi pc es viejit

En linux puse ls, cd Documentos, cd Mokepon, y después pude ejecutar el resto de la clase, y el package.son, lo arrastre al visual studio code

La terminal no es algo que sea requerido para los desarrolladores, pero si que ayuda mucho, y que se siente muy bien abrir a terminal y utilizarla en frente de personas que no saben nada de programacion o computadores

Hola a todos, para los que tienen cargado en alguna otra ruta y tengan dudas de como cargarla, a continuacion les dejo la solucion

lo que tienen que hacer es con el comando cd agregan la ruta de donde tiene ubicado su proyecto, en caso de que tengan carpetas con espacios, como en mi caso lo que tienen que hacer es usar las comillas, espero que esto pueda a servirle a los que tengan dudas.

una pregunta como puedo abrir la carpeta que quiero en mi terminal es que me aparece otra
quiero cambiar la parte que esta en PS D:\PLATZI\

Que no se rompa nada del codigo🤞

para pasar de este video al otro me tomo alrededor de 30 minutos 🤔😥
pero logre ver mi error y entenderlo
uff!! se pone duro este curso 💪

Espere mucho este momento, veía a muchos trabajando en las terminales. Esto se pone cada vez mejor. Vamos a terminar con toda este curso.

Esto tal vez se parezca a la terminal de linux 🥴

me gusto esta clase, quiero seguir aprendiendo mas sobre la terminal

Kevin Fiorentino ha vuelto!! Es el que hace los apuntes en recursos y la verdad que se le da genial, se lo echa de menos cuando no está y eso que la clase era clarísima 👌🏼 De veras que toda la gente de platzi son diez sobre diez.
console.log('hola Diana, hola Kevin!)

SI SOBREVIVIMOS A LAS CLASES DE DIEGO, PODEMOS CON TODO!!!

Hola no puedo utilizar npm, me dice acceso denegado

Para los programadores que estén usando linux Ubuntu (WSL2) desde la terminal y no puede encontrar como llegar a las carpetas de windows donde está la carpeta mokepon, la solución que yo encontré fue la siguiente:

  1. Desde la terminal estando en home, ejecutamos el comando:
    cd /mnt/c y enter
  2. luego ejecutamos ls, nos puede pedir permisos, ejecutamos sudo ls y enter para solicitar permisos de administrador
  3. Nos solicita le password de administrador, lo introducimos y enter y listo
  4. Puede que nos solicite instalar comandos como cd u otros
    ejm sudo apt install cd y enter
  5. ya podemos iniciar a movernos por las carpetas de windows
    ejem /mnt/c$ cd Users/sigues la ruta de las carpetas

Espero observaciones, gracias

UF! hoy me costó, desde la descarga de node tuve problemas… pero acá sigo, aprendiendo de a pocos!

A mí no me apareció la misma información luego de darle enter cuando pregunta “Is this OK?”
.
Tendré algo mal? 👀
.

Al principio uno se confunde pero eso con practica se aprende y se va uno adaptanto a la terminal es algo chevere y con linux se aprende mucho mas a profundidad eso…

Node.js es un entorno de ejecución que te permite ejecutar JavaScript en el backend. Debes utilizarlo para crear aplicaciones del lado del servidor, como APIs y servidores web. En el módulo de "Backend: videojuego multijugador", aprenderás a configurar proyectos, administrar dependencias con npm, y crear tu primer servidor web usando Express.js. Esto te ayudará a gestionar la lógica de tu videojuego de manera eficiente. ¡Es un paso fundamental para desarrollar aplicaciones más completas!
![](https://static.platzi.com/media/user_upload/image-1749d9e3-605f-49f0-963a-221fbbc5c79b.jpg)
Para los que usamos wsl desde el comienzo ¿Cómo sería el proceder?
llevo 2 años haciendo el curso ya casi acabo :)
![](https://static.platzi.com/media/user_upload/image-b68e83cf-301b-49e9-af36-40c3480e147a.jpg)![](https://static.platzi.com/media/user_upload/image-c0e89f6f-605d-4805-8f3a-0a52cecc5a83.jpg) Que onda gente chula. Algun colaborador que pueda ayudarme llevo atorado dos dias jajaja. Ya cambie nombre de carpetas, movi de lugar, meti comandos y no me sale el condenado archivo json. Cualquier ayuda y solucion es bien recibida. Ya solo 11 clases!!!!
No puedo acceder a mi Carpeta cuando estoy en la Terminal de Visual Studio Code ayuda please!
**A mi por defecto me apárese esto, como le puedo hacer para que me cargue la carpeta de mokepon ayudaaaa por favor**![](https://static.platzi.com/media/user_upload/image-eac3fe12-c905-44c3-8e83-e89c3e9046f3.jpg)![]()
Hola buenas a mi me marca como que no encuentra el packaje.json pero justamente el npm init es para crearlo xd alguien me ayuda

Está clase se me ha hecho mucho más fácil después de ver el curso de git y github dictado por el Prof. Freddy

Me asuste cuando no me aparecio el mensaje

menos mal encontre que si se habia creado el archivo, y logre continuar.

Como dato: El comando clear puede borrar las lineas del terminal que has escrito

La forma en la que yo pude moverme de mi carpeta iniciaial que era C:\User\PC, fue colocar en la terminal primero el comando “ls” para poder ver que carpetas habia y posteriormente colocar el nombre de la carpeta de está forma: cp programar/ y despues volver a usar “ls” para ver que carpetas habia y volver a colocar cp y el nombrede la siguiente carpeta, quizás no sea lo más rapido pero asi lo encontre jajaja

lista de comandos de la terminal https://platzi.com/blog/41-comandos-terminal/

Es mi primera experiencia en Backend, admito que le tenia un poco de miedo. Sin embargo me ha ayudado el hecho de tener conocimientos en Linux puesto que es el SO que uso, así que a la terminal no le tengo miedo 💪

Crear un proyecto de Node js, comando npm init

epico

Todo bien con la creación del node JS, aunque me quedó la duda de la sección del “git repository”, conozco algo de git, pero no entendí mucho para que se usa esa sección 👀

Nuestro primer Hola Mundo jejeje ! Node JS ahi te voy !

Vamos equipo!, ojo compañeros si la carpeta que buscan tiene espacio la deben buscar pero entre comillas. O si no no funciona. A mí este dato me salvo .

Gracias por esta clase. Vamos con todo , decir que tengo miedo es poco jaja

libreria --> codigo hecho que facilita ciertos usos

ls --> listar archivos
cd --> cambiar directorio
npm --> crea el proyecto

node nombre.js --> ejecuta codigo

Que buena explicación tenía nervios que saliera mal jaja. Por cierto, quería comentar en Json y no dejo, dice que no se puede comentar porque es datos puros, que se usa "_comment": "comment text goes here...", pero que no debería usarse.

Gracias por la clase.

Si, recomendable en este punto el curso terminal…

  • ¿Qué es una terminal de línea de comandos?

    Una terminal de línea de comandos es una interfaz de texto que nos permite interactuar con un proyecto, ejecutar tareas o navegar por los archivos y directorios de una computadora.

  • ¿Para qué sirve una terminal de línea de comandos?

    Una terminal de línea de comandos es una aplicación que permite interactuar con el sistema operativo y ejecutar comandos a través de texto en lugar de gráficos.

  • ¿Puedo utilizar una terminal en cualquier sistema operativo?

    Sí, existen terminales para diferentes sistemas operativos, como Windows, macOS y Linux.

  • ¿Cómo se diferencia una terminal de línea de comandos de una interfaz de usuario?

    Una terminal de línea de comandos se diferencia de una interfaz de usuario en que la interfaz de usuario se basa en gráficos y iconos, mientras que la terminal de línea de comandos utiliza texto para realizar tareas

  • ¿Qué es NPM y para qué lo utilizamos con NodeJS?

    NPM (Node Package Manager) es un gestor de paquetes de Node.js que permite descargar y utilizar módulos de terceros en un proyecto de Node.js.

  • ¿Qué es una dependencia en el desarrollo de software?

    Una dependencia en el desarrollo de software es un componente externo que es requerido por una aplicación para funcionar correctamente.

  • ¿Cuál es el gestor de dependencias más grande del mundo?

    El gestor de dependencias más grande del mundo es NPM.

  • ¿Para qué puede servir una dependencia?

    Una dependencia puede proporcionar funciones adicionales, solucionar problemas de seguridad o mejorar la experiencia del usuario

  • ¿Cuáles son los comandos básicos que se deben conocer en una terminal de línea de comandos?

    Algunos de los comandos básicos que se deben conocer en una terminal de línea de comandos incluyen: ls para listar los archivos y carpetas en el directorio actual, cd para cambiar de directorio, mkdir para crear un nuevo directorio, rm para eliminar un archivo o directorio, cp para copiar un archivo o directorio, y mv para mover un archivo o directorio.

  • ¿Cómo crear un proyecto en NodeJS con NPM?

    Para crear un proyecto en NodeJS con NPM, primero debes tener NodeJS y NPM instalados en tu sistema. Luego, en la terminal, navega hasta la carpeta en la que deseas crear el proyecto y ejecuta el comando npm init. Sigue las instrucciones en la terminal para completar la creación del proyecto, y podrás encontrar un archivo package.json en la carpeta del proyecto.

  • ¿Qué es un archivo package.json y qué información contiene?

Es impresionante la creacion de un configurador usando la terminal. Sabia de terminal, pero la forma en que Diana us la terminal para el Nodejs me dejo impresionado. Y la forma en que ejecuto un console.log y este se visualiza en la terminal woa. Se que estoy verde en esto de Nodejs, pero mejorare y aprendera mas de este para futuros proyectos.

Aquí les muestra los comandos que se pueden usar con Windows…clasificados según su función…son muchísimos…nos queda mucho por aprender.

https://www.ionos.es/digitalguide/servidores/know-how/comandos-cmd/

Espero esta parte del curso me despeje la duda de por que es mejor desarrollar desde una consola por encima de un IDE o un editor de texto. Se puede sentir la gente muy haker y todo lo que quieran utilizando esto, pero la verdad eso me recuerda a la primera vez que interactue con un computador con un programa de una tortiguita hace ya bastantes años, es decir nada que ver… literalmente! Un punto que se movia a partir de comandos.

para los que no les sale nada y ni les lee sus carpetas de sus mokepon , cierren todo el visual studio code hasta los archivos de html y js , y de nuevo lo vuelven a hacer el node -v y verán les resulta , buscando como una hora en internet y cerrando todo y volviendo a subir las carpetas de mokepon ahí recién agarró la ruta de mi carpeta y pude dar con la clase sin que salgan letras rojas ni nada .

no puedo avanzar, estoy atascado con esto…

Como accedo a la ruta utilizando la terminal de Linux???\

veo que van todos los datos o carpetas creadas anteriormente cuando se inicio a programar mokepon

Yo tuve problemas cuando quize abrir la carpeta programar desde la terminal de Visual Studio al final tuve que cambiar el nombre de la carpeta programar para poder solucionar mi problema y poder entrar a la carpeta pokemon para poder crear el “package.json”

muchachos ya me dio.

la forma en la que me dio es cambiando los nombres de la carpetas para que sea más fácil para nosotros escribirlos en el Node. Js

me toco Unir los nombres de las carpeta. y quitarle símbolos como paréntesis, puntos y espacios. me quedo asi:
(me tocó escribir carpeta por carpeta jajajaja)

PS C:\Users\JORGE ISAAC\Desktop\Platzi\CursoBasicoHTMLPlatzi\Servidor\MisResultados\Mokepon>