Cómo crear la página web: Tutorial

Mediante este tutorial te será posible insertar, modificar o eliminar secciones y subsecciones en los tres tipos de menú distintos, así como contenidos en tus páginas o productos enlazados e imágenes para los mismos.

Este tutorial se divide en dos secciones fundamentales además de los conceptos básicos: la sección explicativa donde se expone el significado de cada elemento del menú principal del panel de control y la sección técnica que detalla el funcionamiento de cada formulario y el fin de cada elemento, botón y/o opción incluido en cada uno de ellos.

Conceptos básicos.-

    Para utilizar Posydi es necesario acceder a esta url en Internet: http://admin.posydi.com e introducir un nombre de usuario y contraseña válidos proporcionadas por LMENTAL en el momento de la contratación del servicio.

    TIPOS DE MENUS CONFIGURABLES DESDE EL PANEL:

    Menú principal.-
    Básicamente el menú con las principales opciones a ubicar en el website. Estas opciones pueden estar dispuestas en todos los niveles deseados creando, de esta manera, un árbol de opciones con subopciones (opciones dentro de opciones). Pueden ser mostradas (activadas) o no, pueden llamar a páginas de contenidos o expandirse en otro árbol de subopciones (opciones dependientes).

    Menú General.-
    Realmente es un menú de accesos directos principales, es decir, opciones situadas en el menú principal que también aparecen en el general y que se desee destacar de alguna manera, ya sea porque es contenedora de información relevante o se encuentre dentro del árbol del menú principal y no se aprecie a simple vista.

    Menú destacados.-
    Por medio de este menú es posible insertar un número intedeterminado de anuncios, enlaces a otras páginas o alertas con imágenes, vínculos, títulos en formatos específicos, etc.. ya que otorga la posibilidad de insertar código html, javascript o cualquier otro estándar para la realización de páginas web y que pueda ser interpretado por un navegador.

    AREAS FIJAS:

    Principal.-
    Página de inicio donde se muestran los componentes de los elementos seleccionados basada en un plantilla con la opción de modificación por parte del usuario.

    Politica de privacidad.-
    Al seleccionar en ella muestra en la portada las condiciones de política de privacidad seguida por la empresa que podemos modificar con la herramienta.

    Aviso legal.-
    También será posible introducir los datos legales de la empresa que se muestran en la portada al seleccionar en ella.

    TIPOS DE OPCIONES:

    La creación de una nueva opción de menú requiere el conocimiento de los diferentes tipos en los que se puede establecer.

    Tipo opción.-
    Contendrá otras subociones dependientes (opciones dentro de esta opción).

    Tipo página.-
    Será un enlace directo a una página de contenidos, una opción definitiva en el menú.

    Tipo producto.-
    Será un enlace directo a una página de contenidos dispuesta y páginada con las funciones de lista de productos, noticias, recortes de prensa, etc...

    DISTRIBUCIÓN DE LOS MENÚS EN LA WEB:

    Hay diferentes plantillas de sitio web entre los que se pueden elegir la forma de mostrar la página. Este es un ejemplo de pantilla basada en un caso real para poder apreciar su disposición de menús y diseño.
    

