SoundWave, se ha posicionado en el mercado como la competencia directa de Spotify. Con una calidad de sonido extraordinaria y la gran variedad de canciones que ofrece está ganando adeptos a pasos agigantados. No obstante, quieren acelerar el proceso de subscripción a su plataforma con una nueva campaña de marketing digital.
Han contactado contigo por tu reputación como maquetadora web, y te piden que lleves a cabo el desarrollo de una landing page para buscar nuevos suscriptores. Formas parte de un equipo interdisciplinar donde una UX Designer ya ha construido la maqueta que tendrás que llevar al código. Posteriormente, el equipo de marketing digital posicionará la página en los navegadores.
- La web deberá estar desarrollada en React con TypeScript.
- La web deberá ser responsive.
- Los estilos deberán aplicarse con módulos css, styled components, o algún framework de css.
- La web deberá ser fiel al prototipo.
- La web deberá estar desplegada.
- Se deberá usar SCRUM para organizar el sprint.
- Se investigará qué es react-router-dom y se utilizará para las rutas de la navbar.
- Se aplicará Atomic Design.
- Podéis utilizar hooks y props (pero no es imprescindible).
Imágenes
- landing-page-girl.png
- covers.jpg
- more.svg
- albums.svg
- logo.png
- microphone.svg
- twitter.svg
- Mockup
- Carta gráfica
- How to CSS Style in React
- Styled-components
- React-Bootstrap
- React Semantic UI Tutorial for Beginners
- MUI Core: Ready to use components, free forever
- Ant Design
- React - Una biblioteca de JavaScript para construir interfaces de usuario
- Vite-Typescript
- React-Router
- Repositorio de GitHub.
- Enlace del despliegue.
- Trabajo individual.
- Este sprint, durará una semana. La entrega será el 13/07/2023
- Presentación: Se hará una presentación en conjunto, de cada framework de CSS en React, puesto en práctica. Pero no obviará a nadie de presentar su proyecto.
| 1 | 2 | 3 | |
|---|---|---|---|
| Indicador | Deficiente | Regular | Excelente |
| Maquetar una aplicación | La maquetación no es conforme al mockoup. Hay diferencias notables con el prototipo. | La maquetación respeta la carta gráfica. Pero no termina de ser totalmente responsive. | La maquetación respeta la carta gráfica de la empresa. Adaptar las interfaces al tipo de dispositivo teniendo en cuenta la experiencia del usuario y, en el caso de los dispositivos móviles, las características ergonómicas. |
| Desarrollar una interfaz de usuario web dinámica | Las interacciones del lado del cliente (front-end) no funcionan. | Las interacciones del lado del cliente (front-end) si funcionan. | La web está alineada con la experiencia de usuario, incluyendo la experiencia móvil. La arquitectura de la aplicación se ajusta a las buenas prácticas de desarrollo. Los test garantizan que la página web cumplen los requisitos descritos en las especificaciones. |
| Crear una interfaz de usuario web estática y adaptable | No se aplican los cambios necesarios solicitados en la descripción de necesidades. | Se aplican los cambios necesarios solicitados en la descripción de necesidades. | La interfaz se realiza conforme al diseño de la aplicación. La página web respeta la carta gráfica de la empresa. Se respetan las buenas prácticas de estructuración. La app es accesible desde el navegador, incluso desde un móvil. Se adapta al tamaño de la pantalla. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent