SlideShare una empresa de Scribd logo
Editor Descripción y análisis de funcionalidad del editor visual de Moodle Sigue el recorrido de estas transparencias con el editor HTML de Moodle a la vista
Editor HTML Las áreas donde se introduce texto suelen tener un editor HTML WYSIWIG: lo que ves es lo que obtienes Es muy similar a los procesadores de texto ofimáticos, pero lo que hace es crear texto en HTML sin necesidad de tener conocimientos al respecto
Navegadores y editor Este editor se despliega en un navegador Web Normalmente no planteará ninguna dificultad con los navegadores más habituales y actuales, IE, Firefox.
Detalle de la “Interface” del editor Tipo de fuente Tamaño de fuente Estilo Formato de texto Colores de fuente y fondo Listas y sangrías Alineación de texto Elementos varios: insertar línea horizontal, anclajes, enlaces, imágenes, emoticonos, tablas, caracteres especiales, buscar y reemplazar Hacer y rehacer Agrandar el editor. También aparecen una serie de iconos concretos para trabajar con tablas Editar en HTML Copiar, cortar, pegar, limpiar html de Word Sub y supraíndices
Elementos concretos: insertar tabla Cuando pulsas sobre el icono de  insertar tabla  esta ventana que se muestra para insertar tabla no necesita mucha explicación. Y aparece cuando pulsas el icono del editor que mostramos en el título de esta transparencia. Al pulsar sobre este icono se mostrará la barra de iconos para trabajar con las tablas
Editor con  la barra de botones para las tablas .  Y ventana de propiedades de tabla
Elementos concretos: insertar imagen Ventana que nos mostrará al pulsar sobre el icono de  insertar imagen . Lo más cómodo es subir la imagen a la plataforma. ¿Se te ocurre alguna otra forma de mostrar la imagen? Inténtalo
Elementos concretos: subir imagen El proceso para subir una imagen es sencillo, una vez desplegada esta ventana, pulsamos en  examinar  y buscamos en nuestro PC la imagen. La seleccionamos y, una vez que aparezca en la ventana la dirección donde está la imagen, pulsamos en el botón  subir
Elementos concretos: subir imagen En este ejemplo hemos subido una imagen que se llama “busqueda.png” y que también se previsualiza. Seguidamente la seleccionamos ( doble pulsación con el ratón ) y aparece su URL, donde se va a buscar la imagen para poder visualizarla. Rellenamos el  texto alterno,  pulsamos  OK  y ya está
Elementos concretos: subir imagen Aquí puedes modificar los valores predefinidos de la imagen que se toman por defecto, tamaño, alineación..
Practica Prueba a subir una imagen cualquiera como parte de un texto de un foro a tu curso
Elementos concretos: insertar un hiperenlace Podemos seleccionar un texto y vincular un enlace a ese texto El icono del editor a pulsar es  Al pulsarlo nos mostrará la siguiente ventana
Elementos concretos: insertar un hiperenlace Debemos poner la dirección ( URL ) a donde queremos que nos dirija al pulsar en el texto seleccionado “bajo” el que se encontrará el enlace que insertemos. En el  título  ponemos el texto que queremos que aparezca al pasar el ratón sobre el texto seleccionado. En  destino  seleccionamos el modo como queremos que se nos muestre.
Elementos concretos: insertar un hiperenlace Pulsando en el botón  buscar…  se muestra la ventana adyacente (gestor de ficheros de Moodle) lo que te permitirá establecer enlaces dentro del propio sitio-directorio (dentro de Moodle)
Elementos concretos: insertar una línea horizontal Pulsando sobre este icono sencillamente inserta una  línea horizontal
Elementos concretos: editar HTML Pulsando sobre este icono nos muestra la  edición en HTML , volviendo a pulsar volvemos al modo “normal”. Esto te permite editarlo manualmente
Elementos concretos: caracteres especiales Pulsando sobre este icono nos muestra esta ventana con una serie de  caracteres “especiales”,  los que estas usando en el navegador
Elementos concretos: emoticonos No creo que necesiten explicación, pero no olvides que en conversaciones mediadas por ordenador pueden ser un elemento comunicativo de primer orden aclarando párrafos ambiguos
Elementos concretos: limpiar formato de Word El mismo texto, la misma imagen, antes y después de pulsar el botón  limpiar word HTML. Usar la opción de copiar y pegar. Un documento generado por un procesador de texto (Write, Word, etc.) puede tener código HTML muy particular, es recomendable limpiar el código con la opción de la barra de herramientas para ajustarnos al estándar (W3C). Y después darle el formato que deseemos si algo ha cambiado.
Elementos concretos: los colores Los dos botones nos permiten establecer el color del texto o el color del fondo. Se despliega una ventana con una paleta de colores. Además de visualmente los colores los presenta en código html:  #330000
Elementos concretos: cambiar dirección del texto Permiten voltear el texto y cambiar el ajuste del texto a la derecha
Reflexión Es una herramienta muy sencilla y que evidentemente se acaba usando con profusión. Hemos hecho un repaso de los iconos y usos que consideramos más esenciales. Aun suponiendo que no hubieras usado nunca un procesador de texto tardarías bien poco en utilizar adecuadamente la funciones que no hemos detallado por obvias o supuestamente conocidas. Alguna función como el corrector ortográfico pueden no estar disponibles si el administrador no lo ha instalado. Si necesitas más ayuda la puedes  encontrar aquí  y aunque un poco obsoleto también  aquí
Método para trabajar con estas transparencias:   debes seguir una lectura secuencial de las transparencias salvo que se indique (ejecute) lo contrario o se muestre un enlace a seguir (texto en azul) que sea de tu interés. Es importante que según vayas realizando la lectura compruebes en tu propio curso cada una de las “situaciones” descritas en las transparencias, ejecútalas si es posible. (trabaja con dos ventanas abiertas simultáneamente, tu navegador y el ppt).   Es posible que cada cierto tiempo se te pida que realices un ejercicio concreto, que aunque no es objeto de control es recomendable seguir pues ayudará en tu aprendizaje. Si tienes alguna duda que te impide seguir, y no puede esperar su resolución por un método asincrónico, no dudes en contactar mediante Skype o similar .

Más contenido relacionado

PPT
Moodle2 editor
PDF
Dando vida-evas
PDF
7 crear contenidos- el editor de moodle
PDF
Manual de rutinas informaticas
PPTX
Editor del Moodle
PPS
Manual Usuario Wordpress Administracin Bsico 1234035881711306 1
DOC
Tutorial ejercicio 1
Moodle2 editor
Dando vida-evas
7 crear contenidos- el editor de moodle
Manual de rutinas informaticas
Editor del Moodle
Manual Usuario Wordpress Administracin Bsico 1234035881711306 1
Tutorial ejercicio 1

La actualidad más candente (11)

ODP
Edición general de entradas en Wordpress
PPTX
PPTX
PPT
Dreamweaver
PPTX
Creacion de un blog en un blogger mediante un servidor jimdo
PPTX
PPTX
Tt erezaa
PPT
PPTX
Microsoft Frontpage
PPTX
PPTX
Maquetacion de pagina
Edición general de entradas en Wordpress
Dreamweaver
Creacion de un blog en un blogger mediante un servidor jimdo
Tt erezaa
Microsoft Frontpage
Maquetacion de pagina
Publicidad

Destacado (20)

PDF
Temblores nocturnos
PPS
Suegradigna
ODP
Produccion 4 bl
PPT
Unidad
PPS
Feliz cumplenos
PPTX
isummitloxa
PPT
ESTADÍSTICA DESCRIPTIVA
PDF
Memoria Edegel 2009
PPT
Gusanos de seda
PPTX
Empaque
PPTX
Conectores de oraciones
PPT
Picasa Ppt Paloma(3)
PPT
Diapositivas Finales De 5tre
PDF
La gestion del tiempo y metodologiaGTD
PDF
Entrevista a Laura Punente, Marketing Manager de Starbucks España
PPT
Postales y calcos institucionales para promover los derechos humanos
Temblores nocturnos
Suegradigna
Produccion 4 bl
Unidad
Feliz cumplenos
isummitloxa
ESTADÍSTICA DESCRIPTIVA
Memoria Edegel 2009
Gusanos de seda
Empaque
Conectores de oraciones
Picasa Ppt Paloma(3)
Diapositivas Finales De 5tre
La gestion del tiempo y metodologiaGTD
Entrevista a Laura Punente, Marketing Manager de Starbucks España
Postales y calcos institucionales para promover los derechos humanos
Publicidad

Similar a Moodle2 Editor (20)

PDF
Crear contenidos en MOODLE
DOCX
Trabajo practico nº 3
ODP
Publicación de recursos en un aula virtual con Moodle
PDF
Blog 2b taller
PPTX
DREAMWEAVER
DOCX
Alexander y diego paginas de html
DOC
Trabajo practico dos ASTRID Y BUBI
PPTX
Presentación1
DOCX
Practica 1
DOCX
Microsoft office-word-2010
PPTX
Presentación1
PPT
Artículos en Jeroweb
DOCX
Carla barrera
PPTX
La Nueva Interfaz de Weebly
DOCX
Trabajopractico1
PPTX
Aula virtual en Papás 2.0: de eXe a Moodle
PPTX
Frontpage3
PDF
Herramientas para el desarrollo de aplicaciones SharePoint
PPTX
Guia de autoaprendizaje
PPS
Como Crear Paginas Web
Crear contenidos en MOODLE
Trabajo practico nº 3
Publicación de recursos en un aula virtual con Moodle
Blog 2b taller
DREAMWEAVER
Alexander y diego paginas de html
Trabajo practico dos ASTRID Y BUBI
Presentación1
Practica 1
Microsoft office-word-2010
Presentación1
Artículos en Jeroweb
Carla barrera
La Nueva Interfaz de Weebly
Trabajopractico1
Aula virtual en Papás 2.0: de eXe a Moodle
Frontpage3
Herramientas para el desarrollo de aplicaciones SharePoint
Guia de autoaprendizaje
Como Crear Paginas Web

Más de Santa Maria Goretti (12)

PPT
Lc Dip S1 Curricular
PPT
Presentacion Secuencia Didactica Mapa
PPT
Ana Sofia CastañO Hurtado
PPT
IntroduccióN A Pc Fi Pc Lc
PPT
SesióN 1 TeóRico ( F Inal)
PPT
Moodle3 Bases De Datos Glosarios Y Wikis
PPT
Moodle2 Bloquesb
PPT
Moodle3 Cargar Contenidos
PPT
Moodle3 Actividades Preguntas3
PPT
Moodle1 Apartados
PPTX
Diapo, Slide
PPS
Vida De Santa Maria Goretti
Lc Dip S1 Curricular
Presentacion Secuencia Didactica Mapa
Ana Sofia CastañO Hurtado
IntroduccióN A Pc Fi Pc Lc
SesióN 1 TeóRico ( F Inal)
Moodle3 Bases De Datos Glosarios Y Wikis
Moodle2 Bloquesb
Moodle3 Cargar Contenidos
Moodle3 Actividades Preguntas3
Moodle1 Apartados
Diapo, Slide
Vida De Santa Maria Goretti

Último (20)

PDF
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
PPTX
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
PDF
Estrategia de apoyo tecnología grado 9-3
PDF
taller de informática - LEY DE OHM
PPTX
REDES INFORMATICAS REDES INFORMATICAS.pptx
PDF
Estrategia de apoyo tecnología miguel angel solis
PPTX
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
PDF
Influencia-del-uso-de-redes-sociales.pdf
PPT
Que son las redes de computadores y sus partes
PPTX
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
PPTX
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
PDF
Diapositiva proyecto de vida, materia catedra
PDF
Calidad desde el Docente y la mejora continua .pdf
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PDF
CyberOps Associate - Cisco Networking Academy
PPTX
Power Point Nicolás Carrasco (disertación Roblox).pptx
PDF
SAP Transportation Management para LSP, TM140 Col18
PDF
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
PDF
Plantilla para Diseño de Narrativas Transmedia.pdf
PPTX
Sesion 1 de microsoft power point - Clase 1
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
Estrategia de apoyo tecnología grado 9-3
taller de informática - LEY DE OHM
REDES INFORMATICAS REDES INFORMATICAS.pptx
Estrategia de apoyo tecnología miguel angel solis
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
Influencia-del-uso-de-redes-sociales.pdf
Que son las redes de computadores y sus partes
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
Diapositiva proyecto de vida, materia catedra
Calidad desde el Docente y la mejora continua .pdf
historia_web de la creacion de un navegador_presentacion.pptx
CyberOps Associate - Cisco Networking Academy
Power Point Nicolás Carrasco (disertación Roblox).pptx
SAP Transportation Management para LSP, TM140 Col18
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
Plantilla para Diseño de Narrativas Transmedia.pdf
Sesion 1 de microsoft power point - Clase 1

Moodle2 Editor

  • 1. Editor Descripción y análisis de funcionalidad del editor visual de Moodle Sigue el recorrido de estas transparencias con el editor HTML de Moodle a la vista
  • 2. Editor HTML Las áreas donde se introduce texto suelen tener un editor HTML WYSIWIG: lo que ves es lo que obtienes Es muy similar a los procesadores de texto ofimáticos, pero lo que hace es crear texto en HTML sin necesidad de tener conocimientos al respecto
  • 3. Navegadores y editor Este editor se despliega en un navegador Web Normalmente no planteará ninguna dificultad con los navegadores más habituales y actuales, IE, Firefox.
  • 4. Detalle de la “Interface” del editor Tipo de fuente Tamaño de fuente Estilo Formato de texto Colores de fuente y fondo Listas y sangrías Alineación de texto Elementos varios: insertar línea horizontal, anclajes, enlaces, imágenes, emoticonos, tablas, caracteres especiales, buscar y reemplazar Hacer y rehacer Agrandar el editor. También aparecen una serie de iconos concretos para trabajar con tablas Editar en HTML Copiar, cortar, pegar, limpiar html de Word Sub y supraíndices
  • 5. Elementos concretos: insertar tabla Cuando pulsas sobre el icono de insertar tabla esta ventana que se muestra para insertar tabla no necesita mucha explicación. Y aparece cuando pulsas el icono del editor que mostramos en el título de esta transparencia. Al pulsar sobre este icono se mostrará la barra de iconos para trabajar con las tablas
  • 6. Editor con la barra de botones para las tablas . Y ventana de propiedades de tabla
  • 7. Elementos concretos: insertar imagen Ventana que nos mostrará al pulsar sobre el icono de insertar imagen . Lo más cómodo es subir la imagen a la plataforma. ¿Se te ocurre alguna otra forma de mostrar la imagen? Inténtalo
  • 8. Elementos concretos: subir imagen El proceso para subir una imagen es sencillo, una vez desplegada esta ventana, pulsamos en examinar y buscamos en nuestro PC la imagen. La seleccionamos y, una vez que aparezca en la ventana la dirección donde está la imagen, pulsamos en el botón subir
  • 9. Elementos concretos: subir imagen En este ejemplo hemos subido una imagen que se llama “busqueda.png” y que también se previsualiza. Seguidamente la seleccionamos ( doble pulsación con el ratón ) y aparece su URL, donde se va a buscar la imagen para poder visualizarla. Rellenamos el texto alterno, pulsamos OK y ya está
  • 10. Elementos concretos: subir imagen Aquí puedes modificar los valores predefinidos de la imagen que se toman por defecto, tamaño, alineación..
  • 11. Practica Prueba a subir una imagen cualquiera como parte de un texto de un foro a tu curso
  • 12. Elementos concretos: insertar un hiperenlace Podemos seleccionar un texto y vincular un enlace a ese texto El icono del editor a pulsar es Al pulsarlo nos mostrará la siguiente ventana
  • 13. Elementos concretos: insertar un hiperenlace Debemos poner la dirección ( URL ) a donde queremos que nos dirija al pulsar en el texto seleccionado “bajo” el que se encontrará el enlace que insertemos. En el título ponemos el texto que queremos que aparezca al pasar el ratón sobre el texto seleccionado. En destino seleccionamos el modo como queremos que se nos muestre.
  • 14. Elementos concretos: insertar un hiperenlace Pulsando en el botón buscar… se muestra la ventana adyacente (gestor de ficheros de Moodle) lo que te permitirá establecer enlaces dentro del propio sitio-directorio (dentro de Moodle)
  • 15. Elementos concretos: insertar una línea horizontal Pulsando sobre este icono sencillamente inserta una línea horizontal
  • 16. Elementos concretos: editar HTML Pulsando sobre este icono nos muestra la edición en HTML , volviendo a pulsar volvemos al modo “normal”. Esto te permite editarlo manualmente
  • 17. Elementos concretos: caracteres especiales Pulsando sobre este icono nos muestra esta ventana con una serie de caracteres “especiales”, los que estas usando en el navegador
  • 18. Elementos concretos: emoticonos No creo que necesiten explicación, pero no olvides que en conversaciones mediadas por ordenador pueden ser un elemento comunicativo de primer orden aclarando párrafos ambiguos
  • 19. Elementos concretos: limpiar formato de Word El mismo texto, la misma imagen, antes y después de pulsar el botón limpiar word HTML. Usar la opción de copiar y pegar. Un documento generado por un procesador de texto (Write, Word, etc.) puede tener código HTML muy particular, es recomendable limpiar el código con la opción de la barra de herramientas para ajustarnos al estándar (W3C). Y después darle el formato que deseemos si algo ha cambiado.
  • 20. Elementos concretos: los colores Los dos botones nos permiten establecer el color del texto o el color del fondo. Se despliega una ventana con una paleta de colores. Además de visualmente los colores los presenta en código html: #330000
  • 21. Elementos concretos: cambiar dirección del texto Permiten voltear el texto y cambiar el ajuste del texto a la derecha
  • 22. Reflexión Es una herramienta muy sencilla y que evidentemente se acaba usando con profusión. Hemos hecho un repaso de los iconos y usos que consideramos más esenciales. Aun suponiendo que no hubieras usado nunca un procesador de texto tardarías bien poco en utilizar adecuadamente la funciones que no hemos detallado por obvias o supuestamente conocidas. Alguna función como el corrector ortográfico pueden no estar disponibles si el administrador no lo ha instalado. Si necesitas más ayuda la puedes encontrar aquí y aunque un poco obsoleto también aquí
  • 23. Método para trabajar con estas transparencias: debes seguir una lectura secuencial de las transparencias salvo que se indique (ejecute) lo contrario o se muestre un enlace a seguir (texto en azul) que sea de tu interés. Es importante que según vayas realizando la lectura compruebes en tu propio curso cada una de las “situaciones” descritas en las transparencias, ejecútalas si es posible. (trabaja con dos ventanas abiertas simultáneamente, tu navegador y el ppt). Es posible que cada cierto tiempo se te pida que realices un ejercicio concreto, que aunque no es objeto de control es recomendable seguir pues ayudará en tu aprendizaje. Si tienes alguna duda que te impide seguir, y no puede esperar su resolución por un método asincrónico, no dudes en contactar mediante Skype o similar .