Saltar al contenido principal
Inicio - Soporte de OCLC

Páginas personalizadas con CSS y JavaScript

  1. Última actualización
  2. Guardar como PDF
La traducción de este sitio web se genera mediante traducción automática. La calidad y precisión de la traducción automática pueden variar significativamente de un texto a otro.

 

Encuentre información sobre el uso de CSS personalizado y JavaScript en su sitio web de CONTENTdm.

Las páginas HTML personalizadas pueden incorporar CSS personalizado y reutilizar nombres de clases de CSS existentes para alinear la apariencia con el resto de su sitio web de CONTENTdm. La página de ejemplo a continuación utiliza clases CSS para generar un botón que está diseñado como otros botones en CONTENTdm:

https://cdmdemo.contentdm.oclc.org/digital/custom/helloworld-cssjs

En este ejemplo, hay algo de CSS en línea y hay nombres de clase en el HTML que corresponden a nombres de clase integrados de CONTENTdm. También hay nombres de clases personalizados específicos para esta página HTML personalizada. Puede ver el código fuente de esta página personalizada aquí:

https://cdmdemo.contentdm.oclc.org/customizations/global/pages/helloworld-cssjs.html

  • Consulte el código fuente de la página para ver la sintaxis.

También verá en el ejemplo anterior el uso de JavaScript en línea para crear la acción de clic en el botón que revela contenido oculto. Este ejemplo es solo una prueba de concepto, ya que, por lo general, no se considera una buena práctica de desarrollo web agregar JavaScript conductual directamente en su HTML. Sin embargo, funcionará. El ejemplo anterior tiene un evento onclick que ejecuta una función de JavaScript que alterna la propiedaddisplayde CSS en un <div> de contenido. Si necesita utilizar JavaScript en sus páginas personalizadas, es mejor consultar la documentación de personalizaciones de JavaScript e integrar su código de script en el ciclo de vida de eventos de CONTENTdm. Este enfoque le permite separar el contenido del comportamiento y también le da más control sobre el momento de ejecución del JavaScript en el ciclo de vida de la carga de la página. Hay una clase de evento diseñada específicamente para páginas personalizadas, cdm-custom-page.

También puede incluir recursos estáticos en sus páginas HTML personalizadas, como imágenes o archivos de vídeo. El widget «administrar archivos» en la herramienta de configuración de sitios web le permite cargar archivos que no sean .html y crear subdirectorios. Si su página personalizada es una descripción de su biblioteca e incluye fotografías del interior del edificio y un mapa de su ubicación, estos archivos de imagen podrían cargarse en un hipotético subdirectorio «img» y vincularse directamente en su archivo HTML utilizando la etiqueta img.