Manual XALOC

Enero 2021
 Estas son las urls de acceso a los CMS de Xalok con VPN
 https://admin.eltiempo.com.co/login
 https://admin.fred.eltiempo.com.co/login
 https://admin.portafolio.eltiempo.com.co/
 https://admin.motor.eltiempo.com.co/

 La url de acceso al CMS de El Tiempo sin VPN es la siguiente
 https://cmset.ceet.co/login

2
 Login

• Ingresar
ww.admin.eltiempo.com.co

Nota: • Diligenciar la información.

Algunos usuarios tienen acceso por esta
URL cmset.ceet.co, la cual no necesita
de la conexión a la VPN, esta
información puede ser suministrada por
Seguridad Informática. • Click.

3
COMPONENTES XALOC

4
Contenido / Escritorio

Últimos artículos publicados. Usuario responsable.

5
Búsqueda

Buscador

Buscador con filtros

6
Creación de artículo

Clic en crear.

Seleccionar
contenido a
crear.

*Se carga la información que alimentará las boards.

7
Edición de artículo

Seleccionar la sección.

Seleccionar el autor.

Editar el título del

artículo.

* Se selecciona el artículo del listado últimos artículos publicados.

8
Selección (Imagen/Video de apoyo)

Elegir opción imágen

Seleccionar la imágen

Elegir opción video Elegir HTML libre

Seleccionar el video

9
Edición

Editar texto descriptivo de la imagen / video.

Editar nombre del autor.

Editar texto del artículo.

10
Metadatos

Seleccionar tipo de contenido:

-Estándar
-Premium
-Tendencia

Seleccionar etiquetas
(Relacionados de esta noticia)

11
Seo

Agregar el título del artículo creado.

12
Publicación

Clic

Clic Publicar

13
Edición de un artículo publicado

Desde el escritorio
escoger el artículo.

Opción Clonar.

*AL clonar puede

inciar el proceso de
edición.

14
Historial de publicaciones

Historial de
publicaciones del
artículo.

15
Des-publicación

Des-publicar.

Una vez despublicados, quedan en

el escritorio en la lista Pendientes
de validación.

16
EDICIEDICIÓN HOME PRINCIPAL

17
Editar el HOME principal

Clic en portada y luego en

Homepage.

Vista, luego del clic.

18
Editar el HOME principal

Al dar clic al lápiz, se verá

predeterminado mobile.

Vista, luego del clic.

19
Boards
Edición Cintillo Última Hora

Visual de board sin publicar.

Para el cintillo se tendrán disponibles dos colores (Amarillo / Rojo). 20

Cintillo Última Hora

1. Clic en Editar

2. Se habilitan las
opciones de la
board.

3.
Clonar para editar.
-Color
-Texto (Ultima hora)
-Llamar al artículo.

21
Cambio de Color (Sabor)

Clic

22
Editar el artículo dentro del cintillo

2. Se despliega el
contenedor para 1. Clic al lápiz para
seleccionar el artículo. llamar el artículo.

Filtro por tipo de

artículo.

23
Publicar

Clic.

Publicar.

24
Emergencia Edición Escenario Carrusel
(Seleccionar todos)

Seleccionador
multiple.

Con la opción (Lapiz) seleccionas todos al

tiempo.

25
Emergencia Edición Escenario Carrusel
(Seleccionar uno a uno)

Escoger icono que acompaña el

contendio.
Se habilitan las opciones para
añadir al contenido. Edicion de contenido para limentar uno.

26
Eliminar items individuales
(Carrusel)

Visual, al eliminar el
contenido.

Seleccionar opción borrar

item.

27
Contenido Premium

Despliegue.

Configuración.

28
Módulos combinados de contenido y elementos libres

Tiene disponible la opción autoplay Permite introducir una

sí es un video. Esta opción se podrá imagen adicional para
encontrar también en otras boards. destacar.

De manera opcional se puede añadir un

botón con enlace para dar visibilida a
más contenidos.

29
Elecciones posiciones

Configuración.
Elección de posición.

ET PLAY
1. Posición: Sobre Agenda del día.
2. Posición: Bajo Inv y Análisis.
3. Posición: Sobre Recomendados.

BOARD COMERCIAL
1. Posición: Sobre Agenda del día.
2. Posición: Bajo Inv y Análisis.
3. Posición: Sobre Recomendados.

Aplica para:
-ET PLAY. 30
-Board Comercial.
Escenarios y opciones para vídeos

Podemos cambiar
entre mostrar
imagen o video

En el caso de emplear
un video como
recurso del contenido, Se muestra cuando se activa el
tenemos la opción de video sticky
mantenerlo como
sticky en la página.
Esta opción se
presenta en varios
boards
Botón para elegir
imagen o video

31
Escenarios de recursos y tipos de contenidos

El contenido destacado puede

tener como multimedia imagen,
video o un HTML libre En la parte superiór de la board tenemos un espacio con dos escenarios:
- Podcast que permite introducir un HTML libre
- Articulo

Se permite añadir dos notas como

relacionadas.

En el lateral, nos encontramos boards

dentro de la board, algunas como
publicidades, pero tambien para
añadir contenidos

32
Acercar/Alejar Imagen (Ajustar posición)

Activar opciones de ajuste.

Cerrar opciones de ajuste.

Confrimar ajuste.

Ajustar zoom de la imágen.

Ajustar posición.

33
Elementos editables

Los titulos de los boards Tambien tenemos

tambien son editables en su espacios para etiquetas o
gran mayoría, y podemos textos enteros con
tener tituos de textoscon posibilidad de texto
enlace o directamente para editable y enlace
poner una imagen/logo

Lo mismo ocurre en el lado

opuesto del título de board. El
HTML libre también es una
opción que se puede
encontrar a este nivel
Mientras un módulo o board no sea
automático, se pueden editar aparte
de laimagen todos los demás
elementos que trae el contenido
como categoría, titulo, sumario

34
LO NUEVO

35
Escenarios

Escenarios son:
-Diferentes diseños de una misma board.
-Es posible que haya diferencias de estética y funcionalidad entre un
escenario de una board y otro del mismo.

Escenarios para seleccionar:

1. V4 Escebarios bse
2. v7 Escenario con carrusel
3. Escenario timeline

Escenarios aplicara para: Board Emergencia / Agenda del día / Coyuntura. 36

Colecciónes en boards

En el escenario v7 Escenario con carrusel, se nos permite elegir varios En escenario de timeline, VER CUBRIMIENTO al
objetos multimedia y mostrarlos en formato carrusel clic permite añadir un link y cambiar el texto del botón
si fuera necesario.

Para el escenario con timeline,

añadimos la información desde
el artículo.

37
Elementos divergentes en la Board Coyuntura Home

En la parte frontal La temática viene

se muestra una de predefinida.
las dos partes solo.

Con este botón, en la parte frontal cambiamos la vista de la parte reducida a la ampliada de la board
y vic.eversa

La parte baja tiene 2 escenarios:

- Notas.
- Carrusel (Videos)

38
Elementos divergentes en la Board Coyuntura Home (No Colpasada)

Imágen al no estar colpasada la board. (Mobile)

Edición/Alimentación de contenido
es independiente a la board colapasada.

39
Elementos divergentes en la Board Coyuntura Home (Colapsada)

Imágen al estar colpasada la board.

Edición/Alimentación de imágenes (Logos) y contenido
es independiente a la board no colapasada.

40
Edición Coyuntura Especial (Contenido)

Edita igual que con las demás boards.

Edita igual que con las demás boards.

41
Edición Coyuntura Especial (Background)

Seleccionar el background.

Tipos de azul

42
Edición Coyuntura Especial (Imágen)

Ajuste de imágen

Seleccionar imágen

Especificaciones de la imegen (Formato PNG, Resolución 300 DPI, tamaño 758 x 440) 43
Pre-visualización responsive

Botón para elegir modo de previsualización

Modos de previsualización existentes :

-Desktop
-Tablet
-Mobile (por defecto)

Se selecciona un módulo u otro con clic sobre la opción,

pudiendo cambiar de una a otra las veces que se desee.

Desktop Tablet Mobile

Permite ver con más claridad

como va quedando la
información y poder tomar
medidas de adaptación de
títulos, imágenes, etc.

44
Preview (Desktop-Mobile-Tablet)

Configuración

Escoges la posición.

Pueden alimentar desde cualquier previsualización ( Mobile, es la predeterminada). 45

Especiales (Flujos)

A
B

DESKTOP

TABLET

MOBILE

Se puede alimentar desde cualquier previsualización (Mobile, es la predeterminada) 46

Listados dinámicos

-Adicional al critetio, el listado permite seleccionar los elementos que se

desean mostrar. Hay que tener en cuenta que, los diseños están
- Se pueden emplear para mostrar un listado preestablecidos y si se emplea alfo fuera de ello, puede que no se vea
de noticias con un criterio que se puede elegir visualmente correcta.
desde las opciones dadas y sus
combinaciones.

47
ARTÍCULO
Opciones disponibles

Lleva al front.
Lleva a la sección para editarlo desde allí.
Previsualización.
Mover la posición.

Opciones

49
Cintillo Especiales

Clic para activar la edición.

Editar el texto.

Para llamar el artículo.

Opción para eliminar el cintillo.

50
Apertura

Ademas de imagen, video y HTML libre

Dar clic al lapiz para editar. tenemos también la opción de galería en el
multimedia principal

Seleccionar la iá

51
Título / Patrocinado / Lead

Editar el título.

Editar imagen del patrocinado.

Editar lead.

52
Autor / 1er Párrafo

Autor (Inicio y final del texto).

Alimentar 1er párrafo.

53
Opciones de módulo

Módulo con imagen vertical.

Módulo con audio e imagen.

54
Módulo Imagen Vertical

Editar texto / Autor

55
HOME DE SECCIÓN
Ingreso

Seleccionar la sección a
editar.

57
Sección con subsección

1era board (Manual).

58
Sección con subsección

Editar articulo / Board manual

La edición de la board manual

de secciones es igual a todas las
boards de la home.

59
Boards automáticas de las subsecciones (Header)

Header superior

Configuración para header de board:

• Con header que ocupa todo lo ancho

para todas las boards automaticas
menos la primera.
• Con header interior para la primera
board.
Header interior
• Sin header para las secciones que no
tienen subsecciones.

60
Boards automáticas de las subsecciones (Header)

Nombre de board editable. Clic para habilitar la edición.

*Sólo se alimentan una vez. 61

Boards automáticas de las subsecciones (Header)

Se alimenta texto.

El header cuenta con dos espacios para:

• Título de la board para nombre
subsección.

• Texto con enlace para llevar a la página

de esa subsección.

Se alimenta texto y
enlace.

62
Boards automáticas de las subsecciones (Settings)

Opciones (Tabla de configuración)

Alimentar las notas  Título:
Agregar título de la subsección (Editable).

 Criterio de artículos:
Escoger la opción reciente, para llamar lo
más actual.

 Categoría:
Se escoge la subsección a alimentar.

 Artículos por página:

