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

Visual Studio Code

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?

Crea tu primer sitio web

3/84
Recursos
Transcripción

Aportes 122

Preguntas 106

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Un comentario para todos aquellos que ya saben programar y se pasan por aca.
POR FAVOR NO HAGAN APORTES POR FUERA DE LO QUE SE VE EN LA CLASE!!
En el curso anterior de programación básica había muchisimos aportes de gente ya profesional, donde solamante por ego mostraban cosas que no se veía en la clase. Para quienes recién están aprendiendo eso genera mucho miedo y frustación, a mi me pasó de ver cosas que no entendía como las habían logrado. Si van aportar algo, que sea sobre lo que se ve en clase, sino vayan a los cursos avanzados que allí seguramente sus aportes serán muy bien recibidos. Este comentario es solamente para ayudar a los principiantes, como lo fui yo, hace apenas 1 año, y espero que aquellos que estén mas avanzados se lo tomen para bien, ya que no es con mala intención que lo digo. Saludos

☝ Hay un dicho que me encanta para describir las extensiones y es: “las extensiones son mera cortesía para tu sistema operativo” 🤓. ¿Por qué? Porque tal como menciona la clase, no importa qué extensión tengas, a final de cuentas, todo termina siendo un archivo de texto puro para tu computadora 😄.
.
¡Sí! Literalmente puedes abrir cualquier archivo en un bloc de notas (aunque algunos de ellos te aparecerán con símbolos extraños si intentas abrirlo 😵). A lo que tu computadora le interesa es que ese archivo de texto que escribes contenga información que ella pueda leer e interpretar para poder mostrarte a ti algo en pantalla 💚.
.
Profundizo un poco más en cómo funciona esto en este blogpost 👇:
.
💻 ¿Qué computadora necesito para programar?

Un tip para abrir el archivo de manera rápida en el navegador (En mi caso Chrome) es usar las teclas Control + O

3 - Crea tu primer sitio web

  • Estructura de un archivo: <nombre de archivo>.<extension>
    • archivo**.extension**
    • carta**.docx**
    • hoja**.xls**
    • pagina**.html**
  • HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
  • CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
  • JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

<aside>
💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades

</aside>

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas

1ra pagina web con html:

<h1>Mi primer sitio WEB</h1>
Hola <strong>querida</strong> clase

Siendo sincero estoy en mi 4 semestre de ingeniería de software y no siento que haya aprendido lo suficiente, así que decidí dejar la flojera a un lado y por fin comenzar mi camino autodidacta, esto depende de mi y agradezco a platzi por ayudar en mi proceso

Para los usuarios de macOS, para crear un documento de texto, seria de esta forma.

-Buscan la aplicación TextEdit y la abren

  • Luego se van a nuevo documento
  • Donde dice archivo le pican y van a donde dice guardar
  • Luego ya le ponen el nombre y la formato seria la extensión que necesitan

Un pequeño ejemplo para comprender mejor la parte de HTML, CSS y JS
Vease a HTML como el esqueleto, la estructura del programa. CSS como el diseño o apariencia que se le dará. JS como el cerebro que ejecutará acciones.
.

Este curso se actualizó xq en el otro salía Freddy sin barbita..

Tomé el anterior curso de programación aún asi tomaré este para seguir aprendiendo 💪💚

Mi esposa me mantendra 6 meses para que yo pueda dedicarme enteramente a estudiar los cursos de Platzy, estoy emocionado 💗 a darle duro

Está churris el Freddy 😄 ♥

  • ¿Qué es html?
    • Es un lenguaje de marcado de etiquetas, que se encarga de estructurar el contenido de una pagina web.
      • Es decir que es como el esqueleto del cuerpo humano.
  • ¿Qué es css?
    • Es un lenguaje de estilos en cascada , que se encarga de darle estilo a al html.
      • Es decir que funciona como si fuera la piel del ser humano.
  • ¿Qué es Js?
    • Es el lenguaje utilizado para programar la pagina web.
      • Funciona como si fueran los organos del cuerpo humano

Resumen de la clase 😃

  • Estructura de un archivo: <nombre de archivo>.<extension>
    • archivo.extension
    • carta.docx
    • hoja.xls
    • pagina.html
  • HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
  • CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
  • JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas, existen otros como notepad, lo mas usados para programar son visual estudio code, sublime text entre otros.

