{"id":4465,"date":"2026-06-24T18:05:23","date_gmt":"2026-06-24T18:05:23","guid":{"rendered":"https:\/\/earlyasd.eu\/web\/?page_id=4465"},"modified":"2026-06-24T20:09:56","modified_gmt":"2026-06-24T20:09:56","slug":"herramientas-y-plataformas","status":"publish","type":"page","link":"https:\/\/earlyasd.eu\/web\/es\/herramientas-y-plataformas\/","title":{"rendered":"Herramientas y Plataformas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4465\" class=\"elementor elementor-4465\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62af0523 e-flex e-con-boxed e-con e-parent\" data-id=\"62af0523\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9ed7e4 e-con-full e-flex e-con e-parent\" data-id=\"e9ed7e4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-339547c elementor-widget elementor-widget-html\" data-id=\"339547c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Herramientas y plataformas para historias sociales digitales | EarlyASD<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@700;800&family=Nunito:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* ===== EARLYASD TOOLS & PLATFORMS PAGE =====\r\n   Scoped under .earlyasd-hub to avoid Elementor\/WP conflicts\r\n   ============================================= *\/\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.earlyasd-hub {\r\n  --pink:        #d20859;\r\n  --pink-hover:  #ed166d;\r\n  --pink-soft:   #fce8f0;\r\n  --bg:          #ffffff;\r\n  --bg-alt:      #f8f9fa;\r\n  --bg-card:     #ffffff;\r\n  --text:        #2a2a2a;\r\n  --text-muted:  #6b6b6b;\r\n  --text-light:  #a0a0a0;\r\n  --border:      #e4e4e4;\r\n  --radius:      16px;\r\n  --radius-sm:   10px;\r\n  --radius-pill: 100px;\r\n  font-family: 'Nunito', sans-serif;\r\n  color: var(--text);\r\n  background: var(--bg);\r\n  line-height: 1.65;\r\n  font-size: 16px;\r\n}\r\n\r\n.earlyasd-hub h2,\r\n.earlyasd-hub h3 { font-family: 'DM Serif Display', serif; line-height: 1.2; }\r\n\r\n.earlyasd-hub .hub-hero h1 {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 800;\r\n  font-size: clamp(28px, 5vw, 50px);\r\n  color: var(--text);\r\n  margin-bottom: 18px;\r\n  line-height: 1.15;\r\n}\r\n.earlyasd-hub .hub-hero h1 span { color: var(--pink); }\r\n\r\n.earlyasd-hub .hub-section-header h2,\r\n.earlyasd-hub .hub-choose h2,\r\n.earlyasd-hub .hub-principles h3 {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 800;\r\n  line-height: 1.2;\r\n}\r\n\r\n\/* ===== HERO ===== *\/\r\n.earlyasd-hub .hub-hero {\r\n  background: #ffffff;\r\n  border-bottom: 1px solid var(--border);\r\n  padding: 64px 24px 52px;\r\n}\r\n.earlyasd-hub .hub-hero-inner {\r\n  max-width: 860px; margin: 0 auto; text-align: center;\r\n}\r\n.earlyasd-hub .hub-hero-badge {\r\n  display: inline-flex; align-items: center; gap: 6px;\r\n  background: var(--pink-soft); color: var(--pink);\r\n  padding: 6px 16px; border-radius: var(--radius-pill);\r\n  font-size: 12.5px; font-weight: 800; letter-spacing: .6px;\r\n  text-transform: uppercase; margin-bottom: 20px;\r\n}\r\n.earlyasd-hub .hub-hero-desc {\r\n  font-size: 16.5px; color: var(--text-muted); max-width: 680px;\r\n  margin: 0 auto 32px; font-weight: 500;\r\n}\r\n.earlyasd-hub .hub-hero-stats {\r\n  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;\r\n}\r\n.earlyasd-hub .hub-stat {\r\n  text-align: center; padding: 14px 22px;\r\n  background: #fff; border: 1px solid var(--border);\r\n  border-radius: var(--radius);\r\n}\r\n.earlyasd-hub .hub-stat-num {\r\n  display: block; font-family: 'DM Serif Display', serif;\r\n  font-size: 30px; color: var(--pink); line-height: 1;\r\n}\r\n.earlyasd-hub .hub-stat-label {\r\n  font-size: 12px; color: var(--text-muted); font-weight: 700;\r\n  text-transform: uppercase; letter-spacing: .5px; margin-top: 4px;\r\n}\r\n\r\n\/* ===== SECTION WRAPPER ===== *\/\r\n.earlyasd-hub .hub-section {\r\n  max-width: 1200px; margin: 0 auto; padding: 60px 24px 48px;\r\n}\r\n.earlyasd-hub .hub-section-header { margin-bottom: 32px; }\r\n.earlyasd-hub .hub-section-label {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  font-size: 11.5px; font-weight: 800; letter-spacing: .8px;\r\n  text-transform: uppercase; color: var(--pink); margin-bottom: 8px;\r\n}\r\n.earlyasd-hub .hub-section-label span {\r\n  display: inline-block; width: 26px; height: 2px;\r\n  background: var(--pink); border-radius: 2px;\r\n}\r\n.earlyasd-hub .hub-section-header h2 {\r\n  font-size: clamp(22px, 3.5vw, 36px); color: var(--text); margin-bottom: 8px;\r\n}\r\n.earlyasd-hub .hub-section-header p {\r\n  font-size: 15.5px; color: var(--text-muted); max-width: 680px; font-weight: 500;\r\n}\r\n.earlyasd-hub .section-divider {\r\n  border: none; border-top: 1px solid var(--border); margin: 0;\r\n}\r\n\r\n\/* ===== HOW TO CHOOSE ===== *\/\r\n.earlyasd-hub .hub-choose {\r\n  background: #fff; border: 1px solid var(--border);\r\n  border-radius: var(--radius); padding: 36px 40px;\r\n  overflow: hidden; position: relative;\r\n}\r\n.earlyasd-hub .hub-choose::before {\r\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;\r\n  background: linear-gradient(90deg, var(--pink), #ff6b9d, #b366cc);\r\n}\r\n.earlyasd-hub .hub-choose h2 { font-size: 24px; margin-bottom: 6px; }\r\n.earlyasd-hub .hub-choose > p {\r\n  color: var(--text-muted); margin-bottom: 24px; font-size: 14.5px; font-weight: 500;\r\n}\r\n.earlyasd-hub .choose-grid {\r\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;\r\n}\r\n.earlyasd-hub .choose-item {\r\n  background: #fff; border: 1px solid var(--border);\r\n  border-radius: var(--radius-sm); padding: 18px 16px;\r\n}\r\n.earlyasd-hub .choose-icon { font-size: 26px; margin-bottom: 8px; display: block; }\r\n.earlyasd-hub .choose-item h4 {\r\n  font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 5px;\r\n}\r\n.earlyasd-hub .choose-item p {\r\n  font-size: 12.5px; color: var(--text-muted); line-height: 1.5; font-weight: 500;\r\n}\r\n\r\n\/* ===== CARDS GRID ===== *\/\r\n.earlyasd-hub .hub-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n  gap: 22px;\r\n}\r\n\r\n\/* ===== BASE CARD ===== *\/\r\n.earlyasd-hub .hub-card {\r\n  background: var(--bg-card);\r\n  border-radius: var(--radius);\r\n  overflow: hidden;\r\n  display: flex; flex-direction: column;\r\n  animation: cardIn .35s ease both;\r\n}\r\n@keyframes cardIn {\r\n  from { opacity: 0; transform: translateY(10px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n.earlyasd-hub .hub-card.hidden { display: none; }\r\n\r\n.earlyasd-hub .card-stripe { height: 5px; width: 100%; flex-shrink: 0; }\r\n\r\n.earlyasd-hub .card-header {\r\n  padding: 20px 20px 0;\r\n  display: flex; align-items: flex-start; gap: 13px;\r\n}\r\n.earlyasd-hub .card-icon {\r\n  width: 50px; height: 50px; border-radius: 11px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 22px; flex-shrink: 0;\r\n}\r\n.earlyasd-hub .card-title-area { flex: 1; }\r\n.earlyasd-hub .card-category {\r\n  display: inline-block; padding: 3px 10px;\r\n  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 800;\r\n  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 5px;\r\n}\r\n.earlyasd-hub .card-title {\r\n  font-size: 16.5px; font-weight: 800; color: var(--text); line-height: 1.25;\r\n}\r\n.earlyasd-hub .card-body { padding: 13px 20px 0; flex: 1; }\r\n.earlyasd-hub .card-desc {\r\n  font-size: 13.5px; color: var(--text-muted); line-height: 1.65;\r\n  font-weight: 500; margin-bottom: 12px;\r\n}\r\n\r\n\/* Expandable detail *\/\r\n.earlyasd-hub .card-expand-btn {\r\n  background: none; border: none; cursor: pointer;\r\n  color: var(--pink); font-size: 12.5px; font-weight: 700;\r\n  font-family: 'Nunito', sans-serif; padding: 0;\r\n  display: flex; align-items: center; gap: 4px; margin-bottom: 10px;\r\n  transition: color .2s;\r\n}\r\n.earlyasd-hub .card-expand-btn:hover { color: var(--pink-hover); }\r\n.earlyasd-hub .card-expand-btn:focus { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }\r\n.earlyasd-hub .card-expand-btn svg { transition: transform .22s; }\r\n.earlyasd-hub .card-expand-btn.open svg { transform: rotate(180deg); }\r\n.earlyasd-hub .card-detail {\r\n  display: none; font-size: 13px; color: var(--text-muted);\r\n  background: var(--bg-alt); border-radius: var(--radius-sm);\r\n  padding: 13px 15px; margin-bottom: 12px; line-height: 1.6;\r\n  font-weight: 500; border-left: 3px solid var(--pink);\r\n}\r\n.earlyasd-hub .card-detail.open { display: block; }\r\n\r\n\/* Badges *\/\r\n.earlyasd-hub .card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }\r\n.earlyasd-hub .badge {\r\n  display: inline-flex; align-items: center; gap: 4px;\r\n  padding: 3px 9px; border-radius: var(--radius-pill);\r\n  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;\r\n}\r\n.earlyasd-hub .badge-visual      { background: #e8f4ff; color: #1a6abf; }\r\n.earlyasd-hub .badge-ai          { background: #f0e8ff; color: #7c3aed; }\r\n.earlyasd-hub .badge-beginner    { background: #e8fff2; color: #0a7a3c; }\r\n.earlyasd-hub .badge-interactive { background: #fff3e8; color: #c45600; }\r\n.earlyasd-hub .badge-coding      { background: #e8fcff; color: #0a6978; }\r\n.earlyasd-hub .badge-animation   { background: #ffeef8; color: #b0197a; }\r\n.earlyasd-hub .badge-photo       { background: #fff8e8; color: #8a6400; }\r\n.earlyasd-hub .badge-creative    { background: #f3ffe8; color: #4a7a0a; }\r\n.earlyasd-hub .badge-freeplan    { background: #f0f8ff; color: #1a6abf; }\r\n\r\n\/* Card footer *\/\r\n.earlyasd-hub .card-links {\r\n  padding: 14px 20px 20px;\r\n  display: flex; flex-wrap: wrap; gap: 8px;\r\n  border-top: 1px solid var(--border);\r\n  margin-top: auto;\r\n}\r\n\r\n\/* ===== BUTTONS ===== *\/\r\n.earlyasd-hub .card-btn {\r\n  display: inline-flex; align-items: center; gap: 5px;\r\n  padding: 8px 17px; border-radius: var(--radius-pill);\r\n  font-size: 12.5px; font-weight: 800; text-decoration: none;\r\n  background: var(--pink); color: #fff;\r\n  transition: background .2s, transform .15s, box-shadow .2s;\r\n  font-family: 'Nunito', sans-serif; border: none; cursor: pointer;\r\n  letter-spacing: .2px;\r\n}\r\n.earlyasd-hub .card-btn:hover,\r\n.earlyasd-hub .card-btn:focus {\r\n  background: var(--pink-hover);\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 5px 18px rgba(210,8,89,.28);\r\n  outline: none;\r\n}\r\n.earlyasd-hub .card-btn:focus-visible {\r\n  outline: 3px solid var(--pink); outline-offset: 3px;\r\n}\r\n.earlyasd-hub .card-btn-outline {\r\n  background: transparent; color: var(--pink);\r\n  border: 1.5px solid var(--pink);\r\n}\r\n.earlyasd-hub .card-btn-outline:hover,\r\n.earlyasd-hub .card-btn-outline:focus {\r\n  background: var(--pink); color: #fff;\r\n}\r\n\r\n\/* ===== NO RESULTS ===== *\/\r\n.earlyasd-hub .no-results {\r\n  display: none; text-align: center; padding: 48px 24px; grid-column: 1 \/ -1;\r\n}\r\n.earlyasd-hub .no-results.show { display: block; }\r\n.earlyasd-hub .no-results p { font-size: 15px; color: var(--text-muted); font-weight: 600; }\r\n\r\n\/* ===== DESIGN PRINCIPLES ===== *\/\r\n.earlyasd-hub .hub-principles {\r\n  background: #fff; border: 1px solid var(--border);\r\n  border-radius: var(--radius); padding: 36px 40px;\r\n  position: relative; overflow: hidden;\r\n}\r\n.earlyasd-hub .hub-principles::before {\r\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;\r\n  background: linear-gradient(90deg, #9147d9, var(--pink), #f0820a);\r\n}\r\n.earlyasd-hub .hub-principles h3 { font-size: 20px; margin-bottom: 5px; }\r\n.earlyasd-hub .hub-principles > p {\r\n  font-size: 14px; color: var(--text-muted); margin-bottom: 20px;\r\n}\r\n.earlyasd-hub .principles-list {\r\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;\r\n}\r\n.earlyasd-hub .principle-item {\r\n  background: var(--bg-alt); border: 1px solid var(--border);\r\n  border-radius: var(--radius-sm); padding: 13px 15px;\r\n  display: flex; align-items: flex-start; gap: 9px;\r\n}\r\n.earlyasd-hub .principle-dot {\r\n  width: 7px; height: 7px; border-radius: 50%;\r\n  background: var(--pink); flex-shrink: 0; margin-top: 6px;\r\n}\r\n.earlyasd-hub .principle-item p {\r\n  font-size: 12.5px; color: var(--text-muted); font-weight: 600; line-height: 1.45;\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 768px) {\r\n  .earlyasd-hub .hub-hero    { padding: 44px 16px 36px; }\r\n  .earlyasd-hub .hub-section { padding: 36px 16px 28px; }\r\n  .earlyasd-hub .hub-choose  { padding: 24px 18px; }\r\n  .earlyasd-hub .hub-grid    { grid-template-columns: 1fr; }\r\n  .earlyasd-hub .hub-hero-stats { gap: 12px; }\r\n  .earlyasd-hub .hub-principles { padding: 22px 18px; }\r\n}\r\n\r\n\/* ===== CARD THEMES ===== *\/\r\n.earlyasd-hub .hub-card.theme-video { border: 1px solid rgba(230,57,80,.30); }\r\n.earlyasd-hub .hub-card.theme-video .card-stripe   { background: linear-gradient(90deg,#e63950,#ff7b6b); }\r\n.earlyasd-hub .hub-card.theme-video .card-icon     { background: #fff0f2; }\r\n.earlyasd-hub .hub-card.theme-video .card-category { background: #fff0f2; color: #c0323f; }\r\n\r\n.earlyasd-hub .hub-card.theme-photo { border: 1px solid rgba(240,130,10,.28); }\r\n.earlyasd-hub .hub-card.theme-photo .card-stripe   { background: linear-gradient(90deg,#f0820a,#ffc346); }\r\n.earlyasd-hub .hub-card.theme-photo .card-icon     { background: #fff7ee; }\r\n.earlyasd-hub .hub-card.theme-photo .card-category { background: #fff7ee; color: #a05800; }\r\n\r\n.earlyasd-hub .hub-card.theme-illus { border: 1px solid rgba(145,71,217,.25); }\r\n.earlyasd-hub .hub-card.theme-illus .card-stripe   { background: linear-gradient(90deg,#9147d9,#c97af9); }\r\n.earlyasd-hub .hub-card.theme-illus .card-icon     { background: #f7eeff; }\r\n.earlyasd-hub .hub-card.theme-illus .card-category { background: #f7eeff; color: #7030ba; }\r\n\r\n.earlyasd-hub .hub-card.theme-stop { border: 1px solid rgba(26,158,98,.25); }\r\n.earlyasd-hub .hub-card.theme-stop .card-stripe   { background: linear-gradient(90deg,#1a9e62,#5cd98a); }\r\n.earlyasd-hub .hub-card.theme-stop .card-icon     { background: #edfff5; }\r\n.earlyasd-hub .hub-card.theme-stop .card-category { background: #edfff5; color: #127a4a; }\r\n\r\n.earlyasd-hub .hub-card.theme-anim { border: 1px solid rgba(26,111,212,.25); }\r\n.earlyasd-hub .hub-card.theme-anim .card-stripe   { background: linear-gradient(90deg,#1a6fd4,#5ca8ff); }\r\n.earlyasd-hub .hub-card.theme-anim .card-icon     { background: #eef5ff; }\r\n.earlyasd-hub .hub-card.theme-anim .card-category { background: #eef5ff; color: #1550a0; }\r\n\r\n.earlyasd-hub .hub-card.theme-code { border: 1px solid rgba(10,138,158,.25); }\r\n.earlyasd-hub .hub-card.theme-code .card-stripe   { background: linear-gradient(90deg,#0a8a9e,#2ed8f0); }\r\n.earlyasd-hub .hub-card.theme-code .card-icon     { background: #e8fdff; }\r\n.earlyasd-hub .hub-card.theme-code .card-category { background: #e8fdff; color: #0a6978; }\r\n\r\n.earlyasd-hub .hub-card.theme-ai { border: 1px solid rgba(107,47,160,.22); }\r\n.earlyasd-hub .hub-card.theme-ai .card-stripe   { background: linear-gradient(90deg,#6b2fa0,#d450ff); }\r\n.earlyasd-hub .hub-card.theme-ai .card-icon     { background: #f5e8ff; }\r\n.earlyasd-hub .hub-card.theme-ai .card-category { background: #f5e8ff; color: #5c1a8a; }\r\n\r\n.earlyasd-hub .hub-card.theme-tool { border: 1px solid rgba(210,8,89,.22); }\r\n.earlyasd-hub .hub-card.theme-tool .card-stripe   { background: linear-gradient(90deg,#d20859,#ff7abf); }\r\n.earlyasd-hub .hub-card.theme-tool .card-icon     { background: #fce8f0; }\r\n.earlyasd-hub .hub-card.theme-tool .card-category { background: #fce8f0; color: #a00040; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"earlyasd-hub\" id=\"earlyasd-top\">\r\n\r\n  <!-- ===== HERO ===== -->\r\n  <header class=\"hub-hero\">\r\n    <div class=\"hub-hero-inner\">\r\n      <div class=\"hub-hero-badge\">\r\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n        EarlyASD \u00b7 Centro de recursos educativos\r\n      <\/div>\r\n      <h1>Herramientas y plataformas<br><span>para historias sociales digitales<\/span><\/h1>\r\n      <p class=\"hub-hero-desc\">\r\n        Las historias sociales digitales utilizan elementos multimedia, im\u00e1genes, audio, animaci\u00f3n e interactividad para ayudar a los ni\u00f1os con trastorno del espectro autista a comprender y desenvolverse en situaciones sociales. Este centro de recursos, cuidadosamente seleccionado, re\u00fane numerosos formatos, herramientas y tutoriales que necesitas para crear historias eficaces y atractivas para el aula.\r\n      <\/p>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- ===== HOW TO CHOOSE ===== -->\r\n  <section id=\"section-choose\" aria-labelledby=\"choose-heading\">\r\n    <div class=\"hub-section\" style=\"padding-bottom:0;\">\r\n      <div class=\"hub-choose\">\r\n        <h2 id=\"choose-heading\">C\u00f3mo elegir un formato de historia<\/h2>\r\n        <p>Cada alumno se beneficia de un enfoque diferente. Utiliza esta gu\u00eda r\u00e1pida para encontrar la opci\u00f3n que mejor se adapte a las necesidades de tu alumno o hijo, a tu nivel de comodidad con la tecnolog\u00eda y al contexto del aula.<\/p>\r\n        <div class=\"choose-grid\">\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfac<\/span><h4>Basadas en v\u00eddeo<\/h4><p>Apropiadas para alumnos con un estilo de aprendizaje concreto que se benefician de ver modelos a seguir de la vida real y personas conocidas que muestran determinados comportamientos.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcf7<\/span><h4>Basadas en fotograf\u00edas<\/h4><p>Ideales para principiantes y personas con un estilo de aprendizaje visual. Resulta muy \u00fatil cuando se utilizan fotos reales del aula para crear familiaridad y contexto.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfa8<\/span><h4>Basadas en ilustraciones<\/h4><p>Son la mejor opci\u00f3n cuando los elementos visuales simplificados ayudan a reducir las distracciones; ideal para ni\u00f1os a los que las fotos reales les resultan abrumadoras.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\uddf8<\/span><h4>Animaci\u00f3n fotograma a fotograma<\/h4><p>Muy atractivas para los educadores creativos. Utiliza objetos familiares para hacer que los pasos sociales abstractos resulten tangibles y divertidos, aunque es dif\u00edcil de preparar.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\u2728<\/span><h4>Animaci\u00f3n 2D\/3D<\/h4><p>Ideales para ni\u00f1os a los que les gustan los personajes estilizados y algo de movimiento. Es el formato m\u00e1s popular en Internet.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcbb<\/span><h4>Basadas en programaci\u00f3n<\/h4><p>Perfectas para educadores interesados en la tecnolog\u00eda que quieran crear materiales interactivos. Fomenta la participaci\u00f3n activa y el control.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\udd16<\/span><h4>Asistidas por IA<\/h4><p>Ideales cuando los educadores necesitan un punto de partida r\u00e1pido. Revisa y personaliza siempre los resultados de la IA para cada ni\u00f1o.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <main id=\"main-content\">\r\n\r\n  <!-- ===== SECTION 1 : FORMATS ===== -->\r\n  <section id=\"section-formats\" aria-labelledby=\"formats-heading\">\r\n    <div class=\"hub-section\">\r\n      <div class=\"hub-section-header\">\r\n        <div class=\"hub-section-label\"><span><\/span>Secci\u00f3n 1<\/div>\r\n        <h2 id=\"formats-heading\">Formatos de historias sociales digitales<\/h2>\r\n        <p>Siete formatos de narraci\u00f3n basados en la evidencia para apoyar el aprendizaje socioemocional \u2014 desde sencillas secuencias de fotos hasta narrativas interactivas generadas por IA.<\/p>\r\n      <\/div>\r\n      <div class=\"hub-grid\" id=\"formatsGrid\">\r\n\r\n        <!-- VIDEO -->\r\n        <article class=\"hub-card theme-video\" data-section=\"format\" data-tags=\"video visual beginner\" aria-label=\"Historias sociales basadas en v\u00eddeo\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83c\udfac<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">V\u00eddeo<\/span>\r\n              <h3 class=\"card-title\">Historias sociales basadas en v\u00eddeo<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">V\u00eddeos cortos grabados con tel\u00e9fonos, tabletas o c\u00e1maras, combinados con una edici\u00f3n b\u00e1sica para mostrar comportamientos sociales, rutinas y expectativas a trav\u00e9s de modelos a seguir de la vida real.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Ideales para alumnos que aprenden mejor de forma concreta y a los que les resulta \u00fatil ver a personas conocidas en entornos reales. El modelado en v\u00eddeo es muy eficaz para mostrar comportamientos sociales espec\u00edficos. Aseg\u00farate de que el ritmo sea lento y de que la narraci\u00f3n coincida claramente con la acci\u00f3n que se ve en pantalla.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=KiZSUcnyyzw\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver ejemplo<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@socialstories9001\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 M\u00e1s informaci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- PHOTO -->\r\n        <article class=\"hub-card theme-photo\" data-section=\"format\" data-tags=\"photo visual beginner\" aria-label=\"Historias sociales basadas en fotograf\u00edas\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83d\udcf7<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Foto<\/span>\r\n              <h3 class=\"card-title\">Historias sociales basadas en fotograf\u00edas<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Tambi\u00e9n conocidas como \u00abhistorias fotovocales\u00bb, consisten en fotografiar de forma secuencial el entorno del ni\u00f1o y combinarlas con una narraci\u00f3n de voz mediante un sencillo programa de presentaciones o de edici\u00f3n de v\u00eddeo.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Recomendadas para principiantes y alumnos con un estilo de aprendizaje muy concreto. El uso de fotos reales del aula aumenta la relevancia personal. Ord\u00e9nalas secuencialmente, graba la narraci\u00f3n para cada foto y, si lo deseas, a\u00f1ade una m\u00fasica de fondo suave a bajo volumen.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-photo\">\ud83d\uddbc Basadas en fotograf\u00edas<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/undivided.io\/resources\/undivideds-school-visual-stories-library-3224\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\ud83d\udcda Ver biblioteca de recursos<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- ILLUSTRATION -->\r\n        <article class=\"hub-card theme-illus\" data-section=\"format\" data-tags=\"illustration visual creative\" aria-label=\"Historias sociales basadas en ilustraciones\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83c\udfa8<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Ilustraci\u00f3n<\/span>\r\n              <h3 class=\"card-title\">Historias sociales basadas en ilustraciones<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Los dibujos o im\u00e1genes ilustradas, creados por los profesores, procedentes de bibliotecas de ilustraciones o realizados con herramientas de dibujo digital, sustituyen a las fotograf\u00edas reales para simplificar los entornos, resaltar las emociones clave y reducir las distracciones visuales.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Resultan especialmente \u00fatiles para ni\u00f1os a los que las fotograf\u00edas reales les distraen o que responden mejor a im\u00e1genes estilizadas y simb\u00f3licas. Ofrecen mayor flexibilidad, ya que permiten simplificar los fondos y enfatizar las acciones clave. Comb\u00ednalas con narraci\u00f3n de audio para obtener el m\u00e1ximo apoyo.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Creatividad<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/playlist?list=PLOUQCTegHBlxCsZcKlDe3TLwh3ZvQ1SXf\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver ejemplo<\/a>\r\n            <a href=\"https:\/\/autismlittlelearners.com\/autism-little-learners-social-stories\/\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 M\u00e1s informaci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- STOP-MOTION -->\r\n        <article class=\"hub-card theme-stop\" data-section=\"format\" data-tags=\"stop-motion animation creative tactile\" aria-label=\"Historias de animaci\u00f3n fotograma a fotograma\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83e\uddf8<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Fotograma a fotograma<\/span>\r\n              <h3 class=\"card-title\">Historias de animaci\u00f3n fotograma a fotograma<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Escenas construidas con objetos f\u00edsicos, juguetes, figuras de plastilina u objetos dom\u00e9sticos, fotografiadas fotograma a fotograma. Al combinarlas en un v\u00eddeo, los objetos parecen moverse, lo que hace que las rutinas abstractas resulten tangibles y atractivas.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Aunque es una actividad creativa que requiere mucho tiempo, las versiones simplificadas permiten demostrar de forma eficaz acciones y rutinas b\u00e1sicas. Resulta especialmente atractivo para los alumnos con un estilo de aprendizaje t\u00e1ctil. Planifica el guion con cuidado y toma varias fotos entre cada peque\u00f1o movimiento.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Creatividad<\/span>\r\n              <span class=\"badge badge-animation\">\u2728 Animaci\u00f3n<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=kyLCPeHI1Ic\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver ejemplo<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@launchpodlittlelearners6384\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 M\u00e1s informaci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 2D\/3D -->\r\n        <article class=\"hub-card theme-anim\" data-section=\"format\" data-tags=\"animation 2d 3d visual\" aria-label=\"Historias animadas en 2D y 3D\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\u2728<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Animaci\u00f3n<\/span>\r\n              <h3 class=\"card-title\">Historias animadas en 2D y 3D<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">El formato m\u00e1s popular en Internet: los personajes y las escenas animadas ayudan a los ni\u00f1os a interactuar con im\u00e1genes estilizadas y din\u00e1micas. Las herramientas de arrastrar y soltar, f\u00e1ciles de usar, hacen que la creaci\u00f3n de animaciones sea accesible incluso para educadores con poca experiencia t\u00e9cnica.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Es especialmente eficaz para ni\u00f1os peque\u00f1os, que se involucran m\u00e1s f\u00e1cilmente con im\u00e1genes estilizadas. Las animaciones deben ser lentas y con un prop\u00f3sito claro; evita los movimientos r\u00e1pidos que puedan provocar malestar sensorial. La narraci\u00f3n debe estar siempre sincronizada con las acciones animadas que aparecen en pantalla.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-animation\">\u2728 Animaci\u00f3n<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/playlist?list=PLCCP2Vzt_o61i-cUnOdsuB5jIetXKQLY9\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver ejemplo<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@autismlearningworlds\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 M\u00e1s informaci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- CODING -->\r\n        <article class=\"hub-card theme-code\" data-section=\"format\" data-tags=\"coding interactive scratch\" aria-label=\"Historias interactivas basadas en la programaci\u00f3n\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83d\udcbb<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Programaci\u00f3n<\/span>\r\n              <h3 class=\"card-title\">Historias interactivas basadas en la programaci\u00f3n<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Plataformas como Scratch, ScratchJr y Code.org permiten a los educadores dise\u00f1ar historias interactivas mediante programaci\u00f3n por bloques; los personajes se mueven, hablan y reaccionan a las acciones del usuario, creando experiencias de aprendizaje significativas basadas en la relaci\u00f3n causa-efecto.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Adecuado para educadores con curiosidad por la tecnolog\u00eda, a los que les guste la programaci\u00f3n y quieran ense\u00f1ar a los ni\u00f1os las relaciones de causa y efecto. Empieza con ScratchJr (de 5 a 7 a\u00f1os); utiliza Scratch si se te da mejor la programaci\u00f3n por bloques. Code.org ofrece cursos estructurados gratuitos para educadores de todos los niveles.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Interacci\u00f3n<\/span>\r\n              <span class=\"badge badge-coding\">\ud83d\udcbb Programaci\u00f3n<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/scratch.mit.edu\/search\/projects?q=social%20stories\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\ud83d\udd0d Ver ejemplos<\/a>\r\n            <a href=\"https:\/\/code.org\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 M\u00e1s informaci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- AI -->\r\n        <article class=\"hub-card theme-ai\" data-section=\"format\" data-tags=\"ai interactive beginner\" aria-label=\"Herramientas de narraci\u00f3n asistidas por IA\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83e\udd16<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Asistidas por IA<\/span>\r\n              <h3 class=\"card-title\">Herramientas de narraci\u00f3n asistidas por IA<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Las plataformas con apoyo de IA generan borradores de historias, argumentos y sugerencias visuales a partir de las indicaciones de los educadores, lo que ofrece un punto de partida r\u00e1pido que luego puede revisarse, editarse y personalizarse seg\u00fan las necesidades individuales y el nivel ling\u00fc\u00edstico de cada ni\u00f1o.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Cu\u00e1ndo utilizarlas:<\/strong> Resultan m\u00e1s \u00fatiles cuando los profesores necesitan un borrador inicial r\u00e1pidamente. Revisa siempre con cuidado el contenido generado por la IA, comprueba el lenguaje, la extensi\u00f3n y que el mensaje se ajuste al perfil de TEA del ni\u00f1o. Utiliza indicaciones precisas para obtener resultados m\u00e1s relevantes. El contenido generado por la IA nunca debe sustituir a la personalizaci\u00f3n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Potenciaci\u00f3n con IA<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/ozzystory.com\/\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\ud83c\udf10 Ver plataforma<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div><!-- \/#formatsGrid -->\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <hr class=\"section-divider\">\r\n\r\n  <!-- ===== SECTION 2 : TOOLS ===== -->\r\n  <section id=\"section-tools\" aria-labelledby=\"tools-heading\">\r\n    <div class=\"hub-section\">\r\n      <div class=\"hub-section-header\">\r\n        <div class=\"hub-section-label\"><span><\/span>Secci\u00f3n 2<\/div>\r\n        <h2 id=\"tools-heading\">Plataformas, herramientas y tutoriales<\/h2>\r\n        <p>Ocho herramientas con instrucciones paso a paso, v\u00eddeos tutoriales y consejos para principiantes \u2014 desde sencillos programas de presentaciones hasta generadores de historias basados en IA.<\/p>\r\n      <\/div>\r\n      <div class=\"hub-grid\" id=\"toolsGrid\">\r\n\r\n        <!-- GOOGLE SLIDES -->\r\n        <article class=\"hub-card theme-tool\" data-section=\"tool\" data-tags=\"slides presentation beginner basic\" aria-label=\"Google Slides\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83d\udcca<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Herramienta b\u00e1sica<\/span>\r\n              <h3 class=\"card-title\">Google Slides<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una herramienta gratuita de presentaciones basada en la nube que permite a los educadores combinar texto, im\u00e1genes y narraci\u00f3n de audio en un formato sencillo y accesible. No requiere instalaci\u00f3n, ideal para historias sociales estructuradas, diapositiva a diapositiva.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Crea una nueva presentaci\u00f3n en blanco \u2192 una diapositiva por paso de la historia \u2192 inserta im\u00e1genes claras \u2192 a\u00f1ade frases cortas \u2192 utiliza \u00abInsertar\u00bb \u2192 \u00abAudio\u00bb para la narraci\u00f3n \u2192 mant\u00e9n un dise\u00f1o coherente \u2192 exporta como PDF o v\u00eddeo para compartirlo f\u00e1cilmente con las familias.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 Gratuita<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=Y5q-ObSGQFY\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@SimonSezIT\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- BOOK CREATOR -->\r\n        <article class=\"hub-card theme-tool\" data-section=\"tool\" data-tags=\"book creator story beginner\" aria-label=\"Book Creator\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83d\udcd6<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Plataforma de historias<\/span>\r\n              <h3 class=\"card-title\">Book Creator<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una plataforma especializada en narraci\u00f3n digital con dise\u00f1os, personajes y plantillas visuales ya preparados. Los educadores con poca experiencia t\u00e9cnica pueden crear r\u00e1pidamente historias pulidas y estructuradas, con narraci\u00f3n de audio grabada en cada p\u00e1gina.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Crea una cuenta gratuita \u2192 selecciona un dise\u00f1o de libro apto para ni\u00f1os \u2192 una p\u00e1gina por paso de la historia \u2192 inserta im\u00e1genes e iconos \u2192 escribe frases cortas con lenguaje positivo \u2192 graba la narraci\u00f3n de audio directamente en cada p\u00e1gina \u2192 revisa que el contenido sea adecuado desde el punto de vista emocional \u2192 comp\u00e1rtelo digitalmente o exp\u00f3rtalo como v\u00eddeo o PDF.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 Plan gratuito<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=Mlap3afudKk\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- CANVA -->\r\n        <article class=\"hub-card theme-tool\" data-section=\"tool\" data-tags=\"canva video editing photo beginner\" aria-label=\"Editor de v\u00eddeo de Canva\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83c\udf9e\ufe0f<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Edici\u00f3n de v\u00eddeo<\/span>\r\n              <h3 class=\"card-title\">Editor de v\u00eddeo de Canva<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una plataforma vers\u00e1til de dise\u00f1o y v\u00eddeo que permite a los educadores combinar fotos, clips de v\u00eddeo, narraciones de voz y m\u00fasica para crear historias sociales muy bien acabadas, todo ello mediante una interfaz de arrastrar y soltar y una amplia biblioteca multimedia integrada.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Selecciona una plantilla de v\u00eddeo o presentaci\u00f3n \u2192 elige un dise\u00f1o limpio y minimalista \u2192 sube o utiliza im\u00e1genes o clips de la biblioteca \u2192 organiza los elementos visuales en una secuencia l\u00f3gica \u2192 a\u00f1ade leyendas de texto sencillas \u2192 sube o graba la narraci\u00f3n \u2192 a\u00f1ade m\u00fasica de fondo a bajo volumen \u2192 exporta como v\u00eddeo.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n              <span class=\"badge badge-photo\">\ud83d\uddbc Fotos y v\u00eddeos<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 Plan gratuito<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=AlrC-XaKwew\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@PrimalVideo\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- PIXTON -->\r\n        <article class=\"hub-card theme-tool\" data-section=\"tool\" data-tags=\"pixton comic illustration caricature\" aria-label=\"Pixton\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83c\udfad<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Plataforma de caricaturas<\/span>\r\n              <h3 class=\"card-title\">Pixton<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Un creador de tiras c\u00f3micas y narrativas visuales para dise\u00f1ar personajes ilustrados, bocadillos de di\u00e1logo y de pensamiento, y vi\u00f1etas secuenciales, que transmiten con claridad emociones, normas sociales y perspectivas en un formato adaptado a los ni\u00f1os.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Crea una cuenta en Pixton \u2192 dise\u00f1a personajes que se parezcan al ni\u00f1o o a personas conocidas \u2192 elige fondos sencillos que reflejen situaciones \u2192 crea una vi\u00f1eta por cada paso de la historia \u2192 utiliza bocadillos de di\u00e1logo o de pensamiento para explicar acciones y sentimientos \u2192 mant\u00e9n el texto breve y concreto \u2192 exporta como im\u00e1genes o PDF.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Creativo<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=T_dThbYBGeU\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@pixtonedu4231\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- POWTOON -->\r\n        <article class=\"hub-card theme-tool\" data-section=\"tool\" data-tags=\"powtoon animation video beginner\" aria-label=\"Powtoon\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83c\udfac<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Plataforma de animaci\u00f3n<\/span>\r\n              <h3 class=\"card-title\">Powtoon<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una plataforma de narraci\u00f3n y presentaci\u00f3n animadas con personajes, fondos y escenas predise\u00f1ados. Perfecta para crear narrativas visuales din\u00e1micas que muestren comportamientos sociales a trav\u00e9s de secuencias de animaci\u00f3n lentas y deliberadas.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Elige una plantilla animada sencilla \u2192 planifica primero la secuencia de la historia \u2192 a\u00f1ade personajes y escenas para la situaci\u00f3n social \u2192 anima las acciones lentamente para evitar la sobrecarga cognitiva \u2192 inserta subt\u00edtulos breves \u2192 graba o sube una narraci\u00f3n que acompa\u00f1e a cada escena \u2192 exporta como v\u00eddeo.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-animation\">\u2728 Animaci\u00f3n<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 Visual<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=lEQiZQi-aGY\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- STORYWIZARD -->\r\n        <article class=\"hub-card theme-ai\" data-section=\"tool\" data-tags=\"ai storywizard beginner interactive\" aria-label=\"Storywizard.ai\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83e\udd16<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Con soporte de IA<\/span>\r\n              <h3 class=\"card-title\">Storywizard.ai<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una plataforma educativa de narraci\u00f3n de historias asistida por IA que genera borradores de historias ilustradas a partir de las indicaciones de los profesores. Los educadores introducen una situaci\u00f3n social, reciben un borrador con elementos visuales y, a continuaci\u00f3n, editan el texto y las im\u00e1genes para adaptarlos al nivel de desarrollo de cada ni\u00f1o.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Accede a la plataforma \u2192 selecciona la generaci\u00f3n de historias \u2192 proporciona una indicaci\u00f3n clara y espec\u00edfica \u2192 revisa el borrador generado por la IA \u2192 edita el texto para que se ajuste a los principios de las historias sociales \u2192 adapta el vocabulario y la longitud de las frases al nivel del ni\u00f1o \u2192 modifica las ilustraciones generadas \u2192 exporta en formato digital. Personal\u00edzalo siempre antes de utilizarlo.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Impulsado por IA<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=cU4l8dtMM9w\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Ver tutorial<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@storywizardai\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Ver canal<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- SCRATCHJR -->\r\n        <article class=\"hub-card theme-code\" data-section=\"tool\" data-tags=\"scratchjr coding interactive beginner children\" aria-label=\"ScratchJr\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\ud83d\udc31<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Plataforma de programaci\u00f3n<\/span>\r\n              <h3 class=\"card-title\">ScratchJr<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una aplicaci\u00f3n gratuita para tabletas, apta para principiantes y dise\u00f1ada para ni\u00f1os de entre 5 y 7 a\u00f1os (tambi\u00e9n pueden utilizarla los educadores), que utiliza la programaci\u00f3n por bloques de arrastrar y soltar para animar personajes con movimiento, voz y sonido, creando historias sociales interactivas con secuencias claras de causa y efecto.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Gu\u00eda paso a paso\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Abre ScratchJr en una tableta \u2192 crea un nuevo proyecto \u2192 selecciona un fondo para el escenario social \u2192 a\u00f1ade personajes conocidos \u2192 programa acciones b\u00e1sicas (moverse, hablar, esperar) \u2192 a\u00f1ade mensajes de voz grabados o indicaciones de texto \u2192 ordena los bloques en la secuencia correcta \u2192 pru\u00e9balo con el ni\u00f1o y rev\u00edsalo seg\u00fan sea necesario.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Interacci\u00f3n<\/span>\r\n              <span class=\"badge badge-coding\">\ud83d\udcbb Programaci\u00f3n<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 Gratuita<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=D-nW4jvzRr8\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\u25b6 Tutorial general<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=WGhart5oFck\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\u25b6 Tutorial de historias sociales<\/a>\r\n          <\/div>\r\n          <div class=\"card-links\" style=\"border-top:none;padding-top:0;\">\r\n            <a href=\"https:\/\/www.youtube.com\/@ZonxScratch\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa ZonxScratch<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@learnwithhirday7835\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa LearnWithHirday<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- OZZYSTORY -->\r\n        <article class=\"hub-card theme-ai\" data-section=\"tool\" data-tags=\"ai ozzystory interactive beginner\" aria-label=\"OzzyStory\">\r\n          <div class=\"card-stripe\"><\/div>\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon\">\u2b50<\/div>\r\n            <div class=\"card-title-area\">\r\n              <span class=\"card-category\">Con apoyo de IA<\/span>\r\n              <h3 class=\"card-title\">OzzyStory<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Una plataforma de historias sociales impulsada por IA y dise\u00f1ada espec\u00edficamente para la educaci\u00f3n de personas con TEA, que ofrece versiones editables de historias y plantillas de guiones gr\u00e1ficos en blanco que los profesores pueden generar con la ayuda de la IA o crear desde cero y personalizar por completo.<\/p>\r\n            <button class=\"card-expand-btn\" aria-expanded=\"false\">\r\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n              Consejos pedag\u00f3gicos\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Proporcione una indicaci\u00f3n que describa la situaci\u00f3n social \u2192 la plataforma genera una historia con ilustraciones \u2192 revise el contenido para comprobar que sea adecuado para el nivel de desarrollo \u2192 edite el lenguaje, las im\u00e1genes y los detalles del escenario \u2192 utilice el creador de guiones gr\u00e1ficos para elaborar narrativas totalmente personalizadas cuando sea necesario. Revise siempre todo el contenido generado por la IA antes de compartirlo con un ni\u00f1o.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Potenciaci\u00f3n con IA<\/span>\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Interacci\u00f3n<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Accesibilidad para principiantes<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-links\">\r\n            <a href=\"https:\/\/ozzystory.com\/\" target=\"_blank\" rel=\"noopener\" class=\"card-btn\">\ud83c\udf10 Ver plataforma<\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div><!-- \/#toolsGrid -->\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <hr class=\"section-divider\">\r\n\r\n  <!-- ===== DESIGN PRINCIPLES ===== -->\r\n  <section id=\"section-principles\" aria-labelledby=\"principles-heading\">\r\n    <div class=\"hub-section\">\r\n      <div class=\"hub-principles\">\r\n        <h3 id=\"principles-heading\">\ud83c\udfa8 Principios de dise\u00f1o visual para historias sociales digitales<\/h3>\r\n        <p>Consideraciones clave de dise\u00f1o a la hora de crear historias digitales para ni\u00f1os con TEA (del cap\u00edtulo 3 de la Gu\u00eda pr\u00e1ctica de EarlyASD)<\/p>\r\n        <div class=\"principles-list\">\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Duraci\u00f3n de la historia:<\/strong> Normalmente basta con entre 5 y 10 diapositivas. C\u00e9ntrate en una situaci\u00f3n concreta por historia.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Simplicidad visual:<\/strong> Limita los elementos visuales por diapositiva. Utiliza im\u00e1genes claras que guarden relaci\u00f3n directa con el paso de la historia.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Dise\u00f1o coherente:<\/strong> Mant\u00e9n un dise\u00f1o, un estilo y una tipograf\u00eda uniformes en todo momento para favorecer la previsibilidad.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Narraci\u00f3n en voz en off:<\/strong> Utiliza un ritmo tranquilo y claro. Las voces familiares aumentan la comodidad y la implicaci\u00f3n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Animaciones con un prop\u00f3sito:<\/strong> Utiliza animaciones m\u00ednimas y lentas solo cuando realmente faciliten la comprensi\u00f3n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Lenguaje de apoyo:<\/strong> Utiliza frases como \u00abPuedo intentarlo\u00bb en lugar de \u00f3rdenes para reducir la resistencia.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Sincronizaci\u00f3n audiovisual:<\/strong> Sincroniza la narraci\u00f3n y los elementos visuales para que ambos transmitan el mismo paso al mismo tiempo.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Privacidad y consentimiento:<\/strong> Obt\u00e9n el consentimiento de los padres antes de utilizar fotos, v\u00eddeos o grabaciones de voz reales de ni\u00f1os.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <\/main>\r\n\r\n<\/div><!-- \/.earlyasd-hub -->\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/* ---- Expand \/ Collapse ---- *\/\r\n  document.querySelectorAll('.earlyasd-hub .card-expand-btn').forEach(function (btn) {\r\n    btn.addEventListener('click', function () {\r\n      var detail = btn.nextElementSibling;\r\n      var isOpen = detail.classList.contains('open');\r\n      detail.classList.toggle('open');\r\n      btn.classList.toggle('open');\r\n      btn.setAttribute('aria-expanded', String(!isOpen));\r\n    });\r\n  });\r\n\r\n  \/* ---- Stagger card entry animations ---- *\/\r\n  document.querySelectorAll('.earlyasd-hub .hub-card').forEach(function (card, i) {\r\n    card.style.animationDelay = (i * 45) + 'ms';\r\n  });\r\n\r\n}());\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Herramientas y plataformas para historias sociales digitales | EarlyASD EarlyASD \u00b7 Centro de recursos educativos Herramientas y plataformaspara historias sociales digitales Las historias sociales digitales utilizan elementos multimedia, im\u00e1genes, audio, animaci\u00f3n e interactividad para ayudar a los ni\u00f1os con trastorno del espectro autista a comprender y desenvolverse en situaciones sociales. Este centro de recursos, cuidadosamente [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4465","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/comments?post=4465"}],"version-history":[{"count":7,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4465\/revisions"}],"predecessor-version":[{"id":4521,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4465\/revisions\/4521"}],"wp:attachment":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/media?parent=4465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}