Image of Karambastereo

Build Status

Depfu

Karambastereo.com

Este repositorio contiene la web estatica de http://www.karambastereo.com

Requerimientos pagina Web

La página usa diferentes frameworks para cumplir con sus objetivos que serían:

  • Mobile first para garantizar Accesibilidad
  • Carga rápida
  • Compatibilidad con la majoría de dispositivos
  • Connectividad con el foco en EU, USA & LATAM

Para cumplir dichos requerimientos el front-end usa estas librerías de 3os

  • Materialize Css 1.0.0
  • Jquery 3.1.1
  • fontawesome
  • utf8.js

Tracking conforme GDPR (No Cookies & Privacy first)

  • plausible.io

Requerimientos para el desarrollador:

La pagina usa diferentes entornos y processos para garantizar desde el comienzo und Codigo DE PUTA MADRE.

Instalar el proyecto

El projecto requiere Node.js para poder ser "compilado" corectamente.

npm -install --save-dev

esto instalará:

- babel-register
- browser-sync
- del
- gulp
- gulp-clean-css
- gulp-color
- gulp-concat
- gulp-develop-server
- gulp-if
- gulp-include
- gulp-jshint
- gulp-json-minify
- gulp-logger
- gulp-plumber
- gulp-rename
- gulp-replace
- gulp-rimraf
- gulp-sass
- gulp-sourcemaps
- gulp-uglify
- gulp-useref
- gulp-w3c-html-validator
- jshint
- jshint-stylish
- run-sequence
- utf8
- yargs

Estructura del Proyecto

├── build (generado por gulp)
│   ├── bin
│   ├── css
│   ├── images
│   └── js
├── buildcontrol (tasks de gulp)
│   └── gulp
│       ├── helpers
│       └── tasks
├── deploy (generado por gulp)
├── docs (generado por jsdoc)
├── src (gsource files)
│   └── assets
│       ├── bin
│       ├── css
│       ├── docs
│       ├── fonts
│       ├── images
│       ├── javascript
│       ├── sass
│       └── static
└── stage (generado por gulp)

El fichero de trabajo es el "src" todo el contenido con ecepción del fichero "buildcontrol" se genera automaticamente.

A pesar de que la página esta hecha en plano HTML, CSS y JS para poder trabajar en ella es necesario entender el workflow.

Requerimientos del Proyecto

Es necesario de tener Node.js® instalado. NodeJs

Instalación del Proyecto

En el fichero "raiz" después de asegurarse que Node.js® esté instalado (./node -v):

npm -install --save-dev

Esto instalará en el fichero del Projecto bajo la carpeta node_modules, las librerías necesarias.

Iniciar el Proyecto bajo el entorno desarrollador

./gulp

Automatización con gulp

Para que se pueda vizualisar el codigo, se ha de pasar por el pipeline de Gulp. Las reglas están en el fichero "buidcontrol" al cual se hace referencia desde el archivo "gulpfie.babel.js"

require('./buildcontrol/gulp');

los tasks son:

./gulp

que ejecuta el task default

./gulp stage

Copia los files al stage

./gulp doc

Crea JSdoc documentación

Gulp tasks:
  • stage

  • default

Architectura de la aplicación

La aplicación está pensada para Móvil primero. El objetivo es que el usuario pueda acceder a la música lo más rápido posible. Por ello el objetivo es compatibilidad i tiempo de carga en Movil.

La documentación del codigo fuente se puede encontrar en el fichero /docs

Delivery pipeline con travis

el fichero travis.yml contiene toda la información para pasar los tests. Travis ejecuta con cada commit al main el build test

Comentarios

El player usa el Elemento

<audio>

Nativo de HTML5 ya que todas las pruebas intentando de crear un player con

AudioContext::decodeAudioData

han sido descartadas por tema de compatibilidad en los diferentes navegadores i potencia en diferentes móviles.