Safo Photographie

Esta página fue desarrollada con WordPress + WooCommerce a medida (Custom Post Types, Custom Taxonomies). La maquetación web con Html y Sass, las maquetas con Figma y Photoshop

1. 1. Fase de maquetación
2. 2. Maquetación Web
3. 3. Programación WordPress + WooCommerce
4. Screenshots

Puedes encontrar el código de este proyecto en Github

1. Fase de maquetación

Realicé la maqueta de esta páginacon Figma y Photoshop. Quería un diseño moderno y dinámico.

Basé el diseño de mi página alrededor del contenido textual, buscando un carga de página ultra-rápido y con el objetivo de enviar a los usuarios lo mas rápido posible hacia la tienda. Limité la cantidad de imagenes de la página.

Esa elección sobre las imagenes me trajo también estos beneficios:

1. Focalizar la atención sobre la información útil
2. Mejorar el UX (optimizando el tiempo de carga de cada página)

2. Maquetación Web Responsive

Esta página esta integrada así:

1. HTML / SASS / jQuery
2. Full Responsive
3. Mobile First
4. Adaptada a todos los navegadores modernos (Chrome, Firefox, Safari, Edge)

Mi organización SASS

1. Metodología BEM (Para los nombres de las clases)
2. Sass 7-1 Pattern (Para la organización de los archivos)
3. Flexbox et Css Grid Layout

No utilizo ningún Framework Css

3. WordPress + WooCommerce

No utilizo plantillas existentes (ni gratuitas ni de pago), ni constructores, se trata de una Plantilla a medida.

Hacer una página a medida (plantilla) me permite tener mucho mayor control sobre mi código, lo que me aporta:

1. Una mejor gestión del SEO-onpage
2. Mayor control para hacer evolucionar la página
3. Una gestión mas fácil para el mantenimiento
4. Una limitación de las fallas de seguridad
5. Una mejora notable de la velocidad de varga de la página y su accessibilidad

(Resultados de LightHouse)

Esta página esta hecha con:

1. El gestionador de dependencias Composer
2. La arquitectura WordPress de johnpbloch
3. Gestión de mis assets (css, javascript, imágenes estáticas) conParcelJS
4. Gestión del versioning con Git
5. WooCommerce

Esa organización me permite poder versionar facilmente mi código sin tener que versionar la totalidad del Core WordPress (lo que sería demasiado pesado). Me da también la facilidad de poder instalar en menos de 5 minutos una copia exacta de la versión en producción en cualquier PC. Me permite sobre todo poder desarrollar en local, lo cuál es mucho mas cómodo, y mucho menos arriesgado.

Para la gestión dinámica del contenido de la página (proyectos artículos), utiliso -sin necesidad de plugins-:

1. Custom Post Type
2. Custom Taxonomies

Para la gestión del contenido estático (editable desde el Dashboard) :

1. ACF (con acf-json para una facilidad de puesta en producción).

Plugins utilizados en producción:

1. Advanced Custom Fields (ACF)
2. Polylang
3. YoastSEO
4. iThemeSecure
5. Contact Form 7
6. Woocommerce
7. Variation Swatches for WooCommerce

Plugins utilizados únicamente en desarrollo:

1. Query Monitor
2. Advanced Custom Fields: Theme Code

4. Screenshots