Clase 6 construccion blogger

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

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

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

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.

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

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…

Presenta la información en dos o más columnas de
acuerdo al patrón de lectura que sigue el usuario…
ETAPA DE DIAGRAMACIÓN

Ejemplo particular de la diagramación de un diario…
ENCABEZADO
PARTE
CENTRAL

Ejemplo particular de la diagramación de un diario…
PARTE
CENTRAL
PIE DE
PAGINA

ENCABEZADO
PARTE
CENTRAL
PIE DE
PÁGINA
Ejemplo
particular
de la
diagramación
de una
revista…

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

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”…

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…

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…

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.

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…

REDACCIÓN/EDICIÓN DE
LA INFORMACIÓN
ESTILOS DIVERSOS

REDACCIÓN/EDICIÓN
DE LA INFORMACIÓN
ESTILOS DIVERSOS

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

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

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

NOTICIAS DE
TAPA DE UN
PERIÓDICO
(SOLIDARIDAD)
Fuente:
http://periodico-solidaridad.blogspot.com.ar
páginas
entradas
EJEMPLOS DE SITIOS EN
BLOGGER

BLOGGER
NOTICIA COMPLETA DEL PERIÓDICO SOLIDARIDAD

entradas
BLOGGER
NOTICIAS DE
TAPA DE UN
PERIÓDICO
(VILLARINO)
Fuente:
http://diariovillarino.blogspot.com.ar

Entrada más reciente
Publicado por LA TRASTIENDA DE
BAHÍA en 14:13
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…

Entrada menos reciente
Publicado por LA TRASTIENDA DE
BAHÍA en 13:07
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…

entradas
Fuente:
http://revista-utopia.blogspot.com.ar
NOTAS DE
TAPA DE UNA
REVISTA
(UTOPÍA)
BLOGGER

entradas
Fuente:
http://revista-gatos.blogspot.com.ar/
BLOGGER
NOTAS DE
TAPA DE UNA
REVISTA
(GATOS)

¿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

¿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

PASO 2: CREAR UNA CUENTA EN BLOGGER
Con los datos de Gmail se puede acceder a Blogger…
CREANDO UN SITIO EN
BLOGGER

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

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

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…

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
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

PASO 3: TRABAJANDO EN BLOGGER
INTERFAZ GENERAL
Permite realizar todas las operaciones relacionadas con el trabajo
con un blog…

INTERFAZ GENERAL
VISIÓN GENERAL
Muestra estadísticas de acceso y actualizaciones del blog, junto
con noticias relacionadas a otros blogs de Blogger…

INTERFAZ GENERAL
ENTRADAS
Permite agregar información (artículos o post) a la página
principal de nuestro blog…

INTERFAZ GENERAL
PÁGINAS
Permite organizar el contenido de nuestro blog en dos o más
secciones que agrupan o categorizan la información…

INTERFAZ GENERAL
COMENTARIOS
Permite efectuar la lectura y moderación de los comentarios
emitidos por los lectores del blog…

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…

INTERFAZ GENERAL
INGRESOS
Muestra alternativas de ingresos económicos que podemos obtener a
través de nuestro blog…

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”…

INTERFAZ GENERAL
PLANTILLAS
Ofrece distintas formas de organización del contenido de un blog.
Trabaja en conjunto con el “Diseñador de Plantillas”…

DISEÑADOR DE PLANTILLAS
PLANTILLAS
Permite personalizar cada uno de los elementos del blog (fondo,
fuentes, entradas, etc.)…

FONDO
Permite elegir un color o imagen de fondo para el blog…

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.)…

DISEÑO
Permite modificar la organización de elementos de una plantilla
predeterminada…

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)…

INTERFAZ GENERAL
CONFIGURACIÓN-LO BÁSICO
Permite configurar título, descripción, dirección URL, autores y
lectores del blog…

INTERFAZ GENERAL
CONFIGURACIÓN-ENTRADAS Y COMENTARIOS
Permite configurar las entradas y comentarios de un blog…

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…

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”)…

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

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.

ENTRADAS- PERSONALIZACIÓN
El trabajo con las entradas puede ser
personalizado desde el modo “Diseño”,
editando la caja de entradas del 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…

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”…

REDACTANDO ENTRADAS MEDIANTE EL ENLACE “MÁS
INFORMACIÓN”
La frase “Más información” puede ser personalizada desde el menú
DiseñoEntradas del BlogEditarTexto del enlace en la página de entrada…

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…

Insertar
un video
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…

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.

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…
El trabajo con las páginas
se realiza desde el menú
Páginas de la Interfaz
General de Blogger.

Ingreso y formato
de fecha
Ingreso y formato
de titular
Ingreso de fecha ,
formatos y enlace al
editor
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…

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.

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”)…

PÁGINAS- OPCIONES DE VISUALIZACIÓN
PESTAÑAS PRINCIPALES
ENLACES LATERALES

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…

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…
http://el-informantee.blogspot.com.ar/p/luis-salinas_28.html

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ónOtrosActivar enlaces al título y enlaces a adjuntos…

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”…

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…

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ñoPáginasEditar…
Destildamos la
pestaña

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ónDiseño…

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…

GADGETS
BOTÓN +1
Permite a las personas recomendar la marca y el contenido de tu
blog…

GADGETS
TRADUCTOR
Permite traducir al blog en diversos idiomas…

GADGETS
SEGUIR POR CORREO ELECTRÓNICO
Permite a las personas suscriptas a un blog recibir el contenido de
las entradas por email…

GADGETS
ENTRADAS POPULARES
Muestra una lista de las entradas más populares de un blog…

GADGETS
CUADRO DE BÚSQUEDA
Permite buscar información en los enlaces y contenido de un blog…

GADGETS
ENLACES DE SUSCRIPCIÓN
Permite a los lectores suscribirse al blog mediante los lectores de
feed conocidos…

GADGETS
ENCUESTA
Permite conocer la opinión de los lectores del blog en una o más
temas de interés…

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…

MÁS ELEMENTOS DINÁMICOS
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…

CLIMA
El código html puede ser colocado en el blog a través del gadget
“HTML/Java Script” …

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 …

CHAT
El código HTML puede ser colocado en el blog mediante el Gadget
HTML/Java Script …

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 …

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…

FECHA
El efecto final es el siguiente…

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.

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>

FIN DE PRESENTACIÓN…
Elaborado por Prof. Viviana M. Ponce
vmponce@unsl.edu.ar
CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL-
COMPARTIRIGUAL 3.0 UNPORTED LICENSE

Clase 6 construccion blogger

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (17)

Similar to Clase 6 construccion blogger

Similar to Clase 6 construccion blogger (20)

More from Viviana Mercedes Ponce

More from Viviana Mercedes Ponce (20)

Recently uploaded

Recently uploaded (20)

Clase 6 construccion blogger