pec4_prototipos

PEC4 | Desarrollo de prototipos

• Este repositorio recoge el proceso de desarrollo de prototipos en HTML, CSS y JS que se usarán para la creación de un Tema Accesible para usar en Wordpress.
• DEMO de los prototipos en HTML

• El trabajo expuesto se desarrolla sobre el resultado de la fase previa de análisis, diseño y edición de prototipos estáticos en alta definición como base:

  • Revisión del diseño
  • Detalles del prototipo

UOC TFM

Como objetivo global del TFM se persigue la producción de un Tema listo para usar en Wordpress facilitando el cumplimiento de todos los requisitos de accesibilidad a los perfiles profesionales encargados de gestionar contenidos.

Tecnología

Desde el punto de vista de la solución tecnológica se propone utilizar las siguientes plataformas, framework y complementos de terceros:

• Adobe XD como editor de gráficos vectoriales para el diseño y creación de prototipos de la interfaz gráfica de usuario en páginas web y aplicaciones móviles.
• WordPress como herramienta de mercado para el diseño web, cuyo lenguaje de programación es PHP y base de datos MySQL.
• Bootstrap como framework para la maquetación de las páginas en HTML5, CSS y jQuery adaptando las limitaciones que puedan tener algunos componentes.
• UOC Boilerlate como plantilla base para el desarrollo de los prototipos incluyendo variables personalizadas de Bootstrap.

Guía de estilo

Guía de estilo con especificaciones sobre:

• El uso del color
• Estilos de texto
• Iconografía
• Fuente utilizada por el Tema

FLUJO DE DESARROLLO | UOC Boilerplate

UOC Boilerplate es un conjunto de herramientas y una plantilla de inicio para el curso de Herramientas avanzadas de HTML y CSS de la Asignatura Herramientas Avanzadas de HTML y CSS y el Máster universitario de Desarrollo de Sitios y Aplicaciones Web en la Universitat Oberta de Catalunya

Su objetivo es proporcionar un paquete de desarrollo web front-end básico y moderno basado en Parcel e incluye un compilador Sass, un transpilador ES6, minificadores, un optimizador de imagen y herramientas de desarrollo.

Esta es la versión 2.0 de UOC Boilerplate, disponible desde el semestre UOC 2018-2.

Autor de ‘UOC Boilerplate’: Jordi Tarrida

Características

• Uso de Parcel como empaquetador de módulos.
• Scripts de NPM para desarrollo rápido y compilación de código en producción.

Hojas de estilo

• Sass/SCSS para compilación CSS.
• PostCSS:
  • Transpilación de CSS moderno con postcss-preset-env.
  • Inclusión automática de prefijos CSS para soporte de propiedades en la mayoría de los navegadores autoprefixer.
  • Minificación automática y optmización del código CSS en producción con postcss-clean.

Scripts

• Habilitación de JavaScript moderno (ES201x / ES8 / ES7 / ES6 …) que se transpila automáticamente a ES5 y se minimiza en las compilaciones de producción, con Babel.

Imágenes

• Optimización de imagen con parcel-plugin-imagemin, basado en imagemin , en producción.

Desarrollo

• Lanzamiento del servidor de desarrollo y recarga en vivo en los cambios de archivos.
• Informe de errores legible.

CONTACTO

• Macarena Pérez Carrillo (Linkedin)
• Alumna del Máster de Aplicaciones Multimedia de la Universidad Oberta de Cataluña