Skin HTML personalizado - Convertir el diseño de un sitio existente en un skin HTML

Este artículo se tradujo automáticamente y puede contener errores. Ver el original en inglés

Si organiza un evento y desea que el estilo de su sitio DPG coincida exactamente con el diseño de un sitio existente, puede clonar el HTML del sitio principal para convertirlo en un skin que pueda usarse con DPG.

Crear un skin personalizado es totalmente opcional; para la mayoría de los usuarios, lo mejor es utilizar nuestras plantillas fáciles de personalizar.

El skin HTML consiste en una página completa de su código HTML, con inserciones de DPG añadidas para incorporar la galería y el resto del código necesario de DPG en las áreas donde desea que se muestre.

Muchas personas prefieren escribir ellas mismas el skin HTML del sitio DPG, basándose en el código del sitio principal. Sin embargo, en este tutorial le mostraremos una forma rápida de convertir un diseño existente en un skin de DPG.

En esta guía utilizaremos:

Si no cuenta con un desarrollador en su equipo pero desea un skin HTML personalizado, podemos ofrecerle este servicio con un coste adicional. Escriba a support@digitalphotogallery.com para más detalles.

Clonar el HTML en su disco local

Asegúrese de tener Homebrew instalado y ejecute el comando para instalar wget:

brew install wget

Cree una carpeta nueva, acceda a ella con cd y utilice el siguiente comando para clonar los recursos del sitio web con el que está integrando:

wget -U firefox -p -k -H http://www.targetdomain.com/

Subir los recursos a su propio servidor o CDN

Suba los recursos clonados a un lugar accesible en línea; en este ejemplo utilizo Transmit con Amazon S3.

Si tiene control total del sitio principal y las ubicaciones de los recursos son predecibles, puede enlazar a esos recursos en lugar de clonarlos.

Volver a enlazar todos los recursos

Cuando ejecutó el comando wget, este habrá descargado el HTML de la página que indicó. Localice ese archivo en su disco local y, en el código, busque y reemplace los recursos enlazados por su nueva dirección. Pruebe la página local periódicamente en un navegador para comprobar su progreso.

Las herramientas de desarrollo de Chrome mostrando que todavía faltan algunos recursos. Corrija todos estos tipos de errores antes de pasar al siguiente paso.

Mientras vuelve a enlazar los recursos, quizá también desee eliminar cualquier código de seguimiento que no se utilice.

Cuando ya no haya errores, compruebe el dominio del que proceden los recursos para asegurarse de que ninguno se sirva desde una dirección que no controla.

galleryexamplenodpgcode.zip
Archivo de ejemplo en esta fase.

Conozca los layouts de página de DPG

Consulte este artículo para saber cómo obtener el código de inserción actual de DPG y descubrir cómo aplicar su código HTML a su galería de DPG.

Convertir el HTML descargado en un skin

Ahora que tiene una copia perfecta de la página original, puede empezar a editarla para añadir las inserciones de DPG.

Añada las inserciones de DPG para el encabezado.

Elimine el HTML del contenido y reemplácelo con la inserción de contenido de DPG.

Añada las inserciones al final de la página.

Cree el layout de su página en DPG.

Pruebe su layout en una sola página. Una vez que sepa que funciona correctamente, aplíquelo a todas las páginas.

Ahora tiene un sitio DPG completamente funcional que coincide con su sitio web principal. Por último, añada en su sitio principal los enlaces que apunten a la nueva galería de fotos.

galleryexamplewithdpgcode.zip
Código terminado de este ejemplo.

Last updated: