tabla de contenido - orundesorundes.com.ar/userfiles/files/tutoriales/manual de usuarios...
TRANSCRIPT
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 1
Tabla de contenido Tabla de figuras ................................................................................................................................... 2
Tabla de Ilustraciones.......................................................................................................................... 2
CKEDITOR 3.6.1. .................................................................................................................................. 3
El procesador de textos de la web .................................................................................................. 3
MENÚ .................................................................................................................................................. 3
Fuente HTML. Grabar, nueva página, vista previa, imprimir, plantillas .......................................... 5
Fuente HTML ............................................................................................................................... 5
Grabar, nueva página, vista previa, imprimir .............................................................................. 5
Plantillas ...................................................................................................................................... 6
Cortar, copiar, pegar. Deshacer, rehacer .................................................................................... 6
Pegar como texto plano y Pegar desde Word ............................................................................. 7
Buscar, remplazar, seleccionar todo, ortografía, comprobar ortografía mientras escribe ........ 7
WebSpellChecker 2.7.1 ................................................................................................................... 8
Negrita, cursiva, subrayado, tachado, subíndice, superíndice. ................................................. 10
Eliminar formato ....................................................................................................................... 10
Numeración, viñeta. .................................................................................................................. 10
Disminuir sangría, aumentar sangría. ....................................................................................... 10
Cita, contenedor div. ................................................................................................................. 10
Alinear a la izquierda, centro, alinear a la derecha, justificado. ............................................... 10
Dirección del texto de izquierda a derecha, dirección del texto de derecha a izquierda. ........ 11
Insertar/Editar Vínculo, eliminar vínculo, referencia. ............................................................... 11
CKFINDER 2.2.1 .............................................................................................................................. 12
Imagen, flash ............................................................................................................................. 13
Tabla .......................................................................................................................................... 15
Insertar línea horizontal, emoticones, símbolos, insertar salto de página, iframe................... 15
Estilo, formato, fuente, tamaño ................................................................................................ 16
Color de texto, color de fondo. Maximizar, mostrar bloques, acerca de CKeditor. ................. 17
EJERCICIO PRÁCTICO ......................................................................................................................... 18
Creando una página: empleando tabla, imagen y texto ............................................................... 18
Insertando una tabla ................................................................................................................. 18
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 2
Insertando una imagen ............................................................................................................. 20
Aplicando estilos ....................................................................................................................... 24
Tabla de figuras Figura 1. Diseño ejemplo .................................................................................................................................... 3
Figura 2. Vista fuente HTML ............................................................................................................................... 5
Figura 3. Plantillas............................................................................................................................................... 6
Figura 4. Pegar texto .......................................................................................................................................... 7
Figura 5. Buscar, Buscar y Reemplazar ............................................................................................................... 7
Figura 6. Comprobar Ortografía ......................................................................................................................... 8
Figura 7. Acerca de WebSpellChecker ................................................................................................................ 8
Figura 8. Opciones WebSpellChecker ................................................................................................................. 9
Figura 9. Idiomas WebSpellChecker ................................................................................................................... 9
Figura 10. Diccionarios WebSpellChecker .......................................................................................................... 9
Figura 11. Vínculo ............................................................................................................................................. 12
Figura 12. CKFinder........................................................................................................................................... 12
Figura 13. Propiedades de Referencias ............................................................................................................ 13
Figura 14. Insertar Imagen ............................................................................................................................... 13
Figura 15. Propiedades de Flash ....................................................................................................................... 14
Figura 16. Propiedades de Tabla ...................................................................................................................... 15
Figura 17. Emoticones y caracteres especiales ................................................................................................ 16
Figura 18. Propiedades de IFrame .................................................................................................................... 16
Tabla de Ilustraciones Ilustración 1. Insertar tabla .............................................................................................................................. 18
Ilustración 2. Propiedades de Tabla ................................................................................................................. 18
Ilustración 3. Tabla insertada ........................................................................................................................... 19
Ilustración 4. Combinar celdas ......................................................................................................................... 20
Ilustración 5. Resultado de combinar celdas .................................................................................................... 20
Ilustración 6. Insertar Imágen........................................................................................................................... 20
Ilustración 7. Propiedades de Imagen .............................................................................................................. 21
Ilustración 8. Imágenes en CKFinder ................................................................................................................ 21
Ilustración 9. Configuración de imagen en Propiedades de Imagen ................................................................ 22
Ilustración 10. Imagen insertada ...................................................................................................................... 22
Ilustración 11. Primer resultado parcial ........................................................................................................... 23
Ilustración 12. Menú Propiedades de celda ..................................................................................................... 23
Ilustración 13. Propiedades de celda................................................................................................................ 24
Ilustración 14. Aplicando estilos ....................................................................................................................... 25
Ilustración 15. Aplicando Estilo Encabezado .................................................................................................... 25
Ilustración 16. Fuente HTML ............................................................................................................................ 26
Ilustración 17. Configurar "class" ..................................................................................................................... 27
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 3
CKEDITOR 3.6.1.
El procesador de textos de la web Diseño ejemplo
Figura 1. Diseño ejemplo
MENÚ
Fuente HTML. Grabar, nueva página, vista previa, imprimir, plantillas.
Cortar, copiar, pegar, pegar como texto plano, pegar desde Word. Deshacer, rehacer
Buscar, remplazar, seleccionar todo, ortografía, comprobar ortografía mientras escribe
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 4
Formulario, casilla de verificación, botones de radio, campo de texto, área de texto, campo de
selección, botón, botón imagen, campo oculto.
Negrita, cursiva, subrayado, tachado, subíndice, superíndice, eliminar formato.
Numeración, viñeta, disminuir sangría, aumentar sangría, cita, contenedor div. Alinear a la
izquierda, centro, alinear a la derecha, justificado. Dirección del texto de izquierda a derecha,
dirección del texto de derecha a izquierda.
Insertar/Editar Vínculo, eliminar vínculo, referencia.
Imagen, flash, tabla, insertar línea horizontal, emoticones, símbolos, insertar salto de página,
iframe
Estilo, formato, fuente, tamaño
Color de texto, color de fondo. Maximizar, mostrar bloques, acerca de Ckeditor.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 5
Fuente HTML. Grabar, nueva página, vista previa, imprimir, plantillas
Fuente HTML
Esta opción nos muestra el diseño ya creado en formato puro HTML. Nos permite trabajar desde
directamente desde el código fuente.
Vista de la fuente HTML para el diseño ejemplo:
Figura 2. Vista fuente HTML
Grabar, nueva página, vista previa, imprimir
Grabar es el equivalente al realizar un submit en el formulario. Dicho de otro forma es igual a
presionar el botón Aceptar, Nuevo o Modificar que el programador a establecido para realizar la
acción del proceso.
Nueva página es crear una nueva hoja de trabajo, eliminando la actual. Utilice el botón Deshacer
si quiere recuperar el trabajo que estaba realizando o la combinación de teclas CONTROL + Z.
Vista previa nos muestra como nos queda el diseño ya conformado. Puede que difiera luego en la
vista que el programador allá definido.
Imprimir nos prepara el documento listo para imprimir.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 6
Plantillas
Utilice las plantillas predeterminadas para hacer desarrollos en forma más sencillo. Tres plantillas
disponibles.
Sugerencia, utilice las plantillas comenzando por un documento en blanco, se reemplazará el
actual o bien no funcionará como lo desee.
Figura 3. Plantillas
Cortar, copiar, pegar. Deshacer, rehacer
Utilice las herramientas cortar, copiar y pegar para procesar bloques de textos.
Utilice las herramientas Deshacer para volver a un punto anterior en el proceso de texto.
Asimismo utilice Rehacer para volver a un punto posterior
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 7
Pegar como texto plano y Pegar desde Word
Figura 4. Pegar texto
En ambas ventana usted podrá pegar el mismo texto.
La diferencia entre ambos es que el texto plano trabaja SIN formatos y el pegar CON formatos.
Recuerde: formato incluye colores, tipografías o fuentes, estilos, etc. que provienen al importarse
el texto.
Se sugiere la utilización del pegado con texto plano, ya que el diseñador web ha escrito las reglas
de diseño CSS para la visualización del texto.
Buscar, remplazar, seleccionar todo, ortografía, comprobar ortografía mientras escribe
Utilice Buscar o Remplazar para localizar texto dentro del diseño.
Figura 5. Buscar, Buscar y Reemplazar
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 8
Utilice Ortografía para comprobar errores ortográficos dentro del texto.
Figura 6. Comprobar Ortografía
Para comprobar errores ortográficos mientras escribe, primero debe activar dicha opción. El
activar la opción el ckeditor nos provee una herramienta llamada WebSpellChecker (versión 2.7.1)
WebSpellChecker 2.7.1 El WebSpellChecker nos ayuda a comprobar la ortografía mientras se escribe. Dicha versión
cuenta con cuatro pestañas: Opciones, Idiomas, Diccionarios, Acerca de
Figura 7. Acerca de WebSpellChecker
En la pestaña Opciones, encontramos estas cuatro opciones disponibles en inglés. Ellas son:
Ignorar todas las palabras en mayúsculas
Ignorar nombres de dominio
Ignorar palabras que mezclan mayúsculas y minúsculas
Ignorar palabras que contienen números.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 9
Figura 8. Opciones WebSpellChecker
En la pestaña Idiomas se podrá seleccionar el idioma con el cual se comprueba la ortografía.
Figura 9. Idiomas WebSpellChecker
En la pestaña Diccionarios se podrá crear o restaurar un diccionario a partir de un archivo.
Figura 10. Diccionarios WebSpellChecker
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 10
Negrita, cursiva, subrayado, tachado, subíndice, superíndice.
Destaque el texto con negrita, cursiva o subrayado.
Utilice subíndice y superíndice para cuando lo necesite para números o formulas matemáticas.
Tache el texto cuando crea que sea necesario.
Eliminar formato
Dicha herramienta es muy útil para eliminar todos los formatos del texto. Cuando importe texto
copiado (como por ejemplo Word), se observan diferentes formatos (fuentes, tamaños, estilos,
colores) puede eliminar todo aquello para que dicho formato quede limpio.
Numeración, viñeta.
Utilice Numeración o Viñeta para realizar una enumeración de ítems.
Disminuir sangría, aumentar sangría.
Utilice disminuir sangría o aumentar sangría para identar el texto.
Cita, contenedor div.
Utilice cita para realizar una referencia dentro del texto.
Utilice contenedor div para aplicar propiedades exclusivas a cada capa. Para utilizar div se
requiere de altos conocimientos en administración de contenidos web, como también código
fuente HTML
Alinear a la izquierda, centro, alinear a la derecha, justificado.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 11
Utilice las diferentes herramientas para alinear el texto o justificarlo.
Dirección del texto de izquierda a derecha, dirección del texto de derecha a izquierda.
Utilice estas herramientas para cambiar la orientación en que se escribe el texto.
Insertar/Editar Vínculo, eliminar vínculo, referencia.
Utilice Insertar/Editar vínculo para realizar un link o vínculo dentro del texto. Podrá realizar un
vínculo interno (dentro del sitio) o externo (otro sitio en internet).
Utilice eliminar vínculos para quitar todo aquel enlace que ya no utilice.
Links internos: podrá copiar y pegar un vínculo dentro de su propio sitio teniendo solamente el
enlace. En enlace o URL puede ser un HTML, un archivo o documento para generar una descarga.
Para realizar un enlace para archivos de descarga, utilice CKFINDER versión DEMO haciendo clic en
Ver Servidor
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 12
CKFINDER 2.2.1 Para obtener la guía de usuario completa diríjase a
http://www.ckeditor.com/apps/ckfinder/2.2/help/es/index.html
Figura 11. Vínculo
Figura 12. CKFinder
A través del CKFinder usted podrá subir a su servidor imágenes, archivos de texto, archivos
comprimidos, archivos de animación flash que le permitan luego mostrar en el diseño de su web.
Utilice Referencias cuando necesite hacer un link o enlace sobre el mismo texto. Cada referencia
dentro del texto deberá tener un nombre único. Luego puede Insertar/Editar Vínculo y hacer una
llamada a la referencia creada.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 13
Figura 13. Propiedades de Referencias
Imagen, flash
Utilice Imagen o Flash para incrustar una imagen o flash en el diseño. Podrá utilizar los links
internos o externos. Para enlaces internos utilice el aplicativo CKFINDER versión DEMO haciendo
clic en Ver Servidor.
Figura 14. Insertar Imagen
En la pestaña Información de Imagen (imagen) o General (flash) se podrá pre visualizar el
contenido.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 14
Figura 15. Propiedades de Flash
Propiedades:
URL: ruta o enlace donde se encuentra la imagen. Para una imagen en su servidor, utilice
la opción Ver Servidor (CKFinder).
Texto Alternativo: Escriba una breve descripción del contenido de la imagen, para que
dicha imagen contenga información de accesibilidad.
Anchura y Altura: es el tamaño en pixeles de la imagen. Por defecto las medidas son
proporcionales entre sí. Desactive el candado si quiere que las medidas sean
independientes. Puede utilizar la flecha circular para volver al tamaño original.
Borde: es el tamaño en píxeles del borde de la imagen. Para que no aparezcan bordes
cuando la imagen está enlazada coloque valor 0.
Espacio horizontal y espacio vertical: utilice esta función para despegar la imagen del
texto u otros elementos en el diseño. La medida es en píxeles.
Alineación: alinea la imagen a la izquierda o a la derecha. El no seleccionar alineación el
texto se ubicará inmediatamente por la línea base de dicha imagen.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 15
Tabla
Utilice Tabla para incrustar un elemento tabla en el diseño.
Figura 16. Propiedades de Tabla
Propiedades de Tabla:
Filas y columnas: indica la cantidad de filas y columnas de la tabla
Anchura y altura: indica los tamaños por defecto en píxeles de la tabla. Puede utilizar
porcentajes. Dejar en blanco estos valores significa que la tabla se autoajusta al contenido.
Si colocamos 100 en anchura, estamos diciendo que sea de 100 píxeles de ancho, en
cambio si colocamos 100% le estamos diciendo que tome el total del ancho de la hoja.
Espacios entre celdas y espacio interior: indica en píxeles los espacios entre celdas y
contenidos.
Tamaño de borde: indica en píxeles el tamaño del borde. En un borde 0 la tabla es
transparente.
Alineación: alinea a la izquierda, derecha o centro de la hoja.
Insertar línea horizontal, emoticones, símbolos, insertar salto de página, iframe
Insertar línea horizontal: recurso para realizar una línea de división.
Emoticones y caracteres especiales: inserte emoticones para expresar gestos, sentimientos o
reacciones. Use los caracteres especiales cuando no pueda resolverlo desde el teclado.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 16
Figura 17. Emoticones y caracteres especiales
IFrame: utilice para insertar un marco dentro del diseño. Utilícelo en caso de tener altos
conocimientos en administración de contenidos y fuente HTML
Figura 18. Propiedades de IFrame
Estilo, formato, fuente, tamaño
Estilo: el estilo se utiliza para formatear el texto con aquellos que ya están definidos.
Formato: el formato se utiliza para establecer diferentes jerarquías dentro del texto.
Fuente: conocido también como tipografía.
Tamaño: es el tamaño del texto.
Importante: Muchas veces establecemos tipografías, tamaños o estilos, pero puede que cuando
visualizamos en la web no aparece como en el editor, ya que el diseñador ha definido todos estos
parámetros desde la hoja de estilos (css).
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 17
Color de texto, color de fondo. Maximizar, mostrar bloques, acerca de CKeditor.
Color de texto: seleccione entre los colores disponibles para formatear el texto.
Color de fondo: coloca un color de los disponibles en el fondo del texto.
Maximizar: maximice la ventana para ampliar el diseño.
Mostrar bloques: muestra todos los bloques en el texto (definidos por la etiqueta <p>)
Acerca de Ckeditor: Muestra la versión, guía de usuario y licencia.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 18
EJERCICIO PRÁCTICO
Creando una página: empleando tabla, imagen y texto Para crear una página web, podemos utilizar los siguientes elementos: tablas, imágenes y texto.
Insertando una tabla
En un primer paso agregamos una tabla como muestra la siguiente ilustración:
Ilustración 1. Insertar tabla
En la siguiente imagen observamos la ventana emergente, la cual nos muestra las Propiedades de Tabla.
Ilustración 2. Propiedades de Tabla
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 19
Las propiedades que necesitamos:
Filas y Columnas: cantidad necesarias.
Anchura: 100 porcentaje (no pixel)
Tamaño de borde: 0
Espacio entre Celdas: 5
Espacio interior: 5
Alineación: <No establecido>, o en su defecto Centrado (no nos importa ya que la tabla ocupa el 100% de la hoja, definido en la propiedad “Anchura”).
Dando el Aceptar, el resultado sería: (nombramos virtualmente a las celdas para referirnos más adelante a ellas)
Ilustración 3. Tabla insertada
Ahora procedamos a armar la página incorporando texto y una imagen.
En la celda A1 colocaremos la imagen.
En la celda B1 un texto a modo de introducción.
En la celda A2 y B2 haremos una combinación de celdas para incorporar un texto informativo.
Para realizar la combinación de celdas, nos ubicamos en la celda A2, hacemos clic derecho y nos mostrará el menú contextual como se muestra en la siguiente imagen:
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 20
Ilustración 4. Combinar celdas
Elegimos entonces la opción “Combinar a la derecha”. El resultado sería como se observa en la siguiente imagen:
Ilustración 5. Resultado de combinar celdas
Insertando una imagen
En la celda A1 hemos de colocar la imagen, para ello hacemos clic en el botón que muestra la siguiente figura:
Ilustración 6. Insertar Imágen
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 21
Y nos muestra la siguiente ventana emergente
Ilustración 7. Propiedades de Imagen
Luego haremos clic en el botón “Ver Servidor”, el que nos abrirá otra ventana emergente con todas las imágenes que tenemos disponibles para ser utilizadas. De no estar la imagen, la podremos Enviar al Servidor (Añadir) para ser utilizada.
Ilustración 8. Imágenes en CKFinder
Aquí vemos las imágenes disponibles, ellas podrán ser utilizadas tantas veces como las necesitemos. Haciendo un simple clic volvemos a la ventana “Propiedades de Imagen”.
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 22
Aquí tenemos ciertos atributos: Anchura, Altura, Borde, Espacio Horizontal, Espacio Vertical, Alineación. De ellos no tocaremos nada, solamente si queremos cambiar el tamaño.
Ilustración 9. Configuración de imagen en Propiedades de Imagen
En la siguiente imagen vemos como se ha incorporado “Mouse.jpg” a la tabla en la celda A1
Ilustración 10. Imagen insertada
Ahora en la celda B1 hemos de escribir un título, puede ser también un texto corto, o como se desee. En las celdas combinadas escribiremos el texto más detallado. En la siguiente figura vemos como queda el resultado final:
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 23
Ilustración 11. Primer resultado parcial
Como vemos ya ha tomado forma lo que sería la página web.
Ahora bien, podemos mejorar el encabezado, ya que el título está muy separado de la imagen y para mejorar visualmente esta parte nos adentraremos en las propiedades de las celdas.
Para el ejemplo nos posicionaremos en la celda del título (B1), hacemos clic derecho y nos aparecerá el siguiente menú contextual:
Ilustración 12. Menú Propiedades de celda
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 24
En la siguiente imagen vemos la ventana emergente “Propiedades de Celda”:
Ilustración 13. Propiedades de celda
Aquí en el atributo Anchura, le colocamos el valor “70%” para nuestro ejemplo. Tenemos otros atributos, tales como Alineación Horizontal y Vertical que nos servirán para ubicar el contenido dentro de la celda. Le damos OK
Al aplicarle una Anchura del 70%, obtenemos que del 100% que tiene la tabla, la celda A1 quede con un 30% y la celda B1 con un 70%.
IMPORTANTE: Todo estos pasos se ahorran si a la imagen le colocamos alineación izquierda, pero
el ejemplo está hecho para mostrar diferentes alternativas
Aplicando estilos
Aplicar estilos es muy importante, ya que la página web ha de tomar el estilo prediseñado por el
diseñador del sitio web. La no aplicación de estilos genera que cada página contenga diferente
tipografía, tamaños de letras, colores distintos; generando un caos a nivel visual. Por eso es muy
importante hacer el siguiente paso:
Hasta aquí hemos llegado armando una tabla, modificando algunas propiedades, incorporando
imagen y texto. En la siguiente figura vemos el resultado del trabajo hecho:
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 25
Ilustración 14. Aplicando estilos
Primer paso: aplicando estilo al título
Para el ejemplo: ¿A quién estás confiando actualmente el cuidado de los tuyos?, deberemos aplicarle el
estilo para que se resalte. Para ello seleccionaremos el texto que será el título, y en la opción
“Formato” elegimos la opción “Encabezado 2”, ya que está es ideal para la fuente que estamos
utilizando.
Ilustración 15. Aplicando Estilo Encabezado
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 26
Segundo paso: aplicando estilo a la tabla
Es muy importante, ya que la fuente (tipografía) se adecuará al resto de las páginas. Entonces al
hacer este paso unificamos criterios con el resto de las web.
Para aplicar el estilo, hacemos clic en el botón “Fuente HTML”, que simplemente es el código de
marcación web de la página que hemos diseñado.
Ilustración 16. Fuente HTML
En la primera línea tenemos:
<table border="0" cellspacing="5" cellpadding="5" width="100%" align="left">
A esta línea le deberemos agregar el siguiente atributo: class=”tablapagina”, para que finalmente
nos quede conformado así:
<table border="0" cellspacing="5" cellpadding="5" width="100%" align="left" class=”tablapagina”>
Lo que se refleja en la siguiente figura:
Guía del Usuario del Ckeditor 3.6.1.
Abril de 2012 27
Ilustración 17. Configurar "class"
Realizado los dos pasos para aplicar estilo, estamos en condiciones de dar el Ok, haciendo clic en
el botón “Modificar”.
No es necesario salir del código HTML, pero si se desea ver nuevamente la página, hacemos clic en
“Fuente HTML”.
IMPORTANTE: para el ejemplo tablapagina es un estilo definido por el programador, el cual debe
documentar para que pueda ser utilizada por el administrador de contenidos.