manual typo3

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

Víctor Aravena Díaz, [email protected]; Ronald Morales, [email protected]

Distribución Licencia Creative Common2

Manual Typo3.

“Diseño e Implementación de un sitio básico con

Typo3”

Víctor Aravena




2

I N D I C E

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




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




4

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 .

http://www.typo3.org/

http://localhost:8502/




5

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.

http://localhost:8502/

http://localhost:8504/typo3




6




7

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.




8

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.




9

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.

10

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>




11

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 = TMENU temp.menu_ejemplo.1 { # Propiedades del estado Normal




12

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 -------------------------------------------------------- temp.menu_ejemplo.2 = TMENU temp.menu_ejemplo.2 { # 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.stdWrap.htmlSpecialChars = 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




13

#--------------------------------------------------------------------------------------------------------- # 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. #--------------------------------------------------------------------------------------------------------- # CONTENIDOS QUE CARGAN TODOS LOS CAMPOS DE EL PORTAL #--------------------------------------------------------------------------------------------------------- # Default PAGE object:




14

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. #--------------------------------------------------------------------------------------------------------- # SE CARGA EL TEMPLATE DEL PORTAL 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. #--------------------------------------------------------------------------------------------------------- # SE CARGAN LOS ESTILOS Y IMAGENES DEL PORTAL 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. #--------------------------------------------------------------------------------------------------------- # SE CARGA EL CONTENIDO DE LA PAGINA workOnSubpart = DOCUMENT_BODY #--------------------------------------------------------------------------------------------------------- # MUESTRA EL MENU PRINCIPAL subparts.MENU= TEXT subparts.MENU< temp.menu_ejemplo




15

#--------------------------------------------------------------------------------------------------------- # 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 } #--------------------------------------------------------------------------------------------------------- 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. #--------------------------------------------------------------------------------------------------------- # CARGA EL PLUGINS DE LOGIN #--------------------------------------------------------------------------------------------------------- temp.loginbox < plugin.tx_newloginbox_pi1 temp.loginbox.storagePid = 5 temp.loginbox.redirectSuccess = 1 #---------------------------------------------------------------------------------------------------------




16

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




17

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.




18

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




19

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




20

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




21

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




22

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




23

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:

24

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>

25

<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 = TMENU

temp.menu_ejemplo.1.wrap = <ul class="menu menu1"><li>MENU</li> | </ul>


temp.menu_ejemplo.1 {

# Propiedades del estado Normal expAll = 1

NO.allWrap = <li>|</li> NO.stdWrap.htmlSpecialChars = 1

#Convierte las etiquetas de mos menus &

ACT = 1

ACT.stdWrap.htmlSpecialChars = 1

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

}




26

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

}

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

# 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




27

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

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

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




28

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.





29

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.




30




31

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.




32

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

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




33

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




34

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.




35

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




36

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.




37

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.




38

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.




39

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




40

El plugin debe tener la siguiente configuración.




41

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.




42

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.




43

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




44

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




45

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.




46

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:




47

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”




48

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.




49

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.




50

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.




51

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.




52

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.




53

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




54

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”




55

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




56

Agregamos el template correspondiente al foro y guardamos los cambios.

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




57

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”




58

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.




59

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




60




61

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.




62

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.




63

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.


http://www.typo3.cl/




64

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.

http://www.tercera.cl/

manual typo3

Technology