Para los usuarios de Mac que tienen problemas para visualizar las etiquetas de HTML vayan a w3schools.com/html/html_editors.asp ahí viene todo, les pondría captura de pantalla pero es la primera vez que hago un aporte y no sé cómo hacerle 😆😂

Bueno, aquí voy de nuevo, el anterior curso no lo terminé nunca, a pesar de intentarlo varias veces, espero en verdad poder terminar este y sobretodo aprender de verdad a programar y poder darle un futuro diferente a mi familia. gracias Platzi por tanto amor que se ve en cada clase.

Resumen

todos los archivos tiene una extensión.
ej: documento**.docx**, imagen**.jpg** página**.html**

HTML significa “HyperText Markup Languaje” y es el archivo que da estructura a una página web

Creamos una carpeta en nuestra computadora, y en el apartado de vista seleccionamos mostrar las extensiones de los archivos y mostrar elementos ocultos
Clic derecho > Nuevo > Documento de texto, renombramos el documento y cambiamos la extensión a HTML

Este documento lo podemos abrir en un bloc de njotas y empezar a agregar contenido usando las etiquetas de html

<strong>coloca el texto en negritas</strong>
<h1>Agrega un título</h1>

<> etiqueta de apertura
</> etiqueta de cierre

Crea tu primer sitio web



En el escritorio crear una nueva carpeta 📁, llámala programar.

Dentro de la carpeta crea un archivo 📄 con el nombre de pagina.html

Los archivos generalmente tienen la estructura nombre.extensión .
Ej. carta.docx, hoja.xls, pagina.html.
Lo que va después del . identifica el tipo de archivo (.docx→Word, .xls→Excel, .html→HTML).

Dentro del archivo 📄 página.html escribe el siguiente código para construir tu primera página HTML 😀 que lo puedes ver con el navegador.

<h1> Mi primer sitio web</h1>
Hola <strong>querida</strong> clase


HTML significa HyperText Markup Language ó Lenguaje de Marcado de texto, es la base en la que esta construido internet.

CSS significa Cascade Style Sheets u Hojas de Estilo en Cascada, es un lenguaje de declaración del estilo de diseño de una página web. Puede ir dentro de HTML o en un archivo externo.

JavaScript es el lenguaje de programación más usado. Con él se pueden construir varias cosas.

Por dentro todos los archivos son textos organizados de distintas formas.

ya entendi html, y no es un lenguaje de programacion, sino un lenguaje de etiquetas

Les recomiendo Visual Studio Code en lugar de Atom es un editor de código muy intuitivo y amigable.
https://code.visualstudio.com/

si por casualidad estas en linux específicamente en ubuntu puedes crear una carpeta usando la terminal con el comando “mkdir” y escribes el nombre que quieras ponerle y para entrar en ella escribí “cd” nombre" y para crear un archivo html escribes “touch” miPagina.html

Para los que tienen windows 7 y no saben como activar las extensiones de archivo, tienen que:

  1. abrir una carpeta
  2. Herramientas
  3. Opciones de carpeta
  4. Ver
  5. Configuracion Avanzada
  • BUSCAR Y DESACTIVAR:
  1. Ocultar las extensiones de archivo.

Apuntes:

  • Estructura de un archivo:
    archivo.extension
    Lo que va antes del punto es el nombre y lo que va despues del punto es el tipo de archivo.

  • HTML: Hyper Text Markeup Language (Lenguaje de etiquetas de Hipertexto). Estructura la informacion que vemos en una pagina web.

  • CSS: Lenguaje de declaracion del estilo de diseño de una pagina web. (Hojas de estilo en cascada)

  • JavaScript: Lenguaje de Programacion.

  • Para colocar un texto en negritas en HTML: <strong>querida</strong>

  • Lo que va dentro de los signos mayor que (>) y menor que (<) son etiquetas.

  • Para colocar un titulo en HTML:
    <h1>Mi primer sitio web</h1>

-------------------
Clase 3:
-------------------

