Diferencia entre revisiones de «Manual de Publicación en la Web de la Escuela usando Gamma»

De Casiopea
Línea 161: Línea 161:
#Para finalizar el proceso hay que seleccionar '''Insertar el shortcode generado’’'
#Para finalizar el proceso hay que seleccionar '''Insertar el shortcode generado’’'


 
[[Archivo:EjemploTituloParallaxWp.png|500px|class=img-responsive]]


===Cita con Parallax===
===Cita con Parallax===

Revisión del 15:14 7 nov 2015










TítuloManual de Publicación en la Web de la Escuela usando Gamma
Año2015
AutorIdar González, Hugo Solar, Herbert Spencer
Tipo de PublicaciónManual

Manual de publicación sitio web e[ad]: Tema de Wordpress: Gamma

Bajo el contexto de reajuste gráfico y sus funcionalidades para publicar en el sitio, se aprovecha la instancia para generar una breve documentación/guía, enfocado a cómo publicar contenido de manera adecuada en el sitio Web e[ad]. Hay que considerar que esta guía se aplica sólo para los usuarios con el permiso necesario como para poder contribuir material al sitio.

Recursos:

  • Gamma 2: tema de Wordpress actual
  • Pyxis: framework gráfico sobre el cual se basa Gamma
  • Stampa: iconografúa utilizada por Pyxis

Consideraciones

Para publicar correctamente una noticia, un artículo de taller o una investigación, se deben tomar en cuenta los siguientes puntos:

  • Cuidar la ortografía y redacción, sintetizando lo más posible el contenido.
  • El texto debe diseñarse para la pantalla, lo cual supone un uso adecuado de los valores tipográficos que jerarquizan y de dan ritmo a la lectura. Para esto se suguiere el uso de títulos, negritas y listas. Estos elementos vuelven al texto más escaneable y de un vistazo permite acceder al contenido de manera progresiva: desde una lectura superficial hacia una lectura profunda.
  • La publicación en Internet somete el texto a lectores de diversa índole, por lo que es prudente elegir un tono y un lenguaje accesible para todos.

Entradas

Las entradas son el tipo de publicación más común en el sitio (y el por defecto), siendo el canal de mayor contribución de contenido. Éstas se ordenan según su fecha de publicación (quedando las más recientes primero) y además mediante categorías. Las categorías las delimita el autor de la entrada, por lo tanto es necesario un criterio preciso. Además, existen las etiquetas o tags, las cuales sirven para agrupar publicaciones de una manera adicional.

Transversalmente, bajo el panel de opciones para la entrada, se habilitan un par de nuevos elementos, como poder insertar íconos de Stampa (biblioteca iconográfica diseñada para la Escuela) y contenido Parallax (interacción entre contenido e imágenes de fondo, construyendo una profundidad).

¿Cómo crear una noticia?

Archivo:Nuevaentradawp.png

Al ingresar al panel de administrador (Luego de agregar la extensión wp-admin a la url e insertar los datos de usuario), existe una columna al lado izquierdo con diversas opciones. Es ahí donde encontramos el rótulo "Entradas". Desde ahí se despliega un submenu, dándonos 4 opciones pero nos enfocamos en "Añadir nueva". Luego nos encontramos con la pantalla que nos permite configurar la entrada:

Contenido de la entrada

Archivo:PanelEntradawp.png

La pantalla es bastante explícita: El contenido central apunta al contenido de la entrada. Y al costado la columna de datos como configuración de publicación, formato, categorías, etiquetas, etc. En primer lugar, está el espacio para indicar el título de la noticia. Abajo um horizonte con diversas opciones para ir añadiendo contenidos a la entrada. Existe un ícono que despliega la barra de manera extensa, donde nos permite agregar más variables en el contenido de la entrada.

Archivo:PanelContenidowp.png Archivo:ExtenderPanelwp.pngArchivo:PanelExtendidoWp.png

Es en este horizonte donde podemos incluir imágenes en el contenido, generar un contenido con mayor riqueza y dinámica. Para adjuntarlas, se apreta el botón con rótulo "Añadir objeto".

Columna lateral

