Diseño y Comunicación

Transcripción

1 Diseño y Comunicación MODULO DOS El blog una web gratuita 1

2 Un blog es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. (para saber más sobre qué es un blog: CLICK AQUI). En el Módulo Uno de estas HERRAMIENTAS DIGITALES vimos como se registra un dominio web en Argentina (.com.ar, por ejemplo), y también pudimos recorrer el camino necesario para registrar el dominio de un blog gratuito, tanto en Blogger, como en Wordpress, que son las dos plataformas más importantes para desarrollar blogs gratuitos. A continuación vamos a refrescar lo publicado en el Módulo Uno, sobre el registro en Blogger y en Wordpress para, a continuación, desarrollar nuestro blog en cada una de estas plataformas. Ambas versiones de este ejemplo están realmente en línea, para que puedan visitarlas, recorrerlas y probarlas, y así elegir cual de las dos plataformas es de su agrado, para desarrollar el blog propio. Creemos conveniente aclarar que existen muchas otras plataformas, pagas y gratuitas, para el desarrollo de blogs y páginas web, algunas gestionadas por empresas, otras por organizaciones sociales; la presente guía se publica a fin de que puedan entender los principios básicos para el desarrollo de un blog, ustedes serán quienes decidan libremente en dónde lo desean hacer. 2

3 El blog paso a paso En la actualidad existen diversas plataforma de blogs gratuitos, las más difundidas son Blogger ( y WordPress ( Vamos a registrar nuestro blog en Blogger para luego proceder a diseñarlo. Blogger Este sistema de blogs gratuitos es de Google, trabaja con la misma cuenta (usuario) que GMail (en donde registramos nuestro correo electrónico herram.digit@gmail.com). Para acceder a él nos dirigiremos a la web y como ya tenemos usuario y contraseña de GMail, los usaremos para ingresar: en correo electrónico ponemos el que abrimos en GMail y en contraseña la elegida en ese momento. 3

4 Una vez que ingresamos seleccionaremos la opción [CREAR UN PERFIL DE BLOGGER LIMITADO]. A continuación podemos definir el nombre que mostrará nuestro blog (puede ser el nombre completo de nuestro emprendimiento) en este caso herramientas digitales, luego click en [CONTINUAR EN BLOGGER]. 4

5 Llegamos al punto en donde crearemos nuestro blog, para lo cual elegimos la opción [NUEVO BLOG] En el recuadro Título aparece lo que definimos anteriormente en Nombre mostrado, en el de Dirección elegiremos el dominio propiamente dicho. Este dominio se compone por nombre.blogspot.com En este caso herram-digit.blogspot.com Esto quiere decir que cuando en un navegador web escribamos visitaremos nuestro blog. En Plantilla, por ahora, elegiremos Simple y click en [CREAR BLOG] 5

6 Nuestro blog está activo, así se ve (por ahora), el título del blog herramientas digitales, y la dirección web (dominio) Para elegir las configuraciones del blog y diseñarlo a nuestro gusto, haremos un CLICK en la palabra [DISEÑO] que se encuentra en el extremo superior derecho del navegador. 6

7 La pantalla que se despliega nos permite seleccionar varias posibilidades (margen izquierdo) y así ir eligiendo las opciones más adecuadas para nuestro blog. 7

8 La primer opción es [VISION GENERAL], aquí podemos ver las ACTUALIZACIONES, entre las cuales encontramos: 1. Los comentarios pendientes de moderación. Cuando un visitante nos quiere decir algo puede dejar un comentario, el cual puede ser moderado por nosotros (con esa opción decidimos cual de estos comentarios se hacen públicos y cuales no). 2. La cantidad de comentarios efectivamente publicados (los ya moderados por nosotros). 3. La cantidad de visitas que recibió nuestro blog (páginas vistas). En este caso nos muestra una, la actual, el día 07/06/ La cantidad de entradas del blog (cada nuevo artículo publicado por nosotros será una entrada). 5. Los seguidores del blog (las personas que deciden hacer CLICK sobre la opción [SEGUIR] el blog). Para comenzar a diseñar el blog a nuestro gusto iremos a la opción del margen izquierdo [PLANTILLA]. Las plantillas son modelos de blogs que el sistema nos habilita a elegir. Cuando se comienza con el diseño este es el primer paso, elegir una plantilla, y luego ir adaptándola a nuestro gusto y necesidades. 8

9 En esta pantalla encontramos dos opciones centrales. 1. [AHORA EN EL BLOG] nos muestra una previsualización de la plantilla seleccionada (en este caso es la que Blogger utiliza de forma automática al inicio de la configuración). Cuando cambiemos esta opción, aparecerá la opción elegida. Debajo de esta vista previa hay dos posibilidades, la primera es [PERSONALIZAR], para seleccionar las opciones de personalización, la otra [EDICION DE HTML]. Esta opción es para desarrolladores avanzados, nos permite realizar personalizaciones usando el código HTML, que es un lenguaje de programación web. Como nosotros no somos desarrolladores profesionales, no elegiremos esta posibilidad. 2. [MOVIL] nos permite elegir cómo se verá nuestro blog desde teléfonos celulares y dispositivos pequeños con acceso a internet. La opción de la derecha es la que permite una vista previa del blog en cualquier dispositivo (es la más utilizada), la de la izquierda mostrará un código QR. 9

10 En el margen superior derecho tenemos dos opciones para elegir. La primera [CREAR COPIA DE SEGURIDAD/RESTABLECER] esta opción también requiere de conocimientos avanzados. La segunda permite acceder a distintos servicios de Google. Debajo de [AHORA EN EL BLOG] nos encontraremos con las diferentes posibilidades de plantillas, en cada una de estas opciones podremos ver una vista previa de nuestro blog (antes de aplicarla definitivamente) y podremos acceder a los distintos niveles de personalización. Por ejemplo si en la opción [SENCILLO] hacemos CLICK sobre la tercer imagen, veremos la previsualización del blog de esta manera (tengan en cuenta que nuestro blog por ahora no tienen ninguna entrada, está vacío). Desde las flecha del margen inferior derecho podremos ver otras plantillas sin salir de esta ventana. 10

11 La primera opción para seleccionar nuestra plantilla es [VISTAS DINAMICAS]. Esta opción mostrará las entradas del blog dentro de recuadros en la página de inicio. Luego encontramos la vista llamada [SENCILLO] que, como su nombre lo dice, es la más limpia y básica. [PICTURE WINDOW] permite incluir una imagen de fondo del blog (una fotografía por ejemplo), si bien esto será muy atractivo, muchas veces el hecho de tener las entradas sobre una imagen nos da un resultado de lectura más compleja. Otros estilos que aparecen son [FANTASTICO], [FILIGRANA], [ETEREO] y [VIAJES]. Todos ellos son opciones para comenzar a jugar y elegir el que más nos guste. 11

12 En esta ocasión vamos a elegir la opción [SENCILLO] y, para modificarla, haremos CLICK en [PERSONALIZAR]. La pantalla que aparece nos permite seleccionar: Plantillas. Otra opción para elegir lo que vimos anteriormente. Fondo. Podremos incluir un fondo para nuestro blog (imágenes o colores). Ajustar ancho. Para definir el ancho del blog. Diseño. Aquí definiremos los distintos agregados que incluirá nuestro blog. Avanzado. Nos permitirá definir las tipografía y los colores de los elementos que lo componen. 12

13 Para comenzar con nuestro diseño iremos a la opción [AJUSTAR ANCHO]. La primera opción [BLOG COMPLETO] es el ancho total del blog. La medida que conviene elegir es 960 px (píxeles) ya que una gran cantidad de monitores están configurados a 1064px de ancho (así se verá el blog a todo el ancho del monitor de la PC). La segunda opción define el ancho de la barra lateral derecha. 13

14 En este caso elegimos 250px; esta medida define a su vez el tamaño del cuerpo central del blog (sobre el que aparecerán nuestras entradas). Si elegimos un ancho mayor para la columna derecha, la central (izquierda) sera más angosta, hasta completar los 960px de ancho. En la pantalla izquierda el ancho de la Barra lateral derecha es de 250px. En la pantalla derecha el ancho de la Barra lateral derecha es de 500px. 14

15 Vayamos a hora a la opción [DISEÑO], allí podremos seleccionar la distribución de los distintos elementos que componen el blog, donde, a modo de croquis, nos encontramos con dos grupos de opciones: 1. [DISEÑO DEL CUERPO DEL BLOG]. Desde aquí elegiremos la forma en que veremos el cuerpo del blog, tanto la columna principal como la lateral. Para este blog hemos elegido que la columna principal se ubique a la izquierda y la secundaria a la derecha, alineada en una sola columna. 2. [DISEÑO DE PIE DE PAGINA]. Se llama pié de página a la parte inferior, la que puede estar formada por una, dos o tres columnas de elementos. En este caso elegimos el esquema de una columna a todo el ancho del blog. 15

16 Pasamos ahora a la opción [FONDO]. Aquí podemos elegir, entre varios [TEMAS SUGERIDOS] la combinación de colores que mostrará el blog. Si hacemos CLICK sobre [IMAGEN DE FONDO] podremos determinar una imagen que reemplace al color que rodea al cuerpo central del blog. 16

17 Al hacer CLICK sobre [IMAGEN DE FONDO] aparecen diversas opciones, agrupadas por temáticas (arte, negocios, etc). Hemos elegido [ABSTRACTO] y la imagen [graphixel]. Podemos probar como quedan estas opciones y optar por la que más identifique a nuestro blog. 17

18 Pasemos a la opción [AVANZADO]. Aquí podremos jugar con los colores de los diferentes componentes del blog. Se puede modificar el color y la tipografía de los textos, los colores de los fondos y de los detalles (líneas divisorias, enlaces, etc). Un mundo de opciones para probar. Siempre tenemos la opción de borrar los cambios y volver atrás (1). 18

19 Vayamos ahora a [CONFIGURACION BASICO], en esta instancia definiremos: el título del blog (2) la descripción (3) que aparecerá debajo del título la dirección (4), que bien puede ser la propia de blogspot.com, o una personalizada (si nosotros ya tenemos nuestra propia URL, por ejemplo xxxx.com.ar, podemos usarla) los autores del blog (5), desde aquí podemos invitar a otros usuarios de Gmail a escribir en nuestro blog. y los lectores del blog (6), pueden ser: cualquiera (el blog estará disponible para todo el mundo), únicamente autores del blog (serán las personas autorizadas en el punto 5), o solo estos lectores (deberemos escribir aquí sus mails). IMPORTANTE: siempre que terminemos de configurar alguna nueva opción debemos hacer CLICK sobre la pestaña [GUARDAR CAMBIOS] para que efectivamente queden guardadas las opciones elegidas. 19

20 Los navegadores webs permiten incluir un ícono, a modo de logo, antes de la URL de la página que se visita, esta imagen se llama FAVICON. En Blogger podemos definirlo de manera muy sencilla, para tal fin necesitamos que tenga una proporción cuadrada y que su peso sea menor de 100 KB. Para ello iremos a la pestaña [DISEÑO], editaremos la opción [FAVICOM], y se desplegará una ventana que nos permitirá seleccionar el archivo con la imagen que deseamos aparezca en ese lugar, una vez que el sistema la subió al blog, haremos CLICK sobre el botón [GUARDAR]. Luego de un par de horas este ícono estará disponible en nuestro blog para todo el mundo. 20

21 Para la cabecera de nuestro blog podemos elegir que se muestre el título y la descripción (en nuestro caso Herramientas digitales / Recursos para el emprendedor (Programa MiPC) en modo tipográfico, o una imagen diseñada por nosotros. Para ello debemos dirigirnos a la opción [DISEÑO] y editar la cabecera, en la ventana que se despliega no aparecen una serie de opciones, entre la que se encuentra [IMAGEN / DESDE TU EQUIPO], esto nos permite subir al blog una imagen que puede reemplazar al texto de la cebecera. En la opción [UBICACION] podemos seleccionar si queremos que reemplace al texto, que aparezca detrás del título y la descripción o después de ellos. Por último se encuentra la opción [REDUCIR HASTA AJUSTAR], si esta posibilidad está seleccionada, la imagen elegida ocupará el ancho del blog (en este caso 940 píxeles, como indica la misma pantalla). 21

22 Este es nuestro blog con el cabezal aplicado. Pero claro, nos falta algo, cómo hacer una imagen con estas proporciones? Veamos una explicación paso a paso, realizada con Gimp, el programa libre para trabajar con imágenes. Si no tienen este programa, lo pueden descargar de manera libre y gratuita desde este link (tanto para Windows, como para OSX Macintosh) En sistemas operativos GNU/Linux se lo puede instalar desde el gestor de programas del sistema. 22

23 Una vez que corremos Gimp debemos CREAR UNA IMAGEN NUEVA, para ello iremos al menú [ARCHIVO / NUEVO], la ventana que se despliega nos permite definir el TAMAÑO DE LA IMAGEN, la RESOLUCION, el ESPACIO DE COLOR y el COLOR DE FONDO. Sabemos que, para el cabezal de nuestro blog, necesitamos una imagen de 940 píxeles de ancho, el alto de la misma puede ser el que nosotros decidamos, en este caso optamos por 150 píxeles, esto nos da una imagen de proporción apaisada. La resolución de la imagen será de 72 píxeles, que es la resolución habitual que se utiliza para web, el espacio de color será RGB (ver HERRAMIENTAS DIGITALES / MODULO CERO) y el color de fondo blanco. 23

24 38Cuando definimos cabezales para blogs, una posibilidad es que la misma imagen incluya el logo y el título del blog. El logo de HERRAMIENTAS DIGITALES ya lo hemos creado en el MODULO 1, nos queda ahora aplicarlo en esta nueva imagen. Para ello vamos al menú [ARCHIVO / ABRIR], buscamos el archivo del logo, lo seleccionamos y hacemos CLICK sobre el botón abrir. Ahora tenemos dos archivos de Gimp, uno en blanco (el que será nuestro cabezal para el blog y el archivo del logo). Lo que tenemos que hacer es copiar y pegar el logo en el futuro cabezal. 24

25 En el archivo del logo buscamos el menú [EDITAR / COPIAR], luego hacemos un CLICK sobre el archivo del fondo (o lo buscamos mediante el menú [VENTANAS], en el cual aparecerá una lista con los archivos abiertos) y elegimos el menú [EDITAR / PEGAR]. Una vez que copiamos y pegamos el archivo del logo en el cabezal, nos damos cuenta que el logo es más grande. Para reducirlo a la medida de nuestra imagen seleccionamos de la CAJA DE HERRAMIENTAS la que nos permite REDIMENSIONAR. En la ventana que se despliegan las opciones a definir elegimos la cadena entera que es la que define que la imagen será proporcional en ancho y alto. Con el puntero del mouse comenzamos a reducir la imagen hasta que ocupe el espacio que deseamos, también podríamos definir la medida en las opciones de ANCHURA y ALTURA (en este caso podría ser ALTURA 140 píxeles). 25

26 Cuando pegamos una imagen en Gimp, automáticamente se genera una nueva capa (las capas son como hojas de papel que vamos superponiendo), esta nueva capa queda flotando hasta que la definimos. Para ello abrimos el menú [VENTANAS / DIALOGOS EMPOTRABLES / CAPAS]. En la ventana que se despliega -con el botón derecho del mouse- hacemos CLICK sobre SELECCION FLOTANTE y definimos [CAPA NUEVA]. Cada elemento que agreguemos será una capa nueva, al finalizar las uniremos en una. 26

27 Ya tenemos el logo en nuestro cabezal, ahora le agregaremos el título del blog con tipografía. Para ello seleccionamos de la CAJA DE HERRAMIENTAS la que se identifica con una A y hacemos CLICK sobre nuestra imagen. Esto nos permitirá escribir un texto (vean en la paleta de capas que se autodefinió una NUEVA CAPA, cuyo nombre será el texto que escribamos, en este caso herramientas digitales). En la misma CAJA DE HERRAMIENTAS podremos elegir la tipografía (DEJA VU SERIF BOLD). A continuación le cambiaremos el color por un tono de gris neutro (R:80 / G:80 / B:80), esta opción la encontramos en la misma CAJA DE HERRAMIENTAS debajo de las opciones tipográficas; hacemos CLICK sobre el recuadro de color y se despliega la venta de COLOR DEL TEXTO. 27

28 Del mismo modo escribiremos la descripción del blog recursos para el emprendedor, elegiremos la tipografía y el color (DEJA VU SERIF BOLD, color NEGRO R:0 / G:0 / B:0). Para finalizar debemos unir todas las capas, para ellos iremos al menú [IMAGEN / APLANAR CAPAS]. Podríamos guardar el archivo con todas las capas -previo a esta acción- para tener disponible por si deseamos cambiar algo. 28

29 Nuestro cabezal está listo, ahora lo guardaremos con el formato necesario para poder insertarlo en nuestro blog. Vamos al menú [ARCHIVO / GUARDAR COMO], en la paleta que se despliega definiremos con qué extensión lo guardaremos. En este caso utilizaremos.png que es un tipo de archivo liviano con buena resolución visual para web. CLICK en el botón GUARDAR. Ya podemos incluir nuestro cabezal en el blog. 29

30 Escribiendo nuestro primer artículo Para escribir un artículo (post) debemos hacer CLICK sobre el área [NUEVA ENTRADA] que se encuentra en el extremo superior derecho de nuestro blog. Esta es la ventana que se abrirá, en el cuerpo central escribiremos el texto. 30

31 Descripción de la ventana de [NUEVA ENTRADA] Es en esta ventana en donde cargaremos el contenido de nuestro blog (textos e imágenes) y desde donde definiremos opciones importantes para la lectura y el orden del contenido. Las áreas principales son: 1) Título de la nota o post. Es con el que identificaremos al contenido. 2) Cuerpo del texto. Aquí es donde se escribe el texto y en donde se cargan las imágenes de cada uno de los artículos, notas o posts. 3) Etiquetas. Palabras clave que definen al contenido de la nota, se separan por comas (,). Una vez que creamos una etiqueta estará disponible para futuros artículos. 4) Zona de control y diseño. Desde este área podremos elegir el tamaño, forma y características de la tipografía, incluir links (vínculos a páginas webs o correos electrónicos), además de agregar imágenes y videos. En la parte superior derecha tenemos una serie de opciones: Publicar. Con este botón publicaremos nuestro artículos y lo haremos visible al mundo. / Guardar. Para guardar los cambios realizados sin hacerlos públicos, quedando en la instancia de borrador, a la espera de su publicación / Vista previa. Nos permite previsualizar nuestro artículo antes de publicarlo. / Cerrar. Cierra el artículo sin guardar los cambios hechos. Y por último aparecerá nuestro nombre de usuario (en este caso herramientasdigitales), esta opción nos habilitará la posibilidad de modificar nuestro perfil (como nos ven otros usuarios), configurar la cuenta y desconectarse [SALIR] de Blogger. 31

32 Para incluir una imagen en nuestro artículo, debemos hacer CLICK sobre el botón de imágenes esta acción desplegará la venta que ve a la izquierda, desde la que podremos elegir la imagen a incluir. La opción [SUBIR] es la que permite seleccionarladesde nuestra computadora. Una vez que subió debemos hacer CLCIK sobre el botón [AÑADIR LAS IMAGENES SELECCIONADAS]. Cuando la imagen se haya incluido en nuestro artículo (lo hará en el lugar en que hagamos CLICK con el cursor del mouse), podemos definir su tamaño y ubicación según las opciones de la barra inferior. También es posible agregar una leyenda a modo de epígrafe. En nuestro caso MEDIANO y ALINEADO A IZQUIERDA. 32

33 Tenemos la posibilidad de decidir ai queremos que en la página de inicio del blog se lea la nota completa, o solo una parte, y que esta continúe en otra página. Esta opción es muy recomendable para que en el Inicio del blog haya una variedad de artículos. Para ello haremos haremos CLICK con el mouse en donde queremos que termine el texto que aparecerá en el Inicio y haremos CLICK en el botón señalado, que se encuentra a la derecha de la zona de control y diseño. Por último haremos CLICK sobre el botón señalado, con el que comprobaremos la ortografía de nuestro artículo. Sobre este tema, el de las comprobaciones automáticas, creemos conveniente señalar que si bien son una herramienta útil, no son definitivas, ya que hacen la comprobación mediante rutinas programadas, y por lo tanto no pueden discernir cómo se escribe una palabra en determinados casos, por ejemplo papá o papa, dependiendo de que sea el padre o el tubérculo. Para esto no hay nada mejor que el ojo humano y un buen diccionario. 33

