Curso de blogs_2012_3

SERVICIOS WEB 2.0: BLOGS CON WORDPRESS

Darío Roig GarcíaAnalista Programador Servicio de Informática de la [email protected]://www.uv.es/dariohttp://dario.blogs.uv.es

Copyright 2012 - Dario Roig Garcia

mailto:[email protected]

http://www.uv.es/dario

Sesiones

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:004. 13/02/2012 AULA N403 16:00

19:305. 14/02/2012 AULA S102 (DUAL)

16:00 19:306. 15/02/2012 AULA N403 16:00

19:00 Copyright 2012 - Dario Roig Garcia

Apoyo

Apuntes en Aula VirtualCuestionarios abiertosCuestionarios tipo testSoporte 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.htmlCopyright 2012 - Dario Roig Garcia

http://www.uv.es/siuv

http://www.uv.es/portalumne

Continguts

1. Introducció als Serveis Web 2.02. Creació del teu blog personal3. Escruire al teu blog. La teva primera entrada o pàgina:

Un post. 4. Administreu entrades, pàgines, comentaris, enllaços,

categories, etiquetes. 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. Copyright 2012 - Dario Roig Garcia

1. Introducció als Serveis Web 2.0

InternetServicio 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

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)Copyright 2012 - Dario Roig Garcia

Internet


Servicio World Wide Web (I)

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)


http://es.wikipedia.org/wiki/World_Wide_Web




http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Medio_de_transmisi%C3%B3n

Evolución de la Web


Web 1.0

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


http://www.uv.es/

http://mural.uv.es/

Página Web

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”


Hipervínculo: Ejemplo de 2 paginas vinculadas


INTERNET

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

Ejemplos de páginas Web▪ 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 archivoCopyright 2012 - Dario Roig Garcia

Estructura tipica


ENCABEZADO

COLUMNASMenú

ContenidoPágina

estática

Ejemplos creativos


Sitios Web

▪ 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


Otros servicios

Existen, por tanto, muchos otros servicios en Internet, aparte de la Web:

Correo electrónicoTransmisión de ficheros FTP y P2PServicios de comunicación

Texto, voz, video


Practica 0: Sitio Web

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/


http://mural.uv.es/


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


http://disco.uv.es/


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


http://disco.uv.es/

http://mural.uv.es/tusuario/index.htm

http://mural.uv.es/tusuario/index.htm

Cuentas


Word


Disco


Navegador


Cuestionario

Realizar cuestionario sobre “Páginas Web” en Aula Virtual

Lo podeis realizar todas las veces que querais hasta obtener la maxima puntuación


Web 2.0: Blogs (I)

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/Copyright 2012 - Dario Roig Garcia

http://www.nosolousabilidad.com/

Web 2.0: Blogs (II)

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.


Áreas de un blog

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.esCopyright 2012 - Dario Roig Garcia


ENCABEZADO

COLUMNASCategorías

ArchivoBlogroll

POST / ENTRADAS

SUSCRIPCION

2. Creació del teu blog personal

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


http://cuentas.uv.es/

http://tuusuario.blogs.uv.es/

Cuentas


ACTIVAR

http://Tuusuario.blogs.uv.es


PARA LEER TU

BLOG

http://blogs.uv.es


PARA MODIFICARTU BLOG

Editar desde tu Tablero


3. Escruire al teu 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

4. Administreu

Entrades, pàgines, comentaris, enllaços, categories, etiquetes.


Categorías (I)

Es una propiedad de la “Entrada”

Organización Jerárquica Diferentes niveles

Visualización en el menú categorías

Estructura la navegación


Categorías (II)


Vista del TableroCreación de una categoríaCreación de una

subcategoriaTienen Categoría

superiorAspecto

WidgetsCategoría

Cambiar el orden de visualización

Etiquetas

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


Etiquetas


1

2

Enlaces

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/WidgetsCopyright 2012 - Dario Roig Garcia

Comentarios (I)

En la entrada se indican el numero de comentarios Para evitar

publicidad al poner el comentario hay que leer una imagen


