Serveis (7 páginas, 1 de resumen y las otras una de cada servicio)

Transcripción

1 PÁGINA WEB Árbol de navegación HOME Serveis (7 páginas, 1 de resumen y las otras una de cada servicio) Sostenibilitat -> NO SE HARÁ AHORA SEGURAMENTE, ESTAMOS PENDIENTES DE DISEÑO, SI SE HACE, SERA PAGINA SENCILLA DE CONTENIDOS Nosaltres (7 páginas) Landings de productos (29 páginas, réplicas entre ellas) Actualitat Contactar Es una web sencilla, en cuanto a estructura, pero con muchos contenidos, por esto es importante hacer unas buenas plantillas y ellos crearán los contenidos en base a nuestras plantillas elaboradas. En los siguientes apartados se define, por cada apartado, los contenidos que tendrá, se pone una captura del diseño (tenemos el png por capas y efectos de roll-over de toda la web, que se os pasarán cuando empecéis con el proyecto), y se definen los bloques que hay. Es imprescindible programar bien: - Tema bien formado, siguiendo estándares CSS-HTML-Javascript, que pase validadores - Pensado para buen posicionamiento SEO (titulares H1 ) - Usar custom types o parecido en wordpress para definir cada tipo de contenido - Pensar en el multiidioma total de la web (contenidos, titulares, meta tags, slug ) - Usar el mínimo número de plug-ins posible (los que toquen) Todos los contenidos deben poder ser traducibles a catalán, castellano e inglés. La parte de agenda y noticias, siempre estará en catalán y castellano, pero no siempre en inglés. Si estás viendo la web en inglés, sólo debes ver los contenidos traducidos. El resto de la web si se traducirá toda. Los roll-overs están definidos en el diseño, en caso de duda, los textos que son link siempre van en negro, el roll-over es en azul (#2fa1d5)

2 HOME

3 Esta es la home, que está compuesta por un menú superior (Serveis, sostenibilitat, nosaltres, actualitat, contacta). Al pasar por encima de Serveis, se tiene que desplegar un mega-menu con todos los servicios: Después del menú viene un slider de imagen, con 7 imágenes, que corresponden a las 7 pestañas. Cada pestaña tiene un título, una descripción y un conjunto de enlaces, el titulo de la pestaña y la imagen de fondo. Debe cambiar cada X segundos sólo,pero debe poderse cambiar al pinchar sobre cada pestaña. En realidad aquí siempre saldrán las líneas de negocio (servicios), por lo que se puede aprovechar este custom type si se quiere, pero entonces hay que poder definir qué productos salen y en qué orden, y definir los textos de aquí de forma específica. La imagen debe poder ser clicable hacia un link interno o externo. Debajo hay el módulo de Actualidad, dónde aparecen las 4 últimas noticias que tengan marcada la opción en portada (se puede usar categoría para esto, si se prefiere) Debajo el módulo de Sostenibilidad y los Tweets. Falta acabar el diseño de sostenibilidad, pero serán un conjunto de pestañas con contenido dentro. Es probable que nos pidan, inicialmente, ocultar este módulo y mostrar las 3 noticias que caben, en lugar de 4. La idea sería que puedan elegir qué HOME quieren ver, si con 2 filas (1ª con 4 noticias, 2ª con sostenbilidad+tweets), o con 1 sola fila (3 noticias + tweets). Debajo irán 4 bloques, que serán enlaces a partes de la web (o externos). Cada uno será una imagen, con un titular, y el enlace. Si es interno, que se abra en la propia página, si es externo, en nueva ventana. Propongo definir este bloque como banner pequeño, ya que en otras partes de la web saldrán componentes como este, y sería útil definirlos todos conjuntamente, y seleccionar de algún modo cuales salen en la home. Finalmente el footer grande (hay un footer pequeño, ver Landing Pages). Este footer grande debe contener el listado de Servicios, las páginas de Sostenibilidad, de Nosotros, de Actualidad y de Contacto, así como enlace a las redes sociales. Viene a ser un mini-sitemap pensado para posicionamiento. En la HOME es la única página dónde no hay breadcrumb.

4 SERVEIS (servicios)

5 Se trata de la página de recibida de todos los servicios. Para acceder a los servicios, o se pasa por el menú servicios y con el mega menú se va a un servicio o producto, o si no se va a esta página que los engloba a todos. Habrá un slider, habrá que definir la imagen, el titular y el texto, y al pincar a algún lado del slider, saltar al link que se defina. Si no hay ninguno activo, que no salga el slider. Debajo hay todos los servicios enumerados, por cada uno, foto, titular, pequeño texto, y un listado de los productos de este servicio, que si le das a + se despliega y el titular se queda a bajo, y dándole a se pliega. Al pinchar a un producto iríamos directamente a la Landing del producto. Si le damos al titular o foto, a la página del servicio.

6 En la página de un servicio en concreto, tendremos el título, el slider de esta línea. Debajo los productos de la línea, con un slider por si hay más. Hay que poder definir el órden! Son como los banners con imagen de la HOME (imagen+texto corto) Debajo, pestañitas de contenido (Presentación Innovación lavola), cada uno con contenido HTML, y a la derecha, un testimonial (3 frases) de este servicio (igual que el de la landing) Debajo, los casos de éxito de todos los productos de esta línea, se debe poder definir el órden, y pasar entre ellos con las flechitas. Cada caso de éxito, tendrá título, texto, imagen, y enlace a página de contenido opcional (la página de contenido, tomar como muestra alguna de nosotros, que puedan editar fácilmente el contenido).

7 NOSALTRES (nosotros) Se trata de 7 páginas de contenido, dónde en general se trata de información sencilla. Dejamos al critero del programador como hacerlas, si aprovechar los módulos hechos para que sea más customizable, o hacer plantillas adhoc. Son páginas que el cliente debe poder modificar el contenido, pero que por lo general, cambiarán poco. La primera es la presentación de Nosotros, que de forma gráfica, da acceso al resto de secciones de Nosotros, y al principio tiene banner, título, texto que dan acceso al subapartado Presentación, y a la derecha permite descargar un PDF.

8 El resto de apartados tienen el submenú a la izquierda, y a la derecha el contenido, en este caso un texto con un video a la derecha, y pestañas de contenido debajo (como las de la landing page, se puede aprovechar la forma de crearlas) LO G O L O G O Los apartados de Visión, Responsabildid social tienen la misma estructura que presentación, pero responsabilidad social tiene 2 subapartados. También los apartados sin diseño los consideraremos igual que estos.

9 Finalmente hay 2 apartados algo distintos: Personas, que debe ser todo el listado de personas (definidos para las landings), con un buscador por área.

10 Memorias es un listado de las memorias anuales que hacen, con un enlace a PDF o a una web externa. Cada año habrá una más.

11 LANDING PAGE

12 Las landing pages están pensadas para posicionar los productos finales de la empresa. El header es el mismo que las otras páginas, pero el footer no, se usa un footer muy reducido, sólo con un botón de contacta, que destapa un mail y una teléfono (y captura el evento para registrarlo en google analytics, así podemos contabilizarlo). El objetivo de este footer es no dar opciones a irse a otra página, por esto es una landing. El contenido se organiza en: - Breadcrumb general de la ubicación de la landing (siempre dentro de un servicio) - Banner de imagen, título, subtítulo y texto corto - Persona de contacto (estaría bien que fuera un tipo propio). Cada persona de contacto tendrá foto, nombre, cargo, teléfono e imagen con el mail (no se pondrá el mail directo para evitar spam), y mail (si lo pediremos para tenerlo). Al pinchar al mail (imagen) se irá a miniformulario que se pedirá Nombre, Mail, Teléfono y el motivo, y se mandará al mail de esta persona. - Puntos fuertes, serán siempre 3 textos, con los números 1,2,3 delante, hay que pedir, por cada texto, título y texto. - Testimonial: A la derecha de los 3 textos, se piden los 3 textos del testimonial de esta landing - Casos de éxito: Se deben poder elegir qué casos de éxito se deben visualizar en esta landing page (siempre de su linia de producto) - Pestañas: Se trata de un conjunto de pestañas, donde cada una será un contenido distinto. Yo lo permitiría como HTML, para que tengan flexibilidad, pero ya dando una plantilla, ya que casi siempre será como en el diseño, texto libre a la izquierda, foto a la derecha. Habría que definir de forma fácil de usar los estilos de título, subtítulo, destacado, texto largo Por cada pestaña, poder definir el icono que aparece (puede ser de un listado) -

13 ACTUALITAT (actualidad)

14 La página de actualidad debe aglutinar todos los contenidos de actualidad que en concreto son: - Noticias: con fecha+hora, titulo, descripción corta y descripción larga, imagen, categoría y tags (aquí la descripción larga no sale). Si se pincha se va a la noticia. Las noticias deben tener un texto corto específico para la HOME. Se deben poder categorizar. Falta un listado de categorías está pedido al equipo de diseño. - Boletín: Opción de suscripción al boletín - Agenda: Listado de eventos (mostrar los 3 últimos en esta página), se puede ampliar para ver más, o pinchar en uno para ir a la descripción del evento. - Últimos twits(tweets): Provienen del tweet de la empresa - Enlaces a redes sociales Ejemplo página noticia de texto i/o imagen (es lo mismo, pero como queda si hay o no foto), y una entrada de la agenda:

15 CONTACTAR En la página de contactar habrá los mapas de las 5 sedes de la empresa, y un formulario de contacto con captcha sencillo.