Histórico da Página
| HTML |
|---|
<style>
/* Início estilo banner */
.compositiondani-banner {
position: relative;
min-height: 220px;
border-radius: 5px;
margin-bottom: 5px;
overflow: hidden;
}
.compositiondani-banner-image {
background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/capa-com-fundo-e-sem-icone-TDN21.png");
background-size: cover;
min-height: inherit;
width: 100%;
}
.compositiondani-banner-overlay {
min-height: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
pointer-events: none;
}
.compositiondani-banner-logo-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
bottom: 0;
transform: translate(-50%, -50%);
}
.compositiondani-banner-logo {
width: 350px;
height: 180px;
background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
background-size: contain;
background-repeat: no-repeat;
}
.compositiondani-banner-title {
margin-bottom: 10px !important;
padding: 10px !important;
background: rgba(0, 0, 0, 0.5) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 12px !important;
line-height: 1.3 !important;
max-height: 133px !important;
font-family: "Roboto", sans-serif !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #ffffff !important;
position: relative !important;
margin-top: 130px !important;
border-radius: 10px !important;
}
.compositiondani-banner-content {
position: absolute;
padding: 30px;
max-width: 60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
text-align: center;
}
.custom-header h1 {
font-size: 16px;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
border-radius: 5px;
margin: 0;
}
.negrito-materialize {
font-weight: bold;
}
.custom-margin-justified {
margin: 0 20px;
text-align: justify;
}
/* Final estilo banner */
#content.page.view {
padding-right: 0 !important;
}
</style>
<header>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>
<div class="compositiondani-banner">
<div class="compositiondani-banner-image"></div>
<div class="compositiondani-banner-overlay"></div>
<div class="compositiondani-banner-logo-container">
<div class="compositiondani-banner-logo"></div>
</div>
<div class="compositiondani-banner-content">
<h1 class="compositiondani-banner-title">
ALTERNÂNCIA ENTRE WORKSPACES DO GOODDATA NO TOTVS CRM
</h1>
</header>
</div>
</div>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<style>
/* ==============================
= CONFIGURAÇÕES GERAIS =
=============================== */
* {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a {
color: #42526e;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a:hover {
color: white;
}
li { font-size: 14px !important;
}
h3 { font-size: 14px !important;
font-weight: bold;
}
h1 { font-size: 13px !important;
}
h2 { font-size: 15px !important;
font-weight: bold;
}
td, th {
padding: 6px;
}
* p {
margin-bottom: 0 !important;
}
/* ==============================
= ESTILOS DE TÍTULOS =
=============================== */
#title-text {
display: none !important;
}
#content > div.page-metadata > div {
float: none !important;
line-height: normal !important;
width: auto !important;
display: none !important; /* ou outra propriedade de display que você deseja usar */
margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
}
#section2 > ol > li:nth-child(2) > p {
margin-bottom: 0;
}
.wiki-content h1,
.wiki-content h2 {
font-family: "Roboto", sans-serif !important;
font-size: 13px!important;
}
.wiki-content h1 {
font-size: 13px !important;
}
.wiki-content h2 {
font-size: 14px !important;
color: #42526e !important;
border-bottom: 2px solid #dfe1e5;
padding-bottom: 5px;
font-weight: bold;
}
.custom-heading,
h3.custom-h3 {
font-size: 16px;
color: #42526e;
margin-bottom: 20px;
}
.custom-h1 {
color: #feac0e;
}
.explanation h2 {
font-weight: bold;
}
/* ==============================
= ESTILOS DE TEXTO =
=============================== */
.wiki-content p {
font-size: 14px !important;
}
.justificado,
.custom-justified {
text-align: justify;
margin: 10px 0;
}
/* ==============================
= ESTILOS DE LINKS =
=============================== */
.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
text-decoration: none;
color: #42526e;
font-size: 14px;
}
.wiki-content a:hover {
color: white;
}
/* ==============================
= ESTILOS DE CONTAINER =
=============================== */
.custom-content {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 0 10px;
max-width: 100%;
overflow: hidden;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* ==============================
= ESTILOS DE CARDS =
=============================== */
.card {
border: 2px solid #9aa1ad;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #f4f5f7;
color: #42526e;
overflow-x: hidden;
top: 0;
}
/* ==============================
= ESTILOS DE TABS =
=============================== */
.tabs {
background-color: #dfe1e5;
}
.tabs .tab a {
color: rgb(66, 82, 110);
}
.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
color: #6B48FF;
background-color: transparent;
}
.tabs .tab a:focus {
background-color: rgba(82, 97, 232, 0.25);
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(16, 148, 184, 0.24);
}
.tabs .indicator {
background-color: #6B48FF;
}
.tab-content {
gap: 0;
padding: 10px;
}
.tab-content pre {
max-width: 100%;
overflow-x: hidden;
}
/* ==============================
= ESTILOS DE ÍCONES =
=============================== */
.icon-list,
.icon {
padding-left: 0;
list-style-type: none;
}
.icon {
display: inline-block;
width: 24px;
vertical-align: middle;
margin-right: 45px;
position: relative;
left: -25px;
}
.item .label i {
margin-right: 10px;
}
.label b {
color: #42526e;
}
td th {
color: #42526e;
}
/* ==============================
= ESTILOS DE COMPONENTES =
=============================== */
.collapsible,
.collapsible-header,
.collapsible-body {
box-shadow: none !important;
}
.faq-question {
font-weight: bold;
margin-bottom: 5px;
}
.faq-answer {
margin-bottom: 20px;
}
.custom-list {
padding-left: 0;
margin-left: 1.5em;
}
.custom-list li {
position: relative;
padding-left: 1em;
}
ul.custom-list {
padding-left: 10px;
}
ul.custom-list li {
position: relative;
list-style-type: disc;
padding-left: 30px;
margin-bottom: 10px;
}
.item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.item:last-child {
border-bottom: none;
}
.item .label {
flex: 1;
font-weight: bold;
}
.item .value {
flex: 1;
text-align: right;
}
.item {
border-bottom: 1px solid #e0e0e0;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.item:last-child {
border-bottom: none;
}
/* Estilos para o label */
.label {
font-weight: bold;
display: flex;
align-items: center;
}
.item .label i {
margin-right: 10px; /* Adiciona espaço depois dos ícones */
}
/* ==============================
= ESTILOS DE IMAGENS =
=============================== */
.imagem-responsiva {
max-width: 100%;
height: auto;
}
.custom-header-bg img {
width: 100%;
height: auto;
display: block;
}
/* ==============================
= ESTILOS DE VÍDEO =
=============================== */
#youtube-video-container iframe {
width: 100%;
height: auto;
display: block;
}
.video-container {
max-width: 800px;
margin: 0 auto;
}
.ytp-cued-thumbnail-overlay-image {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: absolute;
}
/* ==============================
= OUTROS ESTILOS PERSONALIZADOS =
=============================== */
.custom-content {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 0 10px;
max-width: 100%;
overflow: hidden;
}
.custom-heading {
font-size: 16px;
color: #42526e;
margin: 10px 0;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 5px;
font-weight: bold;
}
#indice {
border-radius: 5px;
padding: 20px;
max-width: 100%;
overflow: hidden;
}
#indice h2 {
text-align: center;
margin-bottom: 16px;
}
#indice ul {
list-style-type: none;
padding-left: 0;
}
#indice li {
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.1s ease;
}
#indice li:last-child {
border-bottom: none;
}
#indice li:hover {
background-color: #6B48FF;
color: white;
}
/* ==============================
= ESTILOS DE TABELAS =
============================== */
.custom-grey {
background-color: #ffffff;
}
.custom-grey th,
.custom-grey td {
border: 1px solid #362194;
padding: 10px;
color:#362194
}
.custom-grey tr:nth-child(even) td {
background-color: #e6e0f7;
}
.custom-grey tr:nth-child(odd) td {
background-color: #f4f5f7;
}
.custom-grey th {
color: #fff;
background-color: #443391;
}
.custom-grey td {
font-size: 13px;
}
.custom-grey tr:nth-child(odd) {
background-color: #e4e4e6;
}
.custom-grey tr:nth-child(even) {
background-color: #dfdfdf;
}
.custom-alert-warning {
background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
color: #5c4225; /* cor do texto */
border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.custom-alert-warning .fas {
color: #5c4225; /* cor do ícone no alerta de aviso */
margin-right: 10px; /* espaço extra entre o ícone e o texto */
}
.custom-alert-danger {
background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
color: #9e1d3b; /* cor do texto */
border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.custom-alert-danger .fas {
color: #f34b72; /* cor do ícone no alerta de perigo */
margin-right: 10px; /* espaço extra entre o ícone e o texto */
}
.alert-secondary-custom {
background-color: #F2EEFF; /* Cor de fundo do alerta */
color: #3217a7; /* Cor do texto */
border: 1px solid #9475f7; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.alert-secondary-custom .fas {
color: #6B48FF; /* Cor dos ícones FontAwesome */
margin-right: 10px; /* Espaço extra entre o ícone e o texto */
}
/* ========== FIM DO ESTILO ========= */
</style>
<!-- Tabs e conteúdo das guias -->
<div class="card">
<ul class="tabs">
<li class="tab col s4"><a href="#tab1">DETALHES>DETALLES FUNCIONAIS<FUNCIONALES</a></li>
<li class="tab col s4"><a href="#tab3">FAQ</a></li>
</ul>
<!-- Tab Content -->
<div id="tab1" class="col s12">
<div class="tab-content">
<div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
<section id="section1" style="margin-top: 40px;">
<!-- Tab 70 conteúdo -->
<!-- Segundo Card -->
<!-- Primeiro Card -->
<!-- Primeiro Card -->
<div class="card">
<div class="item">
<span class="label">
<table border="1">
<tr>
<td><i class="fas fa-tags"></i> <b>Produto<b>Producto:</b></td>
<td>Gestão<td>Gestión de Clientes<clientes</td>
</tr>
<tr>
<td><i class="fas fa-link"></i> <b>Linha<b>Línea de Produtoproducto:</b></td>
<td>TOTVS CRM</td>
</tr>
<tr>
<td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
<td>Cross Segmentos</td>
</tr>
<tr>
<td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
<td>Analytics Studio</td>
</tr>
<tr>
<td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td>
<td>Web</td>
</tr>
<tr>
<td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
<td>
NR070620231635</td>
</tr>
</table>
</span>
</div>
</div>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-eye"></i>    VISÃOVISIÓN GERALGENERAL
</h2>
<p class="justificado">
Se Introduzimosincluyó ala novanueva funcionalidadefuncionalidad de alternânciaalternancia entre múltiplosmúltiples workspaces no
en el GoodData, proporcionando umauna gestãogestión maismás fluida ey centralizada diretamente do
directamente del TOTVS CRM.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado">
Ofrecer Oferecera aoslos usuáriosusuarios ala capacidadecapacidad de alternar ey gerenciaradministrar informaçõesinformaciones entre
múltiplos múltiples workspaces en noel GoodData sin semsalir sairde dala interfaceinterfaz dodel TOTVS CRM,
simplificando ael análiseanálisis ey supervisãosupervisión de diferentes conjuntos de dadosdatos.
</p>
<br>
<!-- ... (seu conteúdo existente) ... -->
<h2 class="custom-heading">
<i class="fa-solid fa-book"></i>   ANTES DE COMEÇARCOMENZAR
</h2>
<h3>Requisitos</h3>
<p>Para utilizar este recurso, ées necessárionecesario que ala empresa possuatenga acessoacceso a outros
otros workspaces vinculados aoal domíniodominio dodel GoodData.</p>
</section>
<section id="section2" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2>
<h3>Funções<h3>Funciones </h3>
<ol>
<li>
<b>Visualização<b>Visualización Integradaintegrada de Workspaces</b>: AcessoAcceso facilitado a
múltiples workspaces directamente múltiplos workspaces diretamente naen la plataforma TOTVS CRM.
</li>
<li>
<b>Gestão<b>Gestión Centralizadacentralizada de Dados<datos</b>: AlternânciaAlternancia simplificada
entre diferentes workspaces para una gestión de datos más centralizada y eficaz.
entre diferentes workspaces para uma gestão de dados mais centralizada e
eficaz.
< </li>
<li>
<b>Identificação<b>Identificación de Workspace Padrão<estándar</b>: ALa identificaçãoidentificación clara do
workspace padrãodel workspace estándar facilita ala navegaçãonavegación ey ala gestãogestión eficiente de doslos dadosdatos.
</li>
</ol>
</section>
<section id="section3" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  COMO¿CÓMO USARUTILIZAR?</h2>
<h3> PassoPaso a Passo<paso</h3>
<ol>
<li>
<p>
<b>Acesso<b>Acceso aoal Analytics Studio</b>: En Noel menumenú principal, selecioneseleccione
<b>Analytics Studio</b> ey ema seguidacontinuación, cliquehaga clic emen
<b>Dashboards</b>.
</p>
</li>
<li>
<p>
<b>Seleção<b>Selección de Workspace</b>: En Nola cantoparte superior direito,derecha localizeubique umun campo
en la lista, haga clic em lista, clique noen el campo para visualizar ala lista de workspaces
disponíveis disponibles.
</p>
</li>
<li>
<p>
<b>Alternância<b>Alternancia entre Workspaces</b>: SelecioneSeleccione oel workspace desejadodeseado da
de la lista. El workspace estándar se destacará, facilitando la identificación. Al seleccionar un nuevo workspace, se mostrarán los dashboards listarelevantes.
O workspace padrão será destacado, facilitando a identificação. Ao
escolher um novo workspace, os dashboards relevantes serão apresentados.
</p>
</li>
</ol>
<br>
<p>
<video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
<source src="https://totvscrm.com/wp-content/uploads/2023/09/dash1.mp4" type="video/mp4">
</video>
</p><br>
</section>
<section id="section4" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EXEMPLOnbspEJEMPLO PRÁTICO<PRÁCTICO</h2>
<h3>Caso de uso<utilización</h3>
<p>
<b>Cenário<b>Escenario:</b>
<p>João,<p>Juan oes gerente, tinhatenía ala tarefatarea de monitorarmonitorear ey analisaranalizar diversosdiferentes indicadores para a
la empresa, provenientes de diversas fuentes de datos además del TOTVS CRM.
empresa, que eram provenientes de várias fontes de dados além do TOTVS CRM.
</p>
<br>
<b>Desafio<b>Desafío Antigoantiguo:</b>
<p>Antes, JoãoJuan se viaveía obrigadoobligado a alternar constantemente entre diferentes
espaços espacios de trabalhotrabajo dodel GoodData para acceder acessara oslos indicadores. EsseEste processoproceso era bastante fragmentado ey consumiaconsumía umauna parte
significativa dode seusu tempotiempo.
</p>
<br>
<b>Solução<b>Solución Atualizadaactualizada:</b>
<p>Agora<p>Ahora, tudotodo está maismás fluido. João podepuede, de maneiramanera rápida ey semsin complicações,
complicaciones, alternar entre diferentes workspaces diretamente de uma única interface. Isso
agilizou bastante o processo de análise, permitindo que João transite entre
directamente de una única interfaz. Esto agilizó bastante el proceso de análisis, permitiendo que João transite entre diferentes conjuntos de dadosdatos semsin perder oel focoenfoque ouo ala visãovisión global.
</p>
<br>
</p>
</section>
</div>
<!-- Tab 30 fim -->
<!-- Tab 30 fim -->
</div>
</div>
<div id="tab3" class="col s12">
<div class="tab-content">
<div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
<!-- Primeira coluna do conteúdo da guia 2 -->
<div class="container">
<h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTASPREGUNTAS FREQUENTES<FRECUENTES</h2>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">question_answer</i> O¿Qué quees é umun "workspace" dodel GoodData?
</div>
<div class="collapsible-body"><span>Um><span>Un "workspace" ées umun painelpanel ondedonde sãose reunidosreunnen diferentes indicadores que podempueden ser de diversas fontesfuentes alémademás dodel TOTVS CRM, organizados emen umun conjunto específico de dadosdatos.
</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">question_answer</i>Oi>¿El recurso de alternânciaalternancia entre workspaces está disponible disponívelen nola aplicativoaplicación MeuMi CRM?
</div>
<div class="collapsible-body"><span>Não><span>No, atualmente,actualmente oel recurso solamente está disponíveldisponible
apenasen noel ambienteentorno web dodel TOTVS CRM.
</span></div>
</li>
<!-- Adicione mais perguntas e respostas aqui conforme necessário -->
</ul>
</div>
<!-- Primeira coluna do conteúdo da guia 2 -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// Inicialização das tabs
document.addEventListener("DOMContentLoaded", function () {
var tabs = document.querySelectorAll(".tabs");
M.Tabs.init(tabs);
});
</script>
<script>
const items = document.querySelectorAll("#indice li");
items.forEach(item => {
item.addEventListener('click', (e) => {
const targetId = e.target.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
window.scrollTo({
top: targetElement.offsetTop - 10,
behavior: "smooth"
});
});
});
</script>
<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="scripts.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
<!-- ... (conteudo video) ... -->
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: 'FvsuBOvyyro',
playerVars: {
start: 1238, // 20:38 em segundos
end: 1356 // 22:36 em segundos
}
});
}
</script> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas