Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bloguero, cuidado con el lock-in

850 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Bloguero, cuidado con el lock-in

  1. 1. @acirujano | #WCValencia Bloguero, cuidado con el lock-inAna Cirujano | WorCamp Valencia | 15-sept-2018
  2. 2. Ana Cirujano Diseñadora visual y de interacción especializada en WordPress @acirujano anacirujano.com easyworkation.com #WCValencia
  3. 3. ¿Qué es el lock-in?
  4. 4. @acirujano | #WCValencia
  5. 5. @acirujano | #WCValencia
  6. 6. @acirujano | #WCValencia
  7. 7. Contenido Base de datos
  8. 8. Contenido Base de datos Diseño Tema
  9. 9. Contenido Base de datos Diseño Tema Funcionalidad
  10. 10. @acirujano | #WCValencia
  11. 11. Lock-in en los textos
  12. 12. @acirujano | #WCValencia ESCRIBIR EN MAYÚSCULAS Escribir en mayúsculas bloquea las propiedades CSS para transformar los textos
  13. 13. @acirujano | #WCValencia
  14. 14. @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.
  15. 15. @acirujano | #WCValencia
  16. 16. @acirujano | #WCValencia
  17. 17. @acirujano | #WCValencia Se guarda en base de datos y no depende del tema
  18. 18. @acirujano | #WCValencia ESTILOS EN LÍNEA Insertar CSS en línea bloquea los estilos del párrafo.
  19. 19. @acirujano | #WCValencia .versalitas { font-variant: small-caps; } Trabajé en la nasa bajo el reinado de Carlos IX en el siglo xxiii.
  20. 20. @acirujano | #WCValencia
  21. 21. @acirujano | #WCValencia
  22. 22. @acirujano | #WCValencia
  23. 23. @acirujano | #WCValencia
  24. 24. Lock-in en las imágenes
  25. 25. @acirujano | #WCValencia LOS PROGRAMAS DE EDICIÓN Usar programas de retoque fotográfico para manipular las imágenes bloquea los estilos.
  26. 26. @acirujano | #WCValencia
  27. 27. @acirujano | #WCValencia
  28. 28. @acirujano | #WCValencia LOS FILTROS Usar programas de retoque fotográfico para añadir filtros bloquea los estilos.
  29. 29. @acirujano | #WCValencia
  30. 30. @acirujano | #WCValencia
  31. 31. @acirujano | #WCValencia
  32. 32. @acirujano | #WCValencia
  33. 33. @acirujano | #WCValencia .imagen { filter:grayscale(100%); }
  34. 34. @acirujano | #WCValencia blur
  35. 35. @acirujano | #WCValencia blur brightness
  36. 36. @acirujano | #WCValencia blur brightness contrast
  37. 37. @acirujano | #WCValencia blur brightness contrast drop-shadow
  38. 38. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate
  39. 39. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate invert
  40. 40. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate invert opacity
  41. 41. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate invert opacity saturate
  42. 42. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate invert opacity saturate sepia
  43. 43. @acirujano | #WCValencia blur brightness contrast drop-shadow hue-rotate invert opacity saturate sepia contrast + brightness Fuente de la imagen
  44. 44. @acirujano | #WCValencia Fuente de la imagen
  45. 45. @acirujano | #WCValencia TEXTOS SOBRE IMÁGENES Usar programas de retoque fotográfico para añadir texto sobre las imágenes bloquea el texto.
  46. 46. @acirujano | #WCValencia
  47. 47. @acirujano | #WCValencia .texto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  48. 48. @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.
  49. 49. @acirujano | #WCValencia
  50. 50. @acirujano | #WCValencia RECORTES Usar programas de retoque fotográfico para recortar imágenes bloquea el recorte.
  51. 51. @acirujano | #WCValencia
  52. 52. @acirujano | #WCValencia img { border-radius: 50%; }
  53. 53. @acirujano | #WCValencia
  54. 54. @acirujano | #WCValencia
  55. 55. @acirujano | #WCValencia
  56. 56. @acirujano | #WCValencia .valencia { object-fit: contain; }
  57. 57. @acirujano | #WCValencia .valencia { object-fit: cover; }
  58. 58. @acirujano | #WCValencia .valencia { object-fit: cover; object-position: 15% 0; }
  59. 59. @acirujano | #WCValencia
  60. 60. ¡Gracias!

×