Sabemos que las páginas almacenan su contenido visible en elementos de contenido de la página. ¡Editar la página consiste precisamente en modificar esos elementos de contenido!

Es realmente sencillo editar el contenido de la página en TYPO3. Sólo seleccione la sección Página (nº 1), haga clic en el título de la página que desea editar (nº 2) y, dentro de la vista "Columnas" (nº 3), haga clic en el icono de edición (nº 4) del elemento de contenido de página que desea cambiar:

Esto hace que se muestre la forma de edición:

En primer lugar, el tipo de campo "Type:" (nº 1) le informa el contenido del elemento de contenido de la página, en este caso "Text" (texto). También podría ser "Table" (tabla) (como ya vimos anteriormente), "Image" (imagen), "Text w/Image" (texto con imagen) etc. ¡Véalo usted mismo! Cada tipo de elemento de contenido tiene su propia forma y campos y al insertar distintos elementos se obtiene una gran diversidad en su sitio Web.

El campo "Header" (encabezado) (nº 2) contiene el encabezado mientras que el de "Text" (nº 3) el contenido del cuerpo. En la página Web esto corresponde a:

Intente cambiar el valor del campo de encabezado y luego haga clic en "Save document and view page" (guardar documento y ver la página):

Debido a que uso la opción "Save document and view page" su resultado se le muestra automáticamente en la ventana de frontend en unos segundos:

Lo que TYPO3 hizo fue enviar los cambios al servidor Web, actualizar la base de datos con la nueva información, limpiar la memoria temporal de páginas visitadas y regenerar la vista – el cambio de refleja de inmediato en línea y aquellos que se encuentren navegando en su sitio Web ¡verán el nuevo encabezado en lugar del anterior! ¡Así de fácil y rápido es mantener sus páginas Web con TYPO3!

CONSEJO: Otra forma de activar la edición de páginas

En lugar de forjarse su camino a partir de la sección “Page”, luego el árbol de páginas, etc. también existe el elemento "Edit Item" (editar elemento) en el menú contextual (clic derecho) que le lleva directamente a la sección “Page”:

CONSEJO: Edición rápida – ahórrese un clic de ratón...

Si desea un acceso rápido a los elementos de contenido de página, puede cambiar la vista del módulo “Page” a "QuickEdit" en lugar de "Columns" (columnas) – de esta forma se muestra de inmediato el primer elemento de contenido de una página:

Crear una páginas nueva es muy fácil. Puesto que las páginas siempre se organizadas en forma jerárquica dentro del árbol de páginas tendrá que determinar primero la posición de la página. Claro está que puede cambiar posteriormente su elección.  

Para crear una nueva página use el módulo “Page” en la vista “Columns” para iniciar el asistente de “New Page” (nueva página) – éste le ayudará a encontrar la posición correcta dónde insertar la página:

Aparecerá, a continuación, un selector de posicionamiento. Al usarlo podrá determinar visualmente la posición correcta para la nueva página:

Finalmente aparecerá la forma para la nueva página donde puede proporcionar su título:

Guarde el documento y ciérrelo.

Deberá actualizarse el árbol de páginas:

Si ahora hace clic en el icono de página de la nueva página "Topscorer" verá que el menú del frontend ¡también se actualizó automáticamente!

Note que la página corresponde al identificador id "27" – por lo que la nueva página recibió automáticamente el número de "uid" "27" que se le asignó durante su creación.

¡La página aún está en blanco - necesitamos crear los elementos de contenido de página y su información!

Creando elemento de contenido de página

En el módulo “Page” (página), haga clic en el título de la página de "Topscorer" dentro del árbol de páginas y luego en el botón "Create page content" (crear contenido de página):

Verá de inmediato un bonito formulario (vea imagen inferior). Este le permite seleccionar una tipo de elemento de contenido de página – como se mencionó anteriormente, distintos tipos de elemento de contenido crean diferentes tipos de página Web.  

Creemos el tipo "Text with image below” (Texto con la imagen inferior):

Obtiene esta forma de inmediato. Ahora escriba un texto falso y seleccione una imagen de su unidad de disco duro (busque una imagen pequeña jpeg):

Haga clic en "Save document" (guardar documento). La imagen se envía al servidor Web y se adjunta al elemento de contenido de la nueva página. Si todo va bien, el resultado deberá asemejarse a esto:

Que en la página Web se verá así:

Insertando otro elemento de contenido

De regreso al módulo Página, el nuevo elemento de contenido se muestra claramente:

Aviso: ¿Falta la miniatura? Si no ve una pequeña imagen aquí, probablemente TYPO3 no este configurado correctamente para usar ImageMagick. Quizá este sea el caso si no uso el paquete de instalación de Windows (vea la sección de instalación de esta guía didáctica). Por favor refiérase a la información para instalaciones encontrada en typo3.org y los archivos de lista de correos sobre la instalación. Puede completar este tutor sin que esta característica funcione.

Haga clic en el botón "New content" (nuevo contenido) para crear otro elemento de contenido con una lista de viñetas después de esta:

Esta vez tendremos que realizar otra selección además de la primera- ¡dónde debe ir el elemento? Antes o después del elemento de contenido de página activo?

Lo insertamos después del activo. Ahora sólo tenemos el contenido de la lista de viñetas:

Note que el "Type" (tipo) se preseleccionó como "Bullet list" (viñetas) – esto podría haberse seleccionado manualmente. ¡Puede cambiarlo más tarde! Si desea, puede solicitar información de los distintos tipo de elementos de contenido: ¿Recuerda  el pequeño icono "?" ?- ¡la ayuda está siempre a su alcance!

Ahora la página contiene dos elementos de contenido, uno del tipo "Text w/Image" y otro "Bullet list" - en ese orden:

En el módulo Página, esto se ve así:

Administración de elementos de contenido

Acaba de usar el Asistente de “Nuevo contenido" para crear el contenido de una nueva página. Sin embargo, los asistentes de TYPO3 sólo hacen que una tarea común se realice de forma rápida y simple llevándolo directamente a las opciones importantes. Pero en realidad puede seleccionar, poner a punto y controlar a mano todas las características. Comprenderá esto conforme avance en su trabaja con TYPO3. Tome su tiempo para explorar los botones y opciones. ¡Hay muchas posibilidades y sólo puede conseguir conocerlas si se toma el tiempo para jugar con ellas!

He aquí algunos ejemplos de características de la interfaz que puede probar:

La creación de una nueva elemento de contenido de la página después del primero pueden hacerse con el botón nº 1. El elemento predefinido es de tipo "Texto" - cámbielo al adecuado. El botón "Move record down” (mover registro hacia abajo, nº 2) puede usarse para cambiar el orden entre muchos elementos de contenido dentro de la misma página/columna. Igualmente,  puede usar los botones “Copy”, “Cut” y “Paste after” (Copiar, Cortar y Pegar Después de)  del menú contextual (nº 8) – ¡también le permiten mover elementos a otras páginas! El botón "Hide/Unhide" (Ocultar/Mostrar, nº 3) es una manera rápida de cambiar si el elemento se muestra o no (modificando su atributo “Hide”). El cubo de basura (nº 4) le permite eliminar el elemento totalmente (aunque puede restaurarse si lo hace por accidente).

El botón “Edt in Rich Text Editor” (Modificar en un editor de texto, nº 5) es interesante si necesita editar sólo el área de texto del elemento de contenido. Esto le mostrará una ventana "completa" para revisar el texto - ¡interesante si hay mucho que modificar! Haciendo clic en el icono en los elementos de contenido de la página hará que aparezca un menú contextual para el elemento. Finalmente,  puede no sólo modificar un elemento de contenido de una página sino dos (o más) haciendo clic en el icono de edición de columna (nº 7).

Mover una página es muy fácil usando el Asistente disponible en el módulo Página. Digamos que queremos mover la página "Topscorer" de su posición actual después de "Sitemap" en la sección de la "Home":

Verá una rama en el árbol de páginas y al hacer clic en la página superior se avanza un nivel:

Al hacer un sólo clic, de una forma lógica, hemos movido la página a su nueva posición:

El árbol de páginas se actualiza de inmediato:

Usando la característica de Cortar y Pegar para mover una página

El asistente "Move page" (mover página) es la herramienta más intuitiva para los principiantes. Sin embargo, cuando se desea un panorama más amplio de la forma de mover elementos – incluyendo páginas – en TYPO3 deberá usar el portapapeles interno. Trabaja de forma similar al de Windows: Realiza un clic derecho en un documento, selecciona "Cut" (cortar), a continuación hace un clic derecho en la carpeta donde desea insertarla y selecciona "Paste" (pegar). El mismo principio existe en TYPO3. Usemos esta técnica para mover de nuevo la página:

"Corte" la página:

y luego "Paste after" (pegar después de) la página "Report results":

Haga clic sobre "OK" (Aceptar):

¡Eso es todo! La página está de nuevo en su posición inicial:

Antecedentes: Cuidado – ¡conceptos consistentes a bordo!

Note que el mismo principio de copiar/cortar/pegar puede usarse, además de para páginas, a los elementos de contenido de las mismas - bueno, de hecho, cualquier elemento de la base de datos o archivo que TYPO3 gestiona ¡se ajusta a esta funcionalidad! Esto es un buen ejemplo de la forma en que TYPO3 usa el mismo concepto de consistencia a través de todo el sistema – por lo que una vez que se aprende un concepto, muchas de las otras características cobran sentido. Si abre sus sentidos a este punto tendrá muchas experiencias del tipo "¡Ajá!" cuando vea cómo estos detalles fueron diseñados para ajustarse unos a otros.

Una característica que encontrará en mucho elementos - en particular en páginas y sus elementos de contenido – son los campos de control de publicación o configuración de visibilidad. Son similares a esto para las páginas:

y para los elementos de contenido se encuentran en la parte inferior de la forma:

Ocultando una página

Intente activar la bandera "Hide page" (ocultar página):

El icono de la página cambia de color a una escala de grises y tiene ahora una pequeña aspa roja sobre ella -¡Se encuentra ahora oculta!

Esto significa que no podrá ver la página en la interfaz del usuario (frontend):

(¡Es muy importante que seleccione "Show" para la página "Last week"!)

Ahora vea el resultado... ¡no hay página "This week”!

Sin embargo, si intenta ir directamente a la página "This week" de todas formas la verá:

... esto se debe a que cuando se encuentra en el modo administrador (backend) puede obtener una vista previa (preview) de las páginas ocultas – tal y como lo indica el recuadro en la parte inferior de la página:

¡Pero! - esto sólo es para los administradores. ¡Nadie más podrá visualizar la página antes de que usted cambie sus atributos nuevamente!

Páginas cronometradas y elementos de contenido

Probablemente el ajuste de visibilidad más típico es ocultar páginas y elementos de contenido. Es tan común que tiene su propio elemento en los menús de contexto:

¡Pero también puede determinar cuándo una página debe mostrarse en línea – esto es: ¡en qué fecha! Por ejemplo, escriba "d+10" en el campo "Start time" (hora de inicio):

¡Automáticamente la fecha cambia a la fecha actual más 10 días! Si guarda la página y mantiene el ratón sobre el icono también podrá ver este ajuste reflejado:

¡Y adivine qué! - esta página no es visible pero lo será automáticamente el 11 de abril de 2003, ¡10 días después! Es así de fácil controlar la publicación de información basada en tiempos de inicio. El mismo principio funciona, claro está, para el campo "Stop" (Detener) así como para los elementos de contenido de página, elementos de noticias, elementos de libro de invitados - nómbrelo. Mismo principio - muchos lugares - fácil de entender.

Cuando está trabajando con el texto de sus páginas puede las mismas opciones a las que está acostumbrado a usar en su procesador de texto. Si está usando TYPO3 con Microsoft Internet Explorer tendrá acceso a un Editor (RTE) para el campo del texto del cuerpo de su página. El “Texto Enriquecido” significa que puede aplicar formato al texto además de simplemente escribirlo.

Intente editar el campo de texto del cuerpo en la nueva página "Topscorer":

Seleccione el texto "my first" y haga clic en "B" (Bold: Negritas) para convertirlo en negritas:

Al usar los botones "B", "I", "U" y "Centrado" (center justify) puede lograr este aspecto en su párrafo fácilmente:

Haga clic en el botón "Save document and view page" (guardar documento y ver página). Verá la siguiente imagen en el “frontend”:

Creando una lista de viñetas

Puede crear una lista de viñetas fácilmente. Simplemente haga clic en el icono "Bulleted list" (lista de viñetas) y escriba unas cuantas líneas:

Guarde y visualice – el “frontend” le mostrará:

Consideraciones acerca del "contenido enriquecido"

