1. Creación y responsabilidades

La separación es deliberadamente simple: dbxContent proporciona el contenido, los módulos proporcionan sus funciones y el diseño seleccionado forma la cáscara exterior. Por lo tanto, un diseño puede cambiar el diseño, los colores, la tipografía, las distancias, la marca, el logotipo, la forma del menú, el fondo y el pie. No sustituirá el control de elegibilidad o el procesamiento de datos de un módulo.

Paquete de diseño

Cada diseño es independiente dbx/design/<designname>/. Los componentes esenciales son:

dbx/design/mein-design/
├── design.json          Metadaten, Layout und verfügbare Skins
├── htm/default.htm      Hauptschale mit genau einem [dbx:content]
├── htm/logo.htm         optionaler Logo-Baustein
├── htm/branding.htm     optionaler Branding-Baustein
├── htm/footer.htm       optionaler Footer-Baustein
├── css/                 design-eigene Stylesheets
└── img/                 design-eigene Bilder und Texturen

Las ranuras de diseño [dbx:logo], [dbx:branding] y [dbx:footer] Mantenga las cáscaras claras. La Ranura de Contenido [dbx:content] Tiene que estar ahí una vez. Los activos de un diseño no deben apuntar secretamente a archivos privados de otro diseño.

Diseño y piel

El diseño determina la estructura y el estilo básico. Una piel es una variación de color dentro de este diseño. En la selección de diseño, las pieles se agrupan bajo su diseño respectivo. Un nuevo diseño sólo debe incluir las pieles realmente soportadas en design.json publicación.

2. Los tres diseños existentes como ejemplos

dbXappclásico plano de aplicación horizontal

Punto de aprendizaje: Una estructura básica clara puede ser variada en color a través de pieles sin reedificar menús, módulos o contenido.

Flores: marca independiente con menú lateral

Punto de aprendizaje: Un diseño puede cambiar significativamente el diseño de la página. Es importante que los existentes dbxMenu-Expenditure, system actions and content areas are maintained.

STEAL: Estilo material con operación familiar

Punto de aprendizaje: No cada nueva apariencia necesita una nueva arquitectura de página. A menudo, una actualización de diseño limpiamente limitada es más segura y rápida.

3. Diseño manualmente con dbxDesign_admin Creado

La ruta manual estándar conduce sobre el Design Studio. El mago allí produce un paquete de diseño completo, independiente y probado. El diseño inicial sigue intacto.

Paso 1: Seleccione el diseño inicial

1. En el menú principal System Design Studio abierto.
2. Con un diseño adecuado Personalización Elija o elija el general Asistente de diseño Empieza.
3. Seleccione el diseño inicial según la estructura requerida: dbXapp para un menú superior, Flores como ejemplo de una barra lateral o STEAL para una cáscara horizontal estirada por el material.

Paso 2: Definir la identidad

• Nombre técnico: corto, claro y permanente, por ejemplo meine-firmaEsto crea la carpeta de diseño.
• Título de diseño: nombre comprensible para la selección.
• Descripción: Brevemente propósito de documento, grupo objetivo y estilo.

Paso 3: División de página y menú

El mago ofrece tres diseños básicos:

• Menú arriba: Adecuado para interfaces de administración y espacios de trabajo amplios.
• Menú izquierdo: Adecuado para las apariencias de marca, muchos puntos principales y un eje de contenido silencioso.
• Híbrido: Marcado arriba y navegación izquierda.

A continuación, seleccione la forma del menú, ancho de contenido y pie. “Compact” tiene sentido para muchas entradas, “Tabs” se ve técnica y clara, “Pills” más amigable y suave. La vista previa muestra la división básica, pero no reemplaza la prueba posterior con submenú real.

Paso 4: Marcar, logotipo y colores

1. Registrar el nombre de marca y reclamar.
2. BootstrapElija icono o propio logotipo. Para logotipos use PNG, JPG, WEBP o GIF hasta 5 MB.
3. Definir el color primario, secundario y acentuado.
4. Seleccione fondo, área y color de texto para que el texto y los controles tengan suficiente contraste.
5. Tipografía y esquinas para coincidir con el personaje de marca.

Paso 5: Pie de página y diseño estándar

El pie completo contiene texto, enlaces adecuados y barra de ventana. "Minimal" reduce la información, "sólo la tira de Windows" recibe sólo el para dbxapp- Barra necesaria. Establecer el nuevo diseño como un estándar de primera línea sólo inmediatamente si la vista previa ya ha sido probada.

Paso 6: Generar y controlar

Después de enviarlo, dbxDesign_admin el paquete en la puesta en escena, comprueba archivos obligatorios, caminos, ranura de contenido y metadatos y lo publica sólo después. Luego el diseño sobre Ver diseño abrir y procesar la lista de verificación en la Sección 6.

4. Diseño de archivos dirigidos manualmente

Para el ajuste fino, los desarrolladores pueden editar los archivos del paquete de diseño recién creado. Lo siguiente se aplica: Los cambios permanecen en la carpeta de diseño. Las clases de kernel, los módulos, DD/FD y las tablas de bases de datos no son componentes de diseño.

Normas vinculantes

• [dbx:content] Recibido exactamente una vez.
• El dbxapp propietarios usados como {dbx:title}, {dbx:design}, {dbx:skin_css} y {dbx:skin_class} no te quites.
• core.js?design={dbx:design}, dbxMenu-Llamas, menú de administración, ventana y enlaces adecuados.
• No replicar la lógica PHP en HTML o CSS.
• No requieren dependencias externas de construcción. El paquete debe funcionar independientemente después de copiar.
• Nuevas imágenes y texturas bajo su propio img/- Colocar carpetas y referenciarlas relativamente.
• Enmiendas a design.json con título, descripción, diseño, revisión y pieles documento trazable.

Structuing CSS sensibly

Comience con variables para colores, áreas, radio y sombras. Luego separa el shell, menu, contenido, formularios, informes y reglas sensibles. Selectores de diseño siempre en la clase de diseño body limitación. Así, una regla no afecta accidentalmente a otros diseños o al editor.

body.mein-design {
  --design-primary: #245a87;
  --design-surface: #ffffff;
  --design-text: #17212b;
}

body.mein-design #dbxHeader { … }
body.mein-design .dbx-form { … }
body.mein-design .dbx-report { … }

Revise la palanca, enfoque, estado activo y elementos desactivados por separado. Un estado bastante normal no es suficiente: el enfoque del teclado y los elementos del menú activo deben permanecer claramente visibles.

5. Diseño con dbxKi Crear o modificar

Para un diseño visual completo, un cambio de estilo extenso o muchos archivos coordinados es dbxKi Tareas de diseño de AI proporcionada. dbxKi proporciona a la AI el diseño inicial y un contrato técnico vinculante. La AI no obtiene permiso para realizar acciones de servidor.

Paso 1: Elige una tarea

• Cambio de diseño existente: Fuente y destino son idénticos. Adecuado para mejoras como nuevas interfaces de menú, campos de mejor forma o vistas móviles optimizadas.
• Desarrollar un nuevo diseño: Un diseño existente sirve como base compatible, el resultado se da un nombre de destino técnico gratuito.

Paso 2: Escribir una buena sesión informativa

El campo Reunión informativa / Objetivo describe el resultado deseado, no los comandos CSS individuales. Luego rellena las preguntas clave para la distribución, menú, marca, calzado, móvil y accesibilidad.

Ejemplo: Cree un diseño de acero inoxidable de alta calidad para una aplicación B2B técnica. La división sigue siendo dbXapp. Los menús se ven como cromo liso, fondos como la hoja sutil acanalada. Los puntos activos y el enfoque del teclado deben ser claramente visibles. Las formas permanecen tranquilas y fáciles de leer. Todos los módulos, acciones y derechos de Ajax funcionan sin cambios.

La opción Comportamiento del sistema, módulos, Ajax, openWin y todos los derechos sin cambios Deja activado. Describe un límite de compatibilidad no negociable.

Paso 3: Paquete de orden de exportación

dbxKi crea un ZIP con información, contexto, lista de archivos, diseño inicial y contrato de resultados. La AI debería contener 00-START.md y KI-AUFTRAG.md procesamiento. Cambios directos de bases de datos, módulos PHP o herramientas propias de terceros no pertenecen a una respuesta de diseño.

Paso 4: Respuesta ZIP

La AI solo entrega archivos nuevos o modificados bajo result/design/ y un manifiesto:

manifest.json
result/design/htm/default.htm
result/design/css/design-custom.css
result/design/img/…

{
  "contract": "dbx.design.result.v1",
  "mode": "create oder update",
  "source_design": "dbxapp",
  "target_design": "mein-design",
  "summary": "Kurze Beschreibung"
}

Paso 5: Importación y comprobación

1. Seleccione la respuesta ZIP en el bloque de importación.
2. Revisa la cremallera Empieza. En este punto, el diseño activo aún no ha cambiado.
3. Compruebe la lista de archivos: Nuevo, modificada o sin cambios.
4. Compruebe que sólo los archivos de diseño están incluidos y el objetivo es correcto.

dbxKi Limita el número de archivo y el tamaño del paquete, previene las rutas ZIP inseguras, valida el manifiesto y controla cada archivo de resultado. En un nuevo diseño, el delta se monta en el montaje con el diseño inicial en un paquete completo.

Paso 6: Aplicar

Primero dbxFormConfirmación Diseño de aplicación ejecuta el cambio. Antes del intercambio, se crea automáticamente una copia de seguridad ZIP para las actualizaciones. Entonces validado dbxDesignService el resultado completo y activa sólo un diseño válido. La sesión de vista previa y el estancamiento temporal se eliminan.

Cuando el mago, cuando dbxKi?

6. Compatibilidad y pruebas

Un diseño sólo se termina cuando la aplicación y no solo funciona una sola página de contenido. Después de cada creación o cambio importante, considere al menos las siguientes áreas:

Navegación y concha

• Menú principal, menú de administración y submenú de varios niveles con ratón, tacto y teclado.
• estados activos, desactivados, centrados y desactivados.
• Selección de diseño / piel, elección de idioma, menú de usuario y carrito de compras.
• Pie de página, ventana, ventanas minimizadas y “Cerrar todas las ventanas”.

Componentes técnicos

• dbxContentPágina con encabezados, listas, tablas, imágenes y texto largo.
• dbxForm con campo de texto, selección, casilla de verificación, archivo, nota, error de validación y confirmación.
• dbxReport como tabla, incluyendo muchas columnas, pies y pantalla móvil.
• Tienda catálogo, detalle de producto, carrito de compras y checkout.
• Acciones ajax, diálogos, openWin, avisos y confirmaciones.

Ver tamaños

Criterios de eliminación

• No errores PHP, JavaScript o plantilla.
• No hay marcadores visibles como [dbx:…] o {dbx:…}.
• No faltan imágenes locales, fuentes o hojas de estilo.
• contraste de texto por lo menos 4,5:1 para el texto normal; Enfoque visible.
• Mantén todas las acciones de escritura dbxForm- y protección de módulos.
• Las referencias del diseño sólo son propias o expresamente comunes dbxappRecursos.

7. Errores y soluciones típicos

El diseño no aparece en la selección.

design.json, nombre técnico y archivos obligatorios. Luego vuelva a cargar el Design Studio.

El contenido falta o aparece doble.

[dbx:content] debe ocurrir exactamente una vez en la cáscara principal.

Un menú se ve bien, pero el submenú no.

No sólo el primer nivel. Prueba listas anidadas, títulos largos, niños activos y estados abiertos por separado.

Hover apenas es legible.

Definir el primer plano y el color de fondo juntos. No confíe en las sombras de texto como el único contraste.

Los formularios aparecen dañados en el nuevo diseño.

Compruebe las entradas nativas, selecciones, áreas de texto, subidas de archivos, enfoque, errores y campos desactivados juntos. dbxForm- No reemplaces a Markup.

Después de una respuesta de AI, los archivos están desaparecidos.

Para las actualizaciones, la respuesta puede contener un delta. dbxKi Complementa el estancamiento del diseño inicial. El manifiesto debe indicar correctamente la fuente, el destino y el modo.

El AI-ZIP es rechazado.

Contrato dbx.design.result.v1, carpetas result/design/Compruebe caminos relativos seguros y archivos de diseño permitidos.

Se retirará una enmienda.

Utilice la copia de seguridad de diseño creada cuando se aplica. Antes de los cambios manuales, descarga adicionalmente un ZIP a través de Design Studio.

8. Secuencia estándar recomendada

1. Objetivo y grupo objetivo por escrito.
2. Seleccione un diseño inicial adecuado basado en la división requerida.
3. Para requisitos estándar de Asistente, para el diseño complejo dbxKi uso.
4. Escoja siempre un diseño de destino independiente; cambie los diseños existentes sólo conscientemente en modo de actualización.
5. Consulta la vista previa y lista de archivos.
6. Cambio dbxForm Liberar y registrar la copia de seguridad automática.
7. navegación; dbxContent, dbxForm, dbxReport, tienda, prueba de Ajax y vista móvil.
8. Sólo entonces se establece como un diseño estándar.
9. Objetivo de diseño, revisión, activos especiales y resultados de prueba design.json o la documentación del proyecto.

Open Design Studio Apertura de una tarea de diseño AI