Platzi
Platzi

LA EDUCACI脫N ES UN REGALO 隆ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 15D : 22H : 24M : 34S

Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

El DOM: nuestro lugar de trabajo en la web

11

C贸mo funcionan Window y Document

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

HTML, CSS, JavaScript de verdad

5/37
Recursos

Los archivos HTML funciona con etiquetas, por ejemplo

Hola mam谩 **ya casi aprendo**

Todos los contenidos en HTML deber铆an estar dentro de una etiqueta, y todos los archivos HTML tienen esta estructura, c贸mo

<title>T铆tulo de la p谩gina</title>

Contenido de la p谩gina

La etiqueta que te permite escribir CSS dentro de HTML es <style>, se coloca dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se coloca antes de terminar el body.

Recuerda:

Los nombres de las variables tienen algunas reglas, c贸mo, no pueden tener espacio, debe empezar siempre con una letra, las min煤sculas y las may煤sculas importan.
Identaci贸n, tienes bloques de c贸digo, estos deben ir un poco a la derecha.
Los programadores pasan 80% de su tiempo leyendo c贸digo y 20% escribiendo c贸digo, por esto es importante seguir buenas pr谩cticas. Es importante ver las extensiones de los archivos.

Aportes 4992

Preguntas 1205

Ordenar por:

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

si escriben en google #ffffff les aparece una paleta de colores, donde les muestra el codigo hexagecimal del color que quieren.

me encanto, quisiera que muchos profesores universitarios tuvieras esa pasi贸n por su carrera, ese amor; saludos desde Venezuela

Comentarios:
HTML: <!-- Asi se escriben comentarios en HTML -->
CSS: /* Asi se escriben comentarios en CSS */
JS: // Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc... -->
  <meta charset="utf-8"/>
  <!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que
  se coloca para que las tildes sean reconocidas por el navegador, pero es una
  buena practica cerrarla, otros ejemplos: <br>"pasaria a esto"<br/>, etc... -->
  <title>Mi primer archivo HTML</title>
  <!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
   ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
  <style type="text/css"> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head */
  /* type="text/css" Esto es un atributo de la etiqueta */
  body
  {
    background-color: #AAAAFF;
    /* background-color es el atributo que cambia el color de fondo de tu pagina */
    color: white;
    /* Color es el atributo que cambia el color del texto de tu pagina */
    font-family: Helvetica;
    /* font-family es el atributo que cambia la fuente de tu pagina */
  }
  strong
  {
    background-color: #FFAAAA;
    /* Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff */
  }
  </style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <!-- <strong/> sirve para poner negrita -->
  <p>Esto es un parrafo</p>
  <!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
  por etiquetas, la mas sencilla es <p/> -->
  <script type="text/javascript"> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
    var $x = 1;
    // var declara una variable, como let o const //
    var _y = 2;
    // Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como 帽 o tildes) ni espacios.
    var Freddy_Vega1 = $x + _y;
    document.write("El valor de Z es " + Freddy_Vega1);
    // document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
  </script>
</body>
</html>

Muy importantes las reglas para nombrar variables en JavaScript:

  • No pueden empezar con n煤meros, s贸lo con letras
  • Se diferencian may煤sculas y min煤sculas
  • No se pueden utilizar caracteres "raros" como 帽 o tildes

馃惐鈥嶐煉 Para poner un texto en negrita podemos usar <strong> o <b>, la diferencia es que el primero se utiliza para hacer 茅nfasis en un texto (destacar en b煤squedas) y el otro simplemente para darle un aspecto visual.

Hola, para todos los nuevos que estamos aqu铆 y tenemos el error cuando empezamos a trabajar con la etiqueta <style>, (el body no nos cambiaba de color y teniamos que escribir todo manual y eso) despues de estar leyendo un poco y travesiando, he encontrado que el problema esta cuando nombramos el tipo de archivo.
Freddy nos dijo nombrarlo 鈥減rimero.html鈥, pues bien, le铆 que la ultima versi贸n de html es la versi贸n 5, asi que cuando vayan a nombrarlo nombreenlo con .html5
Y les va a funcionar. Esa es la soluci贸n. 馃槈

Freddy olvidaste mencionar lo de聽<meta charset="utf-8"/>


Que se coloca para que las tildes sean reconocidas por el navegador

Cuando instalas Atom, puedes hacer c贸digo m谩s r谩pido con Emmet, que es un complemento de Atom, Tan solo vas a File -> Setting -> + Install, digitas Emmet e instalas, luego reinicias Atom.聽

Luego lo pruebas escribiendo html:5 y seguido la tecla TAB y veras como se crea c贸digo m谩gicamente, luego as铆 para cada etiqueta, por ejemplo solo escribes "p" y luego TAB y ya te abre y cierra las etiquetas. Es m谩gico. 聽

Hola. Bueno este es mi resultado despu茅s de ver 鈥楬TML, CSS, JavaScript de verdad鈥

MicroResumen

  • Buenas Pr谩cticas => Son est谩ndares sobre la escritura de c贸digo, de tal manera que varios programadores puedan escribir e interpretar el c贸digo sin que les sea extra帽o su comprensi贸n.
  • Los programadores pasan entre el 80% y el 90% leyendo e interpretando c贸digo, y un 10% a 20% escribiendo c贸digo.
  • Identar C贸digo => Forma parte de las buenas pr谩cticas, ayuda a interpretar mas r谩pido el c贸digo organiz谩ndolo.
  • Todo lo que debe ejecutarse antes de cargar la p谩gina debe ser definido dentro de la etiqueta <Head></Head>.
  • Sintaxis => Son reglas de escritura de los lenguajes de programaci贸n, estas deben ser respetadas para que el c贸digo funcione correctamente.
  • Las variables pueden nombrarse tanto con palabras copo tambi茅n n煤meros, aunque existen ciertas restricciones como por ejemplo, deben ser escritos de la misma manera tanto al crearse como tambi茅n al utilizarse, ya que javascript as铆 como la gran mayor铆a de los lenguajes profesionales de programaci贸n, distingue las may煤sculas y las min煤sculas, si el nombre va a estar compuesto por dos palabras, estas deben ir unidas con gui贸n bajo ( _ ), si se va a utilizar n煤meros, estas no pueden ir al comienzo del nombre (ej: 2_Fredy) si pueden ser dentro de la estructura del nombre o al final del mismo(Fre2dy, Fredy_2).
  • Los programas son un 90% similares, y solo un 10% distintos, esta diferencia se debe a las reglas especiales que pueden contener las mismas.
  • Atributo de la etiqueta solo puede ser declarado en el inicio del mismo, mas no al final.

Espero les sirva

驴Por que no me cambia algunos colores en Atom? (posible soluci贸n):

1- En la parte inferior derecha del programa (Atom) aparece HTML y le das click.
2- Se habr茅 una ventana, en el buscador le pones H (el inicial de HTML) y dentro de las opciones aparece: HTML (go) y le das click.

No se si esto es correcto, pero me funciono.

los cr茅ditos le corresponden a este: https://platzi.com/comentario/913353/

  • HTML funciona con etiquetas.

  • IMPORTANTE: Si no guardas el archivo antes de que empiezes a programar el editor no te ayuda ni te coje los estilos.

  • Los programadores tienen que ver las extensiones, para ello:

Windows:
https://helpx.adobe.com/la/x-productkb/global/show-hidden-files-folders-extensions.html

Mac:
https://support.apple.com/kb/PH25381?locale=es_ES&viewlocale=es_ES

  • En HTML tienes etiquetas que significan cosas especiales y funcionan asi:

      <etiqueta>contenido</etiqueta>
    
      <strong>Hola Mama</strong>
    

Algunas etiquetas no tienen contenido por dentro, en estos casos no se le coloca una etiqueta de cierre si no:

	<etiqueta />

	<br /> (Esto es un salto de linea)

Es una buena practica colocarle / para se帽alar que esta vacia por dentro aunque no es necesario

Esta es la base de HTML, pero recuerda este es un lenguaje para escribir informacion pero no es un lenguaje de programacion

  • <strong> y <b> Sirven para poner negrita

  • Todos los contenidos en HTML deber铆an estar dentro de una etiqueta, la etiqueta mas facil para envolver un texto es un parrafo <p>

  • <p> Sirve para crear un parrafo

  • Asi se escriben comentarios:

HTML:
<!-- Asi se escriben comentarios en HTML -->

CSS:
/* Asi se escriben comentarios en CSS */

JS:
// Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

Para escribir comentarios mas rapido simplemente selecciona el texto que quieras que este en un comentario y pulsa CTRL + Tecla ?/

Tambien puedes usar un plugin de atom llamado docblockr:
Mas info: https://platzi.com/blog/plugins-de-atom-para-el-desarrollo-web/

  • Ejemplo de estructura basica de un archivo HTML:

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc鈥 -->
<meta charset=鈥渦tf-8鈥/>
<!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que se coloca para que las tildes sean reconocidas por el navegador, pero es una buena practica cerrarla, otros ejemplos: <br>鈥減asaria a esto鈥<br/>, etc鈥 -->
<title>Mi primer archivo HTML</title>
<!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
<style type=鈥渢ext/css鈥> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head /
/
type=鈥渢ext/css鈥 Esto es un atributo de la etiqueta style*/
body
{
background-color: #AAAAFF;
/* background-color es el atributo que cambia el color de fondo de tu pagina /
color: white;
/
Color es el atributo que cambia el color del texto de tu pagina /
font-family: Helvetica;
/
font-family es el atributo que cambia la fuente de tu pagina /
}
strong
{
background-color: #FFAAAA;
/
Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff /
/
Tambien puedes usar un plugin de Atom llamado color-picker https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/ */
}
</style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
<p>Hola <strong>mama ya casi</strong> aprendo</p>
<!-- <strong/> sirve para poner negrita al igual que <b/> -->
<p>Esto es un parrafo</p>
<!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
por etiquetas, la mas sencilla es <p/> -->
<script type=鈥渢ext/javascript鈥> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
var $x = 1;
// var declara una variable, como let o const //
var _y = 2;
// Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como 帽 o tildes) ni espacios.
var Freddy_Vega1 = $x + _y;
document.write("El valor de Z es " + Freddy_Vega1);
// document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
</script>
</body>
</html>

  • Identacion, es simplemen te una buena practica para los bloques de codigo, consiste en darle un tab a estos para focilitar su lectura

  • Los programadores pasan el 80% de su tiempo leyendo c贸digo y 20% escribiendo c贸digo, por esto es importante SEGUIR BUENAS PRACTICAS.

Hola puse el script al principio y antes del final del body y de todas formas cuando recargo la pagina me aparece primero el alerta y reci茅n cuando doy aceptar aparece el dise帽o de la pagina. No entiendo que hice mal? en ninguno de los dos casos muestra el dise帽o de la pagina

Por si alguien no encuentra estos simbolos en su teclado <>, pueden usar los comandos
"Alt+60" para <
鈥淎lt+62鈥 para >.

Co帽o mi primer d铆a en Platzi y no cre铆 poder aprender tanto <3聽

document.write("Hasta ahora estoy aprendiendo bien");

Todo genial. Para los que no les salen los colores en las etiquetas. Van a la parte inferior derecha y dna click en HTML (est谩 en may煤sculas) luego se abre una ventana y le dan en Auto Detect y listo, todas las etiquetas ser谩n con colores 馃憤

Aqui encontre una pagina con algunas etiquetas para los que gusten y quieran experimentar mas durante el curso.
http://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html

<DOCTYPE html>
<html> 
 <head>
 <title>mi primer archvo html</title>
<style>
 body
 {
   background-color: red;
   color: blue;
   font-family: helvetica;
  }
  strong
  {
  background-color: yellow;
  }
</style>
 </head>
  <body>
  <p> ME <strong>ENCANTA</strong> LA PIZZA
  <p> SI PIESAS <strong>QUE LA VIDA ES DURA RECUERDA QUE MAS DURA</strong>ES LA VERDURA<p>
  <script>
  alert("la pizza es super sabroza")
  var pizza= prompt("驴te gusta la pizza tambien?");
  var a = "me pizza"
  var b ="esta" 
  var c= "varata"  
  document.write(a+" "+b+" "+c);
  </script>
  </body>
