Manual Typo3 Version4.7

Manual Typo3.
Diseo e Implementacin de un sitio bsico con Typo3 Vctor Aravena
Centro de Estudio de Ingeniera de Software, Laboratorio OpenSystem. Vctor Aravena Daz, victor.aravena@ceisufro.cl, Distribucin Licencia Creative Common2
INDICE
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
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.
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 .
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.
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.
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.
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.
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 template.html y vamos donde dice edit. de nuestro archivo
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.
10
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 = TMENU temp.menu_ejemplo.1 { # Propiedades del estado Normal expAll = 1 NO.allWrap = <li>|</li> NO.stdWrap.htmlSpecialChars = 1
11
#Convierte las etiquetas de mos menus & ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = <li>|</li> } #---------------- Objeto de men del segundo nivel ------------------------------------------------------temp.menu_ejemplo.2 = 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 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/ #---------------------------------------------------------------------------------------------------------
12
# 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. #--------------------------------------------------------------------------------------------------------# 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
13
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. #--------------------------------------------------------------------------------------------------------# SE CARGA EL TEMPLATE DEL PORTAL template = FILE template.file = fileadmin/template_manual/template.html #---------------------------------------------------------------------------------------------------------
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. #--------------------------------------------------------------------------------------------------------# SE CARGAN LOS ESTILOS Y IMAGENES DEL PORTAL relPathPrefix = fileadmin/template_manual/ #--------------------------------------------------------------------------------------------------------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.
#--------------------------------------------------------------------------------------------------------# 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
14
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 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. #--------------------------------------------------------------------------------------------------------# CARGA EL PLUGINS DE LOGIN #--------------------------------------------------------------------------------------------------------temp.loginbox < plugin.tx_newloginbox_pi1 temp.loginbox.storagePid = 5 temp.loginbox.redirectSuccess = 1 #---------------------------------------------------------------------------------------------------------
15
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.
16
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.
17
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.
18
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.
19
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.
20
Hacemos click en Edit the whole template record.
El resultado es la siguiente ventana.
21
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).
22
Finalmente guardamos y luego limpiamos la cache, para ello hacemos click en las opciones del men de administracin superior como se indica a continuacin:
23
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>
24
<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 = TMENU temp.menu_ejemplo.1.wrap = <ul class="menu menu1"><li>MENU</li> | </ul> temp.menu_ejemplo.1 = TMENU 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> } #---------------- Objeto de men del segundo nivel -------------------------------------------------------
25
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 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 subparts.MENU= TEXT
26
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 DERECHO subparts.LEFT = TEXT subparts.LEFT < styles.content.getLeft #--------------------------------------------------------------------------------------------------------# MUESTRA EL CONTENIDO DERECHO 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 y verificamos en el Frontend del sitio web.
27
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.
28
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.
29
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.
30
Para crear un registro de noticias debemos seleccionar: Web->List->Noticias(carpeta)->Create New Record.
En la pantalla a continuacin seleccionamos News.
31
Los valores que tendr nuestro registro sern los siguientes.
32
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.
33
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.
34
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.
35
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.
36
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.
37
El plugin debe tener la siguiente configuracin.
38
39
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.
40
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.
41
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.
42
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.
43
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.
44
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.
45
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.
46
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.
47
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.
48
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.
49
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!.
50
Hacemos click en WEC Discussion Forum y le damos la siguiente configuracin.
Ingresamos el ttulo de la discusin y como Startingpoint la carpeta Foro.
51
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.
52
Con esto hemos creado el foro, si visualizamos la pgina veremos lo siguiente:
53
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.
54
Guardamos los cambios y el resultado es el siguiente.
Ahora podemos ingresar al backend de Typo3 con el usuario recin creado.
55
56
57
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.
58
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.
59
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.
60
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

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Typo3 Version4.7

Enviado por

Direitos autorais:

Formatos disponíveis

Manual Typo3.

Diseo e Implementacin de un sitio bsico con Typo3 Vctor Aravena

Una vez descargado debemos ejecutar el instalador.

Debiera desplegarse la siguiente pgina en el explorador web:

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

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

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

Hacemos click en Edit the whole template record.

El resultado es la siguiente ventana.

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

Descargar las extensiones de www.typo3.org.

Las extensiones que vamos a instalar son: tt_news. chc_forum.

Procedemos a realizar el mismo procedimiento con la extensin chc_forum.

Nuestra carpeta tendr la siguiente configuracin.

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

En la pantalla a continuacin seleccionamos News.

Los valores que tendr nuestro registro sern los siguientes.

Guardamos los cambios y veremos la siguiente pantalla.

La configuraremos con los siguientes parmetros.

Guardamos los cambios.

El plugin debe tener la siguiente configuracin.

Seleccionamos Lista de Noticias y luego la posicin bajo esta.

El resultado debiera verse as:

La configuracin de la pgina es la siguiente:

Una vez terminada la configuracin guardamos los cambios.

En la lista desplegada seleccionamos Website Usergoup

Guardamos los cambios.

La configuracin del plugin es la siguiente:

Guardamos los cambios y ya tenemos listo nuestro foro.

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

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

Agregamos el template correspondiente al foro y guardamos los cambios.

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

Guardamos los cambios y el resultado es el siguiente.

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

Você também pode gostar