Plantilla TYPO3 gratuita (proyecto de ejemplo) para TYPO3 11 LTS

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:

1. 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.
2. Haga clic en "Plantilla" en el menú principal izquierdo del backend.
3. Haga clic en la página "Inicio" en el árbol de páginas.
4. Si es necesario, seleccione el "Editor constante" en el cuadro de selección de la zona principal, arriba a la izquierda.
5. Seleccione "JWEILAND.NET SAMPLE PROJECT" como categoría.
6. Desplácese hasta la sección "Diseño".
7. Haga clic en el icono del lápiz situado junto al campo "Logotipo" para activar la edición.
8. Introduzca aquí la ruta de acceso a su logotipo (por ejemplo, fileadmin/logos/mi_logo.png).
9. Haz clic en el botón "Guardar" de la parte superior.

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:

1. Cambie al módulo backend "Plantilla".
2. Seleccione la página "Inicio" en el árbol de páginas (la página con el globo terráqueo).
3. En la parte derecha del backend, cambie al "Editor de constantes" a través del cuadro de selección superior.
4. En el cuadro de selección "Categoría", seleccione "PROYECTO DE MUESTRA JWEILAND.NET".
5. Desplácese hacia abajo hasta el área "Diseño".
6. Haga clic en el icono del lápiz situado junto a "App-/Favicon Square" o "App-/Favicon Wide" para activar el campo de entrada.
7. 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
8. Por último, haga clic en "Guardar" en la parte superior.
9. Si el cambio no es visible inmediatamente, debe borrar la caché del frontend y también la caché de su navegador.

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 el 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. Esto significa que el menú puede reaccionar con flexibilidad a diferentes anchos de pantalla y siempre se muestra perfectamente en todos los dispositivos finales, ya sean ordenadores de sobremesa, portátiles, tabletas o teléfonos inteligentes.

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

El tipo de navegación también se puede utilizar para cambiar entre la salida estándar y el llamado "mega menú".

A la gente le gusta trabajar con imágenes en los mega menús. Por eso también hemos implementado esta opción.

Puedes ver cómo puedes definir imágenes para el segundo nivel del menú y qué debes tener en cuenta en el vídeo.

El proyecto de ejemplo proporciona varios diseños de página para mostrar el contenido en una estructura determinada.

Los distintos diseños pueden utilizarse para cubrir la mayoría de los requisitos de diseño habituales.

Cualquier elemento de contenido puede mostrarse en la zona de pie de página del sitio web. Estos se mantienen de forma centralizada en una página especial y se muestran automáticamente en todo el sitio web.

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 están disponibles los diseños de 2 columnas y 1 columna. Puede ver cómo seleccionar el diseño deseado en el siguiente vídeo.

En el pie de página de la página verá una llamada "meta navegación" con enlaces a varias páginas (Inicio, Contacto, Pie de imprenta, Privacidad).

En este vídeo aprenderás a editar las páginas que aparecen allí.

Diversa información se puede mostrar en el tablero de instrumentos 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).

También hay algunas extensiones en el TYPO3 Extension Repository (TER) que proporcionan widgets adicionales.

Cada usuario backend puede configurar el dashboard individualmente. Incluso puede crear varios cuadros de mando si es necesario.

En TYPO3 11 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)

Sin embargo, hemos añadido la extensión "yoast_seo" para facilitar la optimización "on page" de 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.

En las propiedades de cada página, puede personalizar el título, la descripción y la imagen para Facebook y Twitter. Algunas metaetiquetas se generan en el código fuente HTML (Open Graph y Twitter Cards). Para ello, en las propiedades de la página hay una sección "Medios sociales".

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.

En el proyecto de ejemplo para TYPO3 11, 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.

Pero también 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 ciertos 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.

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.

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:

1. por elemento de contenido en los archivos utilizados
2. 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.

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 entramos en más detalle sobre ciertas funciones en otros vídeos.

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 ejemplo con el proyecto de muestra. Aquí hemos incluido algunos ejemplos de las distintas opciones de formularios. Sin embargo, tendrá que 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.