Gargic Alpacas

Ciudad de la Costa | Nimbus to Now: The History of NASA’s Earth-Observing Missions

Alpacas in the space

High-Level Project Summary

We know that many of NASA's Earth Observations missions inspired the making of several successful movies. That is why we have developed a website which shows the information of all of them in a dynamic way. Our aim is to appeal to any kind of audience and introduce them to the STEM field in a fun way. To do so, we focused on the design. We set up the website with cinema resources such as visual and sound effects. The first thing we see is a starry sky with 8 interactive constellations, each of them represents a decade and each star represents a mission. When we click on it, the animations are displayed with information about each mission and its evolution.

Link to Final Project

https://github.com/joaqwin/NASA-spaceapps

Link to Project "Demo"

https://www.canva.com/design/DAFN79-cNsY/qCdoq5EPSbgWn8-66AWh5Q/view?utm_content=DAFN79-cNsY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Detailed Project Description

Our project is a website that interactively shows information about Nasa's earth-observing missions. We used HTML, CSS, and javascript to create our project and GitHub to create a repository. When we enter we can see several constellations that separate the missions by decades. For example, the constellation of Scorpio has 14 stars, the same number of missions that were carried out in the 2010s, so each star represents a mission. When we click on one of them, it takes us to a page where we can find the constellation and the names of each mission. The idea is to discover each mission one by one, so if we click on a star we can go to a new page. In the centre we will see a short description, this information was obtained from the page that we had in the resources of the challenge, making sure that it is totally official. We created an API where we store all these descriptions with the name of the mission and a certain ID to be able to make functions using good programming practices. We decided to do the styling with CSS, so we designed the title and the constellations in Sketchbook to make it as beautiful as possible because we believe that the most important thing to attract people is the visual part. We wanted to add something more interesting, so on the sides, we can see news, images and their respective information, we obtained them through the NASA API.

The tools we used

Javascript: It is a programming language that is mainly used on the client side and implemented as part of a web browser, allowing improvements in the user interface and dynamic websites. We use it in order to obtain information from the NASA API and to streamline our website.

HTML5: HTML (HyperText Markup Language) is a descriptive language that specifies the structure of web pages.

CSS: CSS (Cascading Style Sheets) is a graphic design language for defining and creating the presentation of a structured document written in a markup language. We use it to style our website.

Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

Canva: Canva is a simplified graphic design software and tools website. It uses a drag-and-drop format and even allows proportionally large and small figures and provides access to more than 60 million photos and 5 million vectors, graphics and fonts. It is used by designers and professionals alike. Its tools can be used for web design as well as for print media and graphics. We use it to create the layout of the page and be able to use it as a guide when programming.

Sketchbook: It is a raster graphics software app intended for expressive drawing and concept sketching and also for making animations. We create our own graphic resources such as constellations.

Visual Studio Code: Visual studio code is a source code editor developed by Microsoft. It includes support for debugging, integrated Git control, syntax highlighting, smart code completion, snippets and code refactoring.

GitHub: It is an Internet hosting service for software development and version control using Git.

Space Agency Data

As we read the information, we realized how fantastic amazing missions are, but there aren't many interesting or fun ways to learn about them. Thanks to this we were inspired more and more to try to develop a way of easy access that attracts all people regardless of their age. We used data from the Space Agency to find out the launch date of each satellite, the instruments used, the purpose of each mission, and how the satellites evolved over the decades. In addition, we used the images NASA API to use the information in our constellations and even set ourselves the goal of creating our own satellite API, and we succeeded.

Hackathon Journey

For us, the experience of being able to participate in Space Apps was incredible. We were able to meet many people and practice teamwork. In addition to learning about NASA's earth-observing missions and seeing how amazing they were. We'd love to be the ones to make the connection. We really liked working together, we learned to divide the tasks and were all able to contribute a little to create something incredible where all our skills come together. We chose this challenge to challenge ourselves when making a web page. Also because the idea of bringing information to everyone seemed both necessary and exciting. We had some problems because we had little time, but we solved them with good organization and planning. We would like to thank NASA for creating these challenges for all of us to participate in, and North Schools for giving us the space to work and giving us the necessary materials for them. As well as the other teams for sharing this day with us.