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.