Introdución Typo3 6.2

Contenido
Prólogo.............................................................................................................3
1. Antecedentes previos ........................................................................................3
2. Vista de Área de trabajos...................................................................................5
2.1 Área de Trabajo Web....................................................................................6
2.2 Área de Trabajo File (Archivos)........................................................................8
2.3 Área de trabajo User Tools (Herramienta de Usuario)..............................................9
2.4 Área de trabajo Admin Tools (Herramientas de Administración).................................10
2.5 Área de trabajo System (Sistema)...................................................................12
2.7 Área de trabajo Help (Ayuda)........................................................................13
3. Campos de navegación .....................................................................................15
4. Vista de detalles.............................................................................................16
5. Descripción de elementos contenidos....................................................................17
5.1 Contenido típico de una pagina......................................................................18
5.2 Elementos especiales..................................................................................19
5.3 Elementos de formulario .............................................................................20
5.4 Plugins....................................................................................................21
6. Iconos disponibles ambiente Backend ..................................................................22
6.1 Principales iconos de acciones........................................................................22
6.1.1 Barra principal en la parte superior de la página del Backend.............................22
6.6.2 Herramientas del área de trabajo Web Opción Page al momento de crear una nueva
página......................................................................................................24
6.1.3 Herramientas correspondientes a la vista de detalle Área de Trabajo Web. ............24
6.1.4 Herramientas correspondientes a la vista de detalle (Módulo Web, List/Lista) ........28
6.1.5 Herramientas correspondiente a la vista de detalle (Módulo File/Archivos) ...........29
6.1.6 Herramientas correspondientes a la vista de detalle (Módulo Admin Tool, extensiones)
..............................................................................................................31
7. Creación de template.......................................................................................32
8. Crear usuarios de backend.................................................................................54
9. Crear usuarios Frontend....................................................................................56
10. Creación de nuevos ficheros.............................................................................60
11. Crear una nueva página Frontend.......................................................................63
12. Extensiones en Typo3......................................................................................66
13. Habilitar extensión de Noticias (ayuda)................................................................73

Prólogo.
El presente instructivo recopila diez años de experiencia en implementación de
proyectos de Tecnología WEB, en Chile, mediante el uso del CMS Empresarial
Typo3. Cabe mencionar que desde la versión 6.0+ TYPO3 experimento un cambio
importante en su arquitectura y hasta la fecha existe escaso material en español
respecto a como habilitar un sitio web de una manera rápida. El instructivo
comienza presentando el CMS Empresarial Typo3 y continua explicando los
principales ambientes de trabajos, sus áreas de trabajos, elementos de contenidos,
habilitación de un template gráfico básico y el manejo de las operaciones
elementales.
Esperando que el siguiente instructivo sea de utilidad. Cualquier aporte, consulta o
sugerencia favor enviar un correo a victor.aravena@ufrontera.cl o consultar vía
perfil Linkedin http://cl.linkedin.com/in/victoraravena
1. Antecedentes previos
TYPO3 es la herramienta de gestión de contenidos abierta y flexible que permite
diseñar espacios web a medida de las necesidades y personalidad de cada empresa.
TYPO3 ofrece una gestión multidominio que permite elaborar, administrar y
mantener varios sitios web bajo una única instalación. Además, su sistema modular
presenta multitud de extensiones disponibles muy fáciles de instalar y que permiten
explotar las funcionalidades más interesantes en cada proyecto.
TYPO3 se define dentro de los CMS (Content Management System) o gestor de
contenidos. En este caso se trata de una herramienta especializada en la gestión de
los contenidos que se publican en la web.

A su vez, esta aplicación puede ser configurable, personalizable y ampliable, bien
sea por las propias utilidades que incorpora o mediante la instalación de extensiones.
Es una aplicación de software libre que se sustenta sobre la estructura LAMP, y que
gracias a ello posibilita que exista un gran soporte y multitud de desarrollos parale-los
concernientes a las extensiones.
Una característica a destacar en Typo3 sería el uso de un lenguaje propio denomina-do
TypoScript, que tiene cierta similitud a los lenguajes orientados a objetos. Este
lenguaje tiene por objeto realizar una configuración más exhaustiva del sitio web.
Typo3 cuenta con tres planos básicos de visualización del sitio web que va a gestio-nar:
 Frontend: El frontend consiste básicamente en la vista que va a tener un visi-tante
cualquiera de la web siendo el sitio web visible en Internet. Este am-biente
puede tener ser público o privado (Usuario Frontend).
 Backend: Acceso de administración del sitio web y corresponde a la sección
principal donde se administran todos los aspectos de la configuración del sitio
web incluyendo un amplio número de herramientas. Al ambiente Backend
se accede ingresando a la url del proyecto el path /typo3 y se accede a través
de un procedimiento de autenticación (Usuario Backend).
 Install Tool: Ambiente de instalación del cms Typo3. A este ambiente se ac-ceder
ingresando a la url del proyecto el path/typo3/install. Para acceder a
este ambiente
La interfaz backend de typo3 se divide principalmente en tres subvista:
 Vista de módulos (color rojo).
 Vista de navegación (color naranjo).
 Vista de detalles (color amarillo).

Ilustración 1: Campos principales del backend typo3.
2. Vista de Área de trabajos.
La vista de módulo corresponde a un amplio set de módulos con herramientas
específicas para trabajar en el sitio web. Las principales área de trabajos son:
 Web: Área de trabajo con herramientas web.
 File: Área de trabajo encargada de gestionar recursos físicos y directorios.
 User Tools: Herramientas de trabajo para usuarios backend.
 Admin Tools: Herramientas de adminsitración.
 System: Herramientas de sistemas.
 Help: Opciones de ayuda.

2.1 Área de Trabajo Web
El área de trabajo web permite crear contenidos, árbol de navegación y apariencia
del sitio web para el plano Frontend.
Ilustración 2: Módulo Web correspondiente al campo de módulos.
Las principales opciones se describen a continuación:
 Page: Esta opción esta diseñada para crear y editar árboles de navegación
con diversos contenidos.
 View: Visualización de lo que se ha construido en la página seleccionada.
 List: proporciona una vista y acceso al conjunto de datos de una página que
son accesibles para los usuarios registrados en el backend.
 Workspaces: Facilita la creación y manejar los flujos de trabajo de versiones
/ Este módulo contiene el resumen de todos los elementos dentro del espacio
de trabajo actual y continúa. Permite la revisión y edición de flujo de trabajo
para ellos.

 Functions: Ofrece recursos más eficientes para trabajar en typo3, como lo es
crear múltiples páginas a través de las opciones que ofrece “Wizard”.
 Access: Gestiona el control de los derechos de los usuarios del backend en la
página. Para esto es necesario haber registrado en forma previa usuarios
poseedores de una página y darle los permisos correspondientes a su función.
Ilustración 3: Niveles de permisos correspondientes a la página “Búsqueda
avanzada”.
 Template: Encargado de administrar las plantillas de TypoSccript de las
cuales dependerá el aspecto de la página web. Este módulo ofrece a los
administradores numerosas opciones para el rápido manejo de template, tanto
integrados y externos.
 Info: Reúne toda la información estadística de la/las paginas
correspondientes.
 Recycler: El reciclaje permite seleccionar y recuperar cualquier dato borrado
o bien eliminarlos.

Ilustración 4: Tabla Recycle.
2.2 Área de Trabajo File (Archivos)
Este módulo contiene y ofrece una vista de los recursos de la página web. Estos
contenidos se encuentran ordenados a través de una simple estructura de archivos.
Ilustración 5: Módulo File.

La principal opción se describen a continuación:
 Filelist: presenta el sistema de administración de archivos de Typo3. Permite
el acceso a carpetas de archivos según los permisos que posea el login.
Ilustración 6: Lista de archivos correspondientes al sitio web.
2.3 Área de trabajo User Tools (Herramienta de Usuario)
Ilustración 7: Módulo User Tools.

 Task center: este módulo pone a disposición recursos para el trabajo diario,
como lo son las tareas, permite asignar usuarios a estas tareas diarias a través
de un formulario para la asignación de acciones.
 User settings: en este módulo se pueden realizar configuraciones para
adaptar el entorno de trabajo. Typo3 ofrece por ejemplo la selección de
idioma para un usuario específico del backend.
2.4 Área de trabajo Admin Tools (Herramientas de Administración)
Este módulo representa el lugar central para el control del área backend de typo3 en
su página web.
Ilustración 8: Módulo Admin Tools.

 Extension Manager: administra distintos módulos para el Backend y el
Frontend. El núcleo del sistema de TYPO3 se encuentra claramente separado
de las opciones avanzadas, que solamente en caso necesario pueden ser
cargadas para algunas aplicaciones.
 Lenguage: administra los idiomas para contenido del backend.
 Indexado: si está activada en los templates la indexación mediante
TypoScript, podrá efectuar en el módulo Indexación las configuraciones en el
motor de indexación.
 Extensión Builder: esta extensión ayuda a construir y manejar las Extbase
basadas en extensiones de Typo3.
 PhpMyAdmin: esta opción del Admin tolos solo está disponible para
usuarios con accesos de administradores. Establece una interfaz para la base
de datos MySql a través de PhpMyAdmin. Typo3 integra esta herramienta
para el trabajo directo con la base de datos, esta herramienta permite la
creación de tablas con bases de datos propias.

2.5 Área de trabajo System (Sistema)
Ilustración 9: Módulo System.
 Backend users: permite la gestión de los usuarios que tendrán acceso al
backend del sitio, además de la asignación de permisos según corresponda y
módulos a los que podrá acceder.
 Install: esta opción se encuentra bloqueada por defecto, solo es posible
utilizarla si se configura un archivo en el directorio de typo3conf/.
 Reports: esta opción presenta una breve descripción de los parámetros del
sitio, además de entrega un reporte de problemas detectados en la instalación.
Además tiene la opción de entregar una lista de los servicios instalados, con
un alto detalle de cada uno. Los servicios son ordenados por tipo, prioridad y
calidad.
 Log: esta opción presenta el detalle y acciones que cierto usuario ha
realizado en el sitio.

 Scheduler: esta opción maneja las tareas programadas. Dispone además de
una lista de todas las tareas disponibles en la instalación de Typo3.
 Verificación BD: esta opción está a cargo de la verificación de la integridad
de la base de datos. Entre sus opciones se encuentran, el manejo de
estadísticas de registro, relaciones, buscar en toda la base de datos y
comprobar y actualizar el índice global de referencias.
 Configuración: esta opcion maneja todas las configuraciones del backend.
2.7 Área de trabajo Help (Ayuda)
Este módulo entrega información acerca del uso de typo3 en especifico dispone de
manuales e información sobre las distintas áreas de trabajos (módulos).
Ilustración 10: Módulo de Ayuda.

 Acerca de: entrega información del tipo utilizado, como su versión, licencia
con la que este trabaja. Además de información sobre la comunidad, librerías,
autores de las extensiones que se están utilizando en el backend.
 Manual: este módulo entrega ayuda on-line de la dirección de Typo3. Se
puede encontrar una descripción general de los módulos del núcleo Typo3,
descripciones de instalación específica. Los módulos Backend y la tabla de
base de datos que están disponibles dependerán del tipo de instalación.
 About Modules: presenta una breve descripción de los módulos disponibles
en Typo3.

3. Campos de navegación
Para la visualización del contenido es necesario seleccionar Web → Página.
Realizado lo anterior se tendrá a disposición en campo de navegación el
correspondiente menú.
Ilustración 11: Campo de navegación.
15

Como se aprecia en la ilustración anterior la estructura de del campo navegación
está compuesta por un árbol el cual es el encargado de manejar las páginas del sito.
El primer nivel de este árbol corresponde a la página matriz, en nuestro ejemplo esta
se visualiza como la “Portada” de esta se desprenden distintos niveles por separado.
Al pasar el cursor sobre los distintos niveles este ofrecerá información del id y si
esta página esta oculta en el menú. En la parte superior de este campo se
encuentran las opciones crear una nueva página, filtrar y actualización del contenido
del campo.
4. Vista de detalles
En el campo de la vista de detalles se halla la zona principal de trabajo de TYPO3.
Aquí se refleja la información y las posibilidades de edición para cualquier elemento
que se haya elegido.
Ilustración 12: Vista de detalle correspondiente a portada del campo de navegación.
16

En la parte superior de esta sección se puede acceder a la opción de ver página la
que es igual a la opción antes entregada en módulo web de los campos módulos.
Posterior a esta encontramos u icono que nos da la opción de la modificación de las
propiedades de la página seleccionada. En la parte superior a la derecha se
encuentran las opciones borrar la cache de la página y la creación de acceso directo
para esta página.
5. Descripción de elementos contenidos
Dentro del campo módulo específicamente Page/Pagina contenido en el módulo web
se encuentra una serie de elementos contenidos que ayudan a la creación de nuevo
contenido en la página seleccionada, los cuales se detallan a continuación.
Ilustración 12: Elementos contenidos en la vista de detalle.
17

5.1 Contenido típico de una pagina
A continuación se ahondan los principales contenidos:
 Sólo encabezado, esta opción crea un nuevo encabezado en la posición
seleccionada de la página.
 Elementos de texto normal crea un contenido que contiene tanto campo
de cabecera como un cuerpo de texto.
 Texto con imágenes, al igual que el anterior permite crear un párrafo con
su título correspondiente además de poder insertar una imagen a este.
 Sólo imágenes, permite integrar un numero de imágenes alineadas tanto
en columnas y filas con un pie de imagen.
 Lista de viñetas, permite crear una lista de viñetas sencillas.
 Tabla, permite la creación de una tabla de hasta 8 columnas.
18

5.2 Elementos especiales
Ilustración 13: Elementos especiales en la vista de detalle.
A continuación se especifican los principales elementos:
 Enlaces a archivos, permite crear una lista de archivos para descargar.
 Contenido multimedia, permite insertar u elemento multimedia. Esto
puede ser de tipo archivo de audio, video o animación flash.
 Menú especiales, permite crear el menú de la página, sitio y otros
menús.
 HTML Plano, permite insertar código Html sencillo en la página.
 Separador es un elemento visual que se puede insertar en la página (línea
horizontal).
 Insertar registró, puede incrustar elementos dentro de otros.
19

5.3 Elementos de formulario
Ilustración 14: Elementos de formulario en la vista de detalle.
A continuación se especifican los principales elementos del formulario:
 Formulario de correo, permite crear un formulario para él envió de
correos desde la web.
 Formulario de búsqueda, permite la implementación de un formulario
para la realización de búsqueda y el resultado si esta es ejecutada.
 Formulario de autentificación, permite la creación de un formulario de
autentificación para el registro de usuarios en el sitio.
20

5.4 Plugins
Ilustración 15: Plugins en la vista de detalle.
A continuación se especifican los principales plugins:
 Plugin general, contenido genérico para insertar u plugin que no está
disponible en la lista de opciones.
 Sistema de noticias, plugin de noticias instalado por el usuario del
backen para ser implementado en el sitio.
21

6. Iconos disponibles ambiente Backend
6.1 Principales iconos de acciones
En la siguiente sección se presentarán los principales iconos que ejecutan alguna
acción en las principales interfaces del ambiente backend en Typo3.
6.1.1 Barra principal en la parte superior de la página del Backend
En la parte superior del sitio web se encuentra la barra de herramienta principal
como ilustra la siguiente figura.
Ilustración 16: Barra Login
A continuación se especifican los principales iconos:
 Link a la página principal de typo3.
 Icono correspondiente al usuario logeado actualmente en el sitio
backend.
 Icono correspondiente al Logout del usuario para su salida del
ambiente backend del sitio.
 Menú de marcadores del sitio.
22

 Opciones para la eliminación de caché.
 Opción para la eliminación de la cache de frontend y páginas asociadas.
 Opción para la eliminación de la caché de frontend y paginas asociadas a
este. Además de la eliminación de la caché del backend y caches asociados.
 Selección de Workspace.
 Opciones de documentos abiertos y usados recientemente.
 Buscador de tablas.
23

6.6.2 Herramientas del área de trabajo Web Opción Page al momento de crear
una nueva página.
Ilustración 17: Barra de herramientas del campo de navegación.
A continuación se especifican las principales acciones:
 Icono “Crear nuevo”.
 Icono para crear una “Página estándar”.
 Icono para crear “Selección de usuario del backend”.
 Icono para la creación de “Acceso directo”.
 Icono para la creación de una “Pagina de montaje”.
 Icono para la creación de un “Enlace a URL externo”.
 Icono para la creación de una “Nueva carpeta”.
 Icono para la creación de “Papelera”.
 Icono para crear un “Separador visual en el menú”.
 Icono para realizar filtros al menú del campo de navegación.
 Icono “Actualización del árbol de navegación desde el servidor”.