Sección explicativa.-


    UTILIZACIÓN DEL PANEL DE CONTROL.

    Opciones del menú.

    1.Menús:

    Permite añadir/modificar elementos a los diferentes menús de la pantalla de la web. Posicionando el ratón en ‘Menús’ se despliega un menú con las opciones ‘Principal-General-Destacados’.

    PRINCIPAL:

    Al seleccionar esta opción se mostrará a la izquierda de la pantalla (Mantenimiento de opciones de menú) el menú “Raíz”, que desplegará las diferentes opciones contenidas en el menú principal. si alguna de estas opciones tiene una imagen asociada aparecerá con el icono “insertar icono” o marcados en negrita si contienen más subopciones dependientes. Para ver estas subopciones es suficiente hacer click sobre la opción deseada.

    Para insertar opciones en el árbol principal del menú, simplemente hay que posicionar el puntero del ratón sobre “Raíz”. Automáticamente aparecerá el botón flotante “insertar”, que al ser pulsado desplegará automáticamente el formulario de creación de opciones de menú en la parte derecha de la pantalla.

    El contenido de las opciones de menú, así como sus títulos y tipo pueden ser editados en cualquier momento (modificar, borrar, etc). De la misma manera que se pueden insertar estas opciones en el menú raíz es posible editarlas posicionando el ratón por encima de cada una de ellas. En este caso aparecerán tres botones flotantes “eliminar”,”insertar”, y “editar”, con los cuales será posible realizar las distintas acciones que a continuación se detallan:

    Eliminar:
    Al pulsar este botón aparecerá un cuadro de diálogo solicitando una confirmación que, una vez aceptada, dará paso a la eliminación permanente de la opción de menú seleccionada y todas las subopciones dependientes.

    Insertar:
    Permite insertar subopciones dependientes a la opción seleccionada, mostrando en la parte derecha de la pantalla (Mantenimiento de subopciones) su formulario de edición.

    Editar:
    Para realizar modificaciones sobre la subopción seleccionada. Una vez cambadiados los valores de los campos del formulario de edición será necesario pulsar el botón “Guardar cambios” para que las modificaciones surtan efecto.
También es posible añadir una nueva subopción con los valores del formulario mediante el botón “Añadir Nueva Seccion”.

    GENERAL:

    Las opciones del menú GENERAL realizan las funciones de acceso directo de las opciones o subopciones marcadas en el menú principal. Es decir, si tenemos una subopción llamada “Bicicletas” que pertenece a la opción “Productos” y queremos que sea visible en el web sin que sea necesario pulsar en “Productos” para que se despliegue todo su árbol de subopciones dependientes y a partir de este buscar “Bicicletas”, podemos seleccionarla en GENERAL, y de esta manera aparecerá automáticamente en la zona de la web designada por el diseño para este menú.

    DESTACADOS:

    Al seleccionar esta opción de menú se mostará una página donde configurar los elementos destacados del web, ya sean enlaces a otras páginas o internos que quieran resaltarse de un modo diferente del resto.
    Para incluir un elemento en Destacados es necesario especificar los campos del formulario y pulsar en “Añadir nuevo”. El el campo código se debe de insertar el código fuente correspondiente al html del contenido en sí, es decir, si en Destacados queremos incluir un cuadro con un título resaltado y que contenga una foto y una descripción con un enlace a otra página deberemos copiar el código html resultante de ese cuadro y pegarlo en el campo Código del formulario. De esta manera, al mostrarlo en web ese código será interpretado y el resultado será correcto.

    2.Contenidos:

    Para añadir/modificar páginas/productos a las secciones que aparecen en la web. Al seleccionar una de las dos opciones se despliega un árbol de directorios con las secciones dadas de alta en el menú principal que contienen las páginas/productos pudiendo añadir nuevos o modificarlos existentes.

    PAGINAS:

    Seleccionando esta opción aparece el árbol de directorios de las opciones o subopciones que contienen las páginas. Para incluir una página en una opción, simplemente hay que situar el ratón sobre su nombre en el árbol Raíz situado a la izquierda de la pantalla y pulsar el botón emergente “Crear página”, que automáticamente, abrirá una ventana emergente con el editor de páginas html para asignarle contenidos.
    Si se selecciona un página existente será posible apreciar el contenido resultado en la parte derecha de la ventana y, si se desea realizar alguna modificación, sobre su marco, se podrán seleccionar las opciones “Editar página” o “Eliminar página”.

    LISTAS:

    Es posible que una opción en lugar de páginas contenga una lista de productos o noticias, es decir, un pequeño catálogo de productos o una relación de noticias con imágenes, descripciones, etc. Una vez que seleccionamos la opción Productos aparecerá una ventana que en su parte izquierda contendrá el árbol con las opciones de este tipo.
    En cada opción que aparezca será posible crear un producto o editar uno existente mediante el editor emergente. De esta manera se le pueden añadir imágenes, descripciones, etc. y crear tantas listas de productos, noticias, o cualquier información subsceptible de este tipo de organización como se desee.

    3.Contactos:

    En la sección de contactos se almacena el contenido de todos los formularios rellenados y enviados por los usuarios en el área de contato de la web.

    4.Imágenes:

    Cualquier imagen que queramos insertar en la web debe ser introducida previamente en este catálogo. Posicionando el ratón en Imágenes se despliega un menú con las opciones “Imágenes – Optimizar imágenes”, dos opciones que nos permitirán realizar un mantenimiento completo de las imágenes de nuestro website.

    IMÁGENES:

    Con esta opción tendremos la posibilidad de insertar nuevas imágenes, eliminar ya existentes, clasificarlas por categorías, editiarlas para optimizarlas, etc.. Desde el cuadro de la izquierda tendremos la posibilidad de localizarlas y seleccionarlas para, posteriormente y el cuadro derecho, editarlas y/o realizar acciones sobre ellas.

    OPTIMIZAR IMÁGENES:

    Esta opción realiza una optimización de todas la imágenes publicadas en la web subsceptibles de optimización para, de esta manera, ganar espacio y mejor funcionamiento y a su vez rapidez de carga de las páginas.

    5.Plantillas:

    Esta opción nos permite tener un control sobre las plantillas de diseño utilizadas en el website. Al seleccionarla se mostrarán en pantalla las opciones para el tratamiento de las plantillas web.
    Estas plantillas podrán ser utilizadas posteriormente para insertar los contenidos en las páginas generadas. En la parte izquierda de la pantalla tendremos una lista de las plantillas guardadas con opciones para ver si contenido, editarlas o aliminarlas.
    En la parte derecha encontramos una opción que nos permitirá poder añadir más plantillas para utilizarlas posteriormente.

    6.Extras:

    Permite acceder a las diferentes opciones extras que se van implementando para el manejo del panel de control. Realmente, esta opción de menú es un área temporal desde donde la cual, las nuevas opciones van tomando forma hasta instalarse en su ubicación definitiva.

