Web que habla sobre la impresión 3D. Se explica como funciona, que tipos de impresoras FDM existen y se dan algunos ejemplos de uso para la impresión 3D.
Esta web se ha creado para la práctica 1 de la asignatura Herramientas HTML y CSS II del Máster de desarrollo de aplicaciones y sitios web de la UOC. Los requisitos de la web era usar el Boilerplate propio del Máster el cual se puede encontrar en Boilerplate UOC
Un Boilerplate es un conjunto de código preescrito que se utiliza como base en múltiples lugares.
En el desarrollo web, un "boilerplate" puede incluir la estructura HTML básica, archivos de estilo CSS y scripts JavaScript comunes.
UOC Boilerplate es una plantilla de inicio para la asignatura de Herramientas HTML y CSS II del Máster de desarrollo de aplicaciones y sitios web de la Universitat Oberta de Catalunya. Su objetivo es proporcionar un paquete básico y moderno para el desarrollo web frontend basado en Parcel e incluye un compilador de Sass, un transpilador de ES6, minificadores, un transformador de imágenes y herramientas de desarrollo.
Esta es la versión 3.x de UOC Boilerplate, disponible desde el segundo semestre del 2020.
Node.js >= 14.15.x
Clonar este repositorio con git clone, o descarga el archivo .zip usando el botón verde que se encuentra arriba a la derecha.
Una vez en tu ordenador, abre el terminal y dirígete a a la carpeta del proyecto. Ejecuta npm install y despues npm run dev y se abrirá la web en el navegador.
- Se usa el module bundler Parcel en su versión 2.
- Incluye scripts de NPM para un desarrollo rápido y construcción de proyecto. scripts for fast development and production build (see Commands below).
- Se usa Sass/SCSS para la compilación de CSS.
- Se Minifica y optimizan los archivos de css con
cssnano(@parcel/optimizer-cssnano). - Se incluye PostCSS. Características de PostCSS:
- Transpilación de CSS moderno con
postcss-preset-env. - Se añaden automáticamente prefijo de CC para las propiedades no soportadas con
autoprefixer.
- Transpilación de CSS moderno con
- Se Minifica y optimizan los archivos de HTML al compilar la versión de producción con
htmlnano(@parcel/optimizer-htmlnano). - Se incluye PostHTML con sus características:
- Inclusión de archivos parciales con
posthtml-include.
- Inclusión de archivos parciales con
- Permite transpilación automática de JavaScript moderno (ES201x/ES8/ES7/ES6…) a ES5 así como minificación en la compliación de la versión para producción, con Babel.
- Conversión de imágnenes con
@parcel/transformer-image(basado ensharp).
- Servidor de prueba con refresco automático con cada guardado de cambios en archivos.
- Reporte de errores fácil de entender.
El contenido de la web tiene que ir en la carpeta src. No cambiar la estructura ni los archivos de dicha carpeta a no ser que se quiera cambiar la configuración o que sepas lo que estás haciendo.
Para compilar una versión funcional de la web optimizada ejecutar npm run build. Una vez ejecutado el comando la web y todos sus archivos estarán ubicados en la carpeta dist
| Command | Description |
|---|---|
npm run dev |
Runs a local web server for development and opens the browser to display it. Automatically compiles styles and scripts whenever a file in src/ is changed, and live reloads the browser. This is what must be run on the development stage. |
npm run build |
Compiles and minifies and optimizes the files in the assets folder. The generated compiled and optimized files are located in the dist/ folder. This is what must be run before publishing the project. This is also the build command to be run by external deployment services such as Netlify. The publishable files are then located in the dist/ folder. |
npm run clean |
Deletes the current /dist folder and cache folders. |
npm run test |
Displays a success message if everything is working as expected. |
Todos los créditos de este Boilerplate y sus funciones (incluyendo la traducción/adaptación de este README) pertenecen a Jordi Tarrida
Todos los archivos HTML y CSS de la web han sido creados por Pedro Blanch
Aunque se ha tenido especial cuidado en la elección de imágenes libres de derechos, si alguna imagen infringe algún derecho, por favor comunícamelo y la retiro inmediatamente.