6.1.3 Herramientas correspondientes a la vista de detalle Área de Trabajo Web.
24

En la vista de detalles, en la sección superior, esta compuesta por los iconos que son
ilustrado en la siguiente figura.
Ilustración 18: Barra de herramientas del campo vista de detalles, vista columna.
A continuación se especifican los principales iconos:
 Icono ayuda, entrega información sobre cómo se controla el contenido
de la vista seleccionada.
 Icono selección del tipo de vista para el campo de vista de
detalle.
 Icono que indica la ruta actual.
 Icono “Ver página” en la que se está trabajando.
 Icono “Editar propiedades de la página”, para la edición de la página
seleccionada en el campo de navegación.
 Icono “Borrar caché de esta página”, borra la caché de la página
 Icono “Agregar a favorito”, agrega la página seleccionada a favoritos.
Si se desea editar una las propiedades una página aparecen los iconos ilustrado en la
siguiente imagen.
25

Ilustración 19: Barra de herramientas correspondiente a “Editar propiedades de la
página”.
 Icono ayuda, entrega información sobre la edición de las propiedades
de la página.
 Icono que indica la ruta actual, en este caso página
portada, en este caso portada posee la Id número 1, tal como se indica.
 Icono “Cerrar documento”, cierra la página a editar.
 Icono “Guardar documento”, guarda los cambios realizados en la
edición de la página que se ha seleccionado en el campo de navegación.
 Icono “Guardar documento y ver página”, guarda los cambios
realizados en la página que se está editando y permite verlos una vez
guardados.
 Icono “Guardar y cerrar documento”, guarda los cambios realizados en
la página que se está editando y cierra el documento.
 Icono “Borrar”, borra los cambios realizados en la página.
 Icono “Abrir en nueva ventana”, abre el documento que se está editando
en una nueva ventana.
26

La vista de detalle presenta una vista de edición rápida como ilustra la siguiente
figura.
Ilustración 20: Barra de herramientas del campo vista de detalles, vista edición
rápida.
 Icono ayuda, entrega información sobre la edición rápida.
 Lista para la selección del tipo de vista para el campo de
vista de detalle.
 Lista para la selección de la posición del contenido
de la página a editar.
 Icono que indica la ruta actual, en este caso página
portada, en este caso portada posee la Id número 1, tal como se indica.
 Icono “Cerrar documento”, cierra la página a editar.
 Icono “Guardar documento”, guarda los cambios realizados en la
edición de la página que se ha seleccionado en el campo de navegación.
 Icono “Guardar documento y ver página”, guarda los cambios
realizados en la página que se está editando y permite verlos una vez
guardados.
 Icono “Guardar y cerrar documento”, guarda los cambios realizados en
la página que se está editando y cierra el documento.
 Icono “Re - ubicación elemento de contenido actual”, ubica el elemento.
27

 Icono “Ver página” en la que se está trabajando.
 Icono “Editar propiedades de la página”, para la edición de la página
 Icono “Borrar”, borra los cambios realizados en la página.
6.1.4 Herramientas correspondientes a la vista de detalle (Módulo Web,
List/Lista)
Si se selecciona la opción list los iconos de acciones se presentan en la siguiente
imagen:
Ilustración 21: Barra de herramientas del campo vista de detalles.
 Icono “Crear nuevo registro”, crea nuevo registro en la página de la lista
seleccionada.
 Icono “Volver”, vuelve a la vista de detalle del módulo web,
correspondiente a List.
28

6.1.5 Herramientas correspondiente a la vista de detalle (Módulo File/Archivos)
El áre de trabajo de Archivos se compone de principales elementos de acción como
ilustra la siguiente imagen.
Ilustración 22: Barra de herramientas del campo vista de detalle, módulo file.
 Icono “Cargar archivo”, carga un archivo al directorio de archivos de
Typo3.
 Icono “Creación de Fichero”, permite crear un nuevo fichero sea txt o
html.
Asimismo cada fichero dispone de un set de herramienta como se ilustran en la
imagen de continuación:
Ilustración 23: Barra de herramientas del campo vista de detalle, edición de
archivos.
29

Sus principales elementos se presentan a continuación:
 Icono “Edit metadata of this file”, edita la información metadata del
archive seleccionado, esta opción solo es para archivos.
 Icono “Edit content”, permite la edición de los contenidos del archivo
seleccionado, esta opción solo es disponibles para archivos.
 Icono “Copiar”, copia un archivo dentro del directorio seleccionado.
 Icono “Cortar”, corta el archivo o carpeta correspondiente.
 Icono “Cambiar nombre”, cambia el nombre a la carpeta o archivo
seleccionado.
 Icono “Info”, despega una ventana con la información correspondiente a
la carpeta o archivo seleccionado.
 Icono “Borrar”, borra la carpeta o archivo seleccionado.
30

6.1.6 Herramientas correspondientes a la vista de detalle (Módulo Admin Tool,
extensiones)
Ilustración 24: Barra de herramientas del campo vista de detalle, extensions
manage.
 Icono “Update to version”, actualiza la versión de la extensión
seleccionada.
 Icono “Desactivate”, desactiva la extensión seleccionada.
 Icono “Configure”, re direcciona a una nueva pestaña para la
configuración de la extensión.
 Icono “Execute the update script”, ejecuta el script de actualización de la