En la columna lateral, nos encontramos con las categorías de la publicación y luego con las etiquetas. Cabe destacar los diversos usos de ambos componentes:

  1. Categorías: La categorización de la entrada nos permite darle un contexto a la entrada, que es dónde se ubicará la entrada una vez publicada. Por esta razón es necesario aplicar un criterio preciso y no sobre-categorizar la entrada.
  2. Etiquetas: Palabras clave o keywords, son de una naturaleza mucho más libre, que nos ayudarán a indexar, encontrar e identificar temas, entradas, publicaciones, por lo tanto acá se puede dar más etiquetas que señalen el contenido y contexto de la publicación. En síntesis las etiquetas sólo son formas de complementar el título de la entrada y dar un contexto de su contenido. Teniendo esto en mente se recomienda:
    1. No usar nombres propios
    2. No capitalizar (No usar mayúsculas innecesariamente)
    3. No utilizar conceptos rebuscados que difícilmente puedan repetirse, estas palabras deben tratar de ser lo más genéricas posibles.

Por defecto las entradas traen consigo la categoría de Noticia y quedará archivada en Noticias. Si se quiere, además publicar la entrada con una categoría adicional como por ejemplo Posgrado o Amereida, es necesario escoger esas categorías en el menú laterial.

Imagen destacada

Archivo:ImagenDestacadawp.pngArchivo:SubirBibliotecawp.png

La imagen destacada de la entrada, es independiente de las imágenes adjuntas en el contenido de la entrada. Por lo tanto, para mostrar una imagen de miniatura de la publicación y el horizonte principal de la noticia. Las opciones para adjuntar una imagen es subir un archivo existente en el computador del usuario o desde la biblioteca del sitio (imágenes previamiente cargadas).

Archivo:NoticiaImagenwp.png Archivo:Imagendestcadaentradawp.png

Importante: Siempre se recomienda utilizar una imagen destacada para las entradas para mantener un contenido de buen nivel en el sitio y así no estar mostrando imágenes por defecto o predeterminadas que no tienen relación con el contenido de la entrada.

¿Cómo crear Información de docencia?

Archivo:InformacionDocenciaWp.png

Para publicar una entrada con tipo Información de docencia, se debe seleccionar la categoría del mismo nombre. Esto hará que la entrada se categorice como información de docencia y no como noticia u otro tipo no adecuado. La información de docencia debe mantener siempre un carácter informativo puntual. Por eso se usa el ícono Altavoz, siendo una analogía de este instrumento.

¿Cómo utilizar Stampa en una entrada?

Archivo:Insertariconostampawp.png Archivo:Familiatipograficastampawp.png

Se pueden insertar íconos de Stampa (familia tipográfica diseñada para la e[ad]), en rótulos y contenido. Para acceder a ellos se debe apretar el ícono Stampa y escoger "insertar ícono" o "insertar título + ícono" dependiendo del caso y se abrirá una ventana emergente mostrando toda la familia de íconos. Basta con hacer click y se añadirá en forma de código.

Actividades

Las actividades (anteriormente Eventos), son las publicaciones que buscan dan a conocer acontecimientos futuros y a la vez quedan archivados acontencimientos en el contexto de la Escuela. En la portada del sitio o home, aparecerán las 4 actividades futuras. Una vez que caduque su fecha, serán quitadas del home pero seguirán estando agendadas en su portada de actividades.

¿Cómo configurar una actividad?

Archivo:NuevaActividadwp.png

Se selecciona el rótulo Agregar nueva actividad tras posicionar el cursor sobre Actividades. Una vez hecho click, accedemos a una pantalla muy similar a la Entrada, con algunos campos adicionales:

  • Información de la actividad
    • Fecha: Al seleccionar este campo se despliega un calendario para nuestra actividad. Importante: sólo los eventos con fecha futura se verán en el home bajo el espacio de actividades.
    • Hora: Dato opcional puesto que no queda visible a los usuarios.
    • Lugar: Hay que introducir dirección de la ubicación manualmente. No se desplegará un mapa como la versión anterior.
  • Extracto: Espacio donde podemos resumir brevemente el contenido de la actividad. En caso de no especificar, el extracto se tomará del contenido de la entrada.

El resto de los campos funcionan de la misma manera que las entradas: con la imagen destacada y título. a excepción que acá la imagen destacada sólo se verá dentro de la publicación y no en el home, pero esto es una regla de visualización, no se puede modificar.

Destacados (Carousel)

La franja inicial y principal del home, es un slide o carrusel, de publicaciones de mayor jerarquía. Los destacados son independientes de las entradas, por lo tanto existe la flexibilidad de poder enlazar a una entrada antigua, una actividad, un enlace a la Wiki e incluso una noticia a otro portal.

Configuración y visualización

Archivo:NuevoDestacadoMenuwp.png

La configuración de los destacados (anteriormente Carrusel) ha cambiado desde la última versión, donde se manejaban mediante categorías. Ahora, uno puede entrar a crear nuevos desde la columna lateral del panel de administrador, al igual que al crear entradas y eventos, seleccionando "Add new Destacado", ubicado en el menú que se despliega al posicionar el cursor sobre el rótulo Destacados. Al seleccionar la opción, accedemos a una pantalla de Nuevo destacado, como ya se mencionó, similar a la de Entradas y Actividades.

Archivo:NuevoDestacadowp.png

Una vez en esta pantalla nos encontramos con un par de opciones, la mayoría ya conocidas. La nueva es:

  • URL: Acá pegaremos una dirección web a nuestra noticia. Esto nos da la posibilidad de enlazar a noticias antiguas en el sitio, a una noticia recién publicada o una noticia de un portal externo. El procedimiento lógico para destacar una nueva Entrada (pudiendo ser una nueva Noticia, Actividad o Información de docencia), es primero generar la entrada. Una vez creada, se copia su URL y se crea un nuevo destacado. Una vez publicado, al pinchar sobre la imagen en el destacado, se dirigirán a esta URL.

Embeber contenido desde Wiki Casiopea

Se busca establecer un mayor diálogo entre el sitio y la Wiki, pudiendo tomar contenido ya existente en la Wiki y visualizarlo en el sitio sin necesidad de duplicar contenido (evitar problemas de mantención). Manteniendo este diálogo entre las plataformas, significa que el contenido en el sitio podrá estar alineado y actualizado con lo contingente de la Escuela, siendo la Wiki el espacio digital que alimente el contenido contingente.

Pasos y visualización de diverso contenido

Archivo:WikiEmbedIcono.png

Bajo la elaboración de contenido de una entrada o página, nos encontramos con el ícono de W, representa la inserción de contenido Wiki (MediaWiki), en este caso, de Wiki Casiopea. Al hacer click en él, una ventana emergente aparece y por ahora nos enfocaremos en el primer Tab, llamado Wiki Page. Allí, pegamos la url deseada desde la wiki y se nos presentan un par de cajas para flexibilizar nuestro contenido, sin embargo por ahora sólo una propiedad está afectando nuestra importación.

  1. Remove contents index: Por defecto, no se trae el índice de contenidos de la Wiki, sin embargo, al quitar el ticket, se insertará el índice de contenido en esta importación
  2. Remove edit links y Remove info box: Por ahora, esta caja no afecta la publicación por lo tanto esté con ticket o no, no afecta nuestra importación

Archivo:CajaWikiEmbed.png

Una vez listo apretamos Insert Post/Page y se verá un Shortcode con nuestra importación. La visualización de contenidos de la Wiki se verá levemente afectada por los estilos del sitio pero se busca manetener una continuidad gráfica entre ambas plataformas.

Uso de Shortcodes

Los Shortcodes son módulos complejos preparados de una manera simplificada en el editor. Esto permite una implementación mucho más sencilla consiguiendo un resultado modular potente. Para acceder a los Shortcodes es necesario cliquear en el ícono de Enchufe, ahí emerge una ventana y nos permite seleccionar entre (por ahora) 3 tipos de shortcodes.

Archivo:AdminShortcodeswp.png

A continuación se explican los módulos disponibles y cómo se usan adecuadamente:

  1. Mostrar entradas de una categoría: Permite insertar entradas en la página, donde uno configura qué categoría trae y la cantidad de entradas de esa categoría.
  2. Título con Parallax: Genera un horizonte con una imagen de fondo y un rótulo flotando encima de ella. Importante: Para utilizar este Shortcode de manera adecuada, es necesario seleccionar la Plantilla Ancha Parallax para no romper el diseño de la plantilla.
  3. Cita con Parallax: Genera un horizonte con una imagen de fondo y el contenido (cita) alineado a una parte de la pantalla y el auto de la cita. Importante: Para utilizar este Shortcode de manera adecuada, es necesario seleccionar la Plantilla Ancha Parallax para no romper el diseño de la plantilla.

