Manual Typo3

Manual Typo3.

“Diseño e Implementación de un sitio básico con
Typo3”
Víctor Aravena

Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem.
Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Ronald Morales, ronald.morales@opensystem.cl
Distribución Licencia Creative Common2

INDICE
1. INTRODUCCION A TYPO3. ........................................................................... 3
2. INSTALACIÓN DE CMS TYPO3. ...................................................................... 4
3. CREACIÓN TEMPLATE. ............................................................................... 7
4. ESTILOS. ..............................................................................................16
5. CREACION DE PÁGINAS. ............................................................................18
6. INSTALACIÓN DE EXTENSIONES. ..................................................................28
6.1 Noticias .................................................................................... 31
6.2 Login. ...................................................................................... 46
Ahora procedemos a crear el Grupo a los que pertenecerán los usuarios. Para
ello vamos a ................................................................................... 47
List->Usuarios(carpeta)->Create new record. ......................................... 47
7. CREAR USUARIOS DE BACKEND. ..................................................................57
8. EXTENSIONES DE TYPO3 ...........................................................................61
¿Qué es una extensión? ..................................................................... 61
Gestión de las extensiones ................................................................. 63
9. TALLER DE TYPO3 ..................................................................................65

2 Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem.

1. INTRODUCCION A TYPO3.

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.
Esta herramienta cuenta con dos planos básicos de visualización del sitio web que va a
gestionar: el frontend y el backend. El frontend consiste básicamente en la vista que va a
tener un visitante cualquiera de la web, el sitio web visible en Internet. Por otro lado, el
backend, consiste en la vista que la herramienta nos ofrece para llevar a cabo la gestión del
sitio web. Dicha vista se accede a través de un procedimiento de autenticación, de modo
que sólo las personas autorizadas podrán acceder.
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 paralelos concernientes a
las extensiones.
Una característica a destacar sería el uso de un lenguaje propio denominado 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.
Quizá el hecho de que sea tan configurable, personalizable, ampliable y la incorporación de
un lenguaje propio, propicia que la curva de aprendizaje sea tan amplia.
Deberemos dedicarle mucho tiempo hasta que conseguimos comprender el funcionamiento de
TYPO3, y no obtendremos resultados satisfactorios hasta que no le hayamos dedicado gran
cantidad de horas de aprendizaje.


2. INSTALACIÓN DE CMS TYPO3.

Para descargar typo3, vaya a www.typo3.org, página oficial del Proyecto Typo3 y desde la
sección download descargamos TYPO3 Winstaller en su última versión estable.

Una vez descargado debemos ejecutar el instalador.

Para instalarlo simplemente aceptamos la licencia y seleccionamos Siguiente en todas las
pantallas. Una vez finalizada la instalación seleccionamos “Ejecutar TYPO3Winstaller”. O lo
ejecutamos directamente desde el menú inicio: Inicio->TYPO3->TYPO3.

Al ejecutar TYPO3 por primera vez comenzara con la carga y configuración de todas las
dependencias necesarias (Apache, Mysql, Php, etc.) para poder ejecutarse. Una vez finalizada
esta carga se abrirá el explorador web predeterminado de Windows y nos mostrará la pantalla
de inicio de la instalación de TYPO3. De no abrirse de forma automática el explorador de
internet podemos hacerlo manualmente e ingresar a esta url: http://localhost:8502 .


Debiera desplegarse la siguiente página en el explorador web:

Para visualizar las páginas que iremos creando debemos ingresar al frontend de Typo3 a través
de http://localhost:8502/
Para ingresar al menú de administración de Typo3 o backend debemos ingresar a través de
http://localhost:8504/typo3. La cuenta por defecto es:
Username: admin.
Password: password.


3. CREACIÓN 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.

Ahora crearemos una carpeta donde almacenaremos nuestro template, de nombre
“template_manual”, hacemos click en Create folders como se muestra en la siguiente imagen.


Podemos ver que se agregado la carpeta recién creada. Ahora necesitamos crear tres carpetas
más, dentro de la carpeta template_manual de la misma forma. Las nuevas carpetas las
creamos con los nombre; “css”, “img” y “ts”.

La imagen siguiente muestra como deberíamos ver las nuevas carpetas si hemos hecho todo
bien.


Con lo anterior hemos creado las carpetas donde almacenaremos todo nuestro template,
separando las imágenes, los estilos de nuestro sitio y los typoscript que usaremos.

Para crear nuestro template vamos a File>Filelist>template_manual (carpeta que hemos
creado antes) y hacemos click en new como muestra la siguiente imagen.

Ingresamos el nombre de nuestro template, para nuestro ejemplo template.html y hacemos
click en “Create file” como nuestra la imagen a continuación.


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.

El código es el siguiente.

<!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>
<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), indican donde
queremos que Typo3 coloque el contenido dentro de nuestro sitio.

A continuación crearemos un archivo que contendrá el código de configuración de typoscript,
dicha configuración manejara la parte visual de nuestro sitio. Como vimos en el código que
insertamos en nuestro archivo template.html, las líneas en rojo son etiquetas que apuntan a
la configuración que tendrá este nuevo archivo.

El nuevo archivo debemos crearlo dentro de la carpeta “ts”. Debemos ir a
File>Filelist>template_manual>ts y hacemos click en “new”. Ingresamos el nombre de nuestro
archivo, para nuestro ejemplo, index.txt y hacemos click en “Create file”.

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
NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1

#Convierte las etiquetas de mas menus &
ACT = 1
ACT.stdWrap.htmlSpecialChars = 1
ACT.allWrap = <li>|</li>
}

#---------------- Objeto de menú del segundo nivel ---------------------------------------------
-----------

# Propiedades del estado normal:
expAll = 1
NO.allWrap = <li class="segundonivel">|</li>
NO.stdWrap.htmlSpecialChars = 1
#Convierte las etiquetas de mas menus &
ACT = 1
ACT.allWrap = <li class="segundonivel">|</li>
}
#---------------------------------------------------------------------------------------------------------
# CARGA EL PLUGINS DE LOGIN
#---------------------------------------------------------------------------------------------------------
temp.loginbox < plugin.tx_newloginbox_pi1
temp.loginbox.storagePid = 5
temp.loginbox.redirectSuccess = 1
#---------------------------------------------------------------------------------------------------------
# CONTENIDOS QUE CARGAN TODOS LOS CAMPOS DE EL PORTAL
#---------------------------------------------------------------------------------------------------------
# Default PAGE object:
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

#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO CENTRAL
subparts.CONTENT = TEXT
subparts.CONTENT < styles.content.get
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO DERECHO
subparts.RIGHT = TEXT
subparts.RIGHT < styles.content.getRight
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL LOGIN
subparts.LOGIN < TEXT
subparts.LOGIN < temp.loginbox
}
#---------------------------------------------------------------------------------------------------------
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 más 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 será el
manipulador por defecto de cualquier petición que se envíe a una página de la misma
ramificación.

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
# Default PAGE object:


page = PAGE
page.typeNum = 0
page.bodyTagMargins = 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
#---------------------------------------------------------------------------------------------------------

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.

#---------------------------------------------------------------------------------------------------------

#---------------------------------------------------------------------------------------------------------

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.

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
subparts.MENU= TEXT


#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO CENTRAL
subparts.CONTENT = TEXT
subparts.CONTENT < styles.content.get
#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL LOGIN
}
#---------------------------------------------------------------------------------------------------------

Para poder insertar el “login” como contenido de nuestra página, además de indicar en
nuestro template donde queremos que este se encuentre, tenemos que instalar la extensión
“newloginbox”. La instalación de extensiones la veremos en detalle más adelante. Por ahora
solo veremos el código que es necesario para cargar el plugins, donde el numero 5 marcado
con rojo, apunta a la carpeta donde se encuentran los usuarios de nuestro sitio y el número 1,
apunta a la página donde serán redireccionado una vez ingresados como usuarios.

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------

#---------------------------------------------------------------------------------------------------------


4. ESTILOS.

Una vez que hemos creado nuestro template y tenemos definido donde ira el contenido de
nuestro sitio, definimos como queremos que se vea, el tipo de letra, el tamaño, el color y
todas aquellas características que harán que nuestro sitio sea mucho más 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.

Damos el nombre, “estilos.css” y hacemos click en “Create file”.


Editamos el archivo “estilos.css” haciendo click derecho en el icono del archivo y
seleccionamos “edit” he insertamos el siguiente código.

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;
}

Guardamos y con ello hemos terminado de crear nuestra hoja de estilo.


Ahora estamos listos para comenzar a crear las páginas que tendrán nuestro sitio y su
contenido.

5. CREACION DE PÁGINAS.

Lo primeros que haremos es crear una página de Inicio (home). Debemos ir a Web>Page, en el
menú desplegado a la derecha hacemos click derecho sobre “New TYPO3 Site” y elegimos
“New”.

En el menú a continuación seleccionamos la posición en la cual deseamos colocar la nueva
página, como es la primera que creamos solo veremos 2 posiciones posibles, seleccionamos
cualquiera.

En el menú a continuación ingresamos el nombre de la página, en este caso “Home”.


En la pestaña “Access” desmarcamos la opción Page -> Disable.


En la pestaña “Behaviour” marcamos la opción "Cache->Disable y luego procedemos a guardar
los cambios.

Luego vamos nuevamente a Web>Function y hacemos click sobre la página “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”.


Importante: No olvidar seleccionar la opción “Cache->Disable” una vez creadas las
páginas.

Una vez creadas las paginas, vamos al menú de administración Web->Template; hacemos click
en nuestra página “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.

Hacemos click en “Edit the whole template record”.


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 está 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.

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/template_manual/ts/index.txt">


En la pestaña “Includes”, en la sección “Include static (from extensios)” seleccionamos “CSS
Style Content (css_style_content)”.

Finalmente guardamos y luego limpiamos la cache, para ello hacemos click en las opciones del
menú de administración superior como se indica a continuación:


CREACIÓN DE MENÚ

El siguiente paso es incorporar la opción de menú. Debemos editar 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.

Debemos agregar el código que está en color azul. El código activa el menú.

<!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>
<td width="200">






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


</td>

<td>


</td>
</tr>
<tr>
<td colspan="3">




</td>
</tr>

</table>

</BODY>
</HTML>

El paso siguiente es personalizar el nombre del menú y habilitar los contenidos de derecha y
border. Debemos editar nuestro archivo index.txt que se encuentra en la carpeta ts. Se debe
modificar o agregar los códigos que están en color azul.

#---------------------------------------------------------------------------------------------------------
# CONTENIDO QUE MUESTRA EL MENU PRINCIPAL
#---------------------------------------------------------------------------------------------------------
# PAGE subnavigation temp.menu_ejemplo = HMENU temp.menu_ejemplo.entryLevel = 0
temp.menu_ejemplo.1.wrap = <ul class="menu menu1"><li>MENU</li> | </ul>

# Propiedades del estado Normal expAll = 1
NO.allWrap = <li>|</li> NO.stdWrap.htmlSpecialChars = 1

#Convierte las etiquetas de mos menus &
ACT = 1
ACT.allWrap = <li>|</li>
}

#---------------- Objeto de menú del segundo nivel ---------------------------------------------
-----------

# 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.allWrap = <li class="segundonivel">|</li>
}
#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
# Default PAGE object: page = PAGE page.typeNum = 0 page.bodyTagMargins = 0

page.stylesheet = fileadmin/template_manual/css/estilos.css page.10 = TEMPLATE
page.10 {

#---------------------------------------------------------------------------------------------------------
template = FILE
#---------------------------------------------------------------------------------------------------------

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------


subparts.MENU= TEXT


#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO CENTRAL subparts.CONTENT = TEXT subparts.CONTENT
< styles.content.get
#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO IZQUIERDO
subparts.LEFT = TEXT
subparts.LEFT < styles.content.getLeft

#---------------------------------------------------------------------------------------------------------
# MUESTRA EL CONTENIDO BORDER
subparts.BORDER = TEXT
subparts.BORDER < styles.content.getBorder
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL LOGIN
}
#---------------------------------------------------------------------------------------------------------
CONFIGURACIONES GENERALES
#---------------------------------------------------------------------------------------------------------
config.index_enable = 1
config.language = es config.locale_all = spanish

options.clearCache.all = 1
options.clearCache.pages = 1

Finalmente limpiamos CACHE del sitio y verificamos los cambios en el Frontend del sitio web.


6. INSTALACIÓN DE EXTENSIONES.

Ahora estamos listos para comenzar a insertar contenido en nuestro sitio. Para ello
instalaremos las extensiones que componen un portal básico (login, foro, noticias).
Para descargar las extensiones tenemos dos opciones:

 Conectarse al repositorio de Typo3.

 Descargar las extensiones de www.typo3.org.

Las extensiones que vamos a instalar son:

 tt_news.
 chc_forum.


Para importar una extensión desde el repositorio de TYPO3 al sitio debemos hacer click en el
ícono al lado del nombre de ésta.

Procedemos a realizar el mismo procedimiento con la extensión chc_forum.

Una vez importadas las extensiones procedemos a su instalación, para lo cual nos vamos a la
pestaña “Available Extensions”.
Para instalar una extensión hacemos click en el ícono al lado de su nombre. Una vez hecho el
click nos mostrará las operaciones que realizara en la base de datos el proceso de instalación de la
extensión, para continuar con éste presionamos el botón “Make updates”. Realizamos este
proceso con las 2 extensiones que ya importamos.


6.1 Noticias

Crearemos una carpeta con el nombre “Noticias”. Para esto seguimos los mismos pasos para
crear una página, pero en el menú “Type” seleccionamos “SysFolder”.

Nuestra carpeta tendrá la siguiente configuración.

Guardamos los cambios realizados. Si todo ha salido bien, se agregará una carpeta con el
icono de noticias como muestra la imagen a continuación.


Para crear un registro de noticias debemos seleccionar: Web->List->Noticias(carpeta)->Create
New Record.

En la pantalla a continuación seleccionamos “News”.


Los valores que tendrá nuestro registro serán los siguientes.


Guardamos los cambios y veremos la siguiente pantalla.

Ahora configuremos la página que permitirá visualizar las noticias individuales. Para esto
seleccionamos el modulo Web->Page->menu2 (pagina)->click derecho->Edit.


La configuraremos con los siguientes parámetros.

Finalmente guardamos los cambios.

Ahora insertaremos como contenido de la página “Noticias” el plugins de noticias. Para esto
seleccionamos “Create new content element”.


En el menú desplegado, iremos a la sección “plugins” y seleccionaremos “News”, y más abajo
en “Select position” seleccionaremos “Normal”.

El nuevo menú desplegado tiene configuración por XML (FlexForm) agrupada en cuatro
etiquetas. Los valores a editar son los que se muestran a continuación.


Para seleccionar el punto de montaje, la pagina para mostrar las noticias individuales o donde
deberá volver al leer la noticia se deberá seleccionar el icono carpeta.

En la ventana emergente seleccionamos la página “Noticias” para ver las noticias individuales.

Luego hacemos lo mismo para configurar donde deberemos volver al leer la noticia. En este
caso la página “Home”.

Como resultado tendremos la configuración que se muestra a continuación.

A continuación configuraremos la página que mostrara todas las noticias.

Seleccionamos el modulo Web>Page>Home(pagina). Verificamos que está habilitada la opción
Caché->Disable.


Guardamos los cambios.

Ahora configuraremos el plugin de noticias para lo cual procedemos a crea una nueva página,
que llamaremos “Lista de Noticias”, recuerden deshabilitar la caché y habilitar la página en la
pestaña Access.

Una vez creada la página procedemos a insertar el plugin de noticias en ella, seguimos los
mismos pasos que ya hemos realizado para cargar un plugin.


En plugin seleccionamos “News” y en position seleccionamos “Normal”, como vemos en la
imagen a continuación.


El plugin debe tener la siguiente configuración.


En las 2 primeras opciones “PageId for single news display” y “PageId to return to”
seleccionamos las páginas “Noticias” y “Home” respectivamente. En la opción “Page(s) with
tt_news records” debemos seleccionar la carpeta llamada “Noticias” que corresponde a la
última del menú de la izquierda en la siguiente imagen.


Ahora debemos ajustar la página “noticias” y hacerla submenú de la página “Lista de
Noticias”. Vamos a Web->Noticias->Move page.

Seleccionamos “Lista de Noticias” y luego la posición bajo esta.


El resultado debiera verse así:

Para finalizar necesitamos configurar una constante en el template del sitio (Configuración
local de la extensión). Para esto seleccionamos el modulo Web->Template->home(página).
Hacemos click en “click here to edit whole template record”.


En la sección “Include static (from extensions)” seleccionaremos los ítems relacionados con
noticias (news). Una vez hecho esto guardamos los cambios.

Necesitamos realizar otra configuración, ahora vamos a Web->Template->home(página). En la
lista superior seleccionamos “Constant Editor” y en “Category” seleccionamos
“PLUGIN_TT_NEWS_BASIC”.


Iremos a la variable “Starting Point (Pid_list)” donde ingresaremos el valor de “uid” de la
carpeta noticias, en este caso es el valor 11 (para revisar el valor uid de su carpeta “noticias”
deben pasar el mouse sobre ésta). Para ingresar dicho valor, seleccionamos la check Starting
Point (Pid_list)”, luego hacemos click en el ícono del lápiz e ingresamos el valor 11 en el
cuadro de texto y finalmente guardamos los cambios.

Para aplicar los cambios en el sitio, limpiamos la cache del sitio desde el menú de
administración, vamos a Web->View y vemos los resultados.

Más adelante veremos como asignar permisos a las distintas páginas, por ejemplo, que solo las
personas que están identificados como usuarios en nuestro sitio vean las noticias.


6.2 Login.

Para la creación del login lo primero es crear la carpeta que almacenará los
usuarios para ello vamos a List y creamos una nueva página.

La configuración de la página es la siguiente:


Una vez terminada la configuración guardamos los cambios.

Ahora procedemos a crear el Grupo a los que pertenecerán los usuarios. Para ello vamos a

List->Usuarios(carpeta)->Create new record.

En la lista desplegada seleccionamos “Website Usergoup”


La configuración es la siguiente:

Guardamos los cambios y repetimos el mismo paso para crear un Grupo, pero esta vez en
“System Records”
seleccionamos la opción “Website User”.

Ahora procedemos a la configuración, donde definimos el username, password y el usergroup
al cual pertenecerá el usuario, una vez realizado esto guardamos los cambios.


El último paso que nos queda es definir la página donde insertaremos la ventana de
login. Para esto vamos a Page->Home->Create new content element, en las
opciones seleccionamos “Login Form” y como posición “Right”.

La configuración del plugin es la siguiente:

Una vez realizada guardamos los cambios procedemos a visualizar el home.
Debiéramos ser capaces de ver la ventana de login en el lado derecho de la
página.


Ahora ingresamos en el login con los datos asignados previamente (username:carlosmontes
password:1234) y debiéramos ver la siguiente información.

6.3 Foro.

Crearemos una carpeta con el nombre “Foro”. Para esto lo haremos igual
como lo hicimos para crear la carpeta “Usuarios” con la siguiente
configuración.

Guardamos los cambios realizados. Si todo ha salido bien, se agregará una
carpeta con el nombre Foro como muestra la imagen a continuación.


Ahora debemos crear dos cosas básicas que tiene que tener nuestro foro; Categorías del Foro y
Conferencias del Foro.
Para ello debemos ir a modulo Web->List y hacemos click en el nombre de nuestra carpeta
Foro, luego hacemos click en “Create new Record”.

Ahora debemos crear la categoría de nuestro foro haciendo click en “Discussion Category” y
con la configuración que se muestra a continuación.


Guardamos los cambios y ahora debemos crear la posibilidad de postear en
nuestro foro. Para ello seguimos los mismos pasos para crear la categoría
pero ahora debemos seleccionar
“Discussion Message Posts” con la siguiente configuración.

Finalmente guardamos los cambios.


Para visualizar el foro que hemos creado en nuestro sitio, debemos insertar como
contenido el plugins CHC Forum en alguna página. Para ello debemos ir
al módulo Web->List->menu1(pagina)->Create new record y hacemos click en
“Click here for wizard!”.


Hacemos click en “WEC Discussion Forum” y le damos la siguiente configuración.

Ingresamos el título de la discusión y en campo Startingpoint buscamos y seleccionamos la
carpeta “Foro”


Guardamos los cambios y ahora estamos listos para empezar a ocupar el foro que hemos
creado en nuestro sitio.

Solo quedan unos ajustes por realizar.

En la sección Web->Page->menu1->edit cambiamos el nombre de la página a “Foro”.

Ahora debemos ir a Web->Template->Home->Info/Modify y seleccionamos
“Edit the whole template record”.


Agregamos el template correspondiente al foro y guardamos los cambios.

Con esto hemos creado el foro, si visualizamos la página veremos lo siguiente:


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


En la ventana desplegada crearemos nuestro nuevo usuario, con la configuración que se
muestra a continuación.

Guardamos los cambios y el resultado es el siguiente.


Para finalizar, podemos ingresar al ambiente “backend” de Typo3 con el usuario recién
creado.


8. EXTENSIONES DE TYPO3

¿Qué es una extensión?

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.


Las extensiones pueden ser de muy diversa naturaleza, pueden dar solución a muy
diversos problemas, añadir funcionalidades muy variadas, 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 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 (www.typo3.org
– www.typo3.cl ).

Gestión de las extensiones

TYPO3 incorpora una utilidad para llevar a cabo la gestión de las extensiones. Esta
utilidad aparece en el menú del backend con el nombre de “Ext Manager”.

Esta utilidad nos aporta cuatro vistas distintas:

 Loaded extensions: Nos muestra un listado de las extensiones que tenemos
instaladas actualmente.
 Available extensions to install: Presenta un listado con las extensiones que
tenemos descargadas aunque estén o no actualmente instaladas.
 Import extensions from online repository: Con esta vista podemos hacer
búsquedas en el repositorio online de extensiones. Nos da un listado de todas
las extensiones disponibles que coinciden con la búsqueda que estamos
haciendo.
 Settings: Nos permite configurar el usuario y contraseña de nuestro usuario
en el repositorio. Esta opción tiene sentido si estamos autorizados por TYPO3
para subir extensiones al repositorio. Para el sitio web de ASTROCAM no ha
hecho falta ningún tipo de autorización.


Para incorporar una extensión dentro de la aplicación, lo primero que deberemos hacer
es descargarnos dicha extensión. La descarga la podemos hacer desde el repositorio de TYPO3
en Internet o, sin salir de la herramienta, desde el “Ext Manager”.


9. TALLER DE TYPO3

Construya un sitio web utilizando un template propio que posee el siguiente mapa de
navegación.

 Home: Menú principal que debe tener noticias para el público en general.
Posteriormente se debe tener una imagen con acceso directo a la
http://www.tercera.cl y el formulario de acceso.
 Noticia: Pagina oculta para menú que visualiza la noticia individual.
 Noticias Intranet: Pagina de acceso restringido para los usuario de la intranet
que permita visualizar noticias internas.
 Foro: Pagina de acceso restringido para los usuario de la intranet que acceden a
temas internos.
 Volver a portada.

 Carpeta.
 Foro.
 Noticias.
 Usuario Intranet.

Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem.

Manual Typo3

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Manual Typo3

Semelhante a Manual Typo3 (20)

Mais de Victor Aravena

Mais de Victor Aravena (20)

Último

Último (20)

Manual Typo3