extensión.
 Icono “Download as zip”, descarga la extensión en un archivo zip.
 Icono “Download SQL Dump”, descarga el SQL de la extensión en un
archivo Dump.
 Icono “Upload Extension”, carga una nueva extensión a la lisa de
extensiones desde un directorio nuevo.
 Icono “Import and Install”, importa e instala la extensión seleccionada.
 Icono “Activate”, activa la extensión seleccionada.

31

7. Creación de template.
Una vez ingresado al backend de Typo3 (menú de administración). Debemos irnos a
File>Filelist, en la pantalla desplegada la derecha hacemos click en el icono
fileadmin y seleccionamos “New” como se muestra en la siguiente imagen.
Ilustración 25: Creación de Ficheros para template del sitio web.
Ahora crearemos una carpeta donde almacenaremos nuestro template, de nombre
“template_manual”, hacemos click en Create folders como se muestra en la
siguiente imagen.
Ilustración 26: Creación de Directorio.
32

Se puede ver que se agregado a fileadmin la carpeta recién creada. El siguiente
paso es s crear tres carpetas dentro de la carpeta template_manual y para esto es
necesario repetir los mismos pasos. Las nuevas carpetas las creamos con los
nombre; “css”, “img” y “ts”. La siguiente figura ilustra los pasos a seguir.
33

La imagen siguiente muestra como se deberían apreciar la estructura de directorio
resultante .
Ilustración 27: Estructura de directorio definitiva.
La estructura de directorio recién creada permitirá almacenar la estructura del nuevo
template separando las imágenes, estilos e instrucciones typoscript.
El paso siguiente es crear un fichero de plantilla para el template para esto es
necesario ir al área de trabajo “File”, a la opción Filelist y seleccionar el directorio
“template_manual” . Dentro de este formulario se realiza click en el icono “new”
como muestra la siguiente figura.
34

Ilustración 28: Selección de Opción de Creación de nuevo template.
Ingresamos el nombre del nuevo fichero denominado “template.html” y se procede
hacer click en el botón “Create file” como ilustra la próxima figura.
Ilustración 29: Creación de plantilla.
35

El siguiente paso es insertar el código HTML que estructura nuestro sitio en el
archivo template.html. Para ello debemos hacer click derecho sobre el icono de
nuestro archivo template.html y vamos donde dice edit.
Ilustración 30: Edición de Plantilla HTML.
En el archivo template.html se debe incorporar el siguiente código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEMPLATE BASICO</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</HEAD>
<BODY>

<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2">
Bienvenido a nuestro sitio de prueba
</td>
</tr>
<tr>
36

<td width="200">


</td>
<td width="600">


</td>
<td>


</td>
</tr>
</table>

</BODY>
</HTML>
Las líneas marcadas con rojo son etiquetas propias de Typo3 (markers) las cuales
indican donde queremos que Typo3 pueda incorporar elementos dinámicos dentro
de nuestro sitio web mediante sentencia TypoScript.
El siguiente paso es crear un archivo el cual contendrá el código de configuración en
sintaxis Typoscript. Se procdede a crear un nuevo archivo dentro de la carpeta “ts”
para esto es necesario ir al área de trabajo “File”, opción “Filelist” y seleccionar la
carpeta “ts” ubicada dentro del directorio “template_manual”. Se procede a
seleccionar el icono “New”. En el formulario resultante se ingresa index.txt y se
procede a seleccionar el botón “Create file”.
37

Ilustración 31: Creación de Fichero TypoScript.
A continuación debemos editar nuestro archivo index.txt, para ello debemos seguir
los mismos para editar nuestro template y copiar el siguiente código.
#--------------------------------------------------------------------------------------------------
-------
# CONTENIDO QUE MUESTRA EL MENU PRINCIPAL
#--------------------------------------------------------------------------------------------------
-------
# PAGE subnavigation
temp.menu_ejemplo = HMENU
temp.menu_ejemplo.entryLevel = 0
temp.menu_ejemplo.1 = TMENU
temp.menu_ejemplo.1.wrap = <ul class="menu menu1"><li> </li> | </ul>
temp.menu_ejemplo.1 {
# Propiedades del estado Normal
expAll = 1
38

NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
#Convierte las etiquetas de mos menus &
ACT = 1
ACT.stdWrap.htmlSpecialChars = 1
ACT.allWrap = <li>|</li>
}
#---------------- Objeto de menú del segundo nivel
--------------------------------------------------------
temp.menu_ejemplo.2 {
# Propiedades del estado normal:
expAll = 1
NO.allWrap = <li class="segundonivel">|</li>
NO.stdWrap.htmlSpecialChars = 1
#Convierte las etiquetas de mos menus &
ACT = 1
ACT.stdWrap.htmlSpecialChars = 1
ACT.allWrap = <li class="segundonivel">|</li>
}
#--------------------------------------------------------------------------------------------------
-------
# CONTENIDOS QUE CARGAN TODOS LOS CAMPOS DE EL PORTAL
#--------------------------------------------------------------------------------------------------
-------
# Default PAGE object:
39

page = PAGE
page.typeNum = 0
page.bodyTagMargins = 0
page.noLinkUnderlune = 0
page.stylesheet = fileadmin/template_manual/css/estilos.css
page.10 = TEMPLATE
page.10 {
#--------------------------------------------------------------------------------------------------
-------
# SE CARGA EL TEMPLATE DEL PORTAL
template = FILE
template.file = fileadmin/template_manual/template.html
#--------------------------------------------------------------------------------------------------
-------
# SE CARGAN LOS ESTILOS Y IMAGENES DEL PORTAL
relPathPrefix = fileadmin/template_manual/
#--------------------------------------------------------------------------------------------------
-------
# SE CARGA EL CONTENIDO DE LA PAGINA
workOnSubpart = DOCUMENT_BODY
#--------------------------------------------------------------------------------------------------
-------
# MUESTRA EL MENU PRINCIPAL
subparts.MENU= TEXT
subparts.MENU< temp.menu_ejemplo
40

#--------------------------------------------------------------------------------------------------
-------
# MUESTRA EL CONTENIDO CENTRAL
subparts.CONTENT = TEXT
subparts.CONTENT < styles.content.get
#--------------------------------------------------------------------------------------------------
-------
# MUESTRA EL CONTENIDO DERECHO
subparts.RIGHT = TEXT
subparts.RIGHT < styles.content.getRight
}
#--------------------------------------------------------------------------------------------------
-------
CONFIGURACIONES GENERALES
#--------------------------------------------------------------------------------------------------
-------
config.index_enable = 1
config.language = es
config.locale_all = spanish
options.clearCache.all = 1
options.clearCache.pages = 1
A continuación se describe con mas detalle el código del archivo index.txt.
El código que sigue a continuación, nos permite cargar todos los campos del portal.
A través de la declaración de un objeto page de tipo PAGE, decimos que este objeto
41

será el manipulador por defecto de cualquier petición que se envíe a una pagina de la
misma ramificación.
page = PAGE
page.typeNum = 0
page.bodyTagMargins = 0
page.noLinkUnderlune = 0
page.stylesheet = fileadmin/template_manual/css/estilos.css
page.10 = TEMPLATE
page.10 {
A continuación se muestra el código que carga el template de nuestro sitio
(template.html). La línea que se muestra en rojo, es la ruta de donde tenemos
almacenado nuestro template.
template = FILE
template.file = fileadmin/template_manual/template.html
El siguiente código nos permite cargar los estilos (css) de nuestro sitio, apuntando
tan solo a la carpeta raíz, como se muestra en la línea marcada con rojo.
relPathPrefix = fileadmin/template_manual/
Si recordamos el código del archivo template.html, este contenía unos marker que
indicaban al código typoscript donde queríamos insertar nuestro contenido en el
sitio. El código que viene a continuación con indica cual es el contenido que ira
dentro de los marker, identificando estos con las líneas que se muestran en rojo.
workOnSubpart = DOCUMENT_BODY
42

#----------------------------------------------------------------------------------------------------
# MUESTRA EL MENU PRINCIPAL
subparts.MENU= TEXT
subparts.MENU< temp.menu_ejemplo
#----------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO CENTRAL
subparts.CONTENT = TEXT
subparts.CONTENT < styles.content.get
#----------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO DERECHO
subparts.RIGHT = TEXT
subparts.RIGHT < styles.content.getRight
}
#----------------------------------------------------------------------------------------------------
Una vez que se ha procedido a crear el template y tener definido donde se ira el
contenido de nuestro sitio, será necesario definir su presentación, el tipo de letra, el
tamaño, el color y todas aquellas características que harán que el sitio sea mucho
mas amigable. Para ello existen los CSS u hojas de estilos los que serán guardados
dentro de la carpeta “css”.
Crearemos un archivo que llamaremos “estilos.css” el cual contendrá los estilos para
una tabla y para el body de nuestro sitio. Para crear el archivo debemos ir a
File>FileList>template_manual(carpeta)>css(carpeta), y hacemos click en “New”
como muestra la siguiente imagen.
43

Ilustración 32: Directorio donde se creará hoja de Estilo.
Crear un fichero con el nombre “estilos.css” como indica la próxima figura.
Ilustración 33: Creación de hoja de estilo
44

Ilustración 34: Hoja de Estilo Implementada.
Es necesario editar el archivo “estilos.css” para esto realizamos click derecho en el
icono del archivo y del menú se selecciona la opción “edit”. Dentro del fichero
“estilos.css” es necesario insertar el siguiente texto:
body {
font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background:#FFFFFF;
margin: 0;
padding: 0;
text-align: center;
}
table {
border-collapse:collapse;
border-spacing:10;
empty-cells:show;
}
td {vertical-align:top;}
tr, caption {vertical-align:top; text-align:left; font-style:normal; font-weight:
normal;
}
45

Ilustración 35: Editor de contenido de hoja de estilo.
Guardamos y con ello hemos terminado de crear nuestra hoja de estilo.
Ahora estamos listos para comenzar a crear las páginas que tendrá nuestro sitio y su
contenido. Una vez ingresado nuestro “username” y “password”, nos encontraremos
con la imagen que sigue a continuación. Esta nos muestra el administrador de
Typo3, donde al lado izquierdo tenemos todas las herramientas que Typo3 nos
proporciona. Al pinchar en cualquiera de ellas, nos muestra las opciones con las que
cuenta cada herramienta.
Lo primeros que haremos es crear una página de Inicio (home). Debemos ir a
Web>Function, en el menú desplegado a la derecha hacemos click derecho sobre
“New TYPO3 Site” y elegimos “New”.
46

Ilustración 36: Creación de nuevas páginas.
En el menú desplegado a la derecha seleccionamos Page (inside).
En la nueva ventana deseleccionamos la check “Hide page”, en la opción “Pagetitle”
escribimos el titulo de nuestra pagina, “home” y seleccionamos la opción “No
cache”. Guardamos y así hemos creado la página de inicio de nuestro sitio.
47

Luego vamos nuevamente a Web>Function y hacemos click sobre la pagina “home”
antes creada, se desplegara una ventana como muestra la imagen siguiente, con la
opción “Create multiple pages”, donde ingresaremos el nombre de dos sub-paginas;
menu1, menu2 y presionamos el botón “Create pages”.
48

