1. CLASE 6
“Creación de sitios web en
Blogger”
Lics. en Periodismo y Comunicación Social
FCH-UNSL
(Año 2014)
CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL-
COMPARTIRIGUAL 3.0 UNPORTED LICENSE
2. Requiere tener en cuenta los siguientes
aspectos:
• Propósito y Diseño del sitio
• Construcción y Puesta en línea
CREACIÓN DE SITIOS WEB EN
BLOGGER
3. PROPÓSITO
¿Qué voy a comunicar? ¿A quién me voy a
dirigir? ¿Con qué periodicidad lo voy a
hacer?
DISEÑO
¿Qué elementos se colocarán en el sitio?
¿Cómo se organizarán? ¿Cuáles serán los
colores utilizados? ¿Cómo será la
tipografía y el tamaño de cada elemento?…
PROPÓSITO Y DISEÑO DEL
SITIO
4. CONSTRUCCIÓN
¿Con qué herramienta de creación de páginas web
implementaré mi sitio? ¿Será de fácil o complejo
manejo?
PUESTA EN LÍNEA
La herramienta seleccionada en la etapa anterior…
¿permite a las páginas su visualización en línea o
se deben subir los archivos mediante un servicio
externo?…
CONSTRUCCIÓN Y PUESTA EN
LÍNEA
Todas estas consideraciones se reducen en 4 etapas:
Diagramación, Redacción, Edición, Armada y Publicación.
5. Consiste en la aplicación sucesiva de las
siguientes etapas:
• Diagramación
• Redacción
• Edición
• Armada
• Publicación…
ELBORACIÓN DE UN SITIO
WEB
6. DIAGRAMACIÓN DE UN SITIO
WEB
Apariencia visual del sitio web y
disposición de los elementos que lo
componen de forma armónica y
organizada
Presenta algunas diferencias de
acuerdo al medio del que se trate…
13. Etapa en la que se redacta el texto de
acuerdo a:
• Patrón de lectura
• Estructura de la noticia en la Web…
El uso de los hipervínculos es primordial.
ETAPA DE REDACCIÓN
14. PATRÓN DE LECTURA EN LA
WEB
Según (Jakob Nielsen, 2006): “Los lectores de Internet siguen
mayormente un patrón de lectura en F, aunque también leen en forma
de E, e incluso de L invertida”…
15. REDACCIÓN DE LA NOTICIA EN
LA WEB
Se basa en la estructura de la pirámide invertida con las
consideraciones del formato digital y la nueva forma de organización
de la información que usa el enlace o hipervínculo…
16. REDACCIÓN DE LA INFORMACIÓN
NOTICIA EN LA WEB
Puede ser breve y/o extensa y su
carácter es permanente. Suele
utilizar enlaces relacionados para
ampliar la información…
17. REDACCIÓN DE LA
INFORMACIÓN
NOTICIA EN EL CELULAR
Generalmente es más corta y concisa y su carácter
es fugaz…
No debe confundirse la noticia para la Web que se
puede ver en un celular que la noticia que
exclusivamente se produce y visualiza en un celular.
18. EDICIÓN DE LA INFORMACIÓN
Etapa en la que se corrigen los textos de forma
sintáctica y semántica, se corroboran los datos y
se da uniformidad a la información…
21. Consiste en elaborar las páginas del sitio mediante
un programa de creación de sitios web (Web Page
Maker, Blogger, Wix, Dreamweaver, entre otros)…
ARMADA DE LA INFORMACIÓN
22. Etapa en donde se publica (de forma
gratuita o paga) el sitio web del
periódico y se comunica su dirección URL
para que sea posible su acceso.
El programa seleccionado para la
construcción del sitio puede o no
realizar su publicación de forma
automática…
PUBLICACIÓN DE LA
INFORMACIÓN
23. CONCEPTOS DE INTERÉS
BLOGGER: servicio o plataforma de Google que permite crear
blogs.
BLOG (O BITÁCORA): sitio web periódicamente actualizado que
recopila cronológicamente textos o artículos. Se compone de
entradas y páginas de contenido.
BLOGGERO: persona que escribe en un blog.
BLOGOSFERA: comunidades de blogs categorizados temáticamente
o por perfiles de interés.
POST: artículo o entrada que forma parte de las publicaciones
de un blog.
PLANTILLA (O TEMPLATE): diseño gráfico de dos o más atributos
que componen el blog.
CREACIÓN DE UN SITIO
EN BLOGGER
24. NOTICIAS DE
TAPA DE UN
PERIÓDICO
(SOLIDARIDAD)
Fuente:
http://periodico-solidaridad.blogspot.com.ar
páginas
entradas
EJEMPLOS DE SITIOS EN
BLOGGER
25. EJEMPLOS DE SITIOS EN
BLOGGER
NOTICIA COMPLETA DEL PERIÓDICO SOLIDARIDAD
26. entradas
EJEMPLOS DE SITIOS EN
BLOGGER
NOTICIAS DE
TAPA DE UN
PERIÓDICO
(VILLARINO)
Fuente:
http://diariovillarino.blogspot.com.ar
27. Entrada más reciente
Publicado por LA TRASTIENDA DE
BAHÍA en 14:13
EJEMPLOS DE SITIOS EN
BLOGGER
NOTICIA COMPLETA
DEL PERIÓDICO
VILLARINO
Las entradas o post más
nuevos aparecen en
primer lugar, mientras
que los post más viejos
aparecen lugares más
debajo…
28. Entrada menos reciente
Publicado por LA TRASTIENDA DE
BAHÍA en 13:07
EJEMPLOS DE SITIOS EN
BLOGGER
NOTICIA COMPLETA
DEL PERIÓDICO
VILLARINO
Las entrada publicada a
las 13:07 hs. aparece
debajo de la que se
publicó a las 14:13 hs…
31. ¿CÓMO CREAR UN BLOG?
PASO 1: CREAR UNA CUENTA EN GMAIL
Con los datos de Gmail se puede acceder a Blogger…
CREANDO UN SITIO EN
BLOGGER
32. ¿CÓMO CREAR UN
BLOG?
PASO 1: CREAR UNA
CUENTA EN GMAIL
Para disponer de una
cuenta en GMAIL es
necesario completar el
formulario de datos de
este servidor de correo
electrónico.
La dirección asignada
tendrá dominio
@gmail.com
CREANDO UN SITIO EN
BLOGGER
33. ¿CÓMO CREAR UN BLOG?
PASO 2: CREAR UNA CUENTA EN BLOGGER
Con los datos de Gmail se puede acceder a Blogger…
CREANDO UN SITIO EN
BLOGGER
34. ¿CÓMO CREAR UN BLOG?
PASO 2: CREAR UNA
CUENTA EN
BLOGGER
Colocamos Título y
Dirección al blog que
estamos por crear,
seleccionamos una
Plantilla de diseño y
cliqueamos en el
botón: “Crear blog”…
CREANDO UN SITIO EN
BLOGGER
35. ¿CÓMO CREAR UN BLOG?
PASO 2: CREAR UNA CUENTA EN BLOGGER
Luego de creado el blog podremos:
•Comenzar a publicar información (“Empezar a
publicar”) .
•Dirigirnos a su interfaz general (“Ignorar”).
•Visualizar el blog (“Ver blog”)…
CREANDO UN SITIO EN
BLOGGER
36. VISUALIZAR UN BLOG EN
BLOGGER
A partir del botón “Ver blog”, podremos ver la
dirección web y el aspecto que tendrá nuestro
sitio…
37. Acceso a la
interfaz
general del
blog
Creación de
una nueva
entrada
Acceso a la
lista de
entradas
del blog
Acceso a un
componente
particular del
blog
¿CÓMO CREAR UN BLOG?
PASO 3: TRABAJANDO EN BLOGGER
Desde la Interfaz general del blog podemos acceder a una gran cantidad
de operaciones relacionadas con su manejo…
CREANDO UN SITIO EN BLOGGER
38. PASO 3: TRABAJANDO EN BLOGGER
INTERFAZ GENERAL
Permite realizar todas las operaciones relacionadas con el trabajo
con un blog…
CREANDO UN SITIO EN BLOGGER
39. INTERFAZ GENERAL
VISIÓN GENERAL
Muestra estadísticas de acceso y actualizaciones del blog, junto
con noticias relacionadas a otros blogs de Blogger…
CREANDO UN SITIO EN BLOGGER
43. INTERFAZ GENERAL
GOOGLE +
Permite conectar Blogger con Google+ a través de las publicaciones
efectuadas en el blog con el objeto de llegar a más lectores…
CREANDO UN SITIO EN BLOGGER
45. INTERFAZ GENERAL
DISEÑO
Ofrece diferentes formas de organización de los componentes de un
blog y puede ser modificado desde el “Diseñador de Plantillas”…
CREANDO UN SITIO EN BLOGGER
49. DISEÑADOR DE PLANTILLAS
AJUSTAR ANCHO
Permite elegir el ancho del contenido de nuestro blog
(información principal) o su información relacionada (barra
lateral, información general, etc.)…
CREANDO UN SITIO EN BLOGGER
51. DISEÑADOR DE PLANTILLAS
AVANZADO
Permite personalizar el texto, fondo (de la página y entradas)
enlaces, fuentes (del título, descripción, pestañas), cabecera y
pie de página de las entradas y gadgets)…
CREANDO UN SITIO EN BLOGGER
54. INTERFAZ GENERAL
CONFIGURACIÓN-MÓVIL Y CORREO ELECTRÓNICO
Permite configurar el envío de la información publicada en el blog
a un celular o correo electrónico…
CREANDO UN SITIO EN BLOGGER
55. ¿CÓMO CREAR UN BLOG?
PASO 4: AGREGANDO CONTENIDO A UN BLOG
Consiste en agregar información a una o más páginas de un blog.
En el caso de la página principal se trata de agregar una o más
entradas las que pueden estar compuestas de título y contenido
(texto, imágenes, enlaces y elementos multimediales).
Cada entrada puede ser escrita en modo usuario (“Redactar”) o en
modo programación de páginas web (“HTML”)…
CREANDO UN SITIO EN BLOGGER
56. PASO 4: AGREGANDO CONTENIDO A UN BLOG
ENTRADAS- VISTA REDACTAR
Permite agregar texto, imágenes, videos pero no audios, por lo que
éste elemento multimedial debe ser agregado en la vista “HTML”…
Nota: El contenido de las entradas ha sido
tomado del Diario de la República
(http://www.eldiariodelarepublica.com) y
se utiliza solo con fines educativos
CREANDO UN SITIO EN BLOGGER
57. PASO 4: AGREGANDO CONTENIDO A UN BLOG
ENTRADAS- VISTA HTML
Permite agregar cualquier tipo de objeto y código de programación…
Si se agrega un elemento que el blog no puede almacenar (por
ej. un audio) éste debe ser subido a un sitio externo, como
por ej. Goear y desde allí debe ser referenciado a partir del
código html proporcionado mediante el enlace: Compartir.
CREANDO UN SITIO EN BLOGGER
58. PASO 4: AGREGANDO CONTENIDO A UN BLOG
ENTRADAS- PERSONALIZACIÓN
El trabajo con las entradas puede ser
personalizado desde el modo “Diseño”,
editando la caja de entradas del blog…
CREANDO UN SITIO EN BLOGGER
59. PASO 4: AGREGANDO CONTENIDO A UN BLOG
REDACTANDO NOTICIAS MEDIANTE EL ENLACE “MÁS
INFORMACIÓN”
Se coloca Título, Bajada o Copete, Imagen, Audio o Video que complemente la
noticia y por último la Nota completa con demás información adicional que desee
agregar.
Debajo del copete o su imagen relacionada (depende de cómo organice la
información) se presiona en el botón: “Salto de línea” para establecer una
división entre la información que se verá o no al cargar inicialmente el blog…
CREANDO UN SITIO EN BLOGGER
60. PASO 4: AGREGANDO CONTENIDO A UN BLOG
REDACTANDO ENTRADAS MEDIANTE EL ENLACE “MÁS
INFORMACIÓN”
Al visualizar el blog solo se verá la información anterior al Salto de línea
insertado. Para poder ver el resto de la misma se deberá hacer clic en el
enlace: “Más información”…
CREANDO UN SITIO EN BLOGGER
61. PASO 4: AGREGANDO CONTENIDO A UN BLOG
REDACTANDO ENTRADAS MEDIANTE EL ENLACE “MÁS
INFORMACIÓN”
La frase “Más información” puede ser personalizada desde el menú
DiseñoEntradas del BlogEditarTexto del enlace en la página de entrada…
CREANDO UN SITIO EN BLOGGER
62. Inserta
imagen
ENTRADAS Y ELEMENTOS MULTIMEDIALES
AGREGANDO UNA IMAGEN
El blog permite el trabajo con imágenes que pueden ser subidas desde
el disco rígido, el blog, un álbum de Picasa, el celular, la cámara o
una dirección web…
CREANDO UN SITIO EN BLOGGER
63. Insertar
un video
ENTRADAS Y ELEMENTOS MULTIMEDIALES
AGREGANDO UN VIDEO
El blog permite el trabajo con videos que pueden ser subidos desde el
disco rígido, Youtube, el celular o la cámara web…
CREANDO UN SITIO EN BLOGGER
64. ENTRADAS Y ELEMENTOS MULTIMEDIALES
AGREGANDO UN AUDIO
Blogger no permite agregar audios por lo que éstos deben ser alojados en
un sitio externo. El código html provisto por el sitio web externo permite
que el audio sea embebido y reproducido directamente desde el blog…
Con esta misma lógica puede ser insertado cualquier elemento multimedial, de animación, interactivo,
etc. siempre que exista un sitio web externo donde almacenar y obtener un código html.
CREANDO UN SITIO EN BLOGGER
65. PASO 4: AGREGANDO CONTENIDO A UN BLOG
PÁGINAS PARA LA CREACIÓN DE MENÚ CON OPCIONES
O SECCIONES
Constituyen otro de los elementos que conforman un blog. Pero a diferencia de
las entradas no organizan su información de forma cronológica ni permiten el
trabajo con el botón: “Salto de línea”, lo que significa que estas acciones
deben ser realizadas por otras vías…
CREANDO UN SITIO EN BLOGGER
El trabajo con las páginas
se realiza desde el menú
Páginas de la Interfaz
General de Blogger.
66. Ingreso y formato
de fecha
Ingreso y formato
de titular
Ingreso de fecha ,
formatos y enlace al
editor
PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
PÁGINAS-
EDICIÓN
El orden cronológico
de las entradas así
también como el
formato de los
títulos, ingreso de
fechas y enlaces, se
establece de forma
manual por el editor
del blog.
Si las notas aparecen
completas estas no
deberían ser muy
largas…
67. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
PÁGINAS-INSERCIÓN DE ENLACES
Los enlaces o hipervínculos deben ser insertados a través del botón
“Enlace”. Se pueden enlazar textos a una dirección web (interna o externa al
sitio) o bien, a una dirección de correo electrónica.
El contenido de los enlaces puede ser desplegado en la misma ventana o en
una ventana nueva.
68. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
PÁGINAS-OPCIONES DE VISUALIZACIÓN
Al crear las páginas, el usuario puede decidir opciones de visualización.
Las opciones básicas consisten en mostrar o no las páginas del blog.
Las opciones avanzadas consisten (en el caso de mostrarlas) en decidir si
estas se visualizarán en la parte Superior (seleccionando la opción:
“Pestañas principales”) o bien en el costado izquierdo o derecho
(seleccionando la opción: “Enlaces laterales”)…
69. PÁGINAS- OPCIONES DE VISUALIZACIÓN
CREANDO UN SITIO EN BLOGGER
PESTAÑAS PRINCIPALES
ENLACES LATERALES
70. REDACTANDO NOTICIAS MEDIANTE LA
COMBINACIÓN DE ENTRADAS Y PÁGINAS
PASO 1- CREAR Y EDITAR UNA NUEVA ENTRADA
En una nueva entrada, colocamos título, bajada o copete y elemento
multimedial que la complemente…
CREANDO UN SITIO EN BLOGGER
71. REDACTANDO NOTICIAS MEDIANTE LA
COMBINACIÓN DE ENTRADAS Y PÁGINAS
PASO 2- CREAR UNA NUEVA PÁGINA
En una nueva página colocamos la noticia completa. Posteriormente
agendamos su dirección web para poder enlazarla con la entrada que
creamos en el paso anterior…
CREANDO UN SITIO EN BLOGGER
http://el-informantee.blogspot.com.ar/p/luis-salinas_28.html
72. REDACTANDO NOTICIAS MEDIANTE LA
COMBINACIÓN DE ENTRADAS Y PÁGINAS
PASO 3- CONFIGURAR ENLACES A LOS TÍTULOS DE LAS
ENTRADAS
Configuramos las entradas para que al cliquear en sus títulos nos permita
enlazar a una página determinada. Esta acción se realiza desde el menú
ConfiguraciónOtrosActivar enlaces al título y enlaces a adjuntos…
CREANDO UN SITIO EN BLOGGER
73. REDACTANDO NOTICIAS MEDIANTE LA
COMBINACIÓN DE ENTRADAS Y PÁGINAS
PASO 4- ENLAZAR ENTRADA A LA PÁGINA
En el campo “Enlace al título” colocamos la dirección de la página
que agendamos en el Paso 2. Luego cliqueamos en la opción: “Listo”…
CREANDO UN SITIO EN BLOGGER
74. REDACTANDO NOTICIAS MEDIANTE LA
COMBINACIÓN DE ENTRADAS Y PÁGINAS
PASO 5- ENLAZAR ENTRADA A LA PÁGINA
Al visualizar el blog en la Web y al cliquear en el título de
entrada se abrirá una nueva página donde se despliega el contenido
de esta…
CREANDO UN SITIO EN BLOGGER
75. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
PÁGINAS-OPCIONES DE VISUALIZACIÓN
El problema nuevo que aparece es que algunas páginas no deben verse (como
la Página Principal y Luis Salinas) como parte de las secciones del
periódico…
Ocultar o mostrar una o más páginas de nuestro blog es posible desde el menú
DiseñoPáginasEditar…
Destildamos la
pestaña
76. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
GADGETS
Son pequeñas aplicaciones con distintas funcionalidades que se pueden
colocar en diversos apartados de un blog.
Se consideran elementos dinámicos puesto que cambian de valor en tiempo de
ejecución y se activan desde el menú ConfiguraciónDiseño…
77. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
GADGETS
En Blogger existe diversidad de gadgets que pueden ser agregados de forma
muy sencilla. Estos se encuentran clasificados en básicos, extras y
personalizados…
78. GADGETS
CREANDO UN SITIO EN BLOGGER
BOTÓN +1
Permite a las personas recomendar la marca y el contenido de tu
blog…
80. GADGETS
CREANDO UN SITIO EN BLOGGER
SEGUIR POR CORREO ELECTRÓNICO
Permite a las personas suscriptas a un blog recibir el contenido de
las entradas por email…
81. GADGETS
CREANDO UN SITIO EN BLOGGER
ENTRADAS POPULARES
Muestra una lista de las entradas más populares de un blog…
82. GADGETS
CREANDO UN SITIO EN BLOGGER
CUADRO DE BÚSQUEDA
Permite buscar información en los enlaces y contenido de un blog…
83. GADGETS
CREANDO UN SITIO EN BLOGGER
ENLACES DE SUSCRIPCIÓN
Permite a los lectores suscribirse al blog mediante los lectores de
feed conocidos…
84. GADGETS
CREANDO UN SITIO EN BLOGGER
ENCUESTA
Permite conocer la opinión de los lectores del blog en una o más
temas de interés…
85. PASO 4: AGREGANDO CONTENIDO A UN BLOG
CREANDO UN SITIO EN BLOGGER
GADGETS
Existen muchos más gadgets que pueden ser agregados. La elección
depende del tipo de información que se desee incluir en el blog…
86. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
CLIMA
Puede ser agregado desde el sitio Meteored.com
(http://www.meteored.com) que nos brinda códigos html gratuitos
para embeber en un blog. Para ello se debe configurar previamente
los parámetros de Localidad, Formato, Contenido y Estilo…
87. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
CLIMA
El código html puede ser colocado en el blog a través del gadget
“HTML/Java Script” …
88. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
CHAT
Puede ser agregado desde el sitio Chatango.com
(http://chatango.com) que nos brinda códigos html gratuitos para
embeber en un blog. Para ello se debe realizar un registro y
configuración de la Sala de Chat …
89. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
CHAT
El código HTML puede ser colocado en el blog mediante el Gadget
HTML/Java Script …
90. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
FECHA
Puede ser obtenido su código en formato html desde la diversidad de
sitios existentes en la WWW, como por ejemplo:
http://www.javascriptkit.com/script/cutindex1.shtml …
91. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
FECHA
El código html también puede ser modificado en función de los
conocimientos en lenguajes de programación de páginas web de los
que se disponga…
93. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
JUEGOS
Pueden agregarse desde distintas páginas, entre ellas
http://es.games68.com/games-for-website-list.php
El código html provisto por el juego puede ser colocado en el blog
dentro de una entrada.
El modo a trabajar debe ser HTML…
Nota: El ancho y alto del juego a embeber puede ser modificado a través de los parámetros Widht &
Height.
94. MÁS ELEMENTOS DINÁMICOS
CREANDO UN SITIO EN BLOGGER
JUEGOS
Modificación del ancho y alto del juego y vista final…
<table style="margin:0 0 10px 0; width:244px;
background:#fff; border:1px solid #F3F3F3;"
cellspacing="0" cellpadding="0"><tr><td style="font-
family:verdana; font-size:11px; color:#000;
padding:5px 5px;"><object classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="640" height="480"><param name="movie"
value="http://www.games68.com/games/bubble_sho
oter.swf"><param name="quality"
value="high"></param><param name="menu"
value="false"></param><embed
src="http://www.games68.com/games/bubble_shoot
er.swf" width="640" height="480" quality="high"
pluginspage="http://www.macromedia.com/go/getfl
ashplayer" type="application/x-shockwave-flash"
menu="false"
wmode="direct"></embed></object></td></tr><tr><t
d style="font-family:verdana; font-size:11px;
padding:5px 10px; border-top:1px solid #F3F3F3;"
align="center"><strong><a
href="http://www.games68.com/games.php?id=414"
target="_blank">Bubble Shooter</a></strong> | <a
href="http://www.games68.com">juegos gratis</a>
con <a
href="http://www.games68.com">Games68.com</a>
</td></tr></table>
95. FIN DE PRESENTACIÓN…
Elaborado por Prof. Viviana M. Ponce
vmponce@unsl.edu.ar
CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL-
COMPARTIRIGUAL 3.0 UNPORTED LICENSE