curso de blogs_2012_3
DESCRIPTION
TRANSCRIPT
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
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
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.
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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)
Copyright 2012 - Dario Roig Garcia
Evolución de la Web
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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”
Copyright 2012 - Dario Roig Garcia
Hipervínculo: Ejemplo de 2 paginas vinculadas
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
ENCABEZADO
COLUMNASMenú
ContenidoPágina
estática
Ejemplos creativos
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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/
Copyright 2012 - Dario Roig Garcia
Practica 0: Sitio Web
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
Copyright 2012 - Dario Roig Garcia
Practica 0: 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
Copyright 2012 - Dario Roig Garcia
Cuentas
Copyright 2012 - Dario Roig Garcia
Word
Copyright 2012 - Dario Roig Garcia
Disco
Copyright 2012 - Dario Roig Garcia
Navegador
Copyright 2012 - Dario Roig Garcia
Cuestionario
Realizar cuestionario sobre “Páginas Web” en Aula Virtual
Lo podeis realizar todas las veces que querais hasta obtener la maxima puntuación
Copyright 2012 - Dario Roig Garcia
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
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.
Copyright 2012 - Dario Roig Garcia
Á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
Copyright 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
Copyright 2012 - Dario Roig Garcia
Cuentas
Copyright 2012 - Dario Roig Garcia
ACTIVAR
http://Tuusuario.blogs.uv.es
Copyright 2012 - Dario Roig Garcia
PARA LEER TU
BLOG
http://blogs.uv.es
Copyright 2012 - Dario Roig Garcia
PARA MODIFICARTU BLOG
Editar desde tu Tablero
Copyright 2012 - Dario Roig Garcia
3. Escruire al teu blog.
Tú primer articulo o entrada. Un Post.
Copyright 2012 - Dario Roig Garcia
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.
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Categorías (II)
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Etiquetas
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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.
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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.
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Cambiando la estructura del blog
Copyright 2012 - Dario Roig Garcia
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”
Copyright 2012 - Dario Roig Garcia
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.
Copyright 2012 - Dario Roig Garcia
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”
Copyright 2012 - Dario Roig Garcia
Apariencia / Temas
Independiente Información :
HTML Presentación:
Hojas de Estilo (CSS)
Permite cambiar el tema y no cambia el la información.
Copyright 2012 - Dario Roig Garcia
Diferentes tipos de temas
Copyright 2012 - Dario Roig Garcia
Apariencia / Widgets
Todos los temas tienen dos columnas Central: se muestran las entradas Izquierda o derecha se muestran los
Widgets
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Visual o HTMLEstilosListas
Sublistas More
Imágenes (I)
Copyright 2012 - Dario Roig Garcia
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)
Copyright 2012 - Dario Roig Garcia
Editar la entrada y situar el cursor donde queramos insertarla
Imágenes (III)
Copyright 2012 - Dario Roig Garcia
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
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
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Mapas (II)
Copyright 2012 - Dario Roig Garcia
GOOGLE MAPS
BLOG
Mapas (III)
Activar plugin Google Maps embed
Copyright 2012 - Dario Roig Garcia
Mapas (IV)
Copyright 2012 - Dario Roig Garcia
GOOGLE MAPS
BLOG
Otros servicios Web
MúsicaFotos: picasa, flickr
Copyright 2012 - Dario Roig Garcia
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.
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
9. Otros temas
El editor (TinyMCE Advanced 3.2.4) Modo visual o Modo HTML
Editar desde WordAjustes:
google analytics Exportar un blog
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Editor TinyMCE
Plugins Activar
Ajustes Personalizar Tablas HTML
Copyright 2012 - Dario Roig Garcia
Word como editor
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Editar entrada y ver el HTML
Copyright 2012 - Dario Roig Garcia
Practica: Google Analytics
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
XML Sitemap
Activar plugin
Copyright 2012 - Dario Roig Garcia
Google Webmasters tools
Añadir sitio
Copyright 2012 - Dario Roig Garcia
Google Webmasters tools
Añadir SITEMAP
Copyright 2012 - Dario Roig Garcia
Google Webmasters tools
SITEMAP
Copyright 2012 - Dario Roig Garcia
Plugin HEADMETA
Verificar sitio
Editar página principal Añadir campo personalizado
Copyright 2012 - Dario Roig Garcia
Usuarios
Copyright 2012 - Dario Roig Garcia
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
Copyright 2012 - Dario Roig Garcia
Título del blog
Ajustes Generales
Copyright 2012 - Dario Roig Garcia
Plugins
Share This
Copyright 2012 - Dario Roig Garcia
Plugins
Slideshare
Copyright 2012 - Dario Roig Garcia