https://github.com/classicoman2/pd1_2021
Enunciat Pràctica 1 de DIW - 2n DAW Dual
https://github.com/classicoman2/pd1_2021
colour-palette wireframe
Last synced: 7 months ago
JSON representation
Enunciat Pràctica 1 de DIW - 2n DAW Dual
- Host: GitHub
- URL: https://github.com/classicoman2/pd1_2021
- Owner: classicoman2
- Created: 2020-10-23T17:53:39.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-04T08:46:52.000Z (almost 5 years ago)
- Last Synced: 2025-01-17T11:13:52.353Z (9 months ago)
- Topics: colour-palette, wireframe
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pd1 - 2021
Pràctica de 2n DAW DUAL del CIFP Francesc de Borja Moll (1on Trimestre)
## ABSTRACT
The theme of this practice is the development of **The website of an Online Game** of your choice.
In this section, to write a short description of your game (less than 100 words)
- [ ] 0.1 - Write a short description of your game
## REQUIREMENTS
Create the interface according to the following requirements:
### 1. Sketch and Wireframe Requirements
- [ ] 1.1 - Create an **Sketch** of the mobile & desktop layouts (1h), export it to jpg/png images and store them inside the folder `/sketch` in this repository.
- [ ] 1.2 - Create a Wireframe based on the Sketch, export it to jpg/png images and store them inside the folder `/wireframe` in this repository. **Make some research on this kind of pages and try to create a layout as realisic as possible**.
- [ ] 1.3 - The project description and wireframe is approved by the **Product Owner**
### 2. Layout Requirements
- [ ] 2.1 - Create a **mobile layout**
- [ ] 2.2 - Create a **desktop layout**
- [ ] 2.3 - The layout is **Responsive** and remains fluid between the breakpoints of the `media-queries`
- [ ] 2.4 - The layout follows (as much as possible) the **Visual Design guidelines** seen in class
- [ ] 2.5 - The layout follows (as much as possible) the **User Experience_ principles** seen in class
- [ ] 2.6 - Choose a **colour palette** and show the colours in the documentation file [using this format](https://docs.google.com/spreadsheets/d/1yDqy-8nK90b1t97e2DgLYaPvoB4jcuA5kv5AuZUdBN4/edit#gid=1182541801). :new:
- [ ] 2.7 - Choose **fonts and sizes** of headings and show them in this documentation file [using this format](https://docs.google.com/spreadsheets/d/1yDqy-8nK90b1t97e2DgLYaPvoB4jcuA5kv5AuZUdBN4/edit#gid=0). :new:
- [ ] 2.8 - Use mainly **CSS Grid** and **CSS Flexbox** to build the layouts. You can't use any framework
- [ ] 2.9 - Use [**CSS Refactor**](https://docs.google.com/document/d/1RXwgikqEfVhopg7zwvnmAQoyMWreQeRa7bCLOodGM3U/edit#heading=h.nlnl9de6q86i) :pill:
- [ ] 2.10 - Use [**CSS Variables**](https://docs.google.com/document/d/1s-aOTgASYY_0LvzCI-lnL6QK8S4FsUZGuUEwYLhjA_M/edit#heading=h.uay6xh8zzrsb) to specify the colors of the color palette :pill:
- [ ] 2.11 - Use [**semantic tags**](https://docs.google.com/document/d/1s-aOTgASYY_0LvzCI-lnL6QK8S4FsUZGuUEwYLhjA_M/edit#heading=h.xs3su5aas2o) :pill:
- [ ] 2.12 - Use some hack to include Header and Footer from separated files. Example: [this JQuery Hack](https://docs.google.com/document/d/1RXwgikqEfVhopg7zwvnmAQoyMWreQeRa7bCLOodGM3U/edit#heading=h.jkbvj42pliv7) :pill:
### 3. Views
- [ ] 3.1 - **Front page**: created mainly using **Grid**. Contains headings and text, images/videos, icons, colours, some kind of login facility, menu .... All the pages will have same header, footer and nav.
- [ ] 3.2 - **Characters page**: A grid with descriptions and images of the characters. Use `players.html` and `players.js` and use the data that is obtained through an API call.
### Project Management & Release Requirements
- [ ] 4.1 - Use a Project Management Tool, for instance use [Github Projects and Issues](https://github.com/classicoman2/skills2020-quick-website-develop) that you can set up in the Github Repository of your project
- [ ] 4.2 - If you don't use Github Projects and Issues, set the link to the Project Management page you've been using at the top of the README.MD file of your repo
- [ ] 4.3 - Create a **Github Release** and insert the link [in this document](https://docs.google.com/spreadsheets/d/1r3_kRMr3bCyDJZAW448TioSksqnoB2WwEnhjdW6GiEY/edit#gid=0)
### Video Presentation
- [ ] 5.1 - Create a video presentation (min 2'30", max 5') of the website, in **English**. Show the layouts for mobile/desktop displays and explain the main components.
### Project Release Requirements
- [ ] Create a **production version** using GULP and a preconfigured Gulpfile. More information [here](https://docs.google.com/document/d/1i6S9bQKPk2kWvi5dLfVLZ16hn2x8-CXe25NQe5UaV78/edit). :new:
- [ ] EXTRA: Try deploying the prototype using a tool like **Jamstack**, **Heroku** etc. and put the link on top of this document (No compta per la nota perquè no és un criteri d'avaluaciò válid pel mòdul)
## SPRINTS
### SPRINT: Checkpoint-1
:watch: `Deadline`: [Here](https://docs.google.com/spreadsheets/d/1r3_kRMr3bCyDJZAW448TioSksqnoB2WwEnhjdW6GiEY/edit#gid=0)
- [ ] S1.1 - A Private Github Repository has been created. Add me - classicoman2 - as a collaborator. Insert the link [in this document](https://docs.google.com/spreadsheets/d/1r3_kRMr3bCyDJZAW448TioSksqnoB2WwEnhjdW6GiEY/edit#gid=0)
- [ ] S1.2 - Tasks 0.1 1.1 1.2 1.3 have been completed
### SPRINT: Checkpoint-2
:watch: `Deadline`: [Here](https://docs.google.com/spreadsheets/d/1r3_kRMr3bCyDJZAW448TioSksqnoB2WwEnhjdW6GiEY/edit#gid=0)
- [ ] Structure of directory created as indicated (mirar final del document)
- [ ] The layout for mobile has been completed applying 2.4 and 2.5
- [ ] The colour palette and fonts have been chosen and posted in README.MD (podran ser canviades a posteriori)
- [ ] Hand over a release v0.1
### FINAL SPRINT: PROTOTYPE RELEASE
:watch: `Deadline`: [Here](https://docs.google.com/spreadsheets/d/1r3_kRMr3bCyDJZAW448TioSksqnoB2WwEnhjdW6GiEY/edit#gid=0)
- [ ] End the project and hand over a release.
### Structure of directories
/src
/js
/css
/images
/dist
/docs