pushtape cassette
1.0.0
Pushtape Cassette es un marco liviano para crear mejores aplicaciones web de música. Haga un casete de su música y reproduzca una aplicación web de música completa en segundos, con un reproductor de música persistente.
Este proyecto crea una aplicación web de música estática que se puede integrar con cualquier cantidad de tecnologías backend: archivos planos, Wordpress/Drupal, JS Frameworks, Python y Ruby. El elemento clave que impulsa esta idea es el archivo cassette.json, un formato de discografía portátil. Este archivo actúa como un único punto final integral y, desde este punto final, javascript se utiliza para crear una aplicación de una sola página utilizando varias microbibliotecas.
python dub.py o actualice cassette.json manualmenteSi ejecuta la aplicación desde un subdirectorio desde la raíz del documento, en index.html cambie la etiqueta base a:
<base href="/subdirectory/" />
o, alternativamente, cargar todos los activos utilizando rutas absolutas.
$ cd pushtape-cassette
$ python dub.py
El script de compilación generará automáticamente un cassette.json basado en los archivos del directorio de trabajo. Está pensado para ejecutarse localmente en la línea de comandos, pero si su servidor está configurado para ejecutar scripts de Python, puede intentar ejecutarlo desde el navegador o configurar un crontab. Notas:
releases/artist-name/release-nameSi desea eliminar el hash # de las rutas URL y utilizar History API en su lugar, en index.html configure app.settings.cleanURLs en verdadero. Tenga en cuenta que se recomienda ejecutar la aplicación con la API Historial habilitada desde la raíz del documento, ya que soluciona todos los problemas de enlaces relativos.
Nota: puede omitir los pasos 3 y 4 si utiliza el script de compilación dub.py.
| Propiedad | Tipo | Descripción |
|---|---|---|
| última construcción | marca de tiempo | Una forma de realizar un seguimiento de cuándo se creó o modificó el archivo por última vez. |
| paginas | objeto | Contiene pares clave:valor para páginas estáticas de su sitio. La clave define la ruta del enrutador JS de primer nivel, es decir, "acerca de". El valor contiene la ubicación URL de un documento de rebajas. La URL puede ser relativa o absoluta. Si su servidor devuelve documentos utilizando JSON/JSONP, configure "formato": "json". Si necesita incluir un enlace externo y omitir el enrutador JS, configure "tipo": "externo". |
| lanzamientos | objeto | Contiene pares clave:valor que definen los lanzamientos musicales disponibles. Una clave define la ruta del enrutador JS y debe estar en minúsculas y sin espacios, es decir, título del álbum o artista/título del álbum. La ruta completamente generada termina siendo lanzamiento/título del álbum o lanzamiento/artista/título del álbum. El valor correspondiente define las propiedades de esta versión. Como mínimo, debe especificar la URL para Artwork.jpg y notes.md (relativa o absoluta, opcionalmente puede especificar el formato como json). La propiedad de la lista de reproducción debe ser una ruta a un archivo de lista de reproducción JSPF válido, que especifica el orden de las pistas y la ubicación de los archivos mp3 y cualquier otro metadato. |
| Propiedad | Tipo | Descripción |
|---|---|---|
| app.settings.cassettePath | cadena | De forma predeterminada, application.js cargará la ruta local de cassette.json. Puede anular la ruta a cassette.json configurando esta variable global antes de cargar application.js. |
| aplicación.configuración.página de inicio | cadena | Este valor especifica qué página debe cargarse de forma predeterminada. La ruta debe estar registrada en el enrutador JS. |
| app.settings.cleanURL | booleano | Si es falso, se utilizan hash # URL. Si es verdadero, la API History manejará URL limpias. |
Problemas conocidos:
Limitaciones:
Ejemplo de casete.json:
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| Ruta URL | Descripción |
|---|---|
| / | Si no se ingresa ninguna ruta, se carga la página de inicio predeterminada. |
| /[título de la página] | Esto analiza y muestra la rebaja de una página como se define en cassette.json. |
| /lanzamientos | Una lista de todos los lanzamientos con arte y nombre, con hipervínculo a la página de lanzamiento individual. |
| /lanzamiento/[título-lanzamiento] /lanzamiento/[nombre-artista]/[título-lanzamiento] | Muestra toda la información de un solo lanzamiento: arte, lista de canciones reproducibles y notas. |
| Problema | Pasos |
|---|---|
| Página en blanco o falta CSS/JS | Verifique dos veces su URL base en index.html. Si tiene problemas para encontrar la ruta correcta, a veces la ruta del servidor se puede inferir utilizando el inspector de Chrome. |
| Problemas de solicitud entre orígenes (el contenido remoto no se carga) | Cuando se trata de solicitudes remotas de origen cruzado, se debe devolver JSONP válido y las solicitudes deben tener el formato correcto. 1. ¿Necesitas pasar? Callback=? en la URL, es decir, http://example.com/cassette.json?callback=? 2: La respuesta del servidor debe ser JSONP, no solo JSON normal. En particular, pueden surgir problemas de origen cruzado al cargar de forma remota cassette.json, jspf, notes.md y pages.md. Alternativamente, puede simplemente cargar todos los recursos localmente para evitar tener que configurar una solución JSONP. |
| El sitio no está siendo indexado por los motores de búsqueda. | Además de verificar su archivo robots.txt y otras mejores prácticas, este es un problema conocido con los marcos que usan Javascript para representar el contenido de la página. La solución más sencilla es utilizar un servicio como prerender.io para almacenar en caché y servir páginas HTML renderizadas. Recomiendo instalar el token prerender.io a través de Apache. A continuación se muestra una idea general de cómo podría verse su .htaccess (deberá cambiar TOKEN_VALUE y http://example.com para su sitio). |
Muchos sitios de música son bastante estáticos pero tienen requisitos de interfaz complicados. La mejor experiencia de usuario musical permite una experiencia de escucha de música ininterrumpida mientras se realizan otras tareas, como leer notas, explorar otra música, etc. Por lo general, esto significa AJAXificar un sitio estático o CMS tradicional o crear una solución completa desde cero usando JS. Construir y mantener esto rápidamente se convierte en un dolor de cabeza, especialmente a largo plazo. Al crear un marco de interfaz desacoplado, permite una mejor separación de las preocupaciones y reduce el esfuerzo a largo plazo necesario para construir y mantener un sitio. Además, al aprovechar JSPF y cassette.json, un formato de discografía portátil, la portabilidad de datos no es una ocurrencia tardía: está integrada en la aplicación desde el principio.
Elegí microbibliotecas porque los requisitos para renderizar una aplicación de música estática suelen ser bastante modestos y quería evitar depender de un marco de aplicación de página única (SPA) de terceros. Además, debido a que utilicé microbibliotecas, es más fácil elegir lo que desea. Por ejemplo, si no le gusta el sistema de plantillas, el enrutamiento o las bibliotecas de enlace bidireccional que elegí, puede reemplazarlos con su biblioteca/marco JS preferido.
