Ai a WordPress para Mano Arquitectura

Ai a Wordpress para web de Mano Arquitectura

Convertir de un mockup gráfico realizado en Illustrator a una web autogestionable basada en Wordpress


Introducción:

Diseñar y programar un sitio web autogestionable desde Ai a WordPress con aspecto minimalista para el estudio de arquitectura Mano Arquitectura, situado en la ciudad de Barcelona.

La web tendrá que funcionar con cualquier gestor de contenidos open source teniendo en cuenta el desconocimiento del cliente en cuanto a programación. Por lo que la gestión del contenido y futuras actualizaciones de contenido y software deben de ser sencillas, capaces de ser manejadas por cualquier usuario sin nociones de programación.

  • Equipo de diseño y desarrollo

    El proyecto se desarrolla en dos fases conjuntas no interrumpidas, diseño y programación.

    El diseño corre por cuenta del diseñador gráfico Àlvaro Ortiz, Sherpa Agency.

    La programación, maquetación e instalación de la web de Mano Arquitectura corre por cuenta del desarrollador thevelop.com

  • Diseño gráfico personalizado:

    Para el diseño, Álvaro Ortiz utiliza Adobe Illustrator y entrega los mockups en formato .ai, archivo bruto de Adobe Illustrator. Se tienen en cuenta todas plantillas visibles en el frontend para generar los archivos gráficos para cada una de ellas.

  • Desarrollo web personalizado:

    Para el desarrollo web, programación y maquetación se determina que WordPress es el gestor de contenidos recomendable para este proyecto web de Mano Arquitectura. Los archivos de Illustrator se convierten a código, creando un proyecto de conversión de Illustrator a WordPress.

    Se utilizan las siguientes tecnologías para el sitio web:

    • Maquetación con HTML5 y CSS utilizando como base el framework más ligero, HTML5 Boilerplate.
    • Programación, jQuery (javascript), en el front y PHP en el backend.
    • Gestor de contenidos elegido, WordPress.
  • Frontend a medida:

    El aspecto gráfico de la web se personalizó a medida, creando una web única para el cliente. Se dotó a la aplicación de varias plantillas para todos los ganchos de manera que el cliente eligiese a conveniencia cual de ellas utilizar para cada contenido en concreto.

  • Panel de administración a medida:

    Teniendo muy en cuenta los conocimientos nulos de programación y el aspecto gráfico se habilitaron todas las funciones, ganchos y filtros necesarios en el escritorio de administración de la web.

    Se tuvieron en cuenta todas las funciones necesarias para cada uno de los apartados de la web pudiese ser controlado de forma eficiente sin requerimientos de programación.

    Se desarrolló un panel de funciones avanzadas para controlar la cantidad de items a mostrar por páginas tipo listado, un panel de control de funciones del slider, la gestión del contenido en varios idiomas, etc…

    De la misma manera, se desarrollaron una serie de ganchos para separar el contenido para cada tipología de contenido, teniendo en cuenta que esto simplifica de manera notable la gestión de una web de esta tipología.

  • Responsive web design:

    Utilizando la tecnología responsive web design se dotó al sitio web de Mano Arquitectura de compatibilidad con los dispositivos habituales de conexión a internet.

    Permitiendo de esta manera mostrar todas las páginas del sitio web independientemente de cual sea el dispositivo que la visualice. Smartphone, tablet, ordenador portátil, ordenador de sobremesa…

  • Web performance optimization:

    Se implementaron técnicas para mejorar la velocidad de carga de la página. El WPO estuve presente desde el comienzo del proyecto, por lo que además de las herramientas montadas para hacer la carga del sitio web más liviana también se agruparon las hojas de estilo en una sola, se agruparon los javascripts en los mínimos posibles y algunos de ellos se prepararon para que fuesen cargados desde cdn.

    En una web tan gráfica con imagenes de semejantes dimensiones era muy recomendable desarrollar la carga de imagenes en modo asíncrono, implementar mejoras en el rendimiento con ajustes en el servidor como minificación del código fuente, compresión del código mediante gzip, ordenación de los archivos a cargar según el orden recomendable, etc…

  • Cortafuegos y seguridad:

    La web de Mano Arquitectura se desarrolló teniendo en cuenta la seguridad. El código se programó de manera segura, filtrando todos los fragmentos de código con funciones y filtros propios de WordPress o PHP, para evitar en gran medida los ataques de hackers y spamers.

    Se instaló un complejo y robusto cortafuegos en el servidor mejorando notablemente la seguridad del sitio web de Mano Arquitectura.


Proyectos relacionados:

¿Hablamos?

Gracias, hemos recibido tu correo.

Por favor corrige los errores y prueba de nuevo.
Thevelop

Programador experto en Wordpress
Barcelona (Spain) - Tel: 622 499 910

Do NOT follow this link or you will be banned from the site!