Almacenamiento de Fragmentos de Código en AWS S3
Creamos un código HTML que nos permite alimentar a la tortuga, y en este código, utilizamos una imagen que cargamos en AWS S3 en un bucket público. Sin embargo, es posible que hayas notado que leer el código directamente desde allí era bastante incómodo debido a la gran cantidad de estilos.
Esto nos lleva a la idea de que también podemos subir ciertos fragmentos de código a AWS S3, al igual que hacemos con las imágenes. Por ejemplo, en nuestro caso, sería realmente conveniente subir estilos CSS para nuestras páginas HTML o aplicaciones a AWS, lo que nos ayuda a mantener el código más limpio y organizado.
La gestión de estos estilos será sencilla porque si necesitamos actualizar los estilos en todas las instancias, simplemente podemos editar unas pocas líneas de código en el archivo S3, lo que aplicará los cambios a todas las páginas que referencien el enlace.
Veamos el archivo de estilos que quiero subir al almacenamiento:
style.css
Para agregar un archivo con estilos a AWS S3, primero es necesario crear el archivo y cargarlo en nuestro bucket público:
Para aplicar estos estilos CSS en tu código HTML, solo necesitas utilizar una sintaxis sencilla:
<link rel="stylesheet" href="link to your CSS styles here">
En el caso de enlazar nuestros estilos, esta línea se verá así:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Analicemos cuánto se reducirá nuestro código después de estos cambios y cómo se verá ahora:
index.html
Si haces clic y sigues este enlace, verás el contenido de este archivo, específicamente los estilos que escribí anteriormente. De esta manera, tanto nosotros como los visitantes de nuestro sitio web podemos ver los estilos almacenados en AWS y pueden querer tomarlos prestados de nosotros.
También cabe destacar que podemos subir scripts de JavaScript a S3. Aunque esto no es la mejor práctica porque los scripts suelen requerir edición y trabajo con ellos, en nuestro caso, estamos aprendiendo, así que vamos a hacerlo para optimizar aún más nuestro código.
A continuación se muestra el script que subiremos a nuestro bucket público:
script.js
Ahora, es necesario cargar el archivo JavaScript script en nuestro bucket público:
Ahora, es necesario utilizar la siguiente sintaxis para agregar el script al código mediante el enlace:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Después de agregar el script desde AWS S3, nuestro código para la tortuga se verá así:
index.html
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 4.55Almacenamiento de Fragmentos de Código en AWS S3
Desliza para mostrar el menú
Creamos un código HTML que nos permite alimentar a la tortuga, y en este código, utilizamos una imagen que cargamos en AWS S3 en un bucket público. Sin embargo, es posible que hayas notado que leer el código directamente desde allí era bastante incómodo debido a la gran cantidad de estilos.
Esto nos lleva a la idea de que también podemos subir ciertos fragmentos de código a AWS S3, al igual que hacemos con las imágenes. Por ejemplo, en nuestro caso, sería realmente conveniente subir estilos CSS para nuestras páginas HTML o aplicaciones a AWS, lo que nos ayuda a mantener el código más limpio y organizado.
La gestión de estos estilos será sencilla porque si necesitamos actualizar los estilos en todas las instancias, simplemente podemos editar unas pocas líneas de código en el archivo S3, lo que aplicará los cambios a todas las páginas que referencien el enlace.
Veamos el archivo de estilos que quiero subir al almacenamiento:
style.css
Para agregar un archivo con estilos a AWS S3, primero es necesario crear el archivo y cargarlo en nuestro bucket público:
Para aplicar estos estilos CSS en tu código HTML, solo necesitas utilizar una sintaxis sencilla:
<link rel="stylesheet" href="link to your CSS styles here">
En el caso de enlazar nuestros estilos, esta línea se verá así:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Analicemos cuánto se reducirá nuestro código después de estos cambios y cómo se verá ahora:
index.html
Si haces clic y sigues este enlace, verás el contenido de este archivo, específicamente los estilos que escribí anteriormente. De esta manera, tanto nosotros como los visitantes de nuestro sitio web podemos ver los estilos almacenados en AWS y pueden querer tomarlos prestados de nosotros.
También cabe destacar que podemos subir scripts de JavaScript a S3. Aunque esto no es la mejor práctica porque los scripts suelen requerir edición y trabajo con ellos, en nuestro caso, estamos aprendiendo, así que vamos a hacerlo para optimizar aún más nuestro código.
A continuación se muestra el script que subiremos a nuestro bucket público:
script.js
Ahora, es necesario cargar el archivo JavaScript script en nuestro bucket público:
Ahora, es necesario utilizar la siguiente sintaxis para agregar el script al código mediante el enlace:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Después de agregar el script desde AWS S3, nuestro código para la tortuga se verá así:
index.html
¡Gracias por tus comentarios!
