Introdución Typo3 6.2

Introducción a 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 nuevapá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 [email protected] 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.

mailto:[email protected]

http://cl.linkedin.com/in/victoraravena

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

Technology

Transcript of Introdución Typo3 6.2