Una de las ventajas de utilizar un gestor de contenidos como WordPress para publicar en internet, es que el contenido está separado del diseño y de las funcionalidades. De esta manera, podemos cambiar de tema y que el aspecto de nuestro sitio web cambie; podemos cambiar de plugins y que las funcionalidades cambien; y, a pesar de cambiar el diseño o las funcionalidades, los contenidos siempre permanecerán. Esta característica tan ventajosa se puede ir al traste si aplicamos malas prácticas en el desarrollo de la web. Si, por ejemplo, el tema que instalas lleva incorporada alguna funcionalidad, siempre deberás tener instalado ese tema para que la web siga funcionando. Esta dependencia es lo que se conoce como lock-in. Pero, ojo, cuidado, bloguero, existen malas prácticas en la gestión de contenidos que tú haces, que también pueden generar dependencias. ¡Y son más habituales de lo que crees! Veremos lo que no hay que hacer jamás y qué debemos hacer siempre para conservar intacto lo más valioso de tu web: los contenidos.

1. @acirujano | #WCValencia
Bloguero, cuidado
con el lock-inAna Cirujano | WorCamp Valencia | 15-sept-2018

2. Ana Cirujano
Diseñadora visual y de interacción
especializada en WordPress
@acirujano
anacirujano.com
easyworkation.com
#WCValencia

4. ¿Qué es el lock-in?

5. @acirujano | #WCValencia

6. @acirujano | #WCValencia

7. @acirujano | #WCValencia

8. Contenido Base de datos

9. Contenido Base de datos
Diseño Tema

10. Contenido Base de datos
Diseño Tema
Funcionalidad

13. @acirujano | #WCValencia

14. Lock-in en los textos

15. @acirujano | #WCValencia
ESCRIBIR EN
MAYÚSCULAS
Escribir en mayúsculas bloquea las propiedades
CSS para transformar los textos

16. @acirujano | #WCValencia

17. @acirujano | #WCValencia
.normal {
text-transform: none;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu
ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.
Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum
augue ut magna.
.minusculas {
text-transform: lowercase;
}
lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce ut leo eu ip-
sum faucibus pretium. donec iaculis lorem eleifend mi tempor porttitor. in-
teger porttitor dui vel dui. donec ornare adipiscing pede. proin elementum
augue ut magna.
.mayusculas {
text-transform: uppercase;
}
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. FUSCE
UT LEO EU IPSUM FAUCIBUS PRETIUM. DONEC IACULIS LOREM ELEIFEND
MI TEMPOR PORTTITOR. INTEGER PORTTITOR DUI VEL DUI. DONEC ORNA-
RE ADIPISCING PEDE. PROIN ELEMENTUM AUGUE UT MAGNA.
.tipo-titulo {
text-transform: capitalize;
}
Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit. Fusce Ut Leo Eu
Ipsum Faucibus Pretium. Donec Iaculis Lorem Eleifend Mi Tempor Porttitor.
Integer Porttitor Dui Vel Dui. Donec Ornare Adipiscing Pede. Proin Elemen-
tum Augue Ut Magna.

18. @acirujano | #WCValencia

19. @acirujano | #WCValencia

20. @acirujano | #WCValencia
Se guarda en base
de datos y no depende
del tema

21. @acirujano | #WCValencia
ESTILOS
EN LÍNEA
Insertar CSS en línea bloquea
los estilos del párrafo.

22. @acirujano | #WCValencia
.versalitas {
font-variant: small-caps;
}
Trabajé en la nasa bajo el reinado de Carlos IX en el siglo xxiii.

23. @acirujano | #WCValencia

24. @acirujano | #WCValencia

25. @acirujano | #WCValencia

26. @acirujano | #WCValencia

27. Lock-in en
las imágenes

28. @acirujano | #WCValencia
LOS PROGRAMAS
DE EDICIÓN
Usar programas de retoque fotográfico para
manipular las imágenes bloquea los estilos.

29. @acirujano | #WCValencia

30. @acirujano | #WCValencia

31. @acirujano | #WCValencia
LOS FILTROS
Usar programas de retoque fotográfico para
añadir filtros bloquea los estilos.

32. @acirujano | #WCValencia

33. @acirujano | #WCValencia

34. @acirujano | #WCValencia

35. @acirujano | #WCValencia

36. @acirujano | #WCValencia
.imagen {
filter:grayscale(100%);
}

37. @acirujano | #WCValencia
blur

38. @acirujano | #WCValencia
blur brightness

39. @acirujano | #WCValencia
blur brightness contrast

40. @acirujano | #WCValencia
blur brightness contrast drop-shadow

41. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate

42. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate
invert

43. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate
invert opacity

44. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate
invert opacity saturate

45. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate
invert opacity saturate sepia

46. @acirujano | #WCValencia
blur brightness contrast drop-shadow hue-rotate
invert opacity saturate sepia contrast +
brightness
Fuente de la imagen

47. @acirujano | #WCValencia
Fuente de la imagen

48. @acirujano | #WCValencia
TEXTOS SOBRE
IMÁGENES
Usar programas de retoque fotográfico para
añadir texto sobre las imágenes bloquea el texto.

49. @acirujano | #WCValencia

50. @acirujano | #WCValencia
.texto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

51. @acirujano | #WCValencia
IMÁGENES
SOBRE IMÁGENES
Usar programas de retoque fotográfico para
añadir imágenes sobre las imágenes bloquea
las imágenes.

52. @acirujano | #WCValencia

53. @acirujano | #WCValencia
RECORTES
Usar programas de retoque fotográfico para
recortar imágenes bloquea el recorte.

54. @acirujano | #WCValencia

55. @acirujano | #WCValencia
img {
border-radius: 50%;
}

56. @acirujano | #WCValencia

57. @acirujano | #WCValencia

58. @acirujano | #WCValencia

59. @acirujano | #WCValencia
.valencia {
object-fit: contain;
}

60. @acirujano | #WCValencia
.valencia {
object-fit: cover;
}

61. @acirujano | #WCValencia
.valencia {
object-fit: cover;
object-position: 15% 0;
}

62. @acirujano | #WCValencia

63. ¡Gracias!