PARA CREACIÓN DE BLOGS - Periódico Institucional...

20
INSTRUCTIVO PARA CREACIÓN DE BLOGS

Transcript of PARA CREACIÓN DE BLOGS - Periódico Institucional...

Page 1: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

INSTRUCTIVOPARA CREACIÓNDE BLOGS

Page 2: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Introducción

Los blogs son un recurso de comunicación para usarse en caso de que sea indispensable contar con un medio informativo autónomo y complementario a los establecidos como oficiales en el Servicio Nacional de Aprendizaje - SENA (portales, intranet, productos impresos y virtuales).

Si usted necesita crear un blog vinculado con algún centro, área, servicio o programa relacionado con el Servicio Nacional de Aprendizaje - SENA, póngase en contacto con la Oficina de Comunicaciones en la Dirección General o con el Lider de Comunicaciones de su regional, para solicitar el aval de creación correspondiente.

En el presente manual encontrará los pasos y recursos necesarios para que la creación de su blog sea acorde con los lineamientos establecidos en el Manual de Imagen Corporativa de la entidad.

1

Page 3: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Los blogs SENA están siendo manejados actualmente desde la plataforma Blogger (http://www.blogger.com). Para acceder a ésta, se debe tener una cuenta de correo electrónico creada en gmail o en http://correo.misena.edu.co.

Si ya tiene creado un blog desde una plataforma diferente a Blogger (como wordpress o tumblr), es necesario realizar la migración correspondiente. Se puede elegir entre las siguientes versiones de color para su creación:

Versiónnaranja

Versiónverde

2

Parámetros Generales

Page 4: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Parámetros Generales

Si el blog ya ha sido creado, puede acceder a las funciones para modificación de diseño y estructura haciendo clic en el título del blog, desde el administrador principal de Blogger.

Si va a crear un blog por primera vez, debe hacerlo desde el botón Nuevo blog, disponible en la plataforma para este fin.

3

Page 5: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

4

Parámetros Generales

Al dar clic en el botón Nuevo blog, aparecerá una ventana desde la cual podrá configurar el título y la dirección de dominio. La plantilla a escoger debe ser Travel. Realizados estos pasos, haga clic en el botón Crear blog para habilitar las funciones que le permitirán configurar los elementos adicionales.

Page 6: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Cada blog puede contener gadgets y elementos pertinentes a su fin informativo, siempre y cuando éstos no interfieran con los objetivos establecidos en el manual de imagen institucional del SENA.

Para facilitar el uso de éstos, así como de la herramienta Blogger, se sugiere no usar plantillas HTML o XML personalizadas.

De ser estrictamente necesario su uso, éstas deben ser concebidas bajo los parámetros de colores, diseño y estructura sugeridos en el presente instructivo.

Los ajustes básicos para crear un blog SENA se realizarán desde las opciones Diseño y Plantilla, disponibles en la página principal de administración de Blogger.

Ajustes de Diseño y Plantilla

5

Page 7: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Para colocar el logo SENA como identificador en las pestañas del blog (favicon), localice la casilla Favicon, disponible en la opción de Diseño, e ingrese a la opción “Editar” de la misma. Ésto nos mostrará la ventana que aparece en el siguiente ejemplo. Dentro de esta ventana haga clic en el botón “Examinar”, seleccione el archivo “Favicon.jpg” (disponible para descarga en el blog de la Oficina de Comunicaciones) y de clic en “Guardar”.

Identificador de Pestañas

6

Page 8: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

El cabezote debe elaborarse de acuerdo con los lineamientos establecidos para tal fin, acordes con los parámetros actuales de imagen institucional.

Ajuste los tamaños de las fuentes para el encabezado del blog buscando que éste no sobrepase el área demarcada en los ejemplos. Las fuentes a usar para el cabezote son las siguientes:

Encabezado: Swiss 721 Condensed - Normal y Negrita.Frase De clase mundial: Zurich BT

El tamaño del cabezote es de 1000 x 180 pixeles, debe guardarse en formato de color RGB y con una resolución recomendada de 96 dpi. Para la elaboración del cabezote debe seleccionarse

una fotografía acorde con el centro, área, programa, servicio o producto relacionado en el blog.

Los archivos y tipos de letra necesarios para crear el cabezote se encuentran disponibles para descarga en el blog de la Oficina de Comunicaciones de la Dirección General.

Cabezote

7

Page 9: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Para colocar el cabezote en el blog después de elaborado, ingrese a la opción Diseño, ubique la casilla Cabecera (ubicada bajo la casilla “Favicon”) y haga clic en “Editar”. Así aparecerá la ventana “Configurar Cabecera” que se visualiza en el siguiente ejemplo. En esta ventana escriba los siguientes datos:

- Título del blog: nombre del centro o programa - SENA regional o área correspondiente - Descripción del blog: es un dato opcional, puede ser una breve descripción del objetivo del blog.- Imagen: en este debe escogerse la opción “Elegir imagen” para cargar el cabezote creado. En las opciones de ubicación, debe estar señalada “En lugar del título y la descripción”.

Configurados estos datos, haga clic en “Guardar”.

Cabezote

8

Page 10: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Para configurar el menú de páginas, localice la opción Páginas en el listado principal del administrador. En la opción “Mostrar página como”, seleccione “Páginas principales”.

Para crear nuevas páginas, use la pestaña disponible para ello y siga las instrucciones indicadas.

Menú de Páginas

9

Page 11: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

Desde el botón Personalizar, disponible en la opción Plantilla, realice los siguientes pasos:

1. En la primera opción, Plantillas, seleccione el conjunto de plantillas llamado “Viajes”, de este paquete seleccione a su vez la plantilla numero 3. Estas aparecen demarcadas en la siguiente imagen de ejemplo:

2. En la opción Fondo, escoja como imagen de fondo “Ninguno”.

Configuración de plantilla

10

Page 12: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

3. En la opción Diseño, seleccione las estructuras demarcadas a continuación:

4. En la opción Ajustar ancho, esciba los tamaños 1060px para Blog Completo y 260px para barra lateral derecha.

Configuración de plantilla

11

Page 13: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

5. En la opción Avanzado:

- Para Texto de la página, seleccione la fuente Arial, tamaño 12px y escriba en el espacio disponible para color de texto el código #666666.

- Para Fondos, escriba en la casilla de fondo exterior el código #cccccc y seleccione en el espacio disponible para fondo principal la opción “transparent”.

Configuración de plantilla

12

Page 14: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Enlaces, si se va a usar la plantilla en la casilla “Color del enlace” el código #fc7323, en la casilla “Color del enlace visitado el código #cccccc

y en la casilla de “Color del enlace cuando se coloca el ratón sobre él” el código #238276.

coloque verde,

Si se va a usar la plantilla en la casilla “Color del enlace” el código #238276, en la casilla “Color del enlace visitado el código #cccccc

y en la casilla de “Color del enlace cuando se coloca el ratón sobre él” el código #fc7323.

naranja, coloque

Configuración de plantilla

13

Page 15: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Título del blog y Descripción del blog, los parámetros a usar son indiferentes, pues estos serán determinados por el cabezote que ya ha sido configurado.

Configuración de plantilla

14

Page 16: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Texto de la pestaña, en la opción “Fuente” escoja el tipo de letra Arial a tamaño11pxy marque la opción B para negrita.

Si se va a usar la plantilla en la casilla “Color del texto” el código #ffffff y en la casilla “Color seleccionado” el código #238276.

verde, coloque

Si se va a usar la plantilla en la casilla “Color del texto” #ffffff y en la casilla de “Color seleccionado” el código #fc7323.

coloque naranja,

11

Configuración de plantilla

15

Page 17: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Fondo de las pestañas, seleccione para “Color de fondo” y “Color seleccionado” la opción “Transparent”.

- Para Cabecera de Fecha, en la opción “Fuente” escoja el tipo de letra Arial a tamaño14px y marquela opción B para negrita. Si se va a usar la plantilla en la casilla “Color del texto” escribael código #fc7323. Si se va a usar la plantilla en la casilla “Color del texto” escriba el código #238276.

verde, naranja,

Configuración de plantilla

16

Page 18: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Título de Entrada, en la opción “Fuente” escoja el tipo de letra Arial a tamaño 20px y marque la opción B para negrita. Si se va a usar la plantilla en la casilla “Color del texto” escriba el código #238276. Si se va a

usar la plantilla en la casilla “Color del texto” escriba el código #fc7323.

verde,

naranja,

- Para Fondo de entrada, en la opción “Color de fondo” escriba el código #ffffff.

Configuración de plantilla

17

Page 19: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Color del título del gadget, en la opción “Fuente” seleccione el tipo de letra Arial a tamaño 14px y marque la opción B para negrita. En la casilla “Color del texto” escriba el código #ffffff.- Para Texto del gadget, en la opción “Fuente” seleccione el tipo de letra Arial a tamaño 12px. En la casilla “Color del texto” debe colocarse el código #ffffff.- Para Enlaces del gadget, en la opción “Color del enlace” escriba el código #fc7323. En la opcion “Color de enlace visitado” escriba el código #cccccc y en “Alternar color” escoja la opción “transparent”.

Configuración de plantilla

18

Page 20: PARA CREACIÓN DE BLOGS - Periódico Institucional …periodico.sena.edu.co/protocolo/1/descargas/instructivo_blogs.pdf · Si el blog ya ha sido creado, puede acceder a las funciones

- Para Fondo de columna lateral, en la opción “Color de fondo” escoja la opción “transparent”. Para “Color de biselado” escriba el código #ffffff.

- Para la opcion Mobile Button Color, escriba el código #ffffff. La opción “Añadir CSS” se deja en blanco.

Configuración de plantilla

19