Archivo de la categoría: Temas

Twenty Sixteen para un blogging moderno

Hypothèses prioriza para sus usuario/as las plantillas desarrolladas por los equipos de WordPress para una mayor durabilidad, homogeneidad y flexibilidad a largo plazo de la plataforma. Encontraréis todas las plantillas disponibles en la categoría “Apariencia” de la Casa de los blogs.

Con Twenty Sixteen, los equipos de WordPress dieron a conocer un tema gráfico cuyo estilo moderno y características corresponden a las tendencias actuales de la web. Esta entrada recoge cuestiones básicas de carácter práctico que os permitirán dominar el tema gráfico Twenty Sixteen. Una vez activada la plantilla desde el menú Apariencia > Temas en el panel de control del blog, encontraréis la mayoría de las opciones de configuración en el menú Apariencia > Personalizar.

Basado sobre una columna de texto y una columna lateral opcional para los widgets, la plantilla Twenty Sixteen permite la personalización avanzada de los colores, con cuatro juegos de colores, o una libre elección de colores asociados con el fondo, fondo de página, enlaces, texto principal y texto secundario del blog.

Además de la columna opcional a la derecha, se pueden añadir dos zonas de widgets en el pie de página para personalizar la visualización del blog.

Imagen de cabecera y logo

Twenty Sixteen permite añadir una imagen de cabecera (tamaño recomendado: 1200 × 280 píxeles) y un logo (tamaño recomendado: 240 × 240 píxeles). Es preciso cuidar la optimización: optar por el formato .jpg y una resolución de 72DPI para una imagen más ligera. El logo se coloca encima del título y subtítulo (eslogan o descripción) del blog, mientras que la imagen de cabecera se coloca por debajo, antes de la columna de entradas y la columna opcional de widgets a la derecha. El título y el subtítulo del blog se pueden ocultar.

Ubicación del logo y de la imagen de cabecera del blog con Twenty Sixteen

El tema gráfico también ofrece varias características gráficas en el diseño de las entradas.

Una introducción para las entradas

El campo Extracto de la interfaz de edición de un blog se utiliza en este tema como introducción a una entrada. El texto de este campo aparece como epígrafe encima del texto principal.

Introducción de la entrada, insertada en la caja “Extracto” de la interfaz de edición de la solicitud

Citas resaltadas

A la vez que se mantiene una disposición sencilla y clara para el lector, el tema gráfico Twenty Sixteen propone resaltar los bloques de citas para que destaquen visualmente en el cuerpo del texto.

Para avanzar en la personalización de bloques de citas, el tema permite colocar estos bloques de citas a la derecha o a la izquierda del texto, desplazados del ancho de la columna principal. Será necesaria una pequeña manipulación del código html del texto. Para mostrar el código html de una entrada en su interfaz de edición, hay que hacer clic en la pestaña “HTML”, que se encuentra junto a “Visual” encima de la caja principal de redacción.

Diferentes formas de presentar las citas en un post con el tema gráfico Twenty Sixteen

Para desplazar una cita a la izquierda del texto, cambiar el elemento <blockquote> al principio de la cita en el código HTML por <blockquote class=”alignleft”>. Para desplazarla a la derecha del texto, cambiarlo por <blockquote class=”alignright”>.

Revalorización de las imágenes

También es posible romper la monotonía de la columna de texto insertando imágenes grandes: si el tamaño de la imagen original es superior o igual a 840 píxeles de ancho, y si la imagen se inserta seleccionando “Tamaño original”, entonces se visualizará más ancha que la columna de texto. Los tamaños “Grande”, “Mediano” y “Miniatura” obligan a que la imagen no supere el ancho de esta columna. Una vez más, pensad en la optimización: elegid el formato.jpg y una resolución de 72DPI para una imagen más ligera.

Diferentes visualizaciones de las imágenes insertadas en las entradas

Un menú para las redes sociales

 Twenty Sixteen ofrece dos ubicaciones de menú. Uno, el principal, se coloca horizontalmente a la derecha del título y subtítulo del blog (o un poco más arriba, al nivel del logo opcional), encima de la imagen de cabecera opcional. Se puede activar un segundo menú para colocar iconos de redes sociales: está situado en el pie de página, a la derecha, y sólo puede mostrar los iconos de las redes sociales.

