Histórico da Página

<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&#160;<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;">&lt;div class="timeline-post-wrapper post post-parent" id="${post.postId}">
	&lt;div class="timeline-post clearfix">
		&lt;!-- Área de la foto del usuario -->
		&lt;div class="timeline-user-photo-container">
			&lt;div class="timeline-user-photo-container-hidden" data-user-popover="${post.user.alias}">
				&lt;a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${post.user.alias}" data-timeline-link-user>
					&lt;img src="/social/api/rest/social/image/thumb/${post.user.alias}" class="timeline-user-photo">
				&lt;/a>
			&lt;/div>
		&lt;/div>
		&lt;div class="post-content-container">
			&lt;!-- Área de la información de la Publicación. Ej.: Nombre de usuario, fecha de Publicación, etc.-->
			&lt;p class="timeline-post-header">
				&lt;a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}&lt;/a>
				&lt;span class="post-header-text"> - &lt;/span>
				&lt;a href="${tenantURL}/post/${post.user.alias}/${post.postId}" class="timeline-link-date totvs-link-gray"> ${post.data}&lt;/a>
			&lt;/p>
			&lt;!-- Contenido del post -->
			&lt;p class="timeline-text-post">${post.text}&lt;/p>
		&lt;/div>
		&lt;!--Lista de acciones disponibles en la Publicación-->
		&lt;ul class="sociable-action-bar list-inline">
			&lt;li>&lt;a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar&lt;/a>&lt;/li>
			&lt;!-- More actions -->
		&lt;/ul>
	&lt;/div>
&lt;/div></pre>
		</div>
	</div>
	<div>
		<div>
			<p>&#160;</p>
			<p>&#160;</p>
			<div class="code panel pdl" style="border-width: 1px;">
				<div class="codeHeader panelHeader pdl"
					style="border-bottom-width: 1px;">
					<b>En el CSS</b>
				</div>
				<div class="codeContent panelContent pdl">
					<pre class="theme: Confluence; brush: css; gutter: false"
						style="font-size: 12px;">/*
 *
 * Multiple definitions
 *
 */
.wcm-widget-timeline .timeline-post,
.wcm-widget-timeline .timeline-comments {
	padding: 8px 0 36px;
	position: relative;
}
...</pre>
				</div>
			</div>
			<p>&#160;</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>
		<p>&#160;</p>
		<div class="code panel pdl" style="border-width: 1px;">
			<div class="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">&#160;</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
}]&#160;</pre>
			</div>
		</div>
		<p>&#160;</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;">&lt;div class="timeline-comments-container">
	&lt;div class="commentList">
		&lt;div class="timeline-comments clearfix postComment post-parent" id="${comment.id}">
			&lt;!-- Área de la foto del usuario -->
			&lt;div class="timeline-user-photo-container">
				&lt;div class="timeline-user-photo-container-hidden" data-user-popover="${comment.user.alias}">
					&lt;a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="${comment.user.alias}">
						&lt;img src="/social/api/rest/social/image/thumb/${comment.user.alias}" class="timeline-user-photo">
					&lt;/a>
				&lt;/div>
			&lt;/div>
			&lt;div class="post-content-container">
				&lt;!-- Área de información del comentario. Ej.: Nombre de usuario, fecha de Publicación, etc.-->
				&lt;p class="timeline-post-header">
					&lt;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&lt;/a>
					&lt;span class="post-header-text"> - &lt;/span>
					&lt;a href="#" class="timeline-link-date totvs-link-gray"> ${comment.data}&lt;/a>
				&lt;/p>
				&lt;!-- Contenido del comentario -->
				&lt;p class="timeline-text-post-comment">${comment.text}&lt;/p>
			&lt;/div>
			&lt;!-- Lista de acciones disponibles en el comentario -->
			&lt;ul class="sociable-action-bar list-inline clearfix">
				&lt;li>&lt;a href="#" class="sociable-link sociable-icon sociable-support linkLikePostComment support" data-linklikepostcomment="">Apoiar&lt;/a>&lt;/li>
				&lt;!-- More actions -->
			&lt;/ul>
		&lt;/div>
	&lt;/div>
&lt;/div></pre>
		</div>
	</div>
	<p>&#160;</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>