Histórico da Página
HTML |
---|
<div id="main-content" class="wiki-content group">
<h2 id="CamadavisualTimeline-Índice">Índice</h2>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695816643 {
padding: 0px;
}
div.rbtoc1412695816643 ul {
list-style: disc;
margin-left: 0px;
}
div.rbtoc1412695816643 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695816643'>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Índice'>Índice</a></li>
<li><a href='#CamadavisualTimeline-ArquivosbásicosdaTimeline'>Archivos
de básicos de Timeline</a></li>
<li><a href='#CamadavisualTimeline-AçãodePublicação'>Acción
de Publicación</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-AçãodePublicaçãonaTimelinedeUsuário'>Acción
de Publicación en Timeline de Usuario</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Botãodeaçãodesabilitado'>Botón
de acción deshabilitado</a></li>
<li><a href='#CamadavisualTimeline-Botãodeaçãohabilitado'>Botón
de acción habilitado</a></li>
<li><a
href='#CamadavisualTimeline-ComentáriodeumaPublicação'>Comentario
de una Publicación</a></li>
</ul></li>
<li><a
href='#CamadavisualTimeline-AçãodePublicaçãonaTimelinedeComunidade'>Acción
de Publicación en Timeline de Comunidad</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Estadoinicial'>Estado
inicial</a></li>
<li><a href='#CamadavisualTimeline-Aguardandoconteúdo'>Aguardando
contenido</a></li>
</ul></li>
</ul></li>
<li><a href='#CamadavisualTimeline-Açãodevisualização'>Acción
de visualización</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-EstruturabásicadeumaPublicação'>Estructura
básica de una Publicación</a></li>
<li><a href='#CamadavisualTimeline-TiposdePublicação'>Tipos
de Publicación</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-NovoArtigocriado'>Nuevo
Artículo creado</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãonaComunidade'>Publicación
en la Comunidad</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãoCompartilhada'>Publicación
Compartida</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãocomImagem'>Publicación
con Imagen</a></li>
<li><a
href='#CamadavisualTimeline-PublicaçãocomMençãoeHashtag'>Publicación
con Mención y Hashtag</a></li>
<li><a
href='#CamadavisualTimeline-ModalparaCompartilhamentodaPublicação'>Modal
para Compartir la Publicación</a></li>
</ul></li>
<li><a
href='#CamadavisualTimeline-EstruturabásicadeumComentáriodeumaPublicação'>Estructura
básica de un Comentario de una Publicación</a></li>
<li><a href='#CamadavisualTimeline-Tiposdecomentários'>Tipos
de comentarios</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-ComentáriodeumaPublicação.1'>Comentario
de una Publicación</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</p>
<h2 id="CamadavisualTimeline-ArquivosbásicosdaTimeline">Archivos
básicos de Timeline</h2>
<p>
Como todos los componentes de Fluig, Timeline está desarrollado
basándose en el framework de templates <a
href="http://freemarker.org/" class="external-link" rel="nofollow">FreeMarker</a>
(. ftl). FreeMarker es responsable de la capa de visualización, sobre
el cual está escrito todo el HTML del componente. Así como el(los)
archivo(s) de <a href="http://freemarker.org/"
class="external-link" rel="nofollow">FreeMarker</a>, todos los
componentes tienen sus archivos de CSS (.css) y JavaScript (.js).
</p>
<h2 id="CamadavisualTimeline-AçãodePublicação">Acción de
Publicación</h2>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Para
generar contenido en Timeline, Fluig utiliza el componente
Publicación de contenido <strong>Poster</strong>. Poster es
responsable de absorber todo el contenido ingresado por el usuario en
el Campo de Publicación, y enviar para exhibir una nueva Publicación
en Timeline.
</span>
</p>
<h3 id="CamadavisualTimeline-AçãodePublicaçãonaTimelinedeUsuário">Acción
de Publicación en Timeline de Usuario</h3>
<p>Acción de Publicación en Timeline de Usuario es el campo de
texto donde el usuario introduce el contenido para su Publicación.
Este campo de texto está disponible en su página inicial y todo el
contenido se publica en su propia Timeline.</p>
<h4 id="CamadavisualTimeline-Botãodeaçãodesabilitado">Botón de
acción deshabilitado</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838374.png"
data-image-src="attachments/113804460/113838374.png">
</p>
<h4 id="CamadavisualTimeline-Botãodeaçãohabilitado">Botón de
acción habilitado</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838375.png"
data-image-src="attachments/113804460/113838375.png">
</p>
<h4 id="CamadavisualTimeline-ComentáriodeumaPublicação">Comentario
de una Publicación</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838494.png"
data-image-src="attachments/113804460/113838494.png">
</p>
<h3 id="CamadavisualTimeline-AçãodePublicaçãonaTimelinedeComunidade">Acción
de Publicación en Timeline de Comunidad</h3>
<p>Acción de Publicación en Timeline de Comunidad es el campo de
texto donde el usuario introduce el contenido para su Publicación.
Este campo de texto está disponible en cualquier página de Comunidad y
todo el contenido se publica en la página de la Comunidad en cuestión.</p>
<h4 id="CamadavisualTimeline-Estadoinicial">Estado inicial</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838376.png"
data-image-src="attachments/113804460/113838376.png">
</p>
<h4 id="CamadavisualTimeline-Aguardandoconteúdo">Aguardando
contenido</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838377.png"
data-image-src="attachments/113804460/113838377.png">
</p>
<h2 id="CamadavisualTimeline-Açãodevisualização">Acción de
visualización</h2>
<p>Después de generar una nueva Publicación, este contenido se
muestra en Timeline en diferentes tipos de visualización.</p>
<h3 id="CamadavisualTimeline-EstruturabásicadeumaPublicação">Estructura
básica de una Publicación</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>En el HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><div class="timeline-post-wrapper post post-parent" id="${post.postId}">
<div class="timeline-post clearfix">
<!-- Área de la foto del usuario -->
<div class="timeline-user-photo-container">
<div class="timeline-user-photo-container-hidden" data-user-popover="${post.user.alias}">
<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${post.user.alias}" data-timeline-link-user>
<img src="/social/api/rest/social/image/thumb/${post.user.alias}" class="timeline-user-photo">
</a>
</div>
</div>
<div class="post-content-container">
<!-- Área de la información de la Publicación. Ej.: Nombre de usuario, fecha de Publicación, etc.-->
<p class="timeline-post-header">
<a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}</a>
<span class="post-header-text"> - </span>
<a href="${tenantURL}/post/${post.user.alias}/${post.postId}" class="timeline-link-date totvs-link-gray"> ${post.data}</a>
</p>
<!-- Contenido del post -->
<p class="timeline-text-post">${post.text}</p>
</div>
<!--Lista de acciones disponibles en la Publicación-->
<ul class="sociable-action-bar list-inline">
<li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li>
<!-- More actions -->
</ul>
</div>
</div></pre>
</div>
</div>
<div>
<div>
<p> </p>
<p> </p> |
Índice
Índice |
---|
Arquivos básicos da Timeline
Como todos os componentes do Fluig, a Timeline é desenvolvida baseada no framework de templates FreeMarker (.ftl). O FreeMarker é responsável pela camada de visualização, onde sobre ele é escrito todo HTML do componente. Bem como o(s) arquivo(s) de FreeMarker, todos os componentes possuem seus arquivos de CSS (.css) e JavaScript (.js).
Ação de edição
No modo de edição da timeline você pode configurar as opções de visualização.
Ação de visualização
Após gerar uma nova Publicação, esse conteúdo é exibido na Timeline em diferentes tipos de visualização.
Estrutura básica de templates mustache na timeline
Bloco de código | ||||
---|---|---|---|---|
| ||||
<script type="text/template" class="social-timeline-post-template"> <li data-post-id="{{postId}}" class="timeline-list-posts-item"> <div class="panel panel-default fs-no-margin"> <div class="panel-body fs-sm-space media clearfix"> <div class="media-body"> {{#postHeader}} <h5 class="media-heading"> ... </h5> {{/postHeader}} {{#text}} <p>{{{text}}}</p> {{/text}} {{#variableContent}} {{>postContent}} {{/variableContent}} </div> </div> <div class="code panel-footer pdl" style="border-width: 1px;"> <ul<div class="list-inline timeline-list-actionscodeHeader panelHeader pdl" style="border-bottom-width: 1px;"> <b>En el CSS</b> </div> <div class="codeContent panelContent pdl"> <li<pre class="theme: Confluence; brush: css; gutter: false" style="font-size: 12px;">/* * * Multiple definitions * */ .wcm-widget-timeline .timeline-post, .wcm-widget-timeline-list-actions-item"> ... </li> </ul> .timeline-comments { padding: 8px 0 36px; position: relative; } ...</pre> </div> </div> <p> </p> </div> <div>Básicamente, el archivo CSS se divide en las siguientes categorías:</div> <div> <span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span> </div> </div> <div> <ul> <li><strong>Multiple definitions</strong>: Todos los formatos que se encuentran en común en el componente Timeline como espaciado, tamaño de fuente, color de fuente, etc.</li> <li><strong>Unic definitions</strong>: Todos los formatos que son únicos en el componente Timeline como título del componente, etc.</li> <li><strong>Sociable actions bar</strong>: Formato del área de acciones de una Publicación. Ej.: Botones Me Gusta, Comentar, Compartir, etc.</li> <li><strong>Container comments list</strong>: Formato de la lista de Comentarios de una Publicación.</li> <li><strong>Youtube video format</strong>: Formato de una Publicación o Comentario con un video de Youtube prestado.</li> <li><strong>Content shared types</strong>: Formato básico de una Publicación con contenido compartido. Ej.: Imagen, Documentos, Usuarios, etc.</li> </ul> </div> <div> </div> <p> </p> <div class="code panel pdl" style="border-width: 1px;"> <ul <div class="fs-md-space fs-no-padding-top fs-no-padding-bottom timeline-list-comments" data-timeline-list-comments> {{#comments}} {{>postComments}} {{/comments}} {{#existsMoreComments}} {{>postMoreComments}} {{/existsMoreComments}} </ul> </li> </script> |
Tipos de Publicação
Segue abaixo os tipos de Publicação disponíveis na Timeline.
Novo Artigo criado
Publicação na Comunidade
Publicação Compartilhada
Publicação com Imagem
Publicação com vídeo
Publicação com vídeo do youtube
Publicação com Menção e Hashtag
Modal para Compartilhamento da Publicação
Estrutura básica de template mustache de comentário em uma Publicação
Bloco de código | ||||
---|---|---|---|---|
| ||||
<script type="text/template" class="social-timeline-comment-template"> <li data-comment-id="{{id}}" class="panel panel-default fs-no-margin timeline-list-comments-item"> <div class="panel-body fs-sm-space media clearfix"> <a class="pull-left" href="{{tenantURI}}/{{user.page}}"> ... </a> <div class="media-body"> <h5 class="media-heading"> ... </h5> <p>{{{comment}}}</p> </div> </div> <div class="panel-footer fs-no-bg fs-no-border-top fs-no-padding-top"> <ul class="list-inline"> <li class="timeline-list-actions-item"> <span class="counter-group"> ... </span> </li> </ul>codeHeader panelHeader pdl hide-border-bottom" style="border-bottom-width: 1px;"> <b class=" code-title">Response List of JSON (example):</b> <span class="collapse-source expand-control"><span class="expand-control-icon icon"> </span><span class="expand-control-text">Expand source</span></span> </div> <div class="codeContent panelContent pdl hide-toolbar"> <pre class="theme: Confluence; brush: javascript; collapse: true; gutter: false" style="font-size: 12px;">[{ "postId" : "10", //post id "text" : "¡El Post!", //post text "link" : "http://www.youtube.com/watch?v=E2LM3ZlcDnk", //link attached to the post "formattedLink" : "www.youtube.com/v/10", //formatted youtube link "youtubeVideoId" : "10", //youtube video id "user" : { //User that has created the post "id" : "1", //User's id "name" : "User 01",//User's name "description" : "User 01 description", //User's description "alias" : "user01", //user's alias "type" : "USER", //fixed "tenantId" : "22", //tenant's id "lastUpdate" : "10008520", //date of last time the user has been modified (in miliseconds) "create" : "10008520", //date the user has been created (in miliseconds) "numberModerations" : "1", //number of the communities the user is moderator "state" : "ACTIVE" //Indicates the status of the user (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED") }, "social" : { //Where the post was created "id" : "1", //Community's id "name" : "Community 01",//community's name "description" : "Community 01 description", //community's description "alias" : "community01", //community's alias "type" : "COMMUNITY", //it can be "USER" or "COMMUNITY" "tenantId" : "22", //tenant's id "lastUpdate" : "10008520", //date of last time the community has been modified (in miliseconds) "create" : "10008520", //date the community has been created (in miliseconds) "numberParticipations" : "10", //number of users that participate of the community "numberModerations" : "1", //number of the community's moderators "hidden" : "false", //indicates if it is a hidden community "privateContent" : "false", //indicates if community's content is private "approvalRequired" : "true", //indicates if it is necessary approval to join the community "admin" : "true", //indicates if the current user is community's administrator "state" : "ACTIVE" //Indicates the status of the community (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED") }, "creationDate" : "10008520", //timestamp the post has been created (in miliseconds) "tenantId" : "22", //tenant's id "linkedObject" : "null", //the object attached to the post (image, document, video, etc) "type" : "DEFAULT", //post type. It can be "DEFAULT" or "RECOMMENDATION" "visibility" : "PUBLIC", //It can be PUBLIC, PRIVATE or CUSTOM "comments" : [{ "id" : "10", //comment's id "comment" : "Comment", //comment's text "user" : {}, //who commented (the same structure the "user" post's field) "creationDate" : "10008520" //timestamp the commented has been created }], "numberLikes" : "1", //number of post's like "numberShares" : "1", //number of times the post has been shared "numberComments" : "1", //number of post's comments "numberDenouncements" : "1", //number of times the post has been denounced "tags" : "tag tag02", //tags in the post "url" : "/post/user/10" //post's url }] </pre> </div> </div> <p> </p> </div> <h3 id="CamadavisualTimeline-TiposdePublicação">Tipos de Publicación</h3> <p> <span>A continuación se presentan los tipos de Publicación disponibles en Timeline.</span> </p> <h4 id="CamadavisualTimeline-NovoArtigocriado">Nuevo Artículo creado</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113838427.png" data-image-src="attachments/113804460/113838427.png"> </p> <h4 id="CamadavisualTimeline-PublicaçãonaComunidade">Publicación en la Comunidad</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113838428.png" data-image-src="attachments/113804460/113838428.png"> </p> <h4 id="CamadavisualTimeline-PublicaçãoCompartilhada">Publicación Compartida</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113838429.png" data-image-src="attachments/113804460/113838429.png"> </p> <h4 id="CamadavisualTimeline-PublicaçãocomImagem">Publicación con Imagen</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113838430.png" data-image-src="attachments/113804460/113838430.png"> </p> <h4 id="CamadavisualTimeline-PublicaçãocomMençãoeHashtag">Publicación con Mención y Hashtag</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113839106.png" data-image-src="attachments/113804460/113839106.png"> </p> <h4 id="CamadavisualTimeline-ModalparaCompartilhamentodaPublicação">Modal para Compartir la Publicación</h4> <p> <img class="confluence-embedded-image" src="attachments/113804460/113838431.png" data-image-src="attachments/113804460/113838431.png"> </p> <h3 id="CamadavisualTimeline-EstruturabásicadeumComentáriodeumaPublicação">Estructura básica de un Comentario de una Publicación</h3> <div class="code panel pdl" style="border-width: 1px;"> <div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"> <b>En el HTML</b> </div> <div class="codeContent panelContent pdl"> <pre class="theme: Confluence; brush: html/xml; gutter: false" style="font-size: 12px;"><div class="timeline-comments-container"> <div class="commentList"> <div class="timeline-comments clearfix postComment post-parent" id="${comment.id}"> <!-- Área de la foto del usuario --> <div class="timeline-user-photo-container"> <div class="timeline-user-photo-container-hidden" data-user-popover="${comment.user.alias}"> <a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="${comment.user.alias}"> <img src="/social/api/rest/social/image/thumb/${comment.user.alias}" class="timeline-user-photo"> </a> </div> </div> <div class="post-content-container"> <!-- Área de información del comentario. Ej.: Nombre de usuario, fecha de Publicación, etc.--> <p class="timeline-post-header"> <a href="#" class="timeline-link-user totvs-link-social" data-user-popover="${comment.user.alias}" data-timeline-link-user="" data-social-alias="${comment.user.alias}">Jerome McElroy</a> <span class="post-header-text"> - </span> <a href="#" class="timeline-link-date totvs-link-gray"> ${comment.data}</a> </p> <!-- Contenido del comentario --> <p class="timeline-text-post-comment">${comment.text}</p> </div> <!-- Lista de acciones disponibles en el comentario --> <ul class="sociable-action-bar list-inline clearfix"> <li><a href="#" class="sociable-link sociable-icon sociable-support linkLikePostComment support" data-linklikepostcomment="">Apoiar</a></li> <!-- More actions --> </ul> </div> </div> </div></pre> </div> </li>div> </script> |
Comentário
Segue abaixo o tipo de Comentário de Publicação disponível na Timeline.
Comentário de uma Publicação
...
<p> </p>
<h3 id="CamadavisualTimeline-Tiposdecomentários">Tipos de
comentarios</h3>
<p>A continuación se presentan los tipos de Comentarios disponibles
en Timeline.</p>
<h4 id="CamadavisualTimeline-ComentáriodeumaPublicação.1">Comentario
de una Publicación</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838470.png"
data-image-src="attachments/113804460/113838470.png">
</p>
</div>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas