Direkt zum Inhalt springen

17.05.2017 | Ralf Hettinger

Micrositio TYPO3: "Diversión creativa"

Para la nueva edición 2016/2017 del folleto Gutes Aufwachsen mit Medien - Ein Netz für Kinder (Crecer bien con los medios de comunicación - Una red para niños ) del Ministerio Federal de Familia, Tercera Edad, Mujer y Juventud, diseñamos y desarrollamos el micrositio Kreativer Spielspaß (Diversión creativa ) para niños de 4 a 10 .

El proyecto fue encargado por nuestro cliente jugendschutz.netque creó el folleto y supervisó su contenido.

Al micrositio:
www.surfen-ohne-risiko.net/kreativ

Historia del proyecto

Agosto de 2016

El proyecto comienza con una sesión de brainstorming de los participantes implicados. Aparte de la idea del cliente, todavía bastante abstracta en cuanto al contenido, de poder hacer accesibles las ofertas creativas en línea para los niños en un sistema de catálogo en línea, hasta ahora sólo se conoce la fecha aproximada de puesta en marcha: La nueva edición del folleto "Crecer bien con los medios de comunicación - una red para los niños" del Ministerio Federal de Familia, Tercera Edad, Mujer y Juventud se publicará a más tardar en noviembre de 2016. Dado que se hará referencia al micrositio en él, debe estar en línea para entonces. 

Los requisitos del marco son

  • Adhesión a la guía de estilo de la iniciativa "Crecer bien con los medios de comunicación".
  • Acceso lúdico y estructurado para los grupos objetivo, padres y educadores, pero no demasiado lúdico.
  • Presentación atractiva en todos los dispositivos, especialmente en los smartphones.

En estrecha colaboración con nuestro socio de diseño Kontext Kommunikation, desarrollamos los conceptos básicos para la orientación y la función del usuario. Tras la aprobación del cliente, creamos los wireframes correspondientes. Estos pasan por un bucle de corrección y son liberados por el cliente. El socio de diseño empieza a diseñar el trazado según nuestras especificaciones a finales de agosto.


Septiembre de 2016

El diseño toma forma. Importante para minimizar los resultados inesperados: El cliente nos proporciona datos reales del contenido para que no tengamos que trabajar con contenidos de muestra en la maquetación. Los iconos se han creado de acuerdo con la IC de la iniciativa Gutes Aufwachsen mit Medien. Los colores, las formas, los tipos de letra y las imágenes de contenido están dispuestos.

Paralelamente, comienza el desarrollo: el backend del sistema TYPO3 existente de Surfen ohne Risiko, en el que se ubicará técnicamente el micrositio, se completa para el mantenimiento de los datos y se llena inicialmente para las pruebas. Se han programado prototipos de la inusual guía de usuario del concepto de navegación de escritorio para descartar incertidumbres sobre su viabilidad.


Octubre de 2016

El trazado está liberado. Ahora se puede empezar a implementar el frontend individual de forma selectiva. Durante la ejecución, se acuerdan con el cliente los detalles finales de la función del filtro. 


Noviembre de 2016

El 8 de noviembre de 2016 se completa el micrositio preliminar y se rellena el contenido hasta el punto de que estamos satisfechos. Tras una breve prueba, el cliente también considera que el resultado es bueno. Se realiza una prueba beta: El cliente envía el micrositio preliminar a los probadores seleccionados. Los comentarios son en general muy positivos.

Se han encontrado y corregido algunos errores finales y se han adaptado técnicamente algunas nuevas características sugeridas por las personas que realizan las pruebas. Dado que también nos hemos familiarizado con los objetivos de contenido del cliente en las últimas semanas, también estamos proporcionando apoyo editorial con el objetivo de cumplir los plazos: estamos intercambiando imágenes y textos individuales para lograr una imagen general coherente en términos de contenido.

El micrositio se pondrá en línea el 29.11.2016.

Servicios

  • Concepto:
    • Traducir la idea del contenido en conceptos operativos innovadores (navegación de la página y función de búsqueda)
    • Creación de wireframes
  • Coordinación:
    • Establecimiento y seguimiento del horario
    • Coordinar al socio de diseño
    • Coordinación con el equipo editorial del cliente
    • Acompañamiento de las ejecuciones de corrección y aprobaciones
  • Aplicación técnica:
    • Establecimiento del backend editorial en el sistema TYPO3 existente
    • Implementación de la salida con la extensión TYPO3 programada individualmente basada en Extbase (filtros, listas, páginas de detalle)
    • Programación de jQuery en el frontend. Centrarse en la usabilidad técnica (por ejemplo, las funciones de filtro) y el rendimiento (por ejemplo, la recarga de páginas AJAX)
    • Establecimiento del diseño totalmente escalable: Diseño web responsivo que se adapta con fluidez a la anchura respectiva y a laaltura de .
    • Palabras de moda:
      SVG-Sprites, AJAX, Extbase, Above-the-fold Inline CSS, Viewport Sized Typography, Vertically Responsive Design