Bueno bienvenidos a una clase más de esta serie de Internet de las cosas que tenemos en definitiva un
modesto dispositivo y OTE que es capaz de obedecer ciertas órdenes sencillas y seguro ya se te habrá
ocurrido esto de conectarla a un relé poder activar un termotanque poder encender o apagar una luz lo
mejor de todo es que no solamente lo podemos operar nosotros le podríamos decir a alguien Mirá podés
controlar esto o aquello por qué no entras a probarlo pero ahí se nos empieza a desarmar un poco el
asunto porque qué vamos a hacer.
Le vamos a dar nuestras credenciales de clave me QTTF y le vamos a enseñar a prácticamente un juego
de lenguaje de programación a alguien que no tiene por qué saberlo.
Entonces en esta clase vamos a aprender a desarrollar una interfaz muy sencilla una interfaz web.
Por qué no llamarla una aplicación web para que no dependamos de Claude QTTF como interfase claro.
Claude me QTTF nuestro servidor eso no lo podemos cambiar de momento está bien que así sea pero yo quiero
tener la posibilidad de operar nuestro dispositivo y OTE sin tener que entrar a Cloud M QTTF.
Entonces vamos a hacer lo siguiente Vamos a venir acá a archivo donde estoy ahora FY New window queremos
una ventana nueva ahí está.
Como verán en mi caso me aparece dentro de la misma ventana pero en realidad si bien funciona así es
una ventana completamente nueva y va a trabajar con un proyecto completamente nuevo.
Si a ustedes les aparece en una ventana aparte es lo mismo.
Simplemente la traen acá al frente y por momentos vamos a trabajar con dos ventanas.
Lo bueno es que el código Arduino de nuestro dispositivo está casi completo para lo que necesitamos
ahora así que tranquilamente podemos venirnos aquí a esta nueva ventana.
Yo no voy a usar nada de plataformeo por ahora.
Entonces vamos a empezar a desarrollar nuestra propia herramienta web vamos a hacer así Phil New Fáil
se nos abre una nueva ventana de todos modos ya teníamos un final abierto.
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
vez que esto va a suceder.
Vean de qué les va a pedir a dónde lo queremos guardar y que le pongamos un nombre en mi caso yo voy
a crear una carpeta donde guardo mis proyectos web y le voy a poner a este archivo como título.
Lo vamos a poner bajo uno de momento punto HTML.
Ojo eso sí ustedes elijan la carpeta que más les parezca conveniente.
Como les digo tengo una carpeta que se llama proyectos web y yo la voy a poner ahí.
Bueno como ven ya tengo mi carpeta que se llama 0 1 y mi archivo y yo bajo cero.
1 Qué vamos a escribir acá adentro.
Bueno un poco de marcado HTML o código HTML para esbozar una modesta página web y pongamos manos a la
obra.
Bueno gracias a Atom yo voy a escribir HTML.
Ahí está.
Con eso ya me aparece la sugerencia de presionar Enter y esto que aparece acá es el esqueleto básico
de una página web.
De hecho esto ya es una página web estar en blanco pero cumple todos los requisitos.
Lo que va a tener que modificar por aquí va a ser acá donde dice el lenguaje en inglés se me ocurre
ponerlo en español para que no me esté pidiendo cada rato el Google Crom si quiero traducir esto.
Entonces bueno lo voy a dejar acá en español.
Así lo estoy 7m idioma entre estas etiquetas ya van a ver que todo lo que es HTML y bueno si vos ya
sabes y dominas el HTML esto te va a parecer súper básico súper de principiante pero pero debo cumplir
para todos aquellos que se están iniciando con esto.
Bueno estas etiquetas delimitan el título de la web.
Pero ojo el título no es más que esto que tengo por acá.
Miren es la leyenda que aparece en la pestaña del navegador.
Entonces le vamos a poner.
No se lo vamos a poner y OTE
uno como se llamaba o se llama nuestro proyecto.
Bueno hay un poco más abajo viene el body que viene a ser el cuerpo o el contenido de nuestra web.
Entonces miren que yo puedo poner y OTE uno voy a grabar esto y simplemente me voy a ir a la carpeta
a donde tengo el archivo y lo que voy a hacer es click derecho a abrir con Windows es muy parecido y
le voy a decir con Google Crom bueno como era de esperarse la página aparece en blanco.
Miren para acá adelante el título como les dije.
La pestaña aparece con 1 y el contenido no hemos más que hecho que poner y OTE 1.
Hasta ahora todo muy simple muy rudimentario y básico.
Bueno se me ocurre esto ponerle un poco más de elegancia.
Y miren voy a hacer lo siguiente y voy a escribir una etiqueta que se llama H1.
Simplemente yo puedo poner h 1.
Miren y llame la propone.
Existe el H2 H3 exploren ustedes para qué sirven.
Voy a poner la h 1 y fíjense abrió y cerró.
Esto quiere decir que lo que ponga dentro de las H1 va a estar afectado por la función que cumple esta
etiqueta y la función que es es la de generar un encabezado.
En definitiva va a agrandar el tamaño de la letra todo lo que está entre H1 y H1.
Noten que llamamos etiqueta de apertura la que no tiene una barra y la que cierra tiene una barra al
final abre cierra abre cierra.
Es bastante lógico también está pasando acá miren a donde pusimos el título y a separar.
Esto es se llama abre el gel o el encabezado lo cierra se abre el body se cierra.
Miren qué fácil.
Yo Coliqueo en la que abre me marca a donde cierra no tiene mayor dificultad y para profesionales como
ustedes que ya dominan un lenguaje de programación complejo como lo es C++.
Esto es prácticamente jardín de infantes.
Entonces miren yo voy a grabar esto voy a actualizar y ya tenemos el título agrandaba.
No voy a seguir profundizando en esto porque la idea no es que de golpe saltemos de un curso de Arduino
a un curso de desarrollo de páginas web.
La idea es poder generar algo y si te parece si te interesa bueno seguro podrás profundizar en el desarrollo
de webs.
Si vamos bueno por acá abajo vamos a preparar una etiqueta que se llama diben.
Se lo voy a escribir así.
Ya me la propone a Tom.
Eso a mí me ayuda presionó enter esto que hice acá Clas lo puedo borrar si lo dejo tampoco pasa nada.
Y como siempre miren a un Dib que abre un Dib que cierra
a este div.
Miren pudiese parar ahí acá.
Hoy voy a generar un espacio donde decía Clas voy a poner Heydi igua.
Igual vamos.
Y acá tengo que ponerle un Heydi lo tengo que inventar yo.
Pero yo le voy a poner un nombre que represente lo que va a ser esta etiqueta esta etiqueta o lo que
esté adentro.
Yo no voy a usar como si fuera una pantalla es mi Display es por donde yo voy a mostrar los datos.
Entonces lo que voy a hacer con este Heydi es ponerle algo que a mí me dé sentido.
Entonces le voy a poner play perfecto acá adentro voy a escribir display para que yo pueda ver donde
aparece si no va a estar en blanco grabo me vuelvo al navegador actualizo y listo.
Esta es mi etiqueta etiqueta Display.
A ver
buenísimo ahora yo lo que quiero hacer es lograr que esta ventana que tenemos acá se conecte a nuestro
servidor e me QTTF se imaginan eso y que acá empiecen a aparecer los valores que nuestro dispositivo
y OTE nos envía.
Les parece increíble si así les parece lo hagamos juntos en la próxima clase.