Bienvenido de nuevo.
Así que hemos aprendido los conceptos básicos de flask, entendemos lo que hacen los servidores y también sabemos lo que hacen los
navegadores.
Pero seamos honestos aquí.
Esto es un poco aburrido.
Quiero decir, esto no es impresionante.
Si le muestras esto a un posible empleador, te mirará como un loco.
Así que construyamos un portafolio atractivo basándonos en lo que hemos aprendido hasta ahora.
Ahora tengo un regalito para ti.
Ese es el hecho de que no tendrá que escribir su propio HTML y JavaScript porque, nuevamente, este no es un curso
de desarrollo web.
Y afortunadamente para nosotros, si busca en Google y está en línea para algo como plantillas gratuitas o
plantillas sin HTML, puede encontrar algunos sitios web realmente atractivos que puede usar de forma gratuita.
Por ejemplo, echemos un vistazo al universo aquí y lo vincularé a este recurso para que usted también pueda echarle un
vistazo si lo obtengo con una vista previa.
Fíjate, tienes un pequeño sitio web o una página de portafolio que puedes usar.
Qué genial es eso, y en realidad ya es compatible con tabletas y dispositivos móviles, por lo que todo ya está preconstruido para
ti.
Eso es muy bueno, ¿verdad?
Entonces, ¿cómo podemos usar esto?
Bueno, vamos a descargarlo y, por cierto, a medida que lo sigue, puede usar el
que desee.
Pero por ahora, usemos el universo uno, solo porque hay un pequeño astronauta aquí, se ve muy
bien.
Descarguemos esto y veamos qué sucede.
Está bien.
Recibo una pequeña pregunta que dice, ¿cómo queremos descargar la plantilla?
En nuestro caso, queremos elegir HTML.
Y ahí lo tienes, obtenemos una pequeña carpeta de Zeph y ahora tenemos esto descargado, así que abramos
esto.
Y, vaya, eso es un montón de archivos y carpetas.
Entonces, ¿qué debemos tomar de aquí?
Bueno, hay algunas cosas.
Primero, esta es la página de muestra, en realidad no la necesitamos, así que vamos a moverla a la papelera.
A continuación, tenemos activos.
Estos son, bueno, activos diferentes para que nuestra página funcione, como la página de astronautas.
Así que lo mantendremos alrededor.
Y luego tenemos nuestras páginas HTML.
Lo que definitivamente necesitamos.
Y luego parece que tenemos algunos archivos JavaScript y archivos CSS.
Ahora hay un punto gov aquí, que es lo que llamamos un archivo comprimido, un archivo comprimido con G zip.
Así que esta es solo una forma para que el servidor envíe un archivo o el archivo JavaScript, que puede ver son ciento
treinta y ocho kilobytes, pero en forma comprimida, es decir, cuarenta y cuatro kilobytes.
De esta manera, enviamos menos datos al front-end.
Y luego también tenemos algo como un mapa que realmente nos ayuda durante la depuración.
Pero en nuestro caso, no tenemos que preocuparnos por esto por ahora.
Así que eliminemos todos los archivos de mapas y gip.
Así que los trasladaremos a la papelera para que solo tengamos un archivo y un archivo JavaScript y luego todos los
demás sean archivos HTML para nuestras diferentes páginas.
Ahora, lo que vamos a hacer es copiar esto y moverlo a nuestra carpeta de proyecto.
¿Recuerdas esta carpeta de aquí?
Entonces, idealmente, movemos los archivos ASML a las plantillas y los archivos estáticos.
Esos son los archivos CSIS y JavaScript y tal vez los activos aquí.
Así que esas son las imágenes aquí.
Así que hagámoslo.
Tengo mi servidor web aquí.
Primero voy a copiar y pegar lo que acabamos de copiar.
Y movamos todos nuestros archivos HTML.
En nuestras plantillas.
Y sabes qué, eliminemos nuestras plantillas existentes también, porque ya no las necesitamos,
tenemos el bonito HTML Fana.
Y luego, solo tenga todos estos, tenemos un nuevo índice HMO que será mucho más bonito que nuestro antiguo
sitio web, así que queremos usarlo.
Muevamos todo eso a las plantillas.
Y luego hagamos los trabajos y el éxito, así como la carpeta de activos en la estática.
Impresionante.
Entonces, ahora que tenemos esa configuración, regresemos a nuestro proyecto y veamos eso.
Tenemos muchos más correos electrónicos de los que no hemos tenido, pero afortunadamente ya están creados para nosotros.
Ahora, la última parte de la configuración es que debido a que movimos nuestros archivos, necesitamos ajustar los enlaces entre
HTML, CSS, JavaScript y todos los archivos de activos.
Entonces, si hacemos scroll, vamos a HTML indexado.
Vemos que estamos buscando el Vaticano en activos del Vaticano, pero debido a que está en una carpeta estática,
tenemos que agregar estática aquí.
Así que averigüemos dónde más estamos usando los activos aquí.
Muy bien, parece que hagamos esto un poco más grande.
Así que se ve aquí para nuestra imagen de fondo.
Una vez más, estamos buscando la imagen del espacio, pero eso es lo que sabemos en la
carpeta estática y veamos dónde más tenemos aquí y también estática.
Sigamos estáticos. Está bien.
Todo va bien.
Ahora tenemos la carpeta estática y debemos asegurarnos de agregar una barra al frente del punto.
Dot solo significa directorio actual y luego busque en la carpeta estática.
Así que volvamos, asegúrate de hacer eso para todo.
Aquí vamos.
Y ahí vamos.
Ahora, guardemos esto, y no creo que hayamos terminado por completo todavía, pero por ahora, vayamos
a nuestro servidor, DCPI.
Y para nuestra ruta de origen, eliminemos lo que hemos tenido antes.
Y llamémoslo mi función de inicio que no toma parámetros y, en cambio, simplemente regresará por nosotros.
Nuestro correo electrónico índice sin parámetros de Pastan.
Así que salvemos y regresemos a nuestra página.
O mi sitio web y ver qué obtenemos cuando actualizamos.
Muy bien, es un sitio web bonito, bastante feo, pero parece que al menos estamos mostrando algo, pero enseguida nos damos
cuenta de que, mmm, parece que no se está aplicando ningún éxito.
Parece que tenemos algún correo electrónico, pero los enlaces tampoco funcionan.
Una vez más, esto se debe a que tenemos que actualizar los enlaces entre los archivos.
Entonces, lo que haremos es volver al estudio de índice y, en la etiqueta principal, vemos que tenemos nuestra hoja de estilo, nuestro archivo
de acceso.
Pero nuevamente, tenemos que actualizar esto para tenerlo en estático.
Carpeta.
Además del archivo JavaScript, que si nos desplazamos hasta el final, tenemos el archivo aquí,
que nuevamente estará en la carpeta estática.
Muy bien, salvemos.
Y regrese y vea si eso mejora las cosas.
Y mira eso, eso es muy bueno.
Eso sí, esto parece un poco grande porque aumento el tamaño de mi sitio web haciendo el comando más y
menos para que podamos ver mejor.
Pero eso es bastante asombroso.
Ahora, si hago clic en digamos que funciona, hmm, obtengo trabajo, estudio, HTML no existe.
Entonces, ¿cómo podemos arreglar eso?
Ya sabemos cómo hacer eso, ¿verdad?
Todo lo que tenemos que hacer es actualizar estas diferentes rutas para que apunten a la plantilla adecuada.
Ahora, en el siguiente video, te mostraré cómo hacer eso.
Pero quiero que intente hacer esto usted mismo, porque ya lo hemos aprendido.
Intente que el sitio web funcione exactamente como lo teníamos.
Aquí en nuestras plantillas mash up, y nos vemos en el siguiente video.