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: 鈥渓as 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 鈥淗yperText 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鈫扺ord, .xls鈫扙xcel, .html鈫扝TML).

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 鈥渕kdir鈥 y escribes el nombre que quieras ponerle y para entrar en ella escrib铆 鈥渃d鈥 nombre" y para crear un archivo html escribes 鈥渢ouch鈥 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 鈥渕ejorandola鈥 馃挭馃徏

馃憠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 鈥渕ayor que鈥 y 鈥渕enor 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 鈥渘ombre del archivo鈥, un 鈥減unto鈥 y la 鈥渆xtensi贸n鈥.

Cuando tienes una hoja de c谩lculo de Excel, tenemos 鈥渕itrabajo.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鈥aciencia 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 鈥淭extEdit鈥 (esquina superior izquierda, al lado de la manzana de Apple)

Dar clic en 鈥淧references鈥. Ah铆 estar谩n en 鈥淣ew Document鈥, dar clic en el espacio de 鈥淔ormat鈥 - 鈥淧lain Text鈥.
Ir a 鈥淥pen and Save鈥 y dar clic en 鈥淒isplay 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

鈥e 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馃ズ

  • 鈥淟as 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.