{"id":3913,"date":"2026-06-13T21:03:13","date_gmt":"2026-06-13T21:03:13","guid":{"rendered":"https:\/\/earlyasd.eu\/web\/?page_id=3913"},"modified":"2026-06-13T22:27:03","modified_gmt":"2026-06-13T22:27:03","slug":"narzedzia-i-platformy","status":"publish","type":"page","link":"https:\/\/earlyasd.eu\/web\/pl\/narzedzia-i-platformy\/","title":{"rendered":"Narz\u0119dzia i Platformy"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n\r\n\r\nNarz\u0119dzia i platformy do cyfrowych historyjek spo\u0142ecznych | 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\/* ---- Typography ---- *\/\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 Centrum zasob\u00f3w edukacyjnych\r\n <\/div>\r\n <h1>Narz\u0119dzia i platformy do<br><span>Cyfrowych Historyjek Spo\u0142ecznych<\/span><\/h1>\r\n <p class=\"hub-hero-desc\">\r\n Cyfrowe historyjki spo\u0142eczne wykorzystuj\u0105 elementy multimedialne \u2014 obrazy, d\u017awi\u0119k, animacje oraz interaktywno\u015b\u0107 \u2014 aby wspiera\u0107 dzieci ze spektrum autyzmu w rozumieniu i funkcjonowaniu w sytuacjach spo\u0142ecznych. Ten starannie dobrany zbi\u00f3r materia\u0142\u00f3w \u0142\u0105czy r\u00f3\u017cne formaty, narz\u0119dzia oraz poradniki, kt\u00f3re pomog\u0105 w tworzeniu skutecznych i anga\u017cuj\u0105cych historyjek spo\u0142ecznych w pracy edukacyjnej.\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\">Jak Wybra\u0107 Format Historyjki<\/h2>\r\n <p>Dzieci maj\u0105 r\u00f3\u017cne potrzeby i najlepiej funkcjonuj\u0105 przy r\u00f3\u017cnych podej\u015bciach. Skorzystaj z tego przewodnika, aby dobra\u0107 odpowiedni format do potrzeb dziecka, w\u0142asnych kompetencji oraz kontekstu \u015brodowiska edukacyjnego.<\/p>\r\n <div class=\"choose-grid\">\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfac<\/span><h4>Wideo<\/h4><p>Dobre dla dzieci, kt\u00f3re lepiej ucz\u0105 si\u0119 poprzez obserwacj\u0119 rzeczywistych modeli zachowa\u0144 oraz znanych os\u00f3b prezentuj\u0105cych dane sytuacje.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcf7<\/span><h4>Fotografie<\/h4><p>Idealne dla pocz\u0105tkuj\u0105cych oraz dzieci preferuj\u0105cych wzrokowy styl uczenia si\u0119. Szczeg\u00f3lnie przydatne, gdy wykorzystuje si\u0119 zdj\u0119cia z klasy, kt\u00f3re buduj\u0105 poczucie znajomo\u015bci i kontekst sytuacyjny.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfa8<\/span><h4>Ilustracje<\/h4><p>Uproszczone wizualizacje pomagaj\u0105 ograniczy\u0107 rozpraszanie uwagi \u2014 idealne dla dzieci, kt\u00f3re mog\u0105 by\u0107 przyt\u0142oczone rzeczywistymi zdj\u0119ciami.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\uddf8<\/span><h4>Stop motion - animacja poklatkowa<\/h4><p>Bardzo anga\u017cuj\u0105ce dla kreatywnych nauczycieli. Wykorzystuje znane przedmioty, aby uczyni\u0107 abstrakcyjne etapy spo\u0142eczne bardziej konkretnymi i atrakcyjnymi, jednak jego przygotowanie jest czasoch\u0142onne.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\u2728<\/span><h4>Animacja 2D\/3D<\/h4><p>Idealna dla dzieci, kt\u00f3re dobrze reaguj\u0105 na stylizowane postacie i elementy ruchu. Najpopularniejszy format w zasobach internetowych.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcbb<\/span><h4>Podej\u015bcie oparte na kodowaniu<\/h4><p>Doskona\u0142e dla nauczycieli zainteresowanych technologi\u0105, kt\u00f3rzy chc\u0105 tworzy\u0107 materia\u0142y interaktywne. Wspiera aktywne uczestnictwo i kontrol\u0119 nad tre\u015bci\u0105.<\/p><\/div>\r\n <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\udd16<\/span><h4>Wsparcie AI<\/h4><p>Szczeg\u00f3lnie przydatne jako szybka baza do rozpocz\u0119cia pracy i punkt wyj\u015bcia dla nauczyciela. Wymaga jednak weryfikacji oraz personalizacji tre\u015bci do potrzeb konkretnego dziecka.<\/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>Sekcja 1<\/div>\r\n <h2 id=\"formats-heading\">Formaty Cyfrowych Historyjek Spo\u0142ecznych<\/h2>\r\n <p>Siedem opartych na dowodach format\u00f3w narracyjnych wspieraj\u0105cych uczenie si\u0119 spo\u0142eczno-emocjonalne \u2014 od prostych sekwencji zdj\u0119\u0107 po interaktywne narracje generowane przez sztuczn\u0105 inteligencj\u0119.<\/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=\"Historyjki spo\u0142eczne oparte na wideo\">\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\">Wideo<\/span>\r\n <h3 class=\"card-title\">Historyjki spo\u0142eczne oparte na wideo<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Kr\u00f3tkie nagrania wideo rejestrowane telefonem, tabletem lub kamer\u0105, uzupe\u0142niane podstawowym monta\u017cem, kt\u00f3re pokazuj\u0105 zachowania spo\u0142eczne, rutyny i oczekiwania poprzez rzeczywiste modele zachowa\u0144 w codziennych sytuacjach.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Najlepsze dla uczni\u00f3w, kt\u00f3rzy lepiej ucz\u0105 si\u0119 poprzez obserwacj\u0119 znanych os\u00f3b w realnych \u015brodowiskach. Modelowanie wideo jest szczeg\u00f3lnie skuteczne w prezentowaniu konkretnych zachowa\u0144 spo\u0142ecznych. Nale\u017cy zadba\u0107 o spokojne tempo oraz przejrzyst\u0105 narracj\u0119 dopasowan\u0105 do tego, co dzieje si\u0119 na ekranie.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/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 Zobacz przyk\u0142ad<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@socialstories9001\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Dowiedz si\u0119 wi\u0119cej<\/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=\"Historyjki spo\u0142eczne oparte na zdj\u0119ciach\">\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\">Fotografie<\/span>\r\n <h3 class=\"card-title\">Historyjki spo\u0142eczne oparte na zdj\u0119ciach<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Znane r\u00f3wnie\u017c jako historyjki typu \u201ephoto-voice\". Rzeczywiste fotografie z otoczenia dziecka s\u0105 uk\u0142adane w sekwencj\u0119 i \u0142\u0105czone z narracj\u0105 g\u0142osow\u0105 przy u\u017cyciu prostych narz\u0119dzi do prezentacji lub monta\u017cu wideo.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Zalecane dla pocz\u0105tkuj\u0105cych oraz uczni\u00f3w ucz\u0105cych si\u0119 bardzo konkretnie. Wykorzystanie zdj\u0119\u0107 z klasy zwi\u0119ksza osobiste odniesienie i znaczenie sytuacji. Nale\u017cy uk\u0142ada\u0107 zdj\u0119cia w logicznej sekwencji, nagrywa\u0107 narracj\u0119 do ka\u017cdego obrazu oraz opcjonalnie doda\u0107 delikatn\u0105 muzyk\u0119 w tle o niskim nat\u0119\u017ceniu.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-photo\">\ud83d\uddbc Oparte na zdj\u0119ciach<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/span>\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/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 Przejd\u017a do biblioteki zasob\u00f3w<\/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=\"Historyjki Spo\u0142eczne Oparte na Ilustracjach\">\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\">Ilustracje<\/span>\r\n <h3 class=\"card-title\">Historyjki Spo\u0142eczne Oparte na Ilustracjach<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Rysunki lub ilustracje tworzone przez nauczycieli, pochodz\u0105ce z bibliotek grafik lub wykonane w cyfrowych narz\u0119dziach graficznych, zast\u0119puj\u0105 rzeczywiste zdj\u0119cia, upraszczaj\u0105c \u015brodowisko, podkre\u015blaj\u0105c kluczowe emocje i ograniczaj\u0105c rozpraszanie uwagi wizualnej.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Szczeg\u00f3lnie przydatne dla dzieci, kt\u00f3rym przeszkadzaj\u0105 rzeczywiste fotografie lub kt\u00f3re lepiej reaguj\u0105 na stylizowane, symboliczne obrazy. Zapewnia wi\u0119ksz\u0105 elastyczno\u015b\u0107 \u2014 mo\u017cna upro\u015bci\u0107 t\u0142o i podkre\u015bli\u0107 kluczowe dzia\u0142ania. Dla maksymalnego wsparcia warto po\u0142\u0105czy\u0107 z narracj\u0105 audio.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/span>\r\n <span class=\"badge badge-creative\">\ud83c\udfa8 Kreatywne<\/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 Zobacz przyk\u0142ad<\/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 Dowiedz si\u0119 wi\u0119cej<\/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=\"Historyjki spo\u0142eczne w technice animacji poklatkowej\">\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\">Animacja poklatkowa<\/span>\r\n <h3 class=\"card-title\">Historyjki spo\u0142eczne w technice animacji poklatkowej<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Sceny tworzone z przedmiot\u00f3w, zabawek, figurek z plasteliny lub przedmiot\u00f3w codziennego u\u017cytku, fotografowane klatka po klatce. Po zmontowaniu wideo obiekty sprawiaj\u0105 wra\u017cenie ruchu, dzi\u0119ki czemu abstrakcyjne rutyny staj\u0105 si\u0119 bardziej konkretne i anga\u017cuj\u0105ce.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Metoda kreatywna i czasoch\u0142onna, jednak uproszczone wersje skutecznie pokazuj\u0105 podstawowe dzia\u0142ania i rutyny. Szczeg\u00f3lnie anga\u017cuj\u0105ca dla uczni\u00f3w ucz\u0105cych si\u0119 poprzez dzia\u0142anie i dotyk. Nale\u017cy starannie zaplanowa\u0107 scenariusz i wykonywa\u0107 wiele zdj\u0119\u0107 mi\u0119dzy ma\u0142ymi zmianami pozycji obiekt\u00f3w.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-creative\">\ud83c\udfa8 Kreatywne<\/span>\r\n <span class=\"badge badge-animation\">\u2728 Animacja<\/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 Zobacz przyk\u0142ad<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@launchpodlittlelearners6384\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Dowiedz si\u0119 wi\u0119cej<\/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=\"Historie animowane 2D i 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\">Animacja<\/span>\r\n <h3 class=\"card-title\">Historie animowane 2D i 3D<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Najpopularniejszy format w internecie \u2014 animowane postacie i sceny pomagaj\u0105 dzieciom anga\u017cowa\u0107 si\u0119 w stylizowane, dynamiczne wizualizacje. Przyjazne dla u\u017cytkownika narz\u0119dzia typu \u201eprzeci\u0105gnij i upu\u015b\u0107\" sprawiaj\u0105, \u017ce tworzenie animacji jest dost\u0119pne nawet dla edukator\u00f3w z ograniczonym do\u015bwiadczeniem technicznym.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Szczeg\u00f3lnie skuteczne w przypadku m\u0142odszych dzieci, kt\u00f3re \u0142atwiej anga\u017cuj\u0105 si\u0119 w stylizowane obrazy. Utrzymuj animacje wolne i celowe, unikaj szybkich ruch\u00f3w, kt\u00f3re mog\u0105 powodowa\u0107 dyskomfort sensoryczny. Zawsze dopasowuj narracj\u0119 do dzia\u0142a\u0144 animowanych na ekranie.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-animation\">\u2728 Animacja<\/span>\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/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 Zobacz przyk\u0142ad<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@autismlearningworlds\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Dowiedz si\u0119 wi\u0119cej<\/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=\"Interaktywne historie oparte na programowaniu\">\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\">Programowanie<\/span>\r\n <h3 class=\"card-title\">Interaktywne historie oparte na programowaniu\/kodowaniu<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Platformy takie jak Scratch, ScratchJr i Code.org umo\u017cliwiaj\u0105 nauczycielom projektowanie interaktywnych historii z wykorzystaniem programowania blokowego \u2014 postacie poruszaj\u0105 si\u0119, m\u00f3wi\u0105 i reaguj\u0105 na dzia\u0142ania u\u017cytkownika, tworz\u0105c warto\u015bciowe do\u015bwiadczenia edukacyjne oparte na zale\u017cno\u015bci przyczynowo-skutkowej.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Odpowiednie dla nauczycieli zainteresowanych technologi\u0105, kt\u00f3rzy lubi\u0105 programowanie i chc\u0105 uczy\u0107 dzieci zale\u017cno\u015bci przyczynowo-skutkowych. Zacznij od ScratchJr (wiek 5\u20137 lat); u\u017cyj Scratch, je\u015bli lepiej radzisz sobie z programowaniem blokowym. Code.org oferuje bezp\u0142atne, uporz\u0105dkowane kursy dla nauczycieli na wszystkich poziomach zaawansowania.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-interactive\">\ud83d\uddb1 Interaktywne<\/span>\r\n <span class=\"badge badge-coding\">\ud83d\udcbb Programowanie<\/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 Zobacz przyk\u0142ady<\/a>\r\n <a href=\"https:\/\/code.org\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Dowiedz si\u0119 wi\u0119cej<\/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=\"Narz\u0119dzia do opowiadania historii wspierane przez 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\">Wspierane AI<\/span>\r\n <h3 class=\"card-title\">Narz\u0119dzia do opowiadania historii wspierane przez AI<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Platformy wspierane przez AI generuj\u0105 szkice historii, fabu\u0142y oraz sugestie wizualne na podstawie polece\u0144 nauczyciela, zapewniaj\u0105c szybki punkt wyj\u015bcia, kt\u00f3ry nast\u0119pnie mo\u017cna przejrze\u0107, edytowa\u0107 i dostosowa\u0107 do indywidualnych potrzeb oraz poziomu j\u0119zykowego ka\u017cdego dziecka.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n <strong>Kiedy stosowa\u0107:<\/strong> Najbardziej pomocne, gdy nauczyciele potrzebuj\u0105 szybko przygotowanego szkicu. Zawsze dok\u0142adnie sprawdzaj tre\u015bci wygenerowane przez AI, zwracaj\u0105c uwag\u0119 na j\u0119zyk, d\u0142ugo\u015b\u0107 oraz zgodno\u015b\u0107 przekazu z profilem dziecka w spektrum autyzmu (ASD). U\u017cywaj precyzyjnych prompt\u00f3w, aby uzyska\u0107 jak najbardziej trafne wyniki. Tre\u015bci generowane przez AI nigdy nie mog\u0105 zast\u0119powa\u0107 personalizacji.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-ai\">\ud83e\udd16 Oparte na AI<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/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 Zobacz platform\u0119<\/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>Sekcja 2<\/div>\r\n <h2 id=\"tools-heading\">Platformy, narz\u0119dzia i samouczki<\/h2>\r\n <p>Osiem narz\u0119dzi z instrukcjami krok po kroku, filmami instrukta\u017cowymi oraz wskaz\u00f3wkami dla pocz\u0105tkuj\u0105cych \u2014 od prostego oprogramowania do prezentacji po generatory historii oparte na AI.<\/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\">Narz\u0119dzia podstawowe<\/span>\r\n <h3 class=\"card-title\">Slajdy Google'a - Google Slides<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Darmowe, oparte na chmurze narz\u0119dzie do tworzenia prezentacji, kt\u00f3re pozwala nauczycielom \u0142\u0105czy\u0107 tekst, obrazy i narracj\u0119 audio w prostym, przyst\u0119pnym formacie. Nie wymaga instalacji, idealne do tworzenia uporz\u0105dkowanych historii spo\u0142ecznych w uk\u0142adzie slajd po slajdzie.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Utw\u00f3rz now\u0105, pust\u0105 prezentacj\u0119 \u2192 jeden slajd na ka\u017cdy krok historii \u2192 wstaw czytelne obrazy \u2192 dodaj kr\u00f3tkie zdania \u2192 u\u017cyj opcji <em>Wstaw \u2192 Audio<\/em>, aby doda\u0107 narracj\u0119 \u2192 zachowaj sp\u00f3jny uk\u0142ad \u2192 wyeksportuj jako PDF lub wideo, aby \u0142atwo udost\u0119pni\u0107 rodzinom.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/span>\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/span>\r\n <span class=\"badge badge-freeplan\">\ud83c\udd93 Darmowe<\/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 Zobacz samouczek<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@SimonSezIT\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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\">Platforma do tworzenia historyjek<\/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\">Specjalistyczna platforma do cyfrowego tworzenia historii z gotowymi uk\u0142adami, postaciami i szablonami wizualnymi. Nauczyciele z ograniczonym do\u015bwiadczeniem technicznym mog\u0105 szybko tworzy\u0107 dopracowane, uporz\u0105dkowane historie, z nagran\u0105 narracj\u0105 audio na ka\u017cdej stronie.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Utw\u00f3rz darmowe konto \u2192 wybierz przyjazny dzieciom uk\u0142ad ksi\u0105\u017cki \u2192 jedna strona na ka\u017cdy krok historii \u2192 wstaw obrazy i ikony \u2192 wpisz kr\u00f3tkie zdania w pozytywnym j\u0119zyku \u2192 nagraj narracj\u0119 audio bezpo\u015brednio na ka\u017cdej stronie \u2192 sprawd\u017a odpowiednio\u015b\u0107 emocjonaln\u0105 \u2192 udost\u0119pnij cyfrowo lub wyeksportuj jako wideo\/PDF.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/span>\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/span>\r\n <span class=\"badge badge-freeplan\">\ud83c\udd93 Darmowy plan<\/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 Zobacz samouczek<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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=\"Canva Video Editor\">\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\">Edycja wideo<\/span>\r\n <h3 class=\"card-title\">Canva Video Editor<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p class=\"card-desc\">Wszechstronna platforma do projektowania i edycji wideo, kt\u00f3ra umo\u017cliwia nauczycielom \u0142\u0105czenie zdj\u0119\u0107, klip\u00f3w wideo, narracji g\u0142osowej i muzyki w dopracowane historie spo\u0142eczne, wszystko w interfejsie typu \u201eprzeci\u0105gnij i upu\u015b\u0107\" oraz z rozbudowan\u0105 wbudowan\u0105 bibliotek\u0105 multimedi\u00f3w.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Wybierz szablon wideo lub prezentacji \u2192 wybierz czysty, minimalistyczny design \u2192 prze\u015blij w\u0142asne lub skorzystaj z biblioteki obraz\u00f3w\/klip\u00f3w \u2192 u\u0142\u00f3\u017c materia\u0142y w logicznej sekwencji \u2192 dodaj proste podpisy tekstowe \u2192 wgraj lub nagraj narracj\u0119 \u2192 dodaj muzyk\u0119 w tle o niskiej g\u0142o\u015bno\u015bci \u2192 wyeksportuj jako wideo.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/span>\r\n <span class=\"badge badge-photo\">\ud83d\uddbc Zdj\u0119cia i filmy<\/span>\r\n <span class=\"badge badge-freeplan\">\ud83c\udd93 Darmowy plan<\/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 Obejrzyj film instrukta\u017cowy<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@PrimalVideo\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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\">Platforma karykatur<\/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\">Narz\u0119dzie do tworzenia komiks\u00f3w i narracji wizualnych, umo\u017cliwiaj\u0105ce projektowanie ilustrowanych postaci, dymk\u00f3w dialogowych i my\u015bli oraz sekwencyjnych paneli, w celu jasnego przedstawiania emocji, zasad spo\u0142ecznych i r\u00f3\u017cnych perspektyw w przyjaznym dla dzieci formacie.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Utw\u00f3rz konto w Pixton \u2192 zaprojektuj postacie przypominaj\u0105ce dziecko lub znane osoby \u2192 wybierz proste t\u0142a sytuacyjne \u2192 stw\u00f3rz jeden panel na ka\u017cdy krok historii \u2192 u\u017cyj dymk\u00f3w dialogowych i my\u015bli, aby wyja\u015bni\u0107 dzia\u0142ania i emocje \u2192 utrzymuj tekst kr\u00f3tki i konkretny \u2192 wyeksportuj jako obrazy lub plik PDF.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/span>\r\n <span class=\"badge badge-creative\">\ud83c\udfa8 Kreatywne<\/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 Obejrzyj film instrukta\u017cowy<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@pixtonedu4231\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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\">Platforma do animacji<\/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\">Platforma do tworzenia animowanych historii i prezentacji z gotowymi postaciami, t\u0142ami i scenami. Idealna do tworzenia dynamicznych narracji wizualnych, kt\u00f3re pokazuj\u0105 zachowania spo\u0142eczne poprzez wolne, celowe sekwencje animacji.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Wybierz prosty szablon animacji \u2192 najpierw zaplanuj sekwencj\u0119 historii \u2192 dodaj postacie i sceny odpowiadaj\u0105ce sytuacji spo\u0142ecznej \u2192 animuj dzia\u0142ania powoli, aby unikn\u0105\u0107 przeci\u0105\u017cenia poznawczego \u2192 dodaj kr\u00f3tkie napisy \u2192 nagraj lub wgraj narracj\u0119 dopasowan\u0105 do ka\u017cdej sceny \u2192 wyeksportuj jako wideo.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-animation\">\u2728 Animacja<\/span>\r\n <span class=\"badge badge-visual\">\ud83d\udcf7 Wizualne<\/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 Obejrzyj film instrukta\u017cowy<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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\">Wspierane przez AI<\/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\">Platforma edukacyjna wspierana przez AI do tworzenia historii, kt\u00f3ra generuje ilustrowane szkice opowie\u015bci na podstawie polece\u0144 nauczyciela. Nauczyciele wprowadzaj\u0105 scenariusz spo\u0142eczny, otrzymuj\u0105 wersj\u0119 robocz\u0105 z ilustracjami, a nast\u0119pnie edytuj\u0105 j\u0119zyk i obrazy, aby dopasowa\u0107 je do poziomu rozwojowego ka\u017cdego dziecka.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Wejd\u017a na platform\u0119 \u2192 wybierz opcj\u0119 generowania historii \u2192 podaj jasny i konkretny prompt \u2192 przejrzyj szkic wygenerowany przez AI \u2192 edytuj j\u0119zyk tak, aby by\u0142 zgodny z zasadami historii spo\u0142ecznych \u2192 dostosuj s\u0142ownictwo i d\u0142ugo\u015b\u0107 zda\u0144 do poziomu dziecka \u2192 zmodyfikuj wygenerowane ilustracje \u2192 wyeksportuj w formacie cyfrowym. Zawsze personalizuj tre\u015b\u0107 przed u\u017cyciem.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-ai\">\ud83e\udd16 Oparte na AI<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/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 Obejrzyj film instrukta\u017cowy<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/@storywizardai\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Zobacz kana\u0142<\/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\">Platforma do programowania<\/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\">Darmowa, przyjazna dla pocz\u0105tkuj\u0105cych aplikacja na tablety, przeznaczona dla dzieci w wieku 5\u20137 lat (mo\u017cliwa tak\u017ce do wykorzystania przez nauczycieli), kt\u00f3ra wykorzystuje programowanie blokowe typu \u201eprzeci\u0105gnij i upu\u015b\u0107\" do animowania postaci poprzez ruch, mow\u0119 i d\u017awi\u0119k, tworz\u0105c interaktywne historie spo\u0142eczne o przejrzystych zale\u017cno\u015bciach przyczynowo-skutkowych.<\/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 Przewodnik krok po kroku\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Otw\u00f3rz ScratchJr na tablecie \u2192 utw\u00f3rz nowy projekt \u2192 wybierz t\u0142o odpowiadaj\u0105ce sytuacji spo\u0142ecznej \u2192 dodaj znane dziecku postacie \u2192 zaprogramuj podstawowe akcje (ruch, m\u00f3wienie, czekanie) \u2192 dodaj nagrane komunikaty g\u0142osowe lub podpowiedzi tekstowe \u2192 u\u0142\u00f3\u017c bloki w odpowiedniej kolejno\u015bci \u2192 przetestuj z dzieckiem i w razie potrzeby wprowad\u017a poprawki.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-interactive\">\ud83d\uddb1 Interaktywne<\/span>\r\n <span class=\"badge badge-coding\">\ud83d\udcbb Programowanie\/kodowanie<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/span>\r\n <span class=\"badge badge-freeplan\">\ud83c\udd93 Bezp\u0142atny<\/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 Og\u00f3lny Samouczek<\/a>\r\n <a href=\"https:\/\/www.youtube.com\/watch?v=WGhart5oFck\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\u25b6 Tutorial dotycz\u0105cy Historyjek Spo\u0142ecznych<\/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\">Wspierane przez AI<\/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\">Platforma oparta na AI do tworzenia historii spo\u0142ecznych, zaprojektowana specjalnie dla edukacji os\u00f3b z ASD (spektrum autyzmu), oferuj\u0105ca edytowalne wersje historii oraz puste szablony storyboard\u00f3w, kt\u00f3re nauczyciele mog\u0105 generowa\u0107 z pomoc\u0105 AI lub tworzy\u0107 ca\u0142kowicie od podstaw i w pe\u0142ni dostosowywa\u0107.<\/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 Wskaz\u00f3wki pedagogiczne\r\n <\/button>\r\n <div class=\"card-detail\">\r\n Podaj opis sytuacji spo\u0142ecznej \u2192 platforma generuje histori\u0119 z ilustracjami \u2192 sprawd\u017a tre\u015b\u0107 pod k\u0105tem odpowiednio\u015bci rozwojowej \u2192 edytuj j\u0119zyk, obrazy i szczeg\u00f3\u0142y scenariusza \u2192 w razie potrzeby u\u017cyj kreatora storyboard\u00f3w, aby tworzy\u0107 w pe\u0142ni spersonalizowane narracje. Zawsze sprawdzaj wszystkie tre\u015bci generowane przez AI przed udost\u0119pnieniem ich dziecku.\r\n <\/div>\r\n <div class=\"card-badges\">\r\n <span class=\"badge badge-ai\">\ud83e\udd16 Oparte na AI<\/span>\r\n <span class=\"badge badge-interactive\">\ud83d\uddb1 Interaktywne<\/span>\r\n <span class=\"badge badge-beginner\">\u2705 Dla pocz\u0105tkuj\u0105cych<\/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 Zobacz platform\u0119<\/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 Zasady projektowania wizualnego Cyfrowych Historyjek Spo\u0142ecznych<\/h3>\r\n <p>Kluczowe zasady projektowania cyfrowych historyjek spo\u0142ecznych dla dzieci z ASD (Na podstawie rozdzia\u0142u 3 Podr\u0119cznika EarlyASD)<\/p>\r\n <div class=\"principles-list\">\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>D\u0142ugo\u015b\u0107 historyjki:<\/strong> Zwykle wystarcza 5\u201310 slajd\u00f3w. Ka\u017cda historyjka powinna koncentrowa\u0107 si\u0119 na jednej, konkretnej sytuacji.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Minimalizm wizualny:<\/strong> Ogranicz liczb\u0119 element\u00f3w wizualnych na slajdzie. U\u017cywaj wyra\u017anych obraz\u00f3w bezpo\u015brednio odnosz\u0105cych si\u0119 do danego etapu historyjki.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Sp\u00f3jny uk\u0142ad:<\/strong> Zachowuj jednolity uk\u0142ad, styl i czcionk\u0119 w ca\u0142ej historyjce, aby wspiera\u0107 przewidywalno\u015b\u0107.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Narracja g\u0142osowa:<\/strong> Stosuj spokojne, wyra\u017ane tempo. Znajome g\u0142osy zwi\u0119kszaj\u0105 komfort i zaanga\u017cowanie.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Celowe animacje:<\/strong> U\u017cywaj minimalnych, powolnych animacji tylko wtedy, gdy rzeczywi\u015bcie wspieraj\u0105 zrozumienie.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>J\u0119zyk wspieraj\u0105cy:<\/strong> Stosuj zwroty typu \u201eMog\u0119 spr\u00f3bowa\u0107\" zamiast polece\u0144, aby zmniejszy\u0107 op\u00f3r.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Synchronizacja audio-wizualna:<\/strong> Dopasuj narracj\u0119 do obrazu tak, aby obie warstwy przekazywa\u0142y ten sam krok jednocze\u015bnie.<\/p><\/div>\r\n <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Prywatno\u015b\u0107 i zgoda:<\/strong> Uzyskaj zgod\u0119 rodzic\u00f3w przed u\u017cyciem rzeczywistych zdj\u0119\u0107, nagra\u0144 wideo lub nagra\u0144 g\u0142osu dzieci.<\/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>Narz\u0119dzia i platformy do cyfrowych historyjek spo\u0142ecznych | EarlyASD EarlyASD \u00b7 Centrum zasob\u00f3w edukacyjnych Narz\u0119dzia i platformy doCyfrowych Historyjek Spo\u0142ecznych Cyfrowe historyjki spo\u0142eczne wykorzystuj\u0105 elementy multimedialne \u2014 obrazy, d\u017awi\u0119k, animacje oraz interaktywno\u015b\u0107 \u2014 aby wspiera\u0107 dzieci ze spektrum autyzmu w rozumieniu i funkcjonowaniu w sytuacjach spo\u0142ecznych. Ten starannie dobrany zbi\u00f3r materia\u0142\u00f3w \u0142\u0105czy r\u00f3\u017cne formaty, narz\u0119dzia […]<\/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-3913","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3913","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=3913"}],"version-history":[{"count":10,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3913\/revisions"}],"predecessor-version":[{"id":3944,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/3913\/revisions\/3944"}],"wp:attachment":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/media?parent=3913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}