Los archivos en todas las computadoras tienen más o menos la misma estructura. Tienen un nombre, un punto “.” y una extensión.
.
archivo.extensión
.
carta.docx
hoja.xls
pagina.html
.
HTML significa Lenguaje de Etiquetas de Hipertexto (HyperText Markup Language) y es el lenguaje sobre el que está construido Internet y es el lenguaje sobre el que vamos a aprender.
.
HTML es el formato que engloba otras tecnologías que nos permiten usar sitios web.
.
HTML - CSS - JavaScript
.
Lo que pasa es que por defecto la extensión no se ve, pero esto puede mostrarse si en el Explorador de Windows activamos:
.
Vista - Extensiones de nombre de archivos
Vista - Elementos ocultos
.
Creamos un nuevo documento de texto y lo llamamos página.html
.
Abrimos el archivo recién creado con el bloc de notas y escribimos ahí dentro:
.
Hola querida clase
.
Guardamos el documento y lo abrimos en el navegador. Se mostrará el mensaje.
.
También podemos escribir:
.
<h1>Mi primer sitio web</h1>
Hola <strong>querida</strong> clase.

HTML:

  • HiperText Markup Language (Lenguaje de Marcado de Hipertexto).
  • Estructura la información del documento.
  • Es el mismo tipo de archivo que un archivo de texto plano.
  • Su extensión es .html

CSS:

  • Cascading Style Sheets (Lenguaje de Hojas de Estilo en Cascada).
  • Da apariencia y maneja todo lo relacionado a la parte visual a los elementos de HTML.
  • Es el mismo tipo de archivo que un archivo de texto plano.
  • Su extensión es .css

JavaScript:

  • Lenguaje de Programación.
  • Hace que las páginas sean dinámicas.
  • JavaScript es realmente interactividad y es realmente programación.
  • Es el mismo tipo de archivo que un archivo de texto plano.
  • Su extensión es .js

Quiero compartir con todos ustedes un proyecto diseñado y programado por mí, es una Documentación Técnica de HTML5. Donde explico con teorías y con ejemplos el lenguaje de HTML. Espero que sea de mucha utilidad y de mucho interés. 💚 documentacion-html5.tech

si eres nuevo en este maravilloso mundo y quieres tener nociones básicas sobre todo lo que habla Freddy al inicio acerca de las carpetas, quizá te sea útil el curso de Prework de Windows, lo encuentras aquí: CursoPrework

hace un mes empece el curso de programación básica y ya lanzaron otro gratis.
<h1>Amo Platzi</h1>

Like si amas a Freddy 😄

Waooo! estoy empezando en este mundo y veo lo increíble que es!

Muchas gracias Platzi por estos aportes.

Saludos,
Ana

💡 Como recomendación a todos. NO usen Atom. Está descontinuado y ya no tiene soporte. Pueden elegir el editor de texto que gusten. Pero, mi recomendación personal sin duda es Visual Studio Code.
 

 
Si quieren descargarlo, pueden hacerlo para:

  • Windows 8, 10 y 11.
  • Debian, Ubuntu, Red Hat, Fedora y SUSE.
  • MacOS 10.11+.

 
Desde aquí. 👇
 

https://code.visualstudio.com/download

Hola.

Soy nuevon en esto y quiero continuar, alguien me podria explicar por que me pasa esto y no se ve como el ejercicio, estoy en sistema MCOS. Gracias.

Bueno, después de meses me he decidido a cambiar de carrera. Me voy de contaduría pública a ingenieria en software… Con mucho miedo, tuve que enfrentar los comentarios de mi familia, al principio nada agradables porque a mis 28 años y casi media carrera de contabilidad… como se me ocurre cambiar de carrera. Bueno, me faltaban poco mas de 2 años para terminar asi que les dije, que preferia perder 2 años de carrera a perder 4, y que los dos que me faltarian, era mejor aprovecharlos en aprender algo que me llena y me hace feliz aun con sus dificultades, es algo que disfruto muchisimo. Espero en la universidad me den el cambio. NUNCA PAREN DE APRENDER. 😍

En mi experiencia considero que el primer contacto con la programación es muy importante debido a que puede gustarte o no, en este caso Fredy lo hace tan agradable y especial que esa primera impresión te deja con ganas de seguir aprendiendo 💚🙌

Buenas tardes. Soy JORGE IVAN DE LOS RIOS CASTAÑO. Me gustaría aprender a programar y por lo que he visto es muy fácil con ustedes. Muchas gracias por la oportunidad.

programar es divertido

Gracias Freddy egrese hace 2 años de la carrera de ingeniería en informática, pero siento que aún me falta mucho por aprender. Con todo el ánimo para ser mejor cada día!

Llevaba bastante tiempo por motivos de trabajo sin poderme parar a estudiar. Y quiero felicitar a todo el equipo de Platzi porque la evolución que habéis tenido en los vídeos de este nuevo curso es increíble. Cada día “mejorandola” 💪🏼

