1
00:00:00,780 --> 00:00:07,750
Bueno bienvenidos a una clase más de esta serie de Internet de las cosas que tenemos en definitiva un

2
00:00:07,750 --> 00:00:14,440
modesto dispositivo y OTE que es capaz de obedecer ciertas órdenes sencillas y seguro ya se te habrá

3
00:00:14,440 --> 00:00:22,480
ocurrido esto de conectarla a un relé poder activar un termotanque poder encender o apagar una luz lo

4
00:00:22,480 --> 00:00:27,220
mejor de todo es que no solamente lo podemos operar nosotros le podríamos decir a alguien Mirá podés

5
00:00:27,220 --> 00:00:34,840
controlar esto o aquello por qué no entras a probarlo pero ahí se nos empieza a desarmar un poco el

6
00:00:34,840 --> 00:00:36,690
asunto porque qué vamos a hacer.

7
00:00:36,880 --> 00:00:43,090
Le vamos a dar nuestras credenciales de clave me QTTF y le vamos a enseñar a prácticamente un juego

8
00:00:43,090 --> 00:00:47,100
de lenguaje de programación a alguien que no tiene por qué saberlo.

9
00:00:47,540 --> 00:00:55,700
Entonces en esta clase vamos a aprender a desarrollar una interfaz muy sencilla una interfaz web.

10
00:00:55,780 --> 00:01:05,290
Por qué no llamarla una aplicación web para que no dependamos de Claude QTTF como interfase claro.

11
00:01:05,420 --> 00:01:12,350
Claude me QTTF nuestro servidor eso no lo podemos cambiar de momento está bien que así sea pero yo quiero

12
00:01:12,350 --> 00:01:18,880
tener la posibilidad de operar nuestro dispositivo y OTE sin tener que entrar a Cloud M QTTF.

13
00:01:19,160 --> 00:01:29,150
Entonces vamos a hacer lo siguiente Vamos a venir acá a archivo donde estoy ahora FY New window queremos

14
00:01:29,150 --> 00:01:31,190
una ventana nueva ahí está.

15
00:01:31,250 --> 00:01:37,610
Como verán en mi caso me aparece dentro de la misma ventana pero en realidad si bien funciona así es

16
00:01:37,610 --> 00:01:42,680
una ventana completamente nueva y va a trabajar con un proyecto completamente nuevo.

17
00:01:42,680 --> 00:01:46,160
Si a ustedes les aparece en una ventana aparte es lo mismo.

18
00:01:46,160 --> 00:01:52,580
Simplemente la traen acá al frente y por momentos vamos a trabajar con dos ventanas.

19
00:01:52,610 --> 00:01:58,520
Lo bueno es que el código Arduino de nuestro dispositivo está casi completo para lo que necesitamos

20
00:01:58,520 --> 00:02:04,300
ahora así que tranquilamente podemos venirnos aquí a esta nueva ventana.

21
00:02:04,310 --> 00:02:06,980
Yo no voy a usar nada de plataformeo por ahora.

22
00:02:07,250 --> 00:02:16,380
Entonces vamos a empezar a desarrollar nuestra propia herramienta web vamos a hacer así Phil New Fáil

23
00:02:19,340 --> 00:02:23,360
se nos abre una nueva ventana de todos modos ya teníamos un final abierto.

24
00:02:23,450 --> 00:02:31,280
No importa le voy a dar comando en mi caso o control ése en el de ustedes para grabar y cómo es la primera

25
00:02:31,280 --> 00:02:33,920
vez que esto va a suceder.

26
00:02:33,920 --> 00:02:39,560
Vean de qué les va a pedir a dónde lo queremos guardar y que le pongamos un nombre en mi caso yo voy

27
00:02:39,560 --> 00:02:47,990
a crear una carpeta donde guardo mis proyectos web y le voy a poner a este archivo como título.

28
00:02:48,150 --> 00:02:53,980
Lo vamos a poner bajo uno de momento punto HTML.

29
00:02:54,020 --> 00:02:58,720
Ojo eso sí ustedes elijan la carpeta que más les parezca conveniente.

30
00:02:58,730 --> 00:03:05,040
Como les digo tengo una carpeta que se llama proyectos web y yo la voy a poner ahí.

31
00:03:05,820 --> 00:03:12,740
Bueno como ven ya tengo mi carpeta que se llama 0 1 y mi archivo y yo bajo cero.

32
00:03:12,740 --> 00:03:16,180
1 Qué vamos a escribir acá adentro.

33
00:03:16,180 --> 00:03:27,000
Bueno un poco de marcado HTML o código HTML para esbozar una modesta página web y pongamos manos a la

34
00:03:27,000 --> 00:03:27,860
obra.

35
00:03:27,860 --> 00:03:31,990
Bueno gracias a Atom yo voy a escribir HTML.

36
00:03:32,010 --> 00:03:32,670
Ahí está.

37
00:03:32,730 --> 00:03:40,980
Con eso ya me aparece la sugerencia de presionar Enter y esto que aparece acá es el esqueleto básico

38
00:03:41,070 --> 00:03:42,040
de una página web.

39
00:03:42,090 --> 00:03:48,100
De hecho esto ya es una página web estar en blanco pero cumple todos los requisitos.

40
00:03:48,590 --> 00:03:56,820
Lo que va a tener que modificar por aquí va a ser acá donde dice el lenguaje en inglés se me ocurre

41
00:03:57,180 --> 00:04:05,490
ponerlo en español para que no me esté pidiendo cada rato el Google Crom si quiero traducir esto.

42
00:04:06,030 --> 00:04:10,100
Entonces bueno lo voy a dejar acá en español.

43
00:04:10,200 --> 00:04:18,360
Así lo estoy 7m idioma entre estas etiquetas ya van a ver que todo lo que es HTML y bueno si vos ya

44
00:04:18,360 --> 00:04:25,710
sabes y dominas el HTML esto te va a parecer súper básico súper de principiante pero pero debo cumplir

45
00:04:25,710 --> 00:04:28,780
para todos aquellos que se están iniciando con esto.

46
00:04:28,860 --> 00:04:35,860
Bueno estas etiquetas delimitan el título de la web.

47
00:04:35,860 --> 00:04:40,240
Pero ojo el título no es más que esto que tengo por acá.

48
00:04:40,500 --> 00:04:46,660
Miren es la leyenda que aparece en la pestaña del navegador.

49
00:04:46,660 --> 00:04:49,360
Entonces le vamos a poner.

50
00:04:49,360 --> 00:04:51,750
No se lo vamos a poner y OTE

51
00:04:54,480 --> 00:04:58,380
uno como se llamaba o se llama nuestro proyecto.

52
00:04:58,590 --> 00:05:04,480
Bueno hay un poco más abajo viene el body que viene a ser el cuerpo o el contenido de nuestra web.

53
00:05:04,650 --> 00:05:15,330
Entonces miren que yo puedo poner y OTE uno voy a grabar esto y simplemente me voy a ir a la carpeta

54
00:05:15,440 --> 00:05:22,770
a donde tengo el archivo y lo que voy a hacer es click derecho a abrir con Windows es muy parecido y

55
00:05:22,770 --> 00:05:31,150
le voy a decir con Google Crom bueno como era de esperarse la página aparece en blanco.

56
00:05:31,150 --> 00:05:35,190
Miren para acá adelante el título como les dije.

57
00:05:35,230 --> 00:05:43,550
La pestaña aparece con 1 y el contenido no hemos más que hecho que poner y OTE 1.

58
00:05:43,630 --> 00:05:48,350
Hasta ahora todo muy simple muy rudimentario y básico.

59
00:05:48,460 --> 00:05:52,030
Bueno se me ocurre esto ponerle un poco más de elegancia.

60
00:05:52,210 --> 00:05:56,500
Y miren voy a hacer lo siguiente y voy a escribir una etiqueta que se llama H1.

61
00:05:56,500 --> 00:05:58,470
Simplemente yo puedo poner h 1.

62
00:05:58,470 --> 00:05:59,920
Miren y llame la propone.

63
00:06:00,040 --> 00:06:03,880
Existe el H2 H3 exploren ustedes para qué sirven.

64
00:06:03,880 --> 00:06:08,160
Voy a poner la h 1 y fíjense abrió y cerró.

65
00:06:08,200 --> 00:06:16,570
Esto quiere decir que lo que ponga dentro de las H1 va a estar afectado por la función que cumple esta

66
00:06:16,570 --> 00:06:20,580
etiqueta y la función que es es la de generar un encabezado.

67
00:06:20,590 --> 00:06:27,600
En definitiva va a agrandar el tamaño de la letra todo lo que está entre H1 y H1.

68
00:06:28,420 --> 00:06:37,430
Noten que llamamos etiqueta de apertura la que no tiene una barra y la que cierra tiene una barra al

69
00:06:37,430 --> 00:06:40,560
final abre cierra abre cierra.

70
00:06:40,580 --> 00:06:45,910
Es bastante lógico también está pasando acá miren a donde pusimos el título y a separar.

71
00:06:45,950 --> 00:06:52,610
Esto es se llama abre el gel o el encabezado lo cierra se abre el body se cierra.

72
00:06:52,610 --> 00:06:53,520
Miren qué fácil.

73
00:06:53,530 --> 00:07:02,030
Yo Coliqueo en la que abre me marca a donde cierra no tiene mayor dificultad y para profesionales como

74
00:07:02,030 --> 00:07:07,410
ustedes que ya dominan un lenguaje de programación complejo como lo es C++.

75
00:07:07,580 --> 00:07:11,420
Esto es prácticamente jardín de infantes.

76
00:07:11,420 --> 00:07:18,230
Entonces miren yo voy a grabar esto voy a actualizar y ya tenemos el título agrandaba.

77
00:07:18,230 --> 00:07:23,960
No voy a seguir profundizando en esto porque la idea no es que de golpe saltemos de un curso de Arduino

78
00:07:23,960 --> 00:07:27,140
a un curso de desarrollo de páginas web.

79
00:07:27,140 --> 00:07:34,700
La idea es poder generar algo y si te parece si te interesa bueno seguro podrás profundizar en el desarrollo

80
00:07:34,700 --> 00:07:36,430
de webs.

81
00:07:36,520 --> 00:07:46,110
Si vamos bueno por acá abajo vamos a preparar una etiqueta que se llama diben.

82
00:07:46,200 --> 00:07:48,240
Se lo voy a escribir así.

83
00:07:48,270 --> 00:07:49,790
Ya me la propone a Tom.

84
00:07:49,820 --> 00:07:57,300
Eso a mí me ayuda presionó enter esto que hice acá Clas lo puedo borrar si lo dejo tampoco pasa nada.

85
00:07:57,340 --> 00:08:01,360
Y como siempre miren a un Dib que abre un Dib que cierra

86
00:08:04,100 --> 00:08:05,230
a este div.

87
00:08:05,330 --> 00:08:09,090
Miren pudiese parar ahí acá.

88
00:08:09,290 --> 00:08:15,830
Hoy voy a generar un espacio donde decía Clas voy a poner Heydi igua.

89
00:08:15,870 --> 00:08:17,830
Igual vamos.

90
00:08:18,010 --> 00:08:21,180
Y acá tengo que ponerle un Heydi lo tengo que inventar yo.

91
00:08:21,270 --> 00:08:29,610
Pero yo le voy a poner un nombre que represente lo que va a ser esta etiqueta esta etiqueta o lo que

92
00:08:29,610 --> 00:08:30,510
esté adentro.

93
00:08:30,570 --> 00:08:35,650
Yo no voy a usar como si fuera una pantalla es mi Display es por donde yo voy a mostrar los datos.

94
00:08:35,730 --> 00:08:42,060
Entonces lo que voy a hacer con este Heydi es ponerle algo que a mí me dé sentido.

95
00:08:42,060 --> 00:08:51,170
Entonces le voy a poner play perfecto acá adentro voy a escribir display para que yo pueda ver donde

96
00:08:51,170 --> 00:08:58,190
aparece si no va a estar en blanco grabo me vuelvo al navegador actualizo y listo.

97
00:08:58,220 --> 00:09:04,430
Esta es mi etiqueta etiqueta Display.

98
00:09:04,490 --> 00:09:04,840
A ver

99
00:09:08,200 --> 00:09:18,650
buenísimo ahora yo lo que quiero hacer es lograr que esta ventana que tenemos acá se conecte a nuestro

100
00:09:18,650 --> 00:09:25,820
servidor e me QTTF se imaginan eso y que acá empiecen a aparecer los valores que nuestro dispositivo

101
00:09:26,900 --> 00:09:29,110
y OTE nos envía.

102
00:09:29,270 --> 00:09:35,880
Les parece increíble si así les parece lo hagamos juntos en la próxima clase.