Como ya sabe de la instalación, TYPO3 se divide en dos áreas - el “backend” y el “frontend”. Mientras que el “frontend” está disponible a todos los usuarios y navegadores de Internet - es el sitio Web que TYPO3 produce - sólo usted y sus contribuidores de contenido tienen acceso al “backend” - la administración del sitio Web. Se requiere siempre un nombre de usuario y una contraseña.

Módulos del “Backend” (interfaz de administración)

Hay muchos módulos dentro del “backend” en el menú de la izquierda. Cuando quiera revisar y crear páginas, seleccione el módulo "Page" (página):

Cada módulo despliega su propio contenido. Puesto que usted es el administrador, tendrá acceso a todos los módulos. Pero hay otros usuarios "normales" - ¡ellos sólo tienen acceso a los módulos que usted ha seleccionado para ellos!

Intente abrir los distintos módulos en el menú y ver cómo cambia la información del marco de contenido.

El encabezado "Web" del menú se llama un “módulo principal” y todos los módulos listados bajo él son los "submódulos". Todos los módulos bajo el módulo principal "Web" mostrarán una vista dual en el marco de contenido - el árbol de páginas (izquierdo nº1) y el módulo de contenido con respecto a una página del árbol de páginas (derecha nº2).  

El árbol de páginas puede expandirse haciendo clic en los iconos del más/menos (nº 3). Esto trabaja exactamente como las carpetas en su propio ordenador. Puede pensar en el árbol de páginas como en una estructura de directorio dónde las páginas Web se organizan en una jerarquía con páginas principales, páginas subalternas y sub-subalternas, etc.

Haciendo clic en títulos e iconos

La siguiente cosa importante a saber sobre el árbol de páginas es que usted puede hacer clic tanto en el icono de la página como en su título - ¡y esto hace la diferencia!  

Si hace clic en el título de la página verá que el módulo activo muestra su contenido en el marco de la derecha:

En este caso el módulo "Página" es el activo por lo que verá el contenido de la página en el marco de la derecha. De aquí puede editarlo y realizar otras acciones que discutiremos muy pronto

Si hace clic en el icono de la página en lugar del título, aparecerá un menú sensible al contexto o “emergente”:

Aviso: Si usa un navegador antiguo, el menú no aparecerá cerca del icono sino en el marco superior del “backend”. ¡Más aún, tenga paciencia - el menú podría tomar unos segundo en aparecer!

En el menú emergente puede seleccionar opciones ¡que se relacionan a esta página! La mayoría de ellos son obvios - intente jugar con algunas opciones. Para este ejemplo he seleccionado "Show" (mostrar) que significa que se abrirá otra ventana en el navegador y veré esta página específica como se muestra en el “frontend”:

Note cómo se mostró esta página en la nueva ventana al llamar a la secuencia de comandos (script) ".../quickstart/index.php?id=13" (nº 1). En TYPO3 cada página se guarda en la base de datos (en una tabla llamada "pages") y cada uno de estos registros de página tiene un número único (uid). Aquí el parámetro llamado "id" se fijó al valor "13" - ¡y al parecer este es número de identificación de la página llamada “This week" (esta semana) en el árbol de páginas!

Más aún, puede ver que el contenido de la página (nº 2) es el mismo que vio (si lo notó) en el marco izquierdo del módulo de Página (page) cuando hizo ¡clic en el título! Regresaremos a ello más tarde.

Note el encabezado de la página (nº 3) - aquí se muestra el título de la página que vimos ("This week") pero la página padre en el árbol de páginas - "Results" – también se muestra. Esto comunica la lógica del árbol de páginas – que la página "This week" es una sub-página (hija) de la página "Results" (padre).

La última cosa a notar es el menú en el marco izquierdo. Éste refleja claramente la jerarquía que también vimos en el árbol de páginas:

Implementación técnica de padres e hijos

Esta sección es para aquellos que quieren entender los fundamento técnicos de cómo trabaja la estructura de árbol en la base de datos.

Técnicamente la relación entre una página y sub-páginas se establece a través del campo "pid" (id de padre/id de la página) en la tabla de páginas de la base de datos - el campo "pid" de "This week" contendrá los valores "uid" de la página llamada "Results".

Al mantener el ratón sobre el icono de la página "Results" unos segundos, verá aparecer la siguiente línea de texto:

Esto le informa que la página "Results" tiene el número uid "4". Sabemos que la página "This week" tiene el uid "13" (y las páginas "Last week" y "Report results" respecivamente los números uids 12 y 11).

Si vamos al módulo "phpMyAdmin" y examinamos la tabla "pages" (que contiene todos los registros de encabezado de página) podremos ver la relación con facilidad:

Claramente las tres sub-páginas relacionadas con "Results" tiene el valor de su campo "pid" con el número "4" – tal y como lo podríamos esperar.

Hemos entonces aprendido que

Quizá haya notado que algunas páginas del árbol de páginas no se mostraron en el menú del sitio Web. Las páginas son estas:

No poner en el menú (Not in Menu)

La página "Log in" (nº 1) no se muestra pues tiene un atributo que especifica "Not in menu" (no poner en el menú). Esto es útil si desea crear una página que no debe aparecer como un elemento del menú por una u otra razón. Aún así, puede acceder a ella creando un vínculo manual – o escribiendo su número de id ¡directamente en la dirección URL!

El atributo "Not in menu" se activa editando el encabezado de la página:

Página de acceso restringido

La página "Team pages" (nº 2) no está visible debido a que cuenta con el atributo de acceso restringido. Esto significa que sólo se muestra cuando un usuario e la interfaz (frontend) se encuentra registrado. Esto se ve en más detalle en otra sección de este tutor. En términos generales esto consiste en editar el encabezado de la página y seleccionar el grupo de usuarios que tienen accedo a ella:

sysFolders - ¿qué significa esto?

Finalmente las dos carpetas llamadas "sysFolders" no se muestran (nº 3). Se crea un sysFolder de forma similar a como se crea una página "Not in menu" (que no aparezca en el menú) – sencillamente seleccionando "sysFolder" como el tipo de página (vea la imagen anterior).

¿Pero, qué significa esto? Bueno, las páginas predeterminadas creadas en TYPO3 se usan para mostrar un contenido en el sitio Web. Aparecen en el menú y tienen un título. 95% de todas las páginas se usan de esta forma. Pero algunas páginas también pueden servir como simples contenedores de la información de la base de datos que no se deben mostrar en el sitio Web visible. ¡Para esto se usan las páginas del tipo sysFolders! ¡Úselas al igual que las carpetas de su sistema de archivos en el ordenador que almacenan distintos elementos de una forma organizada! Siguiendo la misma analogía, las páginas sysFolders son "carpetas" que organizan elegantemente los elementos de la base de datos dentro de TYPO3.

En este caso específico, las página "Users" del tipo sysFolder contiene a los usuarios del sitio Web que pueden acceder de forma privilegiada (volveremos a este punto más adelante). Puede ver el contenido de sysFolder usando la sección "List" (Listar) (esto es "Explorer" dentro de TYPO3...):

Atajos (Shortcuts)

Aparte los distintos tipos de páginas que no se muestran en el menú, hay otros dos tipos misteriosos de páginas que muestran un "icono de atajo" (método abreviado):

Un atajo o método abreviado es una característica interesante si cuenta con una página (vacía, sin contenido) que debe llevar hacia otra página ¡directamente! Esto es muy conveniente si desea que, por ejemplo, aparezca el vínculo ¡dentro del menú!

En nuestro caso, la página "Home" nos lleva a la página principal y la de "Results" a la de "This week". ¡Inténtelo!

Se crea el atajo editando el tipo de página. Para la página "Home" esto se ve así:

Se usa el Examinador de Elementos (Element Browser) para seleccionar la página a la que se hace referencia. El Examinador de Elementos se usa para crear este tipo de relaciones entre registros y archivos en las formas de edición de TYPO3. Puede encontrar más detalles acerca del Examinador de Elementos aquí.

Para la página "Results" el atajo es un poco más complejo – ¡sencillamente salta a la primera sub-página que encuentra! En nuestro caso esta es la página "This week":

El “modo atajo” (Shortcut mode) es una opción secundaria del campo "Shortcut to page" (atajo a la página) – Que significa que este campo sólo se muestra (en el marco o paleta superior) cuando se hace clic en el icono "More options..." (más opciones) (vea la imagen superior).

¡Ayuda accesible!

Bueno ¿y qué otras cosas interesantes hacen los tipos de página? Puede averiguarlo directamente si hace clic en el icono "?" que se encuentra a lado del campo:

Se le mostrará la siguiente ventana:

A esto se le conoce como ayuda contextual y la puede encontrar en casi todos los elementos de TYPO3 donde se requiere información acerca de su funcionalidad. ¡Úsela! ¡Es fácil y está a su alcance cuando trabaja dentro del sistema!

Ahora que ya hemos dado un vistazo rápido al árbol de páginas, visto como su estructura se refleja en la jerarquía del menú del sitio Web, cómo se puede visualizar las distintas páginas, etc. la siguiente pregunta que se plantea es ¿cómo se organiza el contenido dentro de una página? Veamos una vez más el contenido de la página "This week":

La página se forma de tres elementos de contenido de página  - numerados en la imagen del 1 al 3. Debido a que cada elemento de contenido puede tener un tipo distinto, puede crear páginas con una estructura ¡muy flexible! En este caso, la página consiste de un elemento de contenido tipo "Text" (texto) y dos del tipo "Table" (tabla).

Nota al pie: TYPO3 – un CMS (sistema gestor de contenido) basado en elementos

Este método de construir páginas es un concepto fundamental en la mayoría de los sitios Web construidos con TYPO3. El método de crear páginas con elementos de contenido también es usado en otros sistemas CMS (sistema gestor de contenidos) modernos. Esto hace que TYPO3 sea un CMS "basado en elementos". Esto da mucha flexibilidad pero conserva la consistencia en el diseño de las páginas – ¡puesto que esto es uno de los objetivos de los sistemas CMS! El método alternativo es uno más fijo dónde cada página tiene un número determinado de áreas de contenido – por ejemplo uno para el título, texto del cuerpo e imágenes. TYPO3 también puede hacer esto (¡cualquier cosa que le guste!) pero probablemente no desee eso al final. Si tiene preguntas técnicas acerca de técnicas de creación de plantilla profesionales, elementos de contenido, etc. por favor consulte las guías didácticas "Modern Template Building" (Creación de plantillas modernas), Parte 1 y Partes 2 y 3. Por ahora, por favor note que estos documentos están a un nivel más alto que este y que debe dar un paso a la vez si es un principiante de TYPO3.

Orden de los elementos de contenido

Bien, volviendo a los elementos de contenido de una página Web; deles un vistazo en el backend:

Haga una comparación de las vistas que se obtienen en el frontend y el backend. ¿Puede ver cómo los elementos del backend son claramente los mismos que los del frontend?  

Intente reestructurar un elemento del backend subiéndolo en el orden:

Lo que le dará este orden desde la parte superior:

... el sitio Web ahora se ve así:

Página padre de los elementos de contenido

Esto es para aquellas personas que quieren entender el lado técnico de elementos de contenido y páginas:

¿Recuerda que el registro de la página tiene un campo, "pid", que apunta a la página padre? Bueno, pues los elementos de contenido de la página (registros) – y cualquier otro registro de la base de datos configurados a partir del backend de TYPO3 – también los tienen. Si vemos de nuevo en la sección phpMyAdmin veremos que los elementos de contenido de la página (tabla: "tt_content") con identificadores (uid) 18-20 apuntan a la página con uid "13" – el identificador uid correspondiente a la página "This week":

¡Esto es lógico!