A digital resource 🌐 to learn about them and how to apply them!🧩

Contents 📑

• Brief 🗒️
  • What is "Metodologías de Desarrollo de Proyectos"? 🌐
• Product Design 🧩
• Development 🛠️
  • Structure of the project ⚙️
  • Data of the project 📊
  • Special Features ✨
• Installation 💻
• Deployment 🚀
• Contribute 🎈
• Authors and Credits 📖

Brief 🗒️

What is "Metodologías de Desarrollo de Proyectos"? 🌐

This is a web page 🌐 that includes information of various technology project development methodologies 📊.

In it are the famous approaches (Traditional and Agile) and their main methodologies are exposed.

Its functionality, advantages, components or stages are explained for each methodology and, above all, it is about explaining what type of projects are adapted to each one for greater feasibility.

The raison d'être of this project is that people who are in the process of starting a technology project could have an easily accessible site that concentrates various options for methodologies and makes it easier to choose one of them.

Product Design 🧩

This project was developed with two principles in mind:

• Accessibiliy: The web must be usable for anybody and must be perceptible, operable, understandable and robust.
• Consistent: The web must have the same goal on all of his sections and speak the same way (both visually and written).

Some important foundations that are important to remark are:

• Typography: The web uses the popular font "Poppins" of Google Fonts in three different weights (regular, bold and extrabold) used for headings h1,h2,h3, label's text and normal text p.
• Colors: The web uses a yellow color palette (as brand color) and variations of white for background (in two levels) and variations of black for the text.
• Voice and Tone: The web uses a neutral tone in spanish and is user centered. It is allowed to use emojis in catch phrases and descriptive paragraphs.
• Layout: The desing is Mobile First because this web is oritend to be used as a quick tool for the people so it must have the info distributed with margin and padding with enough size to focus readers.

This foundations can be accesible on the 🧩UI Kit page on the Figma Project.

For the UX design it was developed and prototyped a 📝WireFrame Mobile and subsequently for the UI were designed some atoms and components that were placed on the Hi Fidelity designs for 📱Mobile, 📳Tablet and 🖥️Desktop.

Development 🛠️

This site was developed with Gatsby that is a React-based open-source framework for creating websites. The advantage of using this framework mainly is beacause of its speed on compiling and building, the generation of static sites (that loads faster on the browsers) and the easy way to add SEO on the pages.

Another reason why this page uses Gatsby its because of the large number of plugins it offers, specially this ones used here:

• gatsby-plugin-image for responsive images.
• gatsby-plugin-manifest and gatsby-plugin-offline for adding a manifest and create a service worker for PWA.
• gatsby-transformer-json to parse JSON strings into JavaScript objects that can be queried with graphql.

Structure of the project ⚙️

The site has three main pages:

• Home/Index - The welcome to the site.
• Metodologias - Page where all the methodologies are listed grouped by type (Traditional/Agil).
• NotFound/404 - Page where the user is redirected when the page typed on the address bar doesn't exist on the site.

And one template IndividualMethodology for creating pages dynamically with gatsby-node.js

Data of the project 📊

The data of the methodologies are in two JSON located on /src/assets/data named Agil.json and Traditional.json that have the following structure:

[
  {
    "title": "NameOfMethodology",
    "imagePath": "images/Methodologies/Agile/NameOfImage.extension",
    "content":[
      {
        "type": "ImageConcept",
        "concept": [
          "paragraph",
          ...
          ]
      },
      {
        "type": "section",
        "header": "Heading Text",
        "bodyCopy": "Paragraph below heading",
        "content":[
          {
            "type":"list | numberList | p",
            "list | p ": ["listItem | paragraph", ...]
          },
          ...
        ]
      },
      ...
      ,
      {
        "type": "specialSection | references",
        "content": ["text", ...]
      }
    ]
  },
  ...
]

Note: Only the main content of type section can be used multiple times while ImageConcept, specialSection and references only ones and with preference in that order (the section between ImageConcept and specialSection).

The images of the methodologies are on src/assets/images/Methodologies/ grouped by type Traditional and Agile.

Special Features ✨

• The web has a responsive design allowing a correct visualization on any kind of device.
• The web has on all the pages metatags for improving SEO and, when sharing in social media (like Twitter or Facebook), a previsualization with image and some data of the current page.
• The web is a PWA, allowing to cache the pages (with their resources) in order to have them offline and the posibility of installing the webapp on the device.

Installation 💻

To use this project and develop on it you need to:

1. Clone repository 🖇️

https://github.com/Ruben35/Development-Methodologies-Web.git

2. Change directory & Install dependencies ⬇️

cd .\Development-Methodologies-Web\
npm install

3. Start developing 👾

npm run dev

4. Build website 🛠️

npm run build

Note: This will generate the static assets on the public folder on the root.

Deployment 🚀

The website in this repository was deployed using GitHub Pages and in the package.json there is a special command that clean, build and deploy on gh-pages branch:

npm run deploy

Also, there is a special GitHub Action called GitHub Pages Deploy that deploys also on gh-pages when there is a push on main branch.

Contribute 🎈

If you want to contribute on this project you can:

• Clone this repository, install it as in the installation section and make a pull request on dev branch with your changes in order to evaluate them.
• Add methodologies info in two ways:
  • Opening a issue with the info and image (formated as JSON or in plain text).
  • Cloning and adding the methodology by yourself and opening a pull request on dev branch.

Authors and Credits 📖

• Designed and developed by @Ruben35.
• Info researched by Oscar Gerardo Trejo Rivera.
• Owned by Verónica Agustín Domínguez (Teacher at ESCOM-IPN).