La cantidad depende de cada board.
(En el cso de la imágen de ejemplo serían 4
notas + la nota de CP.

63
Boards automáticas de las subsecciones (Template)

Alimentar las notas.

Opciones de imágen para cada board.

Opción de imagen:

• Para la primera board automática:

Category_children (414 pX X 300).

• Para la 2º, 3º y 5º board automática:

Category B2_B3_B5 (414 pX X 300).

• Para la 4º board automática:

Category B4 (414 pX X 300).

64
Boards automáticas de las subsecciones (Template)
Opciones (Tabla de configuración)
1. Agregar opción (MÁS NOTICIAS) para mobile. 1.
2. Ajustar elementos de la nota. Texto en el footer :
Capturar el título (MÁS NOTICIAS)

-Link del footer (alimentar con la url de la

subsección de la board).

2. Debemos arrastrar de la columna 2 a la 1 los

componentes de la nota: Lo cual permitirá
estructurar de manera correcta su visualización en
el front:

Debe ser en este mismo orden.

-Imagen miniatura
-Sección
-Fecha
-Hora
-Título
-URL
-Sumario

65
Boards automáticas de las subsecciones (Template)

Agregar opción (MÁS NOTICIAS) para mobile.

Para que en responsive nos salga la parte del

header para ver más noticias de la sección
(el texto en azul con enlace a la sección)
es necesario complementarlo desde el board
de manera dinámica como en el ejemplo:

• El Texto en el footer
• El Link del footer

66
Conteo de posición

Esta es la forma correcta de contar para entender en que posición debe

ir cada elemento que contiene la board.

1
2
3
4

67
Boards automáticas de las subsecciones (Listing.tab.boards)

Posicionamiento Ejemplos módulos

Posición No. 5

(Se activa la caja para la pauta y al tiempo la de

la lista de lás más leídas)

Posicionamiento módulos 68
Boards automáticas de las subsecciones (Listing.tab.boards)

Posicionamiento Ejemplos módulos

Posición No. 5

(Se activa la caja para la pauta y al tiempo la de

la lista de lás más leídas)

69
Boards automáticas de las subsecciones (Listing.tab.boards)

Posicionamiento módulos

Posición No. 5

Cuidado que hay 6 noticias en total, una

debajo del módulo de Nuestros
Periodistas

70
Boards automáticas de las subsecciones (Listing.tab.boards)

Columna a escoger para seleccionar c/módulo

-Columna 1:
LLamar módulo para editar Las más
leídas + publi.
Se arrastra la columna y se define la
posición.

-Columna 2:
Llamar módulo para editar Twitter /
HTML libre.
Se arrastra la columna y se define la
posición.

-Columna 3:
Llamar módulo para editar Nuestros
Periodistas

-Columna 4:
Llamar módulo para editar Portales
Transaccionales

71
Boards automáticas de las subsecciones (Módulo Twitter)
Este módulo se posiciona en la board automática No. 2.

-Columna 2: Twitter
Se arrastra la columna y se define la posición.

Se escoge la opción HTML

Se edita y captura el html.

*Se debe publicar el HTML y luego publicar la board. 72

Boards automáticas de las subsecciones (Nuestros Periodistas)
Este módulo se posiciona en la board automática No. 3.
-Dar clic en editar para habilitar.

-Se edita el título a NUESTROS PERIODISTAS.

-Añadir item.

-Introduzca un título:
Nombre del periodísta.

-El texto aquí:

Lead, descripción del periodista

-Placeholder :
Correo y twitter.

Al cambiar el periodista, debemos cambiar el link al que

redirecciona el nombre de twitter.

Clic al lápiz y agregar div para estilos. De la siguiente manera:

Para que la información de correo y Twitter salga como en la

imagen, se debe poner la información como en el ejemplo:

<b>[email protected] </b><br>
En Twitter: <b>@Leugim40</b>

Cuidando de poner las etiquetas <b>

*Se debe publicar el módulo periodistas, luego cerrarlo y después publicar la board. (Twitter: @LuisaMercadoD 73
Sección sin subsección

Editar notas/ Board manual

La edición de la board manual

de secciones es igual a todas las
boards del home.

74
Sección sin subsección

Editar notas/ Board manual

La edición de la board manual

de secciones es igual a todas las
boards del home.

75
Sección sin subsección

Editar notas/ Board manual

La edición de la board manual

de secciones es igual a todas las
boards del home.

76
Alimentación board Automática (Sección sin subsección)
Cargar de manera automáticas las notas.

-Seleccionar recienetes para que llame la información

actual.

-Escoger la sección en la que se está trabajando.

-Escoger la cantidad de artículos

que corresponden a la board.

Importante capturar la información de posición inicial a partir de la segunda board, evitando duplicar las notas.

*Para saber la posición incial para las boards de las secciones que no tienen subsecciones, siempre contar los espacios de noticias anteriores (-
1), es decir arrancamos con 5 notas en la primera board así que para la segunda board sería a partir del número 5.

Y seguir con el proceso mostrado en los slides: 61, 62 y 63.

77
Sección con subsección - Edición espacio Contenido Patrocinado

Luego de editarlo, es importante

El espacio de contenido recordar que funciona como una
patrocinado es editable para El contenido patrocinado se edita board, hay que publicarlo de
los usuarios con permisos. como cualquier otro contenido. manera independiente.

78
Sección sin subsección - Edición espacio Contenido Patrocinado

Alguien con permisos tiene que arrastrar la columna de noticia patrocinada y dejarla
siempre en la primera board automática en la posición 1

Hay que tener en cuenta que si se publica la patrocinada en el primer board automatico, este
no tiene 5 contenidos, si no 4

El espacio queda luego para poder ser alimentado por una persona con permiso.
Se alimenta exactamente como la patrocinada de la board manual

79