34 Una vez que definimos estas opciones podemos PUBLICAR la nota. Así es como se ve nuestra página de inicio, con nuestro primer artículo publicado. Lo que haremos a continuación será definir las opciones que aparecerán en la columna derecha y los últimos ajustes generales. 34

35 Para ello volveremos a la pestaña [DISEÑO], en donde nos encontramos con una serie de zonas, cada una de ellas editable.: 1) Favicon. CLICK AQUI 2) Barra de navegación. Permite cambiar el color de la barra superior de Blogger. 3) Cabecera. CLICK AQUI 4) Cuerpo del texto principal. Esta zona permite varias opciones, las veremos en la página siguiente. 5) Gadgets. En esta zona (puede ser a la derecha o a la izquierda) agregaremos opciones de navegación y datos. 6) Pie del blog. Aquí también podemos realizar agregados. 35

36 4) Cuerpo del texto principal. Entre las opciones están la cantidad de entradas (artículos) que mostrará la página principal del blog, y las propias de los artículos entre ellas si muestra o no la fecha, el creador, las etiquetas, los comentarios y las opciones para compartir (enlaces a Gmail, Blogger, Twiter, Facebook y Google+). Abajo vemos la opción de ordenar los elementos, este orden se realiza haciendo CLICK sobre lo que queremos mover, y -manteniendo apretado el botón del mousedesplazar el objeto hasta donde queremos que aparezca. Al finalizar, como siempre, CLICK en [GUARDAR]. 36

37 Cada vez que hacemos CLICK sobre la opción [AÑADIR UN GADGET] se abre la ventana de la derecha, en donde se despliegan una serie de opciones para nuestro blog, por ejemplo SEGUIR POR CORREO ELECTRONICO (para que los visitantes dejen su y así reciban una comunicación automática cada vez que publiquemos un nuevo artículo). Para este blog hemos elegido las siguientes opciones: Seguir por correo electrónico, Barra de video de Youtube (y allí pusimos el nombre de nuestro canal de video), Datos personales y Etiquetas en formato nube (donde la que cuente con más repeticiones se verá más grande). 37

38 Así se ve la página principal de nuestro blog. Por ahora con un solo artículo, a medida que vayamos escribiendo NUEVAS ENTRADAS, irán apareciendo una bajo la otra, siempre la más nueva aparecerá en primer lugar. Una vez que nuestro blog esté listo, solo nos queda invitar por correo electrónico a cuanta gente podamos ya que para que un blog viva debemos actualizarlo periódicamente. 38

39 Producido por Mario Spina para el ProgramaMiPC Ministerio de Industria, Presidencia de la Nación, República Argentina 2012 Se permite su reproducción sin fines comerciales, siempre y cuando se mencione la fuente: 39