Curso de blogs_2012_3

Darío Roig García
Analista Programador
Servicio de Informática de la UV
dario.roig@uv.es
http://www.uv.es/dario
http://dario.blogs.uv.es

Copyright 2012 - Dario Roig Garcia

1. 06/02/2012 AULA N403 16:00 19:30
2. 07/02/2012 AULA S102 (DUAL) 16:00 19:30
3. 08/02/2012 AULA N403 16:00 19:00
4. 13/02/2012 AULA N403 16:00 19:30
5. 14/02/2012 AULA S102 (DUAL) 16:00 19:30
6. 15/02/2012 AULA N403 16:00 19:00


 Apuntes en Aula Virtual
 Cuestionarios abiertos
 Cuestionarios tipo test
 Soporte sobre los servicios informáticos
ofrecidos a los estudiantes (SIE)
 http://www.uv.es/siuv
 http://www.uv.es/portalumne
 http://www.uv.es/siuv/cat/sie/indexsie_cat.html


1. Introducció als Serveis Web 2.0
2. Creació del teu blog personal
3. Escruire al teu blog. La teva primera entrada o pàgina: Un
post.
4. Administreu
entrades, pàgines, comentaris, enllaços, categories, etiqu
etes.
5. Estructura del teu blog, menús, diferències entre pàgines i
entrades.
6. Contingut multimèdia en un post.
Imatges, àudio, Vídeo, mapes. Integració amb serveis
web.
7. Aspectes de disseny, selecció de temes, afegir widgets i
plugins.
8. Sindicació de continguts. Subscriure't a altres blogs
mitjançant RSS. 2012 - Dario Roig Garcia
Copyright

 Internet
 Servicio World Wide Web
▪ Web 1.0
▪ Página Web
▪ Web 2.0
▪ Blogs, Wikis,
 Otros servicios
▪ Correo, Redes P2P, Comunicación de
texto, voz, video, etc.


 Internet es un conjunto descentralizado de
redes de ordenadores interconectadas los
cuales utilizan para comunicarse el protocolo
IP
 En 1990 España y otros países se conectan a
Internet
 Cronología completa de Internet
 (http://www.hipertexto.info/documentos/crono_i.
htm)

 Uno de los servicios que más éxito ha tenido
