CAMenALLER Material elaborado para la optativa de CAM: Los Blogs
ÍNDICE APARTADO 1:
¿QUE ES INTERNET? ¿QUE ES LA WEB? MÁS SOBRE LA WEB LA WEB 2.0 GOOGLE
APARTADO 2
PÁGINAS WEB: PÁGINAS ESTÁTICAS GESTORES DE CONTENIDOS: PÁGINAS DINÁMICAS
APARTADO 3
EL BLOG ESTRUCTURA DE UN BLOG PANEL DE ADMINISTRACIÓN DEL BLOG
APARTADO 4
CREA TU PROPIO B LOG ADMINISTRAR UN BLOG EN BLOGGER MENÚ PLANTILLA MENÚ DISEÑO
APARTADO 5
CREACIÓN DE ENTRADAS REALIZAR UN ENLACE AÑADIR UN IMAGEN
APARTADO 6
INTRODUCIR CONTENIDOS MULTIMEDIA INSERTAR UNA PRESENTACIÓN INSERTAR UNA GALERÍA DE IMÁGENES INSERTAR UN VÍDEO
APARTADO 2__________________________________________ PÁGINAS WEB: PÁGINAS ESTÁTICAS Como se ha explicado anteriormente el lenguaje utilizado para realizar las páginas web es el lenguaje HTML. Este lenguaje se basa en las llamadas etiquetas, que vienen a ser órdenes o instrucciones de lo que tiene que aparecer en la imagen en cada momento en la página. Las etiquetas se caracterizan por estar encerradas entre los símbolos <>, añadiendo la barra / indicaremos la finalización de la orden. Cada etiqueta tiene asignado un significado. Por ejemplo <head>, significa encabezado de la página o <title> define el título
Aunque la creación de una página web utilizando el lenguaje HTML no es un procedimiento difícil, si es un proceso lento. Por esta razón se han desarrollado numerosos programas que permiten crear una página web de una forma gráfica. Estos programas editores de páginas web se denominan editores WYSIWIG (What You See Is What You Get, que significa lo que ves es lo que obtienes). Algunos de ellos son FrongPage que entra dentro del paquete Office de Microsoft, Dreamweaver de Adobe o Kompozer dentro del software libre desarrollado bajo licencia GNU
En la página oficial puedes descargarte el programa: http://www.kompozer.net/ También existe una versión portable que podrás descargarte en Educastur desde la Mochila Digital
GESTORES DE CONTENIDOS: PÁGINAS DINÁMICAS Los gestores de contenidos son aplicaciones que se encuentran en el servidor para crear páginas web dinámicas, que nos permiten administrar el diseño del sitio de forma independiente a su contenido, de modo que cuando cambiamos el diseño no afecta al contenido y cuando cambiamos el contenido el diseño no se ve alterado. Los gestores de contenidos podemos modificarlos desde nuestro ordenador conectándonos a Internet. Para trabajar independientemente diseño y contenido y evitar complicaciones, las páginas web dinámicas te dan a elegir entre diversas plantillas, en las cuales nosotros nos encargamos de introducir los contenidos: artículos, enlaces, categorías…. El diseño de estas plantillas puede ser fijo, pero la mayoría de ellas permiten personalizar muchos aspectos relativos a la composición, al color, al tipo de letra, a la imagen de la presentación, etc. • El blog: Es el medio más extendido de la wed 2.0. Se trata de una especie de diario, que recopila artículos por fechas presentados cronológicamente apareciendo en primer lugar el último creado. Su nombre en español es bitácora. Un usuario puede crear un blog y administrarlo incluyendo en él contenidos, enlaces, imágenes. Los lectores pueden participar en él con comentarios a los que puede contestar su creador entablando un diálogo. Existen muchos ejemplos: Audiovisio o Las TIC en Plástica son algunos de ellos. • El wiki: Es un sitio colectivo en el que el grupo participante puede editar publicar, modificar y construir su propio conocimiento. El ejemplo más conocido es la Wikipedia. • El foro: Lugares de opinión o debate, generalmente de carácter temático. Suelen presentarse como complemento en otros sitios web formando grupos de interés común.
APARTADO 3__________________________________________ EL BLOG Blog proviene de abreviar la palabra inglesa weblog, compuesta a su vez de web y de log. Esta última significa diario por lo que ahora resultará más fácil comprender que es un blog. Un blog es un sitio de Internet en el que de forma periódica una persona o grupo de personas pueden publicar noticias, o artículos. A esa persona la llamamos administrador, y a la noticia o artículo lo denominamos entrada. En español un blog recibe el nombre de bitácora. Los artículos aparecen en la pantalla en orden cronológico, del más reciente al más antiguo según te desplazas hacia la zona inferior de la pantalla y todos ellos se acompañan de un título y de la fecha de su publicación. Existen diferentes servicios online que nos permiten crear y administrar un blog, como Blogger, Worpress, Edublogs . Nosotros crearemos nuestro blog en Blogger. ESTRUCTURA DE UN BLOG: LO QUE EL VISITANTE VE EN UN BLOG.
Aunque puede variar en función del diseño, básicamente tienen tres partes bien diferenciadas: • Cabecera: es el lugar donde va el título y una imagen (dependiendo de la plantilla podrás o no elegir una tuya o no). • Columna principal: es el lugar donde aparecen las entradas, en las que aparecerá el título de la entrada, la fecha, el contenido, un enlace para hacer comentarios y las etiquetas que hayas signado al artículo. • Columna/s lateral/es: aquí aparecerán para accesorios o Gadget, como por ejemplo: Archivo del blog: enlaces a los últimos artículos publicados.
Buscador: espacio para buscar los contenidos del blog. Listado de enlaces o blogroll: listado de blogs que nos interesen. Etiquetas: también llamados categorías. Se trata de palabras que identifican al tema o temas tratados en cada artículo. Textos Presentaciones Vídeos Imágenes Publicidad PANEL DE ADMINISTRACIÓN DEL BLOG O VISTA GENERAL. Una vez que hayas introducido tu nombre y contraseña en la página de blogger accederás al escritorio. Aquí encontrarás un listado con los blogs que hayas creado.
Junto a ellos tienes algunos iconos para acceder de modo rápido a la administración del blog: editar entradas, desplegable con acceso a diferentes aspectos del blog y otro para ver el blog.
Para poder personalizar tu blog podrás accederás al panel de administración, llamado Visión general.
En la parte izquierda verás un un menú vertical con enlaces a diferentes los aspectos que puedes gestionar.
APARTADO 4__________________________________________ CREA Y ADMINISTRA TU PROPIO BLOG Si ya tienes cuenta en Google, puedes teclear tu nombre de usuario y contraseña en los espacios de la parte superior derecha.
.
MENÚ PLANTILLA El primer menú que vamos a manejar es el menú Plantilla. En él puedes elegir entre bastantes plantillas prediseñadas y ver previamente como queda el resultado final y aplicarlo si te interesa.
Además se puede personalizar la plantilla elegida en Personalizar. Aquí y dentro de las posibilidades de cada plantilla podrás personalizarla a tu gusto. Una vez que te decidas pulsarás Aplicar al blog. Una vez que te encuentres en la ventana de Personalizar, observarás en la columna izquierda un menú que te da acceso a diferentes opciones: Plantillas, Fondo, Ajustar ancho, Diseño y Avanzado.
Lo primero que debes elegir el la estructura de las columnas y filas en el menú Diseño.
En Avanzado puedes elegir colores personalizados para cada uno de las diferentes partes.
MENÚ DISEÑO Este menú es muy interesante, pues en el puedes cambiar aspectos relacionados con el contenido en la cabecera, las entradas o incluir en la columna lateral enlaces imágenes, vídeos, presentaciones, listados de enlaces, etc.
A. Cabecera La cabecera se distingue porque en ella aparece el título y el texto con una breve descripción. Podéis editarlos siempre que queráis aunque no es bueno cambiarlo si el blog responde a unos objetivos previamente establecidos. Es mejor pensarlo un poco más y mantenerlos fijos. •
Si en no vas a incluir ninguna imagen, ve al menú Diseño y en el espacio rectangular dedicado a la cabecera pulsa Editar. Deberás poner el nombre de tu blog y una descripción breve del mismo.
•
Puedes incluir una imagen en la misma. Es posible que tengas que adaptar el tamaño de la misma. Dependerá del diseño elegido. En la plantilla llamada Sencillo, un tamaño adecuado puede ser 960x220. Para incluir la imagen ve al menú Diseño y en el espacio rectangular dedicado a ella pulsa a Editar e inserta la imagen. También deberás rellenar el espacio del nombre pero marcarás “En lugar del título y la descripción” . En este caso ten en cuenta estos consejos: Pero si no es esta plantilla, y quieres que ocupe todo el ancho, tendrás que tener en cuenta el ancho del blog completo, que podrás saber en Plantilla>Personalizar>Ajustar ancho. Cuando insertes la imagen en Diseño>Cabecera, no marques la opción “Reducir hasta ajustar”.
Luego vas a Plantilla > Personalizar > Avanzado >Añadir CSS, y en el campo para añadir CSS, agregas esto: #header-inner{ margin:-10px 0 0 -10px; } Si no quieres que la imagen ocupe todo el ancho, y es demasiado grande, se saldrá en algunas navegadores y tendrás que pulsar “Reducir hasta ajustar”. Si la imagen es demasiado pequeña para centrarla agregar en CSS: #header-inner img { margin: 0 auto; } Y si quieres cambiar el tamaño de la imagen, tendrás que definir el ancho y el alto: #header-inner img { width: 960 px; height: 220 px; } Para usar la imagen debajo del título y la descripción debes pulsar “Reducir para ajustar” y “Detrás del título y la descripción”. Para mover estos elementos en Agrega CSS: . header h1{ margin: 10px 0 0 40 px; } .header .descripcion { margin:-20px 0 0 0; }
B. Columna lateral En función del diseño de plantilla que hayas elegido, tendrás diferentes estructuras, pero en todas ellas tendrás recuadros en los que se situarán los diferentes contenidos. Algunos aparecen por defecto: • Favicon • Barra de navegación • Cabecera • Entradas del blog • Archivo del blog • Datos personales De estos algunos son fijos y no puedes eliminarlos • Favicon • Barra de navegación • Cabecera
• Entradas del blog Los demás, aunque aparecen por defecto si que puedes borrarlos. En otros recuadros puedes añadir Gadget. Cuando quieras añadir un Gadget, solo tienes que pulsar en dicho enlace y se abrirá, en una nueva ventana, un listado de posibilidades para incluir. Añadir una imagen Entra en la solapa de Diseño y pulsa Añadir un Gadget en el bloque superior. Elige Imagen e introdúcela desde tu equipo, incluyendo el título y el autor, así su URL. Crear una lista de enlaces a blogs o páginas web Es muy interesante disponer de una lista de blogs y páginas web que te gusten de modo que puedas acceder a ellos desde tu blog. Es tan fácil como añadir de nuevo un Gadget y elegir del listado el gadget deseado. C. Columna principal La columna central es el lugar donde aparecerán las entradas que se vayan escribiendo y publicando. Aparecen en lista por fecha de la última a la más antigua. Puedes acceder a una entrada para editarla o eliminarla, buscándola en el buscador, o bien seleccionando etiquetas relacionadas con el tema abordado en la entrada.
APARTADO 5 __________________________________________ CREACIÓN DE ENTRADAS Puedes crear entradas pulsando en Nueva entrada o bien en Personalizar>Creación de entradas>Crear. Dentro de la edición de las entradas puedes trabajar en la solapa Redactar o bien en Edición de HTML.
Observa que tienes una barra en la parte superior que pone Título: es el espacio en el que tendrás que escribir un título para tu artículo. En Redactar tienes varias opciones para personalizar el formato de texto de modo similar a un procesador de texto (aunque más limitado). Puedes hacer una Vista previa de lo que estás trabajando o Cerrar. A la derecha tienes una columna para aspectos para editar la Configuración de las entradas. Solo necesitas un tema y ponerte a escribir. Para terminar tienes la opción de Publicar la entrada, con la que harías público en la web tu artículo, o bien puedes dar a Guardar, que no te lo publica, pero te lo guarda, por si quisieras seguir trabajando en otro momento con él antes de publicarlo.
REALIZAR UN ENLACE Crear un enlace es muy sencillo. En el menú superior de la edición de las entradas, hay un icono de enlaces:
Pulsando sobre él saldrá una ventana en la que podrás escribir o pegar la dirección del enlace. Y ya está AÑADIR UN IMAGEN Cuando estás escribiendo una entrada puedes incluir una imagen. En el menú superior hay un icono de imagen.
Si colocas el cursor sobre él aparecerá a una ventana nueva con la que podrás incluir una imagen. Es bastante intuitiva:
Puedes tener problemas para incluir una imagen de la web. En este caso, otra opción que no suele fallar es pasarte a Edición en HTML. Para esto debes conocer cual es el código de la fotografía. Recuerda que las imágenes de la web pertenecen a su autor y que debes mostrarte respetuoso con su trabajo. Existen otras webs al estilo de Flickr, como: • Openphoto: http://openphoto.net/ • PublicDomainPictures http://www.publicdomainpictures.net/ Para obtener el código: Colócate sobre la imagen y pulsa con el botón izquierdo del ratón para conseguirla a mayor tamaño. Pulsa de nuevo y podrás copiar el código que aparece debajo de la imagen en la casilla Inline Image. Solo tendrás que pegarla en la entrada que estás elaborando en Edición en HTML
APARTADO 6 __________________________________________ INSERTAR CONTENIDO MULTIMEDIA En este apartado veremos cómo insertar en nuestro blog presentaciones, galerías de imágenes, documentos o archivos de sonidos.
INSERTAR UN DOCUMENTO DE SCRIBD ¿Que es Scribd? Scribd es una red que permite de forma gratuita publicar, compartir, encontrar o descargar documentos en diferentes formatos: .doc, .pdf, .txt, .ppt o .xls.
Registrarse en Scribd. Para registrarte pulsa en el enlace: Sign Up
Puedes crear la cuenta con tu nombre de usuario y contraseña de Facebock. Pero en esta ocasión, pulsa en el enlace que dice: I don't have a Facebook account y cumplimenta los campos de correo electrónico, nombre de usuario y contraseña. Para acceder a tu cuenta lo harás pulsando en Log In, pulsar en Already have a Scribd account? , y rellenar los campos de usuario y contraseña. Subir un documento Para subir un documento solo deberás pulsar Subir, y en la nueva ventana volver a pulsar Subir.
También puedes importar documentos creados en Google Docs. Solo tendrás que marcar en el círculo para seleccionar y pulsar en el enlace que aparecerá.
Pasos para insertar un documento de Scribd Podemos localizar l documento que se desea inserta buscando por Usuarios o por Documentos en Explore. También puedes hacerlo con un documento tuyo. Una vez que hayas decidido el documento,
Se selecciona Embed en una ventana como esta y copias el código en Copy:
Pega este código en el editor de entrada de tu blog, pero en la pestaña HTML. Para confirmarlo debes guardar o publicar la entrada.
Pega este código en el editor de entrada de tu blog, pero en la pestaña HTML. Para confirmarlo debes guardar o publicar la entrada.
INSERTAR UNA GALERÍA DE IMÁGENES DE PhotoPeach ¿Que es PhotoPeach? Es un sitio que genera presentaciones de vuestras imágenes en galerías una vez subidas (hasta un máximo de 30 para cada galería). Como en la mayor parte de estos sitios, lo primero que debes hacer es crear una cuenta y después subir tus imágenes. Estas se guardarán en una galería que podrás editar cuando desees.
Registrarse en PhotoPeach Debes escribir un número de usuario y contraseña en la página de inicio
Subir un fotos para crear una galería.
Primero debes tener las imágenes guardadas en tu equipo, y después, una vez en tu página de PhotoPeach, pulsa en:
Y a continuación elige las imágenes:
Pasos para insertar una galería de PhotoPeach Para obtener el código accederás a la galería que quieras, te situarás sobre el icono del lápiz, que es del obtención del código y copiarás el primer código para pegarlo en tu entrada en la Edición HTML:
INSERTAR UNA PRESENTACIÓN DE SLIDESHARE ¿Que es Slideshare? Es una herramienta utilizada para almacenar, agrupar, distribuir, y administrar presentaciones en formatos .ppt, .pptx, .odp y .pdf .
Registrarse en Slideshare Para registrarse en Slideshare basta con pulsar Sign up situado en la parte derecha de la barra superior y completar los datos que te piden, dejando el
campo del tipo de cuenta Account Type en Default, es decir, por defecto, y aceptando TOS & Privacy Policy
Antes de poder empezar a trabajar debes verificar tu cuenta en Slideshare, entrando en la cuenta de correo que hayas escrito al crearla. Subir una presentación Se pulsa en UPLOAD, situado en la parte superior, y se busca en el equipo el archivo.
Buscar presentaciones Se pueden buscar presentaciones desde el buscador de la barra superior. Puedes buscar por cuentas o por contenidos.
Pasos para insertar una presentación de Slideshare en tu blog Se sigue un proceso similar a los anteriores, copiando el código y pegándolo en la edición HTML de la entrada. Para localizar el código, pulsa sobre la presentación que desees añadir en tu entrada para acceder a ella y pulsar en Insertar
INSERTAR UN VÍDEO DE YOUTUBE ¿Que es Youtube? Youtube es un lugar para ver, subir y descargar vídeos. Registrarse en Youtube Entra en la página de Youtube y pulsa en Crear cuenta en la parte superior derecha. Rellena los campos de nombre de usuario, fecha de nacimiento y sexo, y pulsa en aceptar. Aparecerá una nueva ventana que te ofrecerá la posibilidad de registrarte con tu cuenta de Google. Opta por esta opción y escribe el mismo nombre de usuario y contraseña de Google.
Pasos para insertar un vídeo de Youtube En primer lugar localizaremos el vídeo que nos interese, para lo cual emplearemos el buscador. Puedes buscar como ejemplo para ver el corto de animación de Juan Pablo Etcheverry, basado en al obra de José Saramago La flor más grande del mundo.
Pulsa en Insertar para obtener el código, colocándote sobre él y pulsando con el botón derecho del ratón podrás seleccionarlo:
INSERTAR UN DOCUMENTO ISSUU ¿Que es Issuu? Issuu es un servicio que permite subir material a Internet y darle un formato de libro digital.
Registrarse en Issuu Los pasos son similares a los realizados con los espacios anteriormente vistos.
Pulsa en Sign Up en la parte superior de derecha de la barra superior. Aparecerá la siguiente ventana que tendrás que cumplimentar:
En la siguiente ventana te mandará confirmar la suscripción en el correo que hayas escrito en el registro. Hazlo sin cerrar la ventana. Insertar un documento de Issuu Al igual que el registro, insertar un documento comienza por copiar el código del documento que deseemos insertar, y pegarlo en nuestra entrada del blog. El código en Embeber...
y cuando se abra la ventana con el código copiarla:
Debajo del código puedes seleccionar entre diferentes opciones para la presentación del documento, como el formato, el color de fondo, el sonido...y puedes visualizar los resultados en una vista previa situada al final de esta ventana flotante.
RECURSOS UTILIZADOS EN ESTE MATERIAL: Fuentes: http://blog.educastur.es/eduweb20/ http://www.eduteka.org/Web20Intro.php http://es.wikipedia.org/