Plataformas de Gestión y Administración de Sitios Web (PGS PAS)

Transcripción

1 Plataformas de Gestión y Administración de Sitios Web (PGS PAS) Qué es la plataforma de gestión de sitios (PGS)? Es una nueva forma dinámica que hará el diseño de los websites más flexibles y será amigable en las tareas de edicición de contenido, carga de sitios y cambios en las plantillas. Cómo está construida la PGS? La plataforma está dispuesta de manera centralizada a todos los sitios web a los que se sirve, sin embargo, cada sitio puede tener su propia base de datos de contenido, lo que la convierte en una solución ideal para manejar sitios sin ligarlos necesariamente a otros sistemas. Está basada en los últimos estándares de lenguajes ampliamente utilizados en el mundo web como HTML5, PHP, MySQL, jquery que le permiten ser flexible, fácilmente mantenible y actualizable y altamente integrable con otros sistemas internos o de terceros. Cuáles son las ventajas de la PGS con respecto a otros sistemas de manejo de contenido (Adminsites, Wordpress, Joomla, etc)? Como primera medida el objetivo no es competir a estas herramientas, es ofrecer una solución que se ajuste a las necesidades actuales de negocio de Carvajal Información. Por esta razón, se ha trabajado en conjunto con los diferentes equipos para tratar de dar alcance a la mayoría de requerimientos de nuestros clientes y de nuestros productos. En cuanto a diferencias técnicas tenemos los siguientes puntos clave: Separación completa de capas de presentación (plantilla) y de datos (contenido) con lo cual podemos asegurar que podemos integrarla en CUALQUIER template HTML4 HTML5 que sea necesario. Centralización del control del sitio con lo cual garantizamos que todos los sitios pueden ser fácilmente publicados, cambiados de estado, bajados del aire con un solo click. Flexibilidad de templates con lo cual garantizamos que nuestros diseñadores pueden dar rienda suelta a su creatividad y proponer diseños de vanguardia para nuestros productos. El control de los diseños es solo de ellos, la plataforma no va a limitar los diseños que ellos deseen crear.

2 Sitios más livianos lo cual se traduce en sitios más rápidos, pues, al reducir el espacio en disco y en peticiones a base de datos que realiza un sitio, podemos aumentar su velocidad. Centralización de librerías, como jquery, jkit y jquery-ui que le permiten a todos los diseñadores diseñar con las últimas librerías disponibles de acuerdo a las políticas de release de los desarrolladores. Código propietario y fácilmente mantenible, lo cual podemos traducir en mayor seguridad, pues nadie conoce nuestro código fuente, al mismo tiempo que podemos aplicar parches de seguridad, corrección de errores y mejoras de manera dinámica para satisfacer los requerimientos de los cambios que nuestros clientes requieren Integración con API s de terceros, lo cual nos da una flexibilidad en aplicativos que podemos emplear en sitios web, insertando códigos de facebook, twitter, google analytics, google maps o youtube, entre otros. Qué es la nueva Plataforma de Administración de sitios? Tendremos una nueva herramienta llamada Plataforma de Adminsitración de Sitios PAS que centralizará toda la información referente a todos los sitios, como sus credenciales de administración, de cliente, usuario de FTP y estado actual del sitio. Desde esta herramienta podrás gestionar desde la creación del sitio en la plataforma hasta su publicación Online una vez realizado el QA respectivo, todo al alcance de un click.