</html>```

Apuntes

  • Las etiquetas <> significan cosas especiales

  • El cierre de las etiquetas lleva /

  • Todos los textos deben estar envueltos en una etiqueta

  • Las buenas pr谩cticas son est谩ndares para escribir c贸digo entendible

  • En <head> va todo lo que no se ve; lo que carga antes que toda la p谩gina

  • document.write permite escribir en el HTML

  • Los nombres de variable pueden ser casi con cualquier con letra o n煤mero, pero con reglas

  • En JS las may煤sculas y min煤sculas importan

Recomiendo los curso de google act铆vate te ense帽a html y css gratis.

Sitio donde encontraran etiquetas y su definici贸n

https://allthetags.com/

100%=90%+20%???

Excelente curso


Solo por aportar algo al curso, es v谩lido aclarar que <strong></strong> no es negrita, sem谩nticamente es hacer un 茅nfasis en algo. Podr铆an confundirse los nuevos estudiantes.

Windows y las extensiones

En Windows normalmente no se ven las extensiones de archivo.
La Soluci贸n es:

  1. Abrir el Explorador de Archivos.

  2. ir a Vista.

  3. Seleccionar Extensiones de nombre de archivo.

S铆ntaxis de HTML

  • Toda etiqueta HTML va entre s铆mbolos menos qu茅 y mayor qu茅. Ejemplo1.
  • Toda etiqueta HTML debe cerrarse con el s铆mbolo de Slash (/). Ejemplo2.

Reglas de las Variables en JavaScript

Reglas de las Variables:

  • Las variables no permiten espacios.
  • El primer car谩cter de una variable siempre tiene que ser una letra, no un n煤mero.
  • No se pueden usar signos raros como la o los acentos.
  • Las may煤sculas y min煤sculas no son indiferentes.

Buenas Pr谩cticas y Porcentajes

Buenas pr谩cticas: Es un est谩ndar para manejar el c贸digo para que cualquier programador pueda entenderlo f谩cilmente.

Los programadores pasan 80% de su tiempo leyendo c贸digo y solamente del 10% al 20% escribiendo c贸digo.

Los lenguajes son un 80% similares y un 10% al 20% diferentes.

Recordatorio: Recuerda guardar el archivo, si no, no el editor no te va a ayudar y el navegador no lo va a abrir.

A todos los nuevos compa帽eros les recomiendo Visual Studio Code en vez de Atom, es bastante mejor.

Si a alguien no le resalta algunos comandos (espec铆ficamente los de JS y CSS), deben cambiar el lenguaje a HTML (Go) en la parte de abajo

Yo tengo una pregunta que no s茅 si se resuelva en alguna parte posterior del curso, pero me gustar铆a saber para alguien que ya tiene bagaje en el mundo de la programaci贸n c贸mo organizar los diferentes comandos que se tienen por c贸digo, es decir, como creo una bibilioteca efectiva de comandos para cada c贸digo y no confundirme entre uno y otro. Cualquier respuesta es bien recibida!

escribo la etiqueta script al final de la etiqueta body pero a煤n as铆 el navegador me lee primero el script, 驴a que se debe?

freddycasateconmigo.png

Hola Buenas Noches.
Tengo una pregunta, estaba haciendo el ejercicio que iba desarrollando freddy, siempre se dispara primero el scrip no importa donde lo ponga(sea al principio de la etiqueta body o al finalizar la etiqueta body )

Reglas de c贸digo en Javascript

  • Una variable (var) no puede tener 2 palabras separadas con un espacio, debe ser 鈥渦nderscore鈥 o 鈥済uion bajo鈥 o 鈥渞ayita al piso鈥 馃槈 (_)
  • No iniciar el caracter de una variable con n煤mero, siempre debe iniciarse con una letra.
  • No puedes usar signos raros como: 脩 o tildes.
  • Las min煤sculas y las may煤sculas son diferentes.
  • Puedes iniciar un caracter de una variable con un (_) o ($) y no hay problema.

Si a alguno no le salen las ayudas de color de texto que brinda Atom, cambien en la parte inferior derecha, el HTML grammar a uno que diga** HTML con Tree-Sitter.**

No importa si coloco el alert al inicio o <body> o antes de acabar </body> el alert siempre carga primero que toda la p谩gina 馃槖


No se me resaltaron los comandos pero funciono bien todo

en este v铆deo aprend铆 lo de un semestre en la universidad :馃槙

Ya me siento programadora JAJAJA

Para todos los que no se les colorea el texto vayan a la parte inferior del programa y busquen 鈥淗TML鈥 denle click y luego seleccionen 鈥淎uto Detect鈥.
Un abrazo! 馃槈

Para los que estan usando Atom, podrian querer activar las lineas guia (Indent Guide)

  1. Vayan en la parte superior izquierda a donde dice 鈥淓dit鈥
  2. Denle un click en 鈥淧references鈥
  3. Otro click mas en donde dice 鈥<> Editor鈥
  4. Marcamos la casilla en donde dice 鈥淪how Indent Guide鈥

https://www.youtube.com/watch?v=nXPOStcUMyU

Buenas practicas: escribir c贸digo de manera que otros programadores lo puedan entender.
**Identacion: **Lo que esta dentro de un bloque de c贸digo se corre un poco a la derecha con la tacla tab del teclado.
Estilos: se ponen en un archivo aparte o dentro de la etiqueta head ya que en esta etiqueta esta todo lo que no se ve, esto se llama 鈥渕etadatos鈥.
Sintaxis: Reglas de los lenguajes de programaci贸n.
Etiquetas:
<strong></strong> = Negritas
<p></p> = P谩rrafo
<head></head> = Cabecera, siempre se encuentra despu茅s de la etiqueta html.
<title></title> = Para poner nombre al archivo en el navegador, la etiqueta title es la que usa google para mostrar las paginas en el buscador.
<body></body> = va dentro de esta etiqueta lo que se observa de manera visual en el navegador.
<style></style> = C贸digo que no es html este es css (c贸digo de estilos en cascada), ese te asigna a etiquetas especiales, id o clases, permite a帽adir dise帽os a ciertas etiquetas.
body{} = dentro de las llaves se crean atributos para dar dise帽o a la pagina, los atributos terminaran en 鈥;鈥.
<script></script> = para colocar JavaScript, la forma mas f谩cil de colocarlo es antes del cierre de la etiqueta body, ponerla al final es una buena opci贸n porque as铆 ya estar铆a cargado todo el dise帽o de la pagina.
document.write(""); = para escribir un mensaje con JavaScript.
var = son variables, el nombre de las variables pueden ser letras y n煤meros, opero estas no permiten espacios, para poner espacio se utiliza el under escope (_) es el guion bajo, no se puede poner un numero al inicio del nombre de la variable, no se pueden utilizar s铆mbolos 鈥渞aros鈥 y tiene que escribirse exactamente y no may煤sculas y la mandas a mandar en min煤sculas.
<!DOCTYPE html> = Es un est谩ndar de buenas practicas de HTML 5, esta etiqueta se encuentra antes de la etiqueta html.
<style type=鈥渢ext/css鈥> = Atributo de la etiqueta.
<script type=鈥渢ext/javascript鈥> = Atributo de la etiqueta.

Bueno que opinan pens茅 no lograrlo.

Para quienes no les funciona el auto-complete dentro de la etiqueta style, lo que deben de hacer es pulsar ctrl+shift+L y seleccionar HTML (Go) como lenguaje.
Esta opci贸n toma en cuenta que vas a escribir c贸digo css dentro de un archivo html, no es buena pr谩ctica, pero ahorita para ir aprendiendo est谩 bien hacerlo.

<html>
<head>
<title> FREDDY CRACK </title>
</head>
</html>

El SCRIPT SIEMPRE AL FINAL ! jaja ley !
Si en ATOM tienes problemas de que no se colorean ciertas palabras o etiquetas como body o strong, guarda el archivo y cierra el mismo y vuelve abrirlo y en autom谩tico se colorea.

a mi me aparece la alerta antes de cargar toda la pagina aunque la ponga justo antes de que cierre body (min 19:30)

Hola compa帽eros les comparto mi ejercicio.

Controles & Opciones que te facilitaran a vida:

Ctrl + S (Para guardar)
Ctrl + Mas (Para aumentar tama帽o)
Ctrl + - (Para disminuir espacio)

80% de tu tiempo dedicalo a
Leer codigo para entender

20% de tu tiempo dedicalo a crear y
Escribir tu propio codigo

Para activar el color de body debajo de <style> solo hace falta en Atom Ctrl + Shift + L Auto Detect

Si les parecen importantes los comentarios esto les sera 煤til:
鈫扐s铆 se comenta en html:
<!-- tu comentario -->
鈫扐s铆 se comenta en javascript una linea:
// tu comentario //
鈫扐s铆 se comentan varias lineas en javascript :
/* tus comentarios */
鈫扐s铆 se comenta en css:
/*tu comentario */
Adem谩s estas son algunas etiquetas de uso frecuente en html:
<b> o <strong>: Negrita
<i> o <em>: Cursiva
<u>: Subrayado
Todas las etiquetas deben cerrarse respectivamente. Espero les sea 煤til 馃槂

si de por si Freddy habla rapido esta cool escucharlo en 2x de volocidad

SI no les carga bien los colores en Atom, en la barra de abajo a la derecha parece 鈥淗TML鈥 haciendo clic pueden cambiar el lenguaje. Si le dan en 鈥淎uto Detect鈥 recarga los colores y ya los muestra bien.

Hola.En esta clase de Platzi de 27 minutos, Aprendi y logre comprender las bases solidas de dise帽o web.En UDEMY tome un curso de 3h y **No logre entender nada.**Personalmente creo Platzi es un ejemplo mundial de pedagog铆a.
Gracias 馃槂

https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/

ese link lo subi贸 alguna persona en un comentario鈥 la verdad es muy 煤til para los que nunca hab铆an usado Atom (soy uno de esos)鈥 si ven el comentario den like, se lo merece鈥

Despues de colocar el <style> </style> todos las palabras en el Atom que tenian color dejaron de tenerlo, todo siguio funcionando igual en atom pero las letras estaban blancas

Hola, he revisado mi texto y est谩 bien escrito, pero no me coloca las palabras en negrita

![]()
Alguien me puede decir porque no se me ponen de colores algunas cosas (si funciona solo no se ponen de colores.

y otra cosa, aun que ponga el script al final, la alerta se hace al principio.
PLSSS HELP

Buenas Practicas:
Pasamos la mayor parte del tiempo leyendo y entendiendo cogigo; las buenas practicas ayudan a hacer ese codigo mas legible
Algunas buenas practicas:

  • Usa la indentacion; asi entendemos mejor (mas visualmente) las relaciones de subordinacion
  • Usa variables autoexplicativas
  • Coloca todas las etiquetas (aunque no parezcan necesarias)

me pasa algo raro con atom, hasta cierto punto me aparecen coloreadas las etiquetas, despues de la mitad del ejercicio dejaron de aparece, pero sigue funcionando normal a la hora de actualizar en el navegador

Hola, cuando escribo body luego de las etiquetas <style> el programa lo lee como si fuera un texto normal y no me permite seguir, DEBEN HACER LO SIGUIENTE: Atom, si es igual tu caso, dale en la parte inferior derecho un apartado que dice HTML, al darle click saldr谩n unas opciones, solo dale en Auto Detect.

la peor parte es tener que volver al trabajo en ves de seguir con esto 馃槮

Yo estoy siguiendo los mismos pasos que Freddy, pero cuando el hace las etiquetas 鈥<style>鈥 y pone 鈥渂ody鈥 entre ambas etiquetas, a el le sale de color rojo, a mi no me sale nada, s贸lo se queda en gris. 驴Alguien que me explicara qu茅 puedo hacer? Gracias se los agradecer铆a.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body      
</style>
</head>
<body>
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <p>Este es otro parrafo</p>
</body>
</html>```

