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

驴Qu茅 es el DOM?

15/84
Recursos

El DOM (Document Object Model) es el modelo que usa el navegador para estructurar las etiquetas HTML y puedes aprovechar esto para modificarlas y hacer cambios con c贸digo JavaScript. 驴C贸mo funciona? Qu茅date para averiguarlo.

Partes del DOM

En el document es donde cargan todas las etiquetas HTML. Y el navegador es capaz de detectar todo lo que ocurre a estas etiquetas.

Secciones del DOM

Eventos

Cuando, por ejemplo, t煤 haces click en un bot贸n (

Aportes 334

Preguntas 98

Ordenar por:

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

o inicia sesi贸n.

Freddy me inspira mucho 馃挌 馃挌

Inventemos un juego novedoso de mounstros con poderes y habilidades especiales, y demosle un nombre supercreativo: Mokepon

Los de Pok茅mon鈥

Vengo del futuro para recomendarles 2 cosas

La primera: Apartir de aqu铆 no usen las mismas variables, nombres de clases o Id麓s que los profesores, esto les ayudara a que comprendan mejor su propio codigo y evitara que solo tomen una especie de dictado.

La segunda: Hagan todos los retos que les sugieran y traten de llegar de distintas formas al mismo resultado que los profesores y adapten los nuevos temas a su propio codigo, esto ayuda bastante a entender mejor los temas.

Adios vaquero.
Estuvo genial todo lo que ense帽aste freddy.
Pero estoy seguro que lo que viene va estar Espectacular , Muchas gracias 馃挌.

馃摑EL DOM


Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una p谩gina HTML est谩 formada por m煤ltiples etiquetas HTML, anidadas una dentro de otra, formando un 谩rbol de etiquetas relacionadas entre s铆, que se denomina 谩rbol DOM (o simplemente DOM).

Este capitulo me hizo acordar de este meme

Hay que tener cuidado con Nintendo, no perdonan una

Los Emoji pal que a煤n no los pueda generar (Win + . )

馃敟馃挧馃尡

  • Para generar una estructura HTML m谩s r谩pido, has lo siguiente, escribes 鈥渉tml鈥 luego de haber creado el archivo con la extensi贸n html.
    .

  • El que mas se usa es html:5 elige ese.
    .

  • Autom谩ticamente tienes una estructura html ya creada 馃槃

MOKEPON!! voy a programarloo o o ooo o鈥
Y por fin aprendeere! (mokepon)
Graaann profesor es, el que te ense帽e a programaaarrrr鈥

(yo quiero ser un programador, mejor que nadie mas!)

![](

鈥淟as grandes cosas las hacen equipos, no individuos鈥 Genial frase 馃敟

Freddy oficialmente fue mi primer profesor de programaci贸n, encantada con su clase y su manera de ense帽ar.
Antes de estas clases no sab铆a absolutamente nada, pero siempre quise aprender y me atrev铆 con este reto.
Muchas gracias, quedo muy motivada a seguir en este enorme y maravilloso mundo que es totalmente nuevo para m铆.

menos mal que emmet me ayuda

Para crear este andamio b谩sico de HTML5 de forma autom谩tica en VS Code puedes escribir:
html:5 + TAB
o tambi茅n:
! + TAB
.
Si no funciona ninguna de las dos formas prueba con escribir lo mismo pero esta vez le das CTRL + SPACE y luego veras una serie de opciones, suele ser la primera y ENTER 馃憤

Hola! Dejo por ac谩 el juego de piedra, papel o tijera con botones y otras cosas 馃槈

Link al c贸digo:
https://github.com/alejonaranjo83/ScissorPaper

Gracias Freddy tienes un gran talento para ense帽ar (y) 馃槃

Adios vaquero, gracias por las buenas bases, veremos que nos traen de bueno los siguientes compa帽eros

freddy(crea mokepon)
nintendo:
鈥渓o demanda epicamente B)鈥

Modelo de Objetos del documento (DOM)
Es la forma que por dentro el navegador estructura las etiquetas html, para que se puedan manipular en c贸digo de Javascript.
.
Window:
Es cada una de las pesta帽as de mi navegador, y es la que detecta que la pagina web cargue.

Document:
Es espec铆ficamente lo que esta dentro de la etiqueta html, y podemos encontrar etiquetas como de p谩rrafo, titulo o de bot贸n.
.
Escuchador de eventos: ocurre cuando le damos click al bot贸n.
.

no es un adios, es un hasta luego jejejeje

NOOO porque se va Freeddy
Me voy al curso de hace 5 a帽os de programacion basica

Te extra帽aremos Freddy, gracias por tus ense帽anzas!!

De los creadores de Pakiman, llega Mokepon 7u7 鉂わ笍

Lo que freddy comenta en el v铆deo es el dise帽o responsivo o web reponsive en ingl茅s. Les dejo un enlace por si quieren ampliar conocimientos sobre este tema. Es del w3schools:

https://www.w3schools.com/css/css_rwd_intro.asp

DOM: El HTML.

Apuntes de la clase:

Glosario:

  • DOM Document Object Model

  • Window: la ventana del navegador

  • Document: el codigo de la pagina.

  • event listener: accion que esta lista a recibir y observar acciones del usuario o de un proceso en particular.

  • scafolding o andamiaje: codigo htlm base.

muchas gracias sensey Freddy enormemente agradecido鈥

4:30 - 4:32 jajajajaja. no quiero que me demaaaaanden

Primero Pakiman, luego Mokepon.
驴Qu茅 sigue se帽ores?

Lo que se es que tengo que atraparlos 馃挭馃徎
馃敟馃寠馃煠馃挩

Y as铆 inicia una gran aventura!
Suerte a todos, y bienvenidos a los nuevos a este fascinante mundo

Excelente curso , volvere a repetir todo de nuevo porque las funciones como que me desconectaron el cerebro. ^^,

en vsc pueden simplemente poner 鈥!鈥 y despues enter y les va a acer la estrucutura basica de html, head, body pero mejor aprendan sela

En mi caso para poder sacar emojis en Linux, tuve que descargarme 鈥渆mote鈥, y ponerle el shorcut 鈥渃trl鈥 + 鈥渁lt鈥 + 鈥渆鈥.

Vi tambi茅n que habia una extension de gnome para emojis, pero se me dificulto mucho as铆 que opte por esta opcion.

Gracias Freddy por creer en m铆, se te echara de menos

porque me dejas freddy ,no me dejesssss!!! xdxd
(la sensaci贸n es como tu primer d铆a de k铆nder , cuando tu mama te deja solo ) asta la otra vaquero .

Las grandes cosas las hacen equipos, no individuos.!!!
.
No bajes el ritmo

Por favor Freddy sigue dando clases! :鈥(

隆Muchas gracias Freddy! ME GUST脫 MUCHO TU CLASE 鉁

Nintendo autom谩ticamente: que lo demande dice

Gracias profesor Freddy, me voy de ciudad 鈥渧agancia鈥 a capturar nuevas ideas con nuevos companeros. Pronto le enviare mis nuevas ideas capturadas. aunque si no tengo a a mikachu tengo a nupander (NUNCA PARES DE APRENDER)
ahi vamos!

mokepon unite xD

Hola muy buenas! Quiz谩s ya muchos lo sepan, pero yo lo tuve que buscar je. PARA PONER EMOJIS SOLO HAY QUE PRESIONAR LA TECLA **WINDOWS + . **(punto)

De nada! Saludos

para los emojis en Mac es Control + Command + Barra espaciadora

Gracias Fred

鈥淟as grandes cosas las hacen equipos, no individuos鈥 馃ぉ馃ぉ

NOOOOO!
solo por Freddy inicie el curso si lo voy a extra帽ar banda 馃槮
si me envicio en este rollo ese hombre

Teoria sobre eventos en Javascript

Necesito alarmas de Freddy cada vez que pierdo la esperanza!!
Qu茅 gran tipo!

Pro Tip: Cuando escriben HTML en visual pueden darle en las opciones para que autom谩ticamente genere el scalfolding

隆隆隆隆隆CABALLEROS DEFENSORES DEL UNICO Y ORIGINAL 鈥淧AKIMAN鈥, PRESENTES!!!
隆隆隆POR CAUCHIN LA VACA, TOCINAURO EL CERDO Y EL POLLO POKACHOOO!!!

Gracias totales Freddy 馃敟

Te extra帽aremos Freddy!

Equipo Platzi mis felicitaciones, excelentes contenidos. < Son los mejores / >
Att un estudiante mecatronica que recien empieza a descubrir su pasion por la programacion.

Gracias por tanto aprendizaje Sr. Freddy. 馃挌

隆隆Genial Freddy!! Muchas gracias.

un hack para poner todo el c贸digo b谩sico de una vez es poner " ! " y presionar la tecla tab

de grande quiero ser como Freddy Vega.
eses un dios mi Freddy.

si tu en vscode escribes 鈥!鈥 una vez y le das a tab te ase toda la estructura basica de html. intentenlo

No profe 馃槩馃枑馃枑

馃尲 Gracias por tu ense帽anza.

Gracias fred

GRACIAS PROFE!!!

Me encanta que en cada clase nos da un mensaje de superaci贸n personal!
馃挌馃挌馃挌 Gracias Freddy

Muchas Gracias gran Sensei Freddy sempai por animarme a seguir cada d铆a con este curso, ya muchos lo han terminado me imagino pero yo apenas estoy arrancando en este maravilloso mundo que cada D铆a me gusta m谩s.


Casi que no

Creo que el ordenador me est谩 haciendo trampa en el juego de piedra, papel o tijera. No es normal que me gane siempre. La ley de la probabilidad me est谩 dando por culo.

隆Gracias por traernos hasta ac谩, Freddy!

Modelo de Objetos del Documento (Document Objects Model o DOM) es la forma en la que el navegador estructura las etiquetas HTML para ser manipuladas por c贸digo JavaScript.

El navegador es window (las pesta帽as del navegador).
El c贸digo HTML es document (todo lo que est茅 dentro de los tags HTML).

Un Escuchador de Eventos (EventListener) es cuando un elemento del window o ducument espera a que ocurra un evento para ejecutar una funci贸n en JavaScript.

El andamio (Scaffolding) es la estructuraci贸n de los elementos b谩sicos en un proyecto de programaci贸n, o en este caso, la estructura de una p谩gina web.

Fredddy te queremos mucho馃槶馃ス

Para buscar emojis en Ubuntu CTRL+ I

Para generar el formato de html mas rapido hagan lo siguiente: con el documento vacio escriban el signo de exclamacion, seguidamente le dan al TAB

y listo ya se les genera la base

excelente profesor!!!

Gracias amigo nos vermos a la proxima

馃槶:[ ): PORQUE TE BAS

Me encanta este imperio de la educaci贸n 鉂わ笍

  • tengo un CONSEJO, si pones doc en visual estudio code ya te aparece estructurado el html

gracias freddy me encanto tus explicaciones, logre realizar los procedimientos que mencionas, paso a paso, debido a tus deliciosas explicaciones, sin tener que retroceder muchas veces.

Para ahorrarte un poco de tiempo al escribir siempre todos los t铆tulos y dem谩s, prueba poner ! y aprieta espacio, aparecer谩 autom谩ticamente la estructura b谩sica de html

las clases estuvieron geniales , ahora me toca repetir todo de nuevo para tenerlo mas claro , poco a poco con la practica se aprende empec茅 pr谩cticamente desde cero sin tener nociones nada de programaci贸n y ahora voy entendiendo muchas cosas gracias Fredy

si ponen un signo de admiraci贸n (!) en una linea de c贸digo y le dan enter se ahorran tener que escribir el 谩rbol de html.

Al c贸digo base se le llama -El andamio-

Dom = modelo de objeto de documento

<p>
<button>Fuego馃敟</button>
<p>

button, es un evento (un bot贸n) al que se le puede atribuir una funci贸n, este button esta escuchando la se帽al ya sea un click u otros factores y se dispara y se realiza la funci贸n al producirse la se帽al.

excelentes ejemplos y muy buena forma de ense帽ar .!!! motivado Full

los emojis ayudan bastante a que se ponga m谩s gr谩fica/bonita la web

Document Object Model - Es la forma en la que el navegador por dentro estructura las etiquetas de HTML para que las puedas manipular en JavaScript.

El DOM es la estructura de arbol de todas las etiquetas HTML que conforman nuestro sitio web.

Se extra帽aran las clases 煤nicas de Freddy

驴Para cuando sale MOKEPON para Nintendo?

wow Freddy, sos brutal!!!
gracias, gracias

LO AMAMOS SE脩OR DON VEGA

Excelente, me encanto la clase!

uy c贸mo as铆 que hasta ac谩?..Adi贸s vaquero, te extra帽ar茅

鈥渉eeeeeeerooo sotoniiiii鈥︹

Hace tiempo que no tenia a Freddy como profesor, siempre es un gran placer adquirir conocimiento de alguien que se le nota tanto la pasion como a Freddy, un gran maestro, muchas gracias.

Gracias Freddy!!

DOM es la forma en la que el navegador estructura las etiquetas por dentro para poder manipularlas desde Javascript

Amor por el equipo de Platzi 馃挄 muchas gracias por este curso

Mis apuntes

  • El DOM es especial de JavaScript
  • Document Object Model: la forma en la que el navegador estructura las etiquetas html para que las puedas ejecutar en JavaScript.
  • Andamio o scaffolding: c贸digo b谩sico com煤n para varios proyectos.

Grande Freddy馃檶馃檶