Summary  
This chapter covers uploading and managing media files in cloud object storage, retrieving their public URLs, and integrating those hosted assets into HTML code.  

General domain of usage  
Web development


Aprendamos cómo cargar y utilizar archivos de **medios** en nuestro bucket.

Primero, es necesario abrir la pestaña `Objects` y hacer clic en el botón `Upload`.

Se mostrará un **menú donde se pueden seleccionar archivos o una carpeta** que contenga archivos para cargar. Actualmente, para nosotros, **S3** funciona de manera similar a **Google Drive**, por ejemplo.

**Google Drive** es otro servicio de almacenamiento en la nube, pero ofrece **un conjunto limitado de herramientas** para gestionar datos. Para fines de programación, **AWS S3** es mucho más utilizado, por lo que lo estamos usando.

Nota

Es necesario seleccionar **cualquier imagen** y subirla a la plataforma; en nuestro caso, será **una foto de una tortuga**.

Después de subirla, abrimos el archivo cargado y aparece la siguiente información:

Unique identifier of the AWS user who owns this S3 object.

The AWS region where the object is stored, specified as "Europe (Stockholm)" with the value eu-north-1.

The date and time of the last modification of the object, shown here as April 3, 2024, 15:15:08 UTC+3.

The size of the file, 35.3 KB, which is a fairly standard size for an image.

The file format, indicating that the object is an image in PNG format.

The name of the file in S3, in this case, turtle.png, which uniquely identifies the object in the S3 bucket.

Uniform Resource Identifier (URI) pointing to the location of the file in Amazon S3.

Standard AWS resource identifier used to specify a specific resource in AWS.

The file's checksum used to verify data integrity during transmission.

Direct link to the object that can be used to access the file via a browser or HTTP request.

## ¿Cómo usar esta imagen en nuestros proyectos?

Para utilizar este archivo, ya hemos **configurado el bucket correctamente** para que podamos acceder a él desde cualquier origen.

Vamos a escribir una **pequeña página HTML** con un espacio para esta foto.

Podemos insertar la foto **utilizando un enlace** en la etiqueta `<img>` en HTML.

El código para esta foto se verá así:

PGltZyBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMTExOGExM2EtMDI4OC00M2M1LThmZjktZDUxZGEyNWM5MDNlL1NlY3Rpb24yL2NvZGVmaW5pdHktYXdzLXR1dG9yL3R1cnRsZS5wbmciPiAgICAgICAgICA=

Como puedes ver, cuando se ejecuta el código, **se muestra la foto de esta tortuga**.

Todo lo que hicimos fue escribir un enlace a la imagen de nuestra tortuga en la **etiqueta HTML**.

La **foto de la tortuga** no está almacenada en los archivos de este sitio web, ni se descarga localmente en tu dispositivo. En su lugar, este **archivo está almacenado en AWS S3**, lo que utilizamos para acceder y mostrarlo en cualquier página.

También puedes acceder directamente a esta imagen siguiendo <a href="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/turtle.png" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> este</a> enlace.

Ahora, escribamos una **pequeña página HTML** donde describimos la tortuga y damos al usuario la oportunidad de alimentarla.

El código se verá así:

PCFET0NUWVBFIGh0bWw+CiAgPGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCIgLz4KICAgIDx0aXRsZT5HcmVldGluZyBUdXJ0bGU8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iZ3JlZXRpbmciPkhlbGxvLCBJJ20gYSB0dXJ0bGUsIEknbSB2ZXJ5IGh1bmdyeTwvZGl2PgogIAogICAgPCEtLUhlcmUgd2UgaW5zZXJ0IGEgbGluayB0byB0aGUgcGljdHVyZSBmcm9tIEFXUyBTMy4tLT4KICAgIDxpbWcKICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzExMThhMTNhLTAyODgtNDNjNS04ZmY5LWQ1MWRhMjVjOTAzZS9TZWN0aW9uMi9jb2RlZmluaXR5LWF3cy10dXRvci90dXJ0bGUucG5nIgogICAgICBhbHQ9Ikh1bmdyeSBUdXJ0bGUiCiAgICAgIGNsYXNzPSJ0dXJ0bGUtaW1hZ2UiCiAgICAvPgogIAogICAgPGRpdiBjbGFzcz0iYnV0dG9ucy1jb250YWluZXIiPgogICAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24gZmVlZCI+RmVlZDwvYnV0dG9uPgogICAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24gaWdub3JlIj5JZ25vcmU8L2J1dHRvbj4KICAgIDwvZGl2PgogIAogICAgPGRpdiBpZD0iZmVlZE1vZGFsIiBjbGFzcz0ibW9kYWwiPgogICAgICA8ZGl2IGNsYXNzPSJtb2RhbC1jb250ZW50Ij4KICAgICAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+CiAgICAgICAgPHA+VGhhbmsgeW91IHZlcnkgbXVjaCE8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgCiAgICA8ZGl2IGlkPSJpZ25vcmVNb2RhbCIgY2xhc3M9Im1vZGFsIj4KICAgICAgPGRpdiBjbGFzcz0ibW9kYWwtY29udGVudCI+CiAgICAgICAgPHNwYW4gY2xhc3M9ImNsb3NlIj4mdGltZXM7PC9zcGFuPgogICAgICAgIDxwPldoeT88L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgCiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

LmdyZWV0aW5nIHsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLXRvcDogMjBweDsKICBmb250LXdlaWdodDogYm9sZDsKfQoudHVydGxlLWltYWdlIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDIwcHggYXV0bzsKICB3aWR0aDogMzAlOwogIG1heC13aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiBhdXRvOwp9Ci5idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICM0Y2FmNTA7CiAgYm9yZGVyOiBub25lOwogIGNvbG9yOiB3aGl0ZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgZm9udC1zaXplOiAxNnB4OwogIG1hcmdpbjogMTBweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlLCBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQouYnV0dG9uOmhvdmVyIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMDUpOwogIGJhY2tncm91bmQtY29sb3I6ICMzNjdiMzc7Cn0KLmJ1dHRvbi5pZ25vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICNmNDQzMzY7Cn0KLmJ1dHRvbi5pZ25vcmU6aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkMzJmMmY7Cn0KLm1vZGFsIHsKICBkaXNwbGF5OiBub25lOwogIHBvc2l0aW9uOiBmaXhlZDsKICB6LWluZGV4OiAyOwogIGxlZnQ6IDA7CiAgdG9wOiAwOwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKICBvdmVyZmxvdzogYXV0bzsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNCk7CiAgcGFkZGluZy10b3A6IDEwMHB4Owp9Ci5tb2RhbC1jb250ZW50IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmVmZWZlOwogIG1hcmdpbjogYXV0bzsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICM4ODg7CiAgd2lkdGg6IDgwJTsKICBtYXgtd2lkdGg6IDMwMHB4OwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBib3gtc2hhZG93OiAwIDRweCA4cHggcmdiYSgwLCAwLCAwLCAwLjIpOwogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC40czsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdG9wOiA1MCU7CiAgbGVmdDogNTAlOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOwp9Ci5jbG9zZSB7CiAgY29sb3I6ICNhYWFhYWE7CiAgZmxvYXQ6IHJpZ2h0OwogIGZvbnQtc2l6ZTogMjhweDsKICBmb250LXdlaWdodDogYm9sZDsKfQouY2xvc2U6aG92ZXIsCi5jbG9zZTpmb2N1cyB7CiAgY29sb3I6ICMwMDA7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGN1cnNvcjogcG9pbnRlcjsKfQouYnV0dG9ucy1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0=

bGV0IGZlZWRNb2RhbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdmZWVkTW9kYWwnKTsKbGV0IGlnbm9yZU1vZGFsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2lnbm9yZU1vZGFsJyk7CgpsZXQgYnRuRmVlZCA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2ZlZWQnKVswXTsKbGV0IGJ0bklnbm9yZSA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2lnbm9yZScpWzBdOwoKbGV0IHNwYW5zID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnY2xvc2UnKTsKCmJ0bkZlZWQub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICBmZWVkTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7Cn07CmJ0bklnbm9yZS5vbmNsaWNrID0gZnVuY3Rpb24gKCkgewogIGlnbm9yZU1vZGFsLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwp9OwoKZm9yICh2YXIgaSA9IDA7IGkgPCBzcGFucy5sZW5ndGg7IGkrKykgewogIHNwYW5zW2ldLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgICBmZWVkTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdub25lJzsKICAgIGlnbm9yZU1vZGFsLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7CiAgfTsKfQoKd2luZG93Lm9uY2xpY2sgPSBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0ID09IGZlZWRNb2RhbCB8fCBldmVudC50YXJnZXQgPT0gaWdub3JlTW9kYWwpIHsKICAgIGZlZWRNb2RhbC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOwogICAgaWdub3JlTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdub25lJzsKICB9Cn07

Descubre el mundo de la computación en la nube explorando sus tecnologías fundamentales y aplicaciones prácticas en este curso. Comienza con los fundamentos de la computación en la nube y luego enfócate en servicios esenciales de AWS como S3 (Simple Storage Service) para almacenamiento escalable, EC2 (Elastic Compute Cloud) para servidores virtuales y RDS (Relational Database Service) para bases de datos gestionadas. Obtén experiencia práctica mientras aprendes cómo estos servicios se integran para soportar aplicaciones modernas de manera eficiente.

Aprenda sobre la historia y el desarrollo de las tecnologías en la nube, así como el funcionamiento de los servidores modernos y las aplicaciones web. Profundice en los diferentes modelos de nube, comprenda las ofertas de los principales proveedores de servicios en la nube y explore los fundamentos de seguridad que garantizan operaciones seguras en la nube.

Explora un servicio en la nube llamado S3 y aprende cómo configurarlo y utilizarlo. Subirás diversos medios a S3 y también aprenderás cómo alojar un sitio web estático simple en S3.

Sumérgete en la comprensión de qué es EC2 y cómo funciona. Descubre para qué se utiliza EC2, cómo crear y gestionar instancias, y cómo conectarte a ellas desde tu dispositivo. Aprende los conceptos básicos para trabajar con instancias EC2 y cómo desplegar tu propio sitio web en un servidor web EC2.

Aprenda a crear y utilizar bases de datos en la nube. Utilice diferentes tipos, conozca cómo interactúan con las aplicaciones e integre con diversos productos. Las bases de datos en la nube son la forma más segura de almacenar datos.

Uso de Medios en AWS S3

¿Cómo usar esta imagen en nuestros proyectos?