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. Fase de diseño
Realicé la maqueta de esta página con 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:
- Focalizar la atención sobre la información útil
- Mejorar el UX (optimizando el tiempo de carga de cada página)
2. Maquetación Web Responsive
Esta página esta maquetada de la siguiente forma:
- HTML / SASS / jQuery
- Full Responsive
- Mobile First
- Adaptada a todos los navegadores modernos (Chrome, Firefox, Safari, Edge)
Mi organización SASS
- Metodología BEM (Para los nombres de las clases)
- Sass 7-1 Pattern (Para la organización de los archivos)
- 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:
- Una mejor gestión del SEO-onpage
- Mayor control para hacer evolucionar la página
- Una gestión mas fácil para el mantenimiento
- Una limitación de las fallas de seguridad
- Una mejora notable de la velocidad de carga de la página y su accessibilidad
Esta página esta hecha con:
- El gestionador de dependencias Composer
- La arquitectura WordPress de johnpbloch
- Gestión de mis assets (css, javascript, imágenes estáticas) conParcelJS
- Gestión del versioning con Git
- 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-:
- Custom Post Type
- Custom Taxonomies
Para la gestión del contenido estático (editable desde el panel de administración) :
- ACF (con acf-json para una facilidad de puesta en producción).
Plugins utilizados en producción:
- Advanced Custom Fields (ACF)
- Polylang
- YoastSEO
- iThemeSecure
- Contact Form 7
- Woocommerce
- Variation Swatches for WooCommerce
Plugins utilizados únicamente en desarrollo:
- Query Monitor
- Advanced Custom Fields: Theme Code
4. Screenshots