en Internet ha sido la World Wide Web
(WWW, o "la Web”).
 La WWW es un conjunto de protocolos que
permite, de forma sencilla, la consulta
remota de documentos de hipertexto.
 Utiliza Internet como medio de transmisión.
 Fue desarrollo en 1990 en la Organización
Europea para la Investigación Nuclear (CERN)

 Arquitectura
 Servidor Web
▪ http://www.uv.es
▪ http://mural.uv.es
 Cliente Web
▪ Navegadores: Internet Explorer, Mozilla Firefox, Chrome
 Documentos o páginas Web
▪ Procesadores de texto: Frontpage, etc.
 URL: Localizador uniforme del recurso
▪ Nombre de servidor + ruta + nombre de archivo Web
▪ Ej: http://www.aulaclic.es/internet/index.htm

 Página o documento electrónico de
Hipertexto
 La información esta etiqueta
 Al conjunto de etiquetas que se utilizan se le
llama:
▪ HTML (Lenguaje de Marcado de Hipertexto)
 Las etiquetas se utilizan para formatear la
información.
 Etiqueta especial que vincula la información que
se esta citando. “EL HIPERVINCULO”

INTERNET

http://mural.uv.es/daroig/index.html http://www.uv.es/


▪ Estructura de una página Web
▪ Nombre del archivo
▪ Contenido
 Encabezado
 Titulo
 Cuerpo
 Índice
 Texto e imágenes
 Dirección para localizar el archivo en Internet
▪ Nombre de servidor web + Ruta del archivo en el
servidor + Nombre del archivo


ENCABEZADO

Contenido
Página estática

COLUMNAS
Menú


▪ DOMINIO: Hace falta un nombre registrado
▪ HOSTING: Espacio en un servidor para guardar los archivos
▪ Un sitio Web consta de diferentes páginas Web enlazadas almacenas en
una carpeta
▪ Se accede normalmente por los buscadores
▪ 1998 Nace Google
▪ Editar o actualizar la información:
▪ SW instalado en tu ordenador: ej. Frontpage, Sharepoint
▪ con CMS a través del navegador: ej. Joomla, WordPress
▪ La información de las páginas no se actualiza demasiado


 Existen, por tanto, muchos otros servicios en
Internet, aparte de la Web:
 Correo electrónico
 Transmisión de ficheros FTP y P2P
 Servicios de comunicación
 Texto, voz, video


 Accede a tu cuenta http://cuentas.uv.es
 Activa tu sitio Web en el servidor Web:
http://mural.uv.es

 Al activar la cuenta creamos carpeta en MURAL
 Tuusuario
 Para ver el contenido de tu carpeta Web
 http://mural.uv.es/tuusuario/


 Activa tu espacio en el servidor de disco
 http://disco.uv.es
 Gestor de archivos de tu espacio Web
 Permite modificar los archivos
 DISCO
 WEB
 Archivos de tu sitio Web


 Crea un documento con Word
 Añade algo de texto: P.e. “Hola Mundo”
 Guárdalo como Pagina Web con el nombre
“pagina.htm”
 Cárgala en el servidor Web a través de
http://disco.uv.es (CMS Web)
 Visualízala con un navegador
 URL: http://mural.uv.es/tusuario/pagina.htm


 Realizar cuestionario sobre “Páginas Web” en
Aula Virtual
 Lo podeis realizar todas las veces que querais
hasta obtener la maxima puntuación


 Una página Web que recopila textos o
artículos clasificados por fecha.
 Orden: El primer articulo es el más reciente
 Comunicación a través del articulo
 El lector puede comentar el articulo
 El autor puede contestarle
 Ejemplo:
 http://agora.blogs.uv.es/
 http://www.nosolousabilidad.com/

 Muchos blogs se enfocan en un tema en
particular, tales como
internet, política, deportes o noticias.
 Otros no son nada más que bitácoras
personales, que presentan la vida diaria del
autor, sus ideas e intereses.


 Contenido principal:
 Artículos listados cronológicamente
 Organizados en categorías.
 Comentarios.
 Columnas
 Un archivo histórico de los artículos antiguos.
 Enlaces a otros Blogs: "blogroll".
 Archivos de suscripción a tu blog: feeds.
 Menú.
 Acerca de.
 Páginas estáticas
 Ej. http://laurapo.blogs.uv.es

ENCABEZADO

POST /
ENTRADAS

SUSCRIPCION

COLUMNAS
Categorías
Archivo
Blogroll


 Activar la cuenta
 http://cuentas.uv.es
 Dirección de tu blog
 http://tuusuario.blogs.uv.es
 Creación y edición con Wordpress
 http://blogs.uv.es
 Se utiliza un CMS (Sistema Gestor de Contenidos)
para editar/actualizar la información.
 Usuario y contraseña de la UV
 Tablero

ACTIVAR


PARA LEER
TU BLOG


PARA
MODIFICAR
TU BLOG


 Tú primer articulo o entrada. Un Post.
Selecciona un título para la
entrada. En la caja de texto
comienza a escribir el
mensaje.

Al terminar pulsa sobre “Publicar” si quieres
que aparezca publicado en tu blog o “guardar”
si deseas mantenerlo como borrador


 Entrades, pàgines, comentaris, enllaços, cate
gories, etiquetes.


 Es una propiedad de la “Entrada”
 Organización Jerárquica
 Diferentes niveles
 Visualización en el menú
categorías
 Estructura la navegación


 Vista del Tablero
 Creación de una categoría
 Creación de una subcategoria
 Tienen Categoría superior
 Aspecto
 Widgets
 Categoría
 Cambiar el orden de
visualización

 Organización libre NO
JERARQUICA
 Visualización en nube
de etiquetas
 las más usadas tienen el
texto más grande
 Añaden información
semántica


2

1


 Vínculos a blogs que leas
habitualmente o que tengan
relación con tu blog
 Se muestran en el widget
“Blogroll”
 Se puede cambiar el nombre en
la parte de administración
 Aspecto/Widgets


 En la entrada se
indican el numero
de comentarios
 Para evitar
publicidad al poner
el comentario hay
que leer una imagen


 Comunicación entre
Autor y el Lector
 Por defecto los
comentarios son
moderados
 Desde el Tablero
▪ se tienen que aceptar
▪ Se puede cambiar la política
▪ Borrarlos, etc.


 Crea tu blog
▪ Ayuda http://blogs.uv.es/help/ch01s02.html
 Accede a tu tablero
 Realiza un par de entradas en tu blog
 Es muy importante el título de la entrada, no lo
dejes vacio.
 Añade algún comentario en el blog del
compañero


 Crea categorías relacionadas con tus
etiquetas.
 Edita la etiqueta y asocialas.
 Comprueba que se puede navegar por las
entradas a través del menú “Categorias”
 Ahora crea una subcategoria y de nuevo
asóciala a otra entrada.
 Comprueba de nuevo su navegación desde tu
blog.

 Edita alguna de las entradas y asocia varias
etiquetas a la misma entrada
 Comprueba que se pueden recuperar todas
las entradas que tengan asociada alguna de
las etiquetas creadas desde el menú
“Etiquetas” de tu blog.


 Menús, diferències entre pàgines i entrades.

 Las Páginas estaticas son como las
Entradas, excepto que viven fuera de la
cronología normal del blog.
 Se crean automáticamente enlaces a las
páginas en el Widget “Paginas”.

 Ayuda http://codex.wordpress.org/es:Pages

 La página
ppal del
blog será
una página
estática.
 Las
entradas se
mostrarán
en otra
página Copyright 2012 - Dario Roig Garcia

 Creando páginas Web en tu blog

 Edita la página Acerca de
 Escribe texto sobre tus estudios y realiza un
hipervínculo con la web de tu centro o estudios.
 Ayuda http://blogs.uv.es/help/ch01s03.html
 Crea otra página con algo de información atemporal
en tu blog y realiza algunos hipervínculos.

 Realiza el Cuestionarios en Aula Virtual “Practica
2: Páginas Web con Wordpress”

 Cambiando la página principal de tu blog

 Crea una página sin contenido para mostrar las
entradas en ella.
 Crea una página con contenido para utilizarla de
página principal.
 Cambia en Ajustes/lectura la página inicial a
mostrar.
 Cambia en que página se mostrarán las entradas
 Comprueba en tu blog como se puede acceder a
las páginas.

 Comprueba en tu blog como se puede
acceder a las páginas
 Si la plantilla que has seleccionado tiene menús.
Las páginas se mostrarán automáticamente.
 Si no tiene menús.
 Utiliza widgets
 “Menú personalizado”
 “Paginas”


 Independiente
 Información : HTML
 Presentación: Hojas
de Estilo (CSS)
 Permite cambiar el
tema y no cambia el
la información.


 Todos los temas tienen dos columnas
 Central: se muestran las entradas
 Izquierda o derecha se muestran los Widgets


 Imatges, àudio, Vídeo, mapes. Integració
amb serveis web.
 El contenido de una entrada puede ser:
 Texto
 Imágenes
 Videos
 Mapas
 Otros Servicios Web: Reproductor MP3, Pase de
fotos

 Visual o HTML
 Estilos
 Listas
Sublistas

 More


 Las imágenes forman parte del contenido
 También pueden tener hipervínculos
 Propiedades de la imagen
 Tamaño o peso
 El tamaño solo se puede modificar editándola (Photo
Editor, Paint)
• Ancho y alto
 Se puede modificar al Insertarla (cuidado no distorsionarla)


 Editar la entrada y situar el cursor donde
queramos insertarla


 Desde el ordenador
 Solo 50 MB
 Desde URL
 Dirección de la imagen


 Descárgate alguna imagen a tu ordenador
 Sube la imagen a tu espacio Web de la UV
 http://disco.uv.es “Carpeta Web”
 Identificar la URL y copiarla en el portapapeles
 Ejemplo: http://mural.uv.es/imagenes/prueba.jpg
 Editar una entrada en tu blog
 Insertar una imagen desde el icono de la barra de
herramientas


 Insertar los videos
 No importa el
tamaño (streaming)
 Si el autor borra el
video falla el
embebido
 Subir nuestros
propios videos
▪ Youtube, mmedia, etc.


 Añadimos una entrada en el blog
 En el Editor cambiamos a “HTML”
▪ Botón “Media”
▪ Pegamos la URL del video


 Añadimos una
entrada en el blog
 En el Editor
cambiamos a
“HTML”
▪ Pegamos el código
HTML iframe
▪ NO FUNCIONA!!
▪ Problema de
seguridad


 Entrada con un
mapa de google
 Opción A
 URL
 Opción B
 HTML


GOOGLE MAPS
B
L
O
G


 Activar plugin Google Maps embed


 Música
 Fotos: picasa, flickr


 Crea otra entrada con un video (opción A)
 Inserta el video mediante el botón “Media”

 Crea una página con la situación de tu
negocio ficticio.


 Wordpress MU dispone
múltiples temas libres
desarrollados por
diseñadores.
 El nombre del tema
seleccionado se puede ver
normalmente en el pie de
página


 Subscriure't a altres blogs mitjançant RSS.
 Necesitamos la fuente RSS
▪ Se obtiene del blog que queremos suscribirnos
 Necesitamos un lector de RSS
▪ Aplicación instalada, p.e. Outlook
▪ No hace falta aplicación instalada, solo conectarte a un
lector RSS Web, p.e. google readers


 El editor (TinyMCE Advanced 3.2.4)
 Modo visual o Modo HTML
 Editar desde Word
 Ajustes:
 google analytics
 Exportar un blog


 Otros Wordpress
 Gratuito http://es.wordpress.com/
▪ Permite registrar nombre
 En tu propio hosting. E.j. 1&1, dinahosting

 Búsquedas: pagerank, technorati.com


 Plugins
 Activar
 Ajustes
 Personalizar
 Tablas
 HTML


 Word 2007
 Ajustes/Escritura
 Publicación remota


 Los editores traducen el contenido que
introduce el autor, texto e imágenes al
lenguaje HTML.
 A veces el traductor no funciona bien o
simplemente no puede traducir a código
HTML desde el editor visual ciertas etiquetas.
 Para solucionar es necesario modificar el
código de HTML traducido.


 Lenguaje de Marcado
 <h1>Titulo 1</h1>
 <p>La etiqueta anterior marca el texto como
encabezado de nivel 1. La etiqueta por
defecto que se utiliza es la etiqueta de
párrafo, ‘p’.</p>.
 IMG – Imágenes
 A – Hipervínculos
 Listas. UL y LI

•Crear cuenta en Google Analytics

https://www.google.com/analytics/

En tu blog pega el código


 Search Engine Optimization
 Google webmasters tools
 Darse de alta con la cuenta de gmail
 Buscadores de blogs
 Google
 Technoari


 Activar plugin


 Añadir sitio


 Añadir SITEMAP


 SITEMAP


 Verificar sitio

 Editar página principal
 Añadir campo personalizado


 Gestionar un blog por un grupo de usuarios


 Administrator – Tiene acceso a todas las
tareas de administración
 Editor – Puede publicar artículos,
gestionarlos así como gestionar los artículos
de otros usuarios.
 Author – Puede publicar y gestionar sus
propias entradas.
 Contributor – Puede escribir y gestionar sus
propias entradas pero no publicarlas.
 Subscriber – Puede leer y comentar.

 Ajustes
 Privacidad


 Ajustes
 Generales


 Share This


 Slideshare


Curso de blogs_2012_3

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Curso de blogs_2012_3

Similar to Curso de blogs_2012_3 (20)

Curso de blogs_2012_3