Comentarios (II)

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.


Practica 1: Entradas

Crea tu blog▪ Ayuda http://blogs.uv.es/help/ch01s02.html

Accede a tu tableroRealiza 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


http://blogs.uv.es/help/ch01s02.html

Practica 1.1: Entradas categorizadas

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. Copyright 2012 - Dario Roig Garcia

Practica 1.2: Entradas etiquetadas

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.


5. Estructura del teu 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


Cambiando la estructura del blog


La página ppal del blog será una página estática.

Las entradas se mostrarán en otra página

Práctica 2: Páginas

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”


http://blogs.uv.es/help/ch01s03.html

Práctica 2.1: Página principal 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.


Práctica 2.2: Menú 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”


Apariencia / Temas

Independiente Información :

HTML Presentación:

Hojas de Estilo (CSS)

Permite cambiar el tema y no cambia el la información.


Diferentes tipos de temas


Apariencia / Widgets

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

Widgets


6. Contingut multimèdia en un post.

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 fotosCopyright 2012 - Dario Roig Garcia

Texto


Visual o HTMLEstilosListas

Sublistas More

Imágenes (I)


Las imágenes forman parte del contenidoTambié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)

Imágenes (II)


Editar la entrada y situar el cursor donde queramos insertarla

Imágenes (III)


Desde el ordenador Solo 50 MB

Desde URL Dirección de la imagen

Práctica 3: Imágenes

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 herramientasCopyright 2012 - Dario Roig Garcia

http://disco.uv.es/

Insertar Videos (I)

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.Copyright 2012 - Dario Roig Garcia

Insertar Videos (I))

Añadimos una entrada en el blog En el Editor cambiamos a “HTML”

▪ Botón “Media”▪ Pegamos la URL del video


Insertar Videos (III)

Añadimos una entrada en el blog En el Editor

cambiamos a “HTML”▪ Pegamos el código

HTML iframe▪ NO FUNCIONA!!▪ Problema de

seguridadCopyright 2012 - Dario Roig Garcia

Mapas (I)

Entrada con un mapa de google

Opción A URL

Opción B HTML


Mapas (II)


GOOGLE MAPS

BLOG

Mapas (III)

Activar plugin Google Maps embed


Mapas (IV)


GOOGLE MAPS

BLOG

Otros servicios Web

MúsicaFotos: picasa, flickr


Práctica 4: Videos y Mapas

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.


7. Aspectes de disseny. Selecció de temes, afegir widgets i plugins

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


8. Sindicació de continguts.

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


9. Otros temas

El editor (TinyMCE Advanced 3.2.4) Modo visual o Modo HTML

Editar desde WordAjustes:

google analytics Exportar un blog


Otros temas

Otros Wordpress Gratuito http://es.wordpress.com/

▪ Permite registrar nombre En tu propio hosting. E.j. 1&1,

dinahosting

Búsquedas: pagerank, technorati.com


http://es.wordpress.com/

Editor TinyMCE

Plugins Activar

Ajustes Personalizar Tablas HTML


Word como editor


Word 2007Ajustes/Escritura

Publicación remota

Los editores y el HTML

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.Copyright 2012 - Dario Roig Garcia

Lenguaje HTML

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ágenesA – HipervínculosListas. UL y LI


Editar entrada y ver el HTML


Practica: Google Analytics


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

• Crear cuenta en Google Analytics

En tu blog pega el código

Técnicas SEO

Search Engine OptimizationGoogle webmasters tools

Darse de alta con la cuenta de gmailBuscadores de blogs

Google Technoari


XML Sitemap

Activar plugin


Google Webmasters tools

Añadir sitio



Añadir SITEMAP



SITEMAP


Plugin HEADMETA

Verificar sitio

Editar página principal Añadir campo personalizado


Usuarios


Gestionar un blog por un grupo de usuarios

Roles

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.Copyright 2012 - Dario Roig Garcia

Blogs privados

Ajustes Privacidad


Título del blog

Ajustes Generales


Plugins

Share This


Plugins

Slideshare


Documents

Curso de blogs_2012_3