Herramientas para desarrolladores

Aunque Sitely es un creador de sitios web que no requiere conocimientos de programación, reconocemos que puede haber situaciones en las que tengamos que meternos bajo el capó de vez en cuando para que todo funcione correctamente. Por suerte, Sitely resuelve las situaciones más comunes con facilidad y sin que tengas que hacer nada. Un ejemplo claro es añadir el código de Google Analytics o AdSense a tu sitio web. Normalmente esto implicaría insertar manualmente el código directamente en el HTML de la página. Sin embargo, en Sitely puedes añadir este código a través de las distintas opciones de configuración del sitio y dejar que Sitely lo inserte en el lugar correcto de la página HTML..

El escenario más probable en el que quizá necesites añadir código manualmente suele darse cuando un proveedor de servicios de terceros te proporciona un fragmento de código. Por lo general, los procesadores de formularios de terceros pueden darte un código para mostrar un formulario en tu página web. Estos formularios suelen crearse en servidores remotos y se sirven a tu sitio mediante un fragmento de código. Otros ejemplos son los scripts de terceros. Estos son aplicaciones web que aportan funcionalidad adicional a tu sitio, como sistemas de reservas o scripts de membresía. Cuando necesites incorporar este código en tu página, puede que tengas que añadir distintas partes del código en diferentes zonas de la página. 

Por lo general, las páginas HTML tienen una sección Head y una sección Body. La sección Head de una página suele usarse para metainformación, como el título de la página, enlaces a hojas de estilo externas o a hojas de estilo o scripts alojados de forma remota. La sección Body es la parte del HTML que ven los visitantes del sitio, como textos, imágenes, gráficos y otros elementos. 

Cuando obtienes un fragmento de código, ya sea de un proveedor externo de servicios alojados o de un script que instalas en tu propio servidor, a menudo será necesario separar el código en código para el Head y para el Body. Como regla general, el código del Head se usa para llamar a código PHP o Javascript alojado de forma remota o a hojas de estilo, con el fin de mostrar correctamente el contenido que se añadirá a tu página en la sección Body. El código del Body suele ser el que insertas en la página para crear un elemento que los visitantes puedan ver y/o con el que puedan interactuar. Por ejemplo, puedes tener un script de membresía que permita a los visitantes suscribirse a una lista de correo para miembros. El formulario de registro en sí será servido por un servidor web (el tuyo o el de un tercero) para que pueda mostrarse en tu página. A continuación se muestra un ejemplo típico de código para el Head proporcionado por un script. Su finalidad es proteger una página frente a accesos no autorizados.

Esto puede ir seguido de un fragmento de código para crear un formulario de registro en el que los usuarios puedan darse de alta como miembros. Este código aparecería en la sección Body de la página.

No hace falta que entiendas qué hacen exactamente estos fragmentos de código ni cómo funcionan. Lo importante es saber dónde insertarlos en tu página de Sitely. El primer fragmento sería el código para el Head. Debe ser lo primero de la página para que el script de membresía vinculado funcione correctamente. Esto se añadiría mediante el botón Código situado en la parte superior del panel de páginas de Sitely. Así es como se ve:

En el ejemplo de nuestro script de membresía, copiaríamos y pegaríamos el código del Head en el cuadro titulado ‘PHP antes de HTML’ La razón es que la página debe ser una página PHP para que este script funcione. Por lo tanto, lo primero que debe hacer la página es ejecutar este código PHP antes de hacer nada más (NOTA: antes de publicar, el nombre de la página debe cambiarse para que tenga la extensión PHP). Si el código del Head fuera HTML puro, lo insertarías en el cuadro titulado ‘Código para HTML.

El siguiente fragmento de código que querríamos añadir a la página sería el que muestra el formulario de registro del script. Esto se añadiría al Body de nuestra página usando el elemento ‘Incrustar’. Esto creará un cuadro vacío en el lienzo de Sitely que podrás colocar donde quieras que aparezca el formulario de registro. Con el cuadro de incrustación seleccionado, ve al panel de estilos y añade tu fragmento de código. La opción se ve así:

Si es probable que el código se expanda verticalmente, asegúrate de marcar la casilla ‘el contenido se expande verticalmente’. Tras añadir o editar código, haz clic siempre en el botón guardar/actualizar. Si tu script está en un servidor activo, puede que se muestre en la página. No obstante, algunos contenidos no generarán una vista previa hasta que se publiquen en línea.

Herramientas de desarrollo a nivel de sitio

Además de las opciones específicas de cada página descritas arriba, también puedes añadir elementos de desarrollo a nivel de sitio a tu web mediante la opción Desarrollador en el panel de configuración. Aquí puedes especificar las carpetas de salida para los distintos elementos que añadas a tu página, incluidas hojas de estilo (CSS) y archivos de Javascript (JS). Además, puedes añadir archivos personalizados, ya sea desde tu disco, o desde recursos alojados vinculados. 

Estas opciones serán útiles si parte de tu código incrustado incluye enlaces a hojas de estilo o a código que debas alojar como parte de tu sitio web. Un ejemplo típico de cuándo pueden ser útiles estas opciones es cuando usas contenido de sitios como CodePen. Por ejemplo, puede que te encuentres con código dividido en tres secciones: el HTML para incrustar en la página, el CSS para dar estilo al contenido y el JS para que todo funcione. Todo esto puede copiarse y pegarse en archivos individuales e incluirse como parte de tu proyecto de Sitely.

Además de archivos individuales, también puedes añadir código HTML en la sección Head de todas tus páginas web a través del panel de opciones de desarrollador. Solo tienes que desplazarte hacia abajo en el panel para ver el cuadro de código.

Recuerda: cualquier código que añadas en este cuadro se añadirá a la sección Head de todas las páginas de tu sitio web.

Nota de precaución: adentrarse en el código con poca o ninguna experiencia puede generar problemas en tu página web. Aunque Sitely puede gestionar bastante bien estas opciones de desarrollador, siempre existe el riesgo de conflictos de código que pueden hacer que tu sitio no funcione correctamente. Usa estas opciones con prudencia y prueba siempre antes de publicar. Para el código que deba probarse en un servidor, lo mejor es publicar primero en una carpeta de pruebas de tu servidor antes de lanzar tu nuevo sitio al mundo.