{"id":1820,"date":"2026-09-01T00:00:44","date_gmt":"2026-09-01T00:00:44","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1820"},"modified":"2026-09-02T01:02:32","modified_gmt":"2026-09-02T01:02:32","slug":"lecion-1-my-digital-key-1","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1820","title":{"rendered":"Leci\u00f3n 1. My Digital Key 1."},"content":{"rendered":"\n<style>\n\n\/* =========================================================\n   MY DIGITAL KEY 1\n   LECCI\u00d3N 1 \u00b7 MI MUNDO DIGITAL\n   VERSI\u00d3N WORDPRESS\n   NAVEGACI\u00d3N + RETROALIMENTACI\u00d3N SIN JAVASCRIPT\n========================================================= *\/\n\n#mdk1-feedback{\n  --purple:#42158f;\n  --purple2:#5c2aa3;\n  --purple-soft:#f7f2fc;\n  --purple-soft2:#fcfaff;\n  --purple-line:#d9cbed;\n  --yellow:#f5b700;\n  --yellow-soft:#fff8df;\n  --text:#29252d;\n  --gray:#716b76;\n\n  width:min(100%,1050px);\n  margin:0 auto;\n  background:#ffffff;\n  color:var(--text);\n  font-family:\"Trebuchet MS\",Arial,sans-serif;\n  box-sizing:border-box;\n}\n\n#mdk1-feedback *,\n#mdk1-feedback *::before,\n#mdk1-feedback *::after{\n  box-sizing:border-box;\n}\n\n\/* =========================================================\n   CONTROLES INTERNOS\n========================================================= *\/\n\n#mdk1-feedback > input.mdk-nav-control{\n  position:absolute;\n  left:-9999px;\n}\n\n#mdk1-feedback .mdk-shell{\n  width:100%;\n  background:#fff;\n  overflow:hidden;\n}\n\n\/* =========================================================\n   ENCABEZADO\n========================================================= *\/\n\n#mdk1-feedback .mdk-topbar{\n  display:flex;\n  justify-content:flex-end;\n  padding:20px 28px 3px;\n}\n\n#mdk1-feedback .mdk-brand{\n  background:var(--purple);\n  color:#fff;\n  padding:9px 17px;\n  border-radius:9px;\n  font-size:13px;\n  font-weight:900;\n  letter-spacing:.6px;\n}\n\n\/* =========================================================\n   PORTADA DE LA ACTIVIDAD\n========================================================= *\/\n\n#mdk1-feedback .mdk-hero{\n  padding:15px 34px 26px;\n}\n\n#mdk1-feedback .mdk-title{\n  margin:0;\n  color:var(--purple);\n  text-align:center;\n  font-size:clamp(36px,5vw,58px);\n  line-height:1.05;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-subtitle{\n  max-width:760px;\n  margin:11px auto 0;\n  text-align:center;\n  font-size:18px;\n  line-height:1.45;\n}\n\n\/* META + COMPRENDO *\/\n\n#mdk1-feedback .mdk-goals{\n  max-width:900px;\n  margin:27px auto 0;\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:17px;\n}\n\n#mdk1-feedback .mdk-goal{\n  border:2px solid var(--purple-line);\n  border-radius:18px;\n  background:#fff;\n  padding:16px 18px;\n\n  display:grid;\n  grid-template-columns:62px 1fr;\n  gap:14px;\n  align-items:center;\n}\n\n#mdk1-feedback .mdk-goal-icon{\n  width:58px;\n  height:58px;\n  border-radius:50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size:27px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-goal:first-child .mdk-goal-icon{\n  background:var(--yellow);\n  color:#fff;\n}\n\n#mdk1-feedback .mdk-goal:last-child .mdk-goal-icon{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mdk1-feedback .mdk-goal h3{\n  margin:0 0 4px;\n  color:var(--purple);\n  font-size:21px;\n}\n\n#mdk1-feedback .mdk-goal p{\n  margin:0;\n  font-size:14px;\n  line-height:1.4;\n}\n\n\/* =========================================================\n   PROGRESO\n========================================================= *\/\n\n#mdk1-feedback .mdk-progress-wrap{\n  padding:0 34px 22px;\n}\n\n#mdk1-feedback .mdk-progress-info{\n  display:flex;\n  justify-content:space-between;\n  margin-bottom:8px;\n  color:var(--purple);\n  font-size:13px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-step-text{\n  display:none;\n}\n\n#mdk-screen1:checked ~ .mdk-shell .step1,\n#mdk-screen2:checked ~ .mdk-shell .step2,\n#mdk-screen3:checked ~ .mdk-shell .step3,\n#mdk-screen4:checked ~ .mdk-shell .step4{\n  display:inline;\n}\n\n#mdk1-feedback .mdk-progress{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:5px;\n}\n\n#mdk1-feedback .mdk-progress span{\n  height:9px;\n  border-radius:999px;\n  background:#eee7f7;\n}\n\n#mdk-screen1:checked ~ .mdk-shell .p1{\n  background:var(--purple);\n}\n\n#mdk-screen2:checked ~ .mdk-shell .p1,\n#mdk-screen2:checked ~ .mdk-shell .p2{\n  background:var(--purple);\n}\n\n#mdk-screen3:checked ~ .mdk-shell .p1,\n#mdk-screen3:checked ~ .mdk-shell .p2,\n#mdk-screen3:checked ~ .mdk-shell .p3{\n  background:var(--purple);\n}\n\n#mdk-screen4:checked ~ .mdk-shell .mdk-progress span{\n  background:var(--purple);\n}\n\n\/* =========================================================\n   PANTALLAS\n========================================================= *\/\n\n#mdk1-feedback .mdk-stage{\n  padding:0 34px 34px;\n}\n\n#mdk1-feedback .mdk-screen{\n  display:none;\n}\n\n#mdk-screen1:checked ~ .mdk-shell .screen1,\n#mdk-screen2:checked ~ .mdk-shell .screen2,\n#mdk-screen3:checked ~ .mdk-shell .screen3,\n#mdk-screen4:checked ~ .mdk-shell .screen4{\n  display:block;\n}\n\n\/* =========================================================\n   T\u00cdTULO DE SECCIONES\n========================================================= *\/\n\n#mdk1-feedback .mdk-section-head{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-bottom:19px;\n}\n\n#mdk1-feedback .mdk-number{\n  width:43px;\n  height:43px;\n  min-width:43px;\n  border-radius:50%;\n\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  background:var(--purple);\n  color:#fff;\n  font-size:20px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-section-head h2{\n  margin:0;\n  color:var(--purple);\n  font-size:27px;\n  line-height:1.15;\n}\n\n#mdk1-feedback .mdk-instruction{\n  margin:0 0 20px;\n  font-size:17px;\n  line-height:1.5;\n}\n\n\/* =========================================================\n   PANTALLA 1 \u00b7 HISTORIA\n========================================================= *\/\n\n#mdk1-feedback .mdk-story{\n  display:grid;\n  grid-template-columns:1.05fr .95fr;\n  gap:22px;\n}\n\n#mdk1-feedback .mdk-story-text{\n  padding:22px;\n  border:2px solid var(--purple-line);\n  border-radius:20px;\n}\n\n#mdk1-feedback .mdk-story-text p{\n  margin:0 0 14px;\n  font-size:16px;\n  line-height:1.58;\n}\n\n#mdk1-feedback .mdk-story-text p:last-child{\n  margin-bottom:0;\n}\n\n#mdk1-feedback .mdk-story-text strong{\n  color:var(--purple);\n}\n\n\/* ESCENA *\/\n\n#mdk1-feedback .mdk-scene{\n  min-height:335px;\n  border:2px solid #eee5f8;\n  border-radius:20px;\n  background:var(--purple-soft);\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n\n  padding:22px;\n}\n\n#mdk1-feedback .mdk-scene h3{\n  color:var(--purple);\n  margin:0 0 17px;\n  text-align:center;\n  font-size:22px;\n}\n\n#mdk1-feedback .mdk-device{\n  width:245px;\n  background:#4e494f;\n  border-radius:9px;\n  padding:10px;\n  box-shadow:0 7px 0 #3d393e;\n}\n\n#mdk1-feedback .mdk-device-screen{\n  background:#fff;\n  min-height:140px;\n  padding:13px;\n  border-radius:4px;\n}\n\n#mdk1-feedback .mdk-device-screen b{\n  color:var(--purple);\n  text-align:center;\n  display:block;\n  margin-bottom:10px;\n}\n\n#mdk1-feedback .mini-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:8px 0;\n}\n\n#mdk1-feedback .mini-dot{\n  width:12px;\n  height:12px;\n  border-radius:50%;\n  background:var(--purple);\n}\n\n#mdk1-feedback .mini-line{\n  height:8px;\n  flex:1;\n  border-radius:10px;\n  background:#eee7f7;\n}\n\n#mdk1-feedback .mdk-question-callout{\n  width:100%;\n  margin-top:23px;\n  padding:13px 15px;\n  border:2px solid var(--purple);\n  border-radius:14px;\n  background:#fff;\n  color:var(--purple);\n  font-weight:900;\n  text-align:center;\n  line-height:1.4;\n}\n\n\/* =========================================================\n   PREGUNTA INICIAL\n========================================================= *\/\n\n#mdk1-feedback .mdk-first-question{\n  margin-top:23px;\n  padding:19px;\n  border:2px solid var(--purple-line);\n  border-radius:19px;\n}\n\n#mdk1-feedback .mdk-first-question h3{\n  margin:0 0 14px;\n  color:var(--purple);\n  font-size:18px;\n}\n\n#mdk1-feedback .mdk-radio-options{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:10px;\n}\n\n#mdk1-feedback .mdk-radio-options input{\n  position:absolute;\n  opacity:0;\n}\n\n#mdk1-feedback .mdk-choice{\n  min-height:65px;\n  padding:11px;\n  border:2px solid #ddd1ee;\n  border-radius:13px;\n  background:#fff;\n\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  text-align:center;\n  cursor:pointer;\n  font-size:14px;\n  line-height:1.35;\n}\n\n#mdk1-feedback .mdk-radio-options input:checked + .mdk-choice{\n  background:var(--purple);\n  border-color:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n\/* =========================================================\n   RETROALIMENTACI\u00d3N\n========================================================= *\/\n\n#mdk1-feedback .feedback{\n  display:none;\n  margin-top:10px;\n  padding:13px 15px;\n  border-radius:12px;\n  font-size:14px;\n  line-height:1.45;\n}\n\n#mdk1-feedback .feedback.good{\n  background:var(--purple-soft);\n  border:1px solid var(--purple-line);\n  color:var(--purple);\n}\n\n#mdk1-feedback .feedback.think{\n  background:var(--yellow-soft);\n  border:1px solid #ead272;\n  color:#554300;\n}\n\n\/* PREGUNTA INICIAL *\/\n\n#intro-a:checked ~ .intro-feedback-a,\n#intro-b:checked ~ .intro-feedback-b,\n#intro-c:checked ~ .intro-feedback-c{\n  display:block;\n}\n\n\/* =========================================================\n   PANTALLA 2 \u00b7 DATOS\n========================================================= *\/\n\n#mdk1-feedback .mdk-data-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:13px;\n}\n\n#mdk1-feedback .mdk-data-item{\n  position:relative;\n}\n\n#mdk1-feedback .mdk-data-item > input{\n  position:absolute;\n  opacity:0;\n}\n\n#mdk1-feedback .mdk-data-card{\n  width:100%;\n  min-height:135px;\n\n  border:2px solid var(--purple-line);\n  border-radius:17px;\n\n  background:#fff;\n\n  padding:15px 10px;\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n\n  text-align:center;\n  cursor:pointer;\n}\n\n#mdk1-feedback .mdk-data-icon{\n  width:49px;\n  height:49px;\n  border-radius:50%;\n  background:#f2ebfa;\n  color:var(--purple);\n\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  margin-bottom:9px;\n  font-size:23px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-data-card b{\n  font-size:14px;\n  line-height:1.35;\n}\n\n\/* SELECCI\u00d3N SEGURA *\/\n\n#mdk1-feedback .safe-data:checked + .mdk-data-card{\n  border-color:var(--purple);\n  background:var(--purple-soft);\n}\n\n\/* SELECCI\u00d3N PARA REPENSAR *\/\n\n#mdk1-feedback .private-data:checked + .mdk-data-card{\n  border-color:var(--yellow);\n  background:var(--yellow-soft);\n}\n\n\/* RETRO DE CADA TARJETA *\/\n\n#mdk1-feedback .mdk-data-feedback{\n  display:none;\n  margin-top:7px;\n  padding:8px 9px;\n  border-radius:10px;\n  font-size:11px;\n  line-height:1.35;\n  text-align:center;\n}\n\n#mdk1-feedback .safe-data:checked\n+ .mdk-data-card\n+ .mdk-data-feedback{\n  display:block;\n  background:var(--purple-soft);\n  color:var(--purple);\n}\n\n#mdk1-feedback .private-data:checked\n+ .mdk-data-card\n+ .mdk-data-feedback{\n  display:block;\n  background:var(--yellow-soft);\n  color:#5b4600;\n}\n\n\/* IDEA CENTRAL *\/\n\n#mdk1-feedback .mdk-thinking-tip{\n  margin-top:23px;\n  padding:17px 19px;\n  border-radius:17px;\n  background:#fff;\n  border:2px solid var(--purple-line);\n}\n\n#mdk1-feedback .mdk-thinking-tip h3{\n  color:var(--purple);\n  margin:0 0 7px;\n  font-size:18px;\n}\n\n#mdk1-feedback .mdk-thinking-tip p{\n  margin:0;\n  line-height:1.5;\n  font-size:15px;\n}\n\n\/* =========================================================\n   PANTALLA 3 \u00b7 CASOS\n========================================================= *\/\n\n#mdk1-feedback .mdk-case{\n  border:2px solid var(--purple-line);\n  border-radius:19px;\n  padding:18px;\n  margin-bottom:17px;\n}\n\n#mdk1-feedback .mdk-case h3{\n  margin:0 0 13px;\n  color:var(--purple);\n  font-size:18px;\n  line-height:1.4;\n}\n\n#mdk1-feedback .mdk-case-options{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:10px;\n}\n\n#mdk1-feedback .mdk-case-options input{\n  position:absolute;\n  opacity:0;\n}\n\n#mdk1-feedback .mdk-case-answer{\n  border:2px solid #ddd1ee;\n  border-radius:13px;\n  min-height:69px;\n  padding:11px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  background:#fff;\n  text-align:center;\n  cursor:pointer;\n  font-size:14px;\n  line-height:1.35;\n}\n\n#mdk1-feedback .mdk-case-options input:checked\n+ .mdk-case-answer{\n  background:var(--purple);\n  border-color:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n\/* feedback casos *\/\n\n#case1a:checked ~ .case1fa,\n#case1b:checked ~ .case1fb,\n#case1c:checked ~ .case1fc,\n\n#case2a:checked ~ .case2fa,\n#case2b:checked ~ .case2fb,\n#case2c:checked ~ .case2fc,\n\n#case3a:checked ~ .case3fa,\n#case3b:checked ~ .case3fb,\n#case3c:checked ~ .case3fc{\n  display:block;\n}\n\n\/* =========================================================\n   PANTALLA 4\n========================================================= *\/\n\n#mdk1-feedback .mdk-reflection{\n  border:2px solid var(--purple);\n  border-radius:20px;\n  padding:21px;\n}\n\n#mdk1-feedback .mdk-reflection label{\n  display:block;\n  margin-bottom:8px;\n  color:var(--purple);\n  font-size:17px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-reflection textarea{\n  width:100%;\n  min-height:87px;\n  margin-bottom:20px;\n\n  border:2px solid #ded2ed;\n  border-radius:13px;\n  padding:12px;\n\n  font:inherit;\n  font-size:15px;\n  resize:vertical;\n}\n\n#mdk1-feedback .mdk-reflection textarea:focus{\n  outline:none;\n  border-color:var(--purple);\n}\n\n#mdk1-feedback .mdk-final{\n  margin-top:21px;\n  padding:21px;\n  border-radius:20px;\n  background:var(--purple-soft);\n  text-align:center;\n}\n\n#mdk1-feedback .mdk-final-icon{\n  width:59px;\n  height:59px;\n  margin:0 auto 10px;\n  border-radius:50%;\n  background:var(--purple);\n  color:#fff;\n\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  font-size:27px;\n  font-weight:900;\n}\n\n#mdk1-feedback .mdk-final h3{\n  color:var(--purple);\n  margin:0 0 8px;\n  font-size:23px;\n}\n\n#mdk1-feedback .mdk-final p{\n  max-width:680px;\n  margin:0 auto;\n  font-size:15px;\n  line-height:1.55;\n}\n\n\/* =========================================================\n   NAVEGACI\u00d3N\n========================================================= *\/\n\n#mdk1-feedback .mdk-nav{\n  border-top:1px solid #eee7f6;\n  margin-top:25px;\n  padding-top:20px;\n\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n}\n\n#mdk1-feedback .mdk-nav-button{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n\n  min-width:145px;\n  padding:13px 21px;\n\n  border-radius:40px;\n  font-size:15px;\n  font-weight:900;\n\n  cursor:pointer;\n  user-select:none;\n}\n\n#mdk1-feedback .mdk-next{\n  background:var(--purple);\n  color:#fff;\n  border:2px solid var(--purple);\n}\n\n#mdk1-feedback .mdk-back{\n  background:#fff;\n  color:var(--purple);\n  border:2px solid var(--purple);\n}\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:800px){\n\n  #mdk1-feedback .mdk-goals{\n    grid-template-columns:1fr;\n  }\n\n  #mdk1-feedback .mdk-story{\n    grid-template-columns:1fr;\n  }\n\n  #mdk1-feedback .mdk-radio-options,\n  #mdk1-feedback .mdk-case-options{\n    grid-template-columns:1fr;\n  }\n\n  #mdk1-feedback .mdk-data-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n}\n\n@media(max-width:520px){\n\n  #mdk1-feedback .mdk-topbar{\n    padding:15px 17px 2px;\n  }\n\n  #mdk1-feedback .mdk-hero,\n  #mdk1-feedback .mdk-stage{\n    padding-left:17px;\n    padding-right:17px;\n  }\n\n  #mdk1-feedback .mdk-progress-wrap{\n    padding-left:17px;\n    padding-right:17px;\n  }\n\n  #mdk1-feedback .mdk-title{\n    font-size:36px;\n  }\n\n  #mdk1-feedback .mdk-subtitle{\n    font-size:16px;\n  }\n\n  #mdk1-feedback .mdk-nav-button{\n    flex:1;\n    min-width:0;\n  }\n\n}\n\n<\/style>\n\n\n<div id=\"mdk1-feedback\">\n\n\n<!-- =====================================================\n     NAVEGACI\u00d3N PRINCIPAL\n===================================================== -->\n\n<input\n  type=\"radio\"\n  class=\"mdk-nav-control\"\n  name=\"mdk-main-nav\"\n  id=\"mdk-screen1\"\n  checked>\n\n<input\n  type=\"radio\"\n  class=\"mdk-nav-control\"\n  name=\"mdk-main-nav\"\n  id=\"mdk-screen2\">\n\n<input\n  type=\"radio\"\n  class=\"mdk-nav-control\"\n  name=\"mdk-main-nav\"\n  id=\"mdk-screen3\">\n\n<input\n  type=\"radio\"\n  class=\"mdk-nav-control\"\n  name=\"mdk-main-nav\"\n  id=\"mdk-screen4\">\n\n\n<div class=\"mdk-shell\">\n\n\n<!-- =====================================================\n     HEADER\n===================================================== -->\n\n<div class=\"mdk-topbar\">\n\n  <span class=\"mdk-brand\">\n    MY DIGITAL KEY &#8211; 1\n  <\/span>\n\n<\/div>\n\n\n<header class=\"mdk-hero\">\n\n  <h1 class=\"mdk-title\">\n    MI MUNDO DIGITAL\n  <\/h1>\n\n  <p class=\"mdk-subtitle\">\n    Antes de compartir informaci\u00f3n en una app,\n    me detengo, pienso y decido.\n  <\/p>\n\n\n  <div class=\"mdk-goals\">\n\n    <div class=\"mdk-goal\">\n\n      <div class=\"mdk-goal-icon\">\n        \u25ce\n      <\/div>\n\n      <div>\n\n        <h3>Mi meta<\/h3>\n\n        <p>\n          Analizar una situaci\u00f3n digital y decidir\n          qu\u00e9 informaci\u00f3n necesito compartir.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mdk-goal\">\n\n      <div class=\"mdk-goal-icon\">\n        \u25a4\n      <\/div>\n\n      <div>\n\n        <h3>Comprendo<\/h3>\n\n        <p>\n          Puedo pensar cr\u00edticamente antes de\n          compartir informaci\u00f3n en l\u00ednea.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/header>\n\n\n<!-- =====================================================\n     PROGRESO\n===================================================== -->\n\n<div class=\"mdk-progress-wrap\">\n\n  <div class=\"mdk-progress-info\">\n\n    <span>\n\n      <span class=\"mdk-step-text step1\">\n        1 de 4\n      <\/span>\n\n      <span class=\"mdk-step-text step2\">\n        2 de 4\n      <\/span>\n\n      <span class=\"mdk-step-text step3\">\n        3 de 4\n      <\/span>\n\n      <span class=\"mdk-step-text step4\">\n        4 de 4\n      <\/span>\n\n    <\/span>\n\n    <span>My Digital Key<\/span>\n\n  <\/div>\n\n\n  <div class=\"mdk-progress\">\n\n    <span class=\"p1\"><\/span>\n    <span class=\"p2\"><\/span>\n    <span class=\"p3\"><\/span>\n    <span class=\"p4\"><\/span>\n\n  <\/div>\n\n<\/div>\n\n\n<main class=\"mdk-stage\">\n\n\n<!-- =====================================================\n     PANTALLA 1\n===================================================== -->\n\n<section class=\"mdk-screen screen1\">\n\n\n  <div class=\"mdk-section-head\">\n\n    <span class=\"mdk-number\">\n      1\n    <\/span>\n\n    <h2>\n      Analiza la situaci\u00f3n\n    <\/h2>\n\n  <\/div>\n\n\n  <div class=\"mdk-story\">\n\n\n    <div class=\"mdk-story-text\">\n\n      <p>\n        <strong>\n          Keyla quiere usar Canva\n        <\/strong>\n        para crear un p\u00f3ster sobre sus\n        actividades favoritas.\n      <\/p>\n\n      <p>\n        Cuando abre la aplicaci\u00f3n aparecen\n        varias preguntas:\n        nombre completo, edad, escuela,\n        ciudad, fotograf\u00eda, nombre de usuario,\n        correo electr\u00f3nico y contrase\u00f1a.\n      <\/p>\n\n      <p>\n        Leo piensa que algunos de esos datos\n        quiz\u00e1 no son necesarios para hacer\n        el p\u00f3ster.\n      <\/p>\n\n      <p>\n        Un compa\u00f1ero le dice:\n        <strong>\n          \u201cPon todo r\u00e1pido para empezar\u201d.\n        <\/strong>\n      <\/p>\n\n      <p>\n        Keyla se detiene.\n        Quiere pensar qu\u00e9 informaci\u00f3n necesita\n        realmente compartir.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"mdk-scene\">\n\n      <h3>\n        Keyla quiere crear su p\u00f3ster\n      <\/h3>\n\n\n      <div class=\"mdk-device\">\n\n        <div class=\"mdk-device-screen\">\n\n          <b>CREA TU CUENTA<\/b>\n\n          <div class=\"mini-row\">\n            <span class=\"mini-dot\"><\/span>\n            <span class=\"mini-line\"><\/span>\n          <\/div>\n\n          <div class=\"mini-row\">\n            <span class=\"mini-dot\"><\/span>\n            <span class=\"mini-line\"><\/span>\n          <\/div>\n\n          <div class=\"mini-row\">\n            <span class=\"mini-dot\"><\/span>\n            <span class=\"mini-line\"><\/span>\n          <\/div>\n\n          <div class=\"mini-row\">\n            <span class=\"mini-dot\"><\/span>\n            <span class=\"mini-line\"><\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mdk-question-callout\">\n\n        \u00bfTodo lo que una app pide\n        debo compartirlo?\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- PRIMERA DECISI\u00d3N -->\n\n  <div class=\"mdk-first-question\">\n\n    <h3>\n      \u00bfQu\u00e9 deber\u00eda hacer Keyla antes de continuar?\n    <\/h3>\n\n\n    <div class=\"mdk-radio-options\">\n\n\n      <input\n        type=\"radio\"\n        name=\"intro-question\"\n        id=\"intro-a\">\n\n      <label\n        for=\"intro-a\"\n        class=\"mdk-choice\">\n        Escribir todos los datos para avanzar.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"intro-question\"\n        id=\"intro-b\">\n\n      <label\n        for=\"intro-b\"\n        class=\"mdk-choice\">\n        Detenerse y pensar qu\u00e9 informaci\u00f3n\n        necesita realmente.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"intro-question\"\n        id=\"intro-c\">\n\n      <label\n        for=\"intro-c\"\n        class=\"mdk-choice\">\n        Inventar informaci\u00f3n para terminar r\u00e1pido.\n      <\/label>\n\n\n      <div class=\"feedback think intro-feedback-a\">\n\n        <strong>Piensa otra vez.<\/strong>\n        Que una aplicaci\u00f3n pida un dato no significa\n        que siempre debamos compartirlo.\n        Primero debemos preguntarnos para qu\u00e9 lo necesita.\n\n      <\/div>\n\n\n      <div class=\"feedback good intro-feedback-b\">\n\n        <strong>\u00a1Buena decisi\u00f3n!<\/strong>\n        Antes de compartir, Keyla puede detenerse\n        y revisar qu\u00e9 informaci\u00f3n necesita realmente\n        para hacer su p\u00f3ster.\n\n      <\/div>\n\n\n      <div class=\"feedback think intro-feedback-c\">\n\n        <strong>Hay una mejor opci\u00f3n.<\/strong>\n        Inventar informaci\u00f3n no resuelve el problema.\n        Lo mejor es detenerse, revisar y pedir ayuda\n        si algo no est\u00e1 claro.\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk-nav\">\n\n    <span><\/span>\n\n    <label\n      for=\"mdk-screen2\"\n      class=\"mdk-nav-button mdk-next\">\n      Continuar \u2192\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 2\n===================================================== -->\n\n<section class=\"mdk-screen screen2\">\n\n\n  <div class=\"mdk-section-head\">\n\n    <span class=\"mdk-number\">\n      2\n    <\/span>\n\n    <h2>\n      \u00bfQu\u00e9 necesita realmente el p\u00f3ster?\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk-instruction\">\n\n    Imagina que el p\u00f3ster habla de tus gustos.\n    Selecciona los datos que consideras adecuados.\n\n    <strong>\n      Observa qu\u00e9 sucede despu\u00e9s de elegir cada uno.\n    <\/strong>\n\n  <\/p>\n\n\n  <div class=\"mdk-data-grid\">\n\n\n    <!-- NOMBRE -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"private-data\"\n        type=\"checkbox\"\n        id=\"data-name\">\n\n      <label\n        for=\"data-name\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          N\n        <\/span>\n\n        <b>\n          Mi nombre completo\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        Este dato puede identificarte.\n        Para contar tus gustos no necesitas\n        escribir tu nombre completo.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ESCUELA -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"private-data\"\n        type=\"checkbox\"\n        id=\"data-school\">\n\n      <label\n        for=\"data-school\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          E\n        <\/span>\n\n        <b>\n          Mi escuela\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        Piensa otra vez.\n        El nombre de tu escuela puede indicar\n        d\u00f3nde encontrarte.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CORREO -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"private-data\"\n        type=\"checkbox\"\n        id=\"data-email\">\n\n      <label\n        for=\"data-email\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          @\n        <\/span>\n\n        <b>\n          Mi correo personal\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        Tu correo es informaci\u00f3n personal.\n        No necesitas compartirlo para mostrar\n        tus actividades favoritas.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CONTRASE\u00d1A -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"private-data\"\n        type=\"checkbox\"\n        id=\"data-password\">\n\n      <label\n        for=\"data-password\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          \u25cf\n        <\/span>\n\n        <b>\n          Mi contrase\u00f1a\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        La contrase\u00f1a es privada.\n        No se utiliza para contar cu\u00e1les son\n        tus gustos o pasatiempos.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- COLOR -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"safe-data\"\n        type=\"checkbox\"\n        id=\"data-color\">\n\n      <label\n        for=\"data-color\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          \u2605\n        <\/span>\n\n        <b>\n          Mi color favorito\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        \u00a1Buena elecci\u00f3n!\n        Hablar de un gusto no necesita revelar\n        qui\u00e9n eres ni d\u00f3nde est\u00e1s.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- DEPORTE -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"safe-data\"\n        type=\"checkbox\"\n        id=\"data-sport\">\n\n      <label\n        for=\"data-sport\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          &#x26bd;\n        <\/span>\n\n        <b>\n          Mi deporte favorito\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        \u00a1Muy bien!\n        Esta informaci\u00f3n puede servir para\n        hablar de tus gustos.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- M\u00daSICA -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"safe-data\"\n        type=\"checkbox\"\n        id=\"data-music\">\n\n      <label\n        for=\"data-music\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          \u266b\n        <\/span>\n\n        <b>\n          La m\u00fasica que me gusta\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        Buena decisi\u00f3n.\n        Puedes hablar de tus gustos sin\n        compartir informaci\u00f3n personal.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ANIMAL -->\n\n    <div class=\"mdk-data-item\">\n\n      <input\n        class=\"safe-data\"\n        type=\"checkbox\"\n        id=\"data-animal\">\n\n      <label\n        for=\"data-animal\"\n        class=\"mdk-data-card\">\n\n        <span class=\"mdk-data-icon\">\n          &#x2665;\n        <\/span>\n\n        <b>\n          Mi animal favorito\n        <\/b>\n\n      <\/label>\n\n      <div class=\"mdk-data-feedback\">\n\n        \u00a1Correcto!\n        Este dato habla de tus gustos\n        sin decir qui\u00e9n eres.\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <div class=\"mdk-thinking-tip\">\n\n    <h3>\n      Una pregunta que me puede ayudar\n    <\/h3>\n\n    <p>\n\n      Antes de compartir un dato puedo pensar:\n\n      <strong>\n        \u201c\u00bfLa actividad realmente necesita saber esto?\u201d\n      <\/strong>\n\n      Si no estoy seguro, puedo detenerme\n      y preguntar a un adulto.\n\n    <\/p>\n\n  <\/div>\n\n\n  <div class=\"mdk-nav\">\n\n    <label\n      for=\"mdk-screen1\"\n      class=\"mdk-nav-button mdk-back\">\n      \u2190 Anterior\n    <\/label>\n\n    <label\n      for=\"mdk-screen3\"\n      class=\"mdk-nav-button mdk-next\">\n      Continuar \u2192\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 3\n===================================================== -->\n\n<section class=\"mdk-screen screen3\">\n\n\n  <div class=\"mdk-section-head\">\n\n    <span class=\"mdk-number\">\n      3\n    <\/span>\n\n    <h2>\n      Pienso antes de continuar\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk-instruction\">\n\n    Ahora observa otras situaciones.\n    Elige una respuesta.\n\n    <strong>\n      La actividad te explicar\u00e1 qu\u00e9 conviene considerar.\n    <\/strong>\n\n  <\/p>\n\n\n  <!-- CASO 1 -->\n\n  <div class=\"mdk-case\">\n\n    <h3>\n      Una app te pide escribir el nombre\n      de tu escuela para comenzar.\n    <\/h3>\n\n\n    <div class=\"mdk-case-options\">\n\n\n      <input\n        type=\"radio\"\n        name=\"case1\"\n        id=\"case1a\">\n\n      <label\n        for=\"case1a\"\n        class=\"mdk-case-answer\">\n        Lo escribo para avanzar r\u00e1pido.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case1\"\n        id=\"case1b\">\n\n      <label\n        for=\"case1b\"\n        class=\"mdk-case-answer\">\n        Me detengo y pregunto a un adulto.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case1\"\n        id=\"case1c\">\n\n      <label\n        for=\"case1c\"\n        class=\"mdk-case-answer\">\n        Escribo cualquier escuela.\n      <\/label>\n\n\n      <div class=\"feedback think case1fa\">\n\n        <strong>Piensa antes de continuar.<\/strong>\n        Avanzar r\u00e1pido no es m\u00e1s importante que cuidar\n        tu informaci\u00f3n. Si no sabes para qu\u00e9 necesitan\n        tu escuela, es mejor preguntar.\n\n      <\/div>\n\n\n      <div class=\"feedback good case1fb\">\n\n        <strong>\u00a1Buena decisi\u00f3n!<\/strong>\n        Cuando no entiendes por qu\u00e9 una app necesita\n        un dato personal, puedes detenerte y pedir ayuda.\n\n      <\/div>\n\n\n      <div class=\"feedback think case1fc\">\n\n        <strong>Podemos hacerlo mejor.<\/strong>\n        No necesitamos inventar informaci\u00f3n.\n        Lo importante es averiguar por qu\u00e9 la app\n        pide ese dato antes de continuar.\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- CASO 2 -->\n\n  <div class=\"mdk-case\">\n\n    <h3>\n      Quieres hablar de tus gustos en un p\u00f3ster.\n      \u00bfQu\u00e9 dato es m\u00e1s adecuado?\n    <\/h3>\n\n\n    <div class=\"mdk-case-options\">\n\n\n      <input\n        type=\"radio\"\n        name=\"case2\"\n        id=\"case2a\">\n\n      <label\n        for=\"case2a\"\n        class=\"mdk-case-answer\">\n        Mi direcci\u00f3n.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case2\"\n        id=\"case2b\">\n\n      <label\n        for=\"case2b\"\n        class=\"mdk-case-answer\">\n        Mi comida favorita.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case2\"\n        id=\"case2c\">\n\n      <label\n        for=\"case2c\"\n        class=\"mdk-case-answer\">\n        Mi contrase\u00f1a.\n      <\/label>\n\n\n      <div class=\"feedback think case2fa\">\n\n        <strong>Ese dato no es necesario.<\/strong>\n        Tu direcci\u00f3n puede indicar d\u00f3nde vives.\n        Para hablar de tus gustos puedes elegir\n        informaci\u00f3n menos personal.\n\n      <\/div>\n\n\n      <div class=\"feedback good case2fb\">\n\n        <strong>\u00a1Muy bien!<\/strong>\n        Tu comida favorita habla de tus gustos\n        sin revelar d\u00f3nde vives o c\u00f3mo entrar\n        a una cuenta.\n\n      <\/div>\n\n\n      <div class=\"feedback think case2fc\">\n\n        <strong>Recuerda:<\/strong>\n        una contrase\u00f1a es privada.\n        No necesitamos compartirla para crear\n        un p\u00f3ster sobre nuestros gustos.\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- CASO 3 -->\n\n  <div class=\"mdk-case\">\n\n    <h3>\n      Una aplicaci\u00f3n pide una fotograf\u00eda tuya,\n      pero no entiendes para qu\u00e9 la necesita.\n    <\/h3>\n\n\n    <div class=\"mdk-case-options\">\n\n\n      <input\n        type=\"radio\"\n        name=\"case3\"\n        id=\"case3a\">\n\n      <label\n        for=\"case3a\"\n        class=\"mdk-case-answer\">\n        La comparto sin preguntar.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case3\"\n        id=\"case3b\">\n\n      <label\n        for=\"case3b\"\n        class=\"mdk-case-answer\">\n        Tomo otra foto r\u00e1pidamente.\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"case3\"\n        id=\"case3c\">\n\n      <label\n        for=\"case3c\"\n        class=\"mdk-case-answer\">\n        Pregunto antes de compartirla.\n      <\/label>\n\n\n      <div class=\"feedback think case3fa\">\n\n        <strong>Detente un momento.<\/strong>\n        Si no entiendes para qu\u00e9 se necesita\n        una fotograf\u00eda, no tienes que compartirla\n        inmediatamente.\n\n      <\/div>\n\n\n      <div class=\"feedback think case3fb\">\n\n        <strong>Cambiar de fotograf\u00eda no resuelve la duda.<\/strong>\n        Primero necesitamos saber por qu\u00e9\n        la aplicaci\u00f3n quiere una imagen.\n\n      <\/div>\n\n\n      <div class=\"feedback good case3fc\">\n\n        <strong>\u00a1Excelente decisi\u00f3n!<\/strong>\n        Cuando algo no est\u00e1 claro,\n        preguntar antes de compartir\n        ayuda a tomar una mejor decisi\u00f3n.\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk-nav\">\n\n    <label\n      for=\"mdk-screen2\"\n      class=\"mdk-nav-button mdk-back\">\n      \u2190 Anterior\n    <\/label>\n\n    <label\n      for=\"mdk-screen4\"\n      class=\"mdk-nav-button mdk-next\">\n      Continuar \u2192\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 4\n===================================================== -->\n\n<section class=\"mdk-screen screen4\">\n\n\n  <div class=\"mdk-section-head\">\n\n    <span class=\"mdk-number\">\n      4\n    <\/span>\n\n    <h2>\n      Mi reflexi\u00f3n\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk-instruction\">\n\n    Ya ayudaste a Keyla.\n    Ahora piensa c\u00f3mo aplicar\u00edas estas decisiones\n    cuando t\u00fa uses una aplicaci\u00f3n.\n\n  <\/p>\n\n\n  <div class=\"mdk-reflection\">\n\n\n    <label>\n      \u00bfQu\u00e9 puedes preguntarte antes de compartir\n      informaci\u00f3n en una app?\n    <\/label>\n\n    <textarea\n      placeholder=\"Escribe aqu\u00ed tu idea...\"><\/textarea>\n\n\n    <label>\n      \u00bfQu\u00e9 puedes hacer si una aplicaci\u00f3n te pide\n      un dato y no sabes para qu\u00e9 lo necesita?\n    <\/label>\n\n    <textarea\n      placeholder=\"Escribe aqu\u00ed tu decisi\u00f3n...\"><\/textarea>\n\n\n    <label>\n      Completa tu compromiso:\n      \u201cAntes de compartir informaci\u00f3n, yo voy a&#8230;\u201d\n    <\/label>\n\n    <textarea\n      placeholder=\"Completa tu compromiso...\"><\/textarea>\n\n\n  <\/div>\n\n\n  <div class=\"mdk-final\">\n\n    <div class=\"mdk-final-icon\">\n      \u2713\n    <\/div>\n\n    <h3>\n      Mi Digital Key de hoy\n    <\/h3>\n\n    <p>\n\n      No necesito compartir todo lo que una\n      aplicaci\u00f3n me pide.\n\n      Antes de continuar puedo\n\n      <strong>\n        detenerme, pensar si el dato es necesario\n        y pedir ayuda cuando tengo una duda.\n      <\/strong>\n\n    <\/p>\n\n  <\/div>\n\n\n  <div class=\"mdk-nav\">\n\n    <label\n      for=\"mdk-screen3\"\n      class=\"mdk-nav-button mdk-back\">\n      \u2190 Anterior\n    <\/label>\n\n    <label\n      for=\"mdk-screen1\"\n      class=\"mdk-nav-button mdk-next\">\n      Volver al inicio \u21bb\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<\/main>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MY DIGITAL KEY &#8211; 1 MI MUNDO DIGITAL Antes de compartir informaci\u00f3n en una app, me detengo, pienso y decido. \u25ce Mi meta Analizar una [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1820"}],"version-history":[{"count":7,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions"}],"predecessor-version":[{"id":1829,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions\/1829"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}