MANUAL TYPO3 01/07/2008

Transcripción

1 MANUAL TYPO3 01/07/2008

2 ÍNDICE 1. Introducción Administrar la web con typo Descripción del panel de administración Imágenes y ficheros Guardar imágenes y ficheros en carpetas comunes Páginas Crear una nueva página o sección Crear un contenido de página Traducir una página Páginas con contenidos especiales Índice de las subpáginas Video, animación o archivo de música Noticias Crear una nueva noticia Modificar una noticia Traducir una noticia Añadir contenido multimedia Conceptos de interés Formatear colores y párrafos con el editor Formatear párrafos Negritas y colores destacados Trucos y atajos Corrección de errores de visualización

3 1. Introducción 1.1. Administrar la web con typo3 1. Introduce el usuario y la clave proporcionados 2. Si es la primera vez que usas typo3, es interesante leer para que sirve cada una de las secciones, esta información aparece cuando entramos en la zona de administración (en typo3 esta zona se conoce como backend ). 3

4 1.2. Descripción del panel de administración En typo3 el panel de administración o backend esta formado por tres columnas o zonas principales. La dinámica general de este panel del backend, es moverse de izquierda a derecha seleccionando en cada una de las columnas lo que se quiere hacer. La primera columna, nos muestra una serie de acciones que serán lo primero que seleccionemos. Lista: Muestra todos los contenidos que puede tener una pagina, pero principalmente se utiliza para crear noticias o eventos de la agenda. Lista de archivos: Permite subir y ver la lista de imágenes y documentos que se van a utilizar en los contenidos de la web o noticias. La segunda columna, muestra la estructura de la web, con cada sección en forma de árbol. Esta estructura nos permite seleccionar la sección donde vamos a trabajar. Una página o sección son todos los apartados que componen la web. La tercera columna, es la zona en la que elegiremos que acción concreta vamos a realizar. (Crear una noticia, traducirla, etc.) 4

5 2. Imágenes y ficheros 2.1. Guardar imágenes y ficheros en carpetas comunes Las carpetas comunes, contienen imágenes y documentos que se utilizan en los contenidos de página. Con nombres como, xxx_imagenes o xxx_documentos. Aunque typo3 permite subir imágenes y documentos directamente desde cualquier parte de nuestro ordenador, es interesante reunir todos los documentos e imágenes en carpetas comunes, para que cualquier usuario pueda acceder todos los recursos. 1. Pulsa Lista de archivos 2. Pulsa el icono que aparece al lado de la carpeta correspondiente (bola verde) 3. Selecciona Enviar archivos 4. Selecciona el numero de archivos que quieres guardar 5. Busca en tu ordenador los archivos que quieres guardar 6. Pulsa Envía archivos 5

6 3. Páginas 3.1. Crear una nueva página o sección 1. Pulsa página 2. Elige la zona del árbol donde se quiere introducir la nueva página. Hay que saber: Para desplegar el árbol tienes que ir pulsando el símbolo que significa que esa página contiene páginas por debajo. Cuando el símbolo sea quiere decir que esa página esta completamente desplegada y muestra todas las páginas que contiene. 3. Pulsa nueva página 4. Selecciona la posición dentro del árbol, donde se quiere introducir la nueva página 5. Introduce el nombre de la página 6. Por defecto las páginas están ocultas para que solo tu puedas verlas, si quieres q la página sea publica, quita la marca de la casilla Ocultar 7. Guarda y visualiza la página, que en estos momentos todavía esta vacía 6

7 8. La página tiene otras opciones generales como la fecha en la que se quiere mostrar / ocultar o la posibilidad de ocultarla en el menú o árbol que ven los usuarios (desde el backend se ven TODAS las páginas) 7

8 3.2. Crear un contenido de página El contenido de página puede ser un texto, imagen, noticia, evento, lista de ficheros, índice de las subpáginas etc. En definitiva todos los elementos que pueden interesar al que visita la web. Una página puede tener VARIOS contenidos de página. 1. Pulsa página 2. Selecciona en el árbol la página en la que se quieren introducir los contenidos 3. Pulsa Nuevo contenido 4. Selecciona el tipo de contenido que se quiere introducir 5. Si es la primera vez que usas typo3, lee con atención los diferentes tipos de contenido que puedes introducir. Los más habituales son: a) Elemento de texto normal: texto SIN imágenes 8