3 Cómo será el proceso de producción? El proceso de producción estará apoyado en la Plataforma de Administración de Sitio (PAS) consta de los siguientes pasos: 1. Creación de cuenta en plataforma Amazon/cPanel 2. Redención de codigo de template 3. Generación y creación de archivo de configuración al sitio 4. Verificar credenciales ftp 5. Subir template al servidor 6. Instalar template en el sitio 7. Carga de contenido / Edición de template 8. Publicación de si Creación de cuenta en plataforma de Amazon/cPanel Seguiremos empleando el mismo proceso que se ha venido empleando actualmente con los sitios creados Wordpress. Emplearemos el dominio del cliente, el usuario y el tipo de producto de la siguiente manera: 1. Dominio del cliente: Debe ser el dominio comprado por el cliente, sin ningún tipo de adición o palabra extra en su composición. a. Los dominios de prueba no están permitidos y serán filtrados en el proceso para impedir su creación. En caso tal de ser creado un dominio de prueba, todos los viernes a las 23:00 correrá un proceso para la eliminación de sitios con las palabras prueba, demo, test, publicar, pruebapublicar, pruebacarvajal, clienteprueba, etc. (Esta lista será constantemente actualizada y depurada para hacer el proceso más dinámico). b. Asi mismo, los dominios de prueba antiguos como no estarán disponibles c. El manejo de sitios de prueba, o sitios demo puede ser trabajado de dos formas, Creando un template únicamente HTML para luego integrarlo dentro de la plataforma o mostrando el producto al cliente en su propio ambiente local de desarrollo. d. Todos aquellos cambios que deban ser realizados al sitio una vez publicado, deben ser realizados en el espacio del cliente, bajo su propio dominio. No está permitido crear dominios adicionales, o sitios adicionales para validar el producto con el cliente. Si el cliente desea el rediseño o cambios en su producto entregado, el colaborador asignado debe proceder cambiando el estado del

4 sitio a en construcción y realizar los cambios requeridos, para luego, actualizar el estado del sitio de nuevo a Online. e. Todas aquellas solicitudes de cambios al sitio sin cambiar su estado (es decir, el cliente solicita cambios pero no quiere que su sitio no sea puesto en construcción) están totalmente prohibidas. Para validar este tipo de cambios se debe contar con la autorización del jefe de producto y/o producción y debe ser informado al departamento de TI Digital mediante un caso en Salesforce a German Velásquez, para que el equipo de TI Digital proceda a la configuración del sitio prueba y lo incluya en la lista de excluidos del proceso de borrado. f. El Dominio del cliente debe estar correctamente apuntado a la plataforma en el momento de la creación del sitio, Es de vital importancia esta observación, pues si el dominio aún no ha sido apuntado, el sitio no podrá ser instalado ni configurado y deberá ser re-creado en el momento en que se realice el apuntamiento. 2. Usuario: Será el nombre de usuario asignado dentro de la plataforma Amazon/cPanel, estará dado por la siguiente convención de nombres: Cliente: FERRETERIAS EL TORNILLO Contrato: IdEmpresa: Dominio: ferretornillo.com El usuario estará dado por la combinación de las 6 primeras letras del dominio y los 2 ultimos números del contrato, en caso tal de no estar disponible se debe seguir reduciendo las letras de dominio y aumentando los números del contrato, en caso tal de estar ocupadas las posiciones con el contrato, se debe seguir el mismo procedimiento pero con los números de IdEmpresa. Esta palabra debe ser escrita estrictamente en minusculas. A continuación se muestra un ejemplo: 1. ferret34 ferre234 - ferr1234 fer01234 fe ferret87 ferre587 ferr4587 fer34587 fe Tipo de producto: Debe ser seleccionado el tipo de producto correcto, puesto que el sistema validará si es posible crear el sitio con el tipo de producto ingresado. La pantalla de creación de sitio se muestra a continuación. Al terminar la creación tendremos la respuesta desde el sistema en 3 secciones mostradas al lado derecho 1. Creación de Cuenta en el sistema 2. Creación de credenciales FTP en el sistema 3. Registro del sitio en la plataforma de administración y gestión de sitios

5 Redención de código de template Dentro del proceso de venta, el cliente podrá escoger el template que quiere usar para su pagina web en el Marketplace de templates, donde procederá a reservarlo junto con su dominio, el marketplace le entregará un código de reserva que debe venir junto con el brief del producto. Una vez se ha validado el código, el sistema disponibilizará el archivo de template para su descarga y posterior carga vía FTP en el sitio.

