Curso de blogs_2012_3

SERVICIOS WEB 2.0: BLOGS CON WORDPRESS

Darío Roig GarcíaAnalista Programador Servicio de Informática de la UVdario.roig@uv.eshttp://www.uv.es/dariohttp://dario.blogs.uv.es

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

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/

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

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/

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)

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

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

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/

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

Cuentas

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

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

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

Cuentas

ACTIVAR

http://Tuusuario.blogs.uv.es

PARA LEER TU

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

Enlaces

Vínculos a blogs que leas habitualmente o que tengan relación con tu blog

Se muestran en el widget “Blogroll”

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

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.

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”

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,

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

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,

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

Mapas (I)

Entrada con un mapa de google

Opción A URL

Opción B HTML

Mapas (II)

GOOGLE MAPS

Mapas (III)

Activar plugin Google Maps embed

Mapas (IV)

GOOGLE MAPS

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

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.

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

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.

Blogs privados

Ajustes Privacidad

Título del blog

Ajustes Generales

Plugins

Curso de blogs_2012_3

Documents

Curso de Violin.pdf

CURSO DE TORÁ

CURSO DE HIPNOTERAPIA PROFESOR ORLANDO …libroesoterico.com/biblioteca/autores/HIPNOSIS/Curso De Hipnosis.pdf · hipnoterapia el arte de la sugestiÓn curso de hipnoterapia dictado

Curso de css

Curso de Prolog

Curso de ExtJs

CURSO DE MANTENIMIENTO DE RODAMIENTOS - …idre-sa.com/hosting/idre/productos/rodamientos/ZKL/PDF... · Alineación de ejes . CURSO DE MANTENIMIENTO . IDRE SA . CURSO DE MANTENIMIENTO

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ CURSO DE ...repositorio.roca.utfpr.edu.br/jspui/bitstream/1/... · 59f. Monografia (Trabalho de Conclusão de Curso) - Curso Superior

Curso de japones

folleto cursos 17 18 - copia - Archicompostela · Curso de Acadio Curso de Sumerio Curso de Hebreo Bíblico El curso, de sesiones quincenales de 90 minutos de duración, se centrará

Curso de Postgrado BIOGEOGRAFIA HISTORICA - …fcyt.uader.edu.ar/web/system/files/Programa Curso postgrado... · Curso de Posgrado BIOGEOGRAFIA ... Teoría de refugios ... aplicando

Mini-Curso 3 - Curso Avatar Básico de Voluntad

IQS School of Management...Jornada de portes obertes IQS, 25 d’abril de 2013 IQS School of Management Programa de estudios 1r curso 5º curso 4º curso 3r curso 2º curso 1 curso

UNIVERSIDADE FEDERAL DO CEARÁ CENTRO ... - Curso de … · Trabalho de conclusão de curso apresentado ao Curso de Zootecnia do Departamento de Zootecnia da Universidade Federal

CURSO DE ADAPTACIÓN EN MATERIAS BÁSICAS ELEMENTOS DE MATEMÁTICAS CURSO 2007-2008

Curso de Lodos.ppt

Curso de Word

Curso de Intouch

Conclusao de Curso

Curso de ingles