Sección técnica.-


    USO DEL EDITOR HTML PARA PÁGINAS

    Este editor nos permitirá editar los contenidos que se muestran en la web mediante los siguientes campos:

    Opción.-
    Especifica el directorio de opción donde se encuentra. Plantilas.-
Permite cargar un aplantilla con un formato ya hecho que se puede modificar.

    Keywords.-
    Permite cargar una definición corta del contenido de la página que se está introduciendo para facilitar posteriores búsquedas tanto dentro del panel como del sitio web si estuviera habilitado.

    Título.-
    Le da nombre a la página insertada. Nombre que aparecerá posteriormente en los listados de búsqueda.

    Botón: Guardar página.-
    Guarda los cambios realizados en la página.

    Botón: Cerrar.-
    Cierra la ventana sin guardar los cambios.

    Barra de heramientas.-
    Opciones para la creación y modificación del formato y estilo de las páginas y así poder adaptarlas al diseño principal del website.

    USO DEL EDITOR HTML PARA PRODUCTOS
    
    Este editor nos permitirá editar los contenidos de los porductos que se muestran en la web mediante los siguientes campos:

    Opción.-
    Especifica el directorio de opción donde se encuentra.

    Plantilas.-
    Permite cargar un aplantilla con un formato ya hecho que se puede modificar.

    Keywords.-
    Permite cargar una definición corta del contenido de la página que se está introduciendo para facilitar posteriores búsquedas tanto dentro del panel como del sitio web si estuviera habilitado.

    Título.-
    Le da nombre a la página insertada. Nombre que aparecerá posteriormente en los listados de búsqueda.

    Botón: Seleccionar imágenes.-
    Muestra el editor web de Administración de imágenes que permite ver, insertar o subir la imagen seleccionada que se quiere agregar al producto.

    Botón: Ver.-
    Abre una nueva ventana para visualizar la imagen seleccionada.

    Mini descripción.-
    Campo para insertar una breve descripción del producto, que aparecerá en la portada del listado.

    Precio.-
    En formato xxx,xx Eur, para insertar el precio del producto. Botón:

    Guardar producto.-
    Guarda los cambios realizados en el producto.

    Botón: Cerrar.-
    Cierra la ventana sin guardar los cambios.
    Barra de heramientas.-

    Opciones para la creación y modificación del formato y estilo de los productos y así poder adaptarlos al diseño principal del website.

    USO DE LA BARRA DE HERRAMIENTAS DEL EDITOR HTML

    Otorga la posibilidad de crear una página o producto completos partiendo de cero o editar los contenidos de uno ya generado.

    Ver código fuente.-
    Permite acceder al código de programación de la página.

    Previsualizar.-
    Permiter obtener una vista previa de la página resultante.

    Imprimir.-
    Imprime el contenido.

    Cortar.-
    Copia al portapapeles los elementos seleccionados eliminándolos al mismo tiempo.

    Copiar.-
    Copia al portapapeles los elementos seleccionados.

    Pegar.-
    Pega el elemento contenido en el portapapeles en la zona seleccionada.

    Deshacer.-

    Elimina la última acción realizada.

    Rehacer.-
    Restaura la última acción deshecha.

    Eliminar formato de texto.-
    Deshace el formato de texto del párrafo seleccionado.

    Negrita.-
    Cambia a letra negrita el texto seleccionado.

    Subrayado.-
    Subraya el texto seleccionado.

    Cursiva.-
    Cambia a letra cursiva el texto seleccionado.

    Insertar lista numerada.-
    Crea una sucesión de párrafos numerados en lista.

    Insertar lista.-

    Crea una sucesión de párrafos en lista precedidos por puntos.

    Disminuir espaciado.-
    Disminuye el espacio entre el párrafo donde se encuentra el cursor y el principio de la línea de escritura.

    Aumentar espaciado.-
    Aumenta el espacio entre el párrafo donde se encuentra el cursor y el principio de la línea de escritura.

    Superíndice.-
    Cambia a formato de superíndice el texto seleccionado debiendo deshabilitar esta opción para continuar con la escritura normal.

    Subíndice.-
    Cambia a formato de subíndice el texto seleccionado debiendo deshabilitar esta opción para continuar con la escritura normal.

    Alinear a la izquierda.-
    Una vez seleccionado el texto lo alinea al margen izquierdo con el borde derecho discontinuo.

    Alinear en el centro.-
    Centra los objetos o el texto seleccionado.

    Alinear a la derecha.-
    Alinea el texto u objetos seleccionado al margen derecho con el borde izquierdo discontinuo.

    Alineación justificada.-
    Alinea el texto u objetos seleccionados a los márgenes derecho e izquierdo.

    Crear o modificar enlace.-
    Crea un enlace del texto u objetos seleccionados a una página externa, interna, correo electrónico o una imñagen en pop-up.

    Crear enlace de correo electrónico.-
    Una vez seleccionado el texto o la imagen crea un enlace para el envío de correo electrónico.

    Fuente, Tamaño, Formato, Estilo.-
    Diferentes opciones para dar formato al texto seleccionado. Color de texto. Color de fondo de texto.

    Funciones de tablas.-
    Al seleccionar esta opción es posible realizar las siguientes operaciones:

    • Insertar tabla.
      Inserta una cuadrícula de tabla.
    • Modificar propiedades de tabla.
      Permite cambiar el color de fondo, borde, ancho, margen de celdas, espacio entre celdas de las tablas.
    • Modificar propiedades de la celda.
      Permite cambiar el color de findo, alineación horizontal, alineación vertical, y el ancho de celda de una selección de celdas.
    • Insertar columna a la derecha.
    • Insertar columna a la izquierda.
    • Insertar fila anterior.
    • Insertar fila posterior.
    • Borrar fila.
    • Borrar columna.
    • Incrementar espacio de columna.
    • Reducir espacio de columna.

    Funciones de formularios.-
    Permite realizar las siguientes operaciones:
    • Insertar formulario.
      Agrega un documento de áreas vacías en las que es posible reunir y organizar información.
    • Modificar propiedades de formulario.
      Permite cambiar el color de fondo, borde, ancho, margen de celdas, espacio entre celdas de las tablas.
    • Insertar o modificar campo de texto.
      Permite cambiar el color de findo, alineación horizontal, alineación vertical, y el ancho de celda de una selección de celdas.
    • Insertar o modificar campo oculto.
    • nsertar o modificar botón.
    • Insertar o modificar campo de chequeo.
    • Insertar o modofocar botón de opción.
    • Borrar fila.
    • Borrar columna.
    • Incrementar espacio de columna.
    • Reducir espacio de columna.

    Insertar o modificar imagen.-
    Da acceso al administrador de imñagenes desde el cual será posible ver, modificar o agregar las imágenes a mostrar en el website. Insertar línea horizontal.

    Insertar carateres especiales.-
    Muestra la lista de caracteres especiales para incluir en la página.

    Mostrar / Ocultar guías.-
    Muestra u oculta las líneas directrices de la página editada.

    USO DEL CUADRO DE MANTENIMIENTO DE OPCIONES DE MENÚ

    Aparece en la parte derecha de la pantalla y sirve para definir las características de cada opción.

    Tipo de opción.-
    Permite seleccionar el tipo de opción a insertar (opción, página,producto)

    Nombre.-
    Para definir un nombre de opción.

    Descripción.-
    Para describir la opción en edición.

    Imagen [ ver/seleccionar/quitar].-
    Es posible que en lugar de mostrar el título de la opción se muestre una imagen asociándola a esta opción desde el listado de imágenes.

    USO DEL CUADRO LISTADO DE IMÁGENES

    Mostrar imagen tipo.-
    Permite mostrar las imágenes por tipo (Ej: Todas, jpeg, gif...). Al final de la ventana aparecen las opciones para desplazarse entre las imñagenes encontradas (EJ: << Anteriores Mostrando desde 1 hasta 8 Siguientes >> )

    Descripción.-
    Para describir la opción en edición.

    Imagen [ ver/seleccionar/quitar].-
    Es posible que en lugar de mostrar el título de la opción se muestre una imagen asociándola a esta opción desde el listado de imágenes.

    USO DEL CUADRO MANTENIMIENTO DE IMÁGENES

    Aparece en la parte derecha de la pantalla y sirve para tratar las imágenes utilizadas en el website.

    Campo Imagen, animación FLASH, Archivo HTML o PHP.-
    Donde se debe de indicar la ruta de estos tipos de archivos que pueden ser agregados al website.

    Botón Examinar.-
    Permite subir archivos de los distintos tipos apareciendo la ruta automñaticamente en el campo anterior.

    Categoría padre.-
    Permite seleccionar la categoría donde se desean almacenar las imágenes.

    Pie de foto.-
    Permite introducir un texto que posteriormente se visualizará en el pie de la imagen.

    Keywords.-
    Permite introducir una definición corta de la imagen para facilitar posteriores búsquedas.

    Ampliar imagen / Editar imagen.-
    Permite variar las características de la imagen seleccionada.

    Botón Guardar.-
    Guarda los cambios realizados anteriormente.

    Botón Cancelar.-
    Cancela los cambios realizados.