tabla de contenido - orundesorundes.com.ar/userfiles/files/tutoriales/manual de usuarios...

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


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


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


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.


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.


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


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


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.


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


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.


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


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.

http://www.ckeditor.com/apps/ckfinder/2.2/help/es/index.html


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.


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.


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.


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).


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.


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


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:


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


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”.


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:


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


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:


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


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:


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.

tabla de contenido - orundesorundes.com.ar/userfiles/files/tutoriales/manual de usuarios...

Documents