6 Creación de archivo de configuración Una vez el template ha sido descargado, debe ser descomprimido y presentará una estructura de archivos similar a la siguiente Carpetas Obligatorias Carpetas por template (opcionales) Template Template admin css uploads js db index.php Estarán contenidos los archivos que conectan la página con la plataforma de gestión de sitios, el script de base de datos que pre-popula el template, junto con las imágenes que requiere la plantilla para ser cargada correctamente. El archivo de configuración debe ser generado antes de instalar el template, dado que deben ser creados los campos de contenido en la base de datos. Los datos para crear el archivo de configuración los entregará la plataforma en la siguiente pantalla, donde solo se requiere ingresar el dominio asignado al sitio web.

7 Una vez el sistema crea el archivo de configuración puede proceder a instalar el template en el sitio. El archivo de configuración se crea automáticamente en el dominio que se ha apuntado para realizar el sitio. Una vez se realiza el procedimiento, debe proceder a subir todos los archivos correspondientes al sitio vía FTP a la plataforma Las credenciales FTP pueden ser consultadas en la pestaña credenciales de la plataforma web Verificación de credenciales FTP Todas las credenciales asociadas al sitio, pueden ser verificadas dentro de la pestaña Ver credenciales disponible en la plataforma web. Una vez verificadas, se puede proceder a la carga del sitio vía FTP empleando un cliente FTP como Filezilla (Windows/MAC) o Cyberduck(MAC)

8 Una vez se han subido todos los archivos correspondientes al sitio, se puede proceder a finalizar la instalación del sitio haciendo click en el botón que aparece en la pantalla de creación de archivo de configuración. El sistema instalará el sitio y obtendrás una pantalla de éxito / error como la siguiente Listo!. Ya es posible empezar a trabajar en el sitio y a hacer los cambios requeridos para el producto.

9 Carga de Contenido/Edición de template/publicación de sitio El template puede ser editado empleado las herramientas usuales de edición de código HTML/CSS/JS teniendo en cuenta las etiquetas PHP que permiten crear campos editables. El control del sitio está en las manos del diseñador asignado, y el sistema no limitará el producto. Es decir, los únicos límites los pone el diseñador que está creando la página, y la pauta de producto. Los sitios no tendrán tampoco la limitación de cantidad de imágenes, páginas o contenidos, razón por la cual, es importante que los diseñadores se ciñan a la pauta de producto que el jefe de producto a determinado para cada producto en particular. El diseñador tiene el control sobre qué campos deben ser editables en un sitio y cuáles no, es decir, si el diseñador desea dejar una imagen fija, debe crear el código en el archivo HTML sin llamarlo con una etiqueta PHP. Dentro de la plataforma es posible insertar códigos HTML/iFrame provenientes de terceros como Youtube, Google Maps, Twitter, Facebook como campos generales, y es posible subir imágenes al servidor empleando la opción designada. Más adelante veremos en profundidad en qué consiste la Plataforma de Gestión de Sitios. Por otra parte, al crear el sitio, se desplegará el template de página en construcción, sin embargo, el diseñador tendrá el control del sitio y podrá trabajar en el sitio sin ningún problema. El sistema detectará cuando un usuario se ha autenticado en el administrador y desplegará el sitio definitivo para así facilitar el trabajo de diseño del sitio (sin importar su estado). Un sitio puede tener 4 estados a saber: o o o o En construcción Sitio de prueba Online Offline (Estado no disponible para producción) Sitio En Construcción Comportamiento para usuario logueado: Despliega el sitio definitivo y muestra los cambios instantáneamente Comportamiento para usuario no logueado: Despliega el template de sitio en construcción. También retornará un HTTPStatus 503 (Service Unavailable) para evitar la indexación del sitio en motores de búsqueda. Empleado para: Construcción inicial del sitio, modificación de diseño en el sitio. Sitio de Prueba Comportamiento para usuario logueado: Despliega el sitio definitivo y muestra los cambios instantáneamente

10 Comportamiento para usuario no logueado: Despliega el sitio definitivo, pero con un overlay en la parte superior recordando que es un sitio de prueba y que aún no está listo para producción. También retornará un HTTPStatus 503 (Service Unavailable) para evitar la indexación del sitio en motores de búsqueda. Empleado para: Mostrar al cliente los avances y solicitar aprobación del sitio. Sitio Online Comportamiento para usuario logueado: Despliega el sitio definitivo y muestra los cambios instantáneamente Comportamiento para usuario no logueado: Despliega el sitio definitivo y muestra los cambios instantáneamente. Retornará un HTTPStatus 200 (OK) para que el sitio se indexe correctamente en motores de búsqueda. Empleado para: Entrega y finalización de sitio. Sitio Offline (Este estado no está disponible para el equipo de producción) Comportamiento para usuario logueado: Despliega el sitio definitivo y muestra los cambios instantáneamente Comportamiento para usuario no logueado: Despliega template de sitio en mantenimiento y retorna un HTTPStatus 503 (Service Unavailable) para evitar su indexación en los motores de búsqueda. Empleado para: Desactivación de sitio y des-publicación de sitio. Estos estados pueden ser cambiados dentro de la plataforma de administración de sitios de acuerdo al requerimiento, en la pestaña Cambiar Estado

11 Plataforma de Gestión de Sitios La plataforma presenta una forma rápida de gestionar el contenido de un sitio en particular. Es una herramienta sencilla que permite realizar cambios en el contenido del sitio. La plataforma de gestión de sitios puede ser encontrada en todos los sitios de la siguiente manera Y allí se desplegará una pantalla de login como la que se muestra a continuación: Las credenciales para acceder a cada sitio, pueden ser verificadas en la PAS con el dominio del cliente. Una vez dentro, tendremos un sencillo menú que presenta todas las opciones disponibles para la edición de contenido del sitio. Tendremos el Menu Contenido que permite agregar, editar o borrar contenido del sitio, el Menu Formularios que permite crear, editar o borrar formularios del sitio, el Menu Configuración que permite ajustar el menú, el título del sitio y los datos de contacto del cliente.

12 Finalmente tendremos un botón llamado Ir al sitio que permite una previsualización de los cambios realizados y un botón de Logout para cerrar la sesión del administrador Contenido En el menú contenido tenemos las opciones Añadir, Editar y Borrar Contenido. Añadir Contenido Desplegará una pantalla donde es posible Agregar Campos o Imágenes al sitio. Esta pantalla también desplegará una lista de los campos actualmente creados. Dentro de estos campos es posible agregar códigos HTML de terceros, como contenidos de texto sencillos sin ningún tipo de formato HTML/CSS. También se pueden agregar códigos embebidos como Google Analytics para que se desplieguen en la página.

13 Editar/Borrar contenido Es posible editar el contenido de un campo en particular empleando la opción Editar Contenido del menú. Se desplegarán los campos existentes en la plataforma junto con un botón que permite aceptar los cambios. Para borrar el contenido se presentará una pantalla similar a la anterior, pero con la opción de borrado de contenido. Formularios El sistema incluye un módulo para realizar formularios de manera sencilla que permite agregar tantos campos como sean requeridos y disponer de validaciones de cantidad de caracteres y campos obligatorios dentro de los campos. También se incluirá, en cualquier formulario creado un campo de captcha orgánico automático que evitará envíos de correo basura al destinatario. Es posible crear campos de Texto, , Checkbox, Selector, TextArea para cumplir con los datos requeridos por el usuario. El módulo de formularios únicamente permite configurar uno o varios destinatarios, separados por el caracter,. La pantalla de creación de formulario se presenta a continuación

14 Configuración de sitio La plataforma permite insertar campos predefinidos dentro del sitio para mantener el orden de los campos básicos del sitio. Las opciones que se presentan en esta pantalla pueden ser llamadas desde el template siguiendo la misma lógica de cualquier otro campo dentro del sistema. Los campos asignados al menú estarán dispuestos de acuerdo a la pauta de producto (cantidad de páginas), y cada uno debe tener su nombre y su link en particular. Por otra parte, en caso de requerir la activación de una página adicional, debe ser solicitada su activación para la modificación y la inclusión del campo en esta sección. Los campos predeterminados que se pueden configurar en esta página son: Campo Etiqueta Nombre del Sitio <?php render_field( titulo );?> Menu principal Ver siguiente sección Mail de Contacto <?php render_field( Contact );?> Teléfono <?php render_field( telefono );?> Dirección <?php render_field( direccion );?> Mapa <?php render_field( Map );?> Google Analytics <?php render_field( google_analytics );?> Social-facebook-enlace Ver cheat-sheet Social-twitter-enlace Ver cheat-sheet Social-youtube-enlace Ver cheat-sheet Icono Facebook Ver cheat-sheet Icono Youtube Ver cheat-sheet Icono Twitter Ver cheat-sheet

15 El llamado a estos campos debe ser de la forma en que aparecerá en el menú (Menu Item) y el enlace al que apunta (Menu Item link). En este ejemplo está Inicio>>Productos>>Contacto Cada uno con su respectivo enlace index.php>>productos.php>>contacto.php. El menú debe ser generado en HTML de la siguiente manera <ul> <li><a href="<?php render_field("option_menu_link_0");?> ><?php render_field("option_menu_0");?></a></li> <li><a href="<?php render_field("option_menu_link_1");?> ><?php render_field("option_menu_1");?></a></li> <li><a href="<?php render_field("option_menu_link_2");?> ><?php render_field("option_menu_2");?></a></li> </ul> Finalmente se muestra una lista (cheat-sheet) con las funciones específicas que deben ser empleadas en la creación del template.

16 Etiqueta <?php require_once admin/init.php ;?> <?php render_field( NombreCampo );?> <?php render_image( NombreImagen, AltText );?> <?php render_map( NombreMapa );?> <?php render_form( NombreFormulario );?> <?php get_image( NombreCampo );?> <?php get_field( NombreCampo );?> <?php get_jquery();?> <?php get_jkit();?> <?php get_jqueryui();?> <?php $status = send_message();?> <?php echo get_image( NombreImagen ):?> <?php echo $status;?> <?php render_legalnote_field();?> <?php render_facebook();?> <?php render_youtube();?> <?php render_twitter();?> <?php render_analytics();?> Función Codigo de inclusion e inicialización de la plataforma. Imprimirá el campo en la página web Imprimirá una imagen en la página web. Permite ingresar su texto Alterno. En caso de requerir limitar tamaños, la manera adecuada es empleando CSS Imprimirá un mapa de Google Maps editando su código para que sea responsive. Renderizará un formulario creado previamente. Debe ser estiilizado empleando clases de CSS (form, input, button). Obtiene la ruta de una imagen particular, sin imprimirla en pantalla Obtiene el valor de un campo sin imprimirlo en pantalla Obtiene la ultima version de jquery disponible en el servidor Obtiene la ultima version de jkit disponible en el servidor Obtiene la última version de jquery-ui disponible en el servidor Debe ser llamado al inicio (luego de la inicialización) de la página de contacto para enviar el correo de contacto. Retorna la ruta de una imagen subida al servidor Retorna el resultado del envío del correo de contacto Retorna el pie de página global para todas las páginas Retorna el ícono de Facebook junto con el link asociado Retorna el ícono de Youtube junto con el link asociado Retorna el ícono de Twitter junto con el link asociado Retorna el código de Google Analytics.