Manual Typo3 Version4.7-Libre

Centro de Estudio de Ingeniera de Software, Laboratorio OpenSystem.
Vctor Aravena Daz, victor.aravena@ceisufro.cl, Distribucin Licencia Creative Common2

Manual Typo3.

Diseo e Implementacin de un sitio bsico con
Typo3
Vctor Aravena

2
I NDI CE
1. INTRODUCCION A TYPO3. ........................................................................... 3
2. INSTALACIN DE CMS TYPO3. ...................................................................... 4
3. CREACIN TEMPLATE. ............................................................................... 7
4. ESTILOS. ..............................................................................................16
5. CREACION DE PGINAS. ............................................................................18
6. INSTALACIN DE EXTENSIONES. ..................................................................24
7.1 Noticias .................................................................................... 30
7.2 Login. ...................................................................................... 44
7.3 Foro. ....................................................................................... 48
7. CREAR USUARIOS DE BACKEND. ..................................................................53
8. EXTENSIONES DE TYPO3 ...........................................................................58
Qu es una extensin? ..................................................................... 58
Gestin de las extensiones ................................................................. 60
9. TALLER DE TYPO3 ..................................................................................62

3

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 gestin de los contenidos que se
publican en la web.
Esta herramienta cuenta con dos planos bsicos de visualizacin del sitio web que va a
gestionar: el frontend y el backend. El frontend consiste bsicamente 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 gestin del
sitio web. Dicha vista se accede a travs de un procedimiento de autenticacin, de modo
que slo las personas autorizadas podrn acceder.
A su vez, esta aplicacin puede ser configurable, personalizable y ampliable, bien sea por las
propias utilidades que incorpora o mediante la instalacin de extensiones.
Es una aplicacin 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 caracterstica a destacar sera 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 configuracin ms exhaustiva del sitio web.
Quiz el hecho de que sea tan configurable, personalizable, ampliable y la incorporacin 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.

4
2. INSTALACIN DE CMS TYPO3.
Para descargar typo3, vaya a www.typo3.org, pgina oficial del Proyecto Typo3 y desde la
seccin download descargamos TYPO3 Winstaller en su ltima versin 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 instalacin 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 configuracin 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 instalacin de TYPO3. De no abrirse de forma automtica el explorador de
internet podemos hacerlo manualmente e ingresar a esta url: http://localhost:8502 .

5
Debiera desplegarse la siguiente pgina en el explorador web:

Para visualizar las pginas que iremos creando debemos ingresar al frontend de Typo3 a travs
de http://localhost:8502/
Para ingresar al men de administracin de Typo3 o backend debemos ingresar a travs de
http://localhost:8504/typo3. La cuenta por defecto es:
Username: admin.
Password: password.

6

7

4. CREACIN TEMPLATE.

Una vez ingresado al backend de Typo3 (men de administracin). 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.

8
Podemos ver que se agregado la carpeta recin creada. Ahora necesitamos crear tres carpetas
mas, 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 deberamos ver las nuevas carpetas si hemos hecho todo
bien.

9
Con lo anterior hemos creado las carpetas donde almacenaremos todo nuestro template,
separando las imgenes, 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 continuacin.

10
El siguiente paso es insertar el cdigo 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 cdigo 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 lneas marcadas con rojo son etiquetas propias de Typo3 (markers), indican donde
queremos que Typo3 coloque el contenido dentro de nuestro sitio.

11
A continuacin crearemos un archivo que contendr el cdigo de configuracin de typoscript,
dicha configuracin manejara la parte visual de nuestro sitio. Como vimos en el cdigo que
insertamos en nuestro archivo template.html, las lneas en rojo son etiquetas que apuntan a
la configuracin 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 continuacin debemos editar nuestro archivo index.txt, para ello debemos seguir los mismos
para editar nuestro template y copiar el siguiente cdigo.

#---------------------------------------------------------------------------------------------------------
# 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

12
#Convierte las etiquetas de mos 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>
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/

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

13
# 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 continuacin se describe con mas detalle el cdigo del archivo index.txt.

El cdigo que sigue a continuacin, nos permite cargar todos los campos del portal. A travs
de la declaracin de un objeto page de tipo PAGE, decimos que este objeto ser el
manipulador por defecto de cualquier peticin que se enve a una pagina de la misma
ramificacin.

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
page = PAGE
page.typeNum = 0


14
page.10 = TEMPLATE
page.10 {

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

A continuacin se muestra el cdigo que carga el template de nuestro sitio (template.html).
La lnea que se muestra en rojo, es la ruta de donde tenemos almacenado nuestro template.

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

El siguiente cdigo nos permite cargar los estilos (css) de nuestro sitio, apuntando tan solo a la
carpeta raz, como se muestra en la lnea marcada con rojo.

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

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

Si recordamos el cdigo del archivo template.html, este contena unos marker que indicaban
al cdigo typoscript donde queramos insertar nuestro contenido en el sitio. El cdigo que
viene a continuacin con indica cual es el contenido que ira dentro de los marker,
identificando estos con las lneas que se muestran en rojo.

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

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

15
#---------------------------------------------------------------------------------------------------------
# MUESTRA EL LOGIN
}
#---------------------------------------------------------------------------------------------------------

Para poder insertar el login como contenido de nuestra pagina, adems de indicar en
nuestro template donde queremos que este se encuentre, tenemos que instalar la extensin
newloginbox. La instalacin de extensiones la veremos en detalle mas adelante. Por ahora
solo veremos el cdigo 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 numero 1,
apunta a la pagina donde seran redireccionado una vez ingresados como usuarios.

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

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

16
5. 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 tamao, el color y
todas aquellas caractersticas que harn que nuestro sitio sea mucho mas amigable. Para ello
existen los CSS u hojas de estilos los que seran 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.

17

Editamos el archivo estilos.css haciendo click derecho en el icono del archivo y
seleccionamos edit he insertamos el siguiente cdigo.

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 pginas que tendr nuestro sitio y su
contenido.

18
6. CREACION DE PGINAS.
Lo primeros que haremos es crear una pgina 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 continuacin seleccionamos la posicin en la cual deseamos colocar la nueva
pgina, como es la primera que creamos solo veremos 2 posiciones posibles, seleccionamos
cualquiera.

En el men a continuacin ingresamos el nombre de la pgina, en este caso Home.

19

En la pestaa Access desmarcamos la opcin Page -> Disable.

En la pestaa Behaviour marcamos la opcin "Cache->Disable y luego procedemos a guardar
los cambios.

20
Luego vamos nuevamente a Web>Function y hacemos click sobre la pgina Home antes
creada, se desplegara una ventana como muestra la imagen siguiente, con la opcin Create
multiple pages, donde ingresaremos el nombre de dos sub-paginas; menu1, menu2 y
presionamos el botn Create pages.

Importante: No olvidar seleccionar la opcin Cache->Disable una vez creadas las
paginas.

Una vez creadas las paginas, vamos al men de administracin Web->Template; hacemos click
en nuestra pgina Home y luego en la opcin Create template for a new site de la
ventana desplegada a la derecha como se nuestra en la imagen siguiente.

21

Hacemos click en Edit the whole template record.

El resultado es la siguiente ventana.

22

En la seccin Setup, ingresamos el cdigo typoscript que se muestra a continuacin. La ruta
que esta en rojo, le indica a Typo3 donde se encuentra el archivo que contiene todo nuestro
cdigo typoscript que maneja el contenido de nuestro sitio.

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

En la pestaa Includes, en la seccin Include static (from extensios) seleccionamos CSS
Style Content (css_style_content).

23
Finalmente guardamos y luego limpiamos la cache, para ello hacemos click en las opciones del
men de administracin superior como se indica a continuacin:

24
CREACIN DE MEN
El siguiente paso es incorporar la opcin de men. Debemos editar el cdigo 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 cdigo que est en color azul. El cdigo 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>

25

<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 cdigos que estn 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>

ACT = 1
ACT.allWrap = <li>|</li>
}

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

26

# Propiedades del estado normal:
expAll = 1
NO.allWrap = <li class="segundonivel">|</li>
ACT = 1
ACT.allWrap = <li class="segundonivel">|</li>
}
#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10 {

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

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

27

#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
#---------------------------------------------------------------------------------------------------------
subparts.LEFT = TEXT
subparts.LEFT < styles.content.getLeft

#---------------------------------------------------------------------------------------------------------
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 y verificamos en el Frontend del sitio web.

28
7. INSTALACIN DE EXTENSIONES.

Ahora estamos listos para comenzar a insertar contenido en nuestro sitio. Para ello
instalaremos las extensiones que componen un portal bsico (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 extensin desde el repositorio de TYPO3 al sitio debemos hacer click en el
cono al lado del nombre de sta.

29
Procedemos a realizar el mismo procedimiento con la extensin chc_forum.

Una vez importadas las extensiones procedemos a su instalacin, para lo cual nos vamos a la
pestaa Available Extensions.
Para instalar una extensin 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
instalacin de la extensin, para continuar con ste presionamos el botn Make updates.
Realizamos este proceso con las 2 extensiones que ya importamos.

30
7.1 Noticias

Crearemos una carpeta con el nombre Noticias. Para esto seguimos los mismos pasos para
crear una pgina, pero en el men Type seleccionamos SysFolder.

Nuestra carpeta tendr la siguiente configuracin.

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

31

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

En la pantalla a continuacin seleccionamos News.

32
Los valores que tendr nuestro registro sern los siguientes.

33
Guardamos los cambios y veremos la siguiente pantalla.

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

La configuraremos con los siguientes parmetros.

34

Finalmente guardamos los cambios.

Ahora insertaremos como contenido de la pagina Noticias el plugins de noticias. Para esto
seleccionamos Create new content element.

En el men desplegado, iremos a la seccin plugins y seleccionaremos News, y ms abajo
en Select position seleccionaremos Normal.

35

El nuevo men desplegado tiene configuracin por xml (FlexForm) agrupada en cuatro
etiquetas. Los valores a editar son los que se muestran a continuacin.

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.

36
En la ventana emergente seleccionamos la pagina Noticias para ver las noticias individuales.

Luego hacemos lo mismo para configurar donde deberemos volver al leer la noticia. En este
caso la pagina Home.

Como resultado tendremos la configuracin que se muestra a continuacin.

A continuacin configuraremos la pgina que mostrara todas las noticias.

Seleccionamos el modulo Web>Page>Home(pagina). Verificamos que est habilitada la opcin
Cach->Disable.

Guardamos los cambios.

37
Ahora configuraremos el plugin de noticias para lo cual procedemos a crea una nueva pgina,
que llamaremos Lista de Noticias, recuerden deshabilitar la cach y habilitar la pgina en la
pestaa Access.

Una vez creada la pgina 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 continuacin.

38

El plugin debe tener la siguiente configuracin.

39

40
En las 2 primeras opciones PageId for single news display y PageId to return to
seleccionamos las pginas Noticias y Home respectivamente. En la opcin 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 pgina noticias y hacerla submen de la pgina Lista de
Noticias. Vamos a Web->Noticias->Move page.

41
Seleccionamos Lista de Noticias y luego la posicin bajo esta.

El resultado debiera verse as:

Para finalizar necesitamos configurar una constante en el template del sitio (Configuracin
local de la extensin). Para esto seleccionamos el modulo Web->Template->home(pgina).
Hacemos click en click here to edit whole template record.

42

En la seccin Include static (from extensions) seleccionaremos los tems relacionados con
noticias (news). Una vez hecho esto guardamos los cambios.

Necesitamos realizar otra configuracin, ahora vamos a Web->Template->home(pgina). En la
lista superior seleccionamos Constant Editor y en Category seleccionamos
PLUGIN_TT_NEWS_BASIC.

43

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 lpiz 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
administracin, vamos a Web->View y vemos los resultados.

Ms adelante veremos como asignar permisos a las distintas paginas, por ejemplo, que solo las
personas que estn identificados como usuarios en nuestro sitio vean las noticias.

44
7.2 Login.

Para la creacin del login lo primero es crear la carpeta que almacenar los usuarios para ello
vamos a List y creamos una nueva pgina.

La configuracin de la pgina es la siguiente:

Una vez terminada la configuracin guardamos los cambios.

45
Ahora procedemos a crear el Grupo a los que pertenecern los usuarios. Para ello vamos a
List->Usuarios(carpeta)->Create new record.

En la lista desplegada seleccionamos Website Usergoup

La configuracin es la siguiente:

Guardamos los cambios.

46

Ahora repetimos el mismo paso para crear un Grupo, pero esta vez en System Records
seleccionamos la opcin Website User.

Ahora procedemos a la configuracin, 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 pgina donde insertaremos la ventana de login. Para
esto vamos a Page->Home->Create new content element, en las opciones seleccionamos
Login Form y como posicin Right.

47
La configuracin del plugin es la siguiente:

Una vez realizada guardamos los cambios procedemos a visualizar el home. Debiramos ser
capaces de ver la ventana de login en el lado derecho de la pgina.

Ahora ingresamos en el login con los datos asignados previamente (username:carlosmontes
password:1234) y debiramos ver la siguiente informacin.

48
7.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 configuracin.

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

Ahora debemos crear dos cosas bsicas que tiene que tener nuestro foro; Categoras 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.

49
Primero debemos crear la categora de nuestro foro haciendo click en Discussion Category y
con la configuracin que se muestra a continuacin.

Guardamos los cambios y ahora debemos crear la posibilidad de postear en nuestro foro. Para
ello seguimos los mismos pasos para crear la categora pero ahora debemos seleccionar
Discussion Message Posts con la siguiente configuracin.

50
Guardamos los cambios y ya tenemos listo nuestro foro.

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

51
Hacemos click en WEC Discussion Forum y le damos la siguiente configuracin.

Ingresamos el ttulo de la discusin y como Startingpoint la carpeta Foro.

52
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 seccin Web->Page->menu1->edit cambiamos el nombre de la pgina 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.

53
Con esto hemos creado el foro, si visualizamos la pgina veremos lo siguiente:

54
8. CREAR USUARIOS DE BACKEND.
Para crear usuarios backend debemos ir al mdulo Web>List>New TYPO site (pgina del
proyecto) y hacemos click en la opcin Create New Record.

Hacemos click en la opcin Backend user

En la ventana desplegada crearemos nuestro nuevo usuario, con la configuracin que se
muestra a continuacin.

55

Guardamos los cambios y el resultado es el siguiente.

Ahora podemos ingresar al backend de Typo3 con el usuario recin creado.

56

57

58

9. EXTENSIONES DE TYPO3
Qu es una extensin?
Bsicamente, una extensin 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 aadido y extendiendo la funcionalidad inicial de la aplicacin base. Podramos decir
que una extensin es similar a lo que habitualmente se conoce como plugin.
La idea general que subyace debajo de la idea de extensin, es aportar una solucin a
un problema que con las funcionalidades iniciales que trae TYPO3 no se consigue. A su vez,
esta solucin o funcionalidad nueva, se puede difundir e incorporar fcilmente a lo que ya
existe.
Las extensiones no estn 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 disposicin de los dems.
Nuevamente nos encontramos con una de las ideas bsicas del software libre.

59

Las extensiones pueden ser de muy diversa naturaleza, pueden dar solucin a muy
diversos problemas, aadir funcionalidades muy variadas, utilizarse tanto en el frontend como
en el backend, as pues, las extensiones pueden ser plugins, mdulos, aplicaciones lgicas,
skins, aplicaciones de terceros, etc.
Como vemos, las extensiones deben tener una estructura definida y comn 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 aplicacin.

60
Las extensiones pueden trabajar de forma individual o pueden trabajar de forma
conjunta, es decir, por ejemplo, una extensin 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
aplicacin. En algunas ocasiones la extensin se presenta como un nuevo mdulo en el men
principal, otras como una nueva utilidad dentro de un mdulo del men, a veces como un
nuevo componente de una pgina, o como un tipo especial de plugin, incluso a veces, una vez
instalada la extensin no notaremos cambios aparentes, ya que puede que esa extensin sea
API de otras extensiones. En algunas ocasiones resulta difcil localizar los cambios que ha
incorporado una extensin una vez que ha sido instalada.
Se recomienda al lector, que si quiere profundizar ms sobre este tema, visite la
documentacin oficial que existe al respecto en el sitio web oficial de TYPO3.
Gestin de las extensiones
TYPO3 incorpora una utilidad para llevar a cabo la gestin 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 estn o no actualmente instaladas.
Import extensions from online repository: Con esta vista podemos hacer
bsquedas en el repositorio online de extensiones. Nos da un listado de todas
las extensiones disponibles que coinciden con la bsqueda que estamos
haciendo.
Settings: Nos permite configurar el usuario y contrasea de nuestro usuario
en el repositorio. Esta opcin tiene sentido si estamos autorizados por TYPO3
para subir extensiones al repositorio. Para el sitio web de ASTROCAM no ha
hecho falta ningn tipo de autorizacin.

Para incorporar una extensin dentro de la aplicacin, lo primero que deberemos hacer
es descargarnos dicha extensin. La descarga la podemos hacer desde el repositorio de TYPO3
en Internet o, sin salir de la herramienta, desde el Ext Manager.

61


9. TALLER DE TYPO3

Construya un sitio web utilizando un template propio que posee el siguiente mapa de
navegacin.

Home: Men principal que debe tener noticias para el pblico 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.

Manual Typo3 Version4.7-Libre

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual Typo3 Version4.7-Libre

Încărcat de

Drepturi de autor:

Formate disponibile

Centro de Estudio de Ingeniera de Software, Laboratorio OpenSystem.

Vctor Aravena Daz, victor.aravena@ceisufro.cl, Distribucin Licencia Creative Common2

S-ar putea să vă placă și