Despabilando la Mononeurona ::

TYPO3 (T3) ha sido desarrollado por 50 personas durante ocho intensivos años... no intente comprender y dominar todo esa riqueza en una semana! Aprender TYPO3 puede ser un ejercico excesivo incluso para un webmaster/desarrollador experto. En mi opinión no se le debe dedicar más de tres horas al días durante unas tres semanas o acabará harto de picar tantos iconos sin sentido.

A la quinta semana uno se empieza a sentir cómodo, ha tomar velocidad en el desarrollo y empieza a programar sus primeros TypoScrypt. Todo es cosa de ser paciente y dejar T3 cuando se comienza a sentir demasiada frustración. Advertido está ;-)

Una vez instalado Typo3, podemos acceder a la zona de administración. Typo3 se divide en dos grandes secciones, el frontend y el backend, esto no es difícil de comprender: el frontend es el portal por el cual los usuarios pueden navegar mientras el backend es la interface que permite al webmaster gestionar páginas HTML, usuarios y templates. Existen grupos y usuarios frontend y grupos y usuarios backend.

Hablando en términos generales, el backend de TYPO3 se maneja a través de menús JavaScript y aunque el navegador Opera visualiza perfectamente el frontend, es mejor usar Firefox o Konqueror para el backend. Internet Explorer no es una buena opción ni para el frontend ni para el backend ;-).

Lo primero que verá al entrar por primera vez al backend de Typo3 será una breve descripción de los iconos, deberá leer está descripción para conocerlos. Además en la parte inferior derecha verá un icono de un escritorio que puede activar las opciones Live Workspace y Draft Workspace. Uno de los aspectos más poderosos de Typo3 es que puede trabajar en modo Live, es decir que todo lo que haga tendrá efecto inmediato en el sitio, y también soporta la edición en modo Draft, esto es, que puede hacer muchas modificaciones y guardarlas pero sólo hasta que decida cambiar a Live los cambios tendrán efecto en el Frontend. Usted puede crear sus propios WorkSpaces (espacios de trabajo) con fechas de inicio/terminación predefinidas, esto es muy útil, por ejemplo puede crear un workspace con un diseño navideño que se active automáticamente el primero de diciembre y se desactive el seis de enero.

No obstante, por el momento todo lo manejaremos en modo Live y no tocaremos este icono del WorkSpace.

Ahora de un click sobre el icono de Web->Page del panel de la izquierda y verá algo como esto:

El backend de Typo3 está formado por tres paneles, de izquierda a derecha: el panel de herramientas (número 1) con las secciones Web, Tools, Docs, User, etcétera. El panel de páginas (número 2), donde se ubica el pagetree o aÅÂbol, y el panel de edición (número 3). Es en este último panel donde se realizan la mayoría de los cambios. Lo que se muestra en el panel de edición (PE) es la combinación de seleccionar un icono del panel de herramientas (PH) junto con la selección de una página en el panel de páginas (PP), es decir:

Como es un sitio nuevo, en el panel de páginas solo verá el elemento webroot o elemento cero con su icono en forma de un pequeño planeta. Este elemento es algo similar al directorio root (/) de Linux, el directorio de donde parten todos los demás. La primera cosa importante que debemos aprender del panel de páginas es que si colocamos el cursor del mouse sobre el icono de una página nos mostrará su número de ID. En este caso si ponemos el cursor sobre el pequeño icono en forma de planeta veremos id=0. Esto es muy útil pues todo en Typo3 se maneja usando estos números de ID y si queremos agregar una liga o editar un objeto está es una forma rápida de conocer su ID.

Otra cosa importante es que si damos click sobre el texto de la página (en naranja) estaremos activando el tercer panel, mientras que si damos clic sobre el icono (en rojo) activaremos el menú:

Asi pués, en este tutorial y en lo que respecta al panel de páginas a veces diré de clic sobre el icono de la página X y a veces diré de clic sobre el texto de la página X refiriéndome a cosas diferentes.

Al dar clic en el icono de la página veremos un menú, y en él la opción Show, que abre otra ventana del navegador para mostrar esa página en el frontend. Del menú que se despliega seleccione New, el panel de edición mostrará las siguientes opciones:

La función de algunas de estas opciones son bastante obvias: agregar un grupo o un usuario al backend, definir el idioma del sitio, etcétera. La opción Filemount es similar al comando mount de Linux, esto es, si por algún lugar de Typo3 tiene (digamos) un directorio con fotos, puede montarlo en el directorio /photos para insertarlas fácilmente a las páginas. La opción Acronym crea una referencia de pocas letras de una palabra larga o una frase, por ejemplo, si trabaja en un portal donde constantemente debe escribirse Dirección General de Planeación y Análisis o Universidad Nacional Autónoma de México, puede crear un Acronym de tres letras para nunca volver a teclear todas esas palabras de nuevo. Genial, ¿no?

Bien, de un clíc sobre Click here for wizard!. Y seleccione un lugar para le nueva página. Llene los campos de la siguiente pantalla así:

Una vez llenados los campos de un clíc sobre el icono de floppy con la X, este icono guarda y cierra la página, el icono del floppy sin la X guarda y permite seguir editando la página, la X gris cierra la página sin guardar los cambios. ¡Ya hemos creado nuestro primer sitio en TYPO3!

Aquí debemos detenernos un momento para comprender algo: como dijimos T3 puede manejar varios sitios, lo que acabamos de crear es una página rootlevel (que no es lo mismo que el webroot, es decir, el icono de planeta). Es decir, una página rootlevel es una página apartir de la cual se crea un sitio, algo así como el index.php. En mi opinión los desarrolladores de Typo3 deberían de asignar un icono especial a este tipo de páginas rootlevel.

Como sea, ahora necesitamos agregarle algunas páginas a este nuevo site. De un clic sobre el icono blanco de Mi nuevo sitio y seleccione New (note que hay más opciones en el menú), verá algo como esto:

Las opciones son diferentes porque no estamos creando un rootlevel (el rootlevel es Mi nuevo sitio) sino estamos agregando algo nuevo al rootlevel, por ejemplo ahora aparece la opción Domain en la cual podríamos vincular www.misitio.com.mx a este rootlevel. Ya no aparecen las opciones de Acronym ni Filemount, en cambio aparece la opcion de Page content, donde podríamos agregar contenido (una tablam html, una imagen png o una animación flash) al index.php de nuestro sitio. Sin embargo por el momento sólo nos interesa agregar páginas a nuestro sitio.

Luego de Click here for wizard!, el wizard le preguntará primero por la ubicación donde desea la nueva página. Seleccione la posición abajo y a la derecha de Mi nuevo sitio:

La opción Hide oculta la página en el Frontend, mientras la opción Hide in menu la mantiene visible pero no listada en el menú. El campo Subtitle no es obligatorio. Muchas opciones de Typo3 muestran el icono Options

que despliega las opciones avanzadas para ese elemento en la parte superior de la página, la sección en rojo. Note que aparece la opción Alias, como habíamos dicho, todo en T3 se maneja a través de ID, de modo que para llamar a una pagína lo hacemos con su ID, por ejemplo index.php=234, la opción Alias nos permite darle un nombre al ID y así podemos llamar a la página index.php=myalias. Por supuesto, no puede haber dos alias iguales en un mismo sitio de T3.

De un clic en el floppy con la lupa, este icono salva el documento y lo visualiza en una nueva ventana del navegador, verá una ventana con un mensaje de error Template not found! pues aún no le hemos puesto una piel a nuestro sitio. Cierre esta ventana y salve y cierre la página. Ahora en el panel de páginas verá la página Quiénes somos.

En el panel de páginas de un clic sobre el texto de Mi nuevo sitio, luego en el panel de herramientas de un clíc sobre Functions y seleccione Create Multiple pages. Llene el formulario como sigue:

al pulsar sobre Create pages el Wizard nos pedirá la confirmación, pulsamos Ok. Ahora en el panel de páginas debemos tener seis páginas en el sitio Mi nuevo sitio.

Es tiempo de asignar un template al sitio, de un clic sobre el texto de Mi nuevo sitio y luego de un clic en Web->template seleccione el template CrCPH y de un clic en Create a template for a new site:

Ahora de un clic sobre el icono de Mi nuevo sitio y seleccione Show, ahora ya podrá ver su sitio con el template:

Nuestro sitio tiene estructura y template ahora nos resta agregarle contenido. De un clic sobre el icono de Mi nuevo sitio y seleccione New y luego Page Content -> Click here for wizard!. Seleccione Special elements -> Plain HTML. Copie esto y péguelo en HTML:

<divstyle="text-align:center">
<img src="http://www.mononeurona.org/img/imgusers/aarkerio_116.jpg" title="Image" alt="Image" />
</div>

<div>La tecnología transforma el mundo en que vivimos, la forma en trabajamos, aprendemos y nos relacionamos con los demás. La tecnología nos abre las puertas para aprender nuevas habilidades, conocer otras culturas, aspirar a otras oportunidades económicas. La tecnología nos Despabila la MonoNeurona:: </div>

<div>En la ::MonoNeurona.org:: tenemos la misión de llevar los beneficios que ofrecen las tecnologías abiertas al máximo número de personas y comunidades que actualmente no tienen acceso a ellas. Tenemos la visión de un mundo en donde la tecnología será usada en cada comunidad, en cada casa. En ese mundo la tecnología no marcará una división entre una élite y el resto, sino que será el puente que nos lleve a un mejor futuro para todos.</div>

Salve con la lupa para ver el resultado:

Como puede suponer, al resto de las páginas del sitio también se les puede agregar contenido fácilmente: New -> Pagecontent -> Click here for wizard!. Si necesita subir imágenes y/o animaciones flash, puede hacerlo desde el panel de herramientas File->Filelist, que es el administrador de archivos de Typo3, luego agrege un contenido Image a una página y selecciónela del Filelist.

¡Tiene frente de sí muchas opciones que explorar! En ocasiones tendrá que limpiar el cache del FrontEnd para ver los cambios, esto se hace pulsando en Clear FE cache en el panel de herramientas.

Hasta aquí sólo hemos creado un sitio con HTML estático (y bastante esquemático), en el próximo tutorial veremos como crear grupos de usuario y páginas restringidas en nuestro sitio.