musicWebTemplate

Plantilla de sitio web gratuita creada para que músicos/artistas promocionen su música y se conecten con su audiencia.

Características

• Imágenes de héroe personalizables y modo de imagen responsivo
• Reproductor de música basado en Javascript y generador de miniaturas de YouTube optimizados para la carga de páginas
• Lista de correo y formulario de contacto con validación e integración back-end
• Secciones adicionales que incluyen una sección sobre, productos, noticias, prensa y programas.
• El código del proyecto cumple con la validación HTML y CSS W3C (excluyendo el aspecto CSS en blanco y negro)

Empezando

Nota: Se recomienda utilizar un servidor web local configurado con php y un servidor de correo para una funcionalidad de prueba completa.

Para editar el encabezado y la navegación:

1. Reemplace con el nombre de su artista/banda en id "logo"
2. Actualiza los enlaces de navegación a los tuyos

Para editar la sección de inicio:

1. Sustituya el nombre de su imagen en la clase "héroe" en style.css
2. Edite su eslogan, llamado a la acción (CTA) y enlace de CTA en la clase "inicio" en index.html

Para editar la lista de correo:

1. Cree su propia lista de correo de Google Sheets siguiendo el tutorial de David McCoy: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets- without-google-forms- b833952cc175
2. Reemplace el enlace de Google Sheets recién creado a través de "url" en mailingList.js
3. Sustituya su llamado a la acción y su eslogan en index.html

Para editar la sección Acerca de:

1. Cambia los enlaces de las redes sociales por los tuyos propios
2. Editar clase "Acerca de" en index.html

Para editar la sección de merchandising:

1. Comprime tus imágenes y reduce los píxeles para optimizar el tiempo de carga.
2. Copia tus imágenes al directorio /pictures/merch
3. Sustituya el nombre de su imagen en las clases ".a, .b, .c", ect... en style.css
4. Sustituya el nombre de su imagen en la clase "grid" en index.html

Para editar la sección de música:

1. Editar clase "Música" en index.html
2. Cambia los enlaces de música por los tuyos.
3. Sustituya el nombre de su imagen en la clase "music-hero" en style.css

Para agregar canciones destacadas:

1. Edite su canción usando un DAW en una vista previa del clip de 30 segundos para optimizar la carga y el tiempo de transmisión.
2. Coloca las canciones en dir /music.
3. Editar "archivos" de var de matriz en musPlayer.js
4. Para agregar una canción en la matriz, use el siguiente formato: "El título de su canción.mp3"

Para editar la sección de noticias:

1. Comprime tus imágenes y reduce los píxeles para optimizar el tiempo de carga.
2. Copia tus imágenes al directorio /pictures/blog
3. Sustituya el nombre de su imagen en las clases ".a, .b, .c", ect... en style.css
4. Sustituya el nombre de su imagen y el título del blog en la clase "grid" en index.html
5. Escriba la publicación de su blog en las páginas html blog_(página).

Para editar la sección de prensa:

Edite la clase "Prensa" en index.html.

Para editar la sección de vídeo:

1. Navega hasta el vídeo de YouTube que quieres que aparezca
2. Copie el texto después de "v=" en el enlace de youtube
3. Pegue el texto del ID de datos en la clase "youtube-player" en la clase "Video" en index.html

Para editar la sección de programas:

Edite la clase "Muestra" en index.html.

Para editar la sección de imágenes:

1. Comprime tus imágenes para optimizar el tiempo de carga
2. Copie sus imágenes al directorio /pictures/gallery
3. Sustituya el nombre de su imagen en las clases ".a, .b, .c", ect... en style.css
4. Sustituya el nombre de su imagen en la clase "grid" en index.html

Para editar el formulario de contacto:

1. Ingrese su dirección de correo electrónico en form.php
2. Personaliza tus mensajes de respuesta en form.php

Para editar el pie de página:

1. Actualice los enlaces del pie de página a los suyos
2. Reemplace con el nombre de su artista/banda en Terms.html

¡Personaliza con máscaras!

Nuevo tema en blanco y negro disponible ahora.

1. Cambie el nombre de css/style_black_white.css a css/style_black_white

O

1. Cambie el enlace href en el encabezado a css/style_black_white.css para todos los documentos html

Construido con

• HTML5
• CSS3
• jQuery/JavaScript/AJAX
• PHP5

Contribuyendo

Al contribuir a este repositorio, puede bifurcar y enviar una solicitud de extracción. Agrega una descripción de lo que estás haciendo y lo revisaré.

Versionado

Versión 2.3.0

Autores

• Mateo Waldron - (http://waldronmatthew.com)

Licencia

Este proyecto tiene la licencia MIT; consulte el archivo LICENSE.md para obtener más detalles.

Respete las páginas de Términos de uso y Créditos del sitio web.

Expresiones de gratitud

Un ENORME agradecimiento a todos los desarrolladores de quienes utilicé el código con licencia del MIT. Se enumeran en la página "Créditos del sitio web".