Presentación hecha en el Wordcamp Lima 2014. Buenas prácticas de diseño y maquetado para Wordpress.

1. Theming
like a boss
Buenas prácticas de
diseño y maquetado
para WordPress

2. ¡Hola! Soy Mariella
Diseño web editorial.
Amo el Chai y los gatos.
@maku_m
Directora de Arte en Lúcuma Labs.
Docente en ISIL y Area51

3. Diseño
Primero lo primero

4. Por donde comenzar
● Concepto y color
● Si usas capas, por amor del FSM,
¡ordénalas!
● Reconoce las plantillas que tu desarrollador
necesitará.

5. ¿Responsive?
● Piensa en tus breakpoints.
● Diseña tus breakpoints.
● Mobile first? Desktop first? Non-Retina?
Retina?

6. Maquetado
Bonitos y gorditos, muchachos.
Bonitos y gorditos.

7. Orden en tus files
● Organiza tus carpetas
● Usa sprites para tus imágenes, SVG, Icon
fonts.
● Minify

8. Orden en tu código
● Todo buen tema, comienza con buen HTML
● Usa comentarios. ¡ÚSALOS!
● Standards. Son tus amigos. En todos los
lenguajes. http://make.wordpress.
org/core/handbook/coding-standards/

9. Orden en tu código
● box-sizing: border-box (salvavidas,
salvaneuronas)
● Browser support. O porque IE sigue siendo
mi peor enemigo.

10. Theming
It’s all in the Codex.

11. Jerarquía
● Recuerda la jerarquía de las plantillas
● ¿Ayuda memoria? http://codex.wordpress.
org/Template_Hierarchy

12. DRY
● ¿Te repites? Haz una miniplantilla (Template
part)

13. Plugins
● ¿Los necesitas?
● ¡LOS NECESITAS!

14. ¿Preguntas?
Go! Go! Go!
mariella@miranda.pe / @maku_m / http://about.me/mariellamiranda