Muy buena esta clase, bastante informaci贸n de una sola vez y perfectamente definida. 馃槂

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primer HTML</title>
    <style type="text/css">
      body{
        background-color: #AAAAFF;
        color: #FFFFFF;
        font-family: Helvetica;
      }
      strong{
        background-color: #FFAAAA;
      }
    </style>
  </head>
  <body>
    <p>Hola mama, <strong>ya casi aprendo</strong></p>
     <p>Este es otro p谩rrafo</p>
     <script type="text/javascript">
       var x = 1;
       var y = 2;
       var z = x + y;
       alert("Mensaje especial con alerta");
       document.write("Mensajito curioso! El valor de Z es: " + z);
     </script>
  </body>
</html>
<!DOCTYPE html> 
<html>
<head> 
<title> Diccionario </title> 
	<style type="text/css"> 
	Body{
		background-color: #597C99;
		color: #FF886E;
		font-size: 20px;
		font-family: cursive;
	}
	</style>
</head>
<body> 
	<p> <"body"> Aqu铆 se escribe la estructura del texto.</p>
	<p> <"!Doctype html"> Esta etiqueta es muy inecesaria hoy en d铆a, pero puede ser encontrado en lenguaje de software viejo</p>
	<p> <"head"> Aqu铆 van los metadatos como estilos de dise帽o y t铆tulo de la p谩gina</p>
	<p> <"title"> Aqu铆 va el t铆tulo de la pesta帽a </p>
	<p> <"style"> Nos permite agregar dise帽o, <"style type=text/css"> es lo mismo pero escrito de forma vieja</p>
	<p> "background-color" Aqu铆 cambiamos el color de fondo. No es una etiqueta, es s贸lo una variable de <"Style"> </p>
	<p> "color" Aqu铆 cambiamos el color de la letra del texto de <"body"> (ya que ese el bloque de texto que esta siendo modificado por <"Style"). No es una etiqueta, es slo una vairable de <"Style"> </p>
	<p> <"p"> Esta etiqueta s贸lo define un parrafo.</p>
	<p> <"/"> As铆 es como se cierra una etiqueta. </p>
	<p> "font-size" Aqu铆 cambiamos el tama帽o de la letra </p>
	<p> "font-family" Aqu铆 cambiamos la tipograf铆a</p>
	<p> "{      }" Esto sirve para abrir y cerrar bloques de c贸digo</p>
	<p> <"script"> Es la etiqueta que nos permite colocar c贸digo de programaci贸n</p>
	<p> "Document.Write" es la opci贸n que nos permite escribir en "body" usando javascript</p>

	
	<script>
	alert("Esto es un alert (y son muy molestos)");
	var x = 1;
	var y = 2;
	var z = x + y;
	document.write("Todo empieza sabiendo que s铆 el valor de X es " + x);
	document.write(" sumado al valor de Y que es " + y); 
	document.write(" entonces X + Y es igual a Z, es decir " + z); 
	</script>