9 b) Texto con imágenes: texto con una o varias imágenes c) Solo imágenes: galería de fotos/imágenes d) Enlaces a archivos: Lista de archivos a descargar, indicando tamaño y formato (Ver: Crear enlaces a archivos) e) Mapa del sitio: mapa de la web, o un uso más común: índice de las subpáginas. (Ver: Crear índice de subpáginas) 6. Completa el formulario del contenido de página 9

10 7. Introduce el texto que quieras. Puedes copiarlo de cualquier sitio y pegarlo aquí utilizando las teclas Control+V Puedes dar algunos formatos al texto, utilizando la barra que tienes de estilos. 8. Selecciona la imagen / imágenes que quieres introducir a) De una carpeta común de imágenes que previamente has introducido. (Ver: Guardar imágenes y ficheros en carpetas comunes) b) Directamente seleccionando el fichero de tu ordenador 9. Selecciona la posición de la imagen/imágenes. (Todas las imágenes irán a la misma posición si quieres que las imágenes tengan diferentes distribuciones, separadas en diferentes contenidos de página) 10. La imagen/imágenes se ajustaran automáticamente al tamaño de la web, pero si quieres que tenga un tamaño mas pequeño introduce el tamaño en píxeles (Ej.:200) 11. Puedes incluir una descripción de la imagen. Cada línea corresponderá al pie de foto de una imagen. Es decir si incluyes varias fotos, tendrás que incluir varias líneas de pie de foto. 12. Guarda y visualiza como ha quedado la página 3.3. Traducir una página 1. Pulsa Página 2. Selecciona la página que quieres traducir 3. En el menú desplegable Hacer una nueva traducción de esta página, elige euskera. 4. Ahora tienes que definir el nombre de la pagina en euskera, y quitar la marca de ocultar. Guarda y cierra las propiedades de la pagina. 10

11 5. La sección de contenidos de pagina, ahora esta dividida en dos secciones. Una para el idioma por defecto(en este caso castellano) y otra columna, para el nuevo idioma euskera. En la seccion de euskera tienes dos opciones: 6. Crear contenido de la pagina, que te crea un nuevo contenido partiendo de cero. 1. Copiar los elementos por defecto, que copian todos los contenidos de pagina. Esto puede ser utili para ir traduciendo sobre lo que ya tenemos, pero hay que tener cuidado porque aparece la palabra copia1, copia 2 en cada contenido y habra que quitarla. 2. Completamos los contenidos de la pagina, eligiendo alguna de las opciones anteriores, guardamos y visualizamos la pagina. 11

12 4. Páginas con contenidos especiales 4.1. Índice de las subpáginas En la mayoría de los casos una página contiene subpáginas y nos interesa que esta lista de subpáginas aparezca en la principal. Para ello tendremos que crear un contenido de página especial, Menú o mapa de sitio. 1. Pulsa página 2. Selecciona la página que contiene al resto (en el ejemplo Áreas de trabajo ) 3. Pulsa nuevo contenido 4. Selecciona mapa del sitio 5. En el caso de que la página tenga varios contenidos elige la posición donde quieres que vaya el menú de subpáginas 6. En Tipo de menú selecciona, Menú de subpáginas de esas páginas 7. Guarda y visualiza como ha quedado la página 12

13 4.2. Video, animación o archivo de música 1. Pulsa Página. 2. Pulsa la sección donde quieres incluir el vídeo. 3. Selecciona nuevo contenido. 4. Elige el tipo de contenido multimedia. 5. Si has subido previamente el video a las carpetas comunes selecciona el archivo correspondiente, si no lo has subido todavia, pulsa examinar y selecciona el video de tu ordenador. 6. En el campo parámetros introduce lo siguiente: 13