El menú “Redes Sociales” en el pie de la página con el tema gráfico Twenty Sixteen

Para obtener esta visualización, se debe crear un menú compuesto únicamente por enlaces personalizados. Estos enlaces deben mandar a perfiles de redes sociales o a un correo electrónico (escribir “mailto: ” + la dirección de correo electrónico deseada). Este menú debe estar asociado a la ubicación “Social Network Links Menu”.

 

Para más información sobre este tema y sus características, véase la presentación de Twenty Sixteen sobre el Codex WordPress (en inglés).

Twenty Thirteen

Como ya sabéis, la plataforma Hypotheses cambió hace algunos meses las plantillas disponibles para instalar en los blogs. Actualmente hay seis plantillas disponibles que garantizan la seguridad, homogeneidad y adaptabilidad a largo plazo de la plataforma, además de ser todas responsive design, es decir, que se adaptan al tipo de pantalla del dispositivo desde el que se acceda, una gran ventaja especialmente para acceder desde el móvil o la tableta.

En su día explicamos las funcionalidades de Twenty Eleven, Twenty Twelve, Twenty Fourteen, Twenty Fifteen y Hueman, y solamente nos quedaba hablar de Twenty Thirteen.

t13_1

Como en las otras plantillas, se puede cambiar la cabecera desde el menú “Apariencia> Cabecera”.

twenty13-bandeau1

Desde aquí, es posible subir una imagen que tengamos guardada en el ordenador pinchando en “Añadir nueva imagen”. Una vez seleccionada, pinchamos en “Selecciona y recorta” para encuadrar la imagen de la manera deseada. Para que la imagen se visualice correctamente, es necesario que tenga 1600 pixels de largo.

Para cada entrada individual del blog es posible asignar una imagen específica que se muestre a modo de cabecera de la propia entrada cuando se pinche en ella. Para hacer esto, hay que acceder al espacio de edición de la entrada y dirigirse a “Imagen destacada”.

imagendestacada

Aquí pinchamos en “Asignar imagen destacada” y subimos la imagen que queremos que aparezca. El resultado sería como este:

twenty13-alaune2

Como veis, se trata de una plantilla sencilla y elegante, que exige muy poco esfuerzo de configuración y permite una lectura agradable sin distracciones. Por algo ha sido elegida como plantilla de La casa de los blogs.
Que la disfrutéis.

Cita esta entrada: Leire Frisuelos, "Twenty Thirteen," en La casa de los blogs, el 31/10/2015. https://casadelosblogs.hypotheses.org/658.

Twenty Fifteen: vertical y eficaz

Esta entrada ofrece la información básica necesaria para la configuración de la plantilla Twenty Fifteen (2015), disponible en Hypotheses desde hace unos meses. Tras activar la plantilla en el menú Apariencia>Temas, la mayoría de las opciones de configuración se encontrarán en Apariencia>Personalizar.

Una plantilla que se adapta a todas las pantallas

Twenty Fifteen se basa en las últimas tecnologías en materia de experiencia de usuario y de la metodología Mobile first: el diseñador web desarrolla la plantilla desde la versión móvil, considerándola la más utilizada. Es por lo tanto una plantilla responsive, ya que se adapta perfectamente a todos los tipos y tamaños de pantalla.

responsive_mockup_tam020615

 

 

 

 

 

 

 

 

Una cabecera vertical

Twenty Fifteen pone el énfasis en la legibilidad de los contenidos y se diferencia de otras plantillas en la ausencia de cabecera horizontal. Todo sucede en la columna lateral izquierda, que muestra los menús, los widgets pero también el título y subtítulo del blog, convirtiendo este espacio en la verdadera cabecera del blog, aunque no esté situada en la parte superior del mismo.

Dos menús personalizables
Os habréis dado cuenta de que cuando os desplazáis hacia la parte inferior del blog, la columna lateral izquierda se mueve a la par. En esta columna se puede colocar, una vez creado, el menú de navegación del blog, que también será vertical. Para hacerlo hay que dirigirse a Apariencia>Menús y después pinchar en la pestaña Opciones de pantalla situada en la esquina superior derecha del blog. Marcamos la casilla “Descripción”. A partir de este momento, al mostrar las opciones de cualquier elemento de un menú (haciendo clic en la flecha invertida de la caja del menú) aparecerá un nuevo campo denominado “Descripción”. Aquí podemos incluir unas palabras o una frase que aclaren el contenido que el lector podrá encontrar dentro de esa sección.

menus

También existe la opción de crear un segundo menú con los iconos de nuestras redes sociales debajo del primero. Para hacerlo pinchamos en “crea un nuevo menú” y elegimos la opción Customs Links. Aquí introducimos el enlace a la red social que queramos y “Añadimos al menú”. Importante: No debemos olvidar marcar en Ubicación del tema: “Menú de enlaces sociales”. Podemos añadir varios enlaces con este procedimiento. Los iconos de las redes (Facebook, twitter, google plus, etc.) aparecen por defecto al introducir el enlace, no siendo necesario que configuremos nada.

social

Este menú solo funciona con las siguientes redes:

• CodePen
• Digg
• Dribbble
• Dropbox
• Email (mailto: links)
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Path
• Pinterest
• Pocket
• Polldaddy
• Reddit
• RSS Feed (URLs + /feed/)
• Spotify
• Skype
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• WordPress
• YouTube

 

La vie en rose….o en amarillo
Twenty Fifteen ofrece seis juegos de colores que se pueden seleccionar en el menú “Apariencia>Personalizar>Colores”. A partir de estas combinaciones básicas, se pueden ajustar los colores según se desee. Se puede modificar el color de:
• La zona principal de publicación del blog
• El texto de la columna izquierda (incluido el título y el subtítulo del blog)
• El fondo de la cabecera y la barra lateral ( considerando cabecera el espacio situado en la parte superior de la columna izquierda que comprende el título y el subtítulo).
• También se puede poner una imagen de cabecera (que ocupará toda la columna de la izquierda) al igual que una imagen para la zona principal de publicación. Para hacer esto hay que dirigirse a “Apariencia>Personalizar>Imagen de cabecera/ Imagen de fondo”.

colores

 

Importante: si se opta por colocar imágenes, se debe tener en cuenta el espacio disponible y ajustar su tamaño al mismo, especialmente la imagen de la columna izquierda, que debe ser estrecha y alargada. Por lo tanto, para que las imágenes no se deformen y su visualización sea la adecuada, lo recomendable sería elegir imágenes del mismo tamaño o superior al hueco disponible. La columna izquierda tiene 248 pixels de ancho y la zona de publicación 660. Además, es conveniente que las imágenes sean sobrias y que no interfieran con los elementos textuales para no perturbar la lectura.

Por último, no olvidéis hacer constar los créditos de las imágenes que utilicéis. Aquí os contamos trucos interesantes sobre cómo hacer esto y más cosas interesantes acerca de dónde buscar imágenes libres de derechos, etc. de insertar imágenes

Sacar el máximo partido de las imágenes de cabecera
Como otras plantillas, Twenty Fifteen permite colocar una imagen destacada en la parte superior de cada entrada. Para hacer esto, hay que situarse en el espacio de edición de la entrada que queramos, desplazarnos a la parte derecha inferior y añadir una imagen en “Imagen destacada”. Para que las imágenes se visualicen de manera óptima, se recomienda que estas tengan las siguientes dimensiones: 825 pixeles de ancho por 510 de alto. Igualmente recomendamos hacer constarlos créditos de esta imagen.
Para saber un poco más
Para aquellos que queráis profundizar más en las opciones de Twenty Fifeteen, os dejamos algunos tutoriales (en inglés):

Tutorial oficial de WordPress.org
Top 8 Features Of WordPress 4.1 Twenty Fifteen Theme (Reviewed)
Twenty Fifteen WordPress Theme Review: When Less Is More
How to Customize Twenty Fifteen to Make it Your Own

Recordad que si tenéis alguna duda sobre la configuración de esta plantilla o de vuestro blog en general, podéis escribir a la lista de distribución blogueros@openedition.org . Suerte con vuestra configuración.
Hasta pronto.

[Esta entrada es una versión en español de la entrada publicad originalmente en francés por Michel Tamarin en La maison des carnets.]