👉Aprender HTML, CSS y JavaScript es fundamental. Por eso es recomendable no correr demasiado rápido mientras intentas dominarlo.

🧐Mientras mejor afiances tus conocimientos de estas tres tecnologías en tu primer intento, no tendrás que volver al principio tantas veces a repasar lo que debiste haber aprendido bien.

🥇En esta carrera no debes llegar de primero, lo importante es llegar. Te aseguro que si corres demasiado rápido no serás de los primeros, es muy probable que tardes mucho más.

Excelente edición! hace que la comprensión sea más fácil! muy didáctico!

Les doy una sugerencia que funciona como el blog de notas o notepad en ingles y se llama Notepad++. Lo pueden ubicar para descargar e instalar en https://notepad-plus-plus.org/downloads/ y descargan la ultima version. Espero que les pueda ayudar…

Realmente lo máximo este curso.

Es excelente esta actualizacion, ya habia tomado la versión antigua del curso, pero para repasar y tener mejores bases, vuelvo a aqui, con una versión de Freddy mejorado.

esto es oro puro

Freddy hace ver la programación web de una manera muy simple, así cualquiera puede aprender.

Estoy aprendiendo con MAC y me siento super perdida. 😦

Literal no se ABOSOLUTAMENTE NADA de esto jaja, pero me llama mucho la atención la programación porque me encantan los video juegos, pero me da miedo por como se ve todo. Espero de aquí a un año o menos, aprender como lo han hecho mucho de ustedes, es super bonito ver el entusiasmo de los maestros al explicar y de los alumnos dejando comentarios con grandes aportes. ANIMOS para todos :3

Si es divertido LOL.

Hola! Es importante esta clase. Todo aquel que este iniciando estudios de programación, debe diferenciar nombre archivo, extensión del archivo, como se maneja la ruta dentro del sistema operativo. Muy importante

Un archivo siempre está acompañado de una extensión.

  • Ej: archivo.extension
    carta.docx (Documento de Word)
    hoja.xls (Hoja de calculo Excel)
    pagina.html (Pagina web)
    Las letras que siguen después del punto son las que van a identificar qué tipo de archivo será.
  • HTML (Hyper Text Markup Language) es el lenguaje sobre el cual está construido internet. Este formato engloba otras tecnologías que se pueden utilizar en una página web. Por ejemplo, cuando visualizamos una imagen (.jpg) o un gif (.gif). Este lenguaje se encarga de estructurar toda la información que podemos ver en un sitio web.
  • CSS es un lenguaje de declaración del estilo de diseño de una página web.
  • JavaScript es el lenguaje de programación más utilizado.
  • Para empezar a diseñar nuestro primer sitio web deberemos crear un documento de texto (.txt). En este mismo se encontrará toda la información que va a componer el sitio. Luego cambiaremos su formato de origen, modificando el nombre del archivo de texto, reemplazando .txt por .html. De esta manera, ya podremos abrir nuestro archivo con cualquier navegador.
  • Para modificar el contenido de una página web se utilizan etiquetas (operaciones dentro de los signos “mayor que” y “menor que”: <etiqueta>contenido</etiqueta>
  • Para modificar la fuente de nuestra página web, por ejemplo, con negrita, deberemos utilizar la siguiente operación:
    Hola <strong>querida</strong> clase.
  • Para agregar un título deberemos ejecutar la siguiente operación:
    <h1>Mi primer sitio web</h1>

Archivos

Los archivos en todas las computadoras tienen estructuras, es decir, tienen más o menos la siguiente estructura.

Nombre del archivo → punto → extensión
.
Por ejemplo, cuando tienes un archivo abierto en Word, tenemos el “nombre del archivo”, un “punto” y la “extensión”.

Cuando tienes una hoja de cálculo de Excel, tenemos “mitrabajo.xlsx”, y cuando creamos una página web, sea o no lo correcto, se crean así:

paginaweb → punto → html = paginaweb.html

Las letras que van después del punto identifican el tipo de archivo, como por ejemplo “.html” es un archivo de página web, “.xlsx” es un archivo de Excel y “.docx” es un archivo de Word.

Definitivamente necesitaba esté curso. es muy bueno, he aprendido mas aqui que en la universidad 😄
#nuncaParesDeAprender

Me parece interesante el modo de enseñar pues se hace sencillo entender para alquien que recién empieza en programación.

holaaa que lindas explicacion " te ameee " jajajay las preguntas me ayudan un montos. hermoso curso!!!

ufff mi compu no se xq no me salia para ver la extension del archivo, pero me meti por otro lado y al fin logré que me saliera en negrita…paciencia que soy una señora mayor, jajaja

En qué software hacen esas presentaciones tan geniales, tan dinámicas usando el ✏️?

¿Consideran ustedes que los aportes deben ir acorde al nivel del curso? Yo estaba haciendo el curso anterior y sin duda me sorprendió la calidad de proyectos de algunos estudiantes, pero en vez de frustrarme lo que hice fue leer sus códigos (la mayoría los compartían) e intentar entenderlos, aún estoy en ese proceso y sin duda siento la frustración que genera un nuevo aprendizaje, pero sin duda es una buena señal porque es un dolor positivo, similar a cuando haces ejercicio...

Comando para abrir archivo en google Chrome
Ctrl+O

Comandos para block de notas

  1. Ctrl +O
    Open a previously saved note
  2. Ctrl + S
    Save/Save As
  3. Ctrl + N
    Open a New Blank Page
  4. Ctrl + P
    Open Print
  5. Ctrl + Z
    Undo
  6. Ctrl + X
    Cut
  7. Ctrl + V
    Paste
  8. Ctrl + C
    Copy
  9. Ctrl + F
    Open Find
  • Allows you to search for a certain word/words in your note
  • Type in the word/words you are looking for and Click on Find Next
  1. Ctrl + H
    Open Replace

HTML
<html>
<head>
<title>Aprender</title>
</head>
<body>

Contenido

</body>
</html>

Comparto unos iconos que se me hicieron mas representativos para saber el tipo de extensión y sobre todo a que programa va dirigido, aunque hay muchos mas dependiendo de la paquetería existente en tu computadora o internet.

Tengo MAC 😦

Estaba en la mitad del curso anterior de programación básica, pero ahora que inicié este creo que lo mejor sí es volver a empezar para reforzar y aprender de este que está más reciente.

Gracias a los COMENTARIOS pude resolver mi duda. Increíble todo esto. Gracias Freddy.

Tenia problemas para abrir el archivo en el navegador, pero leyendo las preguntas anteriores pude resolverlo. Gran comunidad!!

CLASE 1: UNA VARIABLE VA SIN COMILLAS, UN PARAMETRO VA ENCOMILLADO Y ES UNA PALABRA O SERIE DE PALABRA, STRING

Muy interesante.
Saludos desde Peru Freddy Vega.

Curioso, esto me está resultando muy fácil, pero estoy esperando el momento en el que se complique… Creo que Freddy es excelente maestro.

<h1>Aprendiendo con Platzi</h1>

la verdad si esta es la metodologia de enseñanza que se entienda y se explique paso a paso esta plataforma es la mia. gracias ing freddy vega.

Los que están desde Mac y el formato no les funciona, deben revisar dos cosas antes de comenzar:
Deben abrir el programa e ir a “TextEdit” (esquina superior izquierda, al lado de la manzana de Apple)

Dar clic en “Preferences”. Ahí estarán en “New Document”, dar clic en el espacio de “Format” - “Plain Text”.
Ir a “Open and Save” y dar clic en “Display HTML files as HTML code instead of formatted text”.
¡Y listo! Funciona.

Si tienen alguna duda adicional revisen el siguiente link:
https://computers.tutsplus.com/es/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786

archivo_.extensión_
carta_.docx_
hoja_.xls_
pagina_.html_

HTML=
Hyper
Text
Markup
Language
CSS
Lenguaje de diseño de una página web, hojas de estilo en cascada.
JavaScript
Lenguaje de programación mas usado en el 🌏.

Pueden usar control o como atajo para abir directamente un archivo.

Te amo Freddy

…Se pueden llamar patiko! 😃

Todo el team de PLatzi se lleva los likes jejejeje

Resumiendo un poco. Se puede abrir los archivos en notas ya que la mayoria contiene es texto pero en extensiones diferentes. Con HTML se puede permite la utilizacion de sitios web ya que SE construyen con él. CSS Les otorga el estilo y diseño a dichas paginas Con JavaScript se realizan un monton de cosas ya que es el lenguaje que mas se usa, mas que Todo en desarrollo web .

HTML: es como una casita donde pueden vivir otras tecnologias. y tambien va ser el quien estructura nuestra informacion .😊

Excelente clase!

Es muy importante, en el camino de programación , entender como funcionan las carpetas (Por cierto, en mac y linux se les cponoce como directorios). porque visualmente parecen eso, carpetas, pero en verdad es la forma de organizar la información. Es como el nombre completo que recibe el archivo.

Me explico, cuando creo una carpeta y creo un archivo que se llame sebas.txt, lo que pasa por debajo no es que sebas este en esa carpeta, sino que el nombre completo de sebas es /user/carpeta/sebas.txt

Este concepto será muy util para aprender mas adelante a mover archivos entre carpetas con programación.

Las extensiones son para que la computadora distinga el archivo.

Muy buen profesor. GRACIAS!

**PROGRAMAR: ** Controlar el flujo de acciones que pcurren dentro de una computadora.

La verdad soy estudiante universitario de programación Decidí tomar ésta gran oportunidad para sí aprender prácticamente sobre las tendencias tecnológicas del momento, y no un conjunto de conocimientos teóricos (universitarios tradicional)… Freddy Vega… Veremos que nos traes con tú gran talento!

exclente actualizacion, platzi siempre a la vanguardia

es brutal la mejora de este curso en comparación al antiguo, la información, los slides, la estructura del curso en general, solo llevo dos clases y ya me enganché!

Espero que los que vean este curso se animen a entrar a este ecosistema tan genial que es programar. ANIMO

Hola, buenas tardes!!! Cuando abro el archivo no me toma los símbolos de mayor y menor que, me aparecen luego como signos de interrogación… Podrían ayudarme por favor, para saber que estoy haciendo mal…

Me es. Uy difícil programar🥺

  • “Las letras que van después del punto identifican el tipo de archivo”

  • HTML (Hyper Text Markup Languaje)

  • Siempre que abras signos de mayor que y menor que tienes que cerrarlos.

  • para colocar negrita a las palabras escribes la etiqueta <strong> a ambos lados de la palabra o frase y la etiqueta de la derecha (el cierre. Agregas un** /** )

Estudio ingeniería de sistemas computacionales y trabajo por mi mismo para poder estudiar, sin embargo en una situación laboral tan complicada uno agradece bastante el haber conocido a platzi hace 3 años y hoy poder ser parte de la comunidad que se educa y nunca quiere parar de aprender

jajja q nota

si ya que la tecnología esta siendo fundamental en nuestras vidas y aprender a programarla es utilizarla de una manera provechosa
si ya que esto es lo que maneja la información de los grandes programas que son esenciales para la vida en la actualidad

Para los usuarios de Mac aca les dejo los pasos para crear su archivo de texto con extensión de HTML

Un archivo es un objeto en una computadora que almacena datos, información, configuraciones o comandos utilizados con un programa de computadora. En una computadora hay tres tipos de archivos, archivos de aplicación, archivos de datos y archivos de sistema.
Una extensión, es la serie de caracteres después de un punto que indica el tipo de archivo .

Hola recién estoy empezando en el mundo de la programación, siempre me gusto pero nunca pude por el motivo de que todos los cursos que encontraba había que pagar, pero hace dos días gracias a tik tok vi que una chica estaba estudiando programacion aquí y ella dijo que era gratis, algunos cursos obvio pero que para empezar era un gran avance y lo primero que hice fue ir hasta mi pc, prenderla y crearme un perfil y acá estamos en la 3er clase y continuando

Estoy amando la programación, tengo más de 40 años de edad y no pensé que fuera capaz de conseguir entender tan rápido

Al parecer la programación es más fácil de lo que pensaba. Nota. Siempre seguir las reglas (espacios, signos y símbolos, suprema ente importante)

HTML es un lenguaje que interpreta el navegador web para mostrar los sitios o aplicaciones web tal y como estamos acostumbrados.

Aun siendo ingeniero de sistemas, estoy consciente de que la programación es como las matemáticas: hay que practicar hasta perfeccionar y aunque le pongan un lenguaje diferente, desde que funciona la misma lógica, no es difícil de acoplarse con las reglas que maneje cada lenguaje; con humildad digo que falta mucho por aprender y gracias a Platzi por la oportunidad de poder afianzar estos conocimientos tan importantes para comprender la programación con la mejor disposición.