</body>
</html>```

Ya sab铆a programar en Python pero ahora quiero aprender desde cero.

Me aparece siempre el mensaje primero antes que cargue el contenido de la pagina. He probado en varios navegadores.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body
{
background-color: #AAAAFF;
color:white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola <strong>mam谩 ya casi</strong> aprendo</p>
<p>Este es otro p谩rrafo</p>
<script>
alert(鈥淢ensaje especial con alerta鈥);
</script>
</body>
</html>

Cu谩l es la raz贸n por la que independientemente de donde ubique la etiqueta <script> siempre obtengo el mensaje de alerta antes que el cuerpo (etiquetas <p>)?

La versi贸n del editor atom que descargu茅 no me colorea muchas partes del c贸digo como lo hace el editor que utilizas en el video, a煤n as铆 el c贸digo corre sin problemas. A que se debe eso ? Es cuesti贸n de cambiar las configuraciones ? o son detalles de la versi贸n ?

Le a帽adi unos cuantos detalles de mi parte mientras fui curioseando pero al fin escribi mi primer codigo!

esto es muy dificil termine muy mareado


existen profesores buenos y despues esta este caballero que es un capo ense帽ando

Hace aproximadamente 3 a帽os yo tomaba este curso por primera vez, apasionado estaba y con ganas de comerme el mundo de la programaci贸n鈥 Ahora luego de que pasaran estos a帽os, me doy cuenta que gracias a los videos de PLATZI sigo con la pasi贸n y me estoy comiendo el mundo de la programaci贸n鈥 y te preguntaras, 驴a que vienes con todo esto? A que si yo estoy cumpliendo mis sue帽os鈥 tu lo podr谩s hacer tambi茅n. y como ultimo mensaje, 鈥淣UNCA PARES DE APRENDER鈥

Hola!

En el video Freddy menciona que el alert se mostrara al usuario dependiendo de la posicion dentro del codigo. El problema que tengo es que tengo mi Script lo mas cercano al cierre de mi body y a pesar de eso me lanza el alert apenas abro el archivo en mi navegador, lo hace indistintamente porque lo mov铆 al principio y hace lo mismo. Estoy haciendo algo mal?

JuanSaez, debes abrir el explorador de windows, luego en el men煤 superior escoges tools (herramientas), luego escoges folder options(opciones de carpeta), escoges la pesta帽a view (vista) y ah铆 desmarcas la opci贸n hide extensions for known file types (esconder las extensiones para tipos de archivos conocidos). Presionas Apply(aplicar) y Ok.

Buenas tardes gente!! C贸mo est谩n? Tengo el c贸digo tal cual est谩 escrito en el video pero me dispara el alerta apenas le doy refresh y luego muestra el contenido, como si el script del mensaje de alerta lo hubiera ubicado al principio de body鈥 pero est谩 colocado antes del cierre. No entiendo porque se ejecuta as铆. Alguien tiene idea de c煤al puede ser el error?

Con las actualizaciones de Chrome se te activa primero el script aunque lo pongas al final .

Mis apuntes.

reglas de las variable:

  1. Las variables no dejan espacio
  2. El primer caracter de una variable siempre tiene que ser una letra. NO un numero.
  3. No se pueden usar signos raros
  4. la mayuscula y la minuscula Importa

los lenguajes de programacion son un 80% similar y un 20% distinto

los programadores pasan el 80% son leyendo c贸digo y el 20 al 10% escribiendo c贸digo
No cometa el error de escribir codigo complejo. Escribe el c贸digo de la manera mas legible posible

mensaje de script hay que ponerlo al final de la pagina

Hola, coloco el script al final o al principio del body y siempre aparece primero la ventana de alert y luego el contenido del body

Para ser mi primer curso de programaci贸n, esta bien entendible.

alguien noto que en el minuto 25:27 Fredy dice que los programadores pasan el 90% leyendo codigo y el 20% escribiendo, lo siento no pude evitar el comentario por que lo repite dos veces, jajaja la suma de los datos serian en total un 110%

no entiendo porque puse el alert al final antes del final de body y me sali贸 pero no me cargaba la pagina hasta que le di ok

C贸digo comentado 鈥<!-- -->鈥 es la manera de comentar en HTML, al mismo tiempo que hice hac铆a mi c贸digo lo comente para no olvidar etiquetas, espero les sea 煤til 馃槃

<!DOCTYPE html> <!-- Parte de una buena practica -->
<html> <!-- <html> = Etiqueta de arranque -->
<head> <!-- <head> = Cabecera, el head es siempre la primera etiqueta despues de html -->
  <title>Mi primera linea de codigo en HTML</title> <!-- <title> = Titulo de la pagina web -->
    <style type="text/css">
      body
      {
        background-color: black;
        color: white;
        font-family: Helvetica;
<!-- <style> = Estilos de dise帽o de la pagina web pertenecen a css, background-color: = color de fondo, color = color: de fuente, font-family: = tipo de fuente  -->
      }
      strong
      {
        color: red;
      }
    </style>
</head>
<body> <!-- <body> = Contenido visual, todo lo que sale dentro del navegador -->
  <p>Hola <strong>Mundo :D</strong> </p> <!-- <strong> = negritas -->
  <p>Este es otro parrafo</p> <!-- <p> = parrafo -->
    <script>
    var x = 1;
    var y = 2;
    var z = x + y;
<!-- var = Variables donde podemos guardar informacion -->
      document.write("El valor de Z es " + z); <!-- document.write = Es la forma de escrbir dentro de JS -->
    </script>
</body>
</html>

Aqu铆 puedes conseguir el c贸digo de colores:
https://html-color-codes.info/codigos-de-colores-hexadecimales/

90% + 20% = 110%
Like this

_ = underscore o guion bajo, A qui en Venezuela solo se le dice (鈥減iso鈥)

a alguien le sale la alerta antes de que cargue la pagina ?
hice de la misma manera que en el video y me sale la alerta antes de cargar la pagina

Amigos les recomiendo que en Atom instalen el paquete de emmet, les ayudara mucho a escribir en html, si tienen alguna recomendaci贸n de alg煤n pluggin de JavaScript dejenmelo saber en los comentarios de este aporte.

Esta es una excelente herramienta para insertar colores, muy buena para hacer degradados
http://www.colorzilla.com/gradient-editor/

  • Los programadores de verdad pasan del 80 al 90 % LEYENDO C脫DIGO
  • El otro % se lo pasa ESCRIBIENDO

Hola buena madrugada, soy desarrollador de software hace 6 a帽os, y estaba buscando como ense帽arle a mi hijo codificar, y es lo mejor, sencillo y concreto. Excelente!!

Reglas para nombrar variables:

1.- No aceptan espacios en blanco: Si necesitas una variable compuesta por mas de una palabra puedes utilizar el s铆mbolo: _ . Ejemplo: freddy_vega.
2.- No se pueden utilizar n煤meros al inicio del nombre de la variable: Debe empezar siempre con una letra, los n煤meros pueden utilizarse despu茅s.
3.- Evitar asignarles s铆mbolos 鈥渞aros鈥 como la 帽 o las tildes: Raros para el idioma ingl茅s, que son el idioma de los creadores de JS y HTML.
4.- Tener en cuenta que JavaScript diferencia entre may煤sculas y min煤sculas, por lo que la variable: Freddy no es igual a la variable: freddy.

estoy armando un grupo de whatsapp para compartir conocimiento, podremos conversqr de varios temas para resolver dudas, y por que no emprender en algun momento.

*Estructura b谩sica de un documento .html

<!DOCTYPE html>
<html>
	<head>
		<title>T铆tulo en la pesta帽a del navegador</title>
		<style>
			body
			{
				background-color		:	black;
				color				:	white;
			}
		</style>
	</head>
	<body>
		<h1>T铆tulo princial de la p脿gina</h1>
		<p>Contenido de la p谩gina</p>
	<script>
		console.log("Mensaje en la consola");
	</script>
	</body>
</html>
<html>
<head>
  <title>mi primer archivo</title>
  <style>
    body{
      
    }
  </style>
</head>
<body>
  <p> hola <strong>mam谩 ya casi aprendo</strong></p>
  <p> este es otro parrafo</p>
</body>
</html>

alguien me puede ayudar, por que body no se me resalta en atom

Dentro de la etiqueta html podemos declarar el idioma en el cual va estar todo en nuestro programa con como por ejemplo鈥
<html lang=鈥渆s鈥>

Les comparto un proyecto escolar que hice con el programa dreamweaver el cual sub铆 mi proyecto a un repositorio en GitHub https://thelaststar122.github.io/-diseases/ espero les guste.

Como curiosidad: con Safari se me cumple que las caja de texto generadas con 鈥渁lert鈥 aparece antes o despu茅s de cargar la pagina seg煤n si est谩n codificadas al principio o al final de <body> pero con chrome me aparece siempre antes de cargar la p谩gina aunque el c贸digo est茅 escrito al final de <body>.
(Tampoco lo voy a investigar, hay mucho camino por delante)

Yo tengo una pregunta. Cuando estaba escribiendo mi c贸digo, id茅ntico al de Freddy, cuando comenc茅 a escribir lo que estaba debajo de 鈥<style>鈥, no se me colore贸 esa secci贸n (todos me salen en gris), y tampoco me aparec铆an las gu铆as del c贸digo como a Freddy (para autocompletar, por ejemplo, mientras pon铆a 鈥渂ackground-color鈥). 驴Por qu茅 me sucede esto?

Hola! No puedo usar la etiqueta Body dentro de STYLE (No me aparece en tono rojo las letras de 鈥淏ODY鈥 sino en gris). 驴Qu茅 hago?!

Hola en mi caso ni cambia de color (<strong>) ni se refleja en navegador, que hago?