14 WIDTH = 380 HEIGHT = 380 loop=1 AnimationAtStart = 1 AllowScan = 1 EnableFullScreenControls = 1 BufferingTime = 5 EnablePositionControls = -1 ShowStatusBar = 1 WIDTH: el ancho del video, hay que tener cuidado con no asignar mas espacio del disponible (consultar con el administrador de la web) HEIGHT: el alto del video loop=1 se ejecuta una y otra vez sin parar ShowStatusBar=1 muestra los botones de play, pause etc. El resto de parámetros son más técnicos y es recomendable dejarlos con los valores del ejemplo. Se ponen los valores del alto, ancho etc. algunos valores no afectan a determinados tipos de contenido. Aquí se explica cual afecta a cual: WIDTH: vídeo, música, flash HEIGHT: vídeo, música, flash loop: vídeo, música, flash AnimationAtStart: vídeo, música, flash AllowScan: vídeo, música EnableFullScreenControls: vídeo, música BufferingTime: vídeo, música, flash EnablePositionControls: vídeo, música ShowStatusBar: vídeo, música 5. Noticias 5.1. Crear una nueva noticia 1. Pulsa Lista 2. Selecciona la carpeta Noticias 14

15 3. Selecciona Crear nuevo registro pulsando el icono: ( o tambien puedes encontrar un enlace, si ya hay alguna noticia incluida, debajo de la lista de noticias) 4. Algunas veces te aparece la opción Selecciona el tipo de registro Hay que seleccionar noticias. Si no aparece esta opción quiere decir que ya estas en el formulario para completar los datos de las noticias: 5. El formulario de noticias tiene dos pestañas, rellena los datos generales de la noticia en la pestaña General. 15

16 Truco: los campos de fechas funcionan con unas siglas especiales en las que hoy se reprenda como d. Teclea estas siglas en los campos de fecha y veras como la fecha se actualiza automáticamente. Ejemplos: d: hoy / d-1:ayer / d+1:mañana / d+30: dentro de un mes 6. Posicionándote en los campos Titulo, fecha etc. o pulsando el icono aparece en la parte superior de la pantalla una barra de opciones de visualización con un campo Ocultar al que tendrás que quitar la marca si quieres que la noticia se visualice. Estas barras de visualización permiten programar la publicación de las noticias, para que se vean en un intervalo de tiempo preestablecido. 7. Para incluir imágenes, ficheros o enlaces en la noticia selecciona la pestaña Relations. Una vez aquí, puedes subir imágenes asociadas a la noticia: a) desde una carpeta en la que previamente hemos guardado las imágenes (Ver: Guardar imágenes y ficheros en carpetas Truco: pueden clasificarse las imágenes y ficheros como se explica en el punto 3 directamente al pinchar el icono de la carpeta comunes) b) directamente desde el ordenador, pero de esta forma no se incluirán las imágenes en la galería de imágenes de la noticia. 16

17 c) puedes incluir un pie de foto para cada imagen, escribiendo una línea por cada imagen. También puedes incluir enlaces de interés a páginas externas, relacionar la noticia con noticias anteriores, y subir ficheros adjuntos. d) incluye el enlace del tipo : e) relaciona la noticia con una noticia anterior seleccionandola de la lista f) puedes, igual que en las imágenes, seleccionar un fichero guardado anteriormente o subirlo directamente del ordenador. (Ver: Guardar imágenes y ficheros en carpetas comunes) 8. Guarda y cierra la noticia. 9. Asegúrate de que la noticia no esta oculta, fijándote en el icono que la acompaña en la lista de noticias: 10. Oculta : 11. Visible: 12. Para hacer que una noticia sea visible pincha sobres el icono y selecciona Mostrar. 17

18 Tambien la puedes hacer visible pulsando en cualquier otro sitio que veas el icono. Ej: Las noticias aparecerán ordenadas por fecha. El gestor de noticias permite crear categorías para clasificar las noticias. Para crear estas categorías, selecciona Categorías de Noticias en el punto 4. Al rellenar el formulario, podrás seleccionar la categoría que hayas creado. (Estas opciones no son obligatorias.) 5.2. Modificar una noticia 1. Pulsa Lista 2. Selecciona la carpeta Noticias 3. Pulsa sobre el lapiz que parece al lado de la noticia 4. Realiza los cambios 5. Guarda y cierra la noticia Traducir una noticia 1. Primero creamos la noticia a traducir (Ver: crear una nueva noticia) 2. Una vez introducida la noticia, para traducirla solo tenedriamos que pulsar en la bandera del idioma correspondiente: De esta forma obtenemos una noticia con los mismos campos que siempre pero con el texto a traducir al lado para facilitar la traducción. 18

19 3. Una vez aquí hay que completar la noticia igual que al crear una nueva Añadir contenido multimedia 1. Si lo que queremos añadir son videos externos (ej. youtube), en el cuadro de texto External Videos añadimos la dirección del video que queremos que se muestre. Si queremos más de uno, una dirección en cada línea. Sólo se admiten videos de los siguientes sitios: Youtube, video.coogle.com, Metacafe, Dailymotion, myvideo.de, clipfish, sevenload y LiveLeak. 2. Si queremos añadir algún fichero de audio o video que tenemos en nuestro ordenador podemos hacerlo desde Internal Videos. Hacemos click sobre la carpeta. 3. Accedemos a una pantalla en la que podemos seleccionar un archivo que ya esté entre nuestros archivos comunes, o añadir nuevos. (Ver: Guardar imágenes y ficheros en carpetas comunes) 4. Hacemos click sobre el archivo que deseamos añadir y ya lo tendremos en el listado Internal Videos. 19

20 6. Conceptos de interés 6.1. Formatear colores y párrafos con el editor Formatear párrafos Abre la sección a formatear en el editor: Selecciona todo el texto a formatear, ten cuidado que la primera palabra seleccionada no tenga ni colores ni negrita, pq sino todo el texto aparecerá con ese formato. Elige que los formatos no tengan valores raros. Los correctos son: sin fuente, sin tamaño, normal. Pulsa sobre la opción de eliminar formato: 20

21 Marca la casilla de eliminar formato HTML: Pulsa aceptar y guardar y ver. Comprobarás que el párrafo tiene el estilo correcto Negritas y colores destacados Para resaltar los titular en azul o con negrita hay que seguir cierto orden en el formateo. Para marcar las negritas simplemente selecciona el texto y activa la casilla de negrita: 21

22 Pulsa gardar y ver, y veras que aparece en negrita. Para poner los títulos en azul, primero hay que seleccionar el color y luego la negrita. Si se hace al revés, se pierde el color. Pasos 1. quita la negrita 2. selecciona el texto 3. selecciona el color 4. marca la negrita 6.2. Trucos y atajos Conocimientos básicos Para desplegar el árbol tienes que ir pulsando el símbolo que significa que esa página contiene páginas por debajo. Cuando el símbolo sea quiere decir que esa página esta completamente desplegada y muestra todas las páginas que contiene. El menú de los iconos Todos los iconos que aparecen al lado de las secciones, permiten realizar funciones como nuevo, editar etc. Pulsando encima del icono aparecen estos menús: 22

23 Estas opciones se repiten en varias zonas de typo3 y siempre se representan con los mismos símbolos. Si te familiarizas con los iconos podrás encontrar una forma más rápida de trabajar El símbolo + a la hora de elegir ficheros o imágenes El selector de ficheros / imágenes abre una ventana para seleccionar los ficheros, si pulsamos en el símbolos + la ventana permanecerá abierta y podremos elegir varios ficheros. Siglas especiales en los campos de fecha Los campos de fechas funcionan con unas siglas especiales en las que hoy se reprenda como d. Teclea estas siglas en los campos de fecha y veras como la fecha se actualiza automáticamente. Ejemplos: d: hoy / d-1:ayer / d+1:mañana / d+30: dentro de un mes Mostrar opciones secundarias de paleta Cuando se está creando cualquier tipo de registro, ya sea una nueva página, una nueva noticia, un evento existe al final del todo, una casilla, que muestra algunas opciones que antes aparecían ocultas. Estas opciones, permiten modificar algunas opciones avanzadas, que no es recomendable, utilizar hasta que no se este familiarizado con el sistema de publicación general de typo Corrección de errores de visualización En algunos casos al visualizar la página podemos ver que no se visualiza correctamente. En la mayoría de los casos será porque internamente se han 23

24 copiado caracteres especiales en el editor, aunque a simple vista no se vea nada raro. Los casos mas frecuentes son: La pagina aparece movida o con caracteres como < > en el texto Causa del error: El contenido de la página se ha copiado de otra página web Solución: Selecciona todo el contenido en el editor 1. Selecciona el botón Eliminar formato 2. Selecciona la opción Todas las etiquetas HTML o Formato HTML 3. Guarda y visualiza la página La pagina contiene símbolos raros como <xml:: Causa del error: El contenido de la página se ha copiado de un documento Word. Solución: Selecciona todo el contenido en el editor 1. Selecciona el botón Eliminar formato 2. Selecciona la opción Formato de MS Word 3. Guarda y visualiza la página 24