Nota importante:
La plantilla TYPO3 también está disponible en una versión actualizada versión para TYPO3 versión 13.4 ¡disponible!
Con la plantilla TYPO3 libre puede empezar a crear contenido de inmediato y su sitio web estará en línea en ningún momento. Usted no tiene que preocuparse por el diseño, plantillas o página TypoScript.
Esto es lo que parece: Versión en vivo de nuestra plantilla TYPO3
La plantilla TYPO3 está disponible para su descarga para todos los usuarios interesados. También puede instalar la plantilla TYPO3 con otros proveedores. Sin embargo, no podemos ofrecer soporte técnico para ello. Como alternativa puede utilizar nuestra tarifa TYPO3 Developer de forma gratuita y sin compromiso durante 3 meses, en la que la plantilla ya está preinstalada (como en todos nuestros paquetes de alojamiento).
Descargar la última versión de la plantilla TYPO3 (archivo tar.gz)
Para su propia instalación, se preestablece un usuario backend "typo3-admin" con la contraseña "muster".
TYPO3 10 LTS requiere al menos PHP 7.2, pero recomendamos al menos PHP 7.3 para utilizar el proyecto de ejemplo.
Agradecemos sus sugerencias e ideas de mejora.
La plantilla es personalizable y se puede ampliar con funciones adicionales.
La plantilla ofrece:
- Diseño web responsivo, apto para escritorio, smartphone y tablet
- Optimizada para motores de búsqueda
- Preparada para la accesibilidad
- Ejemplos para todos los elementos de contenido estándar
- Optimizada para tiempos de carga cortos y accesibilidad
- Tecnología punta
- Personalizable visual y funcionalmente
Puede utilizarse como base para su propio sitio web y representa un ejemplo de "mejores prácticas". Aquí también puede aprender a crear un proyecto TYPO3. No pretende ser una plantilla de diseño, sino una plantilla de proyecto. El diseño puede ser personalizado para adaptarse a sus propias ideas.
Hemos mantenido deliberadamente la plantilla delgada y sólo pre-instalado las funciones más utilizadas:
- Visualización de noticias actuales (extensión: news)
- Direcciones web legibles y compatibles con los motores de búsqueda (URLs parlantes)
- Soporte para la optimización del sitio web para los motores de búsqueda
- Efecto lightbox para ampliar las imágenes con un clic
- Gestor de consentimiento de cookies configurable
El proyecto de ejemplo se basa en TYPO3 LTS versión 10.4, lo que significa que puede funcionar sin relanzamiento hasta al menos finales de abril de 2023. Extended Long Term Support (ELTS) proporciona actualizaciones y soporte hasta finales de abril de 2026.
Alguna información sobre Historia de la plantilla.
¿Cuánto cuesta el proyecto de muestra?
El Musterprojekt está incluido en el precio de todos los nuevos
paquetes de alojamiento TYPO3 de jweiland.net y ya está preinstalado.¿Y las actualizaciones?
El proyecto está en continuo desarrollo. La versión actual 2.0.6 de la plantilla a partir de August 2021 se basa en la versión 10.4 LTS de TYPO3 y está disponible automáticamente en el paquete de alojamiento.
Tenga en cuenta, sin embargo, que las instalaciones existentes no se pueden actualizar automáticamente, ya que cada cliente puede realizar cambios en los archivos de proyecto de la plantilla por sí mismo. Las actualizaciones automáticas sobrescribirían estos cambios.
Registramos todos los cambios importantes en el registro de cambios para que usted mismo pueda añadir nuevas funciones o correcciones de errores si es necesario.
Ejemplos de sitios web basados en nuestro proyecto de muestra
¿Qué hay de nuevo en esta versión de la plantilla?
En la versión 10 del proyecto de ejemplo, no sólo hemos mejorado las funciones existentes, sino que también hemos añadido muchas características nuevas. En el siguiente vídeo puede ver un resumen de algunas de estas nuevas funciones.
Por ejemplo
- el nuevo panel de control de TYPO3 10 LTS
- una solución de gestión de cookies basada en el script de código abierto "Klaro"
- Imágenes responsivas y diferentes variantes de recorte para las imágenes
- Variantes de navegación mejoradas y nuevas (por ejemplo, un mega menú)
- Contenedores de rejilla para contenidos (aún no mostrados en el vídeo, ver vídeo aparte)
- Elementos de contenido expandibles/colapsables (no se muestra en el vídeo, ver vídeo aparte)
- y mucho más
Por supuesto, también han ocurrido muchas cosas "bajo el capó", ya que utilizamos las nuevas posibilidades de TYPO3 10 LTS en la programación, como los nuevos recolectores de activos.
Instale usted mismo el proyecto de ejemplo
Al contratar un plan de alojamiento (incluido el plan gratuito para desarrolladores), ya instalamos la plantilla de muestra.
Si desea instalar la plantilla en un paquete de alojamiento existente en una fecha posterior, lo mejor es utilizar nuestra herramienta de configuración (ver el siguiente vídeo). La herramienta de configuración ya realiza todos los ajustes necesarios.
Los siguientes pasos son necesarios para la instalación:
- Crear una nueva base de datos a través del menú de cliente
- Inicie sesión en el servidor web a través de SSH (instrucciones para Windows, MacOS y Linux)
- Instalación con la herramienta de configuración como se muestra en el vídeo
Para realizar la instalación con un proveedor diferente, siga la guía rápida que figura a continuación:
- Descargue el archivo con la plantilla de muestra de este sitio web y transfiéralo al espacio web
- Descomprima el archivo (musterprojekt.tar.gz)
- Cree una nueva base de datos vacía
- Ajuste los parámetros de acceso a la base de datos en typo3conf/LocalConfiguration.php
- Importe el archivo de base de datos typo3conf/musterprojekt.sql a la nueva base de datos vacía
- Adaptar/crear enlace simbólico al código fuente de TYPO3 10.4.x
- Apunte el dominio al directorio de inicio
- Inicie sesión en TYPO3 backend (usuario: typo3-admin, contraseña: muster)
- Cambie la contraseña para el usuario backend
- Llame a la configuración del sitio y ajustar el nombre de dominio
Cambiar la clave de encriptación
![Introduzca una cadena de caracteres aleatorios en el campo de entrada de [SYS][encryptionKey].](/fileadmin/_processed_/f/c/csm_encryption-key-aendern.00_00_47_20.Standbild003_780f9f6f9d.png "Introduzca una cadena de caracteres aleatorios en el campo de entrada de [SYS][encryptionKey].")
Por razones de seguridad, después de la instalación manual debe cambiar la llamada clave de cifrado. Se trata de una larga combinación aleatoria de letras y números. Esta clave se utiliza para "salar" diversas encriptaciones en el sistema TYPO3, es decir, se incorpora otro valor aleatorio a la encriptación.
Proceda de la siguiente manera:
- Vaya al área "Configuración" en el backend.
- Haga clic aquí en "Opciones de instalación".
- En el área [SYS] encontrará el campo de entrada para la clave de encriptación, introduzca aquí una combinación aleatoria larga de números y letras
- Haga clic en "Escribir configuración" para guardar
Los pasos se describen en el siguiente vídeo.
Inicio de sesión y primeros pasos
El backend es la interfaz de administración de su sitio web TYPO3. Usted mantiene el contenido de las páginas en el backend.
Siempre puedes acceder al backend a través de tu-dominio.com/typo3.
Inicie sesión allí con su nombre de usuario y contraseña.
Para un proyecto de ejemplo recién instalado, el nombre de usuario es siempre typo3-admin. Por razones de seguridad, debería cambiar el nombre de usuario y especialmente la contraseña inmediatamente después del primer inicio de sesión. Puede ver cómo funciona en el siguiente vídeo.
Consejo: ¡asegúrese de utilizar una contraseña segura! Aquí tiene algunos consejos sobre contraseñas seguras.
Personalizar el nombre de la empresa
Uno de los primeros pasos para personalizar el proyecto de muestra debería ser cambiar el nombre de la empresa. Esto se puede ver en la parte inferior de cada página, por ejemplo. Por supuesto, también puede introducir aquí su nombre personal o cualquier otro texto en lugar del nombre de la empresa.
Realice los siguientes pasos:
- Haga clic en "Plantilla" en el menú principal izquierdo del backend.
- Haga clic en la página "Inicio" en el árbol de páginas.
- Si es necesario, seleccione el "Editor constante" en el cuadro de selección de la zona principal de la parte superior izquierda.
- Seleccione "JWEILAND.NET SAMPLE PROJECT" como categoría.
- Haga clic en el icono del lápiz situado junto al campo "Nombre de la empresa" para poder editar el contenido del campo.
- Por último, haz clic en el botón "Guardar" de la parte superior.
También puedes ver todos los pasos en el siguiente vídeo.
Sustituir el logotipo en la cabecera
En la parte superior izquierda de cada página encontrará un logotipo que siempre está vinculado automáticamente a la página de inicio. Para sustituir nuestro logotipo de ejemplo, proceda del siguiente modo:
- Cargue el archivo de su logotipo a través del módulo "Lista de archivos" (se recomienda el formato de archivo JPG, PNG o SVG). Si es necesario, cree una carpeta adecuada para organizar sus archivos.
- Haga clic en "Plantilla" en el menú principal izquierdo del backend.
- Haga clic en la página "Inicio" en el árbol de páginas.
- Si es necesario, seleccione el "Editor constante" en el cuadro de selección de la zona principal, arriba a la izquierda.
- Seleccione "JWEILAND.NET SAMPLE PROJECT" como categoría.
- Desplácese hasta la sección "Diseño".
- Haga clic en el icono del lápiz situado junto al campo "Logotipo" para activar la edición.
- Introduzca aquí la ruta de acceso a su logotipo (por ejemplo, fileadmin/logos/mi_logo.png).
- Haz clic en el botón "Guardar" de la parte superior.
Sustituir favicon y appicon
Los favicons son pequeñas imágenes que se muestran, por ejemplo, en la barra de título o en la pestaña del navegador. Aquí se suele utilizar el logotipo de una empresa o similar.
El proyecto de ejemplo está preparado para el uso de favicons personalizados. También se crean iconos táctiles (iconos de aplicaciones) para teléfonos inteligentes y tabletas.
Ambos tipos de iconos pueden intercambiarse fácilmente mediante el editor de constantes.
Tenga en cuenta lo siguiente:
- El archivo de imagen para el favicon y los iconos táctiles estándar debe ser cuadrado.
- La segunda variante de la imagen, especialmente útil para Windows Phone, requiere una relación de aspecto de 31:15, por ejemplo: ancho 310 px, alto 150 px.
- Utilice un archivo de imagen en formato PNG o JPG. Se recomienda PNG. Dado que en el proyecto de ejemplo se crean distintas variantes de forma dinámica, los clásicos archivos ICO no funcionan aquí. Sin embargo, hoy en día ya no son necesarios.
Para personalizar los archivos, proceda del siguiente modo:
- Cambie al módulo backend "Plantilla".
- Seleccione la página "Inicio" en el árbol de páginas (la página con el globo terráqueo).
- En la parte derecha del backend, cambie al "Editor de constantes" a través del cuadro de selección superior.
- En el cuadro de selección "Categoría", seleccione "PROYECTO DE MUESTRA JWEILAND.NET".
- Desplácese hacia abajo hasta el área "Diseño".
- Haga clic en el icono del lápiz situado junto a "App-/Favicon Square" o "App-/Favicon Wide" para activar el campo de entrada.
- Introduzca la ruta a su archivo de imagen en el campo de entrada. Puede estar debajo de fileadmin/ o en otra extensión:
- Ejemplo para fileadmin: fileadmin/mydirectory/images/appicon-square.png
- Ejemplo de extensión: EXT:myextension/Resources/Public/Icons/appicon-square.png
- Por último, haga clic en "Guardar" en la parte superior.
- Si el cambio no es visible inmediatamente, debe borrar la caché del frontend y también la caché de su navegador.
Variantes de navegación
La navegación horizontal se utiliza de forma estándar. Si una página tiene más subpáginas, éstas se muestran como un "menú desplegable".
Además, pueden activarse distintas variantes a través del editor de constantes:
- Navegación horizontal (por defecto)
- Navegación vertical
- Navegación horizontal y vertical
Con el tipo de navegación también se puede cambiar entre la salida estándar y el llamado "mega menú".
El vídeo muestra las distintas opciones y los pasos necesarios.
¿Muchas páginas en la navegación? No hay problema.
Especialmente cuando se utiliza la navegación horizontal, puede encontrarse rápidamente con problemas si tiene muchas páginas en el primer nivel del menú o si los títulos de las páginas son relativamente largos. En determinadas circunstancias, la maquetación puede verse alterada si la navegación se interrumpe en una segunda línea.
Aunque existe la regla general de colocar un máximo de 5-7 páginas en el primer nivel de una navegación, esto no siempre es posible.
Hemos implementado una solución para esto en la versión 10 del proyecto de ejemplo.
En cuanto el espacio disponible en la navegación ya no es suficiente para mostrar todos los elementos del menú en una sola línea, aparece automáticamente un enlace bajo el cual se pueden encontrar las páginas restantes. De este modo, el menú puede reaccionar con flexibilidad a diferentes anchos de ventana y siempre se muestra perfectamente en cualquier dispositivo, ya sea un ordenador de sobremesa, un portátil, una tableta o un smartphone.
En el siguiente vídeo puede ver cómo queda.
Diseño de páginas
El proyecto de ejemplo proporciona varios diseños de página para mostrar el contenido en una estructura determinada.
Con los distintos diseños se puede cubrir una gran parte de los requisitos de diseño habituales. Para quienes deseen más flexibilidad: También hemos integrado elementos contenedores para un contenido flexible de varias columnas.
Cambiar el diseño del pie de página
Para el pie de página se utiliza un diseño estándar de 3 columnas. Puede colocar cualquier elemento de contenido en estas columnas.
Sin embargo, también puede elegir entre un diseño de 2 columnas o de 1 columna. Puede ver cómo seleccionar el diseño deseado en el siguiente vídeo.
¿Qué es el salpicadero?
El tablero de instrumentos es un nuevo módulo en TYPO3 10 LTS. Aquí se puede mostrar diversa información utilizando los llamados widgets. TYPO3 ya viene con algunos widgets, también hemos integrado un pequeño widget en el proyecto de ejemplo que le lleva directamente a la documentación (es decir, a esta página).
Ahora también hay algunas extensiones en el TYPO3 Extension Repository (TER) que proporcionan widgets adicionales.
Cada usuario backend puede configurar el tablero de instrumentos de forma individual. Incluso puede crear varios cuadros de mando si es necesario.
Puede ver cómo funciona en el vídeo.
Optimización de motores de búsqueda (SEO)
En TYPO3 10 LTS, ya no necesita una extensión adicional para las funciones básicas de SEO. El ajuste manual del título de la página, el control de la indexación por los motores de búsqueda y la generación de la etiqueta canónica se encuentran entre las funciones estándar.
Encontrará una pestaña "SEO" en las propiedades de la página
- Título para buscadores: aquí puede sobrescribir manualmente el título de página generado automáticamente (etiqueta <title> en HTML)
- Instrucciones para robots:
- Indexar esta página: controla si los motores de búsqueda indexan o no la página actual (metaetiqueta robots="noindex" o "index" en HTML)
- Seguir esta página: controla si los robots de los motores de búsqueda siguen o no los enlaces de la página actual (metaetiqueta robots="follow" o "nofollow" en HTML)
- Enlace canónico: Especifica la URL original de la página actual. Se establece automáticamente, pero puede sobrescribirse manualmente si es necesario.
No obstante, hemos añadido la extensión "yoast_seo " como ayuda para facilitar la optimización "on page" en los motores de búsqueda. "On page" significa: medidas que puede llevar a cabo usted mismo en su sitio.
Por ejemplo, la extensión analiza la legibilidad del texto de una página y ofrece consejos para mejorarlo. También comprueba si se utiliza el campo "Descripción" en las propiedades de la página, ya que se utiliza para generar la importante metaetiqueta description, o si el título de la página es correcto. La extensión tiene otras funciones, le recomendamos que lea atentamente la documentación.
Redes sociales
TYPO3 10 LTS también viene con soporte integrado para algunas funciones de medios sociales.
En las propiedades de cada página, puedes personalizar el título, la descripción y la imagen para Facebook y Twitter. Algunas etiquetas meta se generan en el código fuente HTML (Open Graph y Twitter Cards). Hay una nueva sección "Medios sociales" en las propiedades de la página para este fin.
Si un visitante comparte la página a través de Facebook o Twitter, estas metaetiquetas son leídas por estas plataformas y tenidas en cuenta. Esto permite controlar con gran precisión qué textos e imágenes se muestran en la vista previa de las dos plataformas.
Variantes de recorte para imágenes en elementos de contenido
En la versión 10 del proyecto de ejemplo, hemos mejorado mucho el manejo de las imágenes en el front-end.
Por un lado, ahora utilizamos "Responsive Image Rendering". Esto significa que, dependiendo del dispositivo final utilizado para ver el sitio web, se entrega una imagen optimizada en tamaño para este dispositivo. Así, el navegador de un smartphone recibe una imagen más pequeña que el navegador de un ordenador de sobremesa.
Esto mejora enormemente el rendimiento del sitio web, ya que, naturalmente, no tiene mucho sentido entregar imágenes grandes (= grandes cantidades de datos) a dispositivos que sólo pueden mostrar las imágenes más pequeñas de todos modos.
Como usuario, sin embargo, usted no tiene que preocuparse por esto en absoluto - TYPO3 se encarga de ello de forma totalmente automática en segundo plano.
En segundo lugar, hemos integrado la opción de utilizar diferentes "variantes de recorte".
Esto significa que usted puede proporcionar a un usuario con un teléfono inteligente con una sección de imagen diferente a un usuario con un ordenador de sobremesa. Esto puede ser muy útil para determinados tipos de imágenes (ejemplo en el vídeo).
También hemos integrado la opción de sincronizar las variantes de recorte para los distintos dispositivos. Esto es importante si quieres cambiar la sección de la imagen para todos los dispositivos. Antes había que hacerlo manualmente.
Puedes ver exactamente en qué consiste y cómo funciona en el siguiente vídeo.
Galería de imágenes con miniaturas cuadradas
Usted realmente no necesita una extensión para implementar una galería de imágenes con TYPO3. También se puede hacer muy bien con herramientas integradas.
Para mejorar la presentación de estas galerías un poco, hemos añadido la opción de mostrar miniaturas cuadradas de las imágenes. Esto se puede controlar a través del campo "Layout" de los elementos de contenido.
Más detalles en el siguiente vídeo.
Mantener los metadatos de los archivos
Los metadatos pueden gestionarse para cada archivo utilizado en el backend. Los metadatos pueden ser, por ejemplo, un "texto alternativo" para las imágenes o información sobre derechos de autor. En algunos casos, estos metadatos también se muestran automáticamente en el frontend si están disponibles.
Hay dos formas de mantener estos metadatos:
- por elemento de contenido en los archivos utilizados
- globalmente a través del módulo backend de lista de archivos
La forma global tiene la ventaja de que sólo tiene que mantener estos datos una vez por archivo. Si luego utiliza el archivo en un elemento de contenido (incluso varias veces en diferentes páginas), los metadatos mantenidos globalmente se utilizan automáticamente.
No obstante, si lo desea, puede sobrescribir los metadatos globales localmente para cada elemento de contenido.
Puede ver cómo funciona todo esto en el siguiente vídeo.
Visión general del editor de constantes
Muchas funciones del proyecto de ejemplo pueden controlarse cómodamente en el backend a través del editor de constantes. El siguiente vídeo le ofrece una visión general de las distintas áreas y opciones.
También profundizamos en determinadas funciones en otros vídeos.
Editar y personalizar el formulario de contacto
TYPO3 permite crear incluso formularios de correo electrónico relativamente complejos. Se pueden realizar formularios de contacto sencillos, así como formularios de pedido de varias páginas, formularios de encuesta, formularios de solicitud y mucho más.
También recibirá un formulario de muestra con el proyecto de muestra. Aquí hemos incluido algunos ejemplos de las distintas opciones de formularios. No obstante, deberá realizar algunos ajustes antes de poder utilizar el formulario.
En el siguiente vídeo le mostramos cómo eliminar campos de entrada existentes y añadir campos nuevos.
Personalizar el destinatario del formulario
Es necesario definir el destinatario correcto en el formulario para que los mensajes enviados a través del formulario de contacto también le lleguen a usted.
Para ello, hay que editar los finalizadores del formulario en el módulo backend "Formularios". Un finalizador define una acción que se ejecuta cuando el visitante del sitio web hace clic en el botón "Enviar" del formulario.
Sin embargo, para garantizar que los correos electrónicos enviados lleguen realmente al destinatario, también hay que tener en cuenta algunos puntos importantes a la hora de configurar el finalizador correspondiente.
Todos los detalles en el siguiente vídeo.
Configurar TYPO3 correctamente para el envío de correos electrónicos
Por lo general, recomendamos el uso de una cuenta de correo electrónico existente para enviar mensajes de correo electrónico desde TYPO3. Esto se puede utilizar para enviar mensajes de correo electrónico a través de SMTP.
Puede utilizar una cuenta de correo electrónico existente o crear su propia cuenta para enviar correos electrónicos a través de su menú de cliente. Esto también puede ser una dirección en el formato noreply@name-der-domain.de. En otras palabras, una dirección que sólo se utiliza para enviar, pero donde el propio nombre indica que los correos electrónicos enviados a esta dirección no serán leídos.
Aquí puede encontrar un videotutorial sobre cómo configurar las direcciones de correo electrónico en el menú de clientes.
Para la configuración en TYPO3 necesitas la siguiente información:
- Servidor para correo saliente SMTP: sslout.de
- Puerto: 465
- Nombre de usuario: su dirección de correo electrónico
- Contraseña de su dirección de correo electrónico
Puede ver los pasos necesarios en el siguiente vídeo.
Traducir páginas y contenidos
Los sitios web multilingües no son un problema con TYPO3. Esta ha sido una función central de TYPO3 desde el principio. Al mismo tiempo, TYPO3 es extremadamente flexible aquí, como en muchas otras áreas.
Para que el contenido de un sitio web esté disponible en varios idiomas, son necesarios básicamente dos pasos:
- Debe crearse una traducción para la propia página
- Los elementos de contenido de esta página deben traducirse.
TYPO3 ofrece dos modos diferentes para esto:
- el modo conectado
- el modo libre (Free Mode)
En el modo conectado, los elementos de contenido en el idioma estándar están estrechamente vinculados a los elementos de contenido traducidos. Si se elimina el elemento original, también se elimina automáticamente el elemento traducido.
Este modo es útil si el contenido se va a traducir casi 1:1 a otros idiomas.
En el modo libre, no existe ningún vínculo entre los elementos originales y los traducidos.
Si se borra el elemento original, se conserva el elemento traducido. Este modo debe utilizarse si el contenido en las distintas lenguas difiere en muchas partes.
En el siguiente vídeo se explican los pasos necesarios.
Añadir más idiomas
El proyecto de ejemplo se entrega preconfigurado con el alemán y el inglés como idiomas del front-end. No obstante, si lo desea, puede añadir otros idiomas.
Para ello es necesario seguir los siguientes pasos
- Cree un registro de datos del tipo "Idioma del sitio web" en la "Página" superior (ID 0) del árbol de páginas y configúrelo en consecuencia.
- Añada los idiomas deseados en la configuración de la página y configúrelos aquí
El siguiente vídeo muestra todos los pasos necesarios.
Eliminar idiomas innecesarios
Si no necesita el multilingüismo para su sitio web, también puede simplemente eliminar los idiomas innecesarios en el backend.
- Elimine los idiomas que no necesite en la Configuración del sitio. Debe conservar un idioma estándar (alemán en el proyecto de ejemplo).
- Elimine los registros de datos del tipo "Idioma del sitio web" en la "Página" superior (ID 0).
También puede desactivar la visualización del menú de idiomas en el frontend. Para ello, cambie al módulo de plantillas en el backend, seleccione la página "Inicio", cambie al editor de constantes si es necesario y seleccione allí la categoría "jweiland.net sample project". Si se desplaza un poco hacia abajo, encontrará la opción para activar o desactivar el menú de idioma.
Ocultar la función de búsqueda
En el proyecto de ejemplo, también hemos integrado una función de búsqueda para el sitio web. Utilizamos la extensión estándar "indexed_search". (Existen otras extensiones de búsqueda, a veces más potentes, como "ke_search" o "solr").
Sin embargo, si no necesitas esta función de búsqueda, puedes simplemente desactivarla usando una constante en el editor de constantes del módulo backend de la plantilla.
Configurar el gestor de consentimiento de cookies
Aunque TYPO3 no establece ninguna cookie en el frontend en la configuración estándar, hemos integrado una herramienta que muestra un llamado "banner de cookies" a los visitantes del sitio web. Si las cookies van a ser establecidas por el sitio, los visitantes tienen la opción de aceptar el uso de cookies individuales o todas las cookies, o en general rechazar las cookies.
En un proyecto de ejemplo recién instalado, se solicita el consentimiento para las cookies de YouTube o Vimeo, ya que también incrustamos un vídeo de Vimeo en una página de demostración.
Puede controlar el comportamiento del banner de cookies a través del editor de constantes. También puede desactivarlo completamente si su sitio web no establece cookies de terceros.
Nota: Las cookies para iniciar sesión en el backend o frontend son cookies técnicamente necesarias que no es necesario señalar por separado.
También hemos preconfigurado el Gestor de Cookies para herramientas comunes. Sólo tiene que añadir la información pertinente a las constantes para utilizar las siguientes herramientas:
- Matomo
- Google Analytics
- Píxel de Facebook
- Youtube / Vimeo
Traducir el gestor de consentimiento de cookies
El proyecto de ejemplo se entrega con los idiomas alemán e inglés, por lo que los textos del Cookie Consent Manager también están disponibles en estos idiomas.
Por supuesto, puede añadir cualquier otro idioma. Sin embargo, los textos del Gestor de Consentimiento también deben traducirse si es necesario. Para hacer esto, debe editar el archivo typo3conf/ext/jwmusterprojekt10/Resources/Private/Page/Partials/Klaro.html vía SSH o FTP.
Puede ver los pasos exactos en el siguiente video.
Mostrar elementos de contenido expandibles y plegables
Hemos integrado de forma permanente en el proyecto de ejemplo una función que se solicita a menudo en los proyectos de los clientes: la opción de mostrar los elementos de contenido en el frontend de forma ampliable y plegable.
Especialmente con textos largos o mucho contenido en una página, esto le da la opción de organizar los textos de forma más clara.
También hemos integrado la opción de mostrar los elementos de contenido de forma expandible y plegable sólo en smartphones, es decir, en pantallas pequeñas. En pantallas más grandes, estos elementos de contenido se muestran "normalmente".
Varias configuraciones para el editor de texto
El editor de texto (CKEditor) puede configurarse muy fácilmente y ampliarse con funciones adicionales.
Además de la configuración estándar, proporcionamos otras configuraciones en el proyecto de ejemplo para utilizar diversas funciones como el resaltado de sintaxis o un contador de palabras.
Nota: Actualmente (a mediados de julio de 2020) todavía suministramos 4 configuraciones separadas. Sin embargo, pronto combinaremos estas configuraciones en una única configuración ampliada para facilitar aún más su uso.
Puede seleccionar las distintas configuraciones en las propiedades de página de la página "Inicio", en la pestaña "Recursos", en el campo "Page TSconfig".
La configuración de la página (visión general)
El módulo "Página" del área "Gestión de páginas" le permite realizar algunos ajustes básicos para el sitio web. Aquí, por ejemplo, puedes cambiar el título de la página que se muestra en la barra de título del navegador en el frontend. También puedes configurar los idiomas utilizados y mucho más.
IMPORTANTE: Permitir la indexación del sitio web por los motores de búsqueda
Un proyecto de ejemplo recién instalado no puede ser indexado por Google u otros motores de búsqueda. Esto se evita mediante entradas en un archivo llamado robots.txt.
Esto también tiene sentido al principio, ya que primero desea añadir su contenido al proyecto de muestra. Sólo cuando el contenido de demostración se ha eliminado y reemplazado con contenido real tiene sentido tener el sitio web indexado por los motores de búsqueda.
Puedes controlar esto haciendo una entrada en la configuración de la página.
Puede ver los pasos necesarios en el siguiente vídeo.
Crear y gestionar artículos de noticias
Los artículos de noticias, artículos de blog o similares pueden mantenerse con la extensión "Noticias" suministrada.
Los artículos de noticias se diferencian de los elementos de contenido normales en que normalmente se recopilan de forma centralizada en un lugar o carpeta. La salida de los artículos, es decir, en qué parte del sitio web y de qué forma, se controla mediante los llamados plugins.
Un artículo de noticias se compone, como mínimo, de un titular, normalmente un texto teaser y el texto de la noticia propiamente dicha. Además, se pueden añadir a los artículos, por ejemplo, imágenes, archivos, enlaces relevantes, etc.
El vídeo muestra cómo mantener los artículos existentes y crear otros nuevos.
Diferentes vistas de lista para los artículos de noticias
La extensión de noticias proporciona por defecto una vista de lista para los artículos de noticias. También hemos configurado dos tipos de visualización adicionales en el proyecto de ejemplo:
- una vista de lista reducida, que puede utilizarse en la página de inicio del sitio web para las últimas noticias, por ejemplo
- una vista de tarjeta que puede utilizarse como alternativa a la vista estándar.
El tipo de visualización deseado puede seleccionarse en cada plugin de noticias.
Configurar el canal RSS de noticias
El proyecto de ejemplo ofrece un canal RSS para artículos de noticias. Los visitantes pueden suscribirse para estar al día de los nuevos artículos.
Si desea utilizar este feed para sus artículos de noticias, debe configurarlo utilizando el editor de constantes.
Deberá personalizar lo siguiente
- El título del flujo RSS
- La descripción
- El nombre de dominio del sitio web, incluido el protocolo (http o https)
En general, también puede activar o desactivar el flujo mediante una constante.
¿Qué es la memoria caché y por qué hay que borrarla de vez en cuando?
TYPO3 utiliza varios mecanismos de caché para acelerar la entrega de un sitio web. La caché es un tipo de almacenamiento temporal para que TYPO3 no tenga que regenerar la página solicitada con cada llamada front-end.
De vez en cuando, sin embargo, es necesario eliminar esta caché manualmente. Vea el vídeo para saber exactamente cómo funciona y por qué es necesario.
Vista general de la ampliación del proyecto de muestra (paquete de sitios)
El proyecto de ejemplo es básicamente una extensión de TYPO3. Esto también se conoce como un "paquete de sitio", ya que todos los archivos necesarios para operar el sitio web se incluyen aquí.
Estos archivos necesarios son, por ejemplo
- Archivos CSS
- Archivos JavaScript
- Imágenes e iconos
- Plantillas HTML (plantillas fluidas)
- Archivos de configuración para TypoScript y TSconfig
- y más
Aunque muchas cosas pueden establecerse en el proyecto de ejemplo mediante constantes, a menudo sólo es posible realizar más cambios editando estos archivos.
En este vídeo obtendrá una visión general del paquete del sitio y aprenderá a configurar una extensión de este tipo.
Realizar cambios en el CSS
En este vídeo aprenderás a cambiar ciertos elementos de la página web utilizando CSS. Como ejemplo sencillo, verás cómo cambiar el color y la fuente de los encabezados.
También aprenderás a averiguar en qué archivo CSS se encuentran las definiciones de los elementos.
Para este capítulo necesitarás al menos conocimientos básicos de CSS.
El usuario "editor" - ¿qué son los "editores"?
Además de la función de administrador, que tiene todos los derechos sobre el sistema TYPO3, también puede crear usuarios backend con derechos restringidos.
Estos usuarios pueden, por ejemplo, editar páginas y contenidos, pero no pueden realizar ningún cambio en la configuración del sistema o instalar extensiones TYPO3.
Esto se conoce generalmente como "editores TYPO3".
El proyecto de ejemplo proporciona algunos grupos de usuarios backend, así como un usuario de ejemplo con el nombre de usuario "editor" como ejemplo.
En este video usted aprenderá la diferencia entre un administrador y un editor.
Personalizar los derechos del editor
Los derechos de acceso de un editor pueden personalizarse en gran medida.
Por regla general, los editores sólo deberían ver los módulos y campos de entrada que necesitan para su trabajo. De lo contrario, los usuarios inexpertos, en particular, se ven rápidamente abrumados por las numerosas posibilidades.
Los derechos se configuran en gran medida a través de los grupos de usuarios. En el proyecto de ejemplo hemos organizado estos grupos de forma muy modular. Esto facilita la orientación si desea personalizar los derechos para determinadas áreas o funciones.
El siguiente vídeo ofrece una visión general de las opciones.
Puesta en marcha del nuevo sitio web
Cuando haya terminado de personalizar el proyecto de muestra, por supuesto querrá poner en marcha su nuevo sitio web para que los visitantes también puedan disfrutarlo.
Para ello es necesario seguir los siguientes pasos:
Personalice el punto de entrada en la configuración del sitio. Aquí debe introducirse el dominio bajo el que se accederá al sitio web. Introduzca el nombre del dominio incluyendo el protocolo, es decir, http o https
En la administración del dominio en el menú del cliente, debe ajustar la ruta de destino del dominio. Aquí debe seleccionarse el directorio del servidor en el que se encuentra el proyecto. Si es necesario, ajuste la versión PHP a 7.3LATEST, la edición a EXTENDED y la "Configuración segura" a "Sí".
Para permitir la indexación del sitio web por parte de los motores de búsqueda, ajuste la configuración de robots.txt en la configuración de la página. Siga las instrucciones en vídeo de esta página aquí.
Si dispone de un certificado SSL para el dominio, debe activar la redirección automática de http a https. Para ello, debe activar las dos últimas líneas del archivo .htaccess en el directorio del proyecto en el servidor, eliminando el símbolo hash al principio de las respectivas líneas.
Crear una copia de seguridad diaria del sitio web
El nuevo proyecto debe integrarse en la copia de seguridad diaria. Esto le da la opción de restaurar el sitio web desde una copia de seguridad en cualquier momento si, por ejemplo, se borran accidentalmente páginas o archivos.
Si el proyecto de muestra fue instalado por nosotros, ¡este paso no es necesario! Los proyectos de muestra instalados por nosotros siempre están incluidos en el script de copia de seguridad.
Si ha instalado usted mismo el proyecto de ejemplo, deberá realizar los siguientes pasos:
- Edite el archivo "daily" en el servidor. Encontrará el archivo en el directorio typo3cms/system/backup/.
- Añada lo siguiente a las líneas preparadas (por ejemplo, para project3)
- el directorio en el que se encuentra el proyecto
- el nombre de la base de datos
- el nombre del usuario de la base de datos
la contraseña de la base de datos IMPORTANTE: ¡la contraseña debe ir entre comillas!
- Active la línea correspondiente a la copia de seguridad de la base de datos eliminando el símbolo de almohadilla al principio de la línea.
- Active las 3 líneas para la copia de seguridad de los archivos eliminando también el símbolo de almohadilla al principio de la línea.
Después de guardar los cambios, puede probar la copia de seguridad iniciando el cronjob en su menú de cliente, que llama al script diario.
Todos los pasos se explican en detalle en el siguiente vídeo.
Actualización de la versión 9 a la versión 10
Si ha utilizado previamente el proyecto de ejemplo 9, por supuesto puede actualizar a TYPO3 10.
Después de la actualización con éxito, usted tiene dos opciones:
- Seguir utilizando la extensión del proyecto de ejemplo, versión 9 (jwmusterprojekt9), en TYPO3 10.
- Sustituir la extensión de proyecto de ejemplo versión 9 por la versión 10 (jwmusterprojekt10).
A 1)
Ventajas:
- Usted tiene una versión actual de TYPO3
- Si ha realizado sus propias personalizaciones en los archivos del proyecto de ejemplo 9 (CSS, TypoScript, Fluidtemplates, etc.), estas personalizaciones siguen estando disponibles y el sitio web simplemente sigue funcionando en el frontend como antes.
Desventajas:
- No se pueden utilizar las nuevas funciones del proyecto de ejemplo 10 (renderizado de imágenes responsive, nuevos tipos de navegación, contenedores de varias columnas para el contenido, gestor de cookies)
a 2)
Ventajas:
- Usted también tiene una versión actual de TYPO3
- Dispone de todas las nuevas funciones del proyecto de ejemplo 10 (véase más arriba)
Desventajas:
- Si ha realizado personalizaciones propias en los archivos del proyecto de ejemplo 9 (CSS, TypoScript, Fluidtemplates, etc.), deberá transferirlas manualmente a los archivos correspondientes del proyecto de ejemplo 10. No es posible realizar una migración automática. La migración automática no es posible.
Por lo tanto, ambas variantes tienen ventajas e inconvenientes, y debe decidir usted mismo qué variante elige. Por supuesto, nosotros podemos ayudarle.
En los siguientes vídeos mostramos un ejemplo de actualización completa del proyecto de muestra 9 al 10, incluida la sustitución de la extensión del proyecto de muestra.
Registro de cambios (changelog)
Aquí documentamos todos los cambios que realizamos en la plantilla TYPO3 a lo largo del tiempo. De esta manera, los usuarios pueden mantener siempre al día su propia instalación. Esto hace que las futuras actualizaciones de TYPO3 sean mucho más fáciles.
Versión 2.1.0
2021-09-10 [FEATURE] Establecer el ancho del logotipo a través de TypoScript constante
Archivos modificados:
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/002_page.10.typoscript
* EXT:jwmusterprojekt10/Configuration/TypoScript/Rootpages/Project1/Constants/constants.typoscript
* EXT:jwmusterprojekt10/Resources/Private/Language/es.locallang.xlf
* EXT:jwmusterprojekt10/Resources/Private/Language/locallang.xlf
* EXT:jwmusterprojekt10/Resources/Private/Page/Partials/Header.htmlVersión 2.0.4
2021-06-25 [BUGFIX] Permitir establecer el atributo rel en el asistente de enlaces
Eliminado un error tipográfico que impedía establecer el atributo rel en el asistente de enlaces.
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yamlVersión 2.0.3
2021-05-04 [BUGFIX] Mostrar imagen ficticia en la vista de tarjeta de noticias, si no se define una imagen de previsualización en el registro de noticias
Archivo modificado:
* EXT:jwmusterprojekt10/Resources/Private/Extensions/News/Partials/List/CardItem.htmlVersión 2.0.1
2021-03-17 [TAREA] Eliminar condiciones typoscript
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/000_config.typoscriptVersión 2.0.0
2021-03-11 [TAREA] Inclusión manual de archivos tsconfig
Para simplificar el uso del proyecto de plantilla en entornos multidominio (también en conexión con otras extensiones de plantilla), ahora se puede cargar manualmente el TSconfig deseado en las propiedades de página de una página.
¡¡!! Este es un cambio de última hora, ¡tiene que incluir el tsconfig en los recursos de página de la página de inicio, si hace una actualización manual de la extensión jwmusterprojekt10!
Archivos cambiados:
* EXT:jwmusterprojekt10/ext_localconf.php
* EXT:jwmusterprojekt10/Configuration/TCA/Overrides/pages.php
2021-03-11 [TAREA] Posición de la sobreimpresión video_shariff en la lista de noticias y en la vista detallada
Archivos modificados:
* EXT:jwmusterprojekt10/Resources/Private/Extensions/News/Partials/List/CardItem.html
* EXT:jwmusterprojekt10/Resources/Private/Sass/Extensions/videoshariff.scss
* EXT:jwmusterprojekt10/Resources/Public/Css/Extensions/videoshariff.css
Archivo nuevo:
* EXT:jwmusterprojekt10/Resources/Private/Extensions/News/Partials/List/Item.html
2021-03-11 [BUGFIX] Renderizar titular y teaser en la vista de tarjeta de noticias sin imagen de previsualización
Archivo modificado:
* EXT:jwmusterprojekt10/Resources/Private/Extensions/News/Partials/List/CardItem.html
2021-03-11 [TAREA] Actualizadas extensiones yoast_seo y video_shariffVersión 1.9.3
2021-02-17 [BUGFIX] Corregir el tamaño de las imágenes en diseños de varias columnas
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/000_styles.content.get.typoscriptVersión 1.9.2
2021-02-09 [BUGFIX] Reemplazar constante relacionada con ruta eliminada
Archivo cambiado:
* EXT:jwmusterprojekt10/Classes/ViewHelpers/ExistsViewHelper.phpVersión 1.9.1
2021-02-04 [BUGFIX] Tamaño correcto de las imágenes en el contenedor de contenido inferior
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/000_styles.content.get.typoscriptVersión 1.8.0
2020-09-29 [FEATURE] Mover modifications.css a subdirectorio, crear filestorage para este directorio
Con estos cambios un backenduser puede escribir su propio CSS en el archivo modifications.css directamente desde el backend.
Archivo cambiado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/001_page.typoscript
Fichero borrado:
* EXT:jwmusterprojekt10/Resources/Public/Css/modifications.css
Fichero nuevo:
* EXT:jwmusterprojekt10/Resources/Public/Css/Modifications/modifications.css
Adicionalmente, se ha creado un nuevo almacenamiento de archivos llamado "CSS-Modifications", que apunta al directorio typo3conf/ext/jwmusterprojekt10/Resources/Public/Css/Modifications/
Este almacén de archivos sólo es visible para los administradores.Versión 1.7.0
2020-09-28 [TAREA] Añadir subtítulo al campo de título en el menú
Archivo modificado:
* EXT:jwmusterprojekt10/Resources/Private/Page/Partials/MenuItemLink.html
2020-09-28 [TASK] Sección de Menú sólo si la cabecera existe y es visible
Archivo modificado:
* EXT:jwmusterprojekt10/Resources/Private/Extensions/FluidStyledContent/Templates/MenuSection.html
2020-09-28 [BUGFIX] Definiciones de relleno incorrectas
Archivos modificados:
* EXT:jwmusterprojekt10/Resources/Private/Sass/Default/_general.scss
* EXT:jwmusterprojekt10/Resources/Public/Css/style.css
2020-09-28 [TAREA] Añadir campo oculto en la configuración del contenedor
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TCA/Overrides/tt_content.php
2020-09-28 [BUGFIX] Variable incorrecta
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/AddOns/BgImage/Setup/lib.bgimage.typoscript
2020-09-28 [CARACTERÍSTICA] Añadir Ckeditor Plugin indentblock
Archivos modificados:
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yaml
* EXT:jwmusterprojekt10/Resources/Private/Sass/Modules/_typography.scss
* EXT:jwmusterprojekt10/Resources/Public/Css/style.css
* EXT:jwmusterprojekt10/Resources/Public/Css/RTE/editor.css
2020-09-28 [BUGFIX] SVG Css solo para tipo de archivo
Archivos cambiados:
* EXT:jwmusterprojekt10/Resources/Private/Sass/Default/_general.scss
* EXT:jwmusterprojekt10/Resources/Public/Css/style.cssVersión 1.6.3
2020-08-24 [BUGFIX] Borrar doble definición de clase
Archivo modificado:
* EXT:jwmusterprojekt10/Resources/Private/Page/Partials/Header.html
2020-08-24 [TAREA] Renombrar mp9forms.yaml
Archivo renombrado:
* EXT:jwmusterprojekt10/Configuration/Forms/mp9forms.yaml => EXT:jwmusterprojekt10/Configuration/Forms/exampleform.yaml
Archivo modificado:
* EXT:jwmusterprojekt10/Configuration/TypoScript/Extensions/Forms/Setup/ext.form.typoscriptVersión 1.6.2
2020-07-21 [BUGFIX] Reactivar botones perdidos en RTE
Archivos cambiados:
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yamlVersión 1.6.1
2020-07-17 [TAREA][SEGUIMIENTO] Fusionar las diferentes configuraciones del CKEditor en una sola
Eliminados archivos de configuración innecesarios
Archivos eliminados:
* EXT:jwmusterprojekt10/Configuration/RTE/codesnippets.yaml
* EXT:jwmusterprojekt10/Configuration/RTE/wordcount-codesnippet.yaml
* EXT:jwmusterprojekt10/Configuration/RTE/wordcount.yamlVersión 1.6.0
2020-07-17 [TAREA] Fusionar las diferentes configuraciones de CKEditor en una sola
Archivos modificados:
* EXT:jwmusterprojekt10/ext_localconf.php
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yaml
* EXT:jwmusterprojekt10/Configuration/TCA/Overrides/pages.php
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/001_page.typoscriptVersión 1.5.2
2020-07-16 [TAREA] Añadir extensiones como dependencias
Archivos cambiados:
* EXT:jwmusterprojekt10/composer.json
* EXT:jwmusterprojekt10/ext_emconf.phpVersión 1.5.1
2020-07-06 Primera versión