Mostrar entradas de una categoría

Se pueden llamar una cantidad de entradas de determinada categoría e insertarlas en una página. Para lograr esto, debemos realizar los siguientes pasos y tener un par de consideraciones:

[Archivo:ShortcodeEntradasCatwp1.png|500px|class=img-responsive]]

  1. Seleccionar Shortcodes
  2. Seleccionar Mostrar entradas de una categoría
  3. Elegir una categoría deseada (coherente con la página actual)
  4. Escoger la cantidad de entradas. Importante: Es recomendado utilizar un número par en la cantidad de entradas para no romper el diseño de las plantillas. 2, 4, 6, etc.
  5. Para finalizar el proceso hay que seleccionar Insertar el shortcode generado’’'

Título con Parallax

Archivo:ShortCodeParallaxwp.png

Este shortcode nos permite insertar un bloque con imagen y título. La idea de usar este shortcode es poder generar contenido más llamativo y flexible, donde el lector pueda tener mayor contexto en la lectura e inmersión a lo que se está exponiendo. A continuación los pasos de uso:

  1. Seleccionar Shortcodes
  2. Seleccionar Título con Parallax
  3. Seleccionar la imagen deseada. Importante, asegurarse que la imagen tenga una buena resolución, sino habrá problemas de visualización (imágenes de menor resolución se verán muy pixeladas porque se extenderán automáticamente al ancho del sitio)
  4. Indicamos el título deseado
  5. Indicamos el subtítulo deseado
  6. Para finalizar el proceso hay que seleccionar Insertar el shortcode generado’’'

Archivo:EjemploTituloParallaxWp.png

Cita con Parallax

Archivo:ShortcodeCitaParallaxWp1.png

Este shortcode es similar al anteriormente descrito, sin embargo tiene otro enfoque, donde se nos permite insertar más contenido y demás indicar su autor. Además podemos seleccionar la ubicación de estos elementos. A continuación los pasos de uso:

  1. Seleccionar Shortcodes
  2. Seleccionar Cita con Parallax
  3. Seleccionar la imagen deseada. Importante, asegurarse que la imagen tenga una buena resolución, sino habrá problemas de visualización (imágenes de menor resolución se verán muy pixeladas porque se extenderán automáticamente al ancho del sitio)
  4. Indicamos la cita
  5. Indicamos su estilo:
    1. Cita alineada a la derecha y firma alineada a la izquierda.
    2. Cita alineada a la izquierda y firma alineada a la derecha.
    3. Cita y firma alineada a la derecha.
    4. Cita y firma alineada a la izquierda.

Archivo:CitaParallaxEjemploWp.png

¿Cómo crear una página con otra plantilla?

Buscando una mayor flexibilidad para diverso contenido, se habilita la opción de poder elegir diversas plantillas, adecuándose a diverso contenido. A continuación se detallan las variantes:

Plantilla Predeterminada

Archivo:CambiarPlantillaPaginawp.png

Por defecto las nuevas páginas vienen con la plantilla predeterminada seleccionada. Esta plantilla se caracteriza por tener una diagramación de caracter dinámino. Donde al costado izquierdo, existe una columna que enlista los rótulos que tengan jerarquía 4, es decir, h4. De esta manera, se puede crear un menú lateral de navegación en relación a los rótulos del contenido de la página.

Importante: Si bien se puede insertar contenido de otras plantillas como por ejemplo, contenido Parallax, con citas o insertar publicaciones de un cierto tipo, no es recomendable porque romperán el diseño de esta plantilla. Esta plantilla está orientada a una lectura con contenido simple y un menú lateral que de un contexto de su contenido y permita su navegación.

Archivo:MenulateralRotulosGammawp.png

Contenido + Wiki Embed

Se puede mezclar contenido creado en el editor y además importar contenido desde la Wiki, donde los rótulos de jerarquía H2 (en el Wiki embed) también se tornarán como rótulos de navegación lateral. Por lo tanto los rótulos h4 del editor y los h2 de Wiki embed construirán el menú lateral.

Se adjunta imagen de ejemplo:

Archivo:WikiEmbedEditorwp.png

Desde el rótulo Cuerpo docente es contenido desde la Wiki.

Plantilla Parallax

Lo primero es escoger la plantilla Plantilla Ancha Parallax, para que se visualice de forma correcta. De lo contrario, se verá el efecto pero en un espacio muy reducido No es recomendable.

Para utilizar un Parallax en una plantilla adecuada, nos dirigimos al botón "Administrador de shortcodes" con un ícono de enchufe. Se despliega un menú y podemos elegir entre "Título con Parallax" o "Cita con parallax". Funcionan de la misma manera pero se visualizan con pequeñas variantes.

Archivo:ShortCodeParallaxwp.png

Para el ejemplo utilizaremos "Título con Parallax". Se nos muestra un par de campos y opciones que configurarán el bloque. Primero seleccionamos la imagen deseada. Importante, asegurarse que la imagen tenga una buena resolución, sino habrá problemas de visualización (imágenes de menor resolución se verán muy pixeladas porque se extenderán automáticamente al ancho del sitio). Luego el título y subitítulo deseado. Una vez rellenados los campos y la imagen, apretamos el botón Insertar el shortcode generado.

Una vez seleccionado, escogemos la imagen y el contenido deseado. Una vez inserto en nuestro contenido podemos insertar "Contenido Parallax", con el botón al costado de Stampa, mencionado anteriormente. De esta forma, generamos contenido centrado en la página con un diseño más ad-hoc y flexible.

Archivo:ContenidoParallaxwp.png

Y para finalizar repetimos el proceso de shortcode y en este caso elegimos "Cita con parallax". Tiene algunas opciones adicionales, como una caja para insertar nuestra cita y al final un par de opciones para la ubicación de esta misma. Una vez realizado todo este proceso, veremos nuestro contenido con código de esta manera:

Archivo:ContenidoParallaxCodigowp.png

Si guardamos la página creada, veremos una página con estos resultados: Título con parallax, con los rótulos centrados y la gran imagen de fondo.

Archivo:TituloParallaxwp.png

Luego, nuestro Contenido se visualizará como un bloque con fondo estándar de la página. Manteniendo una pausa entre los Parallax y luego Cita, con la imagen de fondo seleccionada y encima nuestra cita visualizada con la configuración.

Archivo:ContenidoCitaParallaxwp.png

Portadilla Programa de estudio

Archivo:CambiarPlantillaWpPosgrado.png

La plantilla de Programa de estudio plantea una diagramación más pausada donde primero se exhibe un carrusel donde aparecerá una lista de publicaciones acorde a la página [indexar categorías], creando así una página con característica de portadilla, sirviendo como un punto de partida para el programa de estudio. Por lo tanto, luego del carrusel y sus noticias más recientes se despliega el contenido deseado y elaborado por el autor, con menú lateral, similar a la plantilla predeterminada.

Archivo:PlantillaPosgradoGammawp.png

Archivo:PlantillaPosgradoGammawp3.png

Categorías y Carrusel

Esta plantilla trae incorporado un carrusel para visualizar noticias destacadas de la categoría que se seleccione. Esto permite dar un sentido de Portadilla a la plantilla y dar una mayor jerarquía. Para ahora se aplica a las páginas de "Magíster Náutico y marítimo" y "Magíster Ciudad y territorio".

Archivo:CategoriaPortadillaPostgradoWp..png

Para configurarlo es necesario seguir los siguientes pasos:

  1. Seleccionar la categoría en la caja al final del editor (como se visualiza en la imagen de arriba).
  2. Seleccionar las entradas para el carrusel. Para hacer esto, es necesario que la entrada tenga:
    1. La misma categoría que se escoge para la plantilla (imagen de arriba)
    2. Que la entrada tenga la etiqueta/tag: destacado. (Puede tener más etiquetas, pero para aparecer en el carrusel es necesaria la etiqueta destacado).

Archivo:EtiquetasDestacadoCarruselWp.png

Entradas relacionadas

Archivo:Shortcodecat1wp.png

Mediante el shortcode de "Mostrar entradas de una categoría", se pueden insertar noticias relacionadas a esta portadilla, el método es el mismo mencionado anteriormente. Se recomienda que la cantidad de noticias sea un número par y así no romper el diseño dejando espacios blancos (al ser un número impar).

Notas