Importante: No olvidar seleccionar la check box “No cache” una vez creadas las
paginas.
Ilustración 39: Creación múltiples de nuevas páginas.
Una vez creadas las paginas, vamos al menú de administración Web>Template;
hacemos click en nuestra pagina “home” y luego en la opción “Create template for a
new site” de la ventana desplegada a la derecha como se nuestra en la imagen
siguiente.
49

Ilustración 40: Creación template
Hacemos click en “Click here to edit whole template record”.
50

El resultado es la siguiente ventana.
En la sección Setup, ingresamos el código typoscript que se muestra a continuación.
La ruta que esta en rojo, le indica a Typo3 donde se encuentra el archivo que
contiene todo nuestro código typoscript que maneja el contenido de nuestro sitio.
51

<INCLUDE_TYPOSCRIPT: source="FILE:
fileadmin/template_manual/ts/index.txt">
Ilustración 43: Inserción de contenido typo3.
En la sección “Include static(from extensions), seleccionamos “CSS Style Content
(css_style_content)”.
Ilustración 44: Selección de CSS.
Finalmente guardamos y luego limpiamos la cache, para ello hacemos click en las
opciones del menú de administración que se indican a continuación:
52

8. Crear usuarios de backend.
Para crear usuarios backend debemos ir al módulo Web>List>New TYPO site
(página del proyecto) y hacemos click en la opción “Create New Record”.
Hacemos click en la opción “Backend user”
Ilustración 45: Creación de usuario Backend.
En la ventana desplegada crearemos nuestro nuevo usuario, con la configuración que
se muestra a continuación.
54

Ilustración 46: Creación de usuario Backend con opción admin.
Guardamos los cambios y el resultado es el siguiente.
Ilustración 47: Creación de usuario Backend.
55

Ahora es necesario ingresar al ambiente “backend” de Typo3 con el usuario recién
creado y de esta manera verificar si el registro fue creado correctamente.
9. Crear usuarios Frontend.
Los usuarios Frontend son usuarios que pueden acceder a contenido privado dentro
del ambiente Frontend del sitio web. Para la creación de usuario Frontend lo primero
es ingresar al backend con una cuenta con permisos de administrador que permita
crear el nuevo usuario. Nos dirigimos a la opción List/lista en el módulo web y en la
sección “Operadores” seleccionamos la opción para crear un nuevo registro.
Ilustración 48: Creación de un nuevo usuario vista de detalle.
56

Nos redireccionará a una nueva vista de detalles que contendrá un formulario
“Create new Operadores on root level” aquí se deben ingresar los datos generales
del nuevo usuario.
Ilustración 49: Vista detalles de las opciones generales del formulario para crear un
nuevo usuario.
En este mismo formulario podremos cambiar el idioma por defecto que tendrá el
sitio backend al que tendrá acceso el nuevo usuario.
57

En la pestaña “Access Rights” de “Create new Operadores on root level”
asignaremos el nivel de acceso que tendrá el nuevo usuario, es decir los módulos a
los que podrá acceder y donde podrá realizar cambios para el sitio.
Ilustración 50: Asignación de módulos de acceso.
Finalmente una vez configuradas todas las opciones guardamos todos y ya se habrá
creado un nuevo usuario con los permisos que se le fueron asignados.
58

10. Creación de nuevos ficheros.
A continuación mostraremos como crear carpetas y ficheros en el directorio
fileadmin. Es necesario ingresar al módulo File/Archivo y seleccionamos el archivo
raíz “fileadmin”.
Ilustración 51: Directorio raíz fileadmin.
Si se desea crear un nuevo fichero es necesario seleccionar el icono “New” como
ilustra la siguiente imagen.

Ilustración 52: Vista de detalle directorio fileadmin.
Seleccionado “New” se presentara un formulario donde nos pedirá el nombre de la
carpeta a crear, completamos el campo y seleccionamos “Create folders”.
61

Ilustración 53: Vista de detalle, creación de carpeta.
Una vez creada la carpeta tendremos la vista que se aprecia en la ilustración 8.
Ilustración 54: Creación de una nueva carpeta en el directorio fileadmin.
62

Creada la nueva carpeta en el directorio fileadmin es posible utilizar y albergar
nuevos contenidos dentro de ella. Ahora al ingresar a nuestra carpeta también nos
aparece la opción de cargar un archivo que se encuentre en nuestro Pc.
Ilustración 55: Vista de detalle, cargar un archivo desde otro directorio.
11. Crear una nueva página Frontend
Para a crear una nueva página es necesario ingresar al ambiente backend del sitio
web. Una vez iniciada sessión ir al módulo “Page”, seleccionar la página padre,
hacer click derecho en la página padre y del menú resulte hacer click en el opción n
“New”. Estos pasos se ilustrar en la próxima figura.
63

Ilustración 56: Creación de una nueva página del sitio.
Aparece el árbol de navegación correspondiente al sitio indicando los niveles
disponibles en donde se podrá crear la nueva página. Por ejemplo se seleccionara a
nivel de portada la creación de una nueva página.
Ilustración 57: Selección del nivel donde se creara la nueva página en el sitio.
64

Si se desea crear una nueva página es necesario completar los datos del formulario
presentado y finalmente guardar los cambios.
Ilustración 58: Formulario para crear una nueva página en el sitio.
65

12. Extensiones en Typo3
Básicamente, una extensión se puede definir como una nueva funcionalidad,
que no viene por defecto con la herramienta y que se puede incorporar a la misma,
aportando un valor añadido y extendiendo la funcionalidad inicial de la aplicación
base. Podríamos decir que una extensión es similar a lo que habitualmente se conoce
como plugin.
La idea general que subyace debajo de la idea de extensión, es aportar una
solución a un problema que con las funcionalidades iniciales que trae TYPO3 no se
consigue. A su vez, esta solución o funcionalidad nueva, se puede difundir e
incorporar fácilmente a lo que ya existe.
Las extensiones no están únicamente desarrolladas por miembros de TYPO3,
de hecho existe gran multitud de extensiones elaboradas por desarrolladores
independientes o empresas (Gobernalia, por ejemplo), que las publican y las ponen a
disposición de los demás. Nuevamente nos encontramos con una de las ideas básicas
del software libre.

Ilustración 59: Arquitectura typo3.
Las extensiones pueden ser de muy diversa naturaleza y pueden dar solución a
muy diversos problemas como añadir funcionalidades muy variadas al utilizarse
tanto en el frontend como en el backend, así pues, las extensiones pueden ser
plugins, módulos, aplicaciones lógicas, skins, aplicaciones de terceros, etc.
Como vemos, las extensiones deben tener una estructura definida y común a
todas, de modo que se puedan incorporar a TYPO3 de forma correcta. Para ello
67

TYPO3 incorpora una API de extensiones que permite que las extensiones se puedan
acoplar perfectamente y que puedan utilizar los servicios del CORE de la aplicación.
Las extensiones pueden trabajar de forma individual o pueden trabajar de
forma conjunta, es decir, por ejemplo, una extensión puede ser a su vez API de otras
muchas extensiones, o puede aportar datos que otras extensiones necesiten.
La experiencia nos dice que las extensiones pueden adoptar muchas formas
dentro de la aplicación. En algunas ocasiones la extensión se presenta como un
nuevo módulo en el menú principal, otras como una nueva utilidad dentro de un
módulo del menú, a veces como un nuevo componente de una página, o como un
tipo especial de plugin, incluso a veces, una vez instalada la extensión no notaremos
cambios aparentes, ya que puede que esa extensión sea API de otras extensiones. En
algunas ocasiones resulta difícil localizar los cambios que ha incorporado una
extensión una vez que ha sido instalada.
Se recomienda al lector, que si quiere profundizar más sobre este tema, visite la
documentación oficial que existe al respecto en el sitio web oficial de TYPO3.
Para la instalación de extensiones, en el panel izquierdo del backend seleccionar
la opción “Extension Manager”. Luego de esperar unos segundos se desplegara
un listado de extensiones disponibles en la opción Manage Extensions.
68

Ilustración 60: Listado de extensiones disponibles en Extension Manager.
La vista de Extension Manager dispone de tres alternativa:
- Manage extensións.
- Get extensións.
- Get preconfigured distribution.
69

Ilustración 61: Opciones disponibles para la instalación de extensiones.
Manage Extensions:
Esta alternativa muestra una lista de extensiones activas e inactivas. En esta lista se
puede observar además el estado de la extensión sea si esta estable o se encuentra
obsoleta.
Get extensións:
Esta opción de extensión manager presenta todas las extensiones disponibles para
Typo3 y desde aquí se pueden importar para su posterior instalación.
Ilustración 62: Detalles de extensión.
70

Get preconfigured distribution:
Se detallan un número de paquetes pre configurados para ser usado en el sitio. Cada
paquete dispone de una breve descripción y al seleccionar uno específico muestra
información sobre extensiones a instalar, sus dependencias y sugerencias.
Ilustración 63: Vista de distribuciones pre configuradas.
Para la instalación de extensiones también se encuentra disponible la alternativa para
cargar extensiones desde algún directorio del Pc. Se puede realizar esta acción a
través de un icono disponible en la parte superior de la sección de “Manage
Extensions”.
71

Ilustración 64: Instalación de extensiones disponible en directorios del Pc.
72

13. Habilitar extensión de Noticias (ayuda)
A continuación detallaremos los pasos a seguir para su configuración y posterior
uso. Comenzaremos creando una carpeta a nivel del campo de navegación
arrastrando el icono de carpeta que aparece seleccionando “Create new pages”.
Ilustración 65 Creación de una nueva carpeta.
La carpeta creada se denomina “news”. Se accede a su configuración y en la
pestaña “Access” desmarcaremos la opción “Disable”. Luego en la pestaña
“Behaviour” en la opción “Use as container” se selecciona la alternativa News como
indica la siguiente imagen.

Ilustración 66: Configuración de la extensión news.
Guardamos lo realizado y cerramos.
Ahora crearemos una página de noticia para realizamos el proceso de cómo crear
una nueva página visto anteriormente en este documento.
En la vista de detalle seleccionaremos “New content element” en “Plugins”
debemos seleccionar “News system”.
74

Ilustración 67: Creando nuevo contenido en la nueva página.
En la campo de módulos seleccionaremos el módulo News y seleccionaremos
nuestra página recién creada y seleccionaremos la opción “Create new news record”.
Ilustración 68: Creación de una nueva noticia.
De haberse realizado todos los pasos mencionados anteriormente nos debiera
aparecer un formulario donde agregaremos el contenido de la noticia a publicar en el
sitio.
Para mayor detalle en cuanto a completar el formulario para la nueva noticia
consultar el manual “Manual de Usuario - Ayuda” correspondiente a Capacitación de
usuarios.
75

Ilustración 69: Formulario para la creación de una nueva noticia.
76

Introdución Typo3 6.2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Introdución Typo3 6.2

Similar a Introdución Typo3 6.2 (20)

Más de Victor Aravena

Más de Victor Aravena (20)

Último

Último (20)

Introdución Typo3 6.2