La Estructura del Sitio Web
La estructura tradicional de una página web depende de diversos lenguajes de programación y etiquetado como lo son HTML, CSS y Javascript.
Estos lenguajes se suelen dividir en archivos específicos conectados mediante rutas para organizar el código según su uso, por ejemplo: index.html, estilos.css y script.js. Si tu sitio web tiene múltiples vistas tendrás múltiples archivos .html y probablemente uses más archivos .css o .js.
En MGPanel tenemos una estructura similar para organizar tu código, pero la hemos dividido de una forma simple para que no tengas que manejarte entre complicadas rutas y archivos, todo esto se generará automáticamente.
A continuación, te explicaremos a detalle cómo debes estructurar tu HTML, tus estilos CSS y el código Javascript en MGPanel.
Estructura del HTML
El código HTML de una página web esta contenido dentro de una etiqueta padre la cual se divide en al menos dos secciones principales que son el <head> y el <body>.
Dentro del <head> se manejan meta etiquetas, etiquetas de relación y otras etiquetas que ofrecen información útil a los navegadores pero que no son visibles para el usuario final. MGPanel trabaja con etiquetas meta que se generan automáticamente, pero puedes editar y agregar las que necesites desde configuración.
La etiqueta <body> se usa para contener las etiquetas que son visibles para el usuario final y que dan forma a la página web. Generalmente, las páginas web suelen ordenarse en secciones que cumplen una función concreta o tratan un tema en particular, por ejemplo: se puede tener un menú, un banner, una sección de productos, otra de servicios y, por supuesto, el footer.
Para organizar estas secciones, en MGPanel implementamos un modelo que conoceremos de ahora en adelante como Posiciones y Módulos. Este modelo tiene una mayor relevancia para el Index o Home, mientras que para el resto de páginas de tu sitio web usaremos otro modelo llamado Contenidos.
La Estructura del Home
Como te mencionamos anteriormente, la estructura del Home o Index depende estrechamente del modelo de Posiciones y Módulos.
Por motivos prácticos vamos a describir las posiciones como las distintas secciones que conforman tu Index y que además se encargan de hospedar a los módulos. Por otro lado, los módulos sirven para agregar el código interno de la sección.
En MGPanel dispones de 30 posiciones para estructurar tu página principal, mientras que puedes crear tantos módulos como creas necesario y distribuirlos en las posiciones a tu conveniencia.
Si quieres conocer más te invitamos a revisar: Posiciones y Módulos.
Veamos un ejemplo. Digamos que las posiciones tienen la siguiente forma:
Mientras que tus módulos se ven de esta manera:
Al tener diversos módulos, es necesario poder ordenarlos de algún modo. Los módulos se ordenan de forma numérica y ascendente, es decir, los números más bajos irán primero. El orden puedes asignarlo al crear/editar el módulo y no depende de la fecha de creación.
Las posiciones no necesariamente deben activarse de forma continua, puedes activar posiciones dejando algunas de por medio, digamos “por si acaso”, por si más adelante necesitas crear una sección adicional. Sin embargo, es importante destacar que el orden de las posiciones no se puede alterar.
Debes recordar que el footer es un elemento fundamental que se encuentra al final de todo sitio web, por lo tanto, debes colocarlo en las últimas posiciones.
Las posiciones que contienen elementos reusables de tu sitio web como el menú y el footer pueden configurarse para aparecer en todas las páginas de sitio, además de otras opciones como aparecer solo en el Home o en todas las páginas excepto el Home.
A pesar de no estar referenciado en las imágenes, los módulos (rectángulos de color) contienen en su interior el código HTML que le da información o apariencia a la sección. Por ejemplo: etiquetas <div>, <p>, <a>, <img>, etc.
De este modo puedes estructurar la página principal de tu sitio web usando posiciones y módulos. Sin embargo, te estarás preguntando ¿cómo puedo estructurar el resto de las páginas? Y la verdad es mucho más fácil.
La Estructura de los Contenidos
Los Contenidos se estructuran de forma más sencilla que la página principal porque solo dependen de una posición y un módulo. La posición 12 aloja el módulo de contenido interactivo que se encarga de permitir el funcionamiento de los contenidos.
De momento, si no entiendes bien cómo funcionan los módulos, te recomendamos no manipular esa posición ni ese módulo.
Los contenidos se crean desde el Gestor de Contenidos, de forma similar a como se crean los módulos usando un editor HTML. Sin embargo, no tienes que dividir las secciones del contenido en módulos como en el index, puedes agregar todo el código dentro del editor del contenido y funcionará a la perfección.
Puedes crear tantos contenidos como necesites para tu sitio web, no existe un límite.
Para saber más acerca de este tema puedes ir a la sección de Contenidos donde podrás reforzar esta información y también aprenderás como enlazar tus contenidos con otras páginas.
Estructura del CSS
En MGPanel dispones de un Editor CSS para alojar todos los estilos de tu sitio web, tanto del index como de los contenidos. Este editor funciona como tu hoja de estilos.css y se carga para todas las páginas del sitio web.
Al tener solo una hoja de estilos te recomendamos ordenarla de forma interna usando comentarios para dividir los estilos de cada sección.
Otra forma de agregar estilos es a través de la configuración general de tus módulos, pero estos estilos se aplican directamente a la etiqueta padre del módulo. También puedes usar la etiqueta <style> en cualquier editor HTML pero te recomendamos no hacerlo si no es estrictamente necesario por ser una práctica poco ortodoxa y obsoleta.
El editor de estilos CSS de MGPanel funciona únicamente con estilos nativos de CSS, por lo que no ejecuta los preprocesadores CSS como SASS o LESS.
Visita la sección de Editor CSS para conocer más sobre como puedes agregar estilos CSS en MGPanel.
Estructura del Javascript
Al igual que con los estilos CSS, MGPanel cuenta con un editor especial para el código Javascript del sitio web. Este editor se encuentra en la sección de configuración general, en la pestaña “Código JS”, allí podrás agregar cualquier funcionalidad extra que necesites con código Javascript o JQuery.
También puedes agregar código JS directamente a los módulos y a los contenidos a través de su editor JS particular, el cual se encuentra en sus pestañas de configuración.
Debes tener en cuenta que el código que agregues en el módulo se ejecutará en todas las páginas donde aparezca ese módulo y el código que agregues en el contenido se ejecutará solo en ese contenido.
Al ingresar por primera vez en tu editor JS global notarás que hay algunas líneas de código agregadas. Te recomendamos no hacer cambios de ese código si no tienes conocimientos sólidos en lenguaje Javascript, porque podrían generarte problemas en el funcionamiento del sitio web.
¿Ya revisaste todo y aún tienes dudas?
Contáctacta a nuestro equipo de soporte para una mejor atención
Contactar con Soporte
