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?

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
4H
55M
52S

Crea tu primer sitio web

3/84
Recursos
Transcripci贸n

Un sitio web funciona correctamente gracias a la participaci贸n de diversos tipos de archivos. Por lo tanto, antes de empezar a crear nuestro primer sitio web debemos repasar un concepto fundamental relacionado con la estructura de los archivos.

Aunque en esta clase generaremos un solo archivo para lanzar nuestro primer sitio web, a lo largo del curso necesitar谩s crear otros tipos de archivos para su correcto funcionamiento.

Estructura de un archivo

Se trata de uno de los conceptos m谩s f谩ciles de asimilar en el universo de los sistemas operativos. Nada m谩s debes recordar alguno de tantos archivos que has creado desde que usas un computador.

Es muy probable que hayas pensado que carta.docx o dibujo.jpg eran, simplemente, nombres de archivos. Resulta que en esa descripci贸n observamos la estructura de un archivo.

Nombre

Debes tener claro que nombre es, apenas, una parte de la estructura de un archivo.

Los nombres son personalizados y descriptivos. Solo en algunos casos deber谩s asignar nombres predefinidos para que sean le铆dos autom谩ticamente, como, por ejemplo, cuando produces un sitio web. La p谩gina principal, por defecto, debe llamarse index.html.

Al asignar nombres a los archivos, debemos tener en cuenta una recomendaci贸n imprescindible como hispanohablantes: no utilizar caracteres especiales como tildes, comas o la e帽e. Tampoco se deben emplear s铆mbolos como &, $, %, !, o ". Por ejemplo, si debes crear una presentaci贸n en slides para una fecha especial, es mejor que definas el nombre de la siguiente manera: diaDelNino.pptx

Tal como puedes darte cuenta en el ejemplo anterior, no uso ni tilde ni la e帽e. Adem谩s, tambi茅n debiste haber notado que no he dejado ning煤n espacio en el medio. En cambio, he utilizado letras may煤sculas.

Punto (.)

Por m谩s diminuto que nos parezca, el punto es un elemento importante dentro de la estructura de un archivo.

Este car谩cter est谩 presente en las estructuras de archivos de todos los sistemas operativos. Tanto en Windows como en Mac, Linux, incluso, en Android se usa el punto despu茅s del nombre y antes de la extensi贸n.

Extensi贸n

La extensi贸n de un archivo es el componente que nos permite distinguirlo antes de ejecutarlo. Por ejemplo, si la extensi贸n es pdf o mp4, sabemos que el primero es un documento y que el segundo es un video. Gracias a la extensi贸n conocemos anticipadamente qu茅 aplicaci贸n ejecutar谩 el archivo.

Para el prop贸sito del presente curso, tendremos en cuenta que un navegador como Chrome lee, entre otros archivos, aquellos cuya extensi贸n es html. Por esta raz贸n, el primer archivo que crearemos para lanzar un sitio web ser谩 uno que termine en .html. Pero, antes de todo, es necesario conocer acerca de esta tecnolog铆a.

驴Qu茅 es HTML?

HTML es un lenguaje de marcado o de etiquetas. Gracias a las etiquetas escritas dentro del archivo .html, puedes ver esta p谩gina tal y como est谩. Las etiquetas html son, algo as铆, como instrucciones que el navegador debe decodificar. Viene del ingl茅s HyperText Markup Language.

Las traducciones al espa帽ol tienen leves variaciones. Algunos le llaman 鈥lenguaje de etiquetas鈥 o 鈥marcas de hipertexto鈥. Otros, simplemente, 鈥lenguaje de marcado鈥. Un archivo con extensi贸n HTML contiene texto plano. HTML no es un archivo de texto enriquecido como los que producimos en editores como Microsoft Word. Al crear un archivo HTML no podemos formatear su texto con subrayado o con negrita o con diferentes colores.

En este punto ya te habr谩s preguntado, 驴por qu茅 veo este texto en negrita y en cursiva en el navegador que solo lee archivos HTML, los cuales son archivos de texto plano?. No te preocupes que no se trata de un enga帽o, es una buena pregunta.

La versi贸n actual de HTML incorpora m谩s de un centenar de etiquetas. En este curso utilizaremos algunas de las que m谩s se implementan en un sitio web.

Configurando mi sistema operativo en modo profesional

Ahora que ya sabemos lo importante que son las extensiones, estas deben estar siempre visibles en nuestro sistema operativo. Adem谩s, en el entorno de la programaci贸n, es una buena pr谩ctica tener a la vista las extensiones de los archivos que est谩n en nuestro computador.

