Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

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 鈥淗ola 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 57

Preguntas 52

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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. 馃挭

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

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/

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 + 鈥淣ombre de la capeta entre comillas鈥:

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

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


Alguien me puede ayudar dici茅ndome que tendr茅 mal ah铆, solamente que no me permite ejecutar esa funci贸n.

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

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

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鈥
|
|
|

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

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

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

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.

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 鈥淚s 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鈥

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 鈥渓s鈥 para poder ver que carpetas habia y posteriormente colocar el nombre de la carpeta de est谩 forma: cp programar/ y despues volver a usar 鈥渓s鈥 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 鈥済it 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鈥lasificados seg煤n su funci贸n鈥on much铆simos鈥os 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 鈥減ackage.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>