Archivos de la categoría Apariencia

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. http://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.]

La sobriedad y la eficacia de Twenty Twelve

Como ya sabéis, la plataforma Hypotheses ha cambiado las plantillas de vuestros blogs. Después de la de Twenty Fourteen y Twenty Eleven, aquí tenemos la presentación de la configuración de Twenty Twelve.
Algunos blogueros ya la han instalado, es el caso de los blogs Devenir Historien-ne o  Ce n’est pas une image juste. Como veis, Twenty Twelve es una plantilla sobria pero elegante, ideal para un blog con entradas bastante largas.

Una cabecera después del menú
Una de las originalidades de esta plantilla reside en incluir la cabecera entre el menú y las entradas (como se puede ver en la imagen). Para añadir una cabecera o cambiarla, hay que ir al menú Apariencia>Cabecera, en el escritorio.
Dentro del espacio de configuración de la cabecera, podéis buscar una imagen en vuestro ordenador pinchando en el botón “añadir nueva imagen”. Una vez seleccionada la imagen, hay que pinchar sobre el botón “enviar”. WordPress os permitirá encuadrar la imagen como más os guste, seleccionándola y recortándola. Para que la calidad de la imagen sea correcta, comprobad que el tamaño sea de 900 pixels de largo.

Configurar la visualización del título del blog
En el menú Apariencia>Cabecera podremos configurar el título de nuestro blog. Si queréis que el título no se muestre, no es necesario suprimirlo de la información general. Esto provocaría una pérdida importante de información para el programa que gestiona las estadísticas y que indexa los blogs en los motores de búsqueda. Para ello, la casilla “Mostrar texto de cabecera” permite elegir si queremos que el título aparezca o no en el blog, sin necesidad de eliminarlo de la información legible por las máquinas. Debajo de esta casilla podemos también elegir el color del título que nos parezca más adecuado con la cabecera.

Widgets siempre visibles
Contrariamente a la plantilla Twenty Eleven, Twenty Twelve permite que esté siempre presente una columna de widgets en el lateral del blog, incluso cuando estamos leyendo una entrada.
Una vez dentro del menú Apariencia>Widget es suficiente colocar los widgets que queramos en la barra lateral principal para que aparezcan cuando navegamos.

Llenar los espacios laterales
En el menú Apariencia>Fondo, podéis elegir un color o una imagen que se mostrará en los márgenes de la izquierda y de la derecha de vuestro blog.

La página de inicio un poco más original
Se puede obtener una página inicial un poco diferente con tres configuraciones.

Capture-d’écran5

 

Para ello, en primer lugar es necesario crear una página (en la imagen el título va a ser “Presentación”). En el espacio de edición de esta página hay una zona de configuración denominada “Atributos de página” (encuadrada en rojo en la imagen de abajo). Aquí hay que modificar el modelo de página, para lo que seleccionaremos “Plantilla de página de portada”.
También se puede añadir a esta página una imagen destacada pinchando sobre el vínculo “Imagen destacada” (encuadrado en azul en la imagen de abajo). Esta imagen será añadida al lado del texto de vuestra página (en el ejemplo que acompaña al texto, la imagen destacada es la foto de Nick Cave y su micro). Guardamos los cambios y vamos al menú “Ajustes>Lectura”.

pantallazo_twelve

Aquí, entre las opciones de lectura elegimos “Página frontal muestra-Una página estática” y seleccionamos la página deseada (en el ejemplo es “Presentación”) dentro de la “Página inicial”.
Finalmente, podemos añadir Widgets en las “Primeras y Segundas área de widgets de página principal”. Os aconsejamos introducir el widget “Entradas recientes” dentro de una de estas zonas para que vuestros lectores puedan acceder desde la página de inicio a vuestros últimos contenidos.
Twenty Twelve ya está correctamente configurada en vuestro blog. Si tenéis preguntas, no dudéis en plantearlas a través de la lista de discusión.