Por eso vamos a proceder a realizar la primera actividad de esta clase: activar la funci贸n de Mostrar las extensiones de los archivos en tu sistema operativo. Esta es una tarea muy sencilla, aunque var铆a de acuerdo a la versi贸n de tu sistema operativo. Pero si trabajas en una versi贸n reciente, el proceso es, a煤n, m谩s sencillo.

Actividad de la clase

Despu茅s de que hayas realizado la tarea del paso anterior, realiza lo siguiente:

  1. Crea la carpeta programar en el escritorio o en la unidad de tu preferencia y 谩brela.
  2. Haz clic secundario, selecciona Nuevo, luego Documento de texto. Borra todo el texto que te aparece por defecto, es decir el nombre del archivo, el punto y la extensi贸n. Escribe pagina.html (recuerda que no se deben usar tildes).
  3. Haz clic secundario sobre el archivo pagina.html, luego en Abrir con y selecciona Bloc de notas. No debes abrir el archivo haciendo doble clic. Eso lo haremos despu茅s. Al hacer doble clic principal, seguramente el archivo lo abra el navegador predeterminado en tu sistema operativo que puede ser Chrome, Edge o Mozilla. En cualquiera de estos solo ver谩s una p谩gina en blanco, puesto que todav铆a no has ingresado contenido al archivo pagina.html.
  4. Despu茅s de abrir el archivo en el Bloc de notas, escribe las siguientes l铆neas de c贸digo:
<h1>Mi primer sitio web</h1>
Hola <strong>querida</strong> clase

En este ejemplo observa atentamente aquello que est谩 entre los signos de menor que (<) y mayor que (>). Tanto los signos como lo que est谩 dentro de ellos, conforman una etiqueta.

  1. Ahora guarda los cambios, vuelve a la carpeta programar y abre el archivo pagina.html haciendo doble clic.

As铆 como est谩s viendo tu archivo, ya no en el Bloc de notas, sino en el navegador, es como puedes comprender poco a poco la manera en que funcionan las etiquetas html.

En el navegador no observas los signos de menor que y mayor que ni lo que est谩 dentro de estos. Lo que s铆 ves es texto que tiene un mayor tama帽o que otro. Esto se debe a que la etiqueta h1 viene de Header o t铆tulo o encabezado. El 1 se relaciona con la jerarqu铆a del t铆tulo. Si deseas ver subt铆tulos en tu sitio web, debes insertar la etiqueta h2. Ten en cuenta que html tiene hasta la etiqueta h6.

Contin煤a viendo la siguiente clase de este curso para que conozcas muchas m谩s etiquetas html incluyendo las que debes insertar obligatoriamente en tu sitio web.

Contribuci贸n realizada por Jefferson Benavides

Aportes 437

Preguntas 345

Ordenar por:

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

o inicia sesi贸n.

鈽 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

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

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

Est谩 churris el Freddy 馃槃 鈾

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

  • 驴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
Este curso se actualiz贸 xq en el otro sal铆a Freddy sin barbita..

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.

Tom茅 el anterior curso de programaci贸n a煤n asi tomar茅 este para seguir aprendiendo 馃挭馃挌

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 馃槅馃槀

Like si amas a Freddy 馃槃

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

Pa la proxima tambien se debe explicar a lo que usamos el sistema iOs

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.

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.

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

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.

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

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

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

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

No tengo conocimientos de programaci贸n,.pero de un tiempo para ac谩 me ha crecido internamente el querer aprender, soy una persona de 46 a帽os, que quiere algo distinto para su vida, no tengo una mala vida y me considero inteligente y espero que con estos cursos pueda lograr ese cambio tan anhelado, gracias platzi.
Adem谩s estoy recomendado su curso y plataforma a mis amigos cercanos

Actualmente no cuento con una forma de ingreso para pagar si quiera mensualmente Platzi y aprender. En este curso de manera autodidacta me estoy nutriendo un mont贸n, quiero agradecer por ello鈥
Espero seguir creciendo junto a Platzi馃挌

馃挕 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

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

uuufffffff qu茅 emoci贸n

Tengo casi 35 a帽os, un titulo en Ingenieria financiera, cursos y experiencia en marketing digital. Y ac谩 estoy鈥 luchando como muchos por un mejor futuro para mi familia, estudiando nuevamente en las noches. Pensaba que para estas alturas en mi vida ya todo estar铆a resuelto y no necesitar铆a planes. Hoy con orgullo puedo decir que comenc茅 un plan de 1 a帽o para capacitarme en programaci贸n, gracias a Platzi y sobre todo a Freddy por crear una plataforma tan sencilla y con tanto contenido, de verdad gracias. Le dan esperanza a tantos como yo que aun con miedo deciden tomar nuevo rumbo. Suerte a todos los que comienzan y felicidades a los que ya son parte de este mundo. Se que cost贸 mucho pero seguramente valdr谩 cada segundo.

ME GUSTO MUCHO ESTO Y LO COMPARTO

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

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

Buenas noches, voy viendo 3 videos de este primer curso y la verdad que esta muy bien explicado, porque en mi caso, no se nada de programaci贸n, pero el modo de transmitir el contenido es muy bueno. transmite entuciasmo. me gusta

Estoy aprendiendo con MAC y me siento super perdida. 馃槮

Tengo una mac y empieza a complicarse todo

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

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

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>

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.

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

HTML:
M谩s que un lenguaje, es la estructura del archivo sobre el cual trabajamos.
Extensi贸n: archivo.html
.
CSS (Cascading Style Sheets):
Archivo de texto plano que se encarga de los estilos del archivo
(tipograf铆a, fondo, posici贸n del texto, t铆tulo etc.)
Extensi贸n: archivo.css
.
Javascript:
Es el lenguaje de programaci贸n que te permite interactividad.
Extensi贸n: archivo.js

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

Por favor mira que sea HTML鈥 Estuve media hora fallando porque puse 鈥淗TLM鈥

Apuntes de la clase, espero les guste people 馃槃

  • Los archivos en todas las computadoras tienen un tipo distinto de estructura:

    • archivo. extensi贸n
    • carta.docx
    • hoja.xls

    pagina.html

    HTML (Hyper Text Markup Language) es el leguaje sobre el cual esta construido internet

    • Es el formato que engloba otras tecnolog铆as que nos permiten usar sitios web.
    • Cuando vemos una imagen estamos usando una tecnolog铆a llamada JPG o PNG, o gift.

    CSS

    Es un lenguaje no necesariamente de programaci贸n pero es un lenguaje de declaraci贸n del estilo de dise帽o de una pagina web.

    • Se le dice hojas de estilo en cascada o (Cascade Style Sheets).
    • El CSS puede ir dentro del HTML o a un lado.

    JavaScript

    Es el de programaci贸n m谩s usado en el planeta Tierra.

    • Para poder programar con JS depende de un lenguaje del el cual se encarga de estructurar la informaci贸n que nosotros vemos. Ese leguaje se llama HTML

    <aside>
    馃挕 HTML define la estructura de una pagina, CSS el dise帽o de la interfaz y JS se encarga de las funcionalidades.

    </aside>

<<h1>Mi primer sitio web</h1>
Hola <strong>mundo soy peter</strong>> 

yo tengo 9 a帽os y aprendo programaci贸n

Gracias. Esto se est谩 poniendo interesante.
Hay cositas que voy ampliando a medida que avanza el curso. Por ejemplo: Sab铆a de un archivo y su extensi贸n, pero no sab铆a que pod铆amos verlo como tal.
As铆 que a seguir avanzando. La pr谩ctica hace al maestro.

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 es divertido LOL.

Del minuto 0 hasta el minuto 6:40鈴 Tratamos las extensiones y las modificamos (Todas las extesiones pueden llegar a modificarse y en el NotePad.) Por que pasa eso馃? Esto pasa debido a que computadora lee archivos de texto por que en si lo que escribimos es Texto.馃摑馃槉 Este es un ejemplo de Codigo que realize en la clase: <h1>Programacion Basica papeto lendo hermoso bello chulo</h1> <p>Estoy aprendiendo a programar</p> <h2>Te gusta programar?</h2>

Tengo una Chromebook y no me permite crear archivos asi de facil, pero encontre una solucion la cual es abrir el programa 鈥渢ext鈥 que viene el bloc de notas de las Chromebook, una vez abierto le damos en 鈥済uardar鈥 (si no lo ven tienen que abrir el menu, son las tres rayas que se encuentran en la esquina superior izquierda del prgrama) o usamos la combinacion de teclas 鈥渃trl + s鈥 nos dirigimos a la carpeta donde deseamos guardar el archivo (si me permite crear carpetas) y muy importante darle un nombre al archivo y agregar la extension deseada en este caso html

Es lo que necesito en mi vida. Siento que en el colegio se me hizo f谩cil, esta habilidad tengo que explotarla!

驴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...

gracias profe Fredy excelente tutorial.

SOY NUEVA ESTOY S脷PER INTERESADA 馃榿

La mejor de las suertes para las personas que estan empezando, y el mejor de los exitos para las personas que ya saben programar, yo empiezo apenas vamos pa lante!

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

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.

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.

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>

Bueno, despu茅s de 2 a帽os sin programar, quiero volver a retomarlo y esta vez en serio, ya que estos 煤ltimos a帽os me ha ido muy duro a mi y a mi familia econ贸micamente hablando鈥 Y ya me di cuenta que yo no sirvo para trabajar en una bodega o de almac茅n en almac茅n trabajando por un SMLV aqu铆 en Colombia. Solo espero esta vez SI tener la disciplina suficiente para seguir este curso, aprender a programar, NO quedarme como estudiante eterno y ejercerlo en un buen trabajo. Espero que por favor tambi茅n me puedan dar comentarios de 谩nimos, gracias.

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

Muchas gracias Platzi por estos aportes.

Saludos,
Ana

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鈥 馃挭馃徏

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.

en la universidad no lo entiendo pero aqui si

\

Mi primer sitio web\

Hola \querida\ clase


Refrescar y listo!!

los primeros videos me dejaron muy claro todo

隆Lo logr茅!
Aqu铆 la ayuda: https://platzi.com/comentario/3866759/

HTML es el lenguaje sobre el cual esta escrito Internet.

La etiqueta <strong></strong> nos permite colocar la letra en negrita.

La etiqueta <h1></h1> nos permite colocar un titulo a nuestra pagina.

3:40 | Para que sean visibles las extensiones de los archivos en Windows 11 se hace lo siguiente:

  • Clic en 鈥淰er鈥
  • Clic en 鈥淢ostrar鈥
  • Clic en 鈥淓xtensiones de nombre de archivo鈥
  • 鈥淟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** /** )

Deseo aprender, aprovechar茅 este curso al 100%

No pensaba que era tan facil crear una pagina ,estoy super motivado.Gracias Freddy

hasta ahora excelente y cada vez mas interesado en este teme

Es algo normal que al principio todo aparezca bastante complejo, pero si es muy interesante y a este punto me parece que si puede ser mas efectiva a medida que vamos prest谩ndole mas y mas atenci贸n

Por si alguien todav铆a tiene el problema de que no le funcione el archivo por tener el nombre 鈥減agina.html.txt鈥, lo que est谩 pasando es que la extensi贸n real del archivo es txt y no html, como se ve en el nombre del archivo. Esto se debe, por lo general, porque en Windows no configuraron la vista de las extensiones de nombres de archivos. Tambi茅n puede ser que s铆 hayan hecho dicha configuraci贸n, sin embargo escribieron el nombre completo del archivo en la parte izquierda del 鈥.txt鈥. Bueno, la soluci贸n es tan simple como borrar el 鈥.txt鈥 y dejar el archivo con el hombre 鈥減agina.html鈥. Espero haber podido ayudar, con una expilcaci贸n algo larga鈥

peque帽o aporte, los titulos del tipo <h1> cambian de tama帽o de mayor a menor cambiando en la etiqueta el numero desde 1 a 6

Excelente tarde, me est脿 pareciendo divertido. Me encuentro por aca debido a una recomendaci貌n de un amigo (quiero otra carrera), estoy a la expectativa de saber si muero o no en el camino del aprendizaje 馃槂

wuaooooooooo no sabia nada de esto me llamaba mucho la atencion y ahora ando super pegadisimo jajaja

Gracias por la clase. Por ahora empezamos bien, con cosas b谩sicas. Pero esto en cualquier momento sube de nivel.

holaaa soy esteban tengo 12 y esoty muy emocionado para aprender a programar 馃槂 buena suerteee

extensiones ejemplos

Como podr铆a aplicar estos pasos en una .Mac? Cree la carpeta y use un creador de texto, pero no me aparecer solo lo que escribo sino una cantidad de n煤meros y letras de dos l铆neas, gracias

hasta ahora me agrada el curso aprend铆 algo nuevo el profe explica muy bien muchas gracias
voy a seguir con el curso a ver que tal se me da la programaci贸n

Esto del html me recuerda cuando aproximadamente hace 10 a帽os personalizaba mi perfil de tumblr. Obviamente sin tener idea de que era todo esto, solo copiaba y pegaba c贸digos que encontraba por ah铆. Que bueno que ahora estoy viendo este curso para entender que era lo que hacia jajaja

me emocione cuando me sali贸 as铆 en el navegador, me gusta la simpleza con la que dice las cosas.

la universidad esta bien, pero es a煤n mejor no depender de un maestro para aprender, ser autodidacta es el camino al crecimiento. tambi茅n aprendan ingl茅s por favor y practicanlo diario