Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cristianjuarezz/parcial-virbela
Para este proyecto, nos contratan desde una plataforma de e-learning para desarrollar una landing page para el evento del año de la plataforma de e-learning en el metaverso Virbela.
https://github.com/cristianjuarezz/parcial-virbela
Last synced: 12 days ago
JSON representation
Para este proyecto, nos contratan desde una plataforma de e-learning para desarrollar una landing page para el evento del año de la plataforma de e-learning en el metaverso Virbela.
- Host: GitHub
- URL: https://github.com/cristianjuarezz/parcial-virbela
- Owner: cristianjuarezz
- License: mit
- Created: 2023-05-11T18:34:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-12T23:48:56.000Z (over 1 year ago)
- Last Synced: 2024-11-10T16:12:33.171Z (about 2 months ago)
- Language: CSS
- Size: 3.23 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# parcial-virbela
Para este proyecto, nos contratan desde una plataforma de e-learning para desarrollar una landing page para el evento del año de la plataforma de e-learning en el metaverso Virbela.
Figma: https://www.figma.com/file/9aZr4JRG06JCbJAkKAKUYc/Parcial?type=design&node-id=0%3A1&t=fkjF2JjD24vQd2SZ-1
# Tecnologias aplicadas
♠ Html
♦ JavaScript
♥ TailwindCSS
♣ Css
☺ Figma
• PostCSS
• NPM
• Git
# Modo de trabajo
TailwindCSS es un framework diseñado para trabajar con la metodología Mobile First, sin embargo, decidí no trabajar de esta manera porque primero diseñé la versión de escritorio en donde solo establecí una base para trabajar e improvisar a lo largo del proyecto, ya que era necesario para llegar en tiempo a la entrega.
• Lo primero que hago es ver la pagina original para conocer la paleta de colores, fuentes y formatos que pueda necesitar.
A lo largo de la página veo 3 secciones principales con la informacion mas relevante para el evento, me convence esa idea asi que la tomaré tal cual.
• La paleta tiene 3 colores analogos pero utiliza un amarillo, un violeta y un lila extra. Estos no parecen tener buena armonía y de todos modos 6 colores son demasiado.
Por esto me reduje a la paleta principal mas el amarillo. Este genera un fuerte contraste pero aun asi no funciona como call to action, se ve fuera de lugar.
El unico motivo por el que me quedo con el amarillo es para que haya un poco de ruido, lo que resulta en que parezca mas llena.
• Dentro de figma hago un layout para la hero section. Este es probablemente el diseño mas comun y generico, teniendo en CTA a la izquierda y una ilustracion a la derecha.
Sin embargo, puede notarse que el degradado del fondo es algo diferente al orignial. Esto es porque extraje la imagen original y la volvi transparente, solo me quedo con las torres.
Ahora tengo la ilustracion transparente y mas control sobre el fondo, mientras conservo la paleta y la calidad de imagen. Puedo posicionar la ilustracion donde quiera.
• El diseño es iterado varias veces hasta llegar a esta versión, la cual me es suficiente. Aunque de momento se ve bastante vacio, continuo a hacer una segunda seccion que combina las dos ultimas de la pagina original.
• No hay mucho que decir sobre esta sección, pero en general aca establezco los tamaños de fuente, los textos a usar, imagenes, y el layout.
La version final no deberia verse asi, sino tomar este prototipo como referencia e incorporar todo a medida que lo hago.
• Clono el repositorio y creo los archivos necesarios con la siguiente estructura:
src
- index.html
- register.html
- css
- globals.css
- js
- main.js
• Antes de empezar a trabajar, hago un boilerplate e importo las CDN de TailwindCSS (PlayCDN porque no tengo un bundler) y de FontAwesome para iconos.
Estos son importados antes de mi archivo globals.css para evitar que me sobreescriban alguna regla.
El archivo main.js de igual manera es importado solo que al final de todo, para que cuando cargue, ya tenga el DOM disponible para trabajar.
El inconveniente de utilizar la PlayCDN de Tailwind es que no puedo generar clases dinamicas tales como "ml-[2rem]", pero no es particularmente necesario para este trabajo.
Luego de tener una version base, lo publico y configuro Github Pages incluso cuando aun falta la version mobile, solo para tener automatizado ese paso y verificar que lo actual no se haya roto.
Para la version mobile creare un archivo responsive.css donde organizare los media queries, aun asi, Tailwind ya provee diferenciadores como ":md" por lo que me ahorrara algo de trabajo.
Separo los queries y properties en archivos diferentes para que sea facil de trabajar. Realmente Tailwind hizo la mayor parte del responsive.
Compilo Tailwind para produccion y ya esta listo para hacer el deploy.