Aprende HTML, CSS, JavaScript/jQuery, y API: ¡Construye un sitio web del clima! | Joan Marie Verba | Skillshare
Buscar

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Aprende HTML, CSS, JavaScript/jQuery, y API: ¡Construye un sitio web del clima!

teacher avatar Joan Marie Verba, Web Developer, Author

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:23

    • 2.

      Editor de código

      0:47

    • 3.

      Configuración del archivo

      5:08

    • 4.

      Página HTML básica

      3:05

    • 5.

      Cómo aplicar estilo en CSS

      10:34

    • 6.

      Configuración de llamadas a la API

      4:19

    • 7.

      Recuperación de datos

      7:22

    • 8.

      Colocar datos en una página web

      12:05

    • 9.

      Limpieza de código

      10:30

    • 10.

      Agregar imágenes

      6:50

    • 11.

      Conclusión

      2:51

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1516

Estudiantes

18

Proyectos

Acerca de esta clase

Esta clase tratará sobre cómo crear un sitio con información meteorológica con HTML, CSS y Javascript mediante una llamada a la API. Las API son excelentes formas de obtener más funcionalidad con un sitio web, ¡y son divertidas de usar! Además, la capacidad de usar una API es una habilidad importante que debe tener un desarrollador web.  No se requieren conocimientos previos de desarrollo web.

 

Aprenderás lo siguiente:

  • Conceptos básicos de HTML
  • Conceptos básicos de CSS
  • Conceptos básicos de JavaScript (con jQuery y ES6)
  • Llamadas a la API

El proyecto de clase consiste en crear un sitio meteorológico con la API de tiempo abierto.

 

No es necesaria experiencia previa en construcción web.

Conoce a tu profesor(a)

Teacher Profile Image

Joan Marie Verba

Web Developer, Author

Profesor(a)

Hello, I'm Joan. I believe that the goal of web development is to make applications/web pages that present users with the information they want in the style they prefer. I find this both challenging and exciting, and is one of the reasons I find coding so much fun. You can view some of my projects at http://joanmarieverba.name

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola. Mi nombre es Joan Marie Verba. Y bienvenidos a esta clase y desarrollo Web. Vamos a crear un sitio meteorológico usando un A P. Llamo al clima abierto un P I A p ojos, aire divertido y puedes encontrar una amplia gama de temas entre ellos para crear todo tipo de páginas Web interesantes. He sido programador de computadoras y desarrollador Web durante muchos años. He recubierto una serie de sitios web. Este sitio web en particular que ves ahora es mi página de portafolio. Esta es una página que muestra mis proyectos. Esta es una página que es mi currículum online. Esta es otra página que he desarrollado y esta es mi página get hub donde guardo mi código. A lo largo de esta clase, te enseñaré a crear una aplicación meteorológica usando HTML, CSS y JavaScript dentro de una p que llamo. Podrías usar thes skills para crear tu propio sitio web meteorológico o un sitio web usando otro a p i Esta clase podría ser tomada por quienes tengan algún conocimiento de HTML, CSS y javascript. Pero está dirigido a estudiantes sin experiencia en desarrollo web. Esta clase es genial para freelancers. Estafadores laterales o incluso aficionadores, porque puedes usar estas habilidades para conseguir una variedad de sitios web usando unos ojos P. Al final de esta clase, tendrás el código para desplegar tu propia página web meteorológica. 2. Editor de código: Antes de empezar a codificar, vamos a necesitar un editor de código. Un texto sin formato. Editores como No Tad trabajaron bien. A pesar de que recomiendo en contra de usar un procesador de textos, es mejor usar un editor de código especializado, y uso código Visual studio, que es una descarga gratuita y funciona para Windows, Mac y otras plataformas. Podrías. También, fue Adam, que es otra descarga gratuita. Si tienes un editor de código como Sublime Text u otro editor de código ya funcionando, eso también está bien . Pero sí recomiendo descargar un editor de código antes de pasar al siguiente paso. 3. Configuración del archivo: Ahora vamos a crear nuestros archivos. El primero que necesitamos es una carpeta. Estoy en un Mac, pero el proceso en Windows es similar. Basta con usar carpeta nueva. Y así vamos a crear carpeta. Yo lo voy a llamar Tiempo, y ahora vamos a entrar en nuestro código de estudio visual y vamos a abrir la carpeta. Si ya está creado, como lo hice antes. Puedes hacer esto o puedes usar carpeta abierta. Pero ahora mismo vamos a tomar el clima y con el clima, vamos a crear archivos. Podemos presionar este botón aquí para crear archivos. El primer archivo es un archivo HTML índice que sostendrá el código que va directamente en la pantalla. Nuestro segundo archivo que vamos a crear es el estilo CSS y que tendrá un archivo que le diga al código cómo ponerlo en la pantalla. Y luego vamos a crear nuestro trabajo, un archivo de script, y lo vamos a llamar Weather J s. y ese archivo dará los datos y recuperará los datos y pondrá los datos en una forma que podamos ponerlos en la pantalla. Por lo que en primer lugar quieren configurar el índice. Archivo Html. Si estás en un código de estudio visual, hay una manera realmente fácil de obtener una plantilla. Haces un signo de exclamación de turno y luego haces un retorno y te da esta plantilla realmente bonita . El código que saldrá en la pantalla está entre las dos etiquetas de cuerpo aquí. Uh, este código aquí arriba es para seguir el navegador. Cómo Toe Intérprete código. El título aquí es el título que verás en la parte superior de la pantalla para los navegadores. Vamos a llamar a eso el clima de hoy y usar eso y luego vamos a guardar esto y seguir con estilo. Ver, evaluar ahora estilo. Ver evaluar. No necesitamos hacer nada con por el momento para el archivo de script Java. Te vamos a poner estricto, que es sólo un, um, comando estándar para script Java, y ahora vamos a volver al índice html porque el archivo html necesita saber que el estilo CSS y los archivos de clima Js están ahí y necesita comunicarse con ellos . Entonces vamos a hacer esto por un comando frío y solo puedes copiar esto así como copiar el resto de la plantilla. Si no tienes un archivo de plantilla en tu navegador, incluso acaba de copiarlo de mi pantalla aquí. Buen estilo. Ver, Assis. Vas a hacer carril igual hoja de estilo porque eso es lo que es. Es una hoja de estilo, y vamos a poner para cerrar eso. Nosotros hacemos esto ahora, esto no es como usted nota. Esto es entre los dos textos de cabeza, no en la etiqueta del cuerpo, y es lo último antes de la última etiqueta de cabeza. Y así estamos diciendo para indexar HTML aquí que vas a conseguir algunos comandos de estilo. CSS. Eso es lo que le estamos diciendo ahora para el archivo JavaScript. El archivo de script Java va en la parte inferior. Entonces vamos a poner el archivo de script Java en la parte inferior, y el camino que va por el camino que indicamos es con esto ahora de nuevo, solo puedes copiar esto justo desde donde estoy haciendo esto, se llama Weather J s y luego script. Ahora, um, lo que puedes ver, una de las ventajas de usar código de estudio visual es que el código de estudio visual te dará la um, la etiqueta de script final. Una vez que hayas hecho esto las etiquetas de script de inicio, no tienes que escribir eso. Eso lo vamos a salvar. Y, uh, ahora tienes tus archivos configurados. Uh, si quieres almacenar tu código, puedes usar almacenamiento en la nube como dropbox o iCloud o lo que sea, o puedes copiarlo a, ya sabes, uh, unidad flash. O puedes conseguir un centro de regalos, um, repositorio, que está más allá del alcance de este curso, y copiar tu código ahí. Pero sí te recomiendo hacer copias de seguridad de tu código prácticamente en cada etapa porque es fácil perder tu código y luego estás entonces es, um Entonces tienes que recrear de nuevo. Entonces esto es lo justo lo básico configurado para el código, y empezaremos a ir desde aquí 4. Página HTML básica: ahora llenemos la página HTML ahora mismo, no hay nada ahí. Si quieres ver la página en cualquier momento, podemos hacer click derecho y abrir y por defecto navegador y ver que no hay nada en la página. De todas formas miras la parte superior, dice el clima de hoy. Eso es porque ponemos eso en el título. Volvamos atrás y empecemos a poner las cosas en la página. Lo primero que vamos a hacer en la página es poner en un título o en la página. Vamos a usar la etiqueta H one, que es la letra más grande. El clima de hoy ahora H uno, como dije, es la etiqueta más grande. Hay etiquetas más pequeñas, cada una a una menor que H uno H tres, una más pequeña que H dos y H seis es muy pequeña, por lo que puedes ajustar el tamaño de las letras. De esa manera, esa es una de las muchas formas de ajustar el tamaño de las letras. Entonces vamos a guardar esto y a ver qué pasa. Solo puedes refrescar la página aquí, y ahí está el clima de hoy. De acuerdo, ahora empecemos a llenar la página con otras cosas que queremos con letras más pequeñas. Vamos a hacer H dos y vamos a poner en la ubicación. Entonces, uh, el clima para la ubicación y rellenaremos la ubicación más tarde, y luego vamos a querer la temperatura. Entonces ponemos temperatura y solo ponemos algunos posicionadores ahora mismo para eso. Y luego pondremos la velocidad del viento y luego pondremos en condiciones de cielo queriendo sobre su calidad clara lluviosa, cualesquiera que sean las condiciones del cielo. Entonces esos posicionadores aéreos por lo que vamos a entrar más tarde. Entonces ahora veamos, una vez que lo hayamos guardado, lo que se ve así así podemos refrescar la página aquí y allá están, ya sea por ubicación, um, temperatura, viento, condiciones del cielo, vamos a hacer esto'll clima actual para la ubicación. Ahora hay una razón para eso, y ése son los datos. Vamos a conseguir cambios alrededor de cada 10 minutos, así que vamos a conseguir el clima actual para cualquier ubicación que le digamos para conseguir el clima. Ahora mismo, sólo queremos conseguir algo en la página, y eso hacemos. Tenemos clima actual para la ubicación. Ahí estamos. Entonces esa es nuestra materia básica. Y esa es nuestra página HTML básica. Y, uh, en la siguiente lección irá y abordará algunos problemas de estilo 5. Estilo de CSS: Ahora vamos a darle estilo a la página usando C. S s CSS significa hoja de estilo en cascada. El primero que intentará es un fondo de colores. Por lo que vamos a la página de estilo CSS y escribimos cuerpo porque queremos que el color sea para toda la página que corresponde a esta etiqueta de cuerpo en esta etiqueta de cuerpo. Entonces vamos a hacer esto y decir ¿Quieres color de fondo? Como puedes ver, código de estudio visual me está solicitando aquí, así que selecciono el color de fondo. También me está dando una gama de colores para seleccionar. Entonces probemos celeste azul. Tenga en cuenta que la etiqueta de cuerpo se llama selector. El selector es seguido de una tornapunta rizado de apertura, seguido de las instrucciones que desee y termina con un corsé rizado de final. Entonces lo que guarda eso y vuelve aquí y refresca y tenemos el fondo azul. Genial. Ahora esta es una fuente predeterminada, así que vamos a ver si podemos conseguir otra pelea. Para hacer eso. Vamos a las fuentes dot google dot com y nos desplazamos por las fuentes y vemos si hay algo que te queramos. Entonces éste se ve bien, así que vamos a probar éste, haces clic en el más y luego haces clic en el menos aquí abajo y tiene dos líneas de código. Esta la primera línea de código que entra en la h t m l. Entonces vamos a copiar y pegar aquello que vende el HTML que tenemos una fuente que queríamos usar y luego la segunda es poner en el CSS. Entonces copiamos y pegamos eso y eso va por debajo de esto. Inténtalo de nuevo. Ahí está. Y luego guardamos eso y volvemos aquí y refrescamos página de nuevo. Y la fuente ha cambiado. Maravilloso. Ahora vamos a probar otra cosa. Vamos a ver si podemos centrar el encabezado. Solo queremos el centro de primera línea. Entonces vamos a volver al HTML y vamos a separar la primera línea usando lo que se llama el diff. Ahora. El código de estudio visual me está recordando que si tengo un Divi inicial tengo que igualarlo con div interminable. Entonces tomo eso y vamos a rodear la primera línea porque estamos consiguiendo la primera línea y puedo ver que no copié eso. Correcto, Entonces vamos a ir a aquí y allá está. Y saca eso por ahí. Ahora tenemos eso separado, lo cual es genial, pero queremos, um, centrar um, la línea de rumbo. Entonces le ponemos una clase aquí mismo. Clase es igual y dale un nombre. Voy a llamarlo mejor. Puede ser cualquier nombre, pero es bueno tener un nombre descriptivo. Cuando usamos una clase en CSS, ponemos punto delante de ella para poder golpearla. Ponemos eso y luego vamos y vemos si podemos determinar qué, uh, comando usar para CSS. Entonces ponemos, um, c S s texto central. Está bien, eso se ve bien. Entonces vamos por aquí y vemos alinear el texto. Propiedad parece ser esto y w tres escuelas es un lugar muy bueno para ir a buscar información. Y vemos que hay un comando llamado text align center para usar en el CSS. Ahora, en el lado izquierdo de la página, puedes ver que hay un montón de comandos CSS, y puedes buscarlos en cualquier momento si los necesitas. Pero ahora mismo estamos buscando algo para centrar el texto, y esto es todo. Entonces copiamos y pegamos que guardes eso y volvemos a nuestra página ahí. Ahora es centro. De acuerdo, lo estamos haciendo bien. Ahora pongamos más espacio entre la línea superior y esto. Ahora, para hacer eso, necesitamos tener un margen. Entonces sólo necesitamos ponerlo en el fondo porque el margen es para, ya sabes, el margen. Margen superior, margen derecho, izquierda, margen inferior. Necesitaremos margen de fondo porque vamos a aumentar este espacio aquí. Entonces empezamos esto con margen y de nuevo, código Visual studio me está impulsando, y vamos a poner ah, 100 píxeles. Ahora, Pixel es una muy pequeña, um longitud o con en la página, puedes Google pixel si quieres más información. Pero ahora mismo, sólo vamos a hacer eso. Y si tenemos eso, volvemos aquí y refrescamos la página. Ya ves, hay más espacio, su dedo del pie lo compensó. Eso es maravilloso. Eso es lo que queremos. Ah, Ahora movamos los datos sobre un poco diciéndole el lado izquierdo del ritmo, queremos moverlo sobre un poquito. Entonces otra vez. Vamos a rodear todo esto con un div. Las cuatro líneas que queremos separadas con las salsas que vamos dar y luego código de estudio visual nos está recordando Tenemos que tener un final. Entonces tomamos eso y lo ponemos al final. Ahí estamos. OK, Y ahora necesitamos otra clase. Llamaremos a estos datos de clase y volveremos al CSS. Ponga un dato de pato. Está bien. Y ahora vamos a hacer un margen a la izquierda. Ahora, esta vez en lugar de pixeles, iban a usar algo llamado vista con Y la razón por la que vamos a hacer eso es así si ves la página en un smartphone ah o en una tableta u otro dispositivo que no sea un portátil o pantalla de escritorio, que automáticamente encogerá tus dimensiones por ti y hará los ajustes. Entonces ahí es donde vamos a hacer eso. Así que vamos a hacer 20 ver con y ver qué va a hacer eso por lo 20 ver con datos. Se refresca la página. No está mal. Está bien, eso se ve bien. De acuerdo, entonces , uh, esto parece ser un avioncito, así que vamos a Mitt poner todos estos en una caja. Entonces para hacer eso, vamos por aquí Ahora, hay un par de maneras en que podemos hacer esto. Ah, pero lo que vamos a hacer porque queremos cada uno de estos por separado en una caja, vamos a poner una clase en la etiqueta H dos en lugar de una etiqueta div. Y tú puedes hacer eso. Entonces use class igual a box, y luego solo copiaremos y pegaremos para los otros. Y eso significa que tendremos la misma caja para cada uno de estos, ¿de acuerdo? Y que eso Y ahora vamos a ir al estilo CS s y estilo, La caja euronews bloquea. Y lo que vamos a hacer primero es que vamos a crear una caja literal usando lo que se llama un comando border. Por lo que bordean tres píxeles, morado sólido. Ahora, lo que esto significa es que vamos a tener una caja alrededor del texto. Las líneas de caja serán de tres píxeles, um, con y será sólida en lugar de una línea punteada, por ejemplo, y la línea será púrpura. Entonces una vez que hemos hecho eso, volvemos atrás y refrescamos la página. Y ahí estamos, excepto las cajas aire van más largas de lo que queremos. Entonces hagamos otra cosa. Quieres un margen, ¿verdad? Correcto. Y de nuevo, vamos a usar vista con y vamos a probar una vista 50 con y ver qué hace eso. Entonces un margen, ¿verdad? 50 vista con en que los encogidos son cajas para nosotros. Maravilloso. Excepto que las cajas aire tipo de tocar el texto. Y queremos tal vez uno un poco de espacio ahí. Entonces veamos si podemos conseguir un poco de espacio. Entonces para hacer el poco espaciado, usa el comando de relleno y quieres que queria estar todo alrededor del texto para que no utilicemos arriba abajo izquierda, derecha, Aunque pudimos. Entonces vamos a usar 10 píxeles para este porque es una longitud pequeña. Entonces vamos a usar píxeles y luego hacemos esto, y como pueden ver las cajas o más grandes, aspecto maravilloso, bastante bueno hasta ahora, eso es maravilloso. Entonces vamos a compensar las cajas con un color de fondo para que las cajas se vean un poco diferentes al fondo. Entonces hagámoslo. Vamos a hacer un color de fondo libra. Ahora te das cuenta de que esto es diferente al color de fondo superior porque esto para todo el cuerpo. Pero este fondo colorea sobre Lee para la caja. Eso es lo que eso significa. Entonces, niñita, Prueba beige si eso y guarda eso. Y refrescamos la página y vemos qué pasa. Y ahí, Uh, eso se ve bastante bien. Por lo que ahora estamos listos para hacer el archivo javascript. 6. Configura la llamada de API: Ahora estamos listos para comenzar con JavaScript, pero antes de usar cualquier javascript, necesitamos poder obtener algunos datos con los que trabajar. Entonces vamos a ir al aire libre, ya sea un p i, que es ese Open weather map dot org slash ap I y vamos a ver qué tipo de datos queremos recuperar el clima. Ap. Ofrece todo tipo de datos para el clima datos meteorológicos actuales tres se pronostican, previsión de 16 días y todo tipo de otros datos que podemos utilizar. Ahora mismo, sólo vamos a utilizar los datos meteorológicos actuales. Entonces vamos a ver el A P. I, doc y en eso vemos que podríamos obtener los datos meteorológicos actuales por nombre de ciudad Ciudad I D coordenadas geográficas, código postal y todo tipo de otras formas de obtener los datos. Para poder obtener los datos, hay que tener lo que se llama una clave ocho p I. Entonces lo que debes hacer para conseguir una llave A p I es inscribirte. Por lo que crea una cuenta y rellena la cuenta de criatura en blanco. Una vez que hayas creado tu cuenta, inicias sesión y luego puedes dar click en una clave P I y obtener tu clave A P I. Yo no voy a hacer esto aquí, pero obtendrás tu llave A P i. Te lo mostraré. Será una cadena muy larga de letras y números. Después vuelves a la A p I y necesitamos averiguar qué formato necesitamos usar para retirarnos. Ahora vamos a recuperar por nombre de ciudad. Por lo que aquí está nuestro A P I call format. Y así vamos a copiar esto y lo vamos a pegar aquí ahora, Para poder hacer una A P que llamo con script Java, necesitamos tener una necesidad de tener esto. Necesitamos tener una u r l que podamos usar que tenga la clave en ella. Ahora para eso, vamos a crear una variable. Ahora, las variables son cosas que podrías recordar de la clase de matemáticas. Podría haber visto X igual a Y más Z donde X variables weinsier en javascript me declaran variables. Podemos hacer eso de una de tres maneras. Usar const. Se puede utilizar un ascensor. Podemos usar una feria, y la Const simplemente significa que no esperamos un cambio extra. Por qué significa que esperamos Deja significa que esperamos por qué cambiar. Y hay uno o uno. En este caso, vamos a usar a Const porque no esperamos que esto cambie. Será la misma llamada cada vez. Y vamos a llamar a esto algo descriptivo llamado u R L. Y vamos a hacer un igual. Y ahora queremos usar esto. Entonces vamos a hacer eso y vamos a cerrar los espacios, lo cual siempre es una buena idea. Ahora, esto será una, um, llamada a una dirección web. Entonces para una dirección web, necesitamos http y casi lo tenemos aquí. Tenemos que escoger nombres de una ciudad. Vamos a escoger Chicago sólo con fines de ilustración. Y ahora tenemos que poner nuestro té. Ahora, la forma en que hacemos eso es usar un ampersand con AP. D igual y luego después de eso es la clave. Ahora ten aquí fakey constructivo otra vez, va a ser una cadena de letras y números. Vamos a poner eso ahí y luego vamos a poner eso entre comillas. Y ahora con esto, podríamos hacer lo que se llama A P. Llamo al mapa meteorológico abierto con el fin de obtener nuestros datos, y lo discutiremos en la siguiente lista. 7. Recuperar los datos: Ahora vamos a trabajar con llamadas de script Java y para poder usar llamadas JavaScript, vamos a usar algo llamado Jake Weary. Por lo que necesitamos alertar html índice que estamos usando J Query. Entonces vamos a G Weary CD in y damos click en el CD en, y quieres usar el 1er 1 J consulta core 3.3 punto uno un comprimido usado que hacemos una copia sobre esto, hecho, en la h t. Y ahora y ponerlo aquí y el JavaScript va al fondo y sólo lo vamos a poner por encima de la llamada al clima J s. Y ahora vamos a ir al clima J s y empezar a trabajar con esto. Entonces, ¿qué necesitamos hacer para recuperar los datos del clima? Ocho p. i. Y por cierto, un P I. P significa interfaz de programación de aplicaciones. Es una interfaz. Entonces vamos a usar lo que se llama llamada Ajax. Y este es el formato polluelos y, como de costumbre, código de estudio visual lo está llenando en su Ajax con el frente inicial, la temporada abierta, uh, verdaderamente ortopédico y luego cerrando rizado y luego cerrando paréntesis, y vamos a hacer toda la acción aquí dentro. Entonces vamos a empezar contigo R l Ya estás enfermo. Esta u r l le dice que lo vamos a mandar un u r l y esta u R l coincide con esto. Podríamos haberla llamado cualquier cosa podría llamarlo nombre. Podríamos haber puesto nombre aquí y nombre aquí. Eso está bien, pero ponemos u r l Así que eso es lo que es. Y ahora vamos a decir sobre el éxito, es decir, los datos han sido recuperados con éxito. Vamos a poner todos los datos en una variable llamada resultado. Y de nuevo, usamos el cierre abierto, verdaderamente aparatos ortopédicos. Vamos a cerrar esto, y toda la acción va dentro de las llaves aquí. Entonces, ¿qué tipo de acción lo queremos primero? Bueno, al principio solo queremos confirmar que tenemos datos, así que vamos a hacer resultado de consola. Y entonces lo que eso significa es poner el contenido de resultado que es, poner los datos que hemos recuperado del clima abierto ap I en resultado y luego poner todas esas cosas en la página Web. Y ahora vamos a mirar la página Web. Una vez que hemos guardado nuestro código sobre si dot J s, volvemos a nuestra página y hacemos refresco. ¿ Y dónde están nuestros datos? Bueno, está en la página, pero tenemos que hacer un clic derecho, inspeccionar y mirar lo que se llama las Herramientas de desarrollo con el fin de ver si estos aire llaman Herramientas de desarrollo y esto tiene el HTML para la página. Pero no hicimos los registros de consola. Vamos a dar click en Cónsul y hay objeto que son nuestros datos. Ahora, si recibes un mensaje de error, asegúrate de comprobar y ver que Jay Query está en la página HTML. Asegúrate de que tu llave esté en el lugar correcto. Asegúrate de que todo esté escrito correctamente y de que tengas el número correcto de llaves . Consulta todas esas cosas si recibes un error. Pero no tenemos un árabe. Contamos con nuestros datos. Por lo que los datos están en un objeto y el objeto es simplemente una manera de dedo del pie. Organiza tus datos. Si quieres saber más sobre objetos, puedes ir a W tres escuelas dot com y buscar objetos JavaScript, y te explicará todo sobre qué es un objeto y cómo está organizado. Pero te mostraré lo que necesitamos obtener del objeto aquí mismo. Tenemos que hacer click en la flecha, y ahora tenemos algunos datos. Eso es genial. Dice el nombre de la ciudad de Chicago, que es maravilloso. Tenemos temperatura. Genial. Tienes una velocidad del viento aquí mismo. Todavía no tenemos condiciones del cielo, así que vamos a empezar a hacer clic en flechas. Y resulta que sé que es esta flecha de aquí. Y tenemos descripción, Cielo despejado. Entonces tenemos los datos con los que necesitamos trabajar. Ahora necesitamos interpretar estos datos. Por lo que necesitamos volver a la página de datos meteorológicos actual en el mapa del tiempo abierto y desplazarse hacia abajo , y vemos que hay un lugar. Las pláticas por encima de Jason y Jason es la forma en que se organiza el objeto. Jason es sinónimo de notación de objetos JavaScript sin empleo, y eso es lo que queremos porque estamos trabajando en JavaScript. Entonces bajamos y miramos los parámetros y vemos qué tenemos aquí. refinamiento de la temperatura es la temp principal del punto y es en grados Kelvin. Entonces vamos a tener que hacer algunos cálculos, meternos en Fahrenheit. La velocidad del viento es de metros por segundo, así que vamos a tener que hacer algunos cálculos. No ratonaba por hora, y luego tienes un nombre, nombre ciudad. Y tenemos, um, condiciones, condiciones, si descripción, si descripción dentro del grupo. Entonces tenemos todos nuestros datos, y así es como decimos lo que tenemos. Entonces lo que vamos a hacer entonces, para el clima de hoy, es que vamos a agarrar primero el nombre. Y el nombre es Chicago aquí. Esa es la más fácil de atrapar. Entonces vamos a volver a nuestra página y vamos a ver si podemos agarrar estos datos. Ahora dice su nombre. Escribe tu nombre, pero tenemos que poner algo delante de él porque recuerda, los datos se pusieron un objeto llamado Result. Y recuerda que enlos datos meteorológicos e, todo está punteado. Entonces volvemos aquí a nuestro código y vamos aquí y no vamos a querer sólo ver si podemos conseguir el nombre. Entonces vamos a los resultados del registro de la consola. Ese es el nombre de los objetos en y nombre, que es el lugar dentro del objeto que iss. Hacemos eso, guarde eso, regresamos aquí, actualizamos la página y volvemos a hacer el registro de la consola. Y aquí está nuestro objeto en la parte superior. Y entonces aquí está nuestro nombre. Chicago. Entonces tenemos nuestro nombre. Sabemos que podemos obtener el nombre del nombre del punto de resultado y podemos ir desde aquí. 8. Colocar datos en la página web: Ahora lo que queremos hacer es que queremos poner todos los datos en la página Web. Entonces, empecemos con el nombre de la ciudad. Esa es la ubicación. Entonces para poner eso en la página web, vamos a hacer uso de J cansada para poder hacer eso. Hacer hombre como esta ubicación. Tengo un texto que va a poner un texto y dar como resultado el nombre. Recuerda, Resultado Ese nombre es Chicago. Por lo que en ubicación en el lugar llamado Location, vamos a poner Chicago. Eso es lo que significa el comando. Entonces volvemos al índice html y necesitamos ubicación, y tenemos algo así. Entonces pongámoslo aquí mismo en Chicago en lugar de ubicación aquí. Pero tenemos que hacerlo para que Jake donde lo reconozcas? Entonces vamos a poner Span span es sólo un titular. I d iguala ubicación. Y luego tenemos que cerrar span, que es lo que el código de estudio visual nos está diciendo que hagamos. Por lo que eso significa el tiempo actual para lo que fuera en la ubicación y el yo d. Corresponde a hashtag toothy justo aquí. De acuerdo, si tienes una idea, son las señales hashtag para indexar un TML que esa es ubicación idee. Entonces volvamos a nuestra página Web y actualicemos el tiempo actual para Chicago. Ya lo tenemos. Estamos progresando. Bien. Lo siguiente que vamos a probar es la condición del cielo. Entonces vamos a hacer algo de espacio aquí. Y pudimos ver debajo de esto que está en descripción del tiempo. Entonces vamos a probar eso. Excepto cuando hicimos esto. Aquí inspeccionamos. Objeto de consola. Ahí está el clima. Ahí está la descripción. Pero ahí está este cero aquí. Entonces, ¿qué es eso? Cero. El cero ahí nos está señalando que dentro del objeto hay una matriz. Un array es simplemente una secuencia de elementos. Puedes buscar script Java, un aumento en W tres escuelas y te dirá ahora esto es cero Índice, lo que significa que esta matriz de autos aquí esto es índice cero. Esto es índice uno, y esto es índice a pesar de que tiene tres elementos lo 012 Entonces lo que esto significa aquí es que es el primer elemento porque el elemento cero y la matriz aquí nos está diciendo que has conseguido array con solo un ítem en ella y el primer ítem es cero. Entonces vamos a decir descripción del tiempo cero punto. De acuerdo, entonces ahí es donde está la condición del cielo. Todo el camino, por lo tanto es resultado punto punto punto meteorológico descripción Ahora tenemos que poner esto en. Consulta J formada. Ponlo en la página. Esta vez voy a llamar a este tipo y está en forma de texto. Cierra. Imprimir el índice de cese y anti semi colon. Puedes usar la formación de span I d es igual esta vez Es cielo va a cerrar lapso eso. Vuelve aquí. Aquí. Vamos a maíz Saidiya aquí. Eso podría ser. Y así lo refrescamos de nuevo. Cielo condición cielo claro Maravilloso. Estamos haciendo fantástico. De acuerdo, vamos a ver si podemos hacer la temperatura. Por lo que inspeccionamos de nuevo. Consola, objeto. De acuerdo, Temperatura. Ahí está la temperatura ahora las temperaturas y Kelvin Está en Maine y su en temp Así que tenemos que hacer algunos cálculos con la temperatura. Por lo que javascript es maravilloso para hacer cálculos. Hay muchas formas de calcular una temperatura Fahrenheit de Kelvin y puedes buscarlas en Google. Voy a usar una fórmula en particular que me funcione. Entonces, declaremos una variable F para representar a Fahrenheit. Entonces que si es igual y sabemos que la temperatura está en resultado. Ese es nuestro objeto. Y fue en maine dot Kemp y llenamos el resto de la fórmula aquí y menos yo punto 67 Así que esa es nuestra fórmula para la temperatura que nos dará la temperatura en Fahrenheit. Um, los operadores matemáticos para el script Java son los mismos que con los que estás familiarizado. Menos significa menos más significa más slash significa división y estrella significa multiplicación. No obstante, vamos a conseguir varios decimales si hacemos este cálculo y queremos un buen número redondo. Por lo que hay funciones en Java script que podemos usar y puedes buscar funciones. Pero esta vez en particular vamos a usar una función. Se llama Math Round, y eso nos dará una bonita ronda de matemáticas de número redondo todo entre paréntesis y lo usó para nuestros cálculos. Ahora vamos a tener un buen número redondo. No obstante, cuando JavaScript hace cálculos matemáticos, pone los números en binario, transforma los números en la pantalla a binarios, y así necesitamos transformarlo de nuevo de Brian Eri dedo del pie un número que podamos mostrar en la pantalla. Por lo tanto, respecto a usar un método de script Java y puedes buscar muchos métodos en Google. Pero voy a usar una justa y llamada dos cadenas así que f punto a cadena transformará el número de un binario a una forma que podemos poner en la página y hablar de ponerlo en la página. Tenemos que volver a usar RJ Curry. Por lo que esta vez vamos a tirar de los estribos. Claro, va a ser el siguiente, y nuestro número está en Fahrenheit 19 y que eso y así vamos indexar html y lo que hacemos nuevo es volver a tipo. Ya escribo esto para ti. Es span I d igual a temperatura close span antes de ponerlo en la página. Entonces hagamos un poco de estilo aquí. Pongamos dos puntos aquí, un par de espacios y luego un espacio y luego grados y guardemos eso. Entonces volvamos a la página y refresquemos la temperatura. Nueve grados lo estaban haciendo muy bien. Lo siguiente que hacemos es conseguir el viento. Entonces volvemos aquí. Te fijas en nuestro objeto. Vemos que el viento está aquí y va a ser viento punto velocidad alféizar águila de nuevo a nuestro script Java aquí y empezamos a pensar en el viento ahora que el viento se da en metros por segundo. Por lo que necesitamos transformar eso en MPH. Y la fórmula que vamos a utilizar para eso va a dejar que la velocidad del viento sea igual a masa redonda y su resultado velocidad del viento y esa dividida por 0.44704 Eso nos debería dar a donde queremos ir ahora. Algo que quiero que anoten aquí. Velocidad del viento. Tienes una letra mayúscula en el medio. Esta es una variable escrita en lo que se llama caso Camel. Eso es. Combinas dos o más palabras y capitalizas cada palabra después del 1er 1 Esto es bastante estándar en el script Java. No es necesario utilizar la consulta J para obtenerlo en la página. Entonces vamos a poner en Jaqui reforma viento frío, siguiente velocidad del viento, excepto que eso no es texto. Está en binario. Por lo que necesitamos recordar que necesitamos ponerlo en forma de cuerda. Entonces vamos a usar la velocidad del viento para encadenar y luego vamos a hacer este triunfo, así que eso nos debe llevar a donde queremos ir ahora. Vamos al índice dot html y lo ponemos ahí y hacemos span otra vez, y la idea es viento. Y vamos a ver si tenemos eso fuera, gana siete MPH. Eso es genial. Ahora tenemos una página Web completa. Podrías parar en este punto y tener una página Web perfectamente adecuada. Um, si quieres que este sea tu proyecto, está bien. Um, está encontrando perfectamente podrías hacer modificaciones a eso. Pero quiero mostrarles formas que podríamos mejorar incluso en esto, por lo que esa será nuestra siguiente lista. 9. Limpieza de código: Ahora veamos. Haría que el código fuera más eficiente. En primer lugar, podemos agregar comentarios. Aparecen comentarios en el código, pero no en la página Web. Sus diferentes formas para el índice, el estilo y los archivos Js. Entonces aquí está para el archivo HTML. A ver, estos son los agradecimientos. Eso es un comentario. La forma más fácil de hacer esto, para resaltar esto y luego en una slash de comandos de Mac o en una máquina Windows Barra de control. O podrías simplemente teclear estos. Pero así es como designas un comentario en la h t m l en el, um, CSS. Es un poco diferente. Entonces dices: Pon 18 relojes, Dega y tan alto así. Y de nuevo, solo puedes escribir los's o simplemente usar el atajo de teclado, lo que prefieras, y luego en JavaScript sigue siendo diferente. Entonces pongamos esto la ubicación. Entonces esos son los de los comentarios en script Java. Ahora bien, si bien nuestro código es perfectamente adecuado para la página, hay formas más eficientes de agregar el texto a la página con Jake cansado, y eso es usar algo llamado el formato E. S six, que puedes buscar en Google si quieres más información, pero solo déjame mostrarte cómo hacerlo aquí. En lugar de escribir el Fahrenheit aquí, vamos a escribir algo más iban a decir levantar, mostrar. Tim, este es nuestro caso de camello otra vez, igual. Y ahora usamos el trazo de tecla muy superior izquierda eso y decimos signo de dólar de temperatura. Sí. Y lo que es este f corresponde a este f aquí, así que ya no necesitamos esto. Y lo que significa el signo del dólar y los corchetes es que la temperatura es un literal y este es un número, y así no hay que transformar el número en un número de texto. Simplemente puedes usar esto y eso lo hará automáticamente. Y ahora queremos una señal de grado. Entonces, ¿cómo se hace una señal de grados? Um, hay formas de hacer esto. Y los símbolos de signo de grado en html, que es lo que vamos a poner en la página es ampersand. Um hashtag 176 semi colon. Eso podrías hacer esto, pero queremos sumar nuestra propia f. Um pero así solo vamos a usar el símbolo de grado, y eso es justo aquí. Esto es que todos los códigos puntean net y puedes buscarlo ahí arriba. Entonces vamos a volver atrás y vamos a poner en el símbolo de grado, etiqueta hash 176 semi colon. Y luego vamos a poner en nuestra propia f. Ok, entonces ahora tenemos eso. Y aquí abajo, tenemos que cambiar esto a vamos a tener que cambiar cardo html porque ya no estamos fuera poniendo sólo texto. Ruta poniendo HTML, esto es HTML. Esto se transformará en html y esto es HTML. Y en lugar de Fahrenheit, vamos a poner pantalla tentar la temperatura mostrada, y podemos agregar un comentario a ese efecto. Visualizar la temperatura. Está bien. Y que guardamos eso. Y tú regresas aquí y nosotros nos refrescamos. Como pueden ver, tenemos temperatura dos veces. Ahora. ¿ Por qué es eso? ¿ Qué? Tenemos que volver al código y vemos ponemos temperatura aquí para poner en la página, pero nos olvidamos de sacarla aquí. Entonces vamos a sacar, llegar aquí, y vamos a sumar un I d igual temperatura. Podríamos tener una clase una idea en la misma Así que realmente no necesitamos nada más que la clase y yo d aquí. Y las etiquetas que te muestran lo grande que va a ser el lettering. Entonces vuelvo a esto. Comprueba eso. ¿ De acuerdo? Y ahí está la temperatura por la que ponemos el yo d. Entonces volvemos al allá. Ahora lo tenemos. Está bien, eso está bien. Ahora podemos hacer lo mismo por la ubicación, el viento y las condiciones del cielo. Entonces, empecemos con eso. Así ubicación iluminada pantalla ciudad enfría el clima actual en Así que Oh, cualquier día. Entonces el nombre y así Michael termina y luego ubicación es igual Es html Obtiene el final rizado ortodoncia html y es html display city ahora play city, y luego tenemos que volver aquí y sacar todo esto. Cambie el i d a. De acuerdo, así que vamos a revisar eso. Está bien, eso funciona. Entonces ahora probemos el viento. De acuerdo, así que esto se mantiene igual, Y en lugar de esto, tenemos viento splay en lugar de eso iguala realmente corsé en velocidad. Realmente rompe MPH, y esto se convierte en viento de visualización, y esto se convierte en html Volver al índice html viento encendido y cerrar esto. Todo lo que necesitamos es ID igual al viento. Echa un vistazo a eso. Sigue trabajando. Bien. Último una condición cielo. Ahora hacemos lo mismo para la condición cielo cielo exhibición cielo enfría cielo condición cielo, signo de dólar, corsé rizado. Y queremos esto y Curly corsé y línea. Está bien. Y entonces esto sube, señor Knorr. Y luego esto se remonta a html y esto va a mostrar. Scott, vuelve aquí Y todo lo que necesitamos es el yo d para el cielo y volver y comprobar esto. ¿ De acuerdo? Todo funciona maravilloso. Por lo que esto limpia considerablemente el código y hace más eficiente y hace más legible. 10. Añade imágenes: Entonces consigamos un fondo más interesante para la página Web. Entonces veamos las fotos obedecen. Ese es uno de mis lugares favoritos para conseguir, um, imágenes. Están libres de regalías, y puedes usarlas con fines comerciales. Entonces vamos a ver si podemos conseguir unas puestas de sol de color marrón para las puestas de sol. Este deja llevarse éste, y es una descarga gratuita para cometer uso comercial, no se requiere atribución. Entonces eso es bueno. Podemos usarlo y descarga gratuita. Y este es este es un buen tamaño. Por lo que solo tomamos descarga y lo conseguimos. Pero ya tengo esto descargado, y lo puse en mi escritorio y renombré a algo que era un nombre más corto. Y así lo que necesito hacer entonces, es que necesito poner esta imagen en la carpeta. Recuerda, tenemos una carpeta que se llama si el Teczar Index HTML o CSS estilo y si CSS necesitamos poner esto en esa carpeta una copia de su y ahí está. Entonces lo que hacemos ahora es volver al código para esto, y estamos volviendo al estilo C s. s. y vamos a hacer en lugar de este 'll. Vamos a hacer una imagen de fondo y lo que necesitamos ver eres l Y como está bien, y luego sacamos esto porque ya no vamos a usar el fondo del avión, Vamos a usar el fondo de la imagen. lo guardamos. Nosotros refrescamos eso. Y ahora tenemos nuestro maravilloso ese suelo, aunque, um, no es um, blanco como lo habíamos imaginado. Por lo que necesitamos hacer un par de ajustes. Entonces hagamos esos ajustes aquí. El ajuste que quiero hacer ese tamaño de suelo suspira 100% lo que significa que queremos que el fondo cubra toda la página Web. Altura mínima. 100%. Ese es otro ajuste a hacer y con el 100%. Por lo que queríamos llenar toda la pantalla. Por eso estamos haciendo todos estos ajustes CSS aquí. Entonces volvemos y ahí estamos frescos. Eso es ahora tenemos toda la imagen en la página. Ah, lo otro es que esto no se contrasta Bueno, entonces tenemos que hacer algo con eso. El modo en que hacemos mejor el contraste de texto es esto Primero que nada, sabemos que ya tenemos el encabezado con su propia clase, por lo que eso nos ahorra algo de codificación. Entonces volvemos al estilo CSS y ahí está el encabezado y hay algo llamado color y el color significa el color del texto. Entonces usemos eso y hagamos que el color sea igual al blanco de los politicos de colon. Guarda eso. Vuelve aquí, refresca sus Ahora tienes un amargo contraste. De acuerdo, lo estamos haciendo bien. Ahora digamos que queremos agregar una imagen a aquí. Tenemos la imagen de fondo. ¿ Qué decir que queremos agregar alguna otra imagen ahí dentro, Así que queremos agregar, digamos, un hijo. Entonces tengo un hijo ya salvado. Entonces déjame poner el sol y me dieron esto de recoge un cebo a Sun Tiantian. Ahí está el sol. Ahora que tenemos imagen de nuestro hijo, ¿ Dónde la queremos poner? Bueno, lo ponemos en el índice html. No lo ponemos en segundo plano porque no es un fondo. Lo ponemos en el índice html. Entonces digamos que queremos dejar el sol por encima de la cabecera. Entonces esto es lo que hacemos. Decimos fuente de imagen es igual al nombre con la imagen hijo PNG y siempre es bueno tener un altar, lo que significa que si la imagen por alguna razón no aparece, tenemos un texto para poner en su lugar. Ese hijo lo cierras, lo guardas, vuelve atrás y lo pones aquí. Excepto que es un poco grande. Entonces veamos qué podemos hacer al respecto. Volvemos aquí y ponemos enfrías bien y esto no son píxeles. Ponemos altura de 50 pixels y queremos con 50 pixels. Duerme con papá en, Guarda eso, vuelve atrás y refresca. De acuerdo, es camino por aquí. Podemos tenerlo hasta aquí si queremos. Eso está perfectamente bien si quieres tener la imagen ahí. Pero pongámoslo en el medio y hay una manera realmente fácil de ponerlo en el medio porque el clima de hoy ya está centrado. Podemos simplemente mover esta línea a aquí y automáticamente se centrará porque el encabezado de clase está centrado en todo en el Div. Entonces haz eso y lo tenemos. Por lo que ahora tenemos una página web de buen aspecto 11. Conclusión: Ahora tenemos un conjunto completo de archivos para hacer nuestro sitio. Tenemos el índice HTML, ¿cuál es éste? Tenemos nuestro estilo CSS, ¿cuál es este? Y tenemos nuestro javascript, que es este y todo lo que necesitas hacer con el script Java es poner tu, um, clave aquí tu propia clave, y poner un conjunto de comillas después y un punto y coma después y está hecho, se puede cambiar la ciudad. Si vives en otra ciudad y quieres tener tu propio pronóstico del tiempo personal, puedes decir Denver, guarde eso. Vuelve aquí y consigue el clima para Denver. Si vives en una ciudad como un San Francisco, necesito poner un plus arena más amigo. Eso creo y poner eso ahí Así tenemos el clima actual en San Francisco va a volver a ponerlo. Chicago aquí haz eso para mostrarte que si quieres agregar cosas como la humedad o la e um, tiempo o lo que sea las nubes, está todo aquí, y solo puedes hacer clic en éstas y añadir las de y también ir con dientes. Tiempo abierto AP. Averiguo en qué formato están en exhibición. Esos si quieres. Por lo que hay muchas cosas que puedes hacer aquí. Puedes cambiar los estilos porque sabes CSS ahora puedes cambiar el fondo. Se pueden cambiar las imágenes, cambiar las fuentes. Si quieres hacer una página que vaya a la derecha en la web en lugar de solo son página simulada, puedes conseguir un sitio de hosting, usar su panel de ver, y todo lo que tendrías que hacer ahí es copiar todos estos archivos, estos tres archivos más estas dos imágenes justo ahí. Y tendrías tu propia página web personal que tiene tu propio clima actual para tu propia ciudad. Um, para que puedas hacer de este tu proyecto, puedes publicar tu proyecto, puedes escribir críticas y puedes seguir mi perfil. Por lo que ahora tienes todo para armarlo todo. Y les deseo la mejor de las suertes. Y les agradezco su atención. Está bien,