Como podrá ver - esto le da dos opciones: ¿a) Creará una lista de viñetas “en línea" en los campos de texto de cuerpo o b) los creará como elementos de contenido separados? Puede mezclar los dos métodos. ¡Personalmente yo encuentro más conveniente crear simplemente listas de viñetas dentro del texto del cuerpo usando RTE - ¡pero si alguien con Microsoft Internet Explorer va a editar la lista generalmente esto es muy difícil! Y puede tener “razones políticas” para no insertar listas de viñetas directamente en el texto del cuerpo (guardando el texto del cuerpo "limpio").

El RTE en más detalle

El editor de texto enriquecido “Rich Text Editor” puede ser de fácil uso, pero también tiene una serie de retos técnicos cuando se investigan los detalles. Existe una documentación extensiva del tema aquí. Lea más información a fondo acerca de RTE y cómo configurarlo aquí.

Los hipervínculos son el pegamento de Internet por decirlo de alguna forma. En TYPO3 ya cuenta con vínculos creados automáticamente para usted puesto que el hecho de crear páginas en la estructura jerárquica del árbol de páginas ha generado automáticamente el menú en el marco izquierdo.  

Pero quizá desee unir un fragmento de texto a otra página informativa, un archivo, otro sitio Web o una dirección de correo electrónica, ¿correcto?  

Esto es muy fácil si usted usa al editor de texto enriquecido:  

Simplemente marque el texto y haga clic en el icono "Insert link" (insertar vínculo):

Luego haga clic en la página de visitantes (guest book):

... y el texto queda vinculado:

En el “frontend” esto producirá un vínculo, tal y como lo espera. ¡Haga clic sobre él y llegará directamente al libro de visitas!

Tras bambalinas

Ya le informáramos antes que podría ser un problema usar el editor de texto enriquecido si desea editar el texto llano posteriormente. Puede simular esto al editar todo el elemento de contenido y seleccionando la opción "Disable Rich Text Editor"(Desactivar editor de texto enriquecido) localizada en la parte inferior de la forma (antes de editarla):

El campo "Text" (texto) se verá ahora como un campo ordinario de la forma:

En primer lugar puede ver que el vínculo a la página de "Guestbook" fue creado por una etiqueta específica de TYPO3, <link>, combinada con el id de la página. ¡Esto facilita la labor de aquellas personas sin RTE que desean modificar los vínculos! Suficientemente sencillo como para escribir a mano. (Nota:: El marcador interno "<link>" se convierte al equivalente  HTML "<a> " cuando se genera la página).  

Aparte de eso también puede ver que la lista de viñetas se convirtió a una serie de líneas encapsulada en  etiquetas <typolist> - también propias a TYPO3. Éstas también se convierten a una lista de viñetas usando la plantilla cuando se genera la página posteriormente.  

La primera línea contiene el código HTML estándar para los atributos de negrita, cursiva y subrayado así como la alineación al centro de todo el párrafo.

¿Otros tipos de vínculos?

Puede crear vínculos a ficheros locales o páginas Web externas – aún a elementos de contenido específicos dentro de una página (¡vea la página "Last week" para un ejemplo en el que podrá descubrir la técnica usted mismo!).

Finalmente, se pueden crear vínculos a direcciones de correo electrónico. Muy sencillo.

Ahora que hemos deshabilitado el editor de texto enriquecido, ¿por qué no usar el icono del Asistente para desplegar un editor de pantalla completa?:

Ahora escriba un nuevo elemento de la lista de viñetas, marqúelo y haga clic en "Insert link” (Insertar vínculo). A continuación seleccione “Email” (Correo electrónico) en el menú de tipos de vínculos y escriba su dirección de correo electrónico:

El resultado debe ser el esperado después de guardar el documento:

 - un vínculo que abre el cliente de correo electrónico del usuario y lo prepara para enviar un nuevo mensaje:

¡Como usted ya lo sabe, hay varios elemento de contenido de página disponibles y al combinarlos tiene la llave para crear páginas Web diversificadas en la que cada una es distinta.

Como una regla general – mientras más abajo se encuentra el elemento dentro del menú, mucho más avanzado y raro es su uso. El de uso más común es Text o Text w/Image (texto o texto con imagen).

Asistentes

Note que algunos elementos están asociados a un asistente. Por ejemplo, intente editar una de los listas de resultados de la página "This week":

El campo "Text", que normalmente sólo contiene texto puro ahora tiene el contenido de la tabla organizado de una forma aparentemente sistemática:

La tabla se construye al interpretar cada línea en el campo "Text" como un renglón de la tabla. Una vez realizado esto, la línea vertical ( |) se usa para separar cada una de las columnas. Esta es la forma a “bajo nivel” que funciona y puede mantenerse a mano. Sin embargo, el "Table Wizard” (Asistente de Tablas) es la herramienta adecuada para la mayoría de las personas (ve la imagen superior en la parte derecha). Al hacer clic sobre este icono, aparecerá una forma con los campos designados así como los botones  adecuados para agregar, borrar y mover los elementos.

Por ejemplo, agregar un nuevo renglón es muy fácil:

Y luego se procede a añadir el contenido al nuevo renglón:

Una vez guardado el contenido dentro del asistente y de regreso al campo de texto, el contenido verdadero se ve así:

Al desplegar la página en la interfaz de usuario (frontend) se obtiene esto:

Si se está preguntando cómo se cambio el color del fondo - ¡siga leyendo!

Opciones secundarias - "Paletas"

TYPO3 ha considerado, desde su creación, el concepto de campos de forma primarios y secundarios. Las formas de edición  en TYPO3 contienen muchos campos y puede extenderse aún más. Pero al mostrar muchos campos al mismo tiempo, su  apreciación global se vuelve difícil para el usuario medio. Particularmente si es usted un principiante y ya muchas nuevas cosas a considerar y memorizar.

El concepto de campos primarios y secundarios significa que normalmente usted sólo ve los más importantes y típicamente utilizados campos de la forma (primarios). Las opciones más detalladas están ocultas en los campos secundarios que se muestran sólo bajo demanda.

Considere esta forma:

Tres campos mostrados - fácil apreciación global.

Pero si hace clic en uno de los botones al lado de los campos, encontrará opciones secundarias en la paleta (marco superior):

Esto es muy inteligente - tenemos muchas opciones, muchos detalles pero no se muestran hasta que los necesitemos para evitar confusiones.

El lado negativo es cuando necesita uno de estas opciones secundarias y no se acuerda “detrás de qué icono" (o si usa mucho el campo) - ¡puede entonces ser confusa su localización!

Por consiguiente, puede activar la opción “Show secondary options” (Mostrar opciones secundarias) localizada en la parte inferior de todas las formas de edición:

El resultado es un forma muy grande y posiblemente confusa. Pero con todas las opciones disponible:

Note como cada renglón de opciones corresponden exactamente al contenido de la paleta en el marco superior como si hiciese clic en el icono "More options" (más opciones).

¿Cómo cambiamos el color de fondo de la tabla? En las opciones secundarias del selector "Layout" (distribución):

(La etiqueta "Color 2" se refiere al color del mismo nombre configurado en la plantilla del sitio Web.)

La nota final acerca de la edición de páginas es aquella contenida dentro del propio “frontend”. Hay muchas formas de hacer la misma tarea, pero con el tiempo apreciará esta característica de TYPO3 pues le corresponderá a usted determinar la mejor forma de realizar una tarea invirtiendo el menor tiempo posible.

La edición en el “frontend” no es sólo un nuevo botón- probablemente sea una revolución en la forma en la que los contribuidores de contenido trabajen en el sistema.

Probablemente ya ha notado los pequeños iconos de edición que aparecen en la página Web:

Intente hacer clic en uno de ellos:

Instantáneamente se le muestra una forma en la que puede editar el campo del encabezado y su información relacionada ¡de inmediato!

Intente cambiar el texto del encabezado y luego haga clic en "Save document and close" (Guardar documento y cerrar) – se le muestra de nuevo la página Web y notará de inmediato los cambios realizados:

De esto se trata la edición “frontend” - una forma muy intuitiva, fantástica para corregir pequeños errores, realizar ajustes, excelente para aquellos contribuidores de su equipo que no tienen las habilidades necesarias, etc. Es un método de edición sensible al contexto – poder puro a su alcance.

¿Pueden todos editar mis páginas?

No, claro que no – sólo si se registran en la interfaz de administración “backend”. De otra forma los iconos están ocultos – y si se hace clic en uno de ellos la petición se rechaza. Inténtelo usted mismo – entre en el backend: