{"id":4104,"date":"2026-06-17T14:40:30","date_gmt":"2026-06-17T14:40:30","guid":{"rendered":"https:\/\/earlyasd.eu\/web\/?page_id=4104"},"modified":"2026-06-17T15:11:51","modified_gmt":"2026-06-17T15:11:51","slug":"araclar-ve-platformlar","status":"publish","type":"page","link":"https:\/\/earlyasd.eu\/web\/tr\/araclar-ve-platformlar\/","title":{"rendered":"Ara\u00e7lar ve Platformlar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4104\" class=\"elementor elementor-4104\">\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=\"tr\">\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>Dijital Sosyal Hik\u00e2ye Ara\u00e7lar\u0131 ve Platformlar\u0131 | 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\/* Hero h1 uses Montserrat *\/\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\/* Section headings use Montserrat *\/\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 \u2014 no hover effect ===== *\/\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\/* Top stripe *\/\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\/* =======================================================\r\n   CARD THEMES\r\n   ======================================================= *\/\r\n\r\n\/* ---- VIDEO (red) ---- *\/\r\n.earlyasd-hub .hub-card.theme-video {\r\n  border: 1px solid rgba(230,57,80,.30);\r\n}\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\/* ---- PHOTO (amber) ---- *\/\r\n.earlyasd-hub .hub-card.theme-photo {\r\n  border: 1px solid rgba(240,130,10,.28);\r\n}\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\/* ---- ILLUSTRATION (purple) ---- *\/\r\n.earlyasd-hub .hub-card.theme-illus {\r\n  border: 1px solid rgba(145,71,217,.25);\r\n}\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\/* ---- STOP-MOTION (green) ---- *\/\r\n.earlyasd-hub .hub-card.theme-stop {\r\n  border: 1px solid rgba(26,158,98,.25);\r\n}\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\/* ---- 2D\/3D ANIMATION (blue) ---- *\/\r\n.earlyasd-hub .hub-card.theme-anim {\r\n  border: 1px solid rgba(26,111,212,.25);\r\n}\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\/* ---- CODING (teal) ---- *\/\r\n.earlyasd-hub .hub-card.theme-code {\r\n  border: 1px solid rgba(10,138,158,.25);\r\n}\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\/* ---- AI (violet) ---- *\/\r\n.earlyasd-hub .hub-card.theme-ai {\r\n  border: 1px solid rgba(107,47,160,.22);\r\n}\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\/* ---- TOOL \/ GENERIC (pink) ---- *\/\r\n.earlyasd-hub .hub-card.theme-tool {\r\n  border: 1px solid rgba(210,8,89,.22);\r\n}\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 E\u011fitim Kaynaklar\u0131 Merkezi\r\n      <\/div>\r\n      <h1>Dijital Sosyal Hik\u00e2ye<br><span>Ara\u00e7lar\u0131 ve Platformlar\u0131<\/span><\/h1>\r\n      <p class=\"hub-hero-desc\">\r\n        Dijital Sosyal Hik\u00e2yeler; g\u00f6rseller, ses, animasyon ve etkile\u015fim gibi multimedya unsurlar\u0131n\u0131 kullanarak Otizm Spektrum Bozuklu\u011fu olan \u00e7ocuklar\u0131n sosyal durumlar\u0131 anlamas\u0131na ve bu durumlarda y\u00f6n bulmas\u0131na yard\u0131mc\u0131 olur. Bu derlenmi\u015f kaynak merkezi, s\u0131n\u0131f ortam\u0131nda etkili ve ilgi \u00e7ekici hik\u00e2yeler olu\u015fturman\u0131z i\u00e7in gereken bir\u00e7ok format, ara\u00e7 ve e\u011fitim videosunu bir araya getirir.\r\n      <\/p>\r\n \r\n      <\/div>\r\n \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\">Hik\u00e2ye Format\u0131 Nas\u0131l Se\u00e7ilir<\/h2>\r\n        <p>Her \u00f6\u011frenci farkl\u0131 yakla\u015f\u0131mlardan farkl\u0131 \u015fekillerde fayda g\u00f6r\u00fcr. \u00d6\u011frencinizin veya \u00e7ocu\u011funuzun gereksinimlerine, sizin teknik rahatl\u0131k seviyenize ve s\u0131n\u0131f ortam\u0131na en uygun se\u00e7ene\u011fi bulmak i\u00e7in bu h\u0131zl\u0131 k\u0131lavuzu kullan\u0131n.<\/p>\r\n        <div class=\"choose-grid\">\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfac<\/span><h4>Video Tabanl\u0131<\/h4><p>Ger\u00e7ek hayattan rol modelleri ve tan\u0131d\u0131k ki\u015filerin davran\u0131\u015flar\u0131 sergilemesini izlemekten fayda g\u00f6ren somut \u00f6\u011frenenler i\u00e7in iyi bir se\u00e7enektir.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcf7<\/span><h4>Foto\u011fraf Tabanl\u0131<\/h4><p>Ba\u015flang\u0131\u00e7 seviyesindekiler ve g\u00f6rsel \u00f6\u011frenenler i\u00e7in idealdir. A\u015final\u0131k ve ba\u011flam olu\u015fturmak amac\u0131yla ger\u00e7ek s\u0131n\u0131f foto\u011fraflar\u0131 kullan\u0131ld\u0131\u011f\u0131nda olduk\u00e7a etkilidir.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83c\udfa8<\/span><h4>\u0130ll\u00fcstrasyon Tabanl\u0131<\/h4><p>Sadele\u015ftirilmi\u015f g\u00f6rsellerin dikkat da\u011f\u0131n\u0131kl\u0131\u011f\u0131n\u0131 azaltmaya yard\u0131mc\u0131 oldu\u011fu durumlarda en iyi sonucu verir; ger\u00e7ek foto\u011fraflar\u0131 bunalt\u0131c\u0131 bulan \u00e7ocuklar i\u00e7in idealdir.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\uddf8<\/span><h4>Stop-Motion<\/h4><p>Yarat\u0131c\u0131 e\u011fitimciler i\u00e7in son derece ilgi \u00e7ekicidir. Tan\u0131d\u0131k nesneleri kullanarak soyut sosyal ad\u0131mlar\u0131 somut ve e\u011flenceli hale getirir, ancak haz\u0131rlanmas\u0131 zordur.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\u2728<\/span><h4>2D\/3D Animasyon<\/h4><p>Stilize karakterlere ve harekete iyi tepki veren \u00e7ocuklar i\u00e7in idealdir. \u0130nternette en pop\u00fcler formatt\u0131r.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83d\udcbb<\/span><h4>Kodlama Tabanl\u0131<\/h4><p>Etkile\u015fimli materyaller olu\u015fturmak isteyen, teknolojiye merakl\u0131 e\u011fitimciler i\u00e7in m\u00fckemmeldir. Aktif kat\u0131l\u0131m\u0131 ve kontrol\u00fc destekler.<\/p><\/div>\r\n          <div class=\"choose-item\"><span class=\"choose-icon\">\ud83e\udd16<\/span><h4>Yapay Zeka Destekli<\/h4><p>E\u011fitimcilerin h\u0131zl\u0131ca bir ba\u015flang\u0131\u00e7 noktas\u0131na ihtiya\u00e7 duydu\u011fu durumlarda en iyi sonucu verir. Yapay zeka \u00e7\u0131kt\u0131s\u0131 her \u00e7ocuk i\u00e7in her zaman g\u00f6zden ge\u00e7irilmeli ve ki\u015fiselle\u015ftirilmelidir.<\/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>B\u00f6l\u00fcm 1<\/div>\r\n        <h2 id=\"formats-heading\">Dijital Sosyal Hik\u00e2ye Formatlar\u0131<\/h2>\r\n        <p>Sosyal-duygusal \u00f6\u011frenmeyi desteklemek i\u00e7in kan\u0131ta dayal\u0131 yedi farkl\u0131 hik\u00e2ye anlat\u0131m format\u0131 \u2014 basit foto\u011fraf dizilerinden yapay zeka taraf\u0131ndan olu\u015fturulan etkile\u015fimli anlat\u0131lara kadar.<\/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=\"Video Tabanl\u0131 Sosyal Hik\u00e2yeler\">\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\">Video<\/span>\r\n              <h3 class=\"card-title\">Video Tabanl\u0131 Sosyal Hik\u00e2yeler<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Telefon, tablet veya kamerayla kaydedilen, basit video d\u00fczenlemeyle birle\u015ftirilen k\u0131sa videolar; sosyal davran\u0131\u015flar\u0131, rutinleri ve beklentileri ger\u00e7ek hayattan rol modeller arac\u0131l\u0131\u011f\u0131yla g\u00f6sterir.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Tan\u0131d\u0131k ki\u015fileri ger\u00e7ek ortamlarda g\u00f6rmekten fayda sa\u011flayan somut \u00f6\u011frenenler i\u00e7in en uygunudur. Video modelleme, belirli sosyal davran\u0131\u015flar\u0131 g\u00f6stermede son derece etkilidir. Tempo yava\u015f tutulmal\u0131 ve anlat\u0131m ekrandaki eylemle a\u00e7\u0131k\u00e7a \u00f6rt\u00fc\u015fmelidir.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/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 \u00d6rne\u011fi \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@socialstories9001\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Daha Fazla Bilgi<\/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=\"Foto\u011fraf Tabanl\u0131 Sosyal Hik\u00e2yeler\">\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\u011fraf<\/span>\r\n              <h3 class=\"card-title\">Foto\u011fraf Tabanl\u0131 Sosyal Hik\u00e2yeler<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">\"Photo-voice\" hik\u00e2yeleri olarak da bilinir; \u00e7ocu\u011fun \u00e7evresinden al\u0131nan ger\u00e7ek foto\u011fraflar s\u0131ral\u0131 olarak d\u00fczenlenir ve basit sunum veya video d\u00fczenleme yaz\u0131l\u0131mlar\u0131 kullan\u0131larak sesli anlat\u0131mla birle\u015ftirilir.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Ba\u015flang\u0131\u00e7 seviyesindekiler ve son derece somut \u00f6\u011frenenler i\u00e7in \u00f6nerilir. Ger\u00e7ek s\u0131n\u0131f foto\u011fraflar\u0131n\u0131n kullan\u0131lmas\u0131 ki\u015fisel anlam\u0131 art\u0131r\u0131r. Foto\u011fraflar\u0131 s\u0131ral\u0131 olarak d\u00fczenleyin, her foto\u011fraf i\u00e7in anlat\u0131m kaydedin ve iste\u011fe ba\u011fl\u0131 olarak d\u00fc\u015f\u00fck seviyede yumu\u015fak bir arka plan m\u00fczi\u011fi ekleyin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-photo\">\ud83d\uddbc Foto\u011fraf Tabanl\u0131<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/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 Kaynak K\u00fct\u00fcphanesine Bak<\/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=\"\u0130ll\u00fcstrasyon Tabanl\u0131 Sosyal Hik\u00e2yeler\">\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\">\u0130ll\u00fcstrasyon<\/span>\r\n              <h3 class=\"card-title\">\u0130ll\u00fcstrasyon Tabanl\u0131 Sosyal Hik\u00e2yeler<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">\u00d6\u011fretmenler taraf\u0131ndan olu\u015fturulan, ill\u00fcstrasyon k\u00fct\u00fcphanelerinden al\u0131nan veya dijital \u00e7izim ara\u00e7lar\u0131yla yap\u0131lan \u00e7izimler, ortamlar\u0131 sadele\u015ftirmek, temel duygular\u0131 vurgulamak ve g\u00f6rsel dikkat da\u011f\u0131n\u0131kl\u0131\u011f\u0131n\u0131 azaltmak i\u00e7in ger\u00e7ek foto\u011fraflar\u0131n yerini al\u0131r.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Ger\u00e7ek foto\u011fraflar\u0131 dikkat da\u011f\u0131t\u0131c\u0131 bulan veya stilize, sembolik g\u00f6rsellere daha iyi tepki veren \u00e7ocuklar i\u00e7in \u00f6zellikle yararl\u0131d\u0131r. Daha fazla esneklik sunar; arka planlar\u0131 sadele\u015ftirebilir ve temel eylemleri vurgulayabilirsiniz. Maksimum destek i\u00e7in sesli anlat\u0131mla birle\u015ftirin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/span>\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Yarat\u0131c\u0131<\/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 \u00d6rne\u011fi \u0130zle<\/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 Daha Fazla Bilgi<\/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=\"Stop-Motion Animasyon Sosyal Hik\u00e2yeleri\">\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\">Stop-Motion<\/span>\r\n              <h3 class=\"card-title\">Stop-Motion Animasyon Hik\u00e2yeleri<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Fiziksel nesneler, oyuncaklar, oyun hamuru fig\u00fcrleri veya ev e\u015fyalar\u0131yla kare kare foto\u011fraflanarak olu\u015fturulan sahneler. Video olarak birle\u015ftirildi\u011finde nesneler hareket ediyormu\u015f gibi g\u00f6r\u00fcn\u00fcr ve soyut rutinleri somut ve ilgi \u00e7ekici hale getirir.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Yarat\u0131c\u0131 ve zaman al\u0131c\u0131d\u0131r, ancak sadele\u015ftirilmi\u015f versiyonlar\u0131 temel eylem ve rutinleri etkili bi\u00e7imde g\u00f6sterir. Dokunsal \u00f6\u011frenenler i\u00e7in \u00f6zellikle ilgi \u00e7ekicidir. Senaryonuzu dikkatli planlay\u0131n ve her k\u00fc\u00e7\u00fck hareket aras\u0131nda birden fazla foto\u011fraf \u00e7ekin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Yarat\u0131c\u0131<\/span>\r\n              <span class=\"badge badge-animation\">\u2728 Animasyon<\/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 \u00d6rne\u011fi \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@launchpodlittlelearners6384\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Daha Fazla Bilgi<\/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=\"2D ve 3D Animasyonlu Sosyal Hik\u00e2yeler\">\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\">Animasyon<\/span>\r\n              <h3 class=\"card-title\">2D ve 3D Animasyonlu Hik\u00e2yeler<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">\u0130nternette en pop\u00fcler format olan animasyonlu karakterler ve sahneler, \u00e7ocuklar\u0131n stilize, dinamik g\u00f6rsellerle etkile\u015fime ge\u00e7mesine yard\u0131mc\u0131 olur. Kullan\u0131c\u0131 dostu s\u00fcr\u00fckle-b\u0131rak ara\u00e7lar\u0131, s\u0131n\u0131rl\u0131 teknik deneyime sahip e\u011fitimciler i\u00e7in bile animasyon olu\u015fturmay\u0131 eri\u015filebilir k\u0131lar.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Stilize g\u00f6rsellerle daha kolay etkile\u015fime giren k\u00fc\u00e7\u00fck \u00e7ocuklar i\u00e7in \u00f6zellikle etkilidir. Animasyonlar\u0131 yava\u015f ve ama\u00e7l\u0131 tutun, duyusal rahats\u0131zl\u0131\u011fa yol a\u00e7abilecek h\u0131zl\u0131 hareketlerden ka\u00e7\u0131n\u0131n. Anlat\u0131m\u0131 her zaman ekrandaki animasyonlu eylemlerle hizalay\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-animation\">\u2728 Animasyon<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/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 \u00d6rne\u011fi \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@autismlearningworlds\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Daha Fazla Bilgi<\/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=\"Kodlama Tabanl\u0131 Etkile\u015fimli Hik\u00e2yeler\">\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\">Kodlama<\/span>\r\n              <h3 class=\"card-title\">Kodlama Tabanl\u0131 Etkile\u015fimli Hik\u00e2yeler<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Scratch, ScratchJr ve Code.org gibi platformlar, e\u011fitimcilerin blok tabanl\u0131 kodlama kullanarak etkile\u015fimli hik\u00e2yeler tasarlamas\u0131na olanak tan\u0131r; karakterler hareket eder, konu\u015fur ve kullan\u0131c\u0131 girdisine tepki verir, b\u00f6ylece anlaml\u0131 neden-sonu\u00e7 \u00f6\u011frenme deneyimleri olu\u015fturulur.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> Teknolojiye merakl\u0131, kodlamay\u0131 seven ve \u00e7ocuklara neden-sonu\u00e7 ili\u015fkilerini \u00f6\u011fretmek isteyen e\u011fitimciler i\u00e7in uygundur. ScratchJr (5\u20137 ya\u015f) ile ba\u015flay\u0131n; blok tabanl\u0131 kodlamada daha iyiyseniz Scratch'i kullan\u0131n. Code.org, her seviyeden e\u011fitimci i\u00e7in \u00fccretsiz, yap\u0131land\u0131r\u0131lm\u0131\u015f kurslar sunar.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Etkile\u015fimli<\/span>\r\n              <span class=\"badge badge-coding\">\ud83d\udcbb Kodlama<\/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 \u00d6rnekleri G\u00f6r<\/a>\r\n            <a href=\"https:\/\/code.org\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83c\udf10 Daha Fazla Bilgi<\/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=\"Yapay Zeka Destekli Hik\u00e2ye Anlat\u0131m Ara\u00e7lar\u0131\">\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\">Yapay Zeka Destekli<\/span>\r\n              <h3 class=\"card-title\">Yapay Zeka Destekli Hik\u00e2ye Anlat\u0131m Ara\u00e7lar\u0131<\/h3>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            <p class=\"card-desc\">Yapay zeka destekli platformlar, e\u011fitimci y\u00f6nlendirmelerinden taslak hik\u00e2yeler, kurgular ve g\u00f6rsel \u00f6neriler olu\u015fturur; bu da h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sa\u011flar ve ard\u0131ndan g\u00f6zden ge\u00e7irilip d\u00fczenlenerek her \u00e7ocu\u011fun bireysel gereksinimlerine ve dil seviyesine g\u00f6re ki\u015fiselle\u015ftirilebilir.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              <strong>Ne zaman kullan\u0131l\u0131r:<\/strong> \u00d6\u011fretmenlerin h\u0131zl\u0131ca bir ba\u015flang\u0131\u00e7 tasla\u011f\u0131na ihtiya\u00e7 duydu\u011fu durumlarda en yararl\u0131d\u0131r. Yapay zeka taraf\u0131ndan \u00fcretilen i\u00e7eri\u011fi her zaman dikkatlice g\u00f6zden ge\u00e7irin; dili, uzunlu\u011fu ve mesaj\u0131n \u00e7ocu\u011fun ASD profiliyle uyumunu kontrol edin. En ilgili \u00e7\u0131kt\u0131lar i\u00e7in kesin y\u00f6nlendirmeler kullan\u0131n. Yapay zeka i\u00e7eri\u011fi asla ki\u015fiselle\u015ftirmenin yerini almamal\u0131d\u0131r.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Yapay Zeka Destekli<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/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 Platforma Bak<\/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>B\u00f6l\u00fcm 2<\/div>\r\n        <h2 id=\"tools-heading\">Platformlar, Ara\u00e7lar ve E\u011fitim Videolar\u0131<\/h2>\r\n        <p>Basit sunum yaz\u0131l\u0131mlar\u0131ndan yapay zeka destekli hik\u00e2ye olu\u015fturuculara kadar, ad\u0131m ad\u0131m y\u00f6nergeler, e\u011fitim videolar\u0131 ve ba\u015flang\u0131\u00e7 ipu\u00e7lar\u0131 i\u00e7eren sekiz ara\u00e7.<\/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\">Temel Ara\u00e7<\/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\">E\u011fitimcilerin metin, g\u00f6rseller ve sesli anlat\u0131m\u0131 basit, eri\u015filebilir bir formatta birle\u015ftirmesini sa\u011flayan \u00fccretsiz, bulut tabanl\u0131 bir sunum arac\u0131. Kurulum gerektirmez; yap\u0131land\u0131r\u0131lm\u0131\u015f, slayt slayt sosyal hik\u00e2yeler i\u00e7in idealdir.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Yeni bo\u015f bir sunum olu\u015fturun \u2192 her hik\u00e2ye ad\u0131m\u0131 i\u00e7in bir slayt \u2192 a\u00e7\u0131k g\u00f6rseller ekleyin \u2192 k\u0131sa c\u00fcmleler ekleyin \u2192 anlat\u0131m i\u00e7in <em>Insert \u2192 Audio<\/em> se\u00e7ene\u011fini kullan\u0131n \u2192 tutarl\u0131 bir d\u00fczeni koruyun \u2192 ailelerle kolay payla\u015f\u0131m i\u00e7in PDF veya video olarak d\u0131\u015fa aktar\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 \u00dccretsiz<\/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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@SimonSezIT\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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\">Hik\u00e2ye Platformu<\/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\">Haz\u0131r d\u00fczenler, karakterler ve g\u00f6rsel \u015fablonlar i\u00e7eren \u00f6zel bir dijital hik\u00e2ye anlat\u0131m platformu. S\u0131n\u0131rl\u0131 teknik deneyime sahip e\u011fitimciler, her sayfada kay\u0131tl\u0131 sesli anlat\u0131mla birlikte \u00f6zenli, yap\u0131land\u0131r\u0131lm\u0131\u015f hik\u00e2yeleri h\u0131zl\u0131ca \u00fcretebilir.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              \u00dccretsiz bir hesap olu\u015fturun \u2192 \u00e7ocu\u011fa uygun bir kitap d\u00fczeni se\u00e7in \u2192 her hik\u00e2ye ad\u0131m\u0131 i\u00e7in bir sayfa \u2192 g\u00f6rseller ve simgeler ekleyin \u2192 k\u0131sa, olumlu dil i\u00e7eren c\u00fcmleler yaz\u0131n \u2192 her sayfada do\u011frudan sesli anlat\u0131m kaydedin \u2192 duygusal uygunlu\u011fu g\u00f6zden ge\u00e7irin \u2192 dijital olarak payla\u015f\u0131n veya video\/PDF olarak d\u0131\u015fa aktar\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 \u00dccretsiz 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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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\">Video D\u00fczenleme<\/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\">E\u011fitimcilerin foto\u011fraf, video klip, sesli anlat\u0131m ve m\u00fczi\u011fi \u00f6zenli sosyal hik\u00e2yelerde birle\u015ftirmesini sa\u011flayan, s\u00fcr\u00fckle-b\u0131rak aray\u00fcz\u00fc ve kapsaml\u0131 yerle\u015fik medya k\u00fct\u00fcphanesi sunan \u00e7ok y\u00f6nl\u00fc bir tasar\u0131m ve video platformu.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Bir Video veya Sunum \u015fablonu se\u00e7in \u2192 sade, minimal bir tasar\u0131m se\u00e7in \u2192 kendi g\u00f6rsellerinizi\/kliplerinizi y\u00fckleyin veya k\u00fct\u00fcphaneyi kullan\u0131n \u2192 g\u00f6rselleri mant\u0131ksal bir s\u0131raya dizin \u2192 basit metin altyaz\u0131lar\u0131 ekleyin \u2192 anlat\u0131m\u0131 y\u00fckleyin veya kaydedin \u2192 d\u00fc\u015f\u00fck seviyeli arka plan m\u00fczi\u011fi ekleyin \u2192 video olarak d\u0131\u015fa aktar\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/span>\r\n              <span class=\"badge badge-photo\">\ud83d\uddbc Foto\u011fraf ve Video<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 \u00dccretsiz 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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@PrimalVideo\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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 Comic Creator\">\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\">Karikat\u00fcr Platformu<\/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\">\u0130ll\u00fcstrasyonlu karakterler, konu\u015fma ve d\u00fc\u015f\u00fcnce balonlar\u0131 ile s\u0131ral\u0131 paneller tasarlamak i\u00e7in bir \u00e7izgi roman ve g\u00f6rsel anlat\u0131m arac\u0131; duygular\u0131, sosyal kurallar\u0131 ve perspektifleri \u00e7ocu\u011fa uygun bir formatta a\u00e7\u0131k\u00e7a iletir.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Bir Pixton hesab\u0131 olu\u015fturun \u2192 \u00e7ocu\u011fa veya tan\u0131d\u0131k ki\u015filere benzeyen karakterler tasarlay\u0131n \u2192 basit durumsal arka planlar se\u00e7in \u2192 her hik\u00e2ye ad\u0131m\u0131 i\u00e7in bir panel olu\u015fturun \u2192 eylem ve hisleri a\u00e7\u0131klamak i\u00e7in konu\u015fma\/d\u00fc\u015f\u00fcnce balonlar\u0131 kullan\u0131n \u2192 metni k\u0131sa ve net tutun \u2192 g\u00f6rsel veya PDF olarak d\u0131\u015fa aktar\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/span>\r\n              <span class=\"badge badge-creative\">\ud83c\udfa8 Yarat\u0131c\u0131<\/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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@pixtonedu4231\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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 Animation Platform\">\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\">Animasyon Platformu<\/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\">Haz\u0131r karakterler, arka planlar ve sahneler i\u00e7eren animasyonlu bir hik\u00e2ye anlat\u0131m\u0131 ve sunum platformu. Yava\u015f, kas\u0131tl\u0131 animasyon dizileri arac\u0131l\u0131\u011f\u0131yla sosyal davran\u0131\u015flar\u0131 g\u00f6steren dinamik g\u00f6rsel anlat\u0131lar olu\u015fturmak i\u00e7in idealdir.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Basit bir animasyonlu \u015fablon se\u00e7in \u2192 \u00f6nce hik\u00e2ye s\u0131ras\u0131n\u0131 planlay\u0131n \u2192 sosyal duruma uygun karakterler ve sahneler ekleyin \u2192 bili\u015fsel a\u015f\u0131r\u0131 y\u00fcklenmeyi \u00f6nlemek i\u00e7in eylemleri yava\u015f\u00e7a animasyonland\u0131r\u0131n \u2192 k\u0131sa alt yaz\u0131lar ekleyin \u2192 her sahneyle uyumlu anlat\u0131m\u0131 kaydedin veya y\u00fckleyin \u2192 video olarak d\u0131\u015fa aktar\u0131n.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-animation\">\u2728 Animasyon<\/span>\r\n              <span class=\"badge badge-visual\">\ud83d\udcf7 G\u00f6rsel<\/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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@JenJonson\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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 Platform\">\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\">Yapay Zeka Destekli<\/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\">\u00d6\u011fretmen y\u00f6nlendirmelerine dayanarak ill\u00fcstrasyonlu hik\u00e2ye taslaklar\u0131 \u00fcreten, yapay zeka destekli bir e\u011fitim hik\u00e2yesi anlat\u0131m platformu. E\u011fitimciler bir sosyal senaryo girer, g\u00f6rsellerle birlikte bir taslak al\u0131r, ard\u0131ndan dili ve g\u00f6rselleri her \u00e7ocu\u011fun geli\u015fim seviyesine uyacak \u015fekilde d\u00fczenler.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Platforma girin \u2192 hik\u00e2ye olu\u015fturmay\u0131 se\u00e7in \u2192 a\u00e7\u0131k ve net bir y\u00f6nlendirme sa\u011flay\u0131n \u2192 yapay zeka taraf\u0131ndan \u00fcretilen tasla\u011f\u0131 g\u00f6zden ge\u00e7irin \u2192 dili sosyal hik\u00e2ye ilkeleriyle uyumlu hale getirin \u2192 kelime hazinesini ve c\u00fcmle uzunlu\u011funu \u00e7ocu\u011fun seviyesine g\u00f6re ayarlay\u0131n \u2192 olu\u015fturulan ill\u00fcstrasyonlar\u0131 d\u00fczenleyin \u2192 dijital formatta d\u0131\u015fa aktar\u0131n. Kullanmadan \u00f6nce her zaman ki\u015fiselle\u015ftirin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Yapay Zeka Destekli<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/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 E\u011fitim Videosunu \u0130zle<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/@storywizardai\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\ud83d\udcfa Kanala Bak<\/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 Coding Platform\">\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\">Kodlama Platformu<\/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\">5\u20137 ya\u015f aras\u0131 \u00e7ocuklar i\u00e7in tasarlanm\u0131\u015f (e\u011fitimciler taraf\u0131ndan da kullan\u0131labilir), karakterleri hareket, konu\u015fma ve sesle canland\u0131rmak i\u00e7in s\u00fcr\u00fckle-b\u0131rak blok kodlama kullanan, \u00fccretsiz ve ba\u015flang\u0131\u00e7 seviyesine uygun bir tablet uygulamas\u0131; a\u00e7\u0131k neden-sonu\u00e7 dizileriyle etkile\u015fimli sosyal hik\u00e2yeler olu\u015fturur.<\/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              Ad\u0131m ad\u0131m k\u0131lavuz\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Tablette ScratchJr'\u0131 a\u00e7\u0131n \u2192 yeni bir proje olu\u015fturun \u2192 sosyal ortam i\u00e7in bir arka plan se\u00e7in \u2192 tan\u0131d\u0131k karakterler ekleyin \u2192 temel eylemleri (hareket et, konu\u015f, bekle) programlay\u0131n \u2192 kay\u0131tl\u0131 sesli mesajlar veya metin ipu\u00e7lar\u0131 ekleyin \u2192 bloklar\u0131 do\u011fru s\u0131rayla d\u00fczenleyin \u2192 \u00e7ocukla test edin ve gerekti\u011finde d\u00fczenleyin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Etkile\u015fimli<\/span>\r\n              <span class=\"badge badge-coding\">\ud83d\udcbb Kodlama<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/span>\r\n              <span class=\"badge badge-freeplan\">\ud83c\udd93 \u00dccretsiz<\/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 Genel E\u011fitim Videosu<\/a>\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=WGhart5oFck\" target=\"_blank\" rel=\"noopener\" class=\"card-btn card-btn-outline\">\u25b6 Sosyal Hik\u00e2ye E\u011fitim Videosu<\/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 AI Platform\">\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\">Yapay Zeka Destekli<\/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\">ASD e\u011fitimi i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f, yapay zeka destekli bir sosyal hik\u00e2ye platformu; \u00f6\u011fretmenlerin yapay zeka yard\u0131m\u0131yla olu\u015fturabilece\u011fi veya s\u0131f\u0131rdan tamamen kendi ba\u015flar\u0131na olu\u015fturup \u00f6zelle\u015ftirebilece\u011fi d\u00fczenlenebilir hik\u00e2ye s\u00fcr\u00fcmleri ve bo\u015f storyboard \u015fablonlar\u0131 sunar.<\/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              Pedagojik ipu\u00e7lar\u0131\r\n            <\/button>\r\n            <div class=\"card-detail\">\r\n              Sosyal durumu a\u00e7\u0131klayan bir y\u00f6nlendirme verin \u2192 platform ill\u00fcstrasyonlu bir hik\u00e2ye olu\u015fturur \u2192 i\u00e7eri\u011fi geli\u015fimsel uygunluk a\u00e7\u0131s\u0131ndan g\u00f6zden ge\u00e7irin \u2192 dili, g\u00f6rselleri ve senaryo ayr\u0131nt\u0131lar\u0131n\u0131 d\u00fczenleyin \u2192 gerekti\u011finde tamamen ki\u015fiselle\u015ftirilmi\u015f anlat\u0131lar olu\u015fturmak i\u00e7in storyboard olu\u015fturucuyu kullan\u0131n. Bir \u00e7ocukla payla\u015fmadan \u00f6nce t\u00fcm yapay zeka \u00e7\u0131kt\u0131s\u0131n\u0131 her zaman g\u00f6zden ge\u00e7irin.\r\n            <\/div>\r\n            <div class=\"card-badges\">\r\n              <span class=\"badge badge-ai\">\ud83e\udd16 Yapay Zeka Destekli<\/span>\r\n              <span class=\"badge badge-interactive\">\ud83d\uddb1 Etkile\u015fimli<\/span>\r\n              <span class=\"badge badge-beginner\">\u2705 Ba\u015flang\u0131\u00e7 Seviyesine Uygun<\/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 Platforma Bak<\/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 Dijital Sosyal Hik\u00e2yeler \u0130\u00e7in G\u00f6rsel Tasar\u0131m \u0130lkeleri<\/h3>\r\n        <p>ASD'li \u00e7ocuklar i\u00e7in dijital hik\u00e2yeler olu\u015ftururken dikkat edilmesi gereken temel tasar\u0131m hususlar\u0131 (EarlyASD Uygulama K\u0131lavuzu'nun 3. B\u00f6l\u00fcm\u00fcnden)<\/p>\r\n        <div class=\"principles-list\">\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Hik\u00e2ye Uzunlu\u011fu:<\/strong> Genellikle 5\u201310 slayt yeterlidir. Her hik\u00e2yede belirli bir duruma odaklan\u0131n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>G\u00f6rsel Sadelik:<\/strong> Her slaytta g\u00f6rsel \u00f6\u011fe say\u0131s\u0131n\u0131 s\u0131n\u0131rlay\u0131n. Hik\u00e2ye ad\u0131m\u0131yla do\u011frudan ili\u015fkili a\u00e7\u0131k g\u00f6rseller kullan\u0131n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Tutarl\u0131 D\u00fczen:<\/strong> Tahmin edilebilirli\u011fi desteklemek i\u00e7in ba\u015ftan sona tek bir d\u00fczen, stil ve yaz\u0131 tipi kullan\u0131n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Sesli Anlat\u0131m:<\/strong> Sakin ve net bir tempo kullan\u0131n. Tan\u0131d\u0131k sesler konforu ve kat\u0131l\u0131m\u0131 art\u0131r\u0131r.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Ama\u00e7l\u0131 Animasyon:<\/strong> Yaln\u0131zca anlamay\u0131 ger\u00e7ekten destekledi\u011fi durumlarda minimal, yava\u015f animasyonlar kullan\u0131n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Destekleyici Dil:<\/strong> Direnci azaltmak i\u00e7in komutlar yerine \"Deneyebilirim\" gibi ifadeler kullan\u0131n.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Ses-G\u00f6rsel Uyumu:<\/strong> Anlat\u0131m ve g\u00f6rsellerin ayn\u0131 ad\u0131m\u0131 e\u015f zamanl\u0131 olarak anlatmas\u0131 i\u00e7in bunlar\u0131 senkronize edin.<\/p><\/div>\r\n          <div class=\"principle-item\"><div class=\"principle-dot\"><\/div><p><strong>Gizlilik ve \u0130zin:<\/strong> \u00c7ocuklar\u0131n ger\u00e7ek foto\u011fraflar\u0131n\u0131, videolar\u0131n\u0131 veya ses kay\u0131tlar\u0131n\u0131 kullanmadan \u00f6nce ebeveyn izni al\u0131n.<\/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>Dijital Sosyal Hik\u00e2ye Ara\u00e7lar\u0131 ve Platformlar\u0131 | EarlyASD EarlyASD \u00b7 E\u011fitim Kaynaklar\u0131 Merkezi Dijital Sosyal Hik\u00e2yeAra\u00e7lar\u0131 ve Platformlar\u0131 Dijital Sosyal Hik\u00e2yeler; g\u00f6rseller, ses, animasyon ve etkile\u015fim gibi multimedya unsurlar\u0131n\u0131 kullanarak Otizm Spektrum Bozuklu\u011fu olan \u00e7ocuklar\u0131n sosyal durumlar\u0131 anlamas\u0131na ve bu durumlarda y\u00f6n bulmas\u0131na yard\u0131mc\u0131 olur. Bu derlenmi\u015f kaynak merkezi, s\u0131n\u0131f ortam\u0131nda etkili ve ilgi \u00e7ekici [&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-4104","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4104","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=4104"}],"version-history":[{"count":10,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4104\/revisions"}],"predecessor-version":[{"id":4137,"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/pages\/4104\/revisions\/4137"}],"wp:attachment":[{"href":"https:\/\/earlyasd.eu\/web\/wp-json\/